update labels page

frontend/components/Base/Card.vue

@@ -14,7 +14,3 @@
     <slot />
   </div>
 </template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -0,0 +1,32 @@
+<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">
+        <dt class="text-sm font-medium text-gray-500">
+          {{ detail.name }}
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          <slot :name="detail.slot || detail.name" v-bind="{ detail }">
+            <template v-if="detail.type == 'date'">
+              <DateTime :date="detail.text" />
+            </template>
+            <template v-else>
+              {{ detail.text }}
+            </template>
+          </slot>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { DateDetail, Detail } from "./types";
+
+  defineProps({
+    details: {
+      type: Object as () => (Detail | DateDetail)[],
+      required: true,
+    },
+  });
+</script>

frontend/components/global/DetailsSection/index.ts

@@ -0,0 +1,2 @@
+import DetailsSection from "./DetailsSection.vue";
+export default DetailsSection;

frontend/components/global/DetailsSection/types.ts

@@ -0,0 +1,15 @@
+export type StringLike = string | number | boolean;
+
+export type DateDetail = {
+  name: string;
+  text: string | Date;
+  slot?: string;
+  type: "date";
+};
+
+export type Detail = {
+  name: string;
+  text: StringLike;
+  slot?: string;
+  type?: "text";
+};

frontend/pages/home.vue

@@ -159,6 +159,13 @@
         </BaseCard>
       </section>
 
+      <section>
+        <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
+        <div class="flex gap-2 flex-wrap">
+          <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
+        </div>
+      </section>
+
       <section>
         <BaseSectionHeader class="mb-5"> Storage Locations </BaseSectionHeader>
         <div class="grid grid-cols-1 sm:grid-cols-2 card md:grid-cols-3 gap-4">
@@ -172,13 +179,6 @@
           <ItemCard v-for="item in items" :key="item.id" :item="item" />
         </div>
       </section>
-
-      <section>
-        <BaseSectionHeader class="mb-5"> Labels </BaseSectionHeader>
-        <div class="flex gap-2 flex-wrap">
-          <LabelChip v-for="label in labels" :key="label.id" size="lg" :label="label" />
-        </div>
-      </section>
     </BaseContainer>
   </div>
 </template>

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

@@ -200,7 +200,7 @@
         <BaseDetails :details="itemSummary">
           <template #title>
             <BaseSectionHeader v-if="item" class="pb-0">
-              <Icon name="mdi-package-variant" class="-mt-1 mr-2 text-gray-600" />
+              <Icon name="mdi-package-variant" class="mr-2 text-gray-600" />
               <span class="text-gray-600">
                 {{ item.name }}
               </span>

frontend/pages/label/[id].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import ActionsDivider from "../../components/Base/ActionsDivider.vue";
+  import type { DateDetail, Detail } from "~~/components/global/DetailsSection/types";
 
   definePageMeta({
     layout: "home",
@@ -23,30 +23,39 @@
     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 || "",
-    };
+  const details = computed<(Detail | DateDetail)[]>(() => {
+    const details = [
+      {
+        name: "Name",
+        text: label.value?.name,
+      },
+      {
+        name: "Description",
+        text: 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 [
+        ...details,
+        {
+          name: "Created",
+          text: label.value?.createdAt,
+          type: "date",
+        },
+        {
+          name: "Updated",
+          text: label.value?.updatedAt,
+          type: "date",
+        },
+        {
+          name: "Database ID",
+          text: label.value?.id,
+        },
+      ];
     }
 
-    return dt;
+    return details;
   });
 
   const { reveal } = useConfirm();
@@ -110,21 +119,38 @@
         </div>
       </form>
     </BaseModal>
-    <section>
-      <BaseSectionHeader class="mb-5" dark>
-        {{ 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-[160px]">
-        <label class="label cursor-pointer">
-          <input v-model="preferences.showDetails" type="checkbox" class="toggle" />
-          <span class="label-text"> Detailed View </span>
-        </label>
-      </div>
-      <ActionsDivider @delete="confirmDelete" @edit="openUpdate" />
-    </section>
+
+    <BaseCard class="mb-16">
+      <template #title>
+        <BaseSectionHeader>
+          <Icon name="mdi-tag" class="mr-2 text-gray-600" />
+          <span class="text-gray-600">
+            {{ label ? label.name : "" }}
+          </span>
+        </BaseSectionHeader>
+      </template>
+
+      <template #title-actions>
+        <div class="flex mt-2 gap-2">
+          <div class="form-control max-w-[160px]">
+            <label class="label cursor-pointer">
+              <input v-model="preferences.showDetails" type="checkbox" class="toggle toggle-primary" />
+              <span class="label-text ml-2"> Detailed View </span>
+            </label>
+          </div>
+          <BaseButton class="ml-auto" size="sm" @click="openUpdate">
+            <Icon class="mr-1" name="mdi-pencil" />
+            Edit
+          </BaseButton>
+          <BaseButton size="sm" @click="confirmDelete">
+            <Icon class="mr-1" name="mdi-delete" />
+            Delete
+          </BaseButton>
+        </div>
+      </template>
+
+      <DetailsSection :details="details" />
+    </BaseCard>
 
     <section v-if="label">
       <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>

frontend/test/vitest.config.ts

@@ -1,4 +1,3 @@
-/// <reference types="vitest" />
 import { defineConfig } from "vite";
 
 export default defineConfig({