feat: primary images (#576)

* add support for primary images

* fix locked loading state issue

* add action to auto-set images

frontend/components/Item/Card.vue

@@ -1,21 +1,21 @@
 <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-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}`">
+  <NuxtLink class="group card rounded-md border border-gray-300" :to="`/item/${item.id}`">
+    <div class="relative h-[200px]">
+      <img v-if="imageUrl" class="h-[200px] w-full object-cover rounded-t shadow-sm border-gray-300" :src="imageUrl" />
+      <div class="absolute bottom-1 left-1">
+        <NuxtLink
+          v-if="item.location"
+          class="text-sm hover:link badge shadow-md rounded-md"
+          :to="`/location/${item.location.id}`"
+        >
           {{ item.location.name }}
         </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="rounded-b p-4 pt-2 flex-grow col-span-4 flex flex-col gap-y-1 bg-base-100">
+      <h2 class="text-lg font-bold two-line">{{ item.name }}</h2>
+      <div class="divider my-0"></div>
       <div class="flex justify-between gap-2">
-        <div class="mr-auto tooltip tooltip-tip" data-tip="Purchase Price">
-          <span v-if="item.purchasePrice != '0'" class="badge badge-sm badge-ghost h-5">
-            <Currency :amount="item.purchasePrice" />
-          </span>
-        </div>
         <div v-if="item.insured" class="tooltip z-10" data-tip="Insured">
           <Icon class="h-5 w-5 text-primary" name="mdi-shield-check" />
         </div>
@@ -26,7 +26,6 @@
         </div>
       </div>
       <Markdown class="mb-2 text-clip three-line" :source="item.description" />
-
       <div class="flex gap-2 flex-wrap -mr-1 mt-auto justify-end">
         <LabelChip v-for="label in top3" :key="label.id" :label="label" size="sm" />
       </div>
@@ -37,6 +36,16 @@
 <script setup lang="ts">
   import { ItemOut, ItemSummary } from "~~/lib/api/types/data-contracts";
 
+  const api = useUserApi();
+
+  const imageUrl = computed(() => {
+    if (!props.item.imageId) {
+      return "/no-image.jpg";
+    }
+
+    return api.authURL(`/items/${props.item.id}/attachments/${props.item.imageId}`);
+  });
+
   const top3 = computed(() => {
     return props.item.labels.slice(0, 3) || [];
   });

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -33,7 +33,12 @@
                   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" />
+                  <CopyText
+                    v-if="detail.text.toString()"
+                    :text="detail.text.toString()"
+                    :icon-size="16"
+                    class="btn btn-xs btn-ghost btn-circle"
+                  />
                 </span>
               </span>
             </template>

frontend/lib/api/classes/actions.ts

@@ -19,4 +19,10 @@ export class ActionsAPI extends BaseAPI {
       url: route("/actions/ensure-import-refs"),
     });
   }
+
+  setPrimaryPhotos() {
+    return this.http.post<void, ActionAmountResult>({
+      url: route("/actions/set-primary-photos"),
+    });
+  }
 }

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

@@ -42,11 +42,13 @@ export interface ItemAttachment {
   createdAt: Date | string;
   document: DocumentOut;
   id: string;
+  primary: boolean;
   type: string;
   updatedAt: Date | string;
 }
 
 export interface ItemAttachmentUpdate {
+  primary: boolean;
   title: string;
   type: string;
 }
@@ -84,6 +86,7 @@ export interface ItemOut {
   description: string;
   fields: ItemField[];
   id: string;
+  imageId: string;
   insured: boolean;
   labels: LabelSummary[];
   /** Warranty */
@@ -124,6 +127,7 @@ export interface ItemSummary {
   createdAt: Date | string;
   description: string;
   id: string;
+  imageId: string;
   insured: boolean;
   labels: LabelSummary[];
   /** Edges */
@@ -187,7 +191,6 @@ export interface LabelOut {
   createdAt: Date | string;
   description: string;
   id: string;
-  items: ItemSummary[];
   name: string;
   updatedAt: Date | string;
 }
@@ -211,7 +214,6 @@ export interface LocationOut {
   createdAt: Date | string;
   description: string;
   id: string;
-  items: ItemSummary[];
   name: string;
   parent: LocationSummary;
   updatedAt: Date | string;

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

@@ -307,6 +307,7 @@
     id: "",
     title: "",
     type: "",
+    primary: false,
   });
 
   const attachmentOpts = Object.entries(AttachmentTypes).map(([key, value]) => ({
@@ -318,6 +319,7 @@
     editState.id = attachment.id;
     editState.title = attachment.document.title;
     editState.type = attachment.type;
+    editState.primary = attachment.primary;
     editState.modal = true;
 
     editState.obj = attachmentOpts.find(o => o.value === attachment.type) || attachmentOpts[0];
@@ -328,6 +330,7 @@
     const { error, data } = await api.items.attachments.update(itemId.value, editState.id, {
       title: editState.title,
       type: editState.type,
+      primary: editState.primary,
     });
 
     if (error) {
@@ -407,7 +410,6 @@
       <template #title> Attachment Edit </template>
 
       <FormTextField v-model="editState.title" label="Attachment Title" />
-      {{ editState.type }}
       <FormSelect
         v-model:value="editState.type"
         label="Attachment Type"
@@ -415,6 +417,14 @@
         name="text"
         :items="attachmentOpts"
       />
+      <div v-if="editState.type == 'photo'" class="flex gap-2 mt-3">
+        <input v-model="editState.primary" type="checkbox" class="checkbox" />
+        <p class="text-sm">
+          <span class="font-semibold">Primary Photo</span>
+          This options is only available for photos. Only one photo can be primary. If you select this option, the
+          current primary photo, if any will be unselected.
+        </p>
+      </div>
       <div class="modal-action">
         <BaseButton :loading="editState.loading" @click="updateAttachment"> Update </BaseButton>
       </div>

frontend/pages/label/[id].vue

@@ -59,6 +59,7 @@
     const { error, data } = await api.labels.update(labelId.value, updateData);
 
     if (error) {
+      updating.value = false;
       toast.error("Failed to update label");
       return;
     }
@@ -68,6 +69,23 @@
     updateModal.value = false;
     updating.value = false;
   }
+
+  const items = computedAsync(async () => {
+    if (!label.value) {
+      return [];
+    }
+
+    const resp = await api.items.getAll({
+      labels: [label.value.id],
+    });
+
+    if (resp.error) {
+      toast.error("Failed to load items");
+      return [];
+    }
+
+    return resp.data.items;
+  });
 </script>
 
 <template>
@@ -83,51 +101,47 @@
       </form>
     </BaseModal>
 
-    <BaseContainer v-if="label" class="space-y-6 mb-16">
-      <section>
-        <BaseSectionHeader v-if="label">
-          <Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
-          <span class="text-base-content">
-            {{ label ? label.name : "" }}
-          </span>
-
-          <template #description>
-            <Markdown class="text-lg" :source="label.description"> </Markdown>
-          </template>
-        </BaseSectionHeader>
-
-        <div class="flex gap-3 flex-wrap mb-6 text-sm italic">
-          <div>
-            Created
-            <DateTime :date="label?.createdAt" />
+    <BaseContainer v-if="label">
+      <div class="bg-white rounded p-3">
+        <header class="mb-2">
+          <div class="flex flex-wrap items-end gap-2">
+            <div class="avatar placeholder mb-auto">
+              <div class="bg-neutral-focus text-neutral-content rounded-full w-12">
+                <Icon name="mdi-package-variant" class="h-7 w-7" />
+              </div>
+            </div>
+            <div>
+              <h1 class="text-2xl pb-1">
+                {{ label ? label.name : "" }}
+              </h1>
+              <div class="flex gap-1 flex-wrap text-xs">
+                <div>
+                  Created
+                  <DateTime :date="label?.createdAt" />
+                </div>
+              </div>
+            </div>
+            <div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-3">
+              <div class="btn-group">
+                <PageQRCode class="dropdown-left" />
+                <BaseButton size="sm" @click="openUpdate">
+                  <Icon class="mr-1" name="mdi-pencil" />
+                  Edit
+                </BaseButton>
+              </div>
+              <BaseButton class="btn btn-sm" @click="confirmDelete()">
+                <Icon name="mdi-delete" class="mr-2" />
+                Delete
+              </BaseButton>
+            </div>
           </div>
-          <div>
-            <Icon name="mdi-circle-small" />
-          </div>
-          <div>
-            Last Updated
-            <DateTime :date="label?.updatedAt" />
-          </div>
-        </div>
-
-        <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
-          <div class="btn-group">
-            <PageQRCode class="dropdown-right" />
-            <BaseButton class="ml-auto" size="sm" @click="openUpdate">
-              <Icon class="mr-1" name="mdi-pencil" />
-              Edit
-            </BaseButton>
-          </div>
-          <BaseButton class="btn btn-sm" @click="confirmDelete()">
-            <Icon name="mdi-delete" class="mr-2" />
-            Delete
-          </BaseButton>
-        </div>
+        </header>
+        <div class="divider my-0 mb-1"></div>
+        <Markdown v-if="label && label.description" class="text-base" :source="label.description"> </Markdown>
+      </div>
+      <section v-if="label && items">
+        <ItemViewSelectable :items="items" />
       </section>
     </BaseContainer>
-
-    <section v-if="label && label.items">
-      <ItemViewSelectable :items="label.items" />
-    </section>
   </BaseContainer>
 </template>

frontend/pages/location/[id].vue

@@ -68,6 +68,7 @@
     const { error, data } = await api.locations.update(locationId.value, updateData);
 
     if (error) {
+      updating.value = false;
       toast.error("Failed to update location");
       return;
     }
@@ -82,6 +83,23 @@
   const locations = computed(() => locationStore.allLocations);
 
   const parent = ref<LocationSummary | any>({});
+
+  const items = computedAsync(async () => {
+    if (!location.value) {
+      return [];
+    }
+
+    const resp = await api.items.getAll({
+      locations: [location.value.id],
+    });
+
+    if (resp.error) {
+      toast.error("Failed to load items");
+      return [];
+    }
+
+    return resp.data.items;
+  });
 </script>
 
 <template>
@@ -99,65 +117,54 @@
       </form>
     </BaseModal>
 
-    <BaseContainer v-if="location" class="space-y-6 mb-16">
-      <section>
-        <BaseSectionHeader v-if="location">
-          <Icon name="mdi-package-variant" class="mr-2 -mt-1 text-base-content" />
-          <span class="text-base-content">
-            {{ location ? location.name : "" }}
-          </span>
-
-          <div v-if="location?.parent" class="text-sm breadcrumbs pb-0">
-            <ul class="text-base-content/70">
-              <li>
-                <NuxtLink :to="`/location/${location.parent.id}`"> {{ location.parent.name }}</NuxtLink>
-              </li>
-              <li>{{ location.name }}</li>
-            </ul>
+    <BaseContainer v-if="location">
+      <div class="bg-white rounded p-3">
+        <header class="mb-2">
+          <div class="flex flex-wrap items-end gap-2">
+            <div class="avatar placeholder mb-auto">
+              <div class="bg-neutral-focus text-neutral-content rounded-full w-12">
+                <Icon name="mdi-package-variant" class="h-7 w-7" />
+              </div>
+            </div>
+            <div>
+              <div v-if="location?.parent" class="text-sm breadcrumbs pt-0 pb-0">
+                <ul class="text-base-content/70">
+                  <li>
+                    <NuxtLink :to="`/location/${location.parent.id}`"> {{ location.parent.name }}</NuxtLink>
+                  </li>
+                  <li>{{ location.name }}</li>
+                </ul>
+              </div>
+              <h1 class="text-2xl pb-1">
+                {{ location ? location.name : "" }}
+              </h1>
+              <div class="flex gap-1 flex-wrap text-xs">
+                <div>
+                  Created
+                  <DateTime :date="location?.createdAt" />
+                </div>
+              </div>
+            </div>
+            <div class="ml-auto mt-2 flex flex-wrap items-center justify-between gap-3">
+              <div class="btn-group">
+                <PageQRCode class="dropdown-left" />
+                <BaseButton size="sm" @click="openUpdate">
+                  <Icon class="mr-1" name="mdi-pencil" />
+                  Edit
+                </BaseButton>
+              </div>
+              <BaseButton class="btn btn-sm" @click="confirmDelete()">
+                <Icon name="mdi-delete" class="mr-2" />
+                Delete
+              </BaseButton>
+            </div>
           </div>
-          <template #description>
-            <Markdown class="text-lg" :source="location.description"> </Markdown>
-          </template>
-        </BaseSectionHeader>
-
-        <div class="flex gap-3 flex-wrap mb-6 text-sm italic">
-          <div>
-            Created
-            <DateTime :date="location?.createdAt" />
-          </div>
-          <div>
-            <Icon name="mdi-circle-small" />
-          </div>
-          <div>
-            Last Updated
-            <DateTime :date="location?.updatedAt" />
-          </div>
-        </div>
-
-        <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
-          <div class="btn-group">
-            <PageQRCode class="dropdown-right" />
-            <BaseButton class="ml-auto" size="sm" @click="openUpdate">
-              <Icon class="mr-1" name="mdi-pencil" />
-              Edit
-            </BaseButton>
-          </div>
-          <BaseButton class="btn btn-sm" @click="confirmDelete()">
-            <Icon name="mdi-delete" class="mr-2" />
-            Delete
-          </BaseButton>
-        </div>
-      </section>
-
-      <template v-if="location && location.items.length > 0">
-        <ItemViewSelectable :items="location.items" />
-      </template>
-
-      <section v-if="location && location.children.length > 0">
-        <BaseSectionHeader class="mb-5"> Child Locations </BaseSectionHeader>
-        <div class="grid gap-2 grid-cols-1 sm:grid-cols-3">
-          <LocationCard v-for="item in location.children" :key="item.id" :location="item" />
-        </div>
+        </header>
+        <div class="divider my-0 mb-1"></div>
+        <Markdown v-if="location && location.description" class="text-base" :source="location.description"> </Markdown>
+      </div>
+      <section v-if="location && items">
+        <ItemViewSelectable :items="items" />
       </section>
     </BaseContainer>
   </div>

frontend/pages/tools.vue

@@ -82,6 +82,12 @@
               See Github Issue #236 for more details.
             </a>
           </DetailAction>
+          <DetailAction @action="setPrimaryPhotos">
+            <template #title> Set Primary Photos </template>
+            In version v0.10.0 of Homebox, the primary image field was added to attachments of type photo. This action
+            will set the primary image field to the first image in the attachments array in the database, if it is not
+            already set. <a class="link" href="https://github.com/hay-kot/homebox/pull/576">See GitHub PR #576</a>
+          </DetailAction>
         </div>
       </BaseCard>
     </BaseContainer>
@@ -173,6 +179,25 @@
 
     notify.success(`${result.data.completed} assets have been updated.`);
   }
+
+  async function setPrimaryPhotos() {
+    const { isCanceled } = await confirm.open(
+      "Are you sure you want to set primary photos? This can take a while and cannot be undone."
+    );
+
+    if (isCanceled) {
+      return;
+    }
+
+    const result = await api.actions.setPrimaryPhotos();
+
+    if (result.error) {
+      notify.error("Failed to set primary photos.");
+      return;
+    }
+
+    notify.success(`${result.data.completed} assets have been updated.`);
+  }
 </script>
 
 <style scoped></style>