add basic view for item history

web/src/components/inputs/InputPhoto.vue

@@ -2,10 +2,9 @@
     <div>
         <img
             v-if="!capturing"
-            :class="imgClass || ['img-fluid', 'rounded', 'mx-auto', 'd-block', 'mb-3', 'img-preview']"
+            class="img-fluid rounded mx-auto d-block mb-3 img-preview"
             :src="dataImage"
             alt="Image not available."
-            @click="e=>$emit('detail', e)"
         />
         <video
             v-if="capturing"
@@ -45,21 +44,19 @@
 </template>
 
 <script>
-import {mapActions, mapMutations} from 'vuex';
+import {mapMutations} from 'vuex';
 
 export default {
     name: 'InputPhoto',
-    props: ['model', 'field', 'onCapture', 'imgClass'],
+    props: ['model', 'field', 'onCapture'],
     data: () => ({
         capturing: false,
         streaming: false,
         stream: undefined,
         dataImage: undefined
     }),
-    emits: ['detail'],
     methods: {
         ...mapMutations(['createToast']),
-        ...mapActions(['fetchImage']),
         openStream() {
             if (!this.capturing) {
                 this.capturing = true;

web/src/store.js

@@ -455,13 +455,6 @@ const store = createStore({
                 await dispatch('loadTickets');
             }
         },
-        async postItemComment({commit, dispatch, state, getters}, {id, message}) {
-            const {data, success} = await getters.session.post(`/2/items/${id}/comment/`, {comment: message});
-            if (data && success) {
-                state.fetchedData.items = 0;
-                await dispatch('loadEventItems');
-            }
-        },
         async loadUsers({commit, state, getters}) {
             if (!state.user.token) return;
             if (state.fetchedData.users > Date.now() - 1000 * 60 * 60 * 24) return;

web/src/views/Item.vue

@@ -5,20 +5,22 @@
                 <div class="col-lg-3 col-xl-2">
                     <div class="card bg-dark text-light mb-2" id="filters">
                         <div class="card bg-dark">
-                            <InputPhoto
-                                v-if="!!editingItem"
-                                :model="editingItem"
-                                field="file"
-                                :on-capture="storeImage"
-                                imgClass="d-block card-img"
+                            <AuthenticatedImage v-if="item.file" cached
+                                                :src="`/media/2/256/${item.file}/`"
+                                                class="d-block card-img"
+                                                @click="openLightboxModalWith(item.file)"
                             />
                             <div class="card-body">
                                 <h6 class="card-subtitle text-secondary">id: {{ item.id }} box: {{ item.box }}</h6>
                                 <h6 class="card-title">{{ item.description }}</h6>
                             </div>
                             <div class="card-footer">
+                                <InputPhoto
+                                    :model="editingItem"
+                                    field="file"
+                                    :on-capture="storeImage"
+                                />
                                 <InputString
-                                    v-if="!!editingItem"
                                     label="description"
                                     :model="editingItem"
                                     field="description"
@@ -34,7 +36,7 @@
                             <h3>Item #{{ item.id }} - {{ item.description }}</h3>
                         </div>
                         <Timeline :timeline="item.timeline">
-                            <template v-slot:timeline_action1>
+                            <!--template v-slot:timeline_action1>
                                 <span class="timeline-item-icon | faded-icon">
                                     <font-awesome-icon icon="comment"/>
                                 </span>
@@ -49,24 +51,24 @@
                                         </AsyncButton>
                                     </div>
                                 </div>
-                            </template>
+                            </template-->
                         </Timeline>
                         <div class="card-footer d-flex justify-content-between">
+                            <!--button class="btn btn-secondary mr-2" @click="$router.go(-1)">Back</button-->
                             <div class="btn-group">
                                 <button class="btn btn-outline-success"
-                                        @click.stop="confirm('return Item?') && markItemReturnedAndClose(item)"
+                                        @click.stop="confirm('return Item?') && markItemReturned(item)"
                                         title="returned">
                                     <font-awesome-icon icon="check"/>&nbsp;mark&nbsp;returned
                                 </button>
                                 <button class="btn btn-outline-danger"
-                                        @click.stop="confirm('delete Item?') && deleteItemAndClose(item)"
+                                        @click.stop="confirm('delete Item?') && deleteItem(item)"
                                         title="delete">
                                     <font-awesome-icon icon="trash"/>&nbsp;delete
                                 </button>
                             </div>
 
                             <InputCombo
-                                v-if="!!editingItem"
                                 label="box"
                                 :model="editingItem"
                                 nameKey="box"
@@ -77,6 +79,7 @@
 
                             <button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes
                             </button>
+                            {{ editingItem }}
                         </div>
                     </div>
                 </div>
@@ -103,7 +106,6 @@
 
 <script>
 import {mapActions, mapGetters, mapMutations, mapState} from 'vuex';
-import router from "@/router";
 import Timeline from "@/components/Timeline.vue";
 import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
@@ -113,19 +115,17 @@ 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() {
         return {
             newComment: "",
-            editingItem: null,
+            editingItem: {},
         }
     },
     computed: {
@@ -137,39 +137,34 @@ export default {
             return ret ? ret : {};
         },
         boxes() {
-            return this.getBoxes.map(obj => ({cid: obj.id, box: obj.name}));
+            return this.getBoxes.map(obj => ({cid: obj.cid, box: obj.name}));
         }
     },
     methods: {
-        ...mapActions(['deleteItem', 'markItemReturned', 'updateTicketPartial', 'postItemComment']),
+        ...mapActions(['deleteItem', 'markItemReturned', 'updateTicketPartial', 'postComment']),
         ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit', 'updateItem']),
         ...mapActions(['claimShippingVoucher', 'fetchShippingVouchers', 'loadEventItems', 'loadBoxes']),
         ...mapMutations(['openLightboxModalWith']),
-        async addCommentAndClear() {
-            await this.postItemComment({
-                id: this.item.id,
+        addCommentAndClear: async function () {
+            await this.postComment({
+                id: this.ticket.id,
                 message: this.newComment
             })
             this.newComment = "";
         },
+        closeEditingModal() {
+            this.editingItem = null;
+        },
         async saveEditingItem() { // Saves the edited copy of the item.
             await this.updateItem(this.editingItem);
             this.editingItem = {...this.item}
         },
         storeImage(image) {
-            this.editingItem.dataImage = image;
+            this.item.dataImage = image;
         },
         confirm(message) {
             return window.confirm(message);
         },
-        async markItemReturnedAndClose(item) {
-            await this.markItemReturned(item);
-            router.back();
-        },
-        async deleteItemAndClose(item) {
-            await this.deleteItem(item);
-            router.back();
-        }
     },
     mounted() {
         this.scheduleAfterInit(() => [Promise.all([this.loadEventItems(), this.loadBoxes()]).then(() => {