fix(web-service): add functionality for deleting entries

Onyxmoon · Dec 20, 2023 · 3ea54d5 · 3ea54d5
1 parent 98521ff
commit 3ea54d5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 18 deletions.
diff --git a/src/web-service/frontend/src/lib/forms/Checkbox.svelte b/src/web-service/frontend/src/lib/forms/Checkbox.svelte
@@ -2,14 +2,15 @@
     import Checkmark from "../../assets/svg/Checkmark.svelte";
     import {createEventDispatcher} from "svelte";
 
-    export let label: string;
     export let id: number;
+    export let label: string;
+    export let count: number;
     export let checked: boolean | undefined;
 
     const dispatch = createEventDispatcher();
 </script>
 
-<div class="flex items-center mr-4 relative">
+<div class="flex items-center relative">
     <input
         on:click={() => { checked = ! checked; dispatch('updateShoppingListEntry') } }
         type="checkbox"
@@ -23,7 +24,10 @@
 
     <label
         for="input-{id}"
-        class="text-sm font-medium cursor-pointer lg:text-base { checked ? 'line-through opacity-50' : '' }">
+        class="text-sm font-medium cursor-pointer flex justify-center items-center gap-x-2 lg:text-base { checked ? 'line-through opacity-50' : '' }">
         {label}
+        <span class="border-l-[1.5px] font-normal border-l-gray-dark/50 pl-2 leading-none text-gray-dark text-sm whitespace-nowrap lg:text-base { checked ? 'hidden' : '' }">
+            {count} Stk.
+        </span>
     </label>
 </div>
diff --git a/src/web-service/frontend/src/lib/shopping-list/ShoppingListEntry.svelte b/src/web-service/frontend/src/lib/shopping-list/ShoppingListEntry.svelte
@@ -2,6 +2,7 @@
     import {createEventDispatcher, onMount} from 'svelte';
     import Checkbox from "$lib/forms/Checkbox.svelte";
     import {handleErrors} from "../../assets/helper/handleErrors";
+    import Trash from "../../assets/svg/Trash.svelte";
 
     type ViewState = "detailed" | "compressed";
 
@@ -47,7 +48,7 @@
     });
 
     function updateShoppingListEntry(): void {
-        if (! listId || !productData.id) return;
+        if (! listId || ! productData.id ) return;
 
         const apiUrl: string = `/api/v1/shoppinglistentries/${listId}/${productData.id}`;
         const requestOptions = {
@@ -61,18 +62,39 @@
             .then(()=> dispatch('updateCheckedEntriesCount', { state: entry.checked }))
             .catch(error => console.error("Failed to fetch data:", error.message));
     }
+
+    function deleteShoppingListEntry(): void {
+        if (! listId || ! productData.id) return;
+
+        const apiUrl: string = `/api/v1/shoppinglistentries/${listId}/${productData.id}`;
+        const requestOptions = {
+            method: "DELETE",
+            headers: { 'Content-Type': 'application/json' },
+        };
+
+        fetch(apiUrl, requestOptions)
+            .then(handleErrors)
+            .then(()=> { location.reload(); dispatch('updateCheckedEntriesCount', { state: true }) })
+            .catch(error => console.error("Failed to fetch data:", error.message));
+    }
 </script>
 
 <li class="border-t-2 border-t-gray-light py-3 lg:py-6">
-    <div class="flex gap-x-4 items-start justify-between">
-        <Checkbox
-            label="{productData.description}"
-            id="{productData.id}"
-            bind:checked={entry.checked}
-            on:updateShoppingListEntry={updateShoppingListEntry} />
-        <span class="mt-0.5 block text-gray-dark text-sm whitespace-nowrap lg:text-base { entry.checked ? 'opacity-50' : '' }">
-            {entry.count} Stk.
-        </span>
+    <div class="flex gap-x-2 items-center justify-between">
+        <div class="flex gap-x-2 items-center">
+            <Checkbox
+                label={productData.description}
+                id={productData.id}
+                count={entry.count}
+                bind:checked={entry.checked}
+                on:updateShoppingListEntry={updateShoppingListEntry} />
+        </div>
+        <button
+            aria-label="Eintrag löschen"
+            on:click={deleteShoppingListEntry}
+            class="bg-gray-light rounded-full p-2 text-gray-dark transition-all ease-in-out duration-300 hover:bg-gray-dark/25">
+            <Trash classes="w-4 h-4 md:w-5 md:h-5" />
+        </button>
     </div>
     {#if view === 'detailed' && priceData}
         <p class="text-gray-dark mt-1 ml-[2.1rem] text-sm flex flex-wrap items-center gap-2 lg:text-sm { entry.checked ? 'opacity-50' : '' }">

diff --git a/src/web-service/frontend/src/routes/shopping-lists/[id]/+page.svelte b/src/web-service/frontend/src/routes/shopping-lists/[id]/+page.svelte
@@ -23,6 +23,11 @@
                 checkedEntriesCount++;
             }
         })
+
+        if (data.entries.length > 0 && data.list.completed && checkedEntriesCount != data.entries.length) {
+            data.list.completed = false;
+            updateShoppingList();
+        }
     });
 
     function updateCheckedEntriesCount(event: any): void {
@@ -83,6 +88,10 @@
 
         <p class="text-gray-dark text-sm">Deine Einkaufsliste</p>
         <ul class="mt-4">
+            {#if data.entries.length === 0}
+                <p>Keine Einträge vorhanden.</p>
+            {/if}
+
             {#each data.entries as entry}
                 <ShoppingListEntry
                     listId={data.list.id}
@@ -92,10 +101,8 @@
             {/each}
         </ul>
 
-        {#if ! data.list.completed}
-            <AddEntryModal
-                listId="{data.list.id}"
-                currentEntries="{data.entries}"/>
-        {/if}
+        <AddEntryModal
+            listId="{data.list.id}"
+            currentEntries="{data.entries}"/>
     </div>
 </main>