Add a quick filter to search the list of projects

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/FilterByName.ts b/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/FilterByName.ts
new file mode 100644 (file)
index 0000000..ca6d27a
--- /dev/null
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/FilterByName.ts
@@ -0,0 +1,53 @@
+/**
+ * Provides a filter input to narrow down the list of projects.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2023 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.0
+ */
+
+import { touch as isTouch } from "WoltLabSuite/Core/Environment";
+
+const filterByName = document.getElementById("filterByName") as HTMLInputElement;
+const projects: Map<string, HTMLTableRowElement> = new Map();
+
+function filterProjects(): void {
+  const value = filterByName.value.trim().toLowerCase();
+  if (value === "") {
+    resetFilter();
+    return;
+  }
+
+  projects.forEach((row, name) => {
+    if (name.includes(value)) {
+      row.hidden = false;
+    } else {
+      row.hidden = true;
+    }
+  });
+}
+
+function resetFilter(): void {
+  filterByName.value = "";
+  projects.forEach((row) => (row.hidden = false));
+}
+
+export function setup(): void {
+  filterByName.addEventListener("input", () => filterProjects());
+  filterByName.addEventListener("keyup", (event) => {
+    if (event.key === "Escape") {
+      resetFilter();
+    }
+  });
+
+  const table = document.getElementById("devtoolsProjectList") as HTMLTableElement;
+  table.querySelectorAll<HTMLTableRowElement>(".devtoolsProject").forEach((row) => {
+    const name = row.dataset.name!.toLowerCase();
+    projects.set(name, row);
+  });
+
+  if (!isTouch()) {
+    filterByName.focus();
+  }
+}

diff --git a/wcfsetup/install/files/acp/templates/devtoolsProjectList.tpl b/wcfsetup/install/files/acp/templates/devtoolsProjectList.tpl
index 73dfecdca4fb6f1a35e670ccfceefe8927d688bc..a680a0be482a73080811840ad18ea62e858bceb4 100644 (file)
--- a/wcfsetup/install/files/acp/templates/devtoolsProjectList.tpl
+++ b/wcfsetup/install/files/acp/templates/devtoolsProjectList.tpl
@@ -1,9 +1,10 @@
 {include file='header' pageTitle='wcf.acp.devtools.project.list'}
 
 <script data-relocate="true">
-       require(['WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup', 'Language'], function(AcpUiDevtoolsProjectQuickSetup, Language) {
+       require(['WoltLabSuite/Core/Acp/Ui/Devtools/Project/FilterByName', 'WoltLabSuite/Core/Acp/Ui/Devtools/Project/QuickSetup', 'Language'], function({ setup: setupFilterByName }, AcpUiDevtoolsProjectQuickSetup, Language) {
                Language.add('wcf.acp.devtools.project.quickSetup', '{jslang}wcf.acp.devtools.project.quickSetup{/jslang}');
                
+               setupFilterByName();
                AcpUiDevtoolsProjectQuickSetup.init();
        });
 </script>
@@ -26,8 +27,19 @@
 <p class="info">{lang}wcf.acp.devtools.project.introduction{/lang}</p>
 
 {hascontent}
+       <div class="section">
+               <dl>
+                       <dt>
+                               <label for="filterByName">{lang}wcf.acp.devtools.project.filterByName{/lang}</label>
+                       </dt>
+                       <dd>
+                               <input type="text" id="filterByName" class="long">
+                       </dd>
+               </dl>
+       </div>
+
        <div class="section tabularBox">
-               <table class="table jsObjectActionContainer" data-object-action-class-name="wcf\data\devtools\project\DevtoolsProjectAction">
+               <table class="table jsObjectActionContainer" data-object-action-class-name="wcf\data\devtools\project\DevtoolsProjectAction" id="devtoolsProjectList">
                        <thead>
                                <tr>
                                        <th class="columnID{if $sortField === 'projectID'} active {@$sortOrder}{/if}" colspan="3"><a href="{link controller='DevtoolsProjectList'}sortField=projectID&sortOrder={if $sortField === 'projectID' && $sortOrder === 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.objectID{/lang}</a></th>
@@ -41,7 +53,7 @@
                        <tbody>
                                {content}
                                        {foreach from=$objects item=object}
-                                               <tr class="jsObjectRow jsObjectActionObject" data-object-id="{@$object->getObjectID()}">
+                                               <tr class="jsObjectRow jsObjectActionObject devtoolsProject" data-object-id="{$object->getObjectID()}" data-name="{$object->name}">
                                                        <td class="columnIcon">
                                                                <a href="{link controller='DevtoolsProjectSync' id=$object->getObjectID()}{/link}" class="button small">{lang}wcf.acp.devtools.project.sync{/lang}</a>
                                                                <a href="{link controller='DevtoolsProjectPipList' id=$object->getObjectID()}{/link}" class="button small">{lang}wcf.acp.devtools.project.pips{/lang}</a>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/FilterByName.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/FilterByName.js
new file mode 100644 (file)
index 0000000..83a81b8
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/FilterByName.js
@@ -0,0 +1,51 @@
+/**
+ * Provides a filter input to narrow down the list of projects.
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2023 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.0
+ */
+define(["require", "exports", "WoltLabSuite/Core/Environment"], function (require, exports, Environment_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.setup = void 0;
+    const filterByName = document.getElementById("filterByName");
+    const projects = new Map();
+    function filterProjects() {
+        const value = filterByName.value.trim().toLowerCase();
+        if (value === "") {
+            resetFilter();
+            return;
+        }
+        projects.forEach((row, name) => {
+            if (name.includes(value)) {
+                row.hidden = false;
+            }
+            else {
+                row.hidden = true;
+            }
+        });
+    }
+    function resetFilter() {
+        filterByName.value = "";
+        projects.forEach((row) => (row.hidden = false));
+    }
+    function setup() {
+        filterByName.addEventListener("input", () => filterProjects());
+        filterByName.addEventListener("keyup", (event) => {
+            if (event.key === "Escape") {
+                resetFilter();
+            }
+        });
+        const table = document.getElementById("devtoolsProjectList");
+        table.querySelectorAll(".devtoolsProject").forEach((row) => {
+            const name = row.dataset.name.toLowerCase();
+            projects.set(name, row);
+        });
+        if (!(0, Environment_1.touch)()) {
+            filterByName.focus();
+        }
+    }
+    exports.setup = setup;
+});

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 0f070477fc5b57d51b44fc322669a6f195f17809..714cc0dc388a4a5c96b74b00417d9fa6e6e1b13f 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -409,6 +409,7 @@
        <category name="wcf.acp.devtools">
                <item name="wcf.acp.devtools.project.add"><![CDATA[Projekt hinzufügen]]></item>
                <item name="wcf.acp.devtools.project.edit"><![CDATA[Projekt bearbeiten]]></item>
+               <item name="wcf.acp.devtools.project.filterByName"><![CDATA[Nach Name filtern]]></item>
                <item name="wcf.acp.devtools.project.introduction"><![CDATA[Bitte {if LANGUAGE_USE_INFORMAL_VARIANT}beachte{else}beachten Sie{/if} die <a href="https://docs.woltlab.com/latest/getting-started/#developer-tools" class="externalURL">Hinweise zur Benutzung</a> in der Entwickler-Dokumentation.]]></item>
                <item name="wcf.acp.devtools.project.list"><![CDATA[Projekte]]></item>
                <item name="wcf.acp.devtools.project.name"><![CDATA[Name]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 366a5dfd1a7abe5b91e3dd0f92ef6eac209a7e57..24b14560a537b2cadbd12733586a135adaab5106 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -387,6 +387,7 @@
        <category name="wcf.acp.devtools">
                <item name="wcf.acp.devtools.project.add"><![CDATA[Add Project]]></item>
                <item name="wcf.acp.devtools.project.edit"><![CDATA[Edit Project]]></item>
+               <item name="wcf.acp.devtools.project.filterByName"><![CDATA[Filter by Name]]></item>
                <item name="wcf.acp.devtools.project.introduction"><![CDATA[Please read the <a href="https://docs.woltlab.com/latest/getting-started/#developer-tools" class="externalURL">usage instructions</a> in the developer documentation.]]></item>
                <item name="wcf.acp.devtools.project.list"><![CDATA[Projects]]></item>
                <item name="wcf.acp.devtools.project.name"><![CDATA[Name]]></item>