fix some bugs

src/lib/components/input/ImageInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { uploadImage, getImagePath } from '$utils'
+  import { toast } from 'svelte-sonner'
 
   export let name = 'PlaceholderName'
   export let image_id: number | null
@@ -36,12 +37,13 @@
       responseMessage = error ?? 'Error Uploading'
     } else {
       image_id = data
+      toast.info('Image Uploaded')
       save(data)
     }
   }
 
+  let input: HTMLInputElement
   const triggerFileInput = () => {
-    const input = document.getElementById('file-input')
     input?.click()
   }
 </script>
@@ -54,9 +56,12 @@
     type="file"
     accept="image/*"
     class="upload-input"
+    bind:this={input}
     on:change={handleFileChange}
   />
 
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
   <span class="upload-icon" on:click={triggerFileInput}>
     <svg
       xmlns="http://www.w3.org/2000/svg"

src/lib/components/navbar/NavItems.svelte

@@ -34,6 +34,10 @@
       href: '/chart',
       icon: icons.chart.bar(),
     },
+    {
+      name: 'Cardapio',
+      href: '/products',
+    },
     {
       name: 'Admin',
       href: '/admin',

src/routes/admin/products/[id]/+page.svelte

@@ -7,6 +7,8 @@
   import ProductItem from './ProductItem.svelte'
   import ImageInput from '$lib/components/input/ImageInput.svelte'
 
+  import { toast } from 'svelte-sonner'
+
   export let data: PageData
 
   const produto = data.prod
@@ -62,6 +64,20 @@
       },
     })
   }
+
+  async function updateProductImage(image_id: number) {
+    try {
+      const [resp] = await trpc($page).product.updateProduct.mutate({
+        id: produto.id,
+        prod: { image: image_id },
+      })
+      if (resp) {
+        toast.info(`Product Image #${produto.id} updated`)
+      }
+    } catch (error: any) {
+      toast.error(error.message)
+    }
+  }
 </script>
 
 <main class="container mx-auto flex flex-col">
@@ -71,12 +87,7 @@
     <ImageInput
       name={produto.name}
       image_id={produto.image}
-      save={img => {
-        trpc($page).product.updateProduct.mutate({
-          id: produto.id,
-          prod: { image: img },
-        })
-      }}
+      save={updateProductImage}
     />
     <div>
       <h2 class="title-font text-sm tracking-widest text-gray-500">
@@ -91,7 +102,7 @@
   </div>
 
   <div class="mt-3 flex flex-wrap gap-4">
-    {#each produto.items as item}
+    {#each produto.items as item, i (item.id)}
       <ProductItem {item} />
     {/each}
   </div>

src/routes/admin/products/[id]/ProductItem.svelte

@@ -3,6 +3,7 @@
 
   import { page } from '$app/stores'
   import { trpc } from '$trpc/client'
+  import { toast } from 'svelte-sonner'
   export let item: {
     image: number | null
     id: number
@@ -15,6 +16,26 @@
     retail_price: number
     wholesale_price: number
   }
+
+  async function updateProductItemImage(image_id: number) {
+    item.image = image_id
+
+    try {
+      const resp = await trpc($page).product.updateProductItem.mutate({
+        id: item.id,
+        prod: {
+          image: image_id,
+        },
+      })
+      console.log(resp)
+
+      if (resp) {
+        toast.success(`Product Item  Image#${item.id} updated`)
+      }
+    } catch (error: any) {
+      toast.error(error.message)
+    }
+  }
 </script>
 
 <div class="bg-base-200 p-2">
@@ -24,15 +45,7 @@
   <ImageInput
     image_id={item.image}
     name={item.name}
-    save={async image_id => {
-      item.image = image_id
-      await trpc($page).product.updateProductItem.mutate({
-        id: item.id,
-        prod: {
-          image: image_id,
-        },
-      })
-    }}
+    save={updateProductItemImage}
   />
   <div class="flex justify-between gap-3">
     <p>WholeSale Price {item.wholesale_price}</p>

src/routes/products/+page.svelte

@@ -3,6 +3,8 @@
   import Cardapio from '$lib/components/Cardapio.svelte'
   import Card1 from '$lib/components/cards/Card1.svelte'
 
+  import { getImagePath } from '$utils/image'
+
   export let data: PageData
   const { products } = data
 </script>
@@ -13,7 +15,7 @@
       <Card1
         nome={c.name}
         descricao={c.description}
-        image="/api/image/{1}"
+        image={getImagePath(c.image)}
       />
     </a>
   {/snippet}

src/routes/products/[id]/+page.server.ts

@@ -5,7 +5,7 @@ import { error } from '@sveltejs/kit'
 
 export const load = (async ({ params }) => {
   const id = Number(params.id)
-  const produto = await product.getProductFromID(id)
+  const produto = await product.getProductByID(id)
   console.log(produto)
 
   if (!produto) {

src/routes/products/[id]/+page.svelte

@@ -7,25 +7,6 @@
   export let data: PageData
   const { produto } = data
 
-  let activeEntry = 0
-
-  let activePrice = 0
-
-  // let variants = produto.entry.map(entry => {
-  //   return {
-  //     id: entry.id,
-  //     brand: entry.brand,
-  //     category: entry.category,
-  //     price: entry.prices
-  //       // .filter(p => !p.price_label.is_retail)
-  //       .map(p => ({
-  //         price_label: p.price_label.label,
-  //         price_value: p.price,
-  //       })),
-  //     image: entry.image_id,
-  //   }
-  // })
-
   let quantity = 1
   function increment() {
     quantity += 1
@@ -35,28 +16,25 @@
     quantity -= 1
   }
 
+  let activeItemIndex = 0
+
   // let total = tweened(
   //   (variants[activeEntry].price[activePrice]?.price_value ?? 0) * quantity,
   //   {
   //     duration: 300,
   //   },
   // )
-
-  // $: {
-  //   $total =
-  //     (variants[activeEntry].price[activePrice]?.price_value ?? 0) * quantity
-  // }
 </script>
 
-<!-- <section class="body-font overflow-hidden">
+<section class="body-font overflow-hidden">
   <div class="container mx-auto px-5 py-24">
-    <button onclick={() => history.back()} class="btn btn-primary mb-3">
-      {@html icons.arrows.left_line()} Back
-    </button>
     <div class="mx-auto flex flex-wrap-reverse lg:w-4/5">
       <div class="mb-6 w-full lg:mb-0 lg:w-1/2 lg:py-6 lg:pr-10">
+        <button onclick={() => history.back()} class="btn btn-primary mb-3">
+          {@html icons.arrows.left_line()} Back
+        </button>
         <h2 class="title-font text-sm tracking-widest">
-          {variants[activeEntry].brand.name}
+          {produto.category?.name}
         </h2>
         <h1 class="title-font mb-4 text-3xl font-medium">
           {produto.name}
@@ -78,43 +56,20 @@
           {produto.description}
         </p>
 
-        <div class="flex border-t border-gray-200 py-2">
-          <span class="">Brand</span>
-          <span class="ml-auto">
-            <select
-              class="select select-bordered select-sm w-full max-w-xs"
-              bind:value={activeEntry}
-            >
-              {#each variants as variant, i (variant)}
-                <option value={i}>
-                  {variant.brand?.name}
-                </option>
-              {/each}
-            </select>
-          </span>
-        </div>
-        <div class="flex border-t border-gray-200 py-2">
-          <span class="">Price</span>
-
-          <span class="ml-auto">
-            <select
-              class="select select-bordered select-sm w-full max-w-xs"
-              bind:value={activePrice}
+        <div class="flex gap-3 border-t border-gray-200 py-2">
+          {#each produto.items as variant, i (variant)}
+            <!-- TODO: improve minicard -->
+            <button
+              class="btn"
+              class:btn-active={activeItemIndex === i}
+              value={i}
+              onclick={() => (activeItemIndex = i)}
             >
-              {#each variants[activeEntry].price as price, i (price)}
-                <option value={i}>
-                  {price.price_label}
-
-                  R${price.price_value.toFixed(2)}
-                </option>
-                {price.price_value}
-              {/each}
-            </select>
-          </span>
+              {variant.name}
+            </button>
+          {/each}
         </div>
 
-  
-
         <div class="mb-6 flex border-b border-t border-gray-200 py-2">
           <span class="">Quantity</span>
           <span class="ml-auto">
@@ -125,7 +80,7 @@
         </div>
         <div class="flex">
           <span class="title-font text-2xl font-medium">
-            ${$total.toFixed(2)}
+            ${9}
           </span>
           <button class="btn btn-primary ml-auto flex">
             Adicionar Carrinho
@@ -151,8 +106,10 @@
       <img
         alt="ecommerce"
         class="h-64 w-full rounded object-cover object-center lg:h-auto lg:w-1/2"
-        src={getImagePath(variants[activeEntry].image)}
+        src={getImagePath(
+          produto.items[activeItemIndex].image ?? produto.image,
+        )}
       />
     </div>
   </div>
-</section> -->
+</section>

src/trpc/routes/product.ts

@@ -82,7 +82,7 @@ export const product = router({
     )
     .mutation(async ({ input }) => {
       const { id, prod } = input
-      return await productController.updateProductItem(id, prod)
+      return await productController.updateProductItem(id, prod).returning()
     }),
   deleteProductItem: publicProcedure
     .input(z.number())