cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/72/head
Sami Mokaddem 2021-10-20 11:28:39 +02:00
parent 7941a6530a
commit 43dfacfe72
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
9 changed files with 148 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/Instance/home.php
View File

@ -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>

30
templates/element/genericElements/ListTopBar/group_table_action.php
View File

@ -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'),
'icon' => 'layer-group',
'menu' => [
[
'text' => 'fields to be grouped by',
]
],
],
// [
// 'text' => __('Group by'),
// 'icon' => 'layer-group',
// 'menu' => [
// [
// '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'),
'icon' => 'text-height'
],
'html' => $compactDisplayHtml,
]
]
]);
?>

46
templates/element/genericElements/ListTopBar/group_table_action/compactDisplay.php Normal file
View File

@ -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>

110
templates/element/genericElements/ListTopBar/group_table_action/hiddenColumns.php
View File

@ -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)
$('form.visible-column-form').find('input').change(function() {
const $dropdownMenu = $(this).closest(`[data-table-random-value]`)
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');
toggleColumn(this.getAttribute('data-columnname'), this.checked, $table)
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() {
(function() {
const debouncedHiddenColumnSaver = debounce(mergeAndSaveSettings, 2000)
$('form.visible-column-form').find('input').change(function() {
const $dropdownMenu = $(this).closest(`[data-table-random-value]`)
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');
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>

1
templates/layout/default.php
View File

@ -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') ?>

4
webroot/css/main.css
View File

@ -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;

1
webroot/js/bootstrap-helper.js
View File

@ -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')

34
webroot/js/table-settings.js Normal file
View File

@ -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
})
})
}