feature: add filters to Items

#13

Author: Attacktive

src/components/tabs/Items.svelte

@@ -1,15 +1,37 @@
 <script lang="ts">
-	import type { Item } from "$/types/item";
-	import { Accordion, AccordionItem, Button, Input, Label, Modal, NumberInput, Select, SpeedDial, SpeedDialButton } from "flowbite-svelte";
-	import { CirclePlusSolid, TrashBinOutline } from "flowbite-svelte-icons";
+	import type { Filter, Item, ItemCategoryIndex, NullableItemCategoryIndex } from "$/types/item";
+	import { Accordion, AccordionItem, Button, Input, Label, Modal, NumberInput, Select, type SelectOptionType, SpeedDial, SpeedDialButton } from "flowbite-svelte";
+	import { CirclePlusSolid, SearchOutline, TrashBinOutline } from "flowbite-svelte-icons";
 	import { saveData } from "$/store/save-data";
 	import { getItemCategory, itemCategories, nonExhaustiveItemIdList } from "$/types/item";
 
-	const categoryOptions = itemCategories.map(itemCategory => ({
+	const categoryOptions: SelectOptionType<ItemCategoryIndex>[] = itemCategories.map(itemCategory => ({
 		name: itemCategory.text,
 		value: itemCategory.index
 	}));
 
+	const categoryOptionsWithNone: SelectOptionType<NullableItemCategoryIndex>[] = [
+		{ name: "Any categories", value: -1 },
+		...categoryOptions
+	];
+
+	const filter = $state<Filter>({ id: "", category: -1 });
+	const passesFiltration = (item: Item) => {
+		if (filter.id.length > 0) {
+			if (!item.id.toLowerCase().includes(filter.id.toLowerCase())) {
+				return false;
+			}
+		}
+
+		if (filter.category >= 0) {
+			if (filter.category !== item.category) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
 	console.debug(JSON.stringify($saveData.myItemList.map(x => x.id).sort()));
 
 	let toShowModal = $state(false);
@@ -67,27 +89,36 @@
 		</SpeedDialButton>
 	</SpeedDial>
 
-	<Accordion>
+	<div class="flex justify-between space-x-20 mb-3">
+		<Input placeholder="ID" bind:value={filter.id} class="">
+			<SearchOutline slot="left"/>
+		</Input>
+		<Select placeholder="Category" bind:value={filter.category} items={categoryOptionsWithNone} class=""/>
+	</div>
+
+	<Accordion multiple>
 		{#each $saveData.myItemList as item, index (`item-${index}`)}
 			{@const ordinal = index + 1}
-			<AccordionItem>
-				{#snippet header()}
-					<span >#{ordinal} {item.id} ({getItemCategory(item.category)})</span>
-				{/snippet}
-				<div class="my-1">
-					<Label>Item ID</Label>
-					<Input bind:value={item.id} list="item-id-list"/>
-				</div>
-				<div class="mt-1 mb-3">
-					<Label>Item Count</Label>
-					<NumberInput bind:value={item.count} step="1"/>
-				</div>
-				<div class="flex flex-row-reverse">
-					<Button on:click={() => throwAway(index)}>
-						<TrashBinOutline/>
-					</Button>
-				</div>
-			</AccordionItem>
+			{#if passesFiltration(item)}
+				<AccordionItem>
+					{#snippet header()}
+						<span >#{ordinal} {item.id} ({getItemCategory(item.category)})</span>
+					{/snippet}
+					<div class="my-1">
+						<Label>Item ID</Label>
+						<Input bind:value={item.id} list="item-id-list"/>
+					</div>
+					<div class="mt-1 mb-3">
+						<Label>Item Count</Label>
+						<NumberInput bind:value={item.count} step="1"/>
+					</div>
+					<div class="flex flex-row-reverse">
+						<Button on:click={() => throwAway(index)}>
+							<TrashBinOutline/>
+						</Button>
+					</div>
+				</AccordionItem>
+			{/if}
 		{/each}
 	</Accordion>
 {:else}

src/types/item.ts

@@ -1,6 +1,10 @@
+export type ItemCategoryIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 16;
+export type NullableItemCategoryIndex = ItemCategoryIndex | -1;
+export type ItemCategoryText = "Consumable" | "Booster" | "Spell" | "Tome" | "Equipment" | "Key" | "In-battle Consumable" | "Ingredient" | "⁉ IncreasingStoneRed" | "Stimulus";
+
 interface ItemCategoryMapping {
-	index: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 16;
-	text: "Consumable" | "Booster" | "Spell" | "Tome" | "Equipment" | "Key" | "In-battle Consumable" | "Ingredient" | "⁉ IncreasingStoneRed" | "Stimulus";
+	index: ItemCategoryIndex;
+	text: ItemCategoryText;
 }
 
 export const nonExhaustiveItemIdList: readonly string[] = Object.freeze([
@@ -295,6 +299,11 @@ export interface Item {
 	category: number;
 }
 
+export interface Filter {
+	id: string;
+	category: NullableItemCategoryIndex;
+}
+
 export function getItemCategory(itemCategoryNumber: number): ItemCategoryMapping["text"] {
 	const found = itemCategories.find(itemCategory => itemCategory.index === itemCategoryNumber);
 	if (found) {