add edit items

src/components/EditItemForm.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useShoppingListStore } from '../store/shoppingList';
+import { ref, reactive, defineProps } from 'vue';
+import { useRouter } from 'vue-router';
+
+const store = useShoppingListStore();
+const router = useRouter();
+
+const props = defineProps({
+  item: Object,
+});
+
+const isValid = ref(false);
+const item = reactive({
+  name: props.item.name,
+  price: props.item.price / 100,
+  user: props.item.user.name,
+});
+
+const form = ref(null);
+
+const submit = () => {
+  props.item.name = item.name;
+  props.item.price = item.price * 100;
+  props.item.user = store.users.find(user => user.name === item.user);
+  router.push('/shopping-list');
+};
+</script>
+
+<template>
+  <v-form ref="form" v-model="isValid" lazy-validation>
+    <v-text-field
+      label="Item Name"
+      required
+      v-model="item.name"
+    />
+    <v-text-field
+      label="Price"
+      suffix="€"
+      required
+      v-model="item.price"
+    />
+    <v-select
+      label="User"
+      :items="store.users.map(user => user.name)"
+      required
+      v-model="item.user"
+    />
+    <v-btn color="primary" @click="submit()">edit item</v-btn>
+  </v-form>
+</template>

src/components/ItemList.vue

@@ -12,9 +12,13 @@ defineProps({
     <div v-for="(items, user) of groupItemsByUser(items)">
       <v-list-subheader>{{ user }}</v-list-subheader>
       <div v-for="item in items">
-        <v-list-item @click="item.isBought = !item.isBought">
+        <v-list-item>
           <v-list-item-title>{{ item.name }}</v-list-item-title>
           <v-list-item-subtitle>{{ item.price / 100 }} €</v-list-item-subtitle>
+          <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"/>
+          </template>
         </v-list-item>
       </div>
     </div>

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import HomeView from '../views/HomeView.vue';
 import ShoppingList from '../views/ShoppingList.vue';
 import AddItem from '../views/AddItem.vue';
+import EditItem from '../views/EditItem.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -19,6 +20,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "add-item",
     component: AddItem,
   },
+  {
+    path: "/edit-item/:id",
+    name: "edit-item",
+    component: EditItem,
+  },
 ];
 
 const router = createRouter({

src/store/dummyData.ts

@@ -14,17 +14,20 @@ export const dummyList = [
     price: 200,
     user: lukas,
     isBought: false,
+    id: 0,
   },
   {
     name: 'Apple',
     price: 150,
     user: lukas,
     isBought: false,
+    id: 1,
   },
   {
     name: 'Butter',
     price: 149,
     user: laura,
     isBought: false,
+    id: 2,
   },
 ];

src/store/shoppingList.ts

@@ -10,6 +10,7 @@ type ShoppingItem = {
   price: number;
   isBought: boolean;
   user: User;
+  id: number;
 };
 
 export const useShoppingListStore = defineStore('shoppingList', {

src/views/EditItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import DefaultPage from '../components/DefaultPage.vue';
+import EditItemForm from '../components/EditItemForm.vue';
+import { useRoute } from 'vue-router';
+import { useShoppingListStore} from '../store/shoppingList';
+import { ref } from 'vue';
+
+const route = useRoute();
+const store = useShoppingListStore();
+
+const item = ref(store.items.find(item => item.id === Number(route.params.id)));
+</script>
+
+<template>
+  <DefaultPage title="Add Item">
+    <v-container>
+      <EditItemForm v-if="item" :item="item"/>
+      <div v-else>
+        <p>This item does not exist.</p>
+        <v-btn color="primary" to="/shopping-list">back to shopping list</v-btn>
+      </div>
+    </v-container>
+  </DefaultPage>
+</template>