feat: expanded search for items (#46)

* expanded search for items

* range domain from email to example

* implement pagination for items

frontend/components/App/Header.vue

@@ -18,6 +18,10 @@
       name: "Home",
       href: "/home",
     },
+    {
+      name: "Items",
+      href: "/items",
+    },
     {
       name: "Logout",
       action: logout,

frontend/components/Form/Multiselect.vue

@@ -11,7 +11,8 @@
       </div>
       <ul
         tabindex="0"
-        class="dropdown-content mb-1 menu shadow border border-gray-400 rounded bg-base-100 w-full z-[9999] max-h-60 overflow-y-scroll scroll-bar"
+        style="display: inline"
+        class="dropdown-content mb-1 menu shadow border border-gray-400 rounded bg-base-100 w-full z-[9999] max-h-60 overflow-y-scroll"
       >
         <li
           v-for="(obj, idx) in items"

frontend/components/Form/TextField.vue

@@ -3,13 +3,13 @@
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <input ref="input" v-model="value" :type="type" class="input input-bordered w-full" />
+    <input ref="input" v-model="value" :placeholder="placeholder" :type="type" class="input input-bordered w-full" />
   </div>
   <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
-    <input v-model="value" class="input input-bordered col-span-3 w-full mt-2" />
+    <input v-model="value" :placeholder="placeholder" class="input input-bordered col-span-3 w-full mt-2" />
   </div>
 </template>
 
@@ -35,6 +35,10 @@
       type: Boolean,
       default: false,
     },
+    placeholder: {
+      type: String,
+      default: "",
+    },
   });
 
   const input = ref<HTMLElement | null>(null);

frontend/composables/use-min-loader.ts

@@ -0,0 +1,32 @@
+import { WritableComputedRef } from "vue";
+
+export function useMinLoader(ms = 500): WritableComputedRef<boolean> {
+  const loading = ref(false);
+
+  const locked = ref(false);
+
+  const minLoading = computed({
+    get: () => loading.value,
+    set: value => {
+      if (value) {
+        loading.value = true;
+
+        if (!locked.value) {
+          locked.value = true;
+          setTimeout(() => {
+            locked.value = false;
+          }, ms);
+        }
+      }
+
+      if (!value && !locked.value) {
+        loading.value = false;
+      } else if (!value && locked.value) {
+        setTimeout(() => {
+          loading.value = false;
+        }, ms);
+      }
+    },
+  });
+  return minLoading;
+}

frontend/lib/api/classes/items.ts

@@ -8,12 +8,19 @@ import {
   ItemSummary,
   ItemUpdate,
 } from "../types/data-contracts";
-import { AttachmentTypes } from "../types/non-generated";
-import { Results } from "./types";
+import { AttachmentTypes, PaginationResult } from "../types/non-generated";
+
+export type ItemsQuery = {
+  page?: number;
+  pageSize?: number;
+  locations?: string[];
+  labels?: string[];
+  q?: string;
+};
 
 export class ItemsApi extends BaseAPI {
-  getAll() {
-    return this.http.get<Results<ItemSummary>>({ url: route("/items") });
+  getAll(q: ItemsQuery = {}) {
+    return this.http.get<PaginationResult<ItemSummary>>({ url: route("/items", q) });
   }
 
   create(item: ItemCreate) {

frontend/lib/api/classes/labels.ts

@@ -1,6 +1,6 @@
 import { BaseAPI, route } from "../base";
 import { LabelCreate, LabelOut } from "../types/data-contracts";
-import { Results } from "./types";
+import { Results } from "../types/non-generated";
 
 export class LabelsApi extends BaseAPI {
   getAll() {

frontend/lib/api/classes/locations.ts

@@ -1,6 +1,6 @@
 import { BaseAPI, route } from "../base";
 import { LocationOutCount, LocationCreate, LocationOut } from "../types/data-contracts";
-import { Results } from "./types";
+import { Results } from "../types/non-generated";
 
 export type LocationUpdate = LocationCreate;
 

frontend/lib/api/classes/types/index.ts

@@ -1,3 +0,0 @@
-export type Results<T> = {
-  items: T[];
-};

frontend/lib/api/types/data-contracts.ts

@@ -187,6 +187,7 @@ export interface LocationSummary {
   updatedAt: Date;
 }
 
+
 export interface UserOut {
   email: string;
   groupId: string;

frontend/lib/api/types/non-generated.ts

@@ -8,3 +8,14 @@ export enum AttachmentTypes {
 export type Result<T> = {
   item: T;
 };
+
+export type Results<T> = {
+  items: T[];
+};
+
+export interface PaginationResult<T> {
+  items: T[];
+  page: number;
+  pageSize: number;
+  total: number;
+}

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>