feat: primary images (#576)

* add support for primary images

* fix locked loading state issue

* add action to auto-set images

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>