feat: expanded search for items (#46)

* expanded search for items

* range domain from email to example

* implement pagination for items

frontend/pages/home.vue

@@ -157,13 +157,6 @@
         </BaseCard>
       </section>
 
-      <section>
-        <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
-        <div class="flex gap-2 flex-wrap">
-          <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
-        </div>
-      </section>
-
       <section>
         <BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
         <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
@@ -172,9 +165,9 @@
       </section>
 
       <section>
-        <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <ItemCard v-for="item in items" :key="item.id" :item="item" />
+        <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
+        <div class="flex gap-2 flex-wrap">
+          <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
         </div>
       </section>
     </BaseContainer>

frontend/pages/index.vue

@@ -16,7 +16,7 @@
 
     if (data) {
       console.log(data);
-      username.value = "demo@email.com";
+      username.value = "demo@example.com";
       password.value = "demo";
     }
     return data;
@@ -24,7 +24,7 @@
 
   whenever(status, status => {
     if (status?.demo) {
-      email.value = "demo@email.com";
+      email.value = "demo@example.com";
       loginPassword.value = "demo";
     }
   });
@@ -198,7 +198,7 @@
                   </h2>
                   <template v-if="status && status.demo">
                     <p class="text-xs italic text-center">This is a demo instance</p>
-                    <p class="text-xs text-center"><b>Email</b> demo@email.com</p>
+                    <p class="text-xs text-center"><b>Email</b> demo@example.com</p>
                     <p class="text-xs text-center"><b>Password</b> demo</p>
                   </template>
                   <FormTextField v-model="email" label="Email" />

frontend/pages/items.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+  import { ItemSummary } from "~~/lib/api/types/data-contracts";
+  import { useLabelStore } from "~~/stores/labels";
+  import { useLocationStore } from "~~/stores/locations";
+
+  definePageMeta({
+    layout: "home",
+  });
+  useHead({
+    title: "Homebox | Home",
+  });
+
+  const api = useUserApi();
+
+  const query = ref("");
+  const loading = useMinLoader(2000);
+  const results = ref<ItemSummary[]>([]);
+
+  async function search() {
+    loading.value = true;
+
+    const locations = selectedLocations.value.map(l => l.id);
+    const labels = selectedLabels.value.map(l => l.id);
+
+    const { data, error } = await api.items.getAll({ q: query.value, locations, labels });
+    if (error) {
+      loading.value = false;
+      return;
+    }
+
+    results.value = data.items;
+    loading.value = false;
+  }
+
+  onMounted(() => {
+    search();
+  });
+
+  const locationsStore = useLocationStore();
+  const locations = computed(() => locationsStore.locations);
+
+  const labelStore = useLabelStore();
+  const labels = computed(() => labelStore.labels);
+
+  const advanced = ref(false);
+  const selectedLocations = ref([]);
+  const selectedLabels = ref([]);
+
+  watchEffect(() => {
+    if (!advanced.value) {
+      selectedLocations.value = [];
+      selectedLabels.value = [];
+    }
+  });
+
+  watchDebounced(query, search, { debounce: 250, maxWait: 1000 });
+  watchDebounced(selectedLocations, search, { debounce: 250, maxWait: 1000 });
+  watchDebounced(selectedLabels, search, { debounce: 250, maxWait: 1000 });
+</script>
+
+<template>
+  <BaseContainer class="mb-16">
+    <FormTextField v-model="query" placeholder="Search" />
+    <div class="flex mt-1">
+      <label class="ml-auto label cursor-pointer">
+        <input v-model="advanced" type="checkbox" class="toggle toggle-primary" />
+        <span class="label-text text-neutral-content ml-2"> Filters </span>
+      </label>
+    </div>
+    <BaseCard v-if="advanced" class="my-1 overflow-visible">
+      <template #title> Filters </template>
+      <template #subtitle>
+        Location and label filters use the 'OR' operation. If more than one is selected only one will be required for a
+        match
+      </template>
+      <div class="px-4 pb-4">
+        <FormMultiselect v-model="selectedLabels" label="Labels" :items="labels ?? []" />
+        <FormMultiselect v-model="selectedLocations" label="Labels" :items="locations ?? []" />
+      </div>
+    </BaseCard>
+    <section class="mt-10">
+      <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <TransitionGroup name="list">
+          <ItemCard v-for="item in results" :key="item.id" :item="item" />
+        </TransitionGroup>
+        <div class="hidden first:inline text-xl">No Items Found</div>
+      </div>
+    </section>
+  </BaseContainer>
+</template>
+
+<style lang="css">
+  .list-move,
+  .list-enter-active,
+  .list-leave-active {
+    transition: all 0.25s ease;
+  }
+
+  .list-enter-from,
+  .list-leave-to {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+
+  .list-leave-active {
+    position: absolute;
+  }
+</style>