enhance filtering and select setting

* hide properly setting select on scroll
* setting select position is checking if dropdown is out of screen to move it up
* hide dropdown plugin in case current filter is input keyword with empty value
* avoid opening dropdown on mobile screen because of select plugin dropdown on top of filters

CHANGELOG.md

@@ -10,6 +10,17 @@
 - [FEATURE] Add backup plugin to backup and restore easily the database
 - [FEATURE] Add LETS_ENCRYPT_CLEAR_OLD_CERTS setting to control if old certificates should be removed when generating Let's Encrypt certificates (default is no)
 - [FEATURE] Add DISABLE_DEFAULT_SERVER_STRICT_SNI setting to allow/block requests when SNI is unknown or unset (default is no)
+- [UI] General : fix tooltip crop because of overflow
+- [UI] General : fix select setting crop because of overflow and check if select is out of viewport to determine visible position
+- [UI] General : show logs on UI when pre rendering issue
+- [UI] Global config : fix script error while fragment relate to a missing plugin
+- [UI] Global config / services page : filtering settings now open plugin select to highlight remaining plugin
+- [UI] Global config / services page : add combobox on plugin select open to search a plugin quick
+- [UI] Global config / services page : add combobox on plugin select open to search a plugin quick
+- [UI] Reporting page : fix missing data and add new ones
+- [UI] Account page : keep license key form even if pro register to easy update
+
+
 - [DOCUMENTATION] Add upgrade procedure for 1.5.7+
 - [MISC] Support custom bwcli commands using plugins
 - [DEPS] Updated LuaJIT version to v2.1-20240314

src/ui/static/js/utils/form.js

@@ -54,27 +54,25 @@ class Checkbox {
 class Select {
   constructor() {
     this.init();
-    this.openDropdownEls = [];
   }
 
   init() {
     // Add event listener to close dropdown if scroll event is triggered on window
     window.addEventListener("scroll", () => {
-      if (!this.openDropdownEls.length) return;
+      this.dropsToHide = document.querySelectorAll(
+        '[data-setting-select-dropdown][class*="flex"]',
+      );
+      if (!this.dropsToHide.length) return;
 
-      this.elsToRemove = [];
-      this.openDropdownEls.forEach((dropdown) => {
+      this.dropsToHide.forEach((dropdown) => {
         const btn = dropdown
           .closest("div[data-setting-container]")
           .querySelector("button[data-setting-select]");
+
+        if (dropdown.classList.contains("hidden")) return;
         btn.click();
         // Add dropdown to remove list
-        this.elsToRemove.push(dropdown);
       });
-      // Update openDropdownEls array deleting all dropdowns that were closed using elsToRemove array
-      this.openDropdownEls = this.openDropdownEls.filter(
-        (dropdown) => !this.elsToRemove.includes(dropdown),
-      );
     });
 
     window.addEventListener("click", (e) => {
@@ -186,7 +184,6 @@ class Select {
     dropdownChevron.classList.toggle("rotate-180");
     // case open, we want to move dropdown position next to his data-select-container
     if (!dropdownEl.classList.contains("hidden")) {
-      this.openDropdownEls.push(dropdownEl);
       const selectContainer = btn.closest("div[data-select-container]");
       const selectContainerRect = selectContainer.getBoundingClientRect();
       const top = selectContainerRect.top + selectContainerRect.height;
@@ -195,6 +192,17 @@ class Select {
       dropdownEl.style.top = `${top}px`;
       dropdownEl.style.left = `${left}px`;
       dropdownEl.style.width = `${width}px`;
+      // Check dropdown height, if out of screen, move it up
+      const dropdownRect = dropdownEl.getBoundingClientRect();
+      const dropdownHeight = dropdownRect.height;
+      const dropdownBottom = dropdownRect.bottom;
+      const windowHeight = window.innerHeight;
+
+      if (dropdownBottom > windowHeight) {
+        dropdownEl.style.top = `${
+          top - dropdownHeight - selectContainerRect.height - 15
+        }px`;
+      }
     }
   }
 }

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

@@ -658,6 +658,10 @@ class FilterSettings {
 
     // furthermore, open dropdown so user can see remain plugins in case the first one is not the one he is looking for
     // and if more than one plugin available
+    // but we want to avoid dropdown open if  active element is input keyword and value is empty
+    if (document.activeElement === this.input && this.input.value === "")
+      return;
+
     const hiddenTabsEl = this.tabContainer.querySelectorAll(
       `[data-tab-select-handler][class*="!hidden"]`,
     );
@@ -672,6 +676,8 @@ class FilterSettings {
     disableOpen = false,
     disableClose = false,
   ) {
+    // avoid this on mobile
+    if (window.innerWidth < 768) return;
     const dropdownEl = this.tabContainer.querySelector(
       "[data-tab-select-dropdown]",
     );

src/ui/templates/settings_plugins.html

@@ -192,7 +192,7 @@
                                     <div id="{{ value['id'] }}-dropdown"
                                          role="listbox"
                                          data-setting-select-dropdown="{{ value['id'] }}"
-                                         class="hidden z-[20] fixed h-full flex-col mt-2 max-h-[250px] overflow-auto">
+                                         class="hidden z-[20] fixed h-full flex-col mt-2 max-h-[200px] overflow-auto">
                                         {% for item in value['select'] %}
                                             {% if global_config[setting]['value'] and
                                                 global_config[setting]['value'] == item or not global_config[setting]['value']
@@ -417,7 +417,7 @@
                                     <div id="{{ value['id'] }}-dropdown"
                                          role="listbox"
                                          data-setting-select-dropdown="{{ value['id'] }}"
-                                         class="hidden z-[20] fixed h-full flex-col mt-2 max-h-[250px] overflow-auto">
+                                         class="hidden z-[20] fixed h-full flex-col mt-2 max-h-[200px] overflow-auto">
                                         {% for item in value['select'] %}
                                             {% if value['default'] == item %}
                                                 <button role="option"