From 51d93d40afaa9ede3b4f65862776ef74b414016e Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Thu, 28 Oct 2021 09:27:30 +0200 Subject: [PATCH] chg: [ui] Various UI improvement and cleanup New according bootstrap component and small UI enhancements --- src/Controller/Component/CRUDComponent.php | 5 +- .../Component/Navigation/MetaTemplates.php | 6 ++ src/View/Helper/BootstrapHelper.php | 96 +++++++++++++++++++ .../genericElements/Form/genericForm.php | 62 ++++++------ .../genericElements/Form/submitButton.php | 3 +- .../ListTopBar/group_search.php | 3 +- 6 files changed, 142 insertions(+), 33 deletions(-) diff --git a/src/Controller/Component/CRUDComponent.php b/src/Controller/Component/CRUDComponent.php index 5a5436c..1cb0d15 100644 --- a/src/Controller/Component/CRUDComponent.php +++ b/src/Controller/Component/CRUDComponent.php @@ -684,11 +684,10 @@ class CRUDComponent extends Component return $query; } - public function genQuickFilterConditions(array $params, \Cake\ORM\Query $query, array $quickFilterFields): array + public function genQuickFilterConditions(array $params, array $quickFilterFields): array { $queryConditions = []; foreach ($quickFilterFields as $filterField) { - $likeCondition = false; if (is_array($filterField)) { reset($filterField); $filterFieldName = array_key_first($filterField); @@ -697,8 +696,6 @@ class CRUDComponent extends Component } else { $queryConditions[$filterField] = $params['quickFilter']; } - } - $query->where(['OR' => $queryConditions]); } else { $queryConditions[$filterField] = $params['quickFilter']; } diff --git a/src/Controller/Component/Navigation/MetaTemplates.php b/src/Controller/Component/Navigation/MetaTemplates.php index 91ba4eb..4666676 100644 --- a/src/Controller/Component/Navigation/MetaTemplates.php +++ b/src/Controller/Component/Navigation/MetaTemplates.php @@ -22,6 +22,11 @@ class MetaTemplatesNavigation extends BaseNavigation 'url' => '/metaTemplates/toggle/{{id}}/default', 'url_vars' => ['id' => 'id'], ]); + $this->bcf->addRoute('MetaTemplates', 'update', [ + 'label' => __('Update'), + 'icon' => 'download', + 'url' => '/metaTemplates/update', + ]); } public function addParents() @@ -36,6 +41,7 @@ class MetaTemplatesNavigation extends BaseNavigation public function addActions() { + $this->bcf->addAction('MetaTemplates', 'index', 'MetaTemplates', 'update'); $this->bcf->addAction('MetaTemplates', 'view', 'MetaTemplates', 'enable'); $this->bcf->addAction('MetaTemplates', 'view', 'MetaTemplates', 'set_default'); } diff --git a/src/View/Helper/BootstrapHelper.php b/src/View/Helper/BootstrapHelper.php index 6d9275f..3f9c12d 100644 --- a/src/View/Helper/BootstrapHelper.php +++ b/src/View/Helper/BootstrapHelper.php @@ -117,6 +117,12 @@ class BootstrapHelper extends Helper return $bsCollapse->collapse(); } + public function accordion($options, $content) + { + $bsAccordion = new BoostrapAccordion($options, $content, $this); + return $bsAccordion->accordion(); + } + public function progressTimeline($options) { $bsProgressTimeline = new BoostrapProgressTimeline($options, $this); @@ -1461,6 +1467,96 @@ class BoostrapCollapse extends BootstrapGeneric { } } +class BoostrapAccordion extends BootstrapGeneric +{ + private $defaultOptions = [ + 'stayOpen' => true, + 'class' => [], + ]; + + function __construct($options, $content, $btHelper) + { + $this->allowedOptionValues = []; + $this->content = $content; + $this->btHelper = $btHelper; + $this->processOptions($options); + } + + private function processOptions($options) + { + $this->options = array_merge($this->defaultOptions, $options); + $this->checkOptionValidity(); + if (!is_array($this->options['class']) && !empty($this->options['class'])) { + $this->options['class'] = [$this->options['class']]; + } + $this->seed = 'acc-' . mt_rand(); + $this->contentSeeds = []; + foreach ($this->content as $accordionItem) { + $this->contentSeeds[] = mt_rand(); + } + } + + public function accordion() + { + return $this->genAccordion(); + } + + private function genHeader($accordionItem, $i) + { + $html = $this->openNode('h2', [ + 'class' => ['accordion-header'], + 'id' => 'head-' . $this->contentSeeds[$i] + ]); + $content = !empty($accordionItem['header']['html']) ? $accordionItem['header']['html'] : h($accordionItem['header']['title'] ?? '- no title -'); + $buttonOptions = [ + 'class' => array_merge(['accordion-button', empty($accordionItem['_open']) ? 'collapsed' : ''], $accordionItem['header']['__class'] ?? []), + 'type' => 'button', + 'data-bs-toggle' => 'collapse', + 'data-bs-target' => '#body-' . $this->contentSeeds[$i], + 'aria-expanded' => 'false', + 'aria-controls' => 'body-' . $this->contentSeeds[$i], + ]; + $html .= $this->genNode('button', $buttonOptions, $content); + $html .= $this->closeNode(('h2')); + return $html; + } + + private function genBody($accordionItem, $i) + { + $content = $this->genNode('div', [ + 'class' => ['accordion-body'] + ], $accordionItem['body']); + $divOptions = [ + 'class' => array_merge(['accordion-collapse collapse', empty($accordionItem['_open']) ? '' : 'show'], $accordionItem['body']['__class'] ?? []), + 'id' => 'body-' . $this->contentSeeds[$i], + 'aria-labelledby' => 'head-' . $this->contentSeeds[$i], + ]; + if (!empty($this->options['stayOpen'])) { + $divOptions['data-bs-parent'] = '#' . $this->seed; + } + $html = $this->genNode('div', $divOptions, $content); + return $html; + } + + private function genAccordion() + { + $html = $this->openNode('div', [ + 'class' => array_merge(['accordion'], $this->options['class']), + 'id' => $this->seed + ]); + foreach ($this->content as $i => $accordionItem) { + $html .= $this->openNode('div', [ + 'class' => array_merge(['accordion-item'], $accordionItem['__class'] ?? []) + ]); + $html .= $this->genHeader($accordionItem, $i); + $html .= $this->genBody($accordionItem, $i); + $html .= $this->closeNode('div'); + } + $html .= $this->closeNode('div'); + return $html; + } +} + class BoostrapProgressTimeline extends BootstrapGeneric { private $defaultOptions = [ 'steps' => [], diff --git a/templates/element/genericElements/Form/genericForm.php b/templates/element/genericElements/Form/genericForm.php index faf257c..7cc0de3 100644 --- a/templates/element/genericElements/Form/genericForm.php +++ b/templates/element/genericElements/Form/genericForm.php @@ -19,7 +19,7 @@ $entity = isset($entity) ? $entity : null; $fieldsString = ''; $simpleFieldWhitelist = [ - 'default', 'type', 'placeholder', 'label', 'empty', 'rows', 'div', 'required' + 'default', 'type', 'placeholder', 'label', 'empty', 'rows', 'div', 'required', 'templates' ]; //$fieldsArrayForPersistence = array(); if (empty($data['url'])) { @@ -116,17 +116,20 @@ $ajaxFlashMessage, $formCreate, $fieldsString, - empty($metaTemplateString) ? '' : $this->element( - 'genericElements/accordion_scaffold', + empty($metaTemplateString) ? '' : $this->Bootstrap->accordion( + [ + 'class' => 'mb-2' + ], + [ [ - 'children' => [ - [ - 'body' => $metaTemplateString, - 'title' => 'Meta fields' - ] - ] - ] - ), + '_open' => true, + 'header' => [ + 'title' => __('Meta fields') + ], + 'body' => $metaTemplateString, + ], + ] + ), $formEnd ), 'actionButton' => $this->element('genericElements/Form/submitButton', $submitButtonData), @@ -142,15 +145,18 @@ $ajaxFlashMessage, $formCreate, $fieldsString, - empty($metaTemplateString) ? '' : $this->element( - 'genericElements/accordion_scaffold', + empty($metaTemplateString) ? '' : $this->Bootstrap->accordion( [ - 'children' => [ - [ - 'body' => $metaTemplateString, - 'title' => 'Meta fields' - ] - ] + 'class' => 'mb-2' + ], + [ + [ + '_open' => true, + 'header' => [ + 'title' => __('Meta fields') + ], + 'body' => $metaTemplateString, + ], ] ), $formEnd @@ -167,16 +173,18 @@ $data['description'] ), sprintf('
%s
', $fieldsString), - empty($metaTemplateString) ? '' : $this->element( - 'genericElements/accordion_scaffold', + empty($metaTemplateString) ? '' : $this->Bootstrap->accordion( [ - 'children' => [ - [ - 'body' => $metaTemplateString, - 'title' => 'Meta fields', - ] - ], 'class' => 'mb-2' + ], + [ + [ + '_open' => true, + 'header' => [ + 'title' => __('Meta fields') + ], + 'body' => $metaTemplateString, + ], ] ), $this->element('genericElements/Form/submitButton', $submitButtonData), diff --git a/templates/element/genericElements/Form/submitButton.php b/templates/element/genericElements/Form/submitButton.php index 55062dd..be9352e 100644 --- a/templates/element/genericElements/Form/submitButton.php +++ b/templates/element/genericElements/Form/submitButton.php @@ -11,7 +11,8 @@ } else { echo $this->Form->button(empty($text) ? __('Submit') : h($text), [ 'class' => 'btn btn-' . (empty($type) ? 'primary' : h($type)), - 'type' => 'submit' + 'type' => 'submit', + 'data-form-id' => '#form-' . h($formRandomValue) ]); } ?> diff --git a/templates/element/genericElements/ListTopBar/group_search.php b/templates/element/genericElements/ListTopBar/group_search.php index db94351..46cef31 100644 --- a/templates/element/genericElements/ListTopBar/group_search.php +++ b/templates/element/genericElements/ListTopBar/group_search.php @@ -58,7 +58,8 @@ $filterEffective ? '' : 'disabled="disabled"' ); echo sprintf( - '
%s%s
', + '
%s%s
', + $filterEffective ? '' : 'd-none', h($tableRandomValue), $input, $button