Add search function in access menu (#1065)

* Add search function to access by position

* Lint

Author: carlhaggren

src/routes/(app)/admin/access/+page.svelte

@@ -73,7 +73,7 @@
   />
 
   {#if $search}
-    <button class="btn btn-sm" on:click={() => search.set("")}> Clear </button>
+    <button class="btn btn-sm" onclick={() => search.set("")}> Clear </button>
   {/if}
 </div>
 

src/routes/(app)/admin/access/positions/+page.svelte

@@ -2,9 +2,36 @@
   import { superForm } from "$lib/utils/client/superForms";
   import PolicyTreeNode from "$lib/components/access/PolicyTreeNode.svelte";
   import type { PolicyNode } from "$lib/components/access/PolicyTreeNode.svelte";
+  import { writable, derived } from "svelte/store";
 
   let { data } = $props();
 
+  const search = writable("");
+
+  // Filtered trees, reactive to search
+  const filteredPosTrees = derived(search, ($search) => {
+    const q = $search.toLowerCase().trim();
+
+    return Array.from(data.posToAccessPolicies.entries())
+      .sort((a, b) => (a[0] < b[0] ? -1 : 1))
+      .map(([position, policies]) => {
+        const positionMatches = position.toLowerCase().includes(q);
+
+        const visibleApiNames = positionMatches
+          ? policies.map((p) => p.apiName)
+          : policies
+              .filter((p) => p.apiName.toLowerCase().includes(q))
+              .map((p) => p.apiName);
+
+        return {
+          position,
+          policies,
+          tree: buildPolicyTreeForPolicies(visibleApiNames),
+        };
+      })
+      .filter(({ tree }) => Object.keys(tree).length > 0);
+  });
+
   const {
     form: createForm,
     errors: createErrors,
@@ -33,20 +60,22 @@
     policies.forEach((p) => insertPolicy(root, p));
     return root.children; // return children instead of the root node
   }
-
-  const posTrees: Array<{
-    position: string;
-    tree: Record<string, PolicyNode>;
-    policies: Array<{ apiName: string; id: string }>;
-  }> = Array.from(data.posToAccessPolicies.entries())
-    .sort((a, b) => (a[0] < b[0] ? -1 : 1))
-    .map(([position, policies]) => ({
-      position,
-      tree: buildPolicyTreeForPolicies(policies.map((p) => p.apiName)),
-      policies,
-    }));
 </script>
 
+<!-- Search -->
+<div class="mb-4 flex items-center gap-2">
+  <input
+    type="text"
+    placeholder="Search policies..."
+    class="input input-bordered w-full max-w-md"
+    bind:value={$search}
+  />
+
+  {#if $search}
+    <button class="btn btn-sm" onclick={() => search.set("")}> Clear </button>
+  {/if}
+</div>
+
 <div class="overflow-x-auto">
   <table class="table w-full">
     <thead>
@@ -62,7 +91,7 @@
     </thead>
 
     <tbody>
-      {#each posTrees as { position, tree, policies }}
+      {#each $filteredPosTrees as { position, tree, policies }}
         <tr class="odd:bg-gray/10 even:bg-base-200/50">
           <td class="font-medium">{position}</td>
           <td>