mirror of
https://github.com/Dolibarr/dolibarr.git
synced 2025-12-06 17:48:25 +01:00
316 lines
12 KiB
PHP
316 lines
12 KiB
PHP
<?php
|
|
/*
|
|
* Copyright (C) 2024 Anthony Damhet <a.damhet@progiseize.fr>
|
|
* Copyright (C) 2024 Frédéric France <frederic.france@free.fr>
|
|
*
|
|
* This program is free software; you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation; either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
// Load Dolibarr environment
|
|
require '../../../../main.inc.php';
|
|
|
|
/**
|
|
* @var DoliDB $db
|
|
* @var HookManager $hookmanager
|
|
* @var Translate $langs
|
|
* @var User $user
|
|
*/
|
|
|
|
// Protection if external user
|
|
if ($user->socid > 0) {
|
|
accessforbidden();
|
|
}
|
|
|
|
// Includes
|
|
require_once DOL_DOCUMENT_ROOT . '/admin/tools/ui/class/documentation.class.php';
|
|
|
|
// Load documentation translations
|
|
$langs->load('uxdocumentation');
|
|
|
|
//
|
|
$documentation = new Documentation($db);
|
|
$group = 'Content';
|
|
$experimentName = 'TableRowIntuitiveSelect';
|
|
|
|
|
|
$js = [
|
|
'/includes/ace/src/ace.js',
|
|
'/includes/ace/src/ext-statusbar.js',
|
|
'/includes/ace/src/ext-language_tools.js',
|
|
];
|
|
$css = [
|
|
|
|
];
|
|
|
|
// Output html head + body - Param is Title
|
|
$documentation->docHeader($langs->trans($experimentName, $group), $js, $css);
|
|
|
|
// Set view for menu and breadcrumb
|
|
$documentation->view = [$group, $experimentName];
|
|
|
|
// Output sidebar
|
|
$documentation->showSidebar();
|
|
$form = new Form($db);
|
|
|
|
?>
|
|
|
|
<div class="doc-wrapper">
|
|
|
|
<?php $documentation->showBreadCrumb(); ?>
|
|
|
|
<div class="doc-content-wrapper">
|
|
|
|
<h1 class="documentation-title"><?php echo $langs->trans($experimentName); ?></h1>
|
|
|
|
<?php $documentation->showSummary(); ?>
|
|
|
|
<div class="documentation-section" >
|
|
<h2 class="documentation-title" >Select table lines by <kbd>Ctrl</kbd> + <kbd>Click</kbd></h2>
|
|
|
|
|
|
<h2>Description</h2>
|
|
<p>
|
|
This feature allows users to <strong>select</strong> or <strong>deselect</strong> table rows (<code><tr></code>) in an HTML table:
|
|
</p>
|
|
<ul>
|
|
<li>Holding down <strong>Ctrl</strong> (or <strong>Cmd</strong> on Mac) allows users to add or remove individual rows from the selection.</li>
|
|
<li>Holding down <strong>Shift</strong> allows users to <strong>select a range</strong> of rows between the last selected row and the clicked row.</li>
|
|
</ul>
|
|
|
|
<h2>Detailed Behavior</h2>
|
|
<table border="1" cellpadding="6" cellspacing="0">
|
|
<thead>
|
|
<tr>
|
|
<th>User Action</th>
|
|
<th>Expected Result</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Ctrl + Click on a row</td>
|
|
<td>Toggles selection of the clicked row (add/remove).</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Shift + Click on a row</td>
|
|
<td>Selects all rows between the last selected and clicked row.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>HTML Requirements</h2>
|
|
<p>
|
|
The table should follow a standard structure with <code><thead></code> and <code><tbody></code> elements,
|
|
and each <code><tr></code> must be selectable by applying <code>.row-with-select</code> CSS class and have checkbox with <code>.checkforselect</code> class
|
|
</p>
|
|
|
|
<h2>Key Notes</h2>
|
|
<ul>
|
|
<li>The script supports <strong>Cmd</strong> key (for Mac users) as an alternative to <strong>Ctrl</strong>.</li>
|
|
<li>When Shift-clicking without a previously selected row, selection will not start.</li>
|
|
<li>When user start selection, the css rules will remove text selection possibility.</li>
|
|
<li>When the user double-clicks, the selection functionality is reactivated, but the reference to the last selected row is cleared, thus disabling the <code>Shift + Click</code> range selection behavior.</li>
|
|
</ul>
|
|
|
|
|
|
<div class="documentation-example">
|
|
<div class="div-table-responsive">
|
|
<table class="tagtable liste listwithfilterbefore table-with-select" id="try-line-ctrl-click-feature">
|
|
<thead>
|
|
<tr class="liste_titre_filter">
|
|
<td class="liste_titre center maxwidthsearch">
|
|
<div class="nowraponall">
|
|
<button type="submit" class="liste_titre button_search reposition" name="button_search_x" value="x">
|
|
<span class="fas fa-search"></span>
|
|
</button>
|
|
<button type="submit" class="liste_titre button_removefilter reposition" name="button_removefilter_x" value="x">
|
|
<span class="fas fa-times"></span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td><input class="flat" type="text" name="search_firstname" value=""></td>
|
|
<td><input class="flat" type="text" name="search_lasttname" value=""></td>
|
|
<td class="center"><input class="maxwidth50 flat" type="text" name="search_age" value=""></td>
|
|
<td class="right"><input class="flat" type="text" name="search_country" value=""></td>
|
|
</tr>
|
|
<tr class="liste_titre">
|
|
<th>
|
|
<dl class="dropdown" style="opacity: 0.5;">
|
|
<dt><span class="fas fa-list" style=""></span></dt>
|
|
<dd class="dropdowndd">
|
|
<div class="multiselectcheckboxselectedfields">
|
|
<ul class="selectedfieldsleft"></ul>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
<div class="inline-block checkallactions">
|
|
<input type="checkbox" id="checkforselects" name="checkforselects" class="checkallactions" >
|
|
<script nonce="<?php echo getNonce(); ?>" >
|
|
// TODO : Dolibarr use this kind of script inclusion for toggle checkboxes : we need to add a more global js method
|
|
$(document).ready(function() {
|
|
$("#checkforselects").click(function() {
|
|
if($(this).is(':checked')){
|
|
console.log("We check all checkforselect and trigger the change method");
|
|
$(".checkforselect").prop('checked', true).trigger('change');
|
|
}
|
|
else
|
|
{
|
|
console.log("We uncheck all");
|
|
$(".checkforselect").prop('checked', false).trigger('change');
|
|
}
|
|
if (typeof initCheckForSelect == 'function') { initCheckForSelect(0, "massaction", "checkforselect"); } else { console.log("No function initCheckForSelect found. Call won't be done."); } });
|
|
$(".checkforselect").change(function() {
|
|
// TODO : change this by a simple css rule
|
|
$(this).closest("tr").toggleClass("highlight", this.checked);
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</th>
|
|
<th class="wrapcolumntitle left" title="First Name">First Name</th>
|
|
<th class="wrapcolumntitle left" title="Last Name">Last Name</th>
|
|
<th class="wrapcolumntitle center" title="Age">Age</th>
|
|
<th class="wrapcolumntitle right" title="Country">Country</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="oddeven row-with-select" >
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">John</td>
|
|
<td class="left">Doe</td>
|
|
<td class="center">37</td>
|
|
<td class="right">U.S.A</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Jack</td>
|
|
<td class="left">Sparrow</td>
|
|
<td class="center">29</td>
|
|
<td class="right">Caribbean</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Sacha</td>
|
|
<td class="left">Ketchum</td>
|
|
<td class="center">16</td>
|
|
<td class="right">Kanto</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Albert</td>
|
|
<td class="left">Einstein</td>
|
|
<td class="center">72</td>
|
|
<td class="right">Germany</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select" >
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">John</td>
|
|
<td class="left">Doe</td>
|
|
<td class="center">37</td>
|
|
<td class="right">U.S.A</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Jack</td>
|
|
<td class="left">Sparrow</td>
|
|
<td class="center">29</td>
|
|
<td class="right">Caribbean</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Sacha</td>
|
|
<td class="left">Ketchum</td>
|
|
<td class="center">16</td>
|
|
<td class="right">Kanto</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Albert</td>
|
|
<td class="left">Einstein</td>
|
|
<td class="center">72</td>
|
|
<td class="right">Germany</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select" >
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">John</td>
|
|
<td class="left">Doe</td>
|
|
<td class="center">37</td>
|
|
<td class="right">U.S.A</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Jack</td>
|
|
<td class="left">Sparrow</td>
|
|
<td class="center">29</td>
|
|
<td class="right">Caribbean</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Sacha</td>
|
|
<td class="left">Ketchum</td>
|
|
<td class="center">16</td>
|
|
<td class="right">Kanto</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Albert</td>
|
|
<td class="left">Einstein</td>
|
|
<td class="center">72</td>
|
|
<td class="right">Germany</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select" >
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">John</td>
|
|
<td class="left">Doe</td>
|
|
<td class="center">37</td>
|
|
<td class="right">U.S.A</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Jack</td>
|
|
<td class="left">Sparrow</td>
|
|
<td class="center">29</td>
|
|
<td class="right">Caribbean</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Sacha</td>
|
|
<td class="left">Ketchum</td>
|
|
<td class="center">16</td>
|
|
<td class="right">Kanto</td>
|
|
</tr>
|
|
<tr class="oddeven row-with-select">
|
|
<td><input class="checkforselect" type="checkbox" name="" value="" ></td>
|
|
<td class="left">Albert</td>
|
|
<td class="left">Einstein</td>
|
|
<td class="center">72</td>
|
|
<td class="right">Germany</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<?php
|
|
// Output close body + html
|
|
$documentation->docFooter();
|
|
?>
|