From 8940f98de694192f2b4f5181b16dd72f10d8cb4b Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Fri, 20 Jan 2023 14:51:35 -0900
Subject: [PATCH] add copy button support for item details

---
 frontend/components/global/CopyText.vue       | 24 ++++++++++++++++---
 .../global/DetailsSection/DetailsSection.vue  | 14 ++++++++---
 .../components/global/DetailsSection/types.ts |  1 +
 frontend/pages/item/[id]/index.vue            | 16 +++++++++++++
 frontend/pages/profile.vue                    |  4 ++--
 5 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/frontend/components/global/CopyText.vue b/frontend/components/global/CopyText.vue
index 88939fc..953f098 100644
--- a/frontend/components/global/CopyText.vue
+++ b/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);
diff --git a/frontend/components/global/DetailsSection/DetailsSection.vue b/frontend/components/global/DetailsSection/DetailsSection.vue
index 40b6cd1..1fae490 100644
--- a/frontend/components/global/DetailsSection/DetailsSection.vue
+++ b/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>
diff --git a/frontend/components/global/DetailsSection/types.ts b/frontend/components/global/DetailsSection/types.ts
index 14164ad..a0c9266 100644
--- a/frontend/components/global/DetailsSection/types.ts
+++ b/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;
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index eb94e45..4277031 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/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",
@@ -384,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>
@@ -393,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>
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index fe3c3ef..5fe9331 100644
--- a/frontend/pages/profile.vue
+++ b/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>