fix container selection in AddItemModal.vue

web/src/components/AddItemModal.vue

@@ -2,7 +2,29 @@
     <div>
         <Modal v-if="isModal" title="Add Item" @close="$emit('close')">
             <template #body>
-                <EditItem :item="item"/>
+                <div>
+                    <InputPhoto
+                        :model="item"
+                        field="file"
+                        :on-capture="storeImage"
+                    />
+                    <InputString
+                        label="description"
+                        :model="item"
+                        field="description"
+                        :validation-fn="str => str && str.length > 0"
+                    />
+                    <div class="form-group">
+                        <label for="box">box</label>
+                        <InputCombo
+                            label="box"
+                            :model="item"
+                            nameKey="box"
+                            uniqueKey="cid"
+                            :options="boxes"
+                        />
+                    </div>
+                </div>
             </template>
             <template #buttons>
                 <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
@@ -13,33 +35,40 @@
 </template>
 
 <script>
+import {mapActions, mapGetters, mapState} from "vuex";
 import Modal from '@/components/Modal';
-import EditItem from '@/components/EditItem';
-import {mapActions, mapState} from "vuex";
+import InputCombo from "@/components/inputs/InputCombo.vue";
+import InputPhoto from "@/components/inputs/InputPhoto.vue";
+import InputString from "@/components/inputs/InputString.vue";
 
 export default {
     name: 'AddItemModal',
-    components: {Modal, EditItem},
+    components: {InputString, InputPhoto, InputCombo, Modal},
     props: ['isModal'],
     data: () => ({
         item: {}
     }),
     computed: {
-        ...mapState(['lastUsed'])
+        ...mapState(['lastUsed']),
+        ...mapGetters(['getBoxes']),
+        boxes({getBoxes}) {
+            return getBoxes.map(obj => ({cid: obj.id, box: obj.name}));
+        }
     },
     methods: {
         ...mapActions(['postItem', 'loadBoxes', 'scheduleAfterInit']),
-        saveNewItem() {
-            this.postItem(this.item).then(() => {
+        async saveNewItem() {
+            await this.postItem(this.item);
             this.$emit('close');
-            });
+        },
+        storeImage(image) {
+            this.item.dataImage = image;
         }
     },
-    created() {
-        this.item = {box: this.lastUsed.box || '', cid: this.lastUsed.cid || ''};
-    },
     mounted() {
-        this.scheduleAfterInit(() => [this.loadBoxes()]);
+        this.scheduleAfterInit(() => [this.loadBoxes().then(() => {
+            this.item = {box: this.lastUsed.box || '', cid: this.lastUsed.cid || ''};
+        })])
     }
 };
 </script>

web/src/components/AddTicketModal.vue

@@ -19,11 +19,10 @@
 <script>
 import {mapActions} from 'vuex';
 import Modal from '@/components/Modal';
-import EditItem from '@/components/EditItem';
 
 export default {
     name: 'AddTicketModal',
-    components: {Modal, EditItem},
+    components: {Modal},
     props: ['isModal'],
     data: () => ({
         ticket: {

web/src/components/EditItem.vue

@@ -1,50 +0,0 @@
-<template>
-    <div>
-        <h6>Editing Item <span class="badge badge-secondary">#{{ item.uid }}</span></h6>
-        <InputPhoto
-            :model="item"
-            field="file"
-            :on-capture="storeImage"
-        />
-        <InputString
-            label="description"
-            :model="item"
-            field="description"
-            :validation-fn="str => str && str.length > 0"
-        />
-        <div class="form-group">
-            <label for="box">box</label>
-            <InputCombo
-                label="box"
-                :model="item"
-                nameKey="box"
-                uniqueKey="cid"
-                :options="boxes"
-            />
-        </div>
-    </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: 'EditItem',
-    components: {InputPhoto, InputCombo, InputString},
-    props: ['item'],
-    computed: {
-        ...mapGetters(['getBoxes']),
-        boxes({getBoxes}) {
-            return getBoxes.map(obj => ({cid: obj.cid, box: obj.name}));
-        }
-    },
-    methods: {
-        storeImage(image) {
-            this.item.dataImage = image;
-        }
-    }
-};
-</script>

web/src/components/inputs/InputCombo.vue

@@ -43,11 +43,11 @@ export default {
     props: ['label', 'model', 'nameKey', 'uniqueKey', 'options', 'onOptionAdd'],
     data: ({options, model, nameKey, uniqueKey}) => ({
         internalName: model[nameKey],
-        selectedOption: options.filter(e => e[uniqueKey] == model[uniqueKey])[0],
+        selectedOption: options.filter(e => e[uniqueKey] === model[uniqueKey])[0],
         addingOption: false
     }),
     computed: {
-        isValid: ({options, nameKey, internalName}) => options.some(e => e[nameKey] == internalName),
+        isValid: ({options, nameKey, internalName}) => options.some(e => e[nameKey] === internalName),
         sortedOptions: ({
                             options,
                             nameKey
@@ -56,7 +56,7 @@ export default {
     watch: {
         internalName(newValue) {
             if (this.isValid) {
-                if (!this.selectedOption || newValue != this.selectedOption[this.nameKey]) {
+                if (!this.selectedOption || newValue !== this.selectedOption[this.nameKey]) {
                     this.selectedOption = this.options.filter(e => e[this.nameKey] === newValue)[0];
                 }
                 this.model[this.nameKey] = this.selectedOption[this.nameKey];

web/src/views/Item.vue

@@ -112,14 +112,12 @@ import InputString from "@/components/inputs/InputString.vue";
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import InputPhoto from "@/components/inputs/InputPhoto.vue";
 import Modal from "@/components/Modal.vue";
-import EditItem from "@/components/EditItem.vue";
 import AsyncButton from "@/components/inputs/AsyncButton.vue";
 
 export default {
     name: 'Item',
     components: {
         AsyncButton,
-        EditItem,
         Modal, InputPhoto, AuthenticatedImage, InputString, InputCombo, AsyncLoader, ClipboardButton, Timeline
     },
     data() {

web/src/views/Items.vue

@@ -67,11 +67,10 @@
 </template>
 
 <script>
+import {mapActions, mapGetters, mapMutations} from 'vuex';
 import Table from '@/components/Table';
 import Cards from '@/components/Cards';
 import Modal from '@/components/Modal';
-import EditItem from '@/components/EditItem';
-import {mapActions, mapGetters, mapMutations} from 'vuex';
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
 import router from "@/router";
@@ -82,7 +81,7 @@ export default {
         lightboxHash: null,
         editingItem: null,
     }),
-    components: {AsyncLoader, AuthenticatedImage, Table, Cards, Modal, EditItem},
+    components: {AsyncLoader, AuthenticatedImage, Table, Cards, Modal},
     computed: {
         ...mapGetters(['getEventItems', 'isItemsLoaded', 'layout']),
     },