From ebc08ce2d6e3c9aa2ddd0034785fed945d339b51 Mon Sep 17 00:00:00 2001
From: Thomas Mack <toking@toking.de>
Date: Sun, 3 Apr 2022 13:53:17 +0200
Subject: [PATCH] change id to key, save description

---
 src/App.vue                                   |  22 ++-
 src/components/camera/CameraReadDetail.vue    |  24 +++-
 .../parts/InventoryItemCollectionInfo.vue     | 136 ++++++++++++++----
 .../camera/parts/InventoryItemDescription.vue |  66 ++++++---
 4 files changed, 198 insertions(+), 50 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b4559c8..9bf7398 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -83,7 +83,6 @@ export default class App extends Vue {}
 }
 
 .billi-bg-transparent {
-  background-color: white;
   background-color: rgb(255 255 255 / 40%);
 }
 
@@ -143,14 +142,16 @@ export default class App extends Vue {}
 
 .billi-box-header {
   padding:0.5rem;
+  border-radius: 0.5rem 0 0 0;
   grid-area: header;
 }
 
 .billi-box-icon {
-  padding-right: 0.5rem;
+  padding: 0.5rem;
   grid-area: icon;
+  border-radius: 0  0.5rem 0 0;
   align-self: center;
-  justify-self: end;
+  justify-self: stretch;
 }
 
 .billi-box-icon svg {
@@ -158,7 +159,22 @@ export default class App extends Vue {}
   width: 2rem;
 }
 .billi-box-content {
+  padding: 1rem;
   grid-area: billi-ct
 }
+.billi-box-content textarea {
+  width:100%;
+
+}
+
+.billi-row-50-50 {
+  display:grid;
+  grid-template-columns: 50% 50%;
+}
+
+.billi-label {
+  font-weight: bold;
+}
+
 
 </style>
diff --git a/src/components/camera/CameraReadDetail.vue b/src/components/camera/CameraReadDetail.vue
index 9e85eb7..fe9f03c 100644
--- a/src/components/camera/CameraReadDetail.vue
+++ b/src/components/camera/CameraReadDetail.vue
@@ -3,7 +3,7 @@
       enter-active-class="animate__animated animate__fadeIn"
       mode="out-in"
       appear>
-    <font-awesome-icon  class="billi-icon-as-bg" :icon="getIconName(item.item_type)" color="#eee" size="xxl"/>
+    <font-awesome-icon  class="billi-icon-as-bg" :icon="getIconName(item.item_type)" color="#eee"/>
   </transition>
 
 
@@ -17,10 +17,11 @@
         <img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
       </aside>
       <section>
+        <button @click="toggleEdit">Bearbeiten</button>
         <InventoryItemHead :item="item"></InventoryItemHead>
         <CameraTechnicalDetail :item="item"></CameraTechnicalDetail>
-        <InventoryItemCollectionInfo :item="item"></InventoryItemCollectionInfo>
-        <InventoryItemDescription :item="item"></InventoryItemDescription>
+        <InventoryItemCollectionInfo :globalEdit="globalEdit" :item="item"></InventoryItemCollectionInfo>
+        <InventoryItemDescription :globalEdit="globalEdit" :item="item" @changedDescription="handleChangeEvent"></InventoryItemDescription>
       </section>
     </article>
   </transition>
@@ -47,6 +48,12 @@ export default {
       type:Camera,
       required: true
     }
+  },
+  data() {
+    return {
+      globalEdit: false,
+      newCamera: {},
+    }
   },
    computed: {
      ...mapGetters(["activeItem","getIconName"]),
@@ -56,6 +63,17 @@ export default {
     editCamera() {
       this.$store.dispatch("setCameraEditState", {cameraId:this.activeCamera.id, edit:true})
     },
+    toggleEdit() {
+      this.globalEdit = !this.globalEdit;
+      if (this.globalEdit) {
+        this.newCamera = this.item;
+      }
+    },
+    handleChangeEvent(value) {
+      console.log("handleChangedDescription" , value)
+      this.newCamera[value.field] = value.value.trim();
+      console.log("newCamera", this.newCamera);
+    }
 
   }
 }
diff --git a/src/components/camera/parts/InventoryItemCollectionInfo.vue b/src/components/camera/parts/InventoryItemCollectionInfo.vue
index 5a16876..79f8377 100644
--- a/src/components/camera/parts/InventoryItemCollectionInfo.vue
+++ b/src/components/camera/parts/InventoryItemCollectionInfo.vue
@@ -1,59 +1,119 @@
 <template>
-  <div class="card mt-2  billi-bg-transparent">
-    <div class="card-header billi-bg-50">Sammlung</div>
-    <div class="card-body  billi-bg-transparent">
-      <div v-if="item.set_key" class="row">
-        <div class="col-6">
+
+
+  <section class="billi-box">
+    <div class="billi-box-header  billi-bg-50">Sammlung</div>
+    <div class="billi-box-icon  billi-bg-50">
+      <font-awesome-icon  @click="toggleEdit" :icon="getIconName" color="#fff" />
+    </div>
+    <div v-if="!isEdit" class="billi-box-content billi-bg-transparent">
+      <div v-if="item.set_key" class="billi-row-50-50">
+        <div class="billi-label">
           Teil des Sets
         </div>
-        <div class="col-6">
+        <div class="billi-value">
           {{ set(item.set_key).name }}
         </div>
       </div>
-      <div class="row">
-        <div class="col-6">
+      <div class="billi-row-50-50">
+        <div class="billi-label">
           Jahr des Kaufs
         </div>
-        <div class="col-6">
+        <div class="billi-value">
           {{ item.year_of_purchase }}
         </div>
       </div>
-      <div v-if="item.condition_key" class="row">
-        <div class="col-6">
+      <div v-if="item.condition_key" class="billi-row-50-50">
+        <div class="billi-label">
           Zustand
         </div>
-        <div class="col-6">
+        <div class="billi-value">
           {{ condition(item.condition_key).name }}
         </div>
       </div>
-      <div class="row">
-        <div class="col-6">
+      <div class="billi-row-50-50">
+        <div class="billi-label">
           Kaufpreis
         </div>
-        <div class="col-6">
+        <div class="billi-value">
           {{ item.price_purchased }} €
         </div>
       </div>
-      <div class="row">
-        <div class="col-6">
+      <div class="billi-row-50-50">
+        <div class="billi-label">
           Zeitwert
         </div>
-        <div class="col-6">
+        <div class="billi-value">
           {{ item.price_purchased }} €
         </div>
       </div>
 
-      <div class="row">
-        <div class="col-6">
+      <div class="billi-row-50-50">
+        <div class="billi-label">
           hist. Kaufpreis
         </div>
-        <div class="col-6">
+        <div class="billi-value">
           {{ item.price_historic }}
         </div>
       </div>
 
     </div>
-  </div>
+
+    <div v-else class="billi-box-content billi-bg-transparent">
+      <div v-if="item.set_key" class="billi-row-50-50">
+        <div class="billi-label">
+          Teil des Sets
+        </div>
+        <div class="billi-value">
+          {{ set(item.set_key).name }}
+        </div>
+      </div>
+      <div class="billi-row-50-50">
+        <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>
+      </div>
+      <div v-if="item.condition_key" class="billi-row-50-50">
+        <div class="billi-label">
+          Zustand
+        </div>
+        <div class="billi-value">
+          {{ condition(item.condition_key).name }}
+        </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>
+      </div>
+      <div class="billi-row-50-50">
+        <div class="billi-label">
+          Zeitwert
+        </div>
+        <div class="billi-value">
+          <input name="price_current" id="price_current" v-model="newItem.price_current" type="money"/>
+        </div>
+      </div>
+
+      <div class="billi-row-50-50">
+        <div class="billi-label">
+          hist. Kaufpreis
+        </div>
+        <div class="billi-value">
+          <input name="price_historic" id="price_historic" v-model="newItem.price_historic" type="money"/>
+      </div>
+      </div>
+
+    </div>
+
+  </section>
+
 </template>
 
 <script>
@@ -62,16 +122,40 @@ import {mapGetters} from "vuex";
 
 export default {
   name: "InventoryItemCollectionInfo",
-  computed: {
-    ...mapGetters(["condition", "set"])
-  },
   props: {
     item: {
       type: InventoryItem,
       required: true
 
+    },
+    globalEdit: {
+      type: Boolean,
+      required: false,
+      default: false
     }
-  }
+  },
+  data() {
+    return {
+      newItem: {
+        year_of_purchase: this.item.year_of_purchase,
+        price_current: this.item.price_current,
+        price_purchased: this.item.price_purchased,
+        price_historic: this.item.price_historic,
+        condition_key: this.item.condition_key
+      }
+    }
+  },
+
+  computed: {
+    ...mapGetters(["condition", "set"]),
+    getIconName() {
+      if (!this.edit) return "pen"
+      else return "floppy-disk"
+    },
+    isEdit() {
+      return this.edit || this.globalEdit;
+    },
+  },
 }
 </script>
 
diff --git a/src/components/camera/parts/InventoryItemDescription.vue b/src/components/camera/parts/InventoryItemDescription.vue
index d6f3c57..9441bb6 100644
--- a/src/components/camera/parts/InventoryItemDescription.vue
+++ b/src/components/camera/parts/InventoryItemDescription.vue
@@ -1,27 +1,31 @@
 <template>
-  <section class="billi-box billi-bg-50">
-        <div class="billi-box-header ">Besonderheiten</div>
-    <div class="billi-box-icon ">
-        <font-awesome-icon @click="toggleEdit" :icon="getIconName" color="#fff" />
+  <section>
+  <section class="billi-box">
+        <div class="billi-box-header  billi-bg-50">Besonderheiten</div>
+    <div class="billi-box-icon  billi-bg-50">
+        <font-awesome-icon  @click="toggleEdit" :icon="getIconName" color="#fff" />
     </div>
-        <div v-if="!isEdit" class="billi-box-content billi-bg-transparent">
+        <div v-if="!isEdit && !globalEdit" class="billi-box-content billi-bg-transparent">
           {{ item.description }}
         </div>
        <div v-else class="billi-box-content billi-bg-transparent">
-         <textarea id="description" name="description" v-model="newItem.description"></textarea>
+         <textarea id="description" name="description" v-model="newItem.description" @change="changeHandler('description')"></textarea>
        </div>
-  </section>
-    <section class="billi-box billi-bg-transparent">
-        <div class="billi-box-header billi-bg-50">Ausgeführte Arbeiten</div>
-        <font-awesome-icon class="billi-box-icon billi-bg-50"   :icon="getIconName" color="#fff" />
-        <div v-if="!isEdit" class="billi-box-content billi-bg-transparent">
+    </section>
+    <section class="billi-box ">
+        <div class="billi-box-header billi-bg-50 ">Ausgeführte Arbeiten</div>
+      <div class="billi-box-icon  billi-bg-50">
+        <font-awesome-icon  @click="toggleEdit" :icon="getIconName" color="#fff" />
+      </div>
+
+      <div v-if="!isEdit && !globalEdit" class="billi-box-content billi-bg-transparent">
           {{ item.work_done }}
         </div>
         <div v-else class="billi-box-content billi-bg-transparent">
-          <textarea id="work_done" name="work_done" v-model="newItem.work_done"></textarea>
+          <textarea id="work_done" name="work_done" v-model="newItem.work_done"
+                    @change="changeHandler('work_done')"></textarea>
         </div>
-
-
+  </section>
   </section>
 </template>
 
@@ -34,18 +38,28 @@ export default {
     item: {
       type: InventoryItem,
       required: true
-
+    },
+    emits: {
+      changedDescription: (payload) => {
+        if(payload.field && payload.value) return true;
+        else return false;
+      }
+    },
+    globalEdit: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
     return {
       edit: false,
-      newItem: {id:"",description:"", work_done:""},
+      newItem: {id:"",description:this.item.description, work_done:this.item.work_done},
     }
   },
   computed: {
     isEdit() {
-      return this.edit;
+      return this.edit || this.globalEdit;
     },
     getIconName() {
       if (!this.edit) return "pen"
@@ -60,9 +74,25 @@ export default {
         this.newItem.description = this.item.description;
         this.newItem.work_done = this.item.work_done;
       } else {
-        this.$store.dispatch("storeInventoryDescription", {key:this.newItem.key, description:this.newItem.description});
+
+        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);
+      if(field === "description") {
+        console.log("changeHandler emitting");
+        this.$emit("changedDescription", {field:'description', value: this.newItem.description});
+      } else if(field === "work_done") {
+        console.log("changeHandler emitting");
+        this.$emit("changedDescription", {field:'work_done', value: this.newItem.work_done});
+      }
     }
  }
 }