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

.vscode/settings.json

@@ -21,4 +21,13 @@
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "eslint.format.enable": true,
+  "css.validate": false,
+	"tailwindCSS.includeLanguages": {
+		"vue": "html",
+		"vue-html": "html"
+	},
+	"editor.quickSuggestions": {
+		"strings": true
+	},
+  "tailwindCSS.experimental.configFile": "./frontend/tailwind.config.js"
 }

frontend/assets/css/main.css

@@ -1,3 +1,7 @@
 .text-no-transform {
     text-transform: none !important;
+}
+
+.btn {
+    text-transform: none !important;
 }

frontend/components/Item/Card.vue

@@ -1,22 +1,18 @@
 <template>
   <NuxtLink class="group card rounded-md" :to="`/item/${item.id}`">
     <div class="rounded-t flex flex-col justify-center bg-neutral text-neutral-content p-5">
-      <h2 class="text-base mb-2 last:mb-0 font-bold two-line">{{ item.name }}</h2>
+      <h2 class="text-lg mb-1 last:mb-0 font-bold two-line">{{ item.name }}</h2>
-      <NuxtLink
+      <div>
-        v-if="item.location"
+        <NuxtLink v-if="item.location" class="text-sm hover:link" :to="`/location/${item.location.id}`">
-        class="inline-flex text-sm items-center hover:link"
-        :to="`/location/${item.location.id}`"
-      >
-        <Icon name="heroicons-map-pin" class="mr-1 h-4 w-4"></Icon>
-        <span>
           {{ item.location.name }}
-        </span>
+        </NuxtLink>
-      </NuxtLink>
+        <span class="flex-1"></span>
+      </div>
     </div>
     <div class="rounded-b p-4 pt-2 flex-grow col-span-4 flex flex-col gap-y-2 bg-base-100">
       <div class="flex justify-between gap-2">
         <div class="mr-auto tooltip tooltip-tip" data-tip="Purchase Price">
-          <span class="badge badge-sm badge-ghost h-5">
+          <span v-if="item.purchasePrice != '0'" class="badge badge-sm badge-ghost h-5">
             <Currency :amount="item.purchasePrice" />
           </span>
         </div>

frontend/components/Item/CreateModal.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseModal v-model="modal">
     <template #title> Create Item </template>
-    <form @submit.prevent="create">
+    <form @submit.prevent="create(true)">
       <FormSelect v-model="form.location" label="Location" :items="locations ?? []" />
       <FormTextField
         ref="locationNameRef"
@@ -13,13 +13,23 @@
       <FormTextArea v-model="form.description" label="Item Description" />
       <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
       <div class="modal-action">
-        <BaseButton ref="submitBtn" type="submit" :loading="loading">
+        <div class="flex justify-center">
-          <template #icon>
+          <BaseButton ref="submitBtn" type="submit" class="rounded-r-none" :loading="loading">
-            <Icon name="mdi-package-variant" class="swap-off" />
+            <template #icon>
-            <Icon name="mdi-package-variant-closed" class="swap-on" />
+              <Icon name="mdi-package-variant" class="swap-off h-5 w-5" />
-          </template>
+              <Icon name="mdi-package-variant-closed" class="swap-on h-5 w-5" />
-          Create
+            </template>
-        </BaseButton>
+            Create
+          </BaseButton>
+          <div class="dropdown dropdown-top">
+            <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
+              <Icon class="h-5 w-5" name="mdi-chevron-down" />
+            </label>
+            <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
+              <li><button @click.prevent="create(false)">Create and Add Another</button></li>
+            </ul>
+          </div>
+        </div>
       </div>
     </form>
   </BaseModal>
@@ -75,15 +85,6 @@
     labels: [],
   });
 
-  function reset() {
-    form.name = "";
-    form.description = "";
-    form.color = "";
-    focused.value = false;
-    modal.value = false;
-    loading.value = false;
-  }
-
   whenever(
     () => modal.value,
     () => {
@@ -99,7 +100,7 @@
     }
   );
 
-  async function create() {
+  async function create(close = false) {
     if (!form.location) {
       return;
     }
@@ -119,7 +120,17 @@
     }
 
     toast.success("Item created");
-    reset();
+
-    navigateTo(`/item/${data.id}`);
+    // Reset
+    form.name = "";
+    form.description = "";
+    form.color = "";
+    focused.value = false;
+    loading.value = false;
+
+    if (close) {
+      modal.value = false;
+      navigateTo(`/item/${data.id}`);
+    }
   }
 </script>

frontend/components/global/CopyText.vue

@@ -1,13 +1,27 @@
 <template>
-  <button class="btn btn-outline btn-square btn-sm" @click="copyText">
+  <button class="" @click="copyText">
     <label
       class="swap swap-rotate"
       :class="{
         'swap-active': copied,
       }"
     >
-      <Icon class="swap-off h-5 w-5" name="mdi-content-copy" />
+      <Icon
-      <Icon class="swap-on h-5 w-5" name="mdi-clipboard" />
+        class="swap-off"
+        name="mdi-content-copy"
+        :style="{
+          height: `${iconSize}px`,
+          width: `${iconSize}px`,
+        }"
+      />
+      <Icon
+        class="swap-on"
+        name="mdi-clipboard"
+        :style="{
+          height: `${iconSize}px`,
+          width: `${iconSize}px`,
+        }"
+      />
     </label>
   </button>
 </template>
@@ -18,6 +32,10 @@
       type: String as () => string,
       default: "",
     },
+    iconSize: {
+      type: Number as () => number,
+      default: 20,
+    },
   });
 
   const copied = ref(false);

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="border-t border-gray-300 px-4 py-5 sm:p-0">
     <dl class="sm:divide-y sm:divide-gray-300">
-      <div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+      <div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid group sm:grid-cols-3 sm:gap-4 sm:px-6">
         <dt class="text-sm font-medium text-base-content">
           {{ detail.name }}
         </dt>
-        <dd class="mt-1 text-sm text-base-content sm:col-span-2 sm:mt-0">
+        <dd class="text-sm text-base-content text-start sm:col-span-2">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">
             <DateTime v-if="detail.type == 'date'" :date="detail.text" />
             <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
@@ -23,7 +23,15 @@
               </ClientOnly>
             </template>
             <template v-else>
-              {{ detail.text }}
+              <span class="flex items-center">
+                {{ detail.text }}
+                <span
+                  v-if="detail.copyable"
+                  class="opacity-0 group-hover:opacity-100 ml-4 my-0 duration-75 transition-opacity"
+                >
+                  <CopyText :text="detail.text.toString()" :icon-size="16" class="btn btn-xs btn-ghost btn-circle" />
+                </span>
+              </span>
             </template>
           </slot>
         </dd>

frontend/components/global/DetailsSection/types.ts

@@ -29,6 +29,7 @@ type MarkdownDetail = BaseDetail & {
 export type Detail = BaseDetail & {
   text: StringLike;
   type?: "text";
+  copyable?: boolean;
 };
 
 export type AnyDetail = DateDetail | CurrencyDetail | LinkDetail | MarkdownDetail | Detail;

frontend/composables/use-preferences.ts

@@ -4,7 +4,7 @@ import { DaisyTheme } from "~~/lib/data/themes";
 export type LocationViewPreferences = {
   showDetails: boolean;
   showEmpty: boolean;
-  editorSimpleView: boolean;
+  editorAdvancedView: boolean;
   theme: DaisyTheme;
 };
 
@@ -18,8 +18,8 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
     {
       showDetails: true,
       showEmpty: true,
-      editorSimpleView: true,
+      editorAdvancedView: false,
-      theme: "garden",
+      theme: "homebox",
     },
     { mergeDefaults: true }
   );

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

@@ -96,7 +96,7 @@ export interface ItemOut {
   /** @example "0" */
   purchasePrice: string;
   /** Purchase */
-  purchaseTime: string;
+  purchaseTime: Date;
   quantity: number;
   serialNumber: string;
   soldNotes: string;
@@ -148,7 +148,7 @@ export interface ItemUpdate {
   /** @example "0" */
   purchasePrice: string;
   /** Purchase */
-  purchaseTime: string;
+  purchaseTime: Date;
   quantity: number;
   /** Identifications */
   serialNumber: string;
@@ -228,7 +228,7 @@ export interface LocationUpdate {
 export interface MaintenanceEntry {
   /** @example "0" */
   cost: string;
-  date: string;
+  date: Date;
   description: string;
   id: string;
   name: string;
@@ -237,7 +237,7 @@ export interface MaintenanceEntry {
 export interface MaintenanceEntryCreate {
   /** @example "0" */
   cost: string;
-  date: string;
+  date: Date;
   description: string;
   name: string;
 }
@@ -245,7 +245,7 @@ export interface MaintenanceEntryCreate {
 export interface MaintenanceEntryUpdate {
   /** @example "0" */
   cost: string;
-  date: string;
+  date: Date;
   description: string;
   name: string;
 }
@@ -257,7 +257,7 @@ export interface MaintenanceLog {
   itemId: string;
 }
 
-export interface PaginationResultItemSummary {
+export interface PaginationResultRepoItemSummary {
   items: ItemSummary[];
   page: number;
   pageSize: number;
@@ -294,7 +294,7 @@ export interface ValueOverTime {
 }
 
 export interface ValueOverTimeEntry {
-  date: string;
+  date: Date;
   name: string;
   value: number;
 }

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

@@ -55,6 +55,7 @@
       item.value?.attachments.reduce((acc, cur) => {
         if (cur.type === "photo") {
           acc.push({
+            // @ts-expect-error - it's impossible for this to be null at this point
             src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`),
           });
         }
@@ -99,6 +100,10 @@
   });
 
   const assetID = computed<Details>(() => {
+    if (!item.value) {
+      return [];
+    }
+
     if (item.value?.assetId === "000-000") {
       return [];
     }
@@ -112,6 +117,10 @@
   });
 
   const itemDetails = computed<Details>(() => {
+    if (!item.value) {
+      return [];
+    }
+
     return [
       {
         name: "Description",
@@ -125,14 +134,17 @@
       {
         name: "Serial Number",
         text: item.value?.serialNumber,
+        copyable: true,
       },
       {
         name: "Model Number",
         text: item.value?.modelNumber,
+        copyable: true,
       },
       {
         name: "Manufacturer",
         text: item.value?.manufacturer,
+        copyable: true,
       },
       {
         name: "Insured",
@@ -362,6 +374,7 @@
 
 <template>
   <BaseContainer v-if="item" class="pb-8">
+    <Title>{{ item.name }}</Title>
     <dialog ref="refDialog" class="z-[999] fixed bg-transparent">
       <div ref="refDialogBody" class="relative">
         <div class="absolute right-0 -mt-3 -mr-3 sm:-mt-4 sm:-mr-4 space-x-1">
@@ -383,6 +396,7 @@
         <span class="text-base-content">
           {{ item ? item.name : "" }}
         </span>
+
         <div v-if="item.parent" class="text-sm breadcrumbs pb-0">
           <ul class="text-base-content/70">
             <li>
@@ -392,6 +406,9 @@
           </ul>
         </div>
         <template #description>
+          <p class="text-lg">
+            {{ item ? item.description : "" }}
+          </p>
           <div class="flex flex-wrap gap-2 mt-3">
             <NuxtLink ref="badge" class="badge p-3" :to="`/location/${item.location.id}`">
               <Icon name="heroicons-map-pin" class="mr-2 swap-on"></Icon>
@@ -403,14 +420,14 @@
           </div>
         </template>
       </BaseSectionHeader>
-      <div class="flex flex-wrap items-center justify-between mb-6">
+      <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
-        <div class="tabs">
+        <div class="btn-group">
           <NuxtLink
             v-for="t in tabs"
             :key="t.id"
             :to="t.to"
-            class="tab tab-bordered lg:tab-lg"
+            class="btn btn-sm"
-            :class="`${t.to === currentPath ? 'tab-active' : ''}`"
+            :class="`${t.to === currentPath ? 'btn-active' : ''}`"
           >
             {{ t.name }}
           </NuxtLink>
@@ -503,7 +520,7 @@
       </div>
     </section>
 
-    <section v-if="!hasNested" class="my-6 px-3">
+    <section v-if="!hasNested" class="my-6">
       <BaseSectionHeader v-if="item && item.children && item.children.length > 0"> Child Items </BaseSectionHeader>
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <ItemCard v-for="child in item.children" :key="child.id" :item="child" />

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" />
+                    <input v-model="preferences.editorAdvancedView" type="checkbox" class="toggle toggle-primary" />
-                    <span class="label-text ml-4"> Simple View </span>
+                    <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>

frontend/pages/profile.vue

@@ -221,11 +221,11 @@
             <BaseButton size="sm" @click="generateToken"> Generate Invite Link </BaseButton>
           </div>
           <div v-if="token" class="pt-4 flex items-center pl-1">
-            <CopyText class="mr-2 btn-primary" :text="tokenUrl" />
+            <CopyText class="mr-2 btn-primary btn btn-outline btn-square btn-sm" :text="tokenUrl" />
             {{ tokenUrl }}
           </div>
           <div v-if="token" class="pt-4 flex items-center pl-1">
-            <CopyText class="mr-2 btn-primary" :text="token" />
+            <CopyText class="mr-2 btn-primary btn btn-outline btn-square btn-sm" :text="token" />
             {{ token }}
           </div>
         </div>