filter settings working with multiples

CHANGELOG.md

@@ -18,7 +18,7 @@
 - [UI] General : add visual feedback when filtering is matching nothing
 - [UI] General : blog news working and add dynamic banner news
 - [UI] Global config page : Add multisite edit, add context filter
-- [UI] Global config / Service page : remove tabs for select and enhance filtering (plugin name includes)
+- [UI] Global config / Service page : remove tabs for select and enhance filtering (plugin name, multiple settings and context now includes)
 - [UI] Service page : add the possibility to clone a service in the web UI
 - [UI] Service page : add the possibility to set a service as draft in the web UI
 - [UI] Service page : add services filter when at least 4 services

src/ui/static/js/services.js

@@ -1450,6 +1450,7 @@ const setFilterGlobal = new FilterSettings(
   "settings-filter",
   document.querySelector("[data-services-tabs-select]"),
   document.querySelector("[data-services-modal-form]"),
+  "services",
 );
 
 const setMultiple = new Multiple("services");

src/ui/static/js/utils/settings.js

@@ -194,10 +194,16 @@ class FormatValue {
 }
 
 class FilterSettings {
-  constructor(inputID, tabContainer, contentContainer) {
+  constructor(
+    inputID,
+    tabContainer,
+    contentContainer,
+    prefix = "global-config",
+  ) {
     this.input = document.querySelector(`input#${inputID}`);
+    this.prefix = prefix;
     this.contextTxtEl = document.querySelector(
-      'span[data-global-config-setting-select-text="context"]',
+      `span[data-${this.prefix}-setting-select-text="context"]`,
     );
     this.tabContainer = tabContainer;
     this.contentContainer = contentContainer;
@@ -240,13 +246,14 @@ class FilterSettings {
 
     //loop all tabs
     this.tabsEls.forEach((tab) => {
+      const tabName = tab.getAttribute(`data-tab-select-handler`);
       //get settings of tabs except multiples
       const settings = this.getSettingsFromTab(tab);
 
       //compare total count to currCount to determine
       //if tabs need to be hidden
       const settingCount = settings.length;
-      let hiddenCount = 0;
+      let settingHiddenCount = 0;
       settings.forEach((setting) => {
         try {
           let needToHide = false;
@@ -254,7 +261,7 @@ class FilterSettings {
             .querySelector("h5")
             .textContent.trim()
             .toLowerCase();
-          if (!title.includes(inpValue)) {
+          if (!title.includes(inpValue) && inpValue !== "") {
             needToHide = true;
           }
 
@@ -277,13 +284,111 @@ class FilterSettings {
 
           if (needToHide) {
             setting.classList.add("hidden");
-            hiddenCount++;
+            settingHiddenCount++;
           }
         } catch (err) {}
       });
-      //case no setting match, check if match at least tab name
+
+      // check multiple settings
+      //get settings of tabs except multiples
+      const multSettings = this.getMultSettingsFromTab(tab);
+      const multSettingCount = multSettings.length;
+      let multSettingHiddenCount = 0;
+      multSettings.forEach((multSetting) => {
+        try {
+          let needToHideMult = false;
+          const title = multSetting
+            .querySelector("h5")
+            .textContent.trim()
+            .toLowerCase();
+          if (!title.includes(inpValue) && inpValue !== "") {
+            needToHideMult = true;
+          }
+
+          // check context if filter exists
+          try {
+            if (this.contextTxtEl) {
+              const currContextFilter =
+                this.contextTxtEl.textContent.toLowerCase();
+
+              if (currContextFilter !== "all") {
+                const settingContext = multSetting
+                  .getAttribute("data-global-config-context")
+                  .toLowerCase();
+                if (settingContext !== currContextFilter) {
+                  needToHideMult = true;
+                }
+              }
+            }
+          } catch (e) {}
+
+          if (needToHideMult) {
+            multSetting.classList.add("hidden");
+            multSettingHiddenCount++;
+          }
+        } catch (err) {}
+      });
+
+      // check for each multiple groups if all are hidden
+      // if so, hide the multiple handler
+      const multSettingsHandler = this.contentContainer
+        .querySelector(`[data-plugin-item=${tabName}]`)
+        .querySelectorAll(`[data-multiple-handler]`);
+
+      for (let i = 0; i < multSettingsHandler.length; i++) {
+        // loop en each multiple groups
+        const handlerEl = multSettingsHandler[i];
+        const multHandlerName = handlerEl.getAttribute("data-multiple-handler");
+        const multGroups = this.contentContainer
+          .querySelector(`[data-plugin-item=${tabName}]`)
+          .querySelectorAll(
+            `[data-${this.prefix}-settings-multiple^="${multHandlerName}"]`,
+          );
+        // check for each if all settings are hidden
+
+        for (let j = 0; j < multGroups.length; j++) {
+          const multGroup = multGroups[j];
+          let isAllMultSettingHidden = true;
+          const settings = multGroup.querySelectorAll(
+            `[data-setting-container]`,
+          );
+          for (let k = 0; k < settings.length; k++) {
+            if (!settings[k].classList.contains("hidden")) {
+              isAllMultSettingHidden = false;
+              break;
+            }
+          }
+
+          if (isAllMultSettingHidden) {
+            handlerEl.classList.add("hidden");
+            multGroup.classList.add("hidden");
+          }
+        }
+      }
+
+      // Hide title if multSettingsHandler are hidden
+      let isAllGroupsHidden = true;
+      for (let i = 0; i < multSettingsHandler.length; i++) {
+        const handlerEl = multSettingsHandler[i];
+        if (!handlerEl.classList.contains("hidden")) {
+          isAllGroupsHidden = false;
+          break;
+        }
+      }
+
+      if (multSettingsHandler.length > 0 && isAllGroupsHidden) {
+        const multTitle = this.contentContainer
+          .querySelector(`[data-plugin-item=${tabName}]`)
+          .querySelector("[data-multiple-title]");
+        multTitle.classList.add("hidden");
+      }
+
+      //case no setting or no multiple match, check if match at least tab name
       // if no context, else we don't care about name
-      if (settingCount === hiddenCount) {
+      if (
+        settingCount === settingHiddenCount &&
+        multSettingCount === multSettingHiddenCount
+      ) {
         const tabName = tab.getAttribute(`data-tab-select-handler`);
         const tabTxt = tab.textContent.trim().toLowerCase();
         let needHideTab = false;
@@ -316,8 +421,6 @@ class FilterSettings {
       }
     }
 
-    console.log("is all hidden", isAllHidden);
-
     // case no tab match
     if (isAllHidden) {
       this.tabContainer
@@ -356,20 +459,70 @@ class FilterSettings {
   resetFilter() {
     this.tabsEls.forEach((tab) => {
       const tabName = tab.getAttribute(`data-tab-select-handler`);
-      //hide mobile and desk tabs
+      //show tab
       tab.classList.remove("!hidden");
       this.contentContainer
         .querySelector(`[data-plugin-item=${tabName}]`)
         .classList.remove("hidden");
+      // show no multiple setting
       const settings = this.getSettingsFromTab(tab);
       settings.forEach((setting) => {
         setting.classList.remove("hidden");
       });
+      // show multiple setting
+      const multSettings = this.getMultSettingsFromTab(tab);
+      multSettings.forEach((setting) => {
+        setting.classList.remove("hidden");
+      });
+      // show multiple handler
+      const multSettingsHandler = this.contentContainer
+        .querySelector(`[data-plugin-item=${tabName}]`)
+        .querySelectorAll(`[data-multiple-handler]`);
+
+      const multTitle = this.contentContainer
+        .querySelector(`[data-plugin-item=${tabName}]`)
+        .querySelector("[data-multiple-title]");
+
+      if (multTitle) {
+        multTitle.classList.remove("hidden");
+      }
+
+      for (let i = 0; i < multSettingsHandler.length; i++) {
+        // loop en each multiple groups
+        const handlerEl = multSettingsHandler[i];
+        handlerEl.classList.remove("hidden");
+        const multHandlerName = handlerEl.getAttribute("data-multiple-handler");
+        const multGroups = this.contentContainer
+          .querySelector(`[data-plugin-item=${tabName}]`)
+          .querySelectorAll(
+            `[data-${this.prefix}-settings-multiple^="${multHandlerName}"]`,
+          );
+        // check for each if all settings are hidden
+        for (let j = 0; j < multGroups.length; j++) {
+          const multGroup = multGroups[j];
+          // avoid if _SCHEMA
+          if (
+            multGroup
+              .getAttribute(`data-${this.prefix}-settings-multiple`)
+              .includes("_SCHEMA")
+          )
+            continue;
+          multGroup.classList.remove("hidden");
+
+          const settings = multGroup.querySelectorAll(
+            `[data-setting-container]`,
+          );
+          for (let k = 0; k < settings.length; k++) {
+            settings[k].classList.remove("hidden");
+          }
+        }
+      }
     });
   }
 
   getSettingsFromTab(tabEl) {
     const tabName = tabEl.getAttribute(`data-tab-select-handler`);
+    // no multiple settings
     const settingContainer = this.contentContainer
       .querySelector(`[data-plugin-item="${tabName}"]`)
       .querySelector(`[data-plugin-settings]`);
@@ -378,6 +531,33 @@ class FilterSettings {
     );
     return settings;
   }
+
+  getMultSettingsFromTab(tabEl) {
+    const tabName = tabEl.getAttribute(`data-tab-select-handler`);
+    const settings = [];
+    // get multiple settings
+    const settingMultipleGroups = this.contentContainer
+      .querySelector(`[data-plugin-item="${tabName}"]`)
+      .querySelectorAll(`[data-${this.prefix}-settings-multiple]`);
+    for (let i = 0; i < settingMultipleGroups.length; i++) {
+      const settingMultipleGroup = settingMultipleGroups[i];
+      // case attribute ends with _SCHEMA, continue
+      if (
+        settingMultipleGroup
+          .getAttribute(`data-${this.prefix}-settings-multiple`)
+          .includes("_SCHEMA")
+      )
+        continue;
+      const settingsContainer = settingMultipleGroup.querySelectorAll(
+        `[data-setting-container]`,
+      );
+
+      settingsContainer.forEach((setting) => {
+        settings.push(setting);
+      });
+    }
+    return settings;
+  }
 }
 
 class Tabs {

src/ui/templates/settings_plugins.html

@@ -264,13 +264,13 @@
         </div>
         <!-- end plugin settings not multiple -->
         {% if multList|length > 0 %}
-            <h5 class="transition duration-300 ease-in-out ml-2 font-bold text-[1.1rem] uppercase dark:text-white/90 mt-2 mb-0">
+            <h5 data-multiple-title class="transition duration-300 ease-in-out ml-2 font-bold text-[1.1rem] uppercase dark:text-white/90 mt-2 mb-0">
                 multiple settings
             </h5>
         {% endif %}
         {% for multiple in multList %}
             <!-- plugin multiple handler -->
-            <div data-multiple-handler
+            <div data-multiple-handler="{{ multiple }}"
                  class="flex items-center mx-2 mb-2 mt-5 col-span-12 ">
                 <h5 class="input-title max-w-[150px] sm:max-w-[350px]">{{ multiple.replace('-', ' ').replace('_', ' ')|upper }}</h5>
                 <button data-{{ current_endpoint }}-multiple-add="{{ multiple }}" type="button" class="ml-3 dark:brightness-90 inline-block px-3 py-1.5 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-green-500 hover:bg-green-500/80 focus:bg-green-500/80 leading-normal text-md ease-in tracking-tight-rem shadow-xs bg-150 bg-x-25 hover:-translate-y-px active:opacity-85 hover:shadow-md">
@@ -290,6 +290,7 @@
                         or current_endpoint == "services" and value['context'] == "multisite"
                         ) %}
                         <div data-setting-container="{{ setting }}_SCHEMA"
+                        data-{{ current_endpoint }}-context="{{ value['context'] }}"
                              class="relative mx-2 md:mx-3 my-2 md:my-3 col-span-12 md:col-span-6 2xl:col-span-4"
                              id="form-edit-{{ current_endpoint }}-{{ value["id"] }}_SCHEMA">
                             <!-- title and info -->