add basic view for item history

web/src/components/inputs/InputPhoto.vue

@@ -2,9 +2,10 @@
     <div>
         <img
             v-if="!capturing"
-            class="img-fluid rounded mx-auto d-block mb-3 img-preview"
+            :class="imgClass || ['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"
@@ -44,19 +45,21 @@
 </template>
 
 <script>
-import {mapMutations} from 'vuex';
+import {mapActions, mapMutations} from 'vuex';
 
 export default {
     name: 'InputPhoto',
-    props: ['model', 'field', 'onCapture'],
+    props: ['model', 'field', 'onCapture', 'imgClass'],
     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,6 +455,13 @@ 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,22 +5,20 @@
                 <div class="col-lg-3 col-xl-2">
                     <div class="card bg-dark text-light mb-2" id="filters">
                         <div class="card bg-dark">
-                            <AuthenticatedImage v-if="item.file" cached
+                            <InputPhoto
-                                                :src="`/media/2/256/${item.file}/`"
+                                v-if="!!editingItem"
-                                                class="d-block card-img"
+                                :model="editingItem"
-                                                @click="openLightboxModalWith(item.file)"
+                                field="file"
+                                :on-capture="storeImage"
+                                imgClass="d-block card-img"
                             />
                             <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"
@@ -36,7 +34,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>
@@ -51,24 +49,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?') && markItemReturned(item)"
+                                        @click.stop="confirm('return Item?') && markItemReturnedAndClose(item)"
                                         title="returned">
                                     <font-awesome-icon icon="check"/>&nbsp;mark&nbsp;returned
                                 </button>
                                 <button class="btn btn-outline-danger"
-                                        @click.stop="confirm('delete Item?') && deleteItem(item)"
+                                        @click.stop="confirm('delete Item?') && deleteItemAndClose(item)"
                                         title="delete">
                                     <font-awesome-icon icon="trash"/>&nbsp;delete
                                 </button>
                             </div>
 
                             <InputCombo
+                                v-if="!!editingItem"
                                 label="box"
                                 :model="editingItem"
                                 nameKey="box"
@@ -79,7 +77,6 @@
 
                             <button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes
                             </button>
-                            {{ editingItem }}
                         </div>
                     </div>
                 </div>
@@ -106,6 +103,7 @@
 
 <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";
@@ -115,17 +113,19 @@ 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: {},
+            editingItem: null,
         }
     },
     computed: {
@@ -137,34 +137,39 @@ export default {
             return ret ? ret : {};
         },
         boxes() {
-            return this.getBoxes.map(obj => ({cid: obj.cid, box: obj.name}));
+            return this.getBoxes.map(obj => ({cid: obj.id, box: obj.name}));
         }
     },
     methods: {
-        ...mapActions(['deleteItem', 'markItemReturned', 'updateTicketPartial', 'postComment']),
+        ...mapActions(['deleteItem', 'markItemReturned', 'updateTicketPartial', 'postItemComment']),
         ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit', 'updateItem']),
         ...mapActions(['claimShippingVoucher', 'fetchShippingVouchers', 'loadEventItems', 'loadBoxes']),
         ...mapMutations(['openLightboxModalWith']),
-        addCommentAndClear: async function () {
+        async addCommentAndClear() {
-            await this.postComment({
+            await this.postItemComment({
-                id: this.ticket.id,
+                id: this.item.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.item.dataImage = image;
+            this.editingItem.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(() => {