Add more details to item drawer

cmintey · Aug 22, 2024 · f9da245 · f9da245
1 parent 2fe3842
commit f9da245
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 19 deletions.
diff --git a/src/lib/components/wishlists/ItemCard/ApprovalButtons.svelte b/src/lib/components/wishlists/ItemCard/ApprovalButtons.svelte
@@ -8,6 +8,10 @@
     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">
@@ -19,12 +23,7 @@
             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={() => goto(`/wishlists/${item.user?.username}/edit/${item.id}?ref=${$page.url}`)}
-        >
-            Edit
-        </button>
+        <button class="variant-ghost-primary btn btn-sm md:btn" on:click|stopPropagation={onEdit}>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
@@ -77,6 +77,7 @@
                         autohide: true,
                         timeout: 5000
                     });
+                    drawerStore.close();
                 } else {
                     triggerErrorToast();
                 }
@@ -107,17 +108,6 @@
         }
     });
 
-    const drawerSettings: DrawerSettings = {
-        id: "item",
-        position: "bottom",
-        height: "max-h-fit",
-        padding: "md:px-12 lg:px-32 xl:px-56",
-        meta: {
-            item,
-            showFor
-        }
-    };
-
     const handleDelete = async () => modalStore.trigger(confirmDeleteModal);
     const handleApproval = async (approve = true) => modalStore.trigger(approvalModal(approve));
 
@@ -163,6 +153,24 @@
     const handlePurchased = async (purchased: boolean) => {
         await (purchased ? itemAPI.purchase() : itemAPI.unpurchase());
     };
+
+    const drawerSettings: DrawerSettings = {
+        id: "item",
+        position: "bottom",
+        height: "max-h-fit",
+        padding: "md:px-12 lg:px-32 xl:px-56",
+        meta: {
+            item,
+            showFor,
+            user,
+            showClaimedName,
+            onPublicList,
+            handleClaim,
+            handleDelete,
+            handlePurchased,
+            handleApproval
+        }
+    };
 </script>
 
 <button

diff --git a/src/lib/components/wishlists/ItemDrawer.svelte b/src/lib/components/wishlists/ItemDrawer.svelte
@@ -1,10 +1,19 @@
 <script lang="ts">
     import { getDrawerStore } from "@skeletonlabs/skeleton";
-    import type { FullItem } from "./ItemCard/ItemCard.svelte";
+    import type { FullItem, PartialUser } from "./ItemCard/ItemCard.svelte";
+    import ClaimButtons from "./ItemCard/ClaimButtons.svelte";
+    import ApprovalButtons from "./ItemCard/ApprovalButtons.svelte";
 
     const drawerStore = getDrawerStore();
-    const item: FullItem = $drawerStore.meta.item satisfies FullItem;
+    const item: FullItem = $drawerStore.meta.item;
+    const user: PartialUser | undefined = $drawerStore.meta.user;
     const showFor: boolean = $drawerStore.meta.showFor;
+    const showName: boolean = $drawerStore.meta.showName;
+    const onPublicList: boolean = $drawerStore.meta.onPublicList;
+    const handleClaim: (v?: boolean) => void = $drawerStore.meta.handleClaim;
+    const handleDelete: VoidFunction = $drawerStore.meta.handleDelete;
+    const handlePurchased: (v: boolean) => void = $drawerStore.meta.handlePurchased;
+    const handleApproval: (v: boolean) => void = $drawerStore.meta.handleApproval;
 </script>
 
 <div class="flex flex-col space-y-2 p-4 pb-12">
@@ -14,6 +23,11 @@
     <span class="text-xl font-bold md:text-2xl">
         {item.name}
     </span>
+    <div class="flex justify-center">
+        {#if item.imageUrl}
+            <img class="" alt="product" src={item.imageUrl} />
+        {/if}
+    </div>
     <div class="flex flex-row space-x-2 text-base md:text-lg">
         {#if item.price}
             <span class="font-semibold">{item.price}</span>
@@ -29,4 +43,23 @@
         </span>
     </div>
     <p class="whitespace-pre-wrap">{item.note}</p>
+    <div class="flex flex-row justify-between">
+        <ClaimButtons
+            {item}
+            {onPublicList}
+            {showName}
+            {user}
+            on:claim={() => handleClaim()}
+            on:unclaim={() => handleClaim(true)}
+            on:purchase={(event) => handlePurchased(event.detail.purchased)}
+        />
+        <ApprovalButtons
+            {item}
+            {user}
+            on:approve={() => handleApproval(true)}
+            on:deny={() => handleApproval(false)}
+            on:delete={handleDelete}
+            on:edit={() => getDrawerStore().close()}
+        />
+    </div>
 </div>