change id to key, save description

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "billibox-vue",
       "version": "0.1.0",
       "dependencies": {
         "@dsb-norge/vue-keycloak-js": "*",
@@ -14286,6 +14287,7 @@
       "integrity": "sha512-vf4KqrmuOSnoEYGUiHPeMoxhh6wpiucLWXISn7xYFU80pK1lqcuhbl6tpurAanUIyRO/ENDUQBH7RAdbLNq1bA==",
       "dev": true,
       "requires": {
+        "@babel/core": "^7.12.16",
         "@babel/helper-compilation-targets": "^7.12.16",
         "@babel/helper-module-imports": "^7.12.13",
         "@babel/plugin-proposal-class-properties": "^7.12.13",
@@ -14298,6 +14300,7 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.1.2",
         "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.8.3",
         "core-js-compat": "^3.8.3",
         "semver": "^7.3.4"
       },
@@ -15983,7 +15986,9 @@
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
           "dev": true,
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -18462,7 +18467,9 @@
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
           "dev": true,
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -21140,7 +21147,9 @@
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
           "dev": true,
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",
@@ -21226,7 +21235,9 @@
           "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
           "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
           "dev": true,
-          "requires": {}
+          "requires": {
+            "ajv": "^8.0.0"
+          }
         },
         "ajv-keywords": {
           "version": "5.1.0",

src/App.vue

@@ -104,7 +104,6 @@ export default class App extends Vue {}
 }
 
 .billi-read-detail section {
-  padding-left: 1rem;
   border-left: 1px solid grey;
   z-index: 0;
   grid-area: haupt
@@ -115,6 +114,7 @@ export default class App extends Vue {}
   position: absolute;
   bottom: -50px;
   left: -50px;
+  z-index: -100;
 }
 
 .billi-icon-filter {
@@ -129,5 +129,36 @@ export default class App extends Vue {}
   grid-template-columns: repeat(4, 1fr);
 }
 
+.billi-box {
+  margin-top: 1rem;
+  border-radius: 0.5rem;
+  padding-left: 0rem;
+  display: grid;
+  grid-template-columns: auto 60px;
+  grid-template-areas:
+  "header icon"
+  "billi-ct billi-ct"
+;
+}
+
+.billi-box-header {
+  padding:0.5rem;
+  grid-area: header;
+}
+
+.billi-box-icon {
+  padding-right: 0.5rem;
+  grid-area: icon;
+  align-self: center;
+  justify-self: end;
+}
+
+.billi-box-icon svg {
+  height: 2rem;
+  width: 2rem;
+}
+.billi-box-content {
+  grid-area: billi-ct
+}
 
 </style>

src/components/camera/AccessoireReadDetail.vue

@@ -12,7 +12,7 @@
       mode="out-in"
       appear
   >
-    <article class="billi-read-detail" :key="item.id">
+    <article class="billi-read-detail" :key="item.key">
       <aside>
         <img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
       </aside>
@@ -27,7 +27,7 @@
 
 <script>
 import { mapGetters} from "vuex";
-import Set from "@/store/classes/Set";
+import InventorySet from "@/store/classes/InventorySet";
 import InventoryItemDescription from "@/components/camera/parts/InventoryItemDescription";
 import InventoryItemCollectionInfo from "@/components/camera/parts/InventoryItemCollectionInfo";
 import InventoryItemHead from "@/components/camera/parts/InventoryItemHead";
@@ -41,7 +41,7 @@ export default {
   },
   props: {
     item: {
-      type:Set,
+      type:InventorySet,
       required: true
     }
   },

src/components/camera/CameraReadDetail.vue

@@ -12,7 +12,7 @@
       mode="out-in"
       appear
   >
-    <article class="billi-read-detail" :key="item.id">
+    <article class="billi-read-detail" :key="item.key">
       <aside>
         <img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
       </aside>

src/components/camera/InventoryList.vue

@@ -30,7 +30,7 @@
 
       <FilterButtonItemType
           itemType="set"
-          typeName="Set"
+          typeName="InventorySet"
           :active="isFilterByType('set')"
           @click="setFilterByType('set')"
           icon="fa-box-open-full"
@@ -38,14 +38,12 @@
 
     </div>
 
-    <div class="row" >
       <component
           :is="componentName"
           :item=item
           v-for="item in filteredItems" :key="item.id"
       ></component>
 
-    </div>
 
 </template>
 

src/components/camera/InventoryListItem.vue

@@ -1,40 +1,37 @@
 <template>
   <transition
-
       enter-active-class="animate__animated animate__fadeIn"
       leave-active-class="animate__animated animate__fadeOut"
       mode="out-in"
       appear
   >
-    <div class="card mt-3" :class="`${getActiveStyle}`"
+
+    <section class="billi-inventory-card"
       @click="toggleActive"
-      :key="item.id"
+      :key="item.key"
     >
-      <div class="row no-gutters">
+      <div class="billi-icon-inventory" :class="getActiveStyle">
-        <div class="col-3 text-center text-white ">
+      <font-awesome-icon    :icon="getIconName(item.item_type)" color="#eee" />
-          <i class="mx-2 mt-3 text-sm-center " :class="`${getIconClass}`"></i>
-        </div>
-        <div class="col-9 bg-white text-black">
-          <div class="col-md-12"
-
-          >
-            <div class="row mt-2 bottom-50">
-            <div class="col-md-8 "> {{ item.name }} {{ setCounter }}</div>
-            <div class="col-md-4 text-end"><i class="fa-solid fa-tag text-black-50"></i> {{ item.inventory_number }}</div>
-            </div>
-
-          </div>
-          <div class="card-body">
-             <small> {{shortDescription}} </small>
-          </div>
-        </div>
       </div>
-    </div>
+      <div class="billi-label"> {{ item.name }} {{ setCounter }}</div>
+
+      <div class="billi-number">
+        <font-awesome-icon  icon="tag" color="rgba( 0, 0, 0, 0.5)" /> {{ item.inventory_number }}
+      </div>
+      <div class="billi-description"><small> {{shortDescription}} </small></div>
+
+      <font-awesome-icon title="Teil eines Sets"  v-if="item.set_key" class="billi-icon-setindicator"  icon="box-open-full" color="#eee" />
+
+      <font-awesome-icon v-if="false"  class="billi-icon-newindicator" :class="getActiveStyle" :icon="getIconName(item.item_type)" color="#eee" />
+
+
+    </section>
   </transition>
 </template>
 
 <script>
 import InventoryItem from "@/store/classes/InventoryItem";
+import {mapGetters} from "vuex";
 
 export default {
   name: "InventoryListItem",
@@ -45,15 +42,8 @@ export default {
     }
   },
   computed: {
-    getIconClass() {
+    ...mapGetters(["activeItem","getIconName"]),
-      const icons = ["fa-solid", "fa-3x"];
+
-      if(this.item.item_type === "camera") icons.push("fa-camera");
-      else if(this.item.item_type === "set") icons.push("fa-box-open-full");
-      else if(this.item.item_type === "lens") icons.push("fa-aperture");
-      else if(this.item.item_type === "accessoire") icons.push("fa-telescope");
-      else icons.push("fa-circle-question");
-      return icons.join(' ');
-    },
     getActiveStyle() {
       if(this.isActive) return ["billi-primary"] ;
       else return ["billi-secondary"];
@@ -61,7 +51,7 @@ export default {
 
     isActive() {
       const activeItem = this.$store.getters.activeItem;
-      if(activeItem && activeItem.id === this.item.id) return true;
+      if(activeItem && activeItem.key === this.item.key) return true;
       else return false;
     },
     shortDescription() {
@@ -82,7 +72,7 @@ export default {
   methods: {
     toggleActive() {
       console.log("click toggleActive ")
-      this.$store.dispatch("setItemActiveState", {id: this.item.id , active:!this.isActive})
+      this.$store.dispatch("setItemActiveState", {key: this.item.key , active:!this.isActive})
 
     }
   }
@@ -92,4 +82,61 @@ export default {
 
 <style scoped>
 
+.billi-icon-inventory {
+  padding: 1em;
+  border-radius: 0.5rem 0 0 0.5rem;
+  align-self: stretch;
+  align-content: center;
+  grid-area: icon
+}
+
+.billi-icon-inventory svg {
+  height: 40px;
+  width: 40px;
+}
+
+
+
+.billi-inventory-card {
+  display: grid;
+  margin: 0.5rem;
+  background-color: white;
+  border-radius:0.5rem;
+  grid-template-columns: 70px auto 50px 20px;
+  grid-template-areas:
+  "icon label number number"
+  "icon description iconSet iconNew"
+  ;
+}
+.billi-number {
+  grid-area: number;
+  align-self: center;
+  align-content: center;
+}
+.billi-label {
+  padding-left:1rem;
+  padding-top:0.5rem;
+  grid-area: label
+}
+.billi-description {
+  padding-left:1rem;
+  grid-area: description
+}
+
+.billi-icon-setindicator {
+  color: rgba(0,0,0,0.5);
+  grid-area: iconSet;
+  align-self: center;
+  align-content: center;
+
+}
+.billi-icon-newindicator {
+
+  grid-area: iconNew;
+  align-self: center;
+  align-content: center;
+
+}
+
+
 </style>

src/components/camera/LensReadDetail.vue

@@ -11,7 +11,7 @@
       mode="out-in"
       appear
   >
-    <article class="billi-read-detail" :key="item.id">
+    <article class="billi-read-detail" :key="item.key">
       <aside>
         <img src="https://dummyimage.com/600x400/#b2b1b1/fff" class="card-img" />
       </aside>

src/components/camera/SetReadDetail.vue

@@ -12,7 +12,7 @@
       mode="out-in"
       appear
   >
-    <article class="billi-read-detail" :key="item.id">
+    <article class="billi-read-detail" :key="item.key">
       <aside>
         <img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
       </aside>
@@ -27,7 +27,7 @@
 
 <script>
 import { mapGetters} from "vuex";
-import Set from "@/store/classes/Set";
+import InventorySet from "@/store/classes/InventorySet";
 import InventoryItemDescription from "@/components/camera/parts/InventoryItemDescription";
 import InventoryItemCollectionInfo from "@/components/camera/parts/InventoryItemCollectionInfo";
 import InventoryItemHead from "@/components/camera/parts/InventoryItemHead";
@@ -41,7 +41,7 @@ export default {
   },
   props: {
     item: {
-      type:Set,
+      type:InventorySet,
       required: true
     }
   },

src/components/camera/parts/InventoryItemCollectionInfo.vue

@@ -2,6 +2,14 @@
   <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">
+          Teil des Sets
+        </div>
+        <div class="col-6">
+          {{ set(item.set_key).name }}
+        </div>
+      </div>
       <div class="row">
         <div class="col-6">
           Jahr des Kaufs
@@ -55,7 +63,7 @@ import {mapGetters} from "vuex";
 export default {
   name: "InventoryItemCollectionInfo",
   computed: {
-    ...mapGetters(["condition"])
+    ...mapGetters(["condition", "set"])
   },
   props: {
     item: {

src/components/camera/parts/InventoryItemDescription.vue

@@ -1,22 +1,28 @@
 <template>
-  <div class="row">
+  <section class="billi-box billi-bg-50">
-    <div class="col-12">
+        <div class="billi-box-header ">Besonderheiten</div>
-
+    <div class="billi-box-icon ">
-      <div v-if="true" class="card mt-2 billi-bg-transparent">
+        <font-awesome-icon @click="toggleEdit" :icon="getIconName" color="#fff" />
-        <div class="card-header billi-bg-50 ">Besonderheiten</div>
+    </div>
-        <div class="card-body billi-bg-transparent">
+        <div v-if="!isEdit" class="billi-box-content billi-bg-transparent">
           {{ item.description }}
         </div>
-      </div>
+       <div v-else class="billi-box-content billi-bg-transparent">
-      <div class="card mt-2 billi-bg-transparent">
+         <textarea id="description" name="description" v-model="newItem.description"></textarea>
-        <div class="card-header billi-bg-50">Ausgeführte Arbeiten</div>
+       </div>
-        <div class="card-body billi-bg-transparent">
+  </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">
           {{ item.work_done }}
         </div>
-      </div>
+        <div v-else class="billi-box-content billi-bg-transparent">
+          <textarea id="work_done" name="work_done" v-model="newItem.work_done"></textarea>
+        </div>
 
-    </div>
+
-  </div>
+  </section>
 </template>
 
 <script>
@@ -30,10 +36,40 @@ export default {
       required: true
 
     }
-  }
+  },
+  data() {
+    return {
+      edit: false,
+      newItem: {id:"",description:"", work_done:""},
+    }
+  },
+  computed: {
+    isEdit() {
+      return this.edit;
+    },
+    getIconName() {
+      if (!this.edit) return "pen"
+      else return "floppy-disk"
+    }
+  },
+  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 {
+        this.$store.dispatch("storeInventoryDescription", {key:this.newItem.key, description:this.newItem.description});
+      }
+
+    }
+ }
 }
 </script>
 
 <style scoped>
-
+.card_body textarea {
+  width: 100%
+}
 </style>

src/indexdDB/index.ts

@@ -1,14 +1,40 @@
 
 
 export default class BilliDB {
-    private DB_VERSION: number;
+    DB_VERSION: number;
-    private DB_NAME: string;
+    DB_NAME: string;
     constructor(dbName:string, dbVersion:number) {
         this.DB_NAME = dbName;
         this.DB_VERSION = dbVersion;
     }
 
 
+    async initDb(stores: NameKeyStore[]):Promise<IDBOpenDBRequest> {
+        return new Promise((resolve, reject) => {
+
+            const request = window.indexedDB.open(this.DB_NAME, this.DB_VERSION);
+            request.onerror = e => {
+                console.log("Error opening db", e);
+                reject("Error");
+            }
+
+            request.onsuccess =e => {
+                console.log("connect erfolgreich");
+                // @ts-ignore
+                resolve(e.target.result)
+            }
+            request.onupgradeneeded = e => {
+                console.log("onupgradeneeded");
+                // @ts-ignore
+                const db = e.target.result;
+
+                stores.forEach((store) => {
+                    db.createObjectStore(store.id, {autoIncrement:false, keyPath: store.identifier});
+                })
+            }
+        })
+    }
+
 
     async getDb():Promise<IDBOpenDBRequest> {
         return new Promise((resolve, reject) => {
@@ -21,33 +47,15 @@ export default class BilliDB {
             }
 
             request.onsuccess =e => {
-
                 console.log("connect erfolgreich");
                 // @ts-ignore
                 resolve(e.target.result)
             }
-            request.onupgradeneeded = e => {
-                console.log("onupgradeneeded");
-                // @ts-ignore
-                const db = e.target.result;
-                const stores =
 
-                db.createObjectStore("inventory", {autoIncrement: false, keyPath: 'id'});
-                db.createObjectStore("sets", {autoIncrement: false, keyPath: 'id'});
-
-                db.createObjectStore("conditions", {autoIncrement: false, keyPath: 'key'});
-                db.createObjectStore("buildtypes", {autoIncrement: false, keyPath: 'key'});
-                db.createObjectStore("mounts", {autoIncrement: false, keyPath: 'key'});
-                db.createObjectStore("brands", {autoIncrement: false, keyPath: 'key'});
-                db.createObjectStore("manufacturers", {autoIncrement: false, keyPath: 'key'});
-                db.createObjectStore("medias", {autoIncrement: false, keyPath: 'key'});
-                db.createObjectStore("assets", {autoIncrement: false, keyPath: 'key'});
-                db.createObjectStore("filtermounts", {autoIncrement: false, keyPath: 'key'});
-
-            }
         })
     }
 
+
     async saveItem(item, storeId:string) {
         const db = await this.getDb();
 
@@ -66,8 +74,8 @@ export default class BilliDB {
                 reject(e);
             };
             const store = trans.objectStore(storeId);
-
+            console.log("ITEM.STRING", JSON.stringify(item.getDBVersion()));
-            store.add(item);
+            store.put(item.getDBVersion());
 
             store.onerror = (e) => {
                 console.log("Error on Store", e)
@@ -122,7 +130,7 @@ export default class BilliDB {
             // @ts-ignore
             const trans = db.transaction([storeId], 'readonly');
 
-            trans.oncomplete = (e) => {
+            trans.oncomplete = (_) => {
                 console.log(`${storeId}: oncomplete`, items.length)
 
                 resolve(items);
@@ -143,7 +151,6 @@ export default class BilliDB {
                 }
             }
 
-
             store.onerror = (e) => {
                 console.log("Error on getAll", e)
             }
@@ -152,7 +159,6 @@ export default class BilliDB {
             }
         })
     }
-
 }
 
 

src/main.ts

@@ -16,6 +16,8 @@ import { faUserSecret,faTelescope,
     faToggleOff,
     faPlus,
     faXmark,
+    faPen,
+    faFloppyDisk,
     faToggleOn } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -33,6 +35,8 @@ library.add(faToggleOff);
 library.add(faToggleOn);
 library.add(faPlus);
 library.add(faXmark);
+library.add(faPen);
+library.add(faFloppyDisk);
 
 const app =
 createApp(App);

src/seed.ts

@@ -1,4 +1,4 @@
-export const SEED_VERSION = 7;
+export const SEED_VERSION = 8;
 
 export const medias = [
     {key: "kb", name: "Kleinbild", description: ''},
@@ -422,7 +422,7 @@ export const manufacturers = [
 
 export const lenses = [
     {
-        id: "pentax-zoom",
+        key: "pentax-zoom",
         inventory_number: '200',
         item_type: "lens",
         name: "Pentax Zoom",
@@ -444,13 +444,13 @@ export const lenses = [
         special: "",
         year_of_production: 2000,
         year_of_purchase: 1980,
-        set_key: "pentax"
+        set_key: "pentax-set"
     }
 ];
 
 export const cameras = [
     {
-        id: "pentax_19",
+        key: "pentax_19",
         inventory_number: '109',
         item_type: "camera",
         brand_key: "pentax",
@@ -473,7 +473,7 @@ export const cameras = [
         set_key: "pentax"
     },
     {
-        id: "pentax_20",
+        key: "pentax_20",
         inventory_number: '108',
         item_type: "camera",
         brand_key: "pentax",
@@ -494,7 +494,7 @@ export const cameras = [
         year_of_purchase: 2022,
     },
     {
-        id: "pentax_21",
+        key: "pentax_21",
         inventory_number: '107',
         item_type: "camera",
         brand_key: "pentax",
@@ -515,7 +515,7 @@ export const cameras = [
         year_of_purchase: 2022,
     },
     {
-        id: "agfa_01",
+        key: "agfa_01",
         inventory_number: '106',
         item_type: "camera",
         brand_key: "agfa",
@@ -536,7 +536,7 @@ export const cameras = [
         year_of_purchase: 2000,
     },
     {
-        id: "agfa_02",
+        key: "agfa_02",
         inventory_number: '105',
         item_type: "camera",
         brand_key: "agfa",
@@ -557,7 +557,7 @@ export const cameras = [
         year_of_purchase: 1980,
     },
     {
-        id: "cancon_02",
+        key: "cancon_02",
         inventory_number: '104',
         item_type: "camera",
         brand_key: "canon",
@@ -578,7 +578,7 @@ export const cameras = [
         year_of_purchase: 1980,
     },
     {
-        id: "agfa_03",
+        key: "agfa_03",
         inventory_number: '103',
         item_type: "camera",
         brand_key: "agfa",
@@ -599,7 +599,7 @@ export const cameras = [
         year_of_purchase: 2000,
     },
     {
-        id: "agfa_05",
+        key: "agfa_05",
         inventory_number: '102',
         item_type: "camera",
         brand_key: "agfa",
@@ -620,7 +620,7 @@ export const cameras = [
         year_of_purchase: 1980,
     },
     {
-        id: "cancon_07",
+        key: "cancon_07",
         inventory_number: '101',
         item_type: "camera",
         brand_key: "canon",
@@ -645,13 +645,13 @@ export const cameras = [
 
 export const sets = [
     {
-        id: "minox-set",
+        key: "minox-set",
         inventory_number: '300',
         item_type: "set",
         name: "minox Set"
     },
     {
-        id: "pentax-set",
+        key: "pentax-set",
         inventory_number: 'B-1300',
         item_type: "set",
         name: "Pentax K30 Set",
@@ -664,7 +664,7 @@ export const assets = []
 
 export const accessories = [
     {
-        id: "stat11",
+        key: "stat11",
         inventory_number: '300',
         item_type: "accessoire",
         name: "Stativ"

src/store/classes/Camera.ts

@@ -2,7 +2,7 @@ import InventoryItem from "@/store/classes/InventoryItem";
 
 export default class Camera extends InventoryItem {
 
-    private ADD_FIELDS = ['_light_measure_method', 'mount_key',
+    private ADD_FIELDS = ['light_measure_method', 'mount_key',
         'buildtype_key', 'media_key', 'year_manufactured_from', 'year_manufactured_to']
 
     private _light_measure_method: string;
@@ -25,6 +25,36 @@ export default class Camera extends InventoryItem {
         }
     }
 
+    getDBVersion():object {
+        const obj = {
+            key: this.key,
+            item_type: this._item_type,
+            manufacturer_key: this.manufacturer_key,
+            brand_key: this.brand_key,
+            condition_key: this.condition_key,
+            name: this.name,
+            description: this.description,
+            work_done: this.work_done,
+            special: this.special,
+            price_purchased: this.price_purchased,
+            price_historic: this.price_historic,
+            price_current: this.price_current,
+            year_of_production: this.year_of_production,
+            year_of_purchase: this.year_of_purchase,
+            inventory_number: this.inventory_number,
+            set_key: this.set_key,
+            light_measure_method: this._light_measure_method,
+            mount_key: this._mount_key,
+            buildtype_key: this._buildtype_key,
+            media_key: this._media_key,
+            year_manufactured_from: this._year_manufactured_from,
+            year_manufactured_to: this._year_manufactured_to,
+
+
+        }
+        return obj
+    }
+
 
     get light_measure_method(): string {
         return this._light_measure_method;

src/store/classes/InventoryItem.ts

@@ -1,17 +1,17 @@
-
+import {date} from "yup";
 
 
 export default class InventoryItem {
 
-    private FIELDS = ['manufacturer_key', 'brand_key', 'condition_key',
+    private FIELDS = ['item_type', 'manufacturer_key', 'brand_key', 'condition_key',
         'name', 'description', 'work_done', 'special',
         'price_purchased', 'price_historic', 'price_current',
-        'year_of_production', 'year_of_purchase', 'inventory_number' ];
+        'year_of_production', 'year_of_purchase', 'inventory_number', 'set_key' ];
 
-    private _id: string;
+    private _key: string;
-    protected _inventory_number: string;
+    private _inventory_number: string;
 
-    protected _item_type: "camera" | "accessoire" | "lens";
+    protected _item_type: "camera" | "accessoire" | "lens" | "set";
 
     private _active: boolean;
     private _edit: boolean;
@@ -32,15 +32,20 @@ export default class InventoryItem {
     private _year_of_production: number;
     private _year_of_purchase: number;
 
-    private _set_key: string
+    private _set_key: string;
+
+    private _created: Date;
+    private _changed: Date;
 
 
 
-    constructor( id:string, name:string, values?:Object ) {
+    constructor( key:string, name:string, values?:Object ) {
-        this._id = id;
+        this._key = key;
         this._name = name;
         this._active = false;
         this._edit = false;
+        this._created = new Date();
+        this._changed = new Date();
 
         if(typeof values != "undefined") {
             for (const field  of this.FIELDS) {
@@ -49,9 +54,31 @@ export default class InventoryItem {
         }
     }
 
+    getDBVersion():object {
+        const obj = {
+            key: this._key,
+            item_type: this._item_type,
+            manufacturer_key: this._manufacturer_key,
+            brand_key: this._brand_key,
+            condition_key: this._condition_key,
+            name: this._name,
+            description: this._description,
+            work_done: this._work_done,
+            special: this._special,
+            price_purchased: this._price_purchased,
+            price_historic: this._price_historic,
+            price_current: this._price_current,
+            year_of_production: this._year_of_production,
+            year_of_purchase: this._year_of_purchase,
+            inventory_number: this._inventory_number,
+            set_key: this._set_key
+        }
+        return obj
+    }
 
-    get id(): string {
+
-        return this._id;
+    get key(): string {
+        return this._key;
     }
 
     get active(): boolean {
@@ -62,7 +89,7 @@ export default class InventoryItem {
         return this._edit;
     }
 
-    get item_type(): "camera" | "accessoire" | "lens" {
+    get item_type(): "camera" | "accessoire" | "lens" | "set" {
         return this._item_type;
     }
 
@@ -179,5 +206,22 @@ export default class InventoryItem {
     set set_key(value: string) {
         this._set_key = value;
     }
+
+
+    get inventory_number(): string {
+        return this._inventory_number;
+    }
+
+    get created(): Date {
+        return this._created;
+    }
+
+    get changed(): Date {
+        return this._changed;
+    }
+
+    set changed(value: Date) {
+        this._changed = value;
+    }
 }
 

src/store/classes/InventorySet.ts

@@ -0,0 +1,46 @@
+import InventoryItem from "@/store/classes/InventoryItem";
+
+export default class InventorySet extends InventoryItem {
+
+    private ADD_FIELDS = ['inventory_keys'];
+
+    private _inventory_keys: string[];
+
+    constructor(id:string, name:string, values?:Object) {
+        super(id, name, values);
+        this._item_type = "lens";
+
+            if(typeof values != "undefined") {
+                for (const field  of this.ADD_FIELDS) {
+                    if(field in values) this["_" + field] = values[field];
+                }
+            }
+    }
+    getDBVersion():object {
+        const obj = {
+            key: this.key,
+            item_type: this._item_type,
+            manufacturer_key: this.manufacturer_key,
+            brand_key: this.brand_key,
+            condition_key: this.condition_key,
+            name: this.name,
+            description: this.description,
+            work_done: this.work_done,
+            special: this.special,
+            price_purchased: this.price_purchased,
+            price_historic: this.price_historic,
+            price_current: this.price_current,
+            year_of_production: this.year_of_production,
+            year_of_purchase: this.year_of_purchase,
+            inventory_number: this.inventory_number,
+            set_key: this.set_key,
+            inventory_keys: this._inventory_keys
+        }
+        return obj
+    }
+
+    get inventory_keys(): string[] {
+        return this._inventory_keys;
+    }
+}
+

src/store/classes/Lens.ts

@@ -2,13 +2,14 @@ import InventoryItem from "@/store/classes/InventoryItem";
 
 export default class Lens extends InventoryItem {
 
-    private ADD_FIELDS = ['mount_key', 'autofocus', 'aperture_max', 'focal_length_min', 'focal_length_max' ];
+    private ADD_FIELDS = ['mount_key', 'filtermount_key', 'autofocus', 'aperture_max', 'focal_length_min', 'focal_length_max' ];
 
     private _mount_key: string;
     private _autofocus: boolean;
     private _aperture_max: number;
     private _focal_length_min: number;
     private _focal_length_max: number;
+    private _filtermount_key: string;
 
     constructor(id:string, name:string, values?:Object) {
         super(id, name, values);
@@ -20,7 +21,34 @@ export default class Lens extends InventoryItem {
                 }
             }
     }
+    getDBVersion():object {
+        const obj = {
+            key: this.key,
+            item_type: this._item_type,
+            manufacturer_key: this.manufacturer_key,
+            brand_key: this.brand_key,
+            condition_key: this.condition_key,
+            name: this.name,
+            description: this.description,
+            work_done: this.work_done,
+            special: this.special,
+            price_purchased: this.price_purchased,
+            price_historic: this.price_historic,
+            price_current: this.price_current,
+            year_of_production: this.year_of_production,
+            year_of_purchase: this.year_of_purchase,
+            inventory_number: this.inventory_number,
+            set_key: this.set_key,
+            mount_key: this._mount_key,
+            filtermount_key: this._filtermount_key,
+            autofocus: this._autofocus,
+            aperture_max: this._aperture_max,
+            focal_length_min: this._focal_length_min,
+            focal_length_max: this._focal_length_max,
 
+        }
+        return obj
+    }
 
     get mount_key(): string {
         return this._mount_key;
@@ -41,6 +69,11 @@ export default class Lens extends InventoryItem {
     get focal_length_max(): number {
         return this._focal_length_max;
     }
+
+
+    get filtermount_key(): string {
+        return this._filtermount_key;
+    }
 }
 
 

src/store/classes/Set.ts

@@ -1,45 +0,0 @@
-import InventoryItem from "@/store/classes/InventoryItem";
-
-export default class Set extends InventoryItem {
-
-    private ADD_FIELDS = ['mount_key', 'autofocus', 'aperture_max', 'focal_length_min', 'focal_length_max' ];
-
-    private _mount_key: string;
-    private _autofocus: boolean;
-    private _aperture_max: number;
-    private _focal_length_min: number;
-    private _focal_length_max: number;
-
-    constructor(id:string, name:string, values?:Object) {
-        super(id, name, values);
-        this._item_type = "lens";
-
-            if(typeof values != "undefined") {
-                for (const field  of this.ADD_FIELDS) {
-                    if(field in values) this["_" + field] = values[field];
-                }
-            }
-    }
-
-
-    get mount_key(): string {
-        return this._mount_key;
-    }
-
-    get autofocus(): boolean {
-        return this._autofocus;
-    }
-
-    get aperture_max(): number {
-        return this._aperture_max;
-    }
-
-    get focal_length_min(): number {
-        return this._focal_length_min;
-    }
-
-    get focal_length_max(): number {
-        return this._focal_length_max;
-    }
-}
-

src/store/interfaces/NameKeyStore.ts

@@ -0,0 +1,6 @@
+interface NameKeyStore {
+    name:string;
+    id:string;
+    identifier:string;
+    type:( "nameKey" | "filestore" | "object")
+}

src/store/modules/inventory/index.js

@@ -131,7 +131,7 @@ const actions = {
             "mounts",
             "sets"
         ];
-        db.getDb();
+        db.getDb(stores);
         const promises = [];
         const seedVersion = localStorage.getItem("SEED_VERSION") || 0;
         if (payload.seed && seedVersion < SEED_VERSION) {

src/store/modules/inventory/index.ts

@@ -6,22 +6,23 @@ import {SEED_VERSION} from "@/seed";
 import NameKey from "@/store/classes/NameKey";
 import InventoryItem from "@/store/classes/InventoryItem";
 import Camera from "@/store/classes/Camera";
+import Lens from "@/store/classes/Lens";
+import InventorySet from "@/store/classes/InventorySet";
 
 
 const db = new BilliDB("billibox", 3);
 
 
-const stores = [
+const stores:NameKeyStore[] = [
-    {id: "inventory", name: 'Inventar', type: 'object'},
+    {id: "inventory", identifier:"key", name: 'Inventar', type: 'object'},
-
+    {id: "brands", identifier:"key", name: "Marken", type: "nameKey"},
-    {id: "brands", name: "Marken", type: "nameKey"},
+    {id: "conditions", identifier:"key", name: "Zustände", type: "nameKey"},
-    {id: "conditions", name: "Zustände", type: "nameKey"},
+    {id: "buildtypes", identifier:"key", name: "Bauformen", type: "nameKey"},
-    {id: "buildtypes", name: "Bauformen", type: "nameKey"},
+    {id: "manufacturers", identifier:"key", name: "Hersteller", type: "nameKey"},
-    {id: "manufacturers", name: "Hersteller", type: "nameKey"},
+    {id: "medias", identifier:"key", name: "Medien", type: "nameKey"},
-    {id: "medias", name: "Medien", type: "nameKey"},
+    {id: "mounts", identifier:"key", name: "Anschlüsse", type: "nameKey"},
-    {id: "mounts", name: "Anschlüsse", type: "nameKey"},
+    {id: "filtermounts", identifier:"key", name: "Filteranschlüsse", type: "nameKey"},
-    {id: "filtermounts", name: "Filteranschlüsse", type: "nameKey"},
+    {id: "assets", identifier:"key", name: "Dateien", type: "filestore"},
-    {id: "assets", name: "Dateien", type: "filestore"},
 
 ];
 
@@ -31,6 +32,7 @@ const state = {
     inventory: [],
     assets:[],
     brands: [],
+    sets: [],
     manufacturers: [],
     conditions: [],
     medias: [],
@@ -46,48 +48,52 @@ const getters = {
     },
 
     stores: (state?:any) => stores,
-    store: (state:any) => (id: any) => {
+    store: (state:any) => (key: any) => {
-        console.log("Query store:", id);
+        console.log("Query store:", key);
-        return state[id]
+        return state[key]
     },
 
     cameras: (state: any) => {
        return state.inventory.find((item:InventoryItem) => item.item_type ==="camera");
     },
-    camera: (state: any) => (id: any) => state.inventory.find((item: any) => item.item_type==="camera" &&item.id === id),
+    camera: (state: any) => (key: any) => state.inventory.find((item: any) => item.item_type==="camera" &&item.key === key),
     activeItem: (state: any) => state.inventory.find((item:any) => item.active ),
 
     lenses: (state: any) => {
         return state.inventory.find((item:InventoryItem) => item.item_type ==="lens");
     },
-    lens: (state: any) => (id: any) => state.inventory.find((item: any) => item.item_type==="lens" &&item.id === id),
+    lens: (state: any) => (key: any) => state.inventory.find((item: any) => item.item_type==="lens" &&item.key === key),
 
     accessories: (state: any) => {
         return state.inventory.find((item:InventoryItem) => item.item_type ==="accessoire");
     },
-    accessoire: (state: any) => (id: any) => state.inventory.find((item: any) => item.item_type==="accessoire" &&item.id === id),
+    accessoire: (state: any) => (key: any) => state.inventory.find((item: any) => item.item_type==="accessoire" &&item.key === key),
 
     brands: (state: any) => state.brands,
-    brand: (state: any) => (id: any) => state.brands.find((brand: any) => brand.key === id),
+    brand: (state: any) => (key: any) => state.brands.find((brand: any) => brand.key === key),
 
     manufacturers: (state: any) => state.manufacturers,
-    manufacturer: (state: any) => (id: any) => state.manufacturers.find((item: any) => item.key === id),
+    manufacturer: (state: any) => (key: any) => state.manufacturers.find((item: any) => item.key === key),
 
     mounts: (state: any) => state.mounts,
-    mount: (state: any) => (id: any) => state.mounts.find((item: any) => item.key === id),
+    mount: (state: any) => (key: any) => state.mounts.find((item: any) => item.key === key),
 
     filtermounts: (state: any) => state.filtermounts,
-    filtermount: (state: any) => (id: any) => state.filtermounts.find((item: any) => item.key === id),
+    filtermount: (state: any) => (key: any) => state.filtermounts.find((item: any) => item.key === key),
 
 
     conditions: (state: any) => state.conditions,
-    condition: (state: any) => (id: any) => state.conditions.find((condition: any) => condition.key === id),
+    condition: (state: any) => (key: any) => state.conditions.find((condition: any) => condition.key === key),
+
+    sets: (state: any) => state.inventory.find((item:InventoryItem) => item.item_type === "set" ),
+    set: (state: any) => (key: any) => state.inventory.find((item: any) => item.key === key),
+
 
     medias: (state: any) => state.medias,
-    media: (state: any) => (id: any) => state.medias.find((media: any) => media.key === id),
+    media: (state: any) => (key: any) => state.medias.find((media: any) => media.key === key),
 
     buildtypes: (state: any) => state.buildtypes,
-    buildtype: (state: any) => (id: any) => state.buildtypes.find((buildtype: any) => buildtype.key === id),
+    buildtype: (state: any) => (key: any) => state.buildtypes.find((buildtype: any) => buildtype.key === key),
 
     isInitialized: (state:any ) => state.isInitialized,
 
@@ -110,17 +116,28 @@ const mutations = {
     setInventory(state:any, payload:any) {
         console.log("mutation.setInventory");
         payload.map((item:InventoryItem) => {
-            state.inventory.push({
+            let newInventoryItem:InventoryItem;
-                ...item,
+
-                edit: false,
+            switch(item.item_type) {
-                active: false
+                case "set":
-            })
+                    newInventoryItem = new InventorySet(item.key, item.name, item);
+                    break;
+                case "camera":
+                    newInventoryItem = new Camera(item.key, item.name, item);
+                    break;
+                case "lens":
+                    newInventoryItem = new Lens(item.key, item.name, item);
+                    break;
+                default:
+                    newInventoryItem =  new InventoryItem(item.key, item.name, item);
+            }
+            state.inventory.push(newInventoryItem)
         })
         console.log("STORE", state.inventory.length);
     },
 
     storeCamera(sate:any, payload:any) {
-        const objCamera = state.inventory.find((camera:Camera) => camera.id === payload.id);
+        const objCamera = state.inventory.find((camera:Camera) => camera.key === payload.key);
         if(objCamera) {
             payload.edit =false;
             objCamera.name = payload.name;
@@ -128,7 +145,7 @@ const mutations = {
             payload.edit = false;
             state.inventory.push(payload);
         }
-        return payload.id;
+        return payload.key;
     },
 
     storeNameKey(state:any, payload:any) {
@@ -145,17 +162,17 @@ const mutations = {
     },
 
 
-    setItemActiveState(state:any, payload:any) {
+        setItemActiveState(state:any, payload:any) {
         console.log("mutation.setItemActiveState");
         state.inventory.map((item:InventoryItem) => item.active= false);
-        const objItem = state.inventory.find((itemId:InventoryItem) => itemId.id === payload.id);
+        const objItem = state.inventory.find((itemId:InventoryItem) => itemId.key === payload.key);
         objItem.active = payload.active;
         console.log("Result of mutation", objItem);
     },
 
     setItemEditState(state:any, payload:any) {
         state.inventory.map((item:InventoryItem) => item.edit= false);
-        const objItem = state.inventory.find((camera:any) => camera.id === payload.id);
+        const objItem = state.inventory.find((camera:any) => camera.key === payload.key);
         objItem.edit = payload.edit;
     },
 
@@ -166,7 +183,23 @@ const mutations = {
 
     setInitialized(state:any, payload:boolean) {
         state.isInitialized = payload;
+    },
+
+    storeInventoryDescription(state:any, payload:any) {
+        const objItem = <InventoryItem>state.inventory.find((item:InventoryItem) => item.key === payload.key);
+        objItem.description = payload.description;
+        objItem.changed = new Date();
+
+        db.saveItem(objItem , "inventory").then( (res) => {
+            console.log("DB-Save resolved", res )}
+        ).catch((e)=> console.log(e));
+
+
     }
+
+
+
+
 };
 const actions = {
 
@@ -212,38 +245,43 @@ const actions = {
     },
 
     setItemActiveState(context:ActionContext<any, any>, payload:any) {
-        context.commit("setItemActiveState", {id: payload.id, active:payload.active});
+        context.commit("setItemActiveState", {key: payload.key, active:payload.active});
 
     },
 
     setItemEditState(context:ActionContext<any, any>, payload:any) {
         console.log("action.setItemEditState", payload)
-        context.commit("setItemEditState", {id: payload.id, edit:payload.edit});
+        context.commit("setItemEditState", {key: payload.key, edit:payload.edit});
 
     },
 
     storeCamera(context:ActionContext<any, any>, payload:any) {
        // console.log("action.storeCamera", payload)
 
-        if(!payload.id) payload.id = uuidv4();
+        if(!payload.key) payload.key = uuidv4();
-        //console.log(" ... with id ", payload.id);
+        //console.log(" ... with key ", payload.key);
 
         //console.log("Try to save to indexDB");
         db.saveItem(payload , "inventory").then( (res) => {
             console.log("DB-Save resolved", res )}
-        )
+        ).catch((e)=> console.log(e));
 
 
         context.commit("storeCamera", payload);
-        context.commit("setCameraActiveState", {cameraId:payload.id, active:true})
+        context.commit("setCameraActiveState", {cameraId:payload.key, active:true})
 
     },
 
+    storeInventoryDescription(context:ActionContext<any, any>, payload:any) {
+        context.commit("storeInventoryDescription", payload);
+    },
+
+
     loadDataFromLocalDB(context:ActionContext<any, any>) {
         console.log("action.loadDataFromLocalDB")
         const storeActions = [];
         for (const store of stores) {
-            if(store.type !="nameKey") {
+            if(store.type =="object") {
                 storeActions.push(context.dispatch("fetchInventory"));
             }
             else {
@@ -258,7 +296,7 @@ const actions = {
 
     initialize(context:ActionContext<any, any>, payload) {
 
-        db.getDb().then( () => {
+        db.initDb(stores).then( () => {
             const promises = [];
             const seedVersion = localStorage.getItem("SEED_VERSION") || 0;
             if(payload.seed && seedVersion < SEED_VERSION ) {