Introduce better item edit

v3xlabs · Dec 3, 2024 · a345933 · a345933
1 parent 727a657
commit a345933
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 18 deletions.
diff --git a/engine/src/models/item/mod.rs b/engine/src/models/item/mod.rs
@@ -148,27 +148,59 @@ impl Item {
         db: &Database,
         data: ItemUpdatePayload,
         item_id: &str,
-    ) -> Result<(), sqlx::Error> {
-        let existing = Item::get_by_id(db, item_id).await.unwrap().unwrap();
+    ) -> Result<Item, sqlx::Error> {
+        let mut tx = db.pool.begin().await?;
 
-        if existing.name != data.name.clone().unwrap_or("".to_string()) {
-            let res = query!(
+        if let Some(name) = data.name {
+            query!(
                 "UPDATE items SET name = $1 WHERE item_id = $2",
-                data.name.clone().unwrap_or("".to_string()),
+                name,
                 item_id
             )
-            .execute(&db.pool)
-            .await;
+            .execute(&mut *tx)
+            .await?;
         }
 
+        if let Some(owner_id) = data.owner_id {
+            query!(
+                "UPDATE items SET owner_id = $1 WHERE item_id = $2",
+                owner_id,
+                item_id
+            )
+            .execute(&mut *tx)
+            .await?;
+        }
+
+        if let Some(location_id) = data.location_id {
+            query!(
+                "UPDATE items SET location_id = $1 WHERE item_id = $2",
+                location_id,
+                item_id
+            )
+            .execute(&mut *tx)
+            .await?;
+        }
+
+        if let Some(product_id) = data.product_id {
+            query!(
+                "UPDATE items SET product_id = $1 WHERE item_id = $2",
+                product_id,
+                item_id
+            )
+            .execute(&mut *tx)
+            .await?;
+        }
+
+        tx.commit().await?;
+
+        let item = Item::get_by_id(db, item_id).await.unwrap().unwrap();
 
         if let Some(search) = search {
-            let existing = Item::get_by_id(db, item_id).await.unwrap().unwrap();
-            let search_item = existing.into_search(db).await.unwrap();
+            let search_item = item.into_search(db).await.unwrap();
             search.index_item(db, &search_item).await;
         }
 
-        Ok(())
+        Ok(item)
     }
 }
 

diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx
@@ -9,6 +9,7 @@ const [buttonVariants, buttonVariantsConfig] = cvax(
     [
         // Layout
         'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium',
+        'cursor-pointer',
 
         // State
         'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
@@ -18,7 +19,7 @@ const [buttonVariants, buttonVariantsConfig] = cvax(
         variants: {
             variant: {
                 default:
-                    'bg-background text-foreground border border-solid border-border hover:bg-popover',
+                    'bg-background text-foreground border border-solid border-border hover:bg-muted',
                 primary: [
                     'text-background border',
                     'bg-blue-400 hover:bg-blue-400/80 border-transparent',

diff --git a/web/src/components/ui/Toaster.tsx b/web/src/components/ui/Toaster.tsx
@@ -19,7 +19,6 @@ const Toaster = ({ ...properties }: ToasterProperties) => {
             className="toaster group"
             toastOptions={{
                 unstyled: true,
-                duration: 15_000,
                 classNames: {
                     // toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border',
                     // description: 'group-[.toast]:text-muted-foreground',

diff --git a/web/src/routes/item/$itemId/edit.tsx b/web/src/routes/item/$itemId/edit.tsx
@@ -6,6 +6,7 @@ import {
     useParams,
 } from '@tanstack/react-router';
 import { FC } from 'react';
+import { toast } from 'sonner';
 
 import { useApiDeleteItem, useApiEditItem, useApiItemById } from '@/api/item';
 import { BaseInput } from '@/components/input/BaseInput';
@@ -65,8 +66,9 @@ export const DeleteItemModal: FC<{ itemId: string }> = ({ itemId }) => {
 export const Route = createFileRoute('/item/$itemId/edit')({
     component: () => {
         const { itemId } = useParams({ from: '/item/$itemId/edit' });
-        const { data: item } = useApiItemById(itemId);
+        const { data: item, isLoading } = useApiItemById(itemId);
         const editItem = useApiEditItem();
+        const navigate = useNavigate();
 
         const { Field, Subscribe, handleSubmit } = useForm<EditItemForm>({
             defaultValues: {
@@ -79,15 +81,48 @@ export const Route = createFileRoute('/item/$itemId/edit')({
             },
             onSubmit: ({ value }) => {
                 console.log('FORM SUBMIT', value);
-                editItem.mutate({
-                    item_id: itemId,
-                    data: {
-                        name: value.name,
-                    },
+                const toastId = `item-edit-${itemId}`;
+
+                toast.loading('Saving item...', {
+                    id: toastId,
                 });
+
+                editItem.mutate(
+                    {
+                        item_id: itemId,
+                        data: {
+                            name: value.name,
+                        },
+                    },
+                    {
+                        onSuccess(data, variables, context) {
+                            toast.success('Item saved', {
+                                id: toastId,
+                            });
+                            navigate({
+                                to: '/item/$itemId',
+                                params: { itemId },
+                            });
+                        },
+                        onError(error, variables, context) {
+                            toast.error('Failed to save item', {
+                                description: error.message,
+                                id: toastId,
+                            });
+                        },
+                    }
+                );
             },
         });
 
+        if (isLoading) {
+            return (
+                <SCPage title={`Edit Item ${itemId}`}>
+                    <h2>Loading...</h2>
+                </SCPage>
+            );
+        }
+
         return (
             <SCPage title={`Edit Item ${itemId}`}>
                 <form