add more users and description field

src/components/AddItemForm.vue

@@ -11,6 +11,7 @@ const item = reactive({
   name: '',
   price: 0.99,
   user: '',
+  description: '',
 });
 
 const form = ref(null);
@@ -20,6 +21,7 @@ const submit = () => {
     name: item.name,
     price: item.price * 100,
     user: store.users.find(user => user.name === item.user),
+    description: item.description,
   });
   router.push('/shopping-list');
 };
@@ -38,6 +40,11 @@ const submit = () => {
       required
       v-model="item.price"
     />
+    <v-text-field
+      label="Description"
+      required
+      v-model="item.description"
+    />
     <v-select
       label="User"
       :items="store.users.map(user => user.name)"

src/components/EditItemForm.vue

@@ -15,6 +15,7 @@ const item = reactive({
   name: props.item.name,
   price: props.item.price / 100,
   user: props.item.user.name,
+  description: props.item.description,
 });
 
 const form = ref(null);
@@ -23,6 +24,7 @@ const submit = () => {
   props.item.name = item.name;
   props.item.price = item.price * 100;
   props.item.user = store.users.find(user => user.name === item.user);
+  props.item.description = item.description;
   router.push('/shopping-list');
 };
 </script>
@@ -40,6 +42,11 @@ const submit = () => {
       required
       v-model="item.price"
     />
+    <v-text-field
+      label="Description"
+      required
+      v-model="item.description"
+    />
     <v-select
       label="User"
       :items="store.users.map(user => user.name)"

src/components/ItemList.vue

@@ -14,7 +14,7 @@ defineProps({
       <div v-for="item in items">
         <v-list-item>
           <v-list-item-title>{{ item.name }}</v-list-item-title>
-          <v-list-item-subtitle>{{ item.price / 100 }} €</v-list-item-subtitle>
+          <v-list-item-subtitle>{{ item.description }} - {{ 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"/>

src/store/dummyData.ts

@@ -3,10 +3,18 @@ const lukas = {
 };
 
 const laura = {
-  name: 'laura'
+  name: 'laura',
 };
 
-export const users = [ lukas, laura ];
+const niklas = {
+  name: 'niklas',
+};
+
+const lisa = {
+  name: 'lisa',
+};
+
+export const users = [ lukas, laura, niklas, lisa ];
 
 export const dummyList = [
   {
@@ -14,6 +22,7 @@ export const dummyList = [
     price: 200,
     user: lukas,
     isBought: false,
+    description: 'the yellow ones',
     id: 0,
   },
   {
@@ -21,6 +30,7 @@ export const dummyList = [
     price: 150,
     user: lukas,
     isBought: false,
+    description: 'six or so',
     id: 1,
   },
   {
@@ -28,6 +38,15 @@ export const dummyList = [
     price: 149,
     user: laura,
     isBought: false,
+    description: 'one pack',
     id: 2,
   },
+  {
+    name: 'Coffee',
+    price: 149,
+    user: laura,
+    isBought: false,
+    description: 'the one for espresso',
+    id: 3,
+  },
 ];

src/views/EditItem.vue

@@ -12,7 +12,7 @@ const item = ref(store.items.find(item => item.id === Number(route.params.id)));
 </script>
 
 <template>
-  <DefaultPage title="Add Item">
+  <DefaultPage title="Edit Item">
     <v-container>
       <EditItemForm v-if="item" :item="item"/>
       <div v-else>

src/views/ShoppingList.vue

@@ -23,7 +23,7 @@ const tabs = [
         </v-window-item>
       </v-window>
     </v-container>
-    <v-card-text style="display: flex; justify-content: end">
+    <v-card-text style="position: absolute; right: 0;">
       <v-btn
         icon="mdi-plus"
         color="red"