anpassung Design Admin-panel

2022-03-31 12:55:03 +02:00 · 2022-03-31 12:55:03 +02:00 · 1aadad6e45
parent f09870a42e
commit 1aadad6e45
7 changed files with 137 additions and 37 deletions
--- a/package-lock.json
+++ b/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",
--- a/src/App.vue
+++ b/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>
--- a/src/components/camera/InventoryList.vue
+++ b/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>
--- a/src/components/camera/parts/FilterButtonItemType.vue
+++ b/src/components/camera/parts/FilterButtonItemType.vue
@ -1,17 +1,15 @@
 <template>
-  <div class="col-3">
-    <div class="card">
-<!--      <div class="card-header text-black" style="font-size: 10px">{{typeName}}</div>-->
-      <div class="card-body " :class="cardStyle"
-           :title="typeName">
-        <i class="fa-solid fa-2x text-white" :class="this.icon"></i>
-      </div>
-    </div>
+
+  <div :title="typeName">
+    <font-awesome-icon  class="billi-icon-filter" :class="cardStyle" :icon="getIconName(itemType)" color="#eee" size="xxl"/>
  </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"]
--- a/src/components/camera/parts/StoreSelector.vue
+++ b/src/components/camera/parts/StoreSelector.vue
@ -1,22 +1,24 @@
 <template>

-  <div class="card mt-2 ">
-    <div class="card-header" :class="activeClass">
-      <div class="row">
-     <div class="col-11"> {{this.store.name}}</div>
-      <div class="col-1 bg-secondary" @click="toggleNew">+</div>
-      </div>
-    </div>
-
-    <div class="card-body" v-if="add && isActive && this.store.type === 'filestore'">
-      <FileUpload></FileUpload>
-
-    </div>
+  <section class="billi-store-selector" :class="activeClass">
+    <h3> {{this.store.name}} </h3>
+    <font-awesome-icon
+        v-if="!add"
+        @click="toggleNew"
+        class="billi-store-add billi-secondary"  icon="plus"/>
+    <font-awesome-icon
+        v-if="add"
+        @click="toggleNew"
+        class="billi-store-add billi-close billi-secondary"  icon="xmark"/>


-    <div class="card-body" v-if="add && isActive">
-     <p> Neuen Eintrag hinzufügen</p>
-
+    <transition
+        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>
--- a/src/main.ts
+++ b/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);
--- a/src/store/modules/inventory/index.ts
+++ b/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) {
-        console.log("actions.storeNameKeyObject");
+    storeNameKeyObject(context:ActionContext<any, any>, payload:{storeType:string, item:object}) {
+        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) => {