From 0d754f93f571be779998bdb62f63184c2ddc71a0 Mon Sep 17 00:00:00 2001
From: adb-sh <git@adb.sh>
Date: Sun, 8 Jan 2023 17:58:11 +0100
Subject: [PATCH] add more users and description field

---
 src/components/AddItemForm.vue  |  7 +++++++
 src/components/EditItemForm.vue |  7 +++++++
 src/components/ItemList.vue     |  2 +-
 src/store/dummyData.ts          | 23 +++++++++++++++++++++--
 src/views/EditItem.vue          |  2 +-
 src/views/ShoppingList.vue      |  2 +-
 6 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/components/AddItemForm.vue b/src/components/AddItemForm.vue
index 13cf66f..e2c1f24 100644
--- a/src/components/AddItemForm.vue
+++ b/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)"
diff --git a/src/components/EditItemForm.vue b/src/components/EditItemForm.vue
index a8cc74d..cdd204e 100644
--- a/src/components/EditItemForm.vue
+++ b/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)"
diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
index 88e36c1..3038313 100644
--- a/src/components/ItemList.vue
+++ b/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"/>
diff --git a/src/store/dummyData.ts b/src/store/dummyData.ts
index 5c1f687..9f0ec46 100644
--- a/src/store/dummyData.ts
+++ b/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,
+  },
 ];
diff --git a/src/views/EditItem.vue b/src/views/EditItem.vue
index 0b3381d..b978f67 100644
--- a/src/views/EditItem.vue
+++ b/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>
diff --git a/src/views/ShoppingList.vue b/src/views/ShoppingList.vue
index d39b1b0..2fe2ae7 100644
--- a/src/views/ShoppingList.vue
+++ b/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"