stuff

frontend/components/App/Header.vue

@@ -26,24 +26,24 @@
   ];
 
   const modals = reactive({
+    item: false,
     location: false,
     label: false,
-    item: false,
   });
 
   const dropdown = [
-    {
-      name: 'Location',
-      action: () => {
-        modals.location = true;
-      },
-    },
     {
       name: 'Item / Asset',
       action: () => {
         modals.item = true;
       },
     },
+    {
+      name: 'Location',
+      action: () => {
+        modals.location = true;
+      },
+    },
     {
       name: 'Label',
       action: () => {
@@ -60,6 +60,7 @@
     up the tree
    -->
   <ModalConfirm />
+  <ItemCreateModal v-model="modals.item" />
   <LabelCreateModal v-model="modals.label" />
   <LocationCreateModal v-model="modals.location" />
 
@@ -93,7 +94,7 @@
       <div class="dropdown">
         <label tabindex="0" class="btn btn-sm">
           <span>
-            <Icon name="mdi-plus" class="w-5 h-5 mr-2" />
+            <Icon name="mdi-plus" class="mr-1 -ml-1" />
           </span>
           Create
         </label>

frontend/components/Base/Button.vue

@@ -2,10 +2,14 @@
   <button
     :disabled="disabled || loading"
     class="btn"
+    ref="submitBtn"
     :class="{
       loading: loading,
     }"
   >
+    <label v-if="$slots.icon" class="swap swap-rotate mr-2" :class="{ 'swap-active': isHover }">
+      <slot name="icon" />
+    </label>
     <slot />
   </button>
 </template>
@@ -21,4 +25,7 @@
       default: false,
     },
   });
+
+  const submitBtn = ref(null);
+  const isHover = useElementHover(submitBtn);
 </script>

frontend/components/Base/Modal.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="z-[9999]">
+  <div class="z-[999]">
     <input type="checkbox" :id="modalId" class="modal-toggle" v-model="modal" />
-    <div class="modal">
-      <div class="modal-box relative">
+    <div class="modal modal-bottom sm:modal-middle overflow-visible">
+      <div class="modal-box overflow-visible relative">
         <button @click="close" :for="modalId" class="btn btn-sm btn-circle absolute right-2 top-2">✕</button>
 
         <h3 class="font-bold text-lg">

frontend/components/Form/Multiselect.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="form-control w-full" ref="menu">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <div class="dropdown dropdown-top sm:dropdown-end">
+      <div tabindex="0" class="w-full min-h-[48px] flex gap-2 p-4 flex-wrap border border-gray-400 rounded-lg">
+        <span class="badge" v-for="itm in value"> {{ name != '' ? itm[name] : itm }} </span>
+      </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-96 overflow-y-scroll scroll-bar"
+      >
+        <li
+          v-for="(obj, idx) in items"
+          :class="{
+            bordered: selectedIndexes[idx],
+          }"
+        >
+          <button type="button" @click="toggle(idx)">
+            {{ name != '' ? obj[name] : obj }}
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits(['update:modelValue']);
+  const props = defineProps({
+    label: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Array as () => any[],
+      default: null,
+    },
+    items: {
+      type: Array as () => any[],
+      required: true,
+    },
+    name: {
+      type: String,
+      default: 'name',
+    },
+    selectFirst: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const selectedIndexes = ref<Record<number, boolean>>({});
+
+  function toggle(index: number) {
+    selectedIndexes.value[index] = !selectedIndexes.value[index];
+
+    const item = props.items[index];
+
+    if (selectedIndexes.value[index]) {
+      console.log(value);
+      value.value = [...value.value, item];
+    } else {
+      console.log(value);
+      value.value = value.value.filter(itm => itm !== item);
+    }
+  }
+
+  watchOnce(
+    () => props.items,
+    () => {
+      if (props.selectFirst && props.items.length > 0) {
+        value.value = props.items[0];
+      }
+    }
+  );
+
+  const value = useVModel(props, 'modelValue', emit);
+</script>

frontend/components/Form/Select.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="form-control w-full">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <select class="select select-bordered" v-model="value">
+      <option disabled selected>Pick one</option>
+      <option v-for="obj in items" :value="obj">
+        {{ name != '' ? obj[name] : obj }}
+      </option>
+    </select>
+    <!-- <label class="label">
+      <span class="label-text-alt">Alt label</span>
+      <span class="label-text-alt">Alt label</span>
+    </label> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits(['update:modelValue']);
+  const props = defineProps({
+    label: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object as any,
+      default: null,
+    },
+    items: {
+      type: Array as () => any[],
+      required: true,
+    },
+    name: {
+      type: String,
+      default: 'name',
+    },
+    selectFirst: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  watchOnce(
+    () => props.items,
+    () => {
+      if (props.selectFirst && props.items.length > 0) {
+        value.value = props.items[0];
+      }
+    }
+  );
+
+  const value = useVModel(props, 'modelValue', emit);
+</script>

frontend/components/Form/TextArea.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="form-control">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <textarea class="textarea textarea-bordered h-24" v-model="value" :placeholder="placeholder" />
+    <label v-if="limit" class="label">
+      <span class="label-text-alt"></span>
+      <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits(['update:modelValue']);
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    limit: {
+      type: [Number, String],
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  });
+
+  const value = useVModel(props, 'modelValue', emit);
+  const valueLen = computed(() => {
+    console.log(value.value.length);
+
+    return value.value ? value.value.length : 0;
+  });
+</script>

frontend/components/Form/TextField.vue

@@ -9,13 +9,13 @@
 
 <script lang="ts" setup>
   const props = defineProps({
-    modelValue: {
-      type: String,
-      required: true,
-    },
     label: {
       type: String,
-      required: true,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: null,
     },
     type: {
       type: String,

frontend/components/Item/CreateModal.vue

@@ -0,0 +1,87 @@
+<template>
+  <BaseModal v-model="modal">
+    <template #title> Create Item </template>
+    <form @submit.prevent="create">
+      <FormSelect label="Location" v-model="form.location" :items="locations ?? []" select-first />
+      <FormTextField
+        :trigger-focus="focused"
+        ref="locationNameRef"
+        :autofocus="true"
+        label="Item Name"
+        v-model="form.name"
+      />
+      <FormTextField label="Item Description" v-model="form.description" />
+      <FormMultiselect label="Labels" v-model="form.labels" :items="labels ?? []" />
+      <div class="modal-action">
+        <BaseButton ref="submitBtn" type="submit" :loading="loading">
+          <template #icon>
+            <Icon name="mdi-package-variant" class="swap-off" />
+            <Icon name="mdi-package-variant-closed" class="swap-on" />
+          </template>
+          Create
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+  });
+
+  const submitBtn = ref(null);
+
+  const modal = useVModel(props, 'modelValue');
+  const loading = ref(false);
+  const focused = ref(false);
+  const form = reactive({
+    location: {},
+    name: '',
+    description: '',
+    color: '', // Future!
+    labels: [],
+  });
+
+  function reset() {
+    form.name = '';
+    form.description = '';
+    form.color = '';
+    focused.value = false;
+    modal.value = false;
+    loading.value = false;
+  }
+
+  whenever(
+    () => modal.value,
+    () => {
+      focused.value = true;
+    }
+  );
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  const { data: locations } = useAsyncData(async () => {
+    const { data } = await api.locations.getAll();
+    return data.items;
+  });
+
+  const { data: labels } = useAsyncData(async () => {
+    const { data } = await api.labels.getAll();
+    return data.items;
+  });
+
+  async function create() {
+    const { data, error } = await api.labels.create(form);
+    if (error) {
+      toast.error("Couldn't create label");
+      return;
+    }
+
+    toast.success('Item created');
+    reset();
+  }
+</script>

frontend/composables/use-preferences.ts

@@ -5,10 +5,10 @@ export type LocationViewPreferences = {
 };
 
 /**
- * useLocationViewPreferences loads the view preferences from local storage and hydrates
+ * useViewPreferences loads the view preferences from local storage and hydrates
  * them. These are reactive and will update the local storage when changed.
  */
-export function useLocationViewPreferences(): Ref<LocationViewPreferences> {
+export function useViewPreferences(): Ref<LocationViewPreferences> {
   const results = useLocalStorage(
     'homebox/preferences/location',
     {

frontend/lib/api/classes/labels.ts

@@ -7,7 +7,10 @@ export type LabelCreate = Details & {
 
 export type LabelUpdate = LabelCreate;
 
-export type Label = LabelCreate & OutType;
+export type Label = LabelCreate &
+  OutType & {
+    groupId: string;
+  };
 
 export class LabelsApi extends BaseAPI {
   async getAll() {

frontend/package.json

@@ -5,7 +5,8 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "test": "vitest"
   },
   "devDependencies": {
     "nuxt": "3.0.0-rc.8",
@@ -26,4 +27,4 @@
     "tailwindcss": "^3.1.8",
     "vue": "^3.2.38"
   }
-}
+}

frontend/pages/item/new.vue

@@ -0,0 +1,95 @@
+<script setup>
+  definePageMeta({
+    layout: 'home',
+  });
+
+  const show = reactive({
+    identification: true,
+    purchase: false,
+    sold: false,
+    extras: false,
+  });
+
+  const form = reactive({
+    name: '',
+    description: '',
+    notes: '',
+
+    // Item Identification
+    serialNumber: '',
+    modelNumber: '',
+    manufacturer: '',
+
+    // Purchase Information
+    purchaseTime: '',
+    purchasePrice: '',
+    purchaseFrom: '',
+
+    // Sold Information
+    soldTime: '',
+    soldPrice: '',
+    soldTo: '',
+    soldNotes: '',
+  });
+
+  function submit() {}
+</script>
+
+<template>
+  <BaseContainer is="section">
+    <BaseSectionHeader> Add an Item To Your Inventory </BaseSectionHeader>
+    <form @submit.prevent="submit" class="max-w-3xl mx-auto my-5 space-y-6">
+      <div class="divider collapse-title px-0 cursor-pointer">Required Information</div>
+      <div class="bg-base-200 card">
+        <div class="card-body">
+          <FormTextField label="Name" v-model="form.name" />
+          <FormTextArea label="Description" v-model="form.description" limit="1000" />
+        </div>
+      </div>
+
+      <div class="divider">
+        <button class="btn btn-sm" @click="show.identification = !show.identification">Product Information</button>
+      </div>
+      <div class="card bg-base-200" v-if="show.identification">
+        <div class="card-body grid md:grid-cols-2">
+          <FormTextField label="Serial Number" v-model="form.serialNumber" />
+          <FormTextField label="Model Number" v-model="form.modelNumber" />
+          <FormTextField label="Manufacturer" v-model="form.manufacturer" />
+        </div>
+      </div>
+      <div class="">
+        <button class="btn btn-sm" @click="show.purchase = !show.purchase">Purchase Information</button>
+        <div class="divider"></div>
+      </div>
+      <div class="card bg-base-200" v-if="show.purchase">
+        <div class="card-body grid md:grid-cols-2">
+          <FormTextField label="Purchase Time" v-model="form.purchaseTime" />
+          <FormTextField label="Purchase Price" v-model="form.purchasePrice" />
+          <FormTextField label="Purchase From" v-model="form.purchaseFrom" />
+        </div>
+      </div>
+
+      <div class="divider">
+        <button class="btn btn-sm" @click="show.sold = !show.sold">Sold Information</button>
+      </div>
+      <div class="card bg-base-200" v-if="show.sold">
+        <div class="card-body">
+          <div class="grid md:grid-cols-2 gap-2">
+            <FormTextField label="Sold Time" v-model="form.soldTime" />
+            <FormTextField label="Sold Price" v-model="form.soldPrice" />
+            <FormTextField label="Sold To" v-model="form.soldTo" />
+          </div>
+          <FormTextArea label="Sold Notes" v-model="form.soldNotes" limit="1000" />
+        </div>
+      </div>
+      <div class="divider">
+        <button class="btn btn-sm" @click="show.extras = !show.extras">Extras</button>
+      </div>
+      <div class="card bg-base-200" v-if="show.extras">
+        <div class="card-body">
+          <FormTextArea label="Notes" v-model="form.notes" limit="1000" />
+        </div>
+      </div>
+    </form>
+  </BaseContainer>
+</template>

frontend/pages/label/[id].vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+  import ActionsDivider from '../../components/Base/ActionsDivider.vue';
+
+  definePageMeta({
+    layout: 'home',
+  });
+
+  const route = useRoute();
+  const api = useUserApi();
+  const toast = useNotifier();
+
+  const preferences = useViewPreferences();
+
+  const labelId = computed<string>(() => route.params.id as string);
+
+  const { data: label } = useAsyncData(labelId.value, async () => {
+    const { data, error } = await api.labels.get(labelId.value);
+    if (error) {
+      toast.error('Failed to load label');
+      navigateTo('/home');
+      return;
+    }
+    return data;
+  });
+
+  function maybeTimeAgo(date?: string): string {
+    if (!date) {
+      return '??';
+    }
+
+    const time = new Date(date);
+
+    return `${useTimeAgo(time).value} (${useDateFormat(time, 'MM-DD-YYYY').value})`;
+  }
+
+  const details = computed(() => {
+    const dt = {
+      Name: label.value?.name || '',
+      Description: label.value?.description || '',
+    };
+
+    if (preferences.value.showDetails) {
+      dt['Created At'] = maybeTimeAgo(label.value?.createdAt);
+      dt['Updated At'] = maybeTimeAgo(label.value?.updatedAt);
+      dt['Database ID'] = label.value?.id || '';
+      dt['Group Id'] = label.value?.groupId || '';
+    }
+
+    return dt;
+  });
+
+  const { reveal } = useConfirm();
+
+  async function confirmDelete() {
+    const { isCanceled } = await reveal('Are you sure you want to delete this label? This action cannot be undone.');
+
+    if (isCanceled) {
+      return;
+    }
+
+    const { error } = await api.labels.delete(labelId.value);
+
+    if (error) {
+      toast.error('Failed to delete label');
+      return;
+    }
+    toast.success('Label deleted');
+    navigateTo('/home');
+  }
+
+  const updateModal = ref(false);
+  const updating = ref(false);
+  const updateData = reactive({
+    name: '',
+    description: '',
+    color: '',
+  });
+
+  function openUpdate() {
+    updateData.name = label.value?.name || '';
+    updateData.description = label.value?.description || '';
+    updateModal.value = true;
+  }
+
+  async function update() {
+    updating.value = true;
+    const { error, data } = await api.labels.update(labelId.value, updateData);
+
+    if (error) {
+      toast.error('Failed to update label');
+      return;
+    }
+
+    toast.success('Label updated');
+    console.log(data);
+    label.value = data;
+    updateModal.value = false;
+    updating.value = false;
+  }
+</script>
+
+<template>
+  <BaseContainer>
+    <BaseModal v-model="updateModal">
+      <template #title> Update Label </template>
+      <form v-if="label" @submit.prevent="update">
+        <FormTextField :autofocus="true" label="Label Name" v-model="updateData.name" />
+        <FormTextField label="Label Description" v-model="updateData.description" />
+        <div class="modal-action">
+          <BaseButton type="submit" :loading="updating"> Update </BaseButton>
+        </div>
+      </form>
+    </BaseModal>
+    <section>
+      <BaseSectionHeader class="mb-5">
+        {{ label ? label.name : '' }}
+      </BaseSectionHeader>
+      <BaseDetails class="mb-2" :details="details">
+        <template #title> Label Details </template>
+      </BaseDetails>
+      <div class="form-control ml-auto mr-2 max-w-[130px]">
+        <label class="label cursor-pointer">
+          <input type="checkbox" v-model.checked="preferences.showDetails" class="checkbox" />
+          <span class="label-text"> Detailed View </span>
+        </label>
+      </div>
+      <ActionsDivider @delete="confirmDelete" @edit="openUpdate" />
+    </section>
+
+    <!-- <section>
+        <BaseSectionHeader> Items </BaseSectionHeader>
+      </section> -->
+  </BaseContainer>
+</template>

frontend/pages/location/[id].vue

@@ -10,7 +10,7 @@
   const api = useUserApi();
   const toast = useNotifier();
 
-  const preferences = useLocationViewPreferences();
+  const preferences = useViewPreferences();
 
   const locationId = computed<string>(() => route.params.id as string);
 

frontend/pnpm-lock.yaml

@@ -16,6 +16,7 @@ specifiers:
   tailwindcss: ^3.1.8
   vitest: ^0.22.1
   vue: ^3.2.38
+  vue-multiselect: 3.0.0-alpha.2
 
 dependencies:
   '@iconify/vue': 3.2.1_vue@3.2.38
@@ -31,6 +32,7 @@ dependencies:
   postcss: 8.4.16
   tailwindcss: 3.1.8_postcss@8.4.16
   vue: 3.2.38
+  vue-multiselect: 3.0.0-alpha.2
 
 devDependencies:
   nuxt: 3.0.0-rc.8
@@ -5680,6 +5682,11 @@ packages:
       vue: 3.2.38
     dev: false
 
+  /vue-multiselect/3.0.0-alpha.2:
+    resolution: {integrity: sha512-Xp9fGJECns45v+v8jXbCIsAkCybYkEg0lNwr7Z6HDUSMyx2TEIK2giipPE+qXiShEc1Ipn+ZtttH2iq9hwXP4Q==}
+    engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
+    dev: false
+
   /vue-router/4.1.5_vue@3.2.38:
     resolution: {integrity: sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==}
     peerDependencies: