From 315fef6c596fb718b5d4b7c61ba19bd9b979f5f6 Mon Sep 17 00:00:00 2001
From: ldscavo <logan@scavo.dev>
Date: Sun, 15 Dec 2024 16:11:16 -0500
Subject: [PATCH] more work on item redo

---
 client/src/components/budget.vue       |   9 +-
 client/src/components/itemV2.vue       | 153 +++++++++++++++++++++++++
 client/src/components/recipientV2.vue  |  51 +++------
 client/src/components/recipientsV2.vue |  10 +-
 package-lock.json                      |  16 ++-
 package.json                           |   3 +-
 6 files changed, 200 insertions(+), 42 deletions(-)
 create mode 100644 client/src/components/itemV2.vue

diff --git a/client/src/components/budget.vue b/client/src/components/budget.vue
index 5038a15..eef134f 100644
--- a/client/src/components/budget.vue
+++ b/client/src/components/budget.vue
@@ -5,17 +5,20 @@
     </div>
     <div class="budget" v-if="budget !== null">
       <budget-details-v2 v-bind:budget="budget" />
-      <!-- <recipients-v2
+      <!--
+      <recipients-v2
         v-bind:recipients="budget.recipients"
         v-bind:budgetId="budget.id"
-        v-bind:deleteRecipient="deleteRecipient" /> -->
+        v-bind:deleteRecipient="deleteRecipient" />
+      -->
+
       <recipient
         v-for="recipient in budget.recipients"
         v-bind:key="recipient.name"
         v-bind:recipient="recipient"
         v-bind:budgetId="budget.id"
         v-bind:deleteRecipient="deleteRecipient" />
-
+     
       <add-recipient
         v-bind:recipients="budget.recipients"
         v-bind:budgetId="budget.id" />
diff --git a/client/src/components/itemV2.vue b/client/src/components/itemV2.vue
new file mode 100644
index 0000000..6f9d336
--- /dev/null
+++ b/client/src/components/itemV2.vue
@@ -0,0 +1,153 @@
+<template>
+  <tr v-bind:class="{ 'unpurchased': !purchased }">
+    <td>
+      <input type="checkbox" v-model="purchased" v-on:change="togglePurchase" />
+    </td>
+    <td>{{ item.name }}</td>
+    <td class="dollars">{{ parseFloat(item.price) | currency }}</td>
+  </tr>
+<!--
+<div>
+  <div v-if="!isEditing" class="item" v-bind:class="{ 'unpurchased': !purchased }">
+    <input type="checkbox" v-model="purchased" v-on:change="togglePurchase" />
+    <span class="name">{{ item.name }}</span>
+    <div>
+      <span class="price">{{ parseFloat(item.price) | currency }}</span>
+      <div id="edit-container">        
+        <fa-icon icon="edit" v-on:click="toggleEdit" class="menu-item"/>
+        <fa-icon icon="trash" v-on:click="deleteItem(item)" class="menu-item" />
+      </div>
+    </div>
+  </div>
+  <form v-on:submit.prevent="update" v-if="isEditing" class="item">
+    <div>&nbsp;</div>
+    <input class="edit-input" v-model="editedName" type="text"/>
+    
+    <div>
+      <input class="edit-input" v-model="editedPrice" type="number"/>
+      <fa-icon icon="check" class="menu-item" v-on:click="update" />
+      <fa-icon icon="ban" class="menu-item" v-on:click="toggleEdit" />
+      <input type="submit" style="display: none" />
+    </div>  
+  </form> 
+</div>
+-->
+</template>
+
+<script>
+import { updateItem } from '../services/itemService';
+
+export default {
+  name: "item",
+  props: {
+    budgetId: Number,
+    recipientId: Number,
+    item: Object,
+    deleteItem: Function
+  },
+  data: function() {
+    let self = this;
+    return {
+      purchased: self.item.purchased,
+      isMenuOpen: false,
+      isEditing: false,
+      editedName: self.item.name,
+      editedPrice: self.item.price
+    }
+  },
+  methods: {
+    togglePurchase: async function() {
+      try {
+        await updateItem(
+          this.budgetId,
+          this.recipientId,
+          this.item.id,
+          this.item.name,
+          this.item.price,
+          this.purchased);
+
+        this.item.purchased = this.purchased;
+      }
+      catch (error) {
+        this.purchased = !this.purchased
+      }
+    },
+    update: async function() {      
+      await updateItem(
+        this.budgetId,
+        this.recipientId,
+        this.item.id,
+        this.editedName,
+        this.editedPrice,
+        this.purchased);
+
+      this.item.name = this.editedName;
+      this.item.price = this.editedPrice;
+      this.isEditing = false;      
+    },
+    toggleMenu: function () {
+      this.isMenuOpen = !this.isMenuOpen;
+    },
+    toggleEdit: function () {
+      this.isEditing = !this.isEditing;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.item {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+.item:hover {
+  background-color: #e2e2e2;
+}
+.unpurchased {
+  font-style: italic;
+  color: #959595;
+}
+input[type="checkbox"] {
+  border:5px solid black;
+}
+#edit-toggle {
+  margin-left: 15px;
+  cursor: pointer;
+}
+#edit-container {
+  position: relative;
+  display: inline-block;
+}
+div#edit {
+  color: #000;
+  position: absolute;
+  width: 130px;
+  text-align: left;
+  background: #fff;
+  border: 1px solid #2c3e50;
+  padding: 5px;
+  z-index: 15;
+}
+div#edit div {
+  margin: 5px 5px 5px 15px;
+}
+.menu-item {
+  margin-left: 15px;
+  cursor: pointer;
+  /* font-size: 0.9rem; */
+}
+.edit-input {
+  font-size: 0.9rem;
+  padding: 5px 5px;
+}
+@media only screen and (max-width: 550px) {
+  .item {
+    padding:7.5px;
+  }
+  .menu-item {
+    font-size: 0.9rem;
+    margin-left: 10px;
+  }
+}
+</style>
diff --git a/client/src/components/recipientV2.vue b/client/src/components/recipientV2.vue
index 147d85c..4135b82 100644
--- a/client/src/components/recipientV2.vue
+++ b/client/src/components/recipientV2.vue
@@ -4,8 +4,8 @@
             <td class="recipient-name">
                 <span class="icon-text">
                     <span class="icon" v-on:click="showhide()">
-                        <i v-if="!collapsed" class="fas fa-chevron-down chevron"></i>
-                        <i v-if="collapsed" class="fas fa-chevron-right chevron"></i>
+                        <span v-if="!collapsed"><fa-icon icon="chevron-down"/></span>
+                        <span v-if="collapsed"><fa-icon icon="chevron-right"/></span>
                     </span>
                     <span>{{ recipient.name }}</span>
                 </span>
@@ -19,38 +19,18 @@
                 </span>
             </td>
         </tr>
-        <tr class="item-list" v-if="!collapsed">
-            <td class="item-list" colspan="3">
-                <table class="table is-borderedd is-fullwidth item-list">
+        <tr v-if="!collapsed">
+            <td colspan="3">
+                <table class="table is-fullwidth item-list">
+                    <item-v2
+                        v-for="item in recipient.items"
+                        v-bind:key="item.id"
+                        v-bind:budgetid="budgetId"
+                        v-bind:recipientId="recipient.id"
+                        v-bind:item="item" />
                     <tr>
-                        <td>
-                            <input type="checkbox" checked />
-                        </td>
-                        <td>A Whole Pizza</td>
-                        <td>$5.99</td>
-                        <td>
-                            <span v-if="!isEditing" v-on:click="isEditing = true" class="toolbar-item edit"><fa-icon
-                                    icon="edit" /></span>
-                            <span v-on:click="deleteRecipient(recipient)" class="toolbar-item remove"><fa-icon
-                                    icon="trash" /></span>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <input type="checkbox" checked />
-                        </td>
-                        <td>A Whole Pizza</td>
-                        <td>$5.99</td>
-                        <td>
-                            <span v-if="!isEditing" v-on:click="isEditing = true" class="toolbar-item edit"><fa-icon
-                                    icon="edit" /></span>
-                            <span v-on:click="deleteRecipient(recipient)" class="toolbar-item remove"><fa-icon
-                                    icon="trash" /></span>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th colspan="2">Total:</th>
-                        <td>$500.00</td>
+                        <th colspan="2"></th>
+                        <td class="dollars"><strong>{{ totalSpent() }}</strong></td>
                     </tr>
                 </table>
             </td>
@@ -65,6 +45,7 @@ import _ from 'lodash'
 import recipientDetails from './recipientDetails.vue'
 import recipientMinimized from './recipientMinimized.vue'
 import item from './item.vue'
+import itemV2 from './itemV2.vue'
 import addItem from './addItem.vue'
 import editRecipient from './editRecipient.vue'
 
@@ -81,6 +62,7 @@ export default {
         recipientDetails,
         recipientMinimized,
         item,
+        itemV2,
         addItem,
         editRecipient
     },
@@ -132,10 +114,11 @@ td.dollars {
 }
 .item-list {
     margin-top: 0px;
+    border: 1px solid #000;
 }
 .toolbar-item {
     text-align: center;
     cursor: pointer;
     padding: 5px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/components/recipientsV2.vue b/client/src/components/recipientsV2.vue
index c4f2b4e..5d6c77b 100644
--- a/client/src/components/recipientsV2.vue
+++ b/client/src/components/recipientsV2.vue
@@ -5,8 +5,12 @@
             <th class="dollars">Budgeted</th>
             <th class="dollars">Remaining</th>
         </tr>
-        <recipient-v2 v-for="recipient in recipients" v-bind:key="recipient.name" v-bind:recipient="recipient"
-            v-bind:budgetId="budgetId" v-bind:deleteRecipient="deleteRecipient" />
+        <recipient-v2
+            v-for="recipient in recipients"
+            v-bind:key="recipient.name"
+            v-bind:recipient="recipient"
+            v-bind:budgetId="budgetId"
+            v-bind:deleteRecipient="deleteRecipient" />
     </table>
 </template>
 
@@ -33,4 +37,4 @@ export default {
 .dollars {
     text-align: right !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/package-lock.json b/package-lock.json
index 6c0bfea..231b39d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,8 @@
       },
       "devDependencies": {
         "nodemon": "^2.0.6",
-        "npm-run-all": "^4.1.5"
+        "npm-run-all": "^4.1.5",
+        "typescript": "^5.6.3"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -4594,6 +4595,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index 05ecb29..376faad 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "nodemon": "^2.0.6",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "typescript": "^5.6.3"
   }
 }