From ba8b8b94cf278621406588c63563c8f09d69b66f Mon Sep 17 00:00:00 2001
From: Thomas Mack <toking@toking.de>
Date: Thu, 14 Apr 2022 15:18:49 +0200
Subject: [PATCH] editpane before drag and drop

---
 src/App.vue                                   | 11 +++
 src/components/camera/CameraReadDetail.vue    |  5 +-
 .../parts/InventoryItemCollectionInfo.vue     | 68 ++++++++++++++++---
 .../camera/parts/InventoryItemDescription.vue | 12 ++--
 src/store/classes/InventoryItem.ts            |  6 +-
 5 files changed, 82 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9bf7398..8ec92a5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -175,6 +175,17 @@ export default class App extends Vue {}
 .billi-label {
   font-weight: bold;
 }
+.billi-value {
+  padding-top: 0.5rem;
+  justify-self: stretch;
+  font-weight: bold;
+}
+
+
+.billi-value input,
+.billi-value select{
+width: 100%
+}
 
 
 </style>
diff --git a/src/components/camera/CameraReadDetail.vue b/src/components/camera/CameraReadDetail.vue
index fe9f03c..66e64aa 100644
--- a/src/components/camera/CameraReadDetail.vue
+++ b/src/components/camera/CameraReadDetail.vue
@@ -20,7 +20,7 @@
         <button @click="toggleEdit">Bearbeiten</button>
         <InventoryItemHead :item="item"></InventoryItemHead>
         <CameraTechnicalDetail :item="item"></CameraTechnicalDetail>
-        <InventoryItemCollectionInfo :globalEdit="globalEdit" :item="item"></InventoryItemCollectionInfo>
+        <InventoryItemCollectionInfo :globalEdit="globalEdit" :item="item" @changedInput="handleChangeEvent"></InventoryItemCollectionInfo>
         <InventoryItemDescription :globalEdit="globalEdit" :item="item" @changedDescription="handleChangeEvent"></InventoryItemDescription>
       </section>
     </article>
@@ -71,7 +71,8 @@ export default {
     },
     handleChangeEvent(value) {
       console.log("handleChangedDescription" , value)
-      this.newCamera[value.field] = value.value.trim();
+      if(typeof value.value =="string") this.newCamera[value.field] = value.value.trim();
+      else this.newCamera[value.field] = value.value
       console.log("newCamera", this.newCamera);
     }
 
diff --git a/src/components/camera/parts/InventoryItemCollectionInfo.vue b/src/components/camera/parts/InventoryItemCollectionInfo.vue
index 79f8377..906e906 100644
--- a/src/components/camera/parts/InventoryItemCollectionInfo.vue
+++ b/src/components/camera/parts/InventoryItemCollectionInfo.vue
@@ -64,7 +64,7 @@
         <div class="billi-label">
           Teil des Sets
         </div>
-        <div class="billi-value">
+        <div class="billi-value form-group">
           {{ set(item.set_key).name }}
         </div>
       </div>
@@ -72,8 +72,11 @@
         <div class="billi-label">
           Jahr des Kaufs
         </div>
-        <div class="billi-value">
-          <input name="year_of_purchase" id="year_of_purchase" v-model="newItem.year_of_purchase" type="number"/>
+        <div class="billi-value  form-group">
+          <input name="year_of_purchase" id="year_of_purchase"
+                 v-model="newItem.year_of_purchase"
+                 @change="changeHandler('year_of_purchase')"
+                 type="number"/>
         </div>
       </div>
       <div v-if="item.condition_key" class="billi-row-50-50">
@@ -81,15 +84,25 @@
           Zustand
         </div>
         <div class="billi-value">
-          {{ condition(item.condition_key).name }}
+          <select v-model="newItem.condition_key" >
+            <option
+                v-for="condition in conditions"
+                :value="condition.key"
+                :key="condition.key"
+                @change="changeHandler('condition_key')"
+            >{{condition.name}}</option>
+          </select>
         </div>
       </div>
       <div class="billi-row-50-50">
         <div class="billi-label">
           Kaufpreis
         </div>
-        <div class="billi-value">
-          <input name="price_purchased" id="price_purchased" v-model="newItem.price_purchased" type="money"/>
+        <div class="billi-value  form-group">
+          <input name="price_purchased" id="price_purchased"
+                 v-model="newItem.price_purchased"
+                 @change="changeHandler('price_purchased')"
+                 type="number"/>
         </div>
       </div>
       <div class="billi-row-50-50">
@@ -97,7 +110,10 @@
           Zeitwert
         </div>
         <div class="billi-value">
-          <input name="price_current" id="price_current" v-model="newItem.price_current" type="money"/>
+          <input name="price_current" id="price_current"
+                 v-model="newItem.price_current"
+                 @change="changeHandler('price_current')"
+                 type="number"/>
         </div>
       </div>
 
@@ -106,7 +122,10 @@
           hist. Kaufpreis
         </div>
         <div class="billi-value">
-          <input name="price_historic" id="price_historic" v-model="newItem.price_historic" type="money"/>
+          <input name="price_historic" id="price_historic"
+                 v-model="newItem.price_historic"
+                 @change="changeHandler('price_historic')"
+                 type="number"/>
       </div>
       </div>
 
@@ -134,8 +153,15 @@ export default {
       default: false
     }
   },
+  emits: {
+    changedInput: (payload) => {
+      if(payload.field && payload.value) return true;
+      else return false;
+    }
+  },
   data() {
     return {
+      edit: false,
       newItem: {
         year_of_purchase: this.item.year_of_purchase,
         price_current: this.item.price_current,
@@ -147,7 +173,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(["condition", "set"]),
+    ...mapGetters(["condition", "conditions", "set"]),
     getIconName() {
       if (!this.edit) return "pen"
       else return "floppy-disk"
@@ -156,6 +182,30 @@ export default {
       return this.edit || this.globalEdit;
     },
   },
+  methods: {
+    toggleEdit() {
+      this.edit = !this.edit;
+      if(this.edit) {
+        this.newItem.key = this.item.key;
+        this.newItem.description = this.item.description;
+        this.newItem.work_done = this.item.work_done;
+      } else {
+
+        if(this.newItem.description.trim() != this.item.description) {
+          this.$store.dispatch("storeInventoryDescription", {
+            key: this.newItem.key,
+            description: this.newItem.description.trim()
+          });
+        }
+      }
+
+    },
+    changeHandler(field) {
+      console.log("changeHanlder", field);
+      this.$emit("changedInput", {field:field, value: this.newItem[field]});
+
+    }
+  }
 }
 </script>
 
diff --git a/src/components/camera/parts/InventoryItemDescription.vue b/src/components/camera/parts/InventoryItemDescription.vue
index 9441bb6..85355e6 100644
--- a/src/components/camera/parts/InventoryItemDescription.vue
+++ b/src/components/camera/parts/InventoryItemDescription.vue
@@ -39,18 +39,18 @@ export default {
       type: InventoryItem,
       required: true
     },
-    emits: {
-      changedDescription: (payload) => {
-        if(payload.field && payload.value) return true;
-        else return false;
-      }
-    },
     globalEdit: {
       type: Boolean,
       required: false,
       default: false
     }
   },
+  emits: {
+    changedDescription: (payload) => {
+      if(payload.field && payload.value) return true;
+      else return false;
+    }
+  },
   data() {
     return {
       edit: false,
diff --git a/src/store/classes/InventoryItem.ts b/src/store/classes/InventoryItem.ts
index 78a7b25..e1fafdb 100644
--- a/src/store/classes/InventoryItem.ts
+++ b/src/store/classes/InventoryItem.ts
@@ -179,15 +179,15 @@ export default class InventoryItem {
     }
 
     set price_purchased(value: number) {
-        this._price_purchased = value;
+        this._price_purchased = Number(value);
     }
 
     set price_historic(value: number) {
-        this._price_historic = value;
+        this._price_historic = Number(value);
     }
 
     set price_current(value: number) {
-        this._price_current = value;
+        this._price_current = Number(value);
     }
 
     set year_of_production(value: number) {