stuff

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);