chg: [genericElement:indexTable] Refactored code and added support of compact display

src/View/Helper/BootstrapHelper.php

@@ -1793,7 +1793,7 @@ class BoostrapDropdownMenu extends BootstrapGeneric
             }
             $params['data-open-form-id'] = mt_rand();
         }
-        
+
         $label = $this->genNode('span', [
             'class' => ['ms-2',],
         ], h($entry['text']));

templates/Instance/home.php

@@ -1,5 +1,5 @@
 <?php
-$bookmarks = !empty($loggedUser->user_settings_by_name['ui.bookmarks']['value']) ? json_decode($loggedUser->user_settings_by_name['ui.bookmarks']['value'], true) : []
+$bookmarks = !empty($loggedUser->user_settings_by_name['ui.bookmarks']['value']) ? json_decode($loggedUser->user_settings_by_name['ui.bookmarks']['value'], true) : [];
 ?>
 
 <h3>

templates/element/genericElements/ListTopBar/group_table_action.php

@@ -4,12 +4,19 @@ if (empty($data['table_setting_id'])) {
 }
 $tableSettings = !empty($loggedUser->user_settings_by_name['ui.table_setting']['value']) ? json_decode($loggedUser->user_settings_by_name['ui.table_setting']['value'], true) : [];
 $tableSettings = !empty($tableSettings[$data['table_setting_id']]) ? $tableSettings[$data['table_setting_id']] : [];
+$compactDisplay = !empty($tableSettings['compact_display']);
 
 $availableColumnsHtml = $this->element('/genericElements/ListTopBar/group_table_action/hiddenColumns', [
     'table_data' => $table_data,
     'tableSettings' => $tableSettings,
     'table_setting_id' => $data['table_setting_id'],
 ]);
+$compactDisplayHtml = $this->element('/genericElements/ListTopBar/group_table_action/compactDisplay', [
+    'table_data' => $table_data,
+    'tableSettings' => $tableSettings,
+    'table_setting_id' => $data['table_setting_id'],
+    'compactDisplay' => $compactDisplay
+]);
 ?>
 <?php if (!isset($data['requirement']) || $data['requirement']) : ?>
     <?php
@@ -28,15 +35,15 @@ $availableColumnsHtml = $this->element('/genericElements/ListTopBar/group_table_
             'data-table_setting_id' => $data['table_setting_id'],
         ],
         'menu' => [
-            [
+            // [
-                'text' => __('Group by'),
+            //     'text' => __('Group by'),
-                'icon' => 'layer-group',
+            //     'icon' => 'layer-group',
-                'menu' => [
+            //     'menu' => [
-                    [
+            //         [
-                        'text' => 'fields to be grouped by',
+            //             'text' => 'fields to be grouped by', TODO:implement
-                    ]
+            //         ]
-                ],
+            //     ],
-            ],
+            // ],
             [
                 'text' => __('Show/hide columns'),
                 'icon' => 'eye-slash',
@@ -48,9 +55,8 @@ $availableColumnsHtml = $this->element('/genericElements/ListTopBar/group_table_
                 ],
             ],
             [
-                'text' => __('Compact display'),
+                'html' => $compactDisplayHtml,
-                'icon' => 'text-height'
+            ]
-            ],
         ]
     ]);
     ?>

templates/element/genericElements/ListTopBar/group_table_action/compactDisplay.php

@@ -0,0 +1,46 @@
+<?php
+$compactDisplayInputSeed = 'seed-' . mt_rand();
+?>
+
+<label class="dropdown-item d-flex align-items-center cursor-pointer" href="#" for="<?= $compactDisplayInputSeed ?>">
+    <span class="fa fa-text-height"></span>
+    <span class="ms-2"><?= __('Compact display') ?></span>
+    <input id="<?= $compactDisplayInputSeed ?>" type="checkbox" class="checkbox-compact-table form-check-input ms-auto" <?= $compactDisplay ? 'checked="checked"' : '' ?>>
+</label>
+
+<script>
+    (function() {
+        const debouncedCompactSaver = debounce(mergeAndSaveSettings, 2000)
+
+        $('#<?= $compactDisplayInputSeed ?>').change(function() {
+            const $dropdownMenu = $(this).closest('.dropdown')
+            const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
+            const $container = $dropdownMenu.closest('div[id^="table-container-"]')
+            const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
+            const table_setting_id = $dropdownMenu.data('table_setting_id');
+            toggleCompactState(this.checked, $table)
+            let newTableSettings = {}
+            newTableSettings[table_setting_id] = {
+                'compact_display': this.checked
+            }
+            debouncedCompactSaver(table_setting_id, newTableSettings)
+        })
+
+        function toggleCompactState(isCompact, $table) {
+            if (isCompact) {
+                $table.addClass('table-sm')
+            } else {
+                $table.removeClass('table-sm')
+            }
+        }
+
+        $(document).ready(function() {
+            const $checkbox = $('#<?= $compactDisplayInputSeed ?>')
+            const $dropdownMenu = $checkbox.closest('.dropdown')
+            const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
+            const $container = $dropdownMenu.closest('div[id^="table-container-"]')
+            const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
+            toggleCompactState($checkbox[0].checked, $table)
+        })
+    })()
+</script>

templates/element/genericElements/ListTopBar/group_table_action/hiddenColumns.php

@@ -10,7 +10,7 @@ foreach ($table_data['fields'] as $field) {
     $availableColumnsHtml .= sprintf(
         '<div class="form-check">
             <input class="form-check-input" type="checkbox" value="" id="columnCheck-%s" data-columnname="%s" %s>
-            <label class="form-check-label w-100" for="columnCheck-%s">
+            <label class="form-check-label w-100 cursor-pointer" for="columnCheck-%s">
                 %s
             </label>
         </div>',
@@ -29,72 +29,48 @@ echo $availableColumnsHtml;
 ?>
 
 <script>
-    const debouncedHiddenColumnSaver = debounce(saveHiddenColumns, 2000)
+    (function() {
-    $('form.visible-column-form').find('input').change(function() {
+        const debouncedHiddenColumnSaver = debounce(mergeAndSaveSettings, 2000)
-        const $dropdownMenu = $(this).closest(`[data-table-random-value]`)
+        $('form.visible-column-form').find('input').change(function() {
-        const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
+            const $dropdownMenu = $(this).closest(`[data-table-random-value]`)
-        const $container = $dropdownMenu.closest('div[id^="table-container-"]')
+            const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
-        const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
+            const $container = $dropdownMenu.closest('div[id^="table-container-"]')
-        const table_setting_id = $dropdownMenu.data('table_setting_id');
+            const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
-        toggleColumn(this.getAttribute('data-columnname'), this.checked, $table)
+            const table_setting_id = $dropdownMenu.data('table_setting_id');
-        tableSettings = {}
-        tableSettings[table_setting_id] = genTableSettings($container)
-        debouncedHiddenColumnSaver(table_setting_id, tableSettings)
-    })
-
-    function toggleColumn(columnName, isVisible, $table) {
-        if (isVisible) {
-            $table.find(`th[data-columnname="${columnName}"],td[data-columnname="${columnName}"]`).show()
-        } else {
-            $table.find(`th[data-columnname="${columnName}"],td[data-columnname="${columnName}"]`).hide()
-        }
-    }
-
-    function saveHiddenColumns(table_setting_id, newTableSettings) {
-        const settingName = 'ui.table_setting'
-        const urlGet = `/user-settings/getSettingByName/${settingName}`
-        AJAXApi.quickFetchJSON(urlGet).then(tableSettings => {
-            tableSettings = JSON.parse(tableSettings.value)
-            newTableSettings = mergeNewTableSettingsIntoOld(table_setting_id, tableSettings, newTableSettings)
-            saveTableSetting(settingName, newTableSettings)
-        }).catch((e) => { // setting probably doesn't exist
-            saveTableSetting(settingName, newTableSettings)
-        })
-    }
-
-    function genTableSettings($container) {
-        let tableSetting = {};
-        const $hiddenColumns = $container.find('form.visible-column-form').find('input').not(':checked')
-        const hiddenColumns = Array.from($hiddenColumns.map(function() {
-            return $(this).data('columnname')
-        }))
-        tableSetting['hidden_column'] = hiddenColumns
-        return tableSetting
-    }
-
-    function mergeNewTableSettingsIntoOld(table_setting_id, oldTableSettings, newTableSettings) {
-        tableSettings = Object.assign(oldTableSettings, newTableSettings)
-        return tableSettings
-    }
-
-    function saveTableSetting(settingName, newTableSettings) {
-        const urlSet = `/user-settings/setSetting/${settingName}`
-        AJAXApi.quickFetchAndPostForm(urlSet, {
-            value: JSON.stringify(newTableSettings)
-        }, {
-            provideFeedback: false
-        })
-    }
-
-    $(document).ready(function() {
-        const $form = $('form.visible-column-form')
-        const $checkboxes = $form.find('input').not(':checked')
-        const $dropdownMenu = $form.closest('.dropdown')
-        const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
-        const $container = $dropdownMenu.closest('div[id^="table-container-"]')
-        const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
-        $checkboxes.each(function() {
             toggleColumn(this.getAttribute('data-columnname'), this.checked, $table)
+            let tableSettings = {}
+            tableSettings[table_setting_id] = genTableSettings($container)
+            debouncedHiddenColumnSaver(table_setting_id, tableSettings)
         })
-    })
+
+        function toggleColumn(columnName, isVisible, $table) {
+            if (isVisible) {
+                $table.find(`th[data-columnname="${columnName}"],td[data-columnname="${columnName}"]`).show()
+            } else {
+                $table.find(`th[data-columnname="${columnName}"],td[data-columnname="${columnName}"]`).hide()
+            }
+        }
+
+        function genTableSettings($container) {
+            let tableSetting = {};
+            const $hiddenColumns = $container.find('form.visible-column-form').find('input').not(':checked')
+            const hiddenColumns = Array.from($hiddenColumns.map(function() {
+                return $(this).data('columnname')
+            }))
+            tableSetting['hidden_column'] = hiddenColumns
+            return tableSetting
+        }
+
+        $(document).ready(function() {
+            const $form = $('form.visible-column-form')
+            const $checkboxes = $form.find('input').not(':checked')
+            const $dropdownMenu = $form.closest('.dropdown')
+            const tableRandomValue = $dropdownMenu.attr('data-table-random-value')
+            const $container = $dropdownMenu.closest('div[id^="table-container-"]')
+            const $table = $container.find(`table[data-table-random-value="${tableRandomValue}"]`)
+            $checkboxes.each(function() {
+                toggleColumn(this.getAttribute('data-columnname'), this.checked, $table)
+            })
+        })
+    })()
 </script>

templates/layout/default.php

@@ -43,6 +43,7 @@ $sidebarOpen = $loggedUser->user_settings_by_name_with_fallback['ui.sidebar.expa
     <?= $this->Html->script('bootstrap-helper.js') ?>
     <?= $this->Html->script('api-helper.js') ?>
     <?= $this->Html->script('select2.min.js') ?>
+    <?= $this->Html->script('table-settings.js') ?>
     <?= $this->Html->script('CodeMirror/codemirror.js') ?>
     <?= $this->Html->script('CodeMirror/mode/javascript/javascript') ?>
     <?= $this->Html->script('CodeMirror/addon/hint/show-hint') ?>

webroot/css/main.css

@@ -58,6 +58,10 @@
     line-height: 1.5;
 }
 
+.cursor-pointer {
+    cursor: pointer;
+}
+
 .link-unstyled, .link-unstyled:link, .link-unstyled:hover {
   color: inherit;
   text-decoration: inherit;

webroot/js/bootstrap-helper.js

@@ -308,7 +308,6 @@ class Toaster {
                         return $(this).is($toast)
                     });
                     if (hoveredElements.length > 0) {
-                        console.log('Toast hovered. Not hidding')
                         evt.preventDefault()
                         setTimeout(() => {
                             $toast.toast('hide')

webroot/js/table-settings.js

@@ -0,0 +1,34 @@
+// function saveHiddenColumns(table_setting_id, newTableSettings) {
+function mergeAndSaveSettings(table_setting_id, newTableSettings) {
+    const settingName = 'ui.table_setting'
+    const urlGet = `/user-settings/getSettingByName/${settingName}`
+    AJAXApi.quickFetchJSON(urlGet).then(tableSettings => {
+        tableSettings = JSON.parse(tableSettings.value)
+        newTableSettings = mergeNewTableSettingsIntoOld(table_setting_id, tableSettings, newTableSettings)
+        saveTableSetting(settingName, newTableSettings)
+    }).catch((e) => { // setting probably doesn't exist
+        saveTableSetting(settingName, newTableSettings)
+    })
+}
+
+function mergeNewTableSettingsIntoOld(table_setting_id, oldTableSettings, newTableSettings) {
+    // Merge recursively
+    tableSettings = Object.assign({}, oldTableSettings, newTableSettings)
+    tableSettings[table_setting_id] = Object.assign({}, oldTableSettings[table_setting_id], newTableSettings[table_setting_id])
+    return tableSettings
+}
+
+function saveTableSetting(settingName, newTableSettings) {
+    const urlSet = `/user-settings/setSetting/${settingName}`
+    AJAXApi.quickFetchAndPostForm(urlSet, {
+        value: JSON.stringify(newTableSettings)
+    }, {
+        provideFeedback: false
+    }).then(() => {
+        UI.toast({
+            variant: 'success',
+            title: 'Table setting saved',
+            delay: 3000
+        })
+    })
+}