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/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>
-      <NuxtLink
-        v-if="item.location"
-        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>
+      <h2 class="text-lg mb-1 last:mb-0 font-bold two-line">{{ item.name }}</h2>
+      <div>
+        <NuxtLink v-if="item.location" class="text-sm hover:link" :to="`/location/${item.location.id}`">
           {{ 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">
-          <template #icon>
-            <Icon name="mdi-package-variant" class="swap-off" />
-            <Icon name="mdi-package-variant-closed" class="swap-on" />
-          </template>
-          Create
-        </BaseButton>
+        <div class="flex justify-center">
+          <BaseButton ref="submitBtn" type="submit" class="rounded-r-none" :loading="loading">
+            <template #icon>
+              <Icon name="mdi-package-variant" class="swap-off h-5 w-5" />
+              <Icon name="mdi-package-variant-closed" class="swap-on h-5 w-5" />
+            </template>
+            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 class="swap-on h-5 w-5" name="mdi-clipboard" />
+      <Icon
+        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;