Add ISAC weapon data management

2026-07-25 00:49:08 -04:00
parent 3f78f0f9d8
commit e528f18d8f
12 changed files with 555 additions and 13 deletions
@@ -0,0 +1,52 @@
+<script lang="ts">
+	type Item = { id: string; name: string };
+	let {
+		items,
+		selected = $bindable<string[]>([]),
+		excludedIds = [],
+		fieldName,
+		emptyLabel = 'NO MATCHING RECORDS'
+	}: {
+		items: Item[];
+		selected?: string[];
+		excludedIds?: string[];
+		fieldName: string;
+		emptyLabel?: string;
+	} = $props();
+	let query = $state('');
+	const normalizedQuery = $derived(query.normalize('NFKC').trim().toLocaleLowerCase());
+	const available = $derived(items.filter((item) =>
+		!excludedIds.includes(item.id)
+		&& (!normalizedQuery || item.name.toLocaleLowerCase().includes(normalizedQuery))
+	));
+	const visible = $derived(available.slice(0, 30));
+	const selectedItems = $derived(selected.map((id) => items.find((item) => item.id === id)).filter((item): item is Item => Boolean(item)));
+	const toggle = (id: string) => {
+		selected = selected.includes(id) ? selected.filter((value) => value !== id) : [...selected, id];
+	};
+</script>
+
+<div class="assignment-picker">
+	{#each selected as id}<input type="hidden" name={fieldName} value={id}/>{/each}
+	<div class="assignment-selected">
+		<div class="assignment-summary"><span>ASSIGNED</span><b>{selected.length}</b></div>
+		<div class="assignment-chips">
+			{#each selectedItems as item}
+				<button type="button" onclick={() => toggle(item.id)} aria-label={`Remove ${item.name}`}><span>{item.name}</span><b>×</b></button>
+			{:else}
+				<small>NO TALENTS ASSIGNED</small>
+			{/each}
+		</div>
+	</div>
+	<label class="assignment-search"><span>FILTER AVAILABLE TALENTS</span><input type="search" bind:value={query} placeholder="Search by talent name…" autocomplete="off"/></label>
+	<div class="assignment-results-head"><span>{available.length} MATCHES</span>{#if available.length > visible.length}<b>SHOWING FIRST {visible.length}</b>{/if}</div>
+	<div class="assignment-results" role="list">
+		{#each visible as item}
+			<button type="button" class:selected={selected.includes(item.id)} aria-pressed={selected.includes(item.id)} onclick={() => toggle(item.id)}>
+				<span>{item.name}</span><b>{selected.includes(item.id) ? 'ASSIGNED' : 'ADD ＋'}</b>
+			</button>
+		{:else}
+			<p>{emptyLabel}</p>
+		{/each}
+	</div>
+</div>