refactor: refactor item page UI (#235)

* fix generated types

* fix tailwind auto-complete

* force lowercase buttons

* add title and change style for items page

* add copy button support for item details

* empty state for log

* fix duplicate padding

* add option for create without closing the current dialog.

* hide purchase price is not set

* invert toggle for edit mode

* update styles on item cards

* add edit support for maintenance logs

frontend/pages/item/[id]/index/edit.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ItemAttachment, ItemField, ItemUpdate } from "~~/lib/api/types/data-contracts";
+  import { ItemAttachment, ItemField, ItemOut, ItemUpdate } from "~~/lib/api/types/data-contracts";
   import { AttachmentTypes } from "~~/lib/api/types/non-generated";
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
@@ -71,7 +71,7 @@
   type FormField = {
     type: "text" | "textarea" | "select" | "date" | "label" | "location" | "number" | "checkbox";
     label: string;
-    ref: string;
+    ref: keyof ItemOut;
   };
 
   const mainFields: FormField[] = [
@@ -342,10 +342,10 @@
             <span class="text-base-content"> Edit </span>
             <template #after>
               <div class="modal-action mt-3">
-                <div class="mr-auto tooltip" data-tip="Hide the cruft! ">
+                <div class="mr-auto tooltip" data-tip="Show Advanced Options">
                   <label class="label cursor-pointer mr-auto">
-                    <input v-model="preferences.editorSimpleView" type="checkbox" class="toggle toggle-primary" />
-                    <span class="label-text ml-4"> Simple View </span>
+                    <input v-model="preferences.editorAdvancedView" type="checkbox" class="toggle toggle-primary" />
+                    <span class="label-text ml-4"> Advanced </span>
                   </label>
                 </div>
                 <BaseButton size="sm" @click="saveItem">
@@ -368,7 +368,7 @@
             <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
 
             <Autocomplete
-              v-if="!preferences.editorSimpleView"
+              v-if="preferences.editorAdvancedView"
               v-model="parent"
               v-model:search="query"
               :items="results"
@@ -438,7 +438,7 @@
         </BaseCard>
 
         <div
-          v-if="!preferences.editorSimpleView"
+          v-if="preferences.editorAdvancedView"
           ref="attDropZone"
           class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg"
         >
@@ -494,7 +494,7 @@
           </div>
         </div>
 
-        <div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">Purchase Details</h3>
           </div>
@@ -536,7 +536,7 @@
           </div>
         </div>
 
-        <div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">Warranty Details</h3>
           </div>
@@ -578,7 +578,7 @@
           </div>
         </div>
 
-        <div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
+        <div v-if="preferences.editorAdvancedView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
           <div class="px-4 py-5 sm:px-6">
             <h3 class="text-lg font-medium leading-6">Sold Details</h3>
           </div>

frontend/pages/item/[id]/index/log.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import DatePicker from "~~/components/Form/DatePicker.vue";
   import { StatsFormat } from "~~/components/global/StatCard/types";
-  import { ItemOut } from "~~/lib/api/types/data-contracts";
+  import { ItemOut, MaintenanceEntry } from "~~/lib/api/types/data-contracts";
 
   const props = defineProps<{
     item: ItemOut;
@@ -45,6 +45,7 @@
   });
 
   const entry = reactive({
+    id: null as string | null,
     modal: false,
     name: "",
     date: new Date(),
@@ -56,7 +57,21 @@
     entry.modal = true;
   }
 
+  function resetEntry() {
+    entry.id = null;
+    entry.name = "";
+    entry.date = new Date();
+    entry.description = "";
+    entry.cost = "";
+  }
+
   async function createEntry() {
+    if (entry.id) {
+      editEntry();
+      resetEntry();
+      return;
+    }
+
     const { error } = await api.items.maintenance.create(props.item.id, {
       name: entry.name,
       date: entry.date,
@@ -72,6 +87,7 @@
     entry.modal = false;
 
     refreshLog();
+    resetEntry();
   }
 
   const confirm = useConfirm();
@@ -90,6 +106,39 @@
     }
     refreshLog();
   }
+
+  function openEditDialog(e: MaintenanceEntry) {
+    entry.modal = true;
+    entry.id = e.id;
+    entry.name = e.name;
+    entry.date = new Date(e.date);
+    entry.description = e.description;
+    entry.cost = e.cost;
+
+    console.log(e);
+  }
+
+  async function editEntry() {
+    if (!entry.id) {
+      return;
+    }
+
+    const { error } = await api.items.maintenance.update(props.item.id, entry.id, {
+      name: entry.name,
+      date: entry.date,
+      description: entry.description,
+      cost: entry.cost,
+    });
+
+    if (error) {
+      toast.error("Failed to update entry");
+      return;
+    }
+
+    entry.modal = false;
+
+    refreshLog();
+  }
 </script>
 
 <template>
@@ -102,11 +151,11 @@
         <FormTextArea v-model="entry.description" label="Notes" />
         <FormTextField v-model="entry.cost" autofocus label="Cost" />
         <div class="py-2 flex justify-end">
-          <BaseButton type="submit" class="ml-2">
+          <BaseButton type="submit" class="ml-2 mt-2">
             <template #icon>
               <Icon name="mdi-post" />
             </template>
-            Create
+            {{ entry.id ? "Update" : "Create" }}
           </BaseButton>
         </div>
       </form>
@@ -154,7 +203,13 @@
           <div class="p-6">
             <Markdown :source="e.description" />
           </div>
-          <div class="flex justify-end p-4">
+          <div class="flex justify-end p-4 gap-1">
+            <BaseButton size="sm" @click="openEditDialog(e)">
+              <template #icon>
+                <Icon name="mdi-edit" />
+              </template>
+              Edit
+            </BaseButton>
             <BaseButton size="sm" @click="deleteEntry(e.id)">
               <template #icon>
                 <Icon name="mdi-delete" />
@@ -163,6 +218,16 @@
             </BaseButton>
           </div>
         </BaseCard>
+        <div class="hidden first:block">
+          <button
+            type="button"
+            class="relative block w-full rounded-lg border-2 border-dashed border-base-content p-12 text-center"
+            @click="newEntry()"
+          >
+            <Icon name="mdi-wrench-clock" class="h-16 w-16"></Icon>
+            <span class="mt-2 block text-sm font-medium text-gray-900"> Create Your First Entry </span>
+          </button>
+        </div>
       </div>
     </section>
   </div>