chg: [ui:settings] Refactored setting factory to be more generic

templates/Instance/settings.php

@@ -5,8 +5,24 @@ $variantFromSeverity = [
     'warning' => 'warning',
     'info' => 'info',
 ];
-$this->set('variantFromSeverity', $variantFromSeverity);
+
-$settingTable = genNavcard($settingsProvider, $this);
+$navLinks = [];
+$tabContents = [];
+
+foreach ($settingsProvider as $settingTitle => $settingContent) {
+    $navLinks[] = h($settingTitle);
+    $tabContents[] = $this->element('Settings/category', [
+        'settings' => $settingContent,
+        'includeScrollspy' => true,
+    ]);
+}
+
+array_unshift($navLinks, __('Settings Diagnostic'));
+$notice = $this->element('Settings/notice', [
+    'variantFromSeverity' => $variantFromSeverity,
+    'notices' => $notices,
+]);
+array_unshift($tabContents, $notice);
 ?>
 
 <script>
@@ -18,121 +34,25 @@ $settingTable = genNavcard($settingsProvider, $this);
     <div class="mb-3 mt-2">
         <?=
             $this->element('Settings/search', [
+                'settingsFlattened' => $settingsFlattened,
             ]);
         ?>
     </div>
-    <?= $settingTable; ?>
+    <?php
+        $tabsOptions = [
+            'card' => false,
+            'pills' => false,
+            'justify' => 'center',
+            'nav-class' => ['settings-tabs'],
+            'data' => [
+                'navs' => $navLinks,
+                'content' => $tabContents
+            ]
+        ];
+        echo $this->Bootstrap->tabs($tabsOptions);
+    ?>
 </div>
 
-<?php
-function genNavcard($settingsProvider, $appView)
-{
-    $cardContent = [];
-    $cardNavs = array_keys($settingsProvider);
-    foreach ($settingsProvider as $navName => $sectionSettings) {
-        if (!empty($sectionSettings)) {
-            $cardContent[] = genContentForNav($sectionSettings, $appView);
-        } else {
-            $cardContent[] = __('No Settings available yet');
-        }
-    }
-    array_unshift($cardNavs, __('Settings Diagnostic'));
-    $notice = $appView->element('Settings/notice', [
-        'variantFromSeverity' => $appView->get('variantFromSeverity'),
-    ]);
-    array_unshift($cardContent, $notice);
-    $tabsOptions0 = [
-        'card' => false,
-        'pills' => false,
-        'justify' => 'center',
-        'nav-class' => ['settings-tabs'],
-        'data' => [
-            'navs' => $cardNavs,
-            'content' => $cardContent
-        ]
-    ];
-    $table0 = $appView->Bootstrap->tabs($tabsOptions0);
-    return $table0;
-}
-
-function genContentForNav($sectionSettings, $appView)
-{
-    $groupedContent = [];
-    $groupedSetting = [];
-    foreach ($sectionSettings as $sectionName => $subSectionSettings) {
-        if (!empty($subSectionSettings)) {
-            $groupedContent[] = genSection($sectionName, $subSectionSettings, $appView);
-        } else {
-            $groupedContent[] = '';
-        }
-        if (!isLeaf($subSectionSettings)) {
-            $groupedSetting[$sectionName] = array_filter( // only show grouped settings
-                array_keys($subSectionSettings),
-                function ($settingGroupName) use ($subSectionSettings) {
-                    return !isLeaf($subSectionSettings[$settingGroupName]) && !empty($subSectionSettings[$settingGroupName]);
-                }
-            );
-        }
-    }
-    $contentHtml = implode('', $groupedContent);
-    $scrollspyNav = $appView->element('Settings/scrollspyNav', [
-        'groupedSetting' => $groupedSetting
-    ]);
-    $mainPanelHeight = 'calc(100vh - 42px - 1rem - 56px - 38px - 1rem)';
-    $container =  '<div class="d-flex">';
-    $container .=   "<div class=\"\" style=\"flex: 0 0 10em;\">{$scrollspyNav}</div>";
-    $container .=   "<div data-bs-spy=\"scroll\" data-bs-target=\"#navbar-scrollspy-setting\" data-bs-offset=\"25\" style=\"height: {$mainPanelHeight}\" class=\"p-3 overflow-auto position-relative flex-grow-1\">{$contentHtml}</div>";
-    $container .= '</div>';
-    return $container;
-}
-
-function genSection($sectionName, $subSectionSettings, $appView)
-{
-    $sectionContent = [];
-    $sectionContent[] = '<div>';
-    if (isLeaf($subSectionSettings)) {
-        $panelHTML = $appView->element('Settings/panel', [
-            'sectionName' => $sectionName,
-            'panelName' => $sectionName,
-            'panelSettings' => $subSectionSettings,
-        ]);
-        $sectionContent[] = $panelHTML;
-    } else {
-        if (count($subSectionSettings) > 0) {
-            $sectionContent[] = sprintf('<h2 id="%s">%s</h2>', getResolvableID($sectionName), h($sectionName));
-        }
-        foreach ($subSectionSettings as $panelName => $panelSettings) {
-            if (!empty($panelSettings)) {
-                $panelHTML = $appView->element('Settings/panel', [
-                    'sectionName' => $sectionName,
-                    'panelName' => $panelName,
-                    'panelSettings' => $panelSettings,
-                ]);
-                $sectionContent[] = $panelHTML;
-            } else {
-                $sectionContent[] = '';
-            }
-        }
-    }
-    $sectionContent[] = '</div>';
-    return implode('', $sectionContent);
-}
-
-function isLeaf($setting)
-{
-    return !empty($setting['name']) && !empty($setting['type']);
-}
-
-function getResolvableID($sectionName, $panelName=false)
-{
-    $id = sprintf('sp-%s', preg_replace('/(\.|\W)/', '_', h($sectionName)));
-    if (!empty($panelName)) {
-        $id .= '-' . preg_replace('/(\.|\W)/', '_', h($panelName));
-    }
-    return $id;
-}
-?>
-
 <script>
     $(document).ready(function() {
         new bootstrap.Tooltip('.depends-on-icon', {

templates/element/Settings/category.php

@@ -0,0 +1,61 @@
+<?php
+if (!function_exists('isLeaf')) {
+    function isLeaf($setting)
+    {
+        return !empty($setting['name']) && !empty($setting['type']);
+    }
+}
+
+$variantFromSeverity = [
+    'critical' => 'danger',
+    'warning' => 'warning',
+    'info' => 'info',
+];
+$includeScrollspy = !empty($includeScrollspy);
+
+$groupedContent = [];
+$scrollSpyContent = [];
+foreach ($settings as $sectionName => $sectionContent) {
+    if (!empty($sectionContent)) {
+        $groupedContent[] = $this->element('Settings/section', [
+            'sectionName' => $sectionName,
+            'sectionContent' => $sectionContent,
+        ]);
+    } else {
+        $groupedContent[] = '';
+    }
+    if ($includeScrollspy) {
+        if (!isLeaf($sectionContent)) {
+            $scrollSpyContent[$sectionName] = array_filter( // only show grouped settings
+                array_keys($sectionContent),
+                function ($settingGroupName) use ($sectionContent) {
+                    return !isLeaf($sectionContent) && !empty($sectionContent[$settingGroupName]);
+                }
+            );
+        }
+    }
+}
+
+$contentHtml = implode('', $groupedContent);
+if ($includeScrollspy) {
+    $scrollspyNav = $this->element('Settings/scrollspyNav', [
+        'groupedSetting' => $scrollSpyContent
+    ]);
+}
+$mainPanelHeight = 'calc(100vh - 42px - 1rem - 56px - 38px - 1rem)';
+?>
+
+<?php if ($includeScrollspy) : ?>
+    <div class="d-flex">
+        <div class="" style="flex: 0 0 10em;">
+            <?= $scrollspyNav ?>
+        </div>
+        <div data-bs-spy="scroll" data-bs-target="#navbar-scrollspy-setting" data-bs-offset="25" style="height: <?= $mainPanelHeight ?>" class="p-3 overflow-auto position-relative flex-grow-1">
+            <?= $contentHtml ?>
+        </div>
+    </div>
+<?php else: ?>
+    <div>
+        <?= $contentHtml ?>
+    </div>
+<?php endif; ?>

templates/element/Settings/panel.php

@@ -1,4 +1,21 @@
 <?php
+if (!function_exists('isLeaf')) {
+    function isLeaf($setting)
+    {
+        return !empty($setting['name']) && !empty($setting['type']);
+    }
+}
+if (!function_exists('getResolvableID')) {
+    function getResolvableID($sectionName, $panelName = false)
+    {
+        $id = sprintf('sp-%s', preg_replace('/(\.|\W)/', '_', h($sectionName)));
+        if (!empty($panelName)) {
+            $id .= '-' . preg_replace('/(\.|\W)/', '_', h($panelName));
+        }
+        return $id;
+    }
+}
+
 $panelHTML = '';
 if (isLeaf($panelSettings)) {
     $singleSetting = $this->element('Settings/fieldGroup', [

templates/element/Settings/scrollspyNav.php

@@ -1,3 +1,16 @@
+<?php
+if (!function_exists('getResolvableID')) {
+    function getResolvableID($sectionName, $panelName = false)
+    {
+        $id = sprintf('sp-%s', preg_replace('/(\.|\W)/', '_', h($sectionName)));
+        if (!empty($panelName)) {
+            $id .= '-' . preg_replace('/(\.|\W)/', '_', h($panelName));
+        }
+        return $id;
+    }
+}
+?>
+
 <nav id="navbar-scrollspy-setting" class="navbar">
     <nav class="nav nav-pills flex-column">
         <?php foreach ($groupedSetting as $group => $sections): ?>

templates/element/Settings/section.php

@@ -0,0 +1,46 @@
+<?php
+if (!function_exists('isLeaf')) {
+    function isLeaf($setting)
+    {
+        return !empty($setting['name']) && !empty($setting['type']);
+    }
+}
+if (!function_exists('getResolvableID')) {
+    function getResolvableID($sectionName, $panelName = false)
+    {
+        $id = sprintf('sp-%s', preg_replace('/(\.|\W)/', '_', h($sectionName)));
+        if (!empty($panelName)) {
+            $id .= '-' . preg_replace('/(\.|\W)/', '_', h($panelName));
+        }
+        return $id;
+    }
+}
+
+$sectionHtml = '';
+if (isLeaf($sectionContent)) {
+    $sectionHtml .= $this->element('Settings/panel', [
+        'sectionName' => $sectionName,
+        'panelName' => $sectionName,
+        'panelSettings' => $sectionContent,
+    ]);
+} else {
+    if (count($sectionContent) > 0) {
+        $sectionHtml .= sprintf('<h2 id="%s">%s</h2>', getResolvableID($sectionName), h($sectionName));
+    }
+    foreach ($sectionContent as $panelName => $panelSettings) {
+        if (!empty($panelSettings)) {
+            $sectionHtml .= $this->element('Settings/panel', [
+                'sectionName' => $sectionName,
+                'panelName' => $panelName,
+                'panelSettings' => $panelSettings,
+            ]);
+        } else {
+            $sectionHtml .= '';
+        }
+    }
+}
+?>
+
+<div>
+    <?= $sectionHtml ?>
+</div>