From 0418a738960731013c866affe659178240990b0e Mon Sep 17 00:00:00 2001
From: adb-sh <git@adb.sh>
Date: Sun, 8 Jan 2023 22:50:48 +0100
Subject: [PATCH] add delete items

---
 src/components/ItemList.vue | 4 ++++
 src/store/shoppingList.ts   | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
index 3038313..da1f453 100644
--- a/src/components/ItemList.vue
+++ b/src/components/ItemList.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
 import { groupItemsByUser } from '../store/shoppingList';
+import { useShoppingListStore } from '../store/shoppingList';
+
+const store = useShoppingListStore();
 
 defineProps({
   items: Array,
@@ -18,6 +21,7 @@ defineProps({
           <template v-slot:append>
             <v-btn icon="mdi-pencil" variant="text" :to="`/edit-item/${ item.id }`"/>
             <v-btn icon="mdi-check" variant="text" @click="item.isBought = !item.isBought"/>
+            <v-btn icon="mdi-delete" variant="text" @click="store.deleteItem(item.id)"/>
           </template>
         </v-list-item>
       </div>
diff --git a/src/store/shoppingList.ts b/src/store/shoppingList.ts
index 21eef3d..21de621 100644
--- a/src/store/shoppingList.ts
+++ b/src/store/shoppingList.ts
@@ -20,7 +20,11 @@ export const useShoppingListStore = defineStore('shoppingList', {
       users: users as Array<User>,
     };
   },
-  actions: {},
+  actions: {
+    deleteItem(id: number) {
+      this.items = this.items.filter(item => item.id !== id);
+    },
+  },
   getters: {
     openItems: state => state.items.filter(item => !item.isBought),
     boughtItems: state => state.items.filter(item => !!item.isBought),