more item drawer fixes

cmintey · Sep 6, 2024 · 944832a · 944832a
1 parent 0009d41
commit 944832a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/src/lib/components/wishlists/ItemCard/ApprovalButtons.svelte b/src/lib/components/wishlists/ItemCard/ApprovalButtons.svelte
@@ -1,17 +1,11 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { page } from "$app/stores";
     import { createEventDispatcher } from "svelte";
     import type { FullItem, PartialUser } from "./ItemCard.svelte";
 
     export let item: FullItem;
     export let user: PartialUser | undefined;
 
     const dispatch = createEventDispatcher();
-    const onEdit = () => {
-        dispatch("edit");
-        goto(`/wishlists/${item.user?.username}/edit/${item.id}?ref=${$page.url}`);
-    };
 </script>
 
 <div class="flex flex-row space-x-2 md:space-x-4">
@@ -23,7 +17,9 @@
             Deny
         </button>
     {:else if user?.username === item.user?.username || user?.username === item.addedBy?.username}
-        <button class="variant-ghost-primary btn btn-sm md:btn" on:click|stopPropagation={onEdit}>Edit</button>
+        <button class="variant-ghost-primary btn btn-sm md:btn" on:click|stopPropagation={() => dispatch("edit")}>
+            Edit
+        </button>
         <button class="variant-filled-error btn btn-sm md:btn" on:click|stopPropagation={() => dispatch("delete")}>
             Delete
         </button>

diff --git a/src/lib/components/wishlists/ItemCard/ItemCard.svelte b/src/lib/components/wishlists/ItemCard/ItemCard.svelte
@@ -27,9 +27,10 @@
     import { ItemAPI } from "$lib/api/items";
     import ApprovalButtons from "./ApprovalButtons.svelte";
     import ClaimButtons from "./ClaimButtons.svelte";
-    import { invalidateAll } from "$app/navigation";
+    import { goto, invalidateAll } from "$app/navigation";
     import type { ItemVoidFunction } from "./ReorderButtons.svelte";
     import ReorderButtons from "./ReorderButtons.svelte";
+    import { page } from "$app/stores";
 
     export let item: FullItem;
     export let user: (PartialUser & { id: string }) | undefined = undefined;
@@ -116,6 +117,9 @@
 
     const handleDelete = async () => modalStore.trigger(confirmDeleteModal);
     const handleApproval = async (approve = true) => modalStore.trigger(approvalModal(approve));
+    const handleEdit = () => {
+        goto(`/wishlists/${item.user?.username}/edit/${item.id}?ref=${$page.url}`);
+    };
 
     const handleClaim = async (unclaim = false) => {
         if (user?.id) {
@@ -175,7 +179,8 @@
             handleClaim,
             handleDelete,
             handlePurchased,
-            handleApproval
+            handleApproval,
+            handleEdit
         }
     };
 </script>
@@ -251,6 +256,7 @@
                 on:approve={() => handleApproval(true)}
                 on:deny={() => handleApproval(false)}
                 on:delete={handleDelete}
+                on:edit={handleEdit}
             />
         {/if}
     </footer>

diff --git a/src/lib/components/wishlists/ItemDrawer.svelte b/src/lib/components/wishlists/ItemDrawer.svelte
@@ -14,6 +14,22 @@
     const handleDelete: VoidFunction = $drawerStore.meta.handleDelete;
     const handlePurchased: (v: boolean) => void = $drawerStore.meta.handlePurchased;
     const handleApproval: (v: boolean) => void = $drawerStore.meta.handleApproval;
+    const handleEdit: () => void = $drawerStore.meta.handleEdit;
+
+    const onEdit = () => {
+        drawerStore.close();
+        handleEdit();
+    };
+
+    let imageUrl: string;
+    if (item.imageUrl) {
+        try {
+            new URL(item.imageUrl);
+            imageUrl = item.imageUrl;
+        } catch {
+            imageUrl = `/api/assets/${item.imageUrl}`;
+        }
+    }
 </script>
 
 <div class="flex max-h-[80dvh] flex-col space-y-2 p-4 pb-4">
@@ -24,8 +40,8 @@
         {item.name}
     </span>
     <div class="flex max-h-[40dvh] justify-center">
-        {#if item.imageUrl}
-            <img class="max-h-full object-scale-down" alt="product" src={item.imageUrl} />
+        {#if imageUrl}
+            <img class="max-h-full object-scale-down" alt="product" src={imageUrl} />
         {/if}
     </div>
     <div class="flex flex-row space-x-2 text-base md:text-lg">
@@ -59,7 +75,7 @@
             on:approve={() => handleApproval(true)}
             on:deny={() => handleApproval(false)}
             on:delete={handleDelete}
-            on:edit={() => getDrawerStore().close()}
+            on:edit={onEdit}
         />
     </div>
 </div>