anpassung Design Admin-panel

package-lock.json

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "billibox-vue",
       "version": "0.1.0",
       "dependencies": {
         "@dsb-norge/vue-keycloak-js": "*",
@@ -14242,6 +14243,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",
@@ -14254,6 +14256,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"
       },
@@ -15929,7 +15932,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",
@@ -18408,7 +18413,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",
@@ -21086,7 +21093,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",
@@ -21172,7 +21181,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

@@ -107,5 +107,17 @@ export default class App extends Vue {}
   left: -50px;
 }
 
+.billi-icon-filter {
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  padding: 1em;
+}
+.billi-filter-grid {
+  display: grid;
+  margin-top: 0.5rem;
+  grid-template-columns: repeat(4, 1fr);
+}
+
 
 </style>

src/components/camera/InventoryList.vue

@@ -1,10 +1,9 @@
 <template>
-  <div class="container ">
     <div class="row">
       Wir haben {{ items.length }} in der Liste
       <input type="text" name="searchstring" v-model="searchText">
     </div>
-    <div class="row mt-3">
+    <div class="billi-filter-grid">
       <FilterButtonItemType
           itemType="camera"
           typeName="Kamera"
@@ -47,7 +46,7 @@
       ></component>
 
     </div>
-  </div>
+
 </template>
 
 <script>

src/components/camera/parts/FilterButtonItemType.vue

@@ -1,17 +1,15 @@
 <template>
-  <div class="col-3">
+
-    <div class="card">
+  <div :title="typeName">
-<!--      <div class="card-header text-black" style="font-size: 10px">{{typeName}}</div>-->
+    <font-awesome-icon  class="billi-icon-filter" :class="cardStyle" :icon="getIconName(itemType)" color="#eee" size="xxl"/>
-      <div class="card-body " :class="cardStyle"
-           :title="typeName">
-        <i class="fa-solid fa-2x text-white" :class="this.icon"></i>
-      </div>
-    </div>
   </div>
 
+
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
   name: "FilterButtonItemType",
   props: {
@@ -32,7 +30,9 @@ export default {
       required: true
     }
   },
+
   computed: {
+    ...mapGetters(["activeItem","getIconName"]),
     cardStyle() {
       console.log(this.itemType, this.active);
       if(!this.active) return ["billi-secondary"]

src/components/camera/parts/StoreSelector.vue

@@ -1,22 +1,24 @@
 <template>
 
-  <div class="card mt-2 ">
+  <section class="billi-store-selector" :class="activeClass">
-    <div class="card-header" :class="activeClass">
+    <h3> {{this.store.name}} </h3>
-      <div class="row">
+    <font-awesome-icon
-     <div class="col-11"> {{this.store.name}}</div>
+        v-if="!add"
-      <div class="col-1 bg-secondary" @click="toggleNew">+</div>
+        @click="toggleNew"
-      </div>
+        class="billi-store-add billi-secondary"  icon="plus"/>
-    </div>
+    <font-awesome-icon
-
+        v-if="add"
-    <div class="card-body" v-if="add && isActive && this.store.type === 'filestore'">
+        @click="toggleNew"
-      <FileUpload></FileUpload>
+        class="billi-store-add billi-close billi-secondary"  icon="xmark"/>
-
-    </div>
 
 
-    <div class="card-body" v-if="add && isActive">
+    <transition
-     <p> Neuen Eintrag hinzufügen</p>
+        enter-active-class="animate__animated animate__fadeInDown"
-
+        leave-active-class="animate__animated animate__fadeOutUp"
+        mode="out-in"
+        appear
+    >
+      <section class="billi-store-edit" v-if="add && isActive">
       <Form @submit="submitData" :validation-schema="schema" v-slot="{ errors }">
         <div class="form-row">
           <div class="form-group col-md-8 offset-2">
@@ -70,7 +72,7 @@
           <div class="form-group col-md-8 offset-2">
             <div class="d-grid">
               <button class="btn bg-vue">
-                <span v-if="!isLoading">Speichern</span>
+                <span v-if="!isLoading">Hinzufügen</span>
                 <span v-else class="spinner-border spinner-border-sm"></span>
               </button>
             </div>
@@ -78,10 +80,14 @@
         </div>
       </Form>
 
-    </div>
+    </section>
+    </transition>
 
-  </div>
+    <section class="billi-store-edit" v-if="add && isActive && this.store.type === 'filestore'">
+      <FileUpload></FileUpload>
+    </section>
 
+  </section>
 
 </template>
 
@@ -131,7 +137,7 @@ export default {
   computed: {
     activeClass() {
       if(this.activeStore === this.store.id) return ["billi-primary"];
-      else return ["billi-secondary"]
+      else return ["bg-white"]
     },
     isActive() {
       return this.activeStore === this.store.id;
@@ -143,6 +149,11 @@ export default {
     },
   submitData(values) {
     console.log(values);
+
+    this.$store.dispatch("insertNameKeyObject", {
+        storeType: this.store.id,
+        item: values
+      })
   }
 
   }
@@ -151,4 +162,47 @@ export default {
 
 <style scoped>
 
+.billi-store-selector {
+  margin-bottom: 1rem;
+  border-radius: 1rem;
+  min-height: 4rem;
+  display:grid;
+  grid-template-columns: auto 4rem;
+  grid-template-rows: 4rem auto;
+  grid-template-areas:
+  "label icon"
+  "editbox editbox"
+}
+.billi-store-selector h3 {
+  margin-left: 1rem;
+  font-size: 1.2rem;
+  align-self: center;
+  grid-area: label
+}
+.billi-store-add {
+  grid-area: icon;
+  padding: 0.5rem;
+  border-radius: 0rem 1rem 1rem 0rem;
+  align-self: center;
+  justify-self: center;
+  height: 3rem;
+  width: 3rem;
+  color: white;
+}
+
+.billi-close {
+  border-radius: 0rem 1rem 0rem 0rem;
+
+}
+
+
+.billi-store-edit {
+  grid-area: editbox;
+  background-color: white;
+  padding-bottom: 2rem;
+  border-radius: 0rem 0rem 1rem 1rem;
+}
+
+
+
 </style>

src/main.ts

@@ -14,6 +14,8 @@ import { faUserSecret,faTelescope,
     faBoxFull,
     faTag,
     faToggleOff,
+    faPlus,
+    faXmark,
     faToggleOn } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
@@ -29,6 +31,8 @@ library.add(faBoxFull);
 library.add(faTag);
 library.add(faToggleOff);
 library.add(faToggleOn);
+library.add(faPlus);
+library.add(faXmark);
 
 const app =
 createApp(App);

src/store/modules/inventory/index.ts

@@ -138,6 +138,13 @@ const mutations = {
         objNK.description = payload.item.description;
     },
 
+    insertNameKey(state:any, payload:{storeType:string, item:{key:string, name:string, description?:string}}) {
+        const objNK:NameKey = state[payload.storeType].find( (item) => item.key === payload.item.key);
+        if(objNK) throw new Error("Key already exists");
+        state[payload.storeType].push(payload.item);
+    },
+
+
     setItemActiveState(state:any, payload:any) {
         console.log("mutation.setItemActiveState");
         state.inventory.map((item:InventoryItem) => item.active= false);
@@ -163,17 +170,30 @@ const mutations = {
 };
 const actions = {
 
-    storeNameKeyObject(context:ActionContext<any, any>, payload) {
+    storeNameKeyObject(context:ActionContext<any, any>, payload:{storeType:string, item:object}) {
-        console.log("actions.storeNameKeyObject");
+        console.log("actions.storeNameKeyObject", payload);
 
         db.saveItem(payload.item, payload.storeType).then((res) => {
             console.log("Item stored in Database")
         })
 
-        context.commit("storeNameKey", payload);
+        context.commit("storeNameKey", payload.item);
 
     },
 
+
+    insertNameKeyObject(context:ActionContext<any, any>, payload:{storeType:string, item:NameKey}) {
+        console.log("actions.insertNameKeyObject", payload);
+
+        db.saveItem(payload.item, payload.storeType).then((res) => {
+            console.log("Item stored in Database")
+        })
+
+        context.commit("insertNameKey", payload);
+
+    },
+
+
     fetchNameKeys(context:ActionContext<any, any>, payload) {
         const field =payload.namekey_type;
         db.getItems(field).then((items) => {