refactor: api key modals (#23420)

2026-05-18 03:10:24 +03:00 · 2025-10-31 13:58:52 +01:00
parent 4abaad548a
commit 3531856d1c
5 changed files with 216 additions and 175 deletions
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
+  import { Permission } from '@immich/sdk';
+  import { Checkbox, IconButton, Input, Label } from '@immich/ui';
+  import { mdiClose } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    selectedPermissions: Permission[];
+  };
+
+  let { selectedPermissions = $bindable([]) }: Props = $props();
+
+  const permissions: Record<string, Permission[]> = {};
+  for (const permission of Object.values(Permission)) {
+    if (permission === Permission.All) {
+      continue;
+    }
+
+    const [group] = permission.split('.');
+    if (!permissions[group]) {
+      permissions[group] = [];
+    }
+    permissions[group].push(permission);
+  }
+
+  let searchValue = $state('');
+  let allItemsSelected = $derived(selectedPermissions.length === Object.keys(Permission).length - 1);
+
+  const matchFilter = (search: string) => {
+    search = search.toLowerCase();
+
+    return ([title, items]: [string, Permission[]]) =>
+      title.toLowerCase().includes(search) || items.some((item) => item.toLowerCase().includes(search));
+  };
+
+  const onCheckedAllChange = (checked: boolean) => {
+    selectedPermissions = checked
+      ? Object.values(Permission).filter((permission) => permission !== Permission.All)
+      : [];
+  };
+
+  const filteredResults = $derived(Object.entries(permissions).filter(matchFilter(searchValue)));
+
+  const handleSelectItems = (items: Permission[]) =>
+    (selectedPermissions = Array.from(new Set([...selectedPermissions, ...items])));
+
+  const handleDeselectItems = (items: Permission[]) =>
+    (selectedPermissions = selectedPermissions.filter((item) => !items.includes(item)));
+</script>
+
+<Label label={$t('permission')} for="permission-container" />
+<div class="flex items-center gap-2 m-4" id="permission-container">
+  <Checkbox id="input-select-all" size="tiny" checked={allItemsSelected} onCheckedChange={onCheckedAllChange} />
+  <Label label={$t('select_all')} for="input-select-all" />
+</div>
+
+<div class="ms-4 flex flex-col gap-2">
+  <Input bind:value={searchValue} placeholder={$t('search')}>
+    {#snippet trailingIcon()}
+      {#if searchValue}
+        <IconButton
+          icon={mdiClose}
+          size="small"
+          variant="ghost"
+          shape="round"
+          color="secondary"
+          class="me-1"
+          onclick={() => (searchValue = '')}
+          aria-label={$t('clear')}
+        />
+      {/if}
+    {/snippet}
+  </Input>
+  {#each filteredResults as [title, subItems] (title)}
+    <ApiKeyGrid {title} {subItems} selectedItems={selectedPermissions} {handleSelectItems} {handleDeselectItems} />
+  {/each}
+</div>