refactor edit dialog

src/components/EditItem.vue

@@ -1,100 +1,46 @@
 <template>
     <div>
-      <img
-        v-if="!capturing"
-        class="img-fluid rounded mx-auto d-block mb-3"
-        :src="item.dataImage || `https://c3lf.de/api/1/thumbs/${item.file}`"
-        alt="Image not available."
-      />
-      <video
-        v-if="capturing"
-        ref="video"
-        class="img-fluid rounded mx-auto d-block mb-3"
-      >
-        Video stream not available.
-      </video>
-      <canvas ref="canvas" class="img-fluid d-none"/>
-      <div class="row" v-if="capturing && !streaming">
-          <div class="spinner-grow text-danger mx-auto" role="status">
-              <span class="sr-only">Loading...</span>
-          </div>
-      </div>
-      <div class="row m-auto">
-          <button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
-            <font-awesome-icon icon="camera"/>
-          </button>
-          <div v-if="capturing" class="btn-group my-2 ml-auto">
-              <button class="btn btn-success" @click="captureVideoImage()">
-                  <font-awesome-icon icon="camera"/>&nbsp;Capture
-              </button>
-              <button
-                  class="btn"
-                  :class="(item.file || item.dataImage) ? 'btn-danger' : 'btn-secondary disabled'"
-                  @click="(item.file || item.dataImage) && closeStream()"
-              >
-                  <font-awesome-icon icon="stop"/>&nbsp;Abort
-              </button>
-          </div>
-      </div>
         <h6>Editing Item <span class="badge badge-secondary">#{{ item.item_uid }}</span></h6>
-      <form>
-          <div class="form-group" v-for="field in ['description', 'box']" :key="field">
-              <label>{{ field }}</label>
-              <input type="text" class="form-control" v-model="item[field]">
-          </div>
-      </form>
+        <InputPhoto
+            :model="item"
+            field="file"
+            :on-capture="storeImage"
+        />
+        <InputString
+            label="cat"
+            :model="item"
+            field="description"
+            :validation-fn="str => str.length > 0"
+        />
+        <InputCombo
+            label="dog"
+            :model="item"
+            field="box"
+            :options="boxes"
+        />
     </div>
 </template>
 
 <script>
+import InputString from './inputs/InputString';
+import InputCombo from './inputs/InputCombo';
+import { mapGetters } from 'vuex';
+import InputPhoto from './inputs/InputPhoto';
+
 export default {
-  name: 'Add',
+  name: 'EditItem',
+  components: {InputPhoto, InputCombo, InputString },
   props: ['item'],
-  data: () => ({
-    capturing: false,
-    streaming: false,
-    stream: undefined
-  }),
+  computed: {
+    ...mapGetters(['getBoxes']),
+    boxes({ getBoxes }) {
+      return getBoxes.map(box => box.name);
+    }
+  },
   methods: {
-    openStream() {
-      if (!this.capturing) {
-        this.capturing = true;
-        this.streaming = false;
-        navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(stream => {
-          this.stream = stream;
-          const { video } = this.$refs;
-          video.srcObject = stream;
-          video.play();
-          video.addEventListener('canplay', () => {
-            this.streaming = true;
-          }, false);
-        }).catch(err => console.log(err)); // todo: toast error
+    storeImage(image) {
+      this.item.dataImage = image;
     }
-    },
-    captureVideoImage() {
-      const { video, canvas } = this.$refs;
-      const context = canvas.getContext('2d');
-      const { videoWidth, videoHeight } = video;
-      canvas.width = videoWidth;
-      canvas.height = videoHeight;
-      context.drawImage(video, 0, 0, videoWidth, videoHeight);
-      this.item.dataImage = canvas.toDataURL('image/png');
-      this.closeStream();
-    },
-    closeStream() {
-      if (this.capturing) {
-        this.stream.getTracks().forEach(s => s.stop());
-        this.capturing = false;
-        this.streaming = false;
-      }
-    }
-  },
-  mounted() {
-    if (!this.item.file)
-      this.openStream();
-  },
-  beforeDestroy() {
-    this.closeStream();
   }
 };
 </script>

src/components/Modal.vue

@@ -65,8 +65,8 @@ export default {
     }
 
     /* Hacky Fix, for this Issue: https://hannover.ccc.de/gitlab/c3lf/lffrontend/issues/26 */
-    .modal-body {
+    /*.modal-body {
       max-height: calc(100vh - 200px);
       overflow-y: auto;
-    }
+    }*/
 </style>

src/components/inputs/Addon.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="input-group-append">
+      <span
+          class="input-group-text"
+          data-toggle="tooltip"
+          data-placement="top"
+          :title="type"
+      >{{ type[0] }}</span>
+      <button
+          type="button"
+          class="btn"
+          :class="'btn-' + color"
+          data-toggle="tooltip"
+          data-placement="top"
+          :title="tooltip"
+      >
+          <font-awesome-icon :icon="icon"/>
+      </button>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery';
+import 'bootstrap/js/dist/tooltip';
+
+export default {
+  name: 'Addon',
+  props: [ 'type', 'isValid' ],
+  mounted() {
+    $('[data-toggle="tooltip"]').tooltip();
+  },
+  computed: {
+    icon() {
+      if (this.isValid == undefined) return 'pen';
+      if (this.isValid == false) return 'times';
+      return 'check';
+    },
+    color() {
+      if (this.isValid == undefined) return 'info';
+      if (this.isValid == false) return 'danger';
+      return 'success';
+    },
+    tooltip() {
+      if (this.isValid == undefined) return 'no data validation';
+      if (this.isValid == false) return 'data invalid';
+      return 'data valid';
+    }
+  }
+};
+</script>

src/components/inputs/InputCombo.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="form-group">
+        <label :for="label">{{ label }}</label>
+        <div class="input-group">
+            <div class="input-group-prepend">
+                <button
+                    class="btn btn-outline-secondary dropdown-toggle"
+                    type="button"
+                    data-toggle="dropdown"
+                >Search</button>
+                <div class="dropdown-menu">
+                    <a
+                        v-for="option in options"
+                        :key="option"
+                        class="dropdown-item"
+                        @click="setInternalValue(option)"
+                    >
+                        {{ option }}
+                    </a>
+                </div>
+                <button
+                    class="btn"
+                    :class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
+                    @click="addOption()"
+                >
+                    <font-awesome-icon icon="plus"/>
+                </button>
+            </div>
+            <input type="text" class="form-control" :id="label" v-model="internalValue">
+            <Addon type="Combo Box" :is-valid="isValid"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import Addon from './Addon';
+
+export default {
+  name: 'InputCombo',
+  components: {Addon},
+  props: [ 'label', 'model', 'field', 'options', 'onOptionAdd' ],
+  data: ({ model, field }) => ({
+    internalValue: model[field],
+    addingOption: false
+  }),
+  computed: {
+    isValid: ({ internalValue, options }) => options.includes(internalValue)
+  },
+  watch: {
+    internalValue(newValue, oldValue) {
+      console.log(oldValue, newValue, this.isValid);
+      if (this.isValid)
+        this.model[this.field] = newValue;
+    }
+  },
+  methods: {
+    setInternalValue(value) {
+      this.internalValue = value;
+    },
+    addOption() {
+      this.onOptionAdd(this.internalValue);
+    }
+  }
+};
+</script>

src/components/inputs/InputPhoto.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <img
+            v-if="!capturing"
+            class="img-fluid rounded mx-auto d-block mb-3"
+            :src="dataImage || `https://c3lf.de/api/1/thumbs/${model[field]}`"
+            alt="Image not available."
+        />
+        <video
+            v-if="capturing"
+            ref="video"
+            class="img-fluid rounded mx-auto d-block mb-3"
+        >
+            Video stream not available.
+        </video>
+        <canvas ref="canvas" class="img-fluid d-none"/>
+        <div class="row" v-if="capturing && !streaming">
+            <div class="spinner-grow text-danger mx-auto" role="status">
+                <span class="sr-only">Loading...</span>
+            </div>
+        </div>
+        <div class="row m-auto">
+            <button v-if="!capturing" class="btn my-2 ml-auto btn-secondary" @click="openStream()">
+                <font-awesome-icon icon="camera"/>
+            </button>
+            <div v-if="capturing" class="btn-group my-2 ml-auto">
+                <button class="btn btn-success" @click="captureVideoImage()">
+                    <font-awesome-icon icon="camera"/>&nbsp;Capture
+                </button>
+                <button
+                    class="btn"
+                    :class="(model[field] || dataImage) ? 'btn-danger' : 'btn-secondary disabled'"
+                    @click="(model[field] || dataImage) && closeStream()"
+                >
+                    <font-awesome-icon icon="stop"/>&nbsp;Abort
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'InputPhoto',
+  props: [ 'model', 'field', 'onCapture' ],
+  data: () => ({
+    capturing: false,
+    streaming: false,
+    stream: undefined,
+    dataImage: undefined
+  }),
+  methods: {
+    openStream() {
+      if (!this.capturing) {
+        this.capturing = true;
+        this.streaming = false;
+        navigator.mediaDevices.getUserMedia({video: true, audio: false}).then(stream => {
+          this.stream = stream;
+          const { video } = this.$refs;
+          video.srcObject = stream;
+          video.play();
+          video.addEventListener('canplay', () => {
+            this.streaming = true;
+          }, false);
+        }).catch(err => console.log(err)); // todo: toast error
+      }
+    },
+    captureVideoImage() {
+      const { video, canvas } = this.$refs;
+      const context = canvas.getContext('2d');
+      const { videoWidth, videoHeight } = video;
+      canvas.width = videoWidth;
+      canvas.height = videoHeight;
+      context.drawImage(video, 0, 0, videoWidth, videoHeight);
+      this.dataImage = canvas.toDataURL('image/png');
+      this.onCapture(this.dataImage);
+      this.closeStream();
+    },
+    closeStream() {
+      if (this.capturing) {
+        this.stream.getTracks().forEach(s => s.stop());
+        this.capturing = false;
+        this.streaming = false;
+      }
+    }
+  },
+  mounted() {
+    if (!this.model[this.field])
+      this.openStream();
+  },
+  beforeDestroy() {
+    this.closeStream();
+  }
+};
+</script>

src/components/inputs/InputString.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="form-group">
+        <label :for="label">{{ label }}</label>
+        <div class="input-group">
+            <input type="text" class="form-control" :id="label" v-model="model[field]">
+            <Addon v-if="!hasValidationFn" type="String"/>
+            <Addon v-if="hasValidationFn" type="String" :is-valid="isValid"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import Addon from './Addon';
+
+export default {
+  name: 'InputString',
+  components: { Addon },
+  props: [ 'label', 'model', 'field', 'validationFn' ],
+  computed: {
+    hasValidationFn({ validationFn }) {
+      return validationFn != undefined;
+    },
+    isValid({ model, field, validationFn, hasValidationFn }) {
+      if (!hasValidationFn) return true;
+      return validationFn(model[field]);
+    }
+  }
+};
+</script>

src/main.js

@@ -11,10 +11,10 @@ import 'bootstrap/dist/js/bootstrap.min.js';
 
 // fontawesome
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop);
+library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 

src/store/index.js

@@ -27,6 +27,7 @@ const store = new Vuex.Store({
     getEventSlug: state => state.route && state.route.params.event? state.route.params.event : state.events.length ? state.events[0].slug : '36C3',
     getActiveView: state => state.route.name || 'items',
     getFilters: state => state.route.query,
+    getBoxes: state => state.loadedBoxes
   },
   mutations: {
     replaceEvents(state, events) {