add basic view for item history

core/inventory/api_v2.py

@@ -1,12 +1,13 @@
 from django.urls import re_path
 from django.contrib.auth.decorators import permission_required
-from rest_framework import routers, viewsets
+from rest_framework import routers, viewsets, status
 from rest_framework.decorators import api_view, permission_classes
 from rest_framework.response import Response
 from rest_framework.permissions import IsAuthenticated
 
-from inventory.models import Event, Container, Item
+from inventory.models import Event, Container, Item, Comment
-from inventory.serializers import EventSerializer, ContainerSerializer, ItemSerializer, SearchResultSerializer
+from inventory.serializers import EventSerializer, ContainerSerializer, CommentSerializer, ItemSerializer, \
+    SearchResultSerializer
 
 from base64 import b64decode
 
@@ -22,6 +23,17 @@ class ContainerViewSet(viewsets.ModelViewSet):
     queryset = Container.objects.all()
 
 
+class ItemViewSet(viewsets.ModelViewSet):
+    serializer_class = ItemSerializer
+
+    def get_queryset(self):
+        queryset = Item.objects.all()
+        serializer = self.get_serializer_class()
+        if hasattr(serializer, 'Meta') and hasattr(serializer.Meta, 'prefetch_related_fields'):
+            queryset = queryset.prefetch_related(*serializer.Meta.prefetch_related_fields)
+        return queryset
+
+
 def filter_items(items, query):
     query_tokens = query.split(' ')
     for item in items:
@@ -49,6 +61,7 @@ def search_items(request, event_slug, query):
 @api_view(['GET', 'POST'])
 @permission_classes([IsAuthenticated])
 def item(request, event_slug):
+    vs = ItemViewSet()
     try:
         event = None
         if event_slug != 'none':
@@ -56,7 +69,7 @@ def item(request, event_slug):
         if request.method == 'GET':
             if not request.user.has_event_perm(event, 'view_item'):
                 return Response(status=403)
-            return Response(ItemSerializer(Item.objects.filter(event=event), many=True).data)
+            return Response(ItemSerializer(vs.get_queryset().filter(event=event), many=True).data)
         elif request.method == 'POST':
             if not request.user.has_event_perm(event, 'add_item'):
                 return Response(status=403)
@@ -71,12 +84,31 @@ def item(request, event_slug):
         return Response(status=400)
 
 
+@api_view(['POST'])
+@permission_classes([IsAuthenticated])
+@permission_required('tickets.add_comment', raise_exception=True)
+def add_comment(request, event_slug, id):
+    event = None
+    if event_slug != 'none':
+        event = Event.objects.get(slug=event_slug)
+    item = Item.objects.get(event=event, id=id)
+    if not request.user.has_event_perm(event, 'view_item'):
+        return Response(status=403)
+    if 'comment' not in request.data or request.data['comment'] == '':
+        return Response({'status': 'error', 'message': 'missing comment'}, status=status.HTTP_400_BAD_REQUEST)
+    comment = Comment.objects.create(
+        item=item,
+        comment=request.data['comment'],
+    )
+    return Response(CommentSerializer(comment).data, status=status.HTTP_201_CREATED)
+
+
 @api_view(['GET', 'PUT', 'DELETE', 'PATCH'])
 @permission_classes([IsAuthenticated])
 def item_by_id(request, event_slug, id):
     try:
         event = Event.objects.get(slug=event_slug)
-        item = Item.objects.get(event=event, id=id)
+        item = ItemViewSet().get_queryset().get(event=event, id=id)
         if request.method == 'GET':
             if not request.user.has_event_perm(event, 'view_item'):
                 return Response(status=403)
@@ -117,5 +149,6 @@ urlpatterns = router.urls + [
     re_path(r'^(?P<event_slug>[\w-]+)/items/$', item, name='item'),
     re_path(r'^(?P<event_slug>[\w-]+)/items/(?P<query>[-A-Za-z0-9+/]*={0,3})/$', search_items, name='search_items'),
     re_path(r'^(?P<event_slug>[\w-]+)/item/$', item, name='item'),
+    re_path(r'^(?P<event_slug>[\w-]+)/item/(?P<id>\d+)/comment/$', add_comment, name='add_comment'),
     re_path(r'^(?P<event_slug>[\w-]+)/item/(?P<id>\d+)/$', item_by_id, name='item_by_id'),
 ]

core/inventory/serializers.py

@@ -3,7 +3,7 @@ from rest_framework import serializers
 from rest_framework.relations import SlugRelatedField
 
 from files.models import File
-from inventory.models import Event, Container, Item
+from inventory.models import Event, Container, Item, Comment
 from inventory.shared_serializers import BasicItemSerializer
 from mail.models import EventAddress
 from tickets.shared_serializers import BasicIssueSerializer
@@ -38,6 +38,18 @@ class ContainerSerializer(serializers.ModelSerializer):
         return len(instance.items)
 
 
+class CommentSerializer(serializers.ModelSerializer):
+
+    def validate(self, attrs):
+        if 'comment' not in attrs or attrs['comment'] == '':
+            raise serializers.ValidationError('comment cannot be empty')
+        return attrs
+
+    class Meta:
+        model = Comment
+        fields = ('id', 'comment', 'timestamp', 'item')
+
+
 class ItemSerializer(BasicItemSerializer):
     timeline = serializers.SerializerMethodField()
     dataImage = serializers.CharField(write_only=True, required=False)
@@ -48,6 +60,7 @@ class ItemSerializer(BasicItemSerializer):
         fields = ['cid', 'box', 'id', 'description', 'file', 'dataImage', 'returned', 'event', 'related_issues',
                   'timeline']
         read_only_fields = ['id']
+        prefetch_related_fields = ['comments', 'issue_relation_changes', 'container_history']
 
     def to_internal_value(self, data):
         container = None

core/tickets/api_v2.py

@@ -21,7 +21,13 @@ from tickets.shared_serializers import RelationSerializer
 
 class IssueViewSet(viewsets.ModelViewSet):
     serializer_class = IssueSerializer
-    queryset = IssueThread.objects.all().prefetch_related('state_changes', 'comments', 'emails', 'emails__attachments', 'assignments', 'item_relation_changes', 'shipping_vouchers')
+
+    def get_queryset(self):
+        queryset = IssueThread.objects.all()
+        serializer = self.get_serializer_class()
+        if hasattr(serializer, 'Meta') and hasattr(serializer.Meta, 'prefetch_related_fields'):
+            queryset = queryset.prefetch_related(*serializer.Meta.prefetch_related_fields)
+        return queryset
 
 
 class RelationViewSet(viewsets.ModelViewSet):

core/tickets/serializers.py

@@ -47,6 +47,8 @@ class IssueSerializer(BasicIssueSerializer):
         model = IssueThread
         fields = ('id', 'timeline', 'name', 'state', 'assigned_to', 'last_activity', 'uuid', 'related_items', 'event')
         read_only_fields = ('id', 'timeline', 'last_activity', 'uuid', 'related_items')
+        prefetch_related_fields = ['state_changes', 'comments', 'emails', 'emails__attachments', 'assignments',
+                                   'item_relation_changes', 'shipping_vouchers']
 
     def to_internal_value(self, data):
         ret = super().to_internal_value(data)
@@ -63,12 +65,14 @@ class IssueSerializer(BasicIssueSerializer):
     @staticmethod
     def get_last_activity(self):
         try:
-            last_state_change = max([t.timestamp for t in self.state_changes.all()]) if self.state_changes.exists() else None
+            last_state_change = max(
+                [t.timestamp for t in self.state_changes.all()]) if self.state_changes.exists() else None
             last_comment = max([t.timestamp for t in self.comments.all()]) if self.comments.exists() else None
             last_mail = max([t.timestamp for t in self.emails.all()]) if self.emails.exists() else None
             last_assignment = max([t.timestamp for t in self.assignments.all()]) if self.assignments.exists() else None
 
-            last_relation = max([t.timestamp for t in self.item_relation_changes.all()]) if self.item_relation_changes.exists() else None
+            last_relation = max([t.timestamp for t in
+                                 self.item_relation_changes.all()]) if self.item_relation_changes.exists() else None
             args = [x for x in [last_state_change, last_comment, last_mail, last_assignment, last_relation] if
                     x is not None]
             return max(args)
@@ -129,7 +133,6 @@ class IssueSerializer(BasicIssueSerializer):
         return sorted(timeline, key=lambda x: x['timestamp'])
 
 
-
 class SearchResultSerializer(serializers.Serializer):
     search_score = serializers.IntegerField()
     item = IssueSerializer()

web/src/App.vue

@@ -1,5 +1,6 @@
 <template>
     <div style="min-height: 100vh; display: flex; flex-direction: column;">
+        <Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="openLightboxModalWith(null)"/>
         <AddItemModal v-if="addItemModalOpen && isLoggedIn" @close="closeAddItemModal()" isModal="true"/>
         <AddTicketModal v-if="addTicketModalOpen && isLoggedIn" @close="closeAddTicketModal()" isModal="true"/>
         <AddBoxModal v-if="showAddBoxModal && isLoggedIn" @close="closeAddBoxModal()" isModal="true"/>
@@ -16,20 +17,22 @@ import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
 import AddTicketModal from "@/components/AddTicketModal.vue";
 import AddBoxModal from "@/components/AddBoxModal.vue";
 import AddEventModal from "@/components/AddEventModal.vue";
+import Lightbox from "@/components/Lightbox.vue";
 
 export default {
     name: 'app',
-    components: {AddBoxModal, AddEventModal, Navbar, AddItemModal, AddTicketModal},
+    components: {Lightbox, AddBoxModal, AddEventModal, Navbar, AddItemModal, AddTicketModal},
     computed: {
-        ...mapState(['loadedItems', 'layout', 'toasts', 'showAddBoxModal', 'showAddEventModal']),
+        ...mapState(['loadedItems', 'layout', 'toasts', 'showAddBoxModal', 'showAddEventModal', 'lightboxHash']),
         ...mapGetters(['isLoggedIn']),
     },
     data: () => ({
         addItemModalOpen: false,
-        addTicketModalOpen: false
+        addTicketModalOpen: false,
     }),
     methods: {
-        ...mapMutations(['removeToast', 'createToast', 'closeAddBoxModal', 'openAddBoxModal', 'closeAddEventModal']),
+        ...mapMutations(['removeToast', 'createToast', 'closeAddBoxModal', 'openAddBoxModal', 'closeAddEventModal',
+            'openLightboxModalWith']),
         ...mapActions(['loadEvents', 'scheduleAfterInit']),
         openAddItemModal() {
             this.addItemModalOpen = true;
@@ -42,7 +45,7 @@ export default {
         },
         closeAddTicketModal() {
             this.addTicketModalOpen = false;
-        }
+        },
     },
     created: function () {
         document.title = document.location.hostname;

web/src/components/TimelineMail.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="timeline-item-wrapper">
-        <Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
         <div class="timeline-item-description">
             <i class="avatar | small">
                 <font-awesome-icon icon="user"/>
@@ -23,7 +22,7 @@
             </div>
             <div class="card-footer" v-if="item.attachments.length">
                 <ul>
-                    <li v-for="attachment in item.attachments" @click="openLightboxModalWith(attachment)">
+                    <li v-for="attachment in item.attachments" @click="openLightboxModalWith(attachment.hash)">
                         <AuthenticatedImage :src="`/media/2/256/${attachment.hash}/`" :alt="attachment.name"
                                             v-if="attachment.mime_type.startsWith('image/')" cached/>
                         <AuthenticatedDataLink :href="`/media/2/${attachment.hash}/`" :download="attachment.name"
@@ -32,26 +31,6 @@
                 </ul>
             </div>
         </div>
-        <!--button class="show-replies">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
-                 width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
-                 stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                <path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
-            </svg>
-            Show 3 replies
-            <span class="avatar-list">
-					<i class="avatar | small">
-						<font-awesome-icon icon="user"/>
-					</i>
-					<i class="avatar | small">
-						<font-awesome-icon icon="user"/>
-					</i>
-                    <i class="avatar | small">
-						<font-awesome-icon icon="user"/>
-					</i>
-				</span>
-        </button-->
     </div>
 </template>
 
@@ -59,16 +38,11 @@
 
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
-import Lightbox from "@/components/Lightbox.vue";
+import {mapMutations} from "vuex";
 
 export default {
     name: 'TimelineMail',
-    components: {Lightbox, AuthenticatedImage, AuthenticatedDataLink},
+    components: {AuthenticatedImage, AuthenticatedDataLink},
-    data() {
-        return {
-            lightboxHash: null,
-        }
-    },
     props: {
         'item': {
             type: Object,
@@ -85,12 +59,7 @@ export default {
 
     },
     methods: {
-        openLightboxModalWith(attachment) {
+        ...mapMutations(['openLightboxModalWith'])
-            this.lightboxHash = attachment.hash;
-        },
-        closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
-            this.lightboxHash = null;
-        },
     },
 };
 </script>

web/src/components/TimelineRelatedItem.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="timeline-item-wrapper">
-        <Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
         <div class="timeline-item-description">
             <i class="avatar | small">
                 <font-awesome-icon icon="user"/>
@@ -19,7 +18,7 @@
                     <AuthenticatedImage v-if="item.item.file" cached
                                         :src="`/media/2/256/${item.item.file}/`"
                                         class="d-block card-img-left"
-                                        @click="openLightboxModalWith(item.item)"
+                                        @click="openLightboxModalWith(item.item.file)"
                     />
                 </div>
                 <div class="col">
@@ -28,49 +27,10 @@
                         <router-link :to="{name: 'item', params: {id: item.item.id}}">
                             <h6 class="card-title">{{ item.item.description }}</h6>
                         </router-link>
-                        <!--div class="row mx-auto mt-2">
-                            <div class="btn-group">
-                                <button class="btn btn-outline-success"
-                                        @click.stop="confirm('return Item?') && markItemReturned(item.item)"
-                                        title="returned">
-                                    <font-awesome-icon icon="check"/>
-                                </button>
-                                <button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item.item)"
-                                        title="edit">
-                                    <font-awesome-icon icon="edit"/>
-                                </button>
-                                <button class="btn btn-outline-danger"
-                                        @click.stop="confirm('delete Item?') && deleteItem(item.item)"
-                                        title="delete">
-                                    <font-awesome-icon icon="trash"/>
-                                </button>
-                            </div>
-                        </div>
-                        <p>{{ item }}</p-->
                     </div>
                 </div>
             </div>
         </div>
-        <!--button class="show-replies">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
-                 width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
-                 stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-                <path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
-            </svg>
-            Show 3 replies
-            <span class="avatar-list">
-                    <i class="avatar | small">
-                        <font-awesome-icon icon="user"/>
-                    </i>
-                    <i class="avatar | small">
-                        <font-awesome-icon icon="user"/>
-                    </i>
-                    <i class="avatar | small">
-                        <font-awesome-icon icon="user"/>
-                    </i>
-                </span>
-        </button-->
     </div>
 </template>
 
@@ -78,16 +38,11 @@
 
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
-import Lightbox from "@/components/Lightbox.vue";
+import {mapMutations} from "vuex";
 
 export default {
     name: 'TimelineRelatedItem',
-    components: {Lightbox, AuthenticatedImage, AuthenticatedDataLink},
+    components: {AuthenticatedImage, AuthenticatedDataLink},
-    data() {
-        return {
-            lightboxHash: null,
-        }
-    },
     props: {
         'item': {
             type: Object,
@@ -104,13 +59,8 @@ export default {
 
     },
     methods: {
-        openLightboxModalWith(attachment) {
+        ...mapMutations(['openLightboxModalWith'])
-            this.lightboxHash = attachment.hash;
+    }
-        },
-        closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
-            this.lightboxHash = null;
-        },
-    },
 };
 </script>
 

web/src/components/TimelineRelatedTicket.vue

@@ -19,13 +19,9 @@
 
 <script>
 
-import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
-import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
-import Lightbox from "@/components/Lightbox.vue";
-
 export default {
     name: 'TimelineRelatedTicket',
-    components: {Lightbox},
+    components: {},
     props: {
         'item': {
             type: Object,

web/src/router.js

@@ -1,10 +1,11 @@
 import {createRouter, createWebHistory} from 'vue-router'
 import store from '@/store';
 
-import Items from './views/Items';
+import Item from "@/views/Item.vue";
-import Boxes from './views/Boxes';
+import Items from '@/views/Items';
-import Files from './views/Files';
+import Boxes from '@/views/Boxes';
-import HowTo from './views/HowTo';
+import Files from '@/views/Files';
+import HowTo from '@/views/HowTo';
 import Login from '@/views/Login.vue';
 import Register from '@/views/Register.vue';
 import Dashboard from "@/views/admin/Dashboard.vue";

web/src/store.js

@@ -34,6 +34,7 @@ const store = createStore({
             expiry: null,
         },
 
+        lightboxHash: null,
         thumbnailCache: {},
         fetchedData: {
             events: 0,
@@ -185,6 +186,9 @@ const store = createStore({
             state.groups = groups;
             state.fetchedData = {...state.fetchedData, groups: Date.now()};
         },
+        openLightboxModalWith(state, hash) {
+            state.lightboxHash = hash;
+        },
         openAddBoxModal(state) {
             state.showAddBoxModal = true;
         },
@@ -349,7 +353,6 @@ const store = createStore({
         },
         async changeEvent({dispatch, getters, commit}, eventName) {
             await router.push({path: `/${eventName.slug}/${getters.getActiveView}/`});
-            //dispatch('loadEventItems');
         },
         async changeView({getters}, link) {
             await router.push({path: `/${getters.getEventSlug}/${link.path}/`});

web/src/views/Item.vue

@@ -8,15 +8,25 @@
                             <AuthenticatedImage v-if="item.file" cached
                                                 :src="`/media/2/256/${item.file}/`"
                                                 class="d-block card-img"
-                                                @click="openLightboxModalWith(item)"
+                                                @click="openLightboxModalWith(item.file)"
                             />
                             <div class="card-body">
-                                <h6 class="card-subtitle text-secondary">id: {{ item.id }} box: {{
+                                <h6 class="card-subtitle text-secondary">id: {{ item.id }} box: {{ item.box }}</h6>
-                                        item.box
-                                    }}</h6>
                                 <h6 class="card-title">{{ item.description }}</h6>
                             </div>
-
+                            <div class="card-footer">
+                                <InputPhoto
+                                    :model="editingItem"
+                                    field="file"
+                                    :on-capture="storeImage"
+                                />
+                                <InputString
+                                    label="description"
+                                    :model="editingItem"
+                                    field="description"
+                                    :validation-fn="str => str && str.length > 0"
+                                />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -26,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>
@@ -41,47 +51,35 @@
                                         </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>
+                            <!--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)"
                                         title="returned">
-                                    <font-awesome-icon icon="check"/>
+                                    <font-awesome-icon icon="check"/>&nbsp;mark&nbsp;returned
-                                </button>
-                                <button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)"
-                                        title="edit">
-                                    <font-awesome-icon icon="edit"/>
                                 </button>
                                 <button class="btn btn-outline-danger"
                                         @click.stop="confirm('delete Item?') && deleteItem(item)"
                                         title="delete">
-                                    <font-awesome-icon icon="trash"/>
+                                    <font-awesome-icon icon="trash"/>&nbsp;delete
                                 </button>
                             </div>
 
                             <InputCombo
                                 label="box"
-                                :model="item"
+                                :model="editingItem"
                                 nameKey="box"
                                 uniqueKey="cid"
                                 :options="boxes"
+                                style="width: auto;"
                             />
-                            <div class="btn-group">
+
-                                <select class="form-control" v-model="selected_state">
+                            <button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes
-                                    <option v-for="status in state_options" :value="status.value">{{
-                                            status.text
-                                        }}
-                                    </option>
-                                </select>
-                                <button class="form-control btn btn-success"
-                                        @click="changeTicketStatus(item)"
-                                        :disabled="(selected_state == item.state)">
-                                    Change&nbsp;Status
                             </button>
-                            </div>
+                            {{ editingItem }}
                         </div>
                     </div>
                 </div>
@@ -105,21 +103,29 @@
     </AsyncLoader>
 </template>
 
+
 <script>
-import {mapActions, mapGetters, mapState} from 'vuex';
+import {mapActions, mapGetters, mapMutations, mapState} from 'vuex';
 import Timeline from "@/components/Timeline.vue";
 import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
 import InputCombo from "@/components/inputs/InputCombo.vue";
 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";
 
 export default {
     name: 'Item',
-    components: {AuthenticatedImage, InputString, InputCombo, AsyncLoader, ClipboardButton, Timeline},
+    components: {
+        EditItem,
+        Modal, InputPhoto, AuthenticatedImage, InputString, InputCombo, AsyncLoader, ClipboardButton, Timeline
+    },
     data() {
         return {
-            newComment: ""
+            newComment: "",
+            editingItem: {},
         }
     },
     computed: {
@@ -131,33 +137,40 @@ export default {
             return ret ? ret : {};
         },
         boxes() {
-            console.log(this.getBoxes);
             return this.getBoxes.map(obj => ({cid: obj.cid, box: obj.name}));
         }
     },
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned', 'updateTicketPartial', 'postComment']),
-        ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit']),
+        ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit', 'updateItem']),
         ...mapActions(['claimShippingVoucher', 'fetchShippingVouchers', 'loadEventItems', 'loadBoxes']),
-        changeTicketStatus(item) {
+        ...mapMutations(['openLightboxModalWith']),
-            item.state = this.selected_state;
-            this.updateTicketPartial({
-                id: item.id,
-                state: this.selected_state,
-            })
-        },
         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.item.dataImage = image;
+        },
+        confirm(message) {
+            return window.confirm(message);
+        },
     },
     mounted() {
         this.scheduleAfterInit(() => [Promise.all([this.loadEventItems(), this.loadBoxes()]).then(() => {
             this.selected_state = this.item.state;
             this.selected_assignee = this.item.assigned_to
+            this.editingItem = {...this.item}
         })]);
     }
 };

web/src/views/Items.vue

@@ -1,19 +1,6 @@
 <template>
     <AsyncLoader :loaded="isItemsLoaded">
         <div class="container-fluid px-xl-5 mt-3">
-            <Modal title="Edit Item" v-if="editingItem" @close="closeEditingModal()">
-                <template #body>
-                    <EditItem
-                        :item="editingItem"
-                        badge="id"
-                    />
-                </template>
-                <template #buttons>
-                    <button type="button" class="btn btn-secondary" @click="closeEditingModal()">Cancel</button>
-                    <button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes</button>
-                </template>
-            </Modal>
-            <Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
             <div class="row" v-if="layout === 'table'">
                 <div class="col-xl-8 offset-xl-2">
                     <Table
@@ -47,7 +34,7 @@
                 :items="getEventItems"
                 :keyName="'id'"
                 v-slot="{ item }"
-                @itemActivated="showItemDetail"
+                @itemActivated="item => openLightboxModalWith(item.file)"
             >
                 <AuthenticatedImage v-if="item.file" cached
                                     :src="`/media/2/256/${item.file}/`"
@@ -62,7 +49,7 @@
                                     @click.stop="confirm('return Item?') && markItemReturned(item)" title="returned">
                                 <font-awesome-icon icon="check"/>
                             </button>
-                            <button class="btn btn-outline-secondary" @click.stop="openEditingModalWith(item)"
+                            <button class="btn btn-outline-secondary" @click.stop="showItemDetail(item)"
                                     title="edit">
                                 <font-awesome-icon icon="edit"/>
                             </button>
@@ -84,8 +71,7 @@ import Table from '@/components/Table';
 import Cards from '@/components/Cards';
 import Modal from '@/components/Modal';
 import EditItem from '@/components/EditItem';
-import {mapActions, mapGetters, mapState} from 'vuex';
+import {mapActions, mapGetters, mapMutations} from 'vuex';
-import Lightbox from '../components/Lightbox';
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
 import router from "@/router";
@@ -96,32 +82,16 @@ export default {
         lightboxHash: null,
         editingItem: null,
     }),
-    components: {AsyncLoader, AuthenticatedImage, Lightbox, Table, Cards, Modal, EditItem},
+    components: {AsyncLoader, AuthenticatedImage, Table, Cards, Modal, EditItem},
     computed: {
-        ...mapState([]),
         ...mapGetters(['getEventItems', 'isItemsLoaded', 'layout']),
     },
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned', 'loadEventItems', 'updateItem', 'scheduleAfterInit']),
+        ...mapMutations(['openLightboxModalWith']),
         showItemDetail(item) {
             router.push({name: 'item', params: {id: item.id}});
         },
-        openLightboxModalWith(item) {
-            this.lightboxHash = item.file;
-        },
-        closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
-            this.lightboxHash = null;
-        },
-        openEditingModalWith(item) { // Opens the editing modal with a copy of the selected item.
-            this.editingItem = item;
-        },
-        closeEditingModal() {
-            this.editingItem = null;
-        },
-        saveEditingItem() { // Saves the edited copy of the item.
-            this.updateItem(this.editingItem);
-            this.closeEditingModal();
-        },
         confirm(message) {
             return window.confirm(message);
         }

web/src/views/Ticket.vue

@@ -105,7 +105,7 @@
                                 <AuthenticatedImage v-if="item.file" cached
                                                     :src="`/media/2/256/${item.file}/`"
                                                     class="d-block card-img"
-                                                    @click="openLightboxModalWith(item)"
+                                                    @click="openLightboxModalWith(item.file)"
                                 />
                                 <div class="card-body">
                                     <!--h6 class="card-title text-info"><span class="badge badge-primary">{{ item.relation_status }}</span></--h6-->
@@ -126,7 +126,7 @@
 </template>
 
 <script>
-import {mapActions, mapGetters, mapState} from 'vuex';
+import {mapActions, mapGetters, mapMutations, mapState} from 'vuex';
 import Timeline from "@/components/Timeline.vue";
 import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
@@ -166,6 +166,7 @@ export default {
         ...mapActions(['deleteItem', 'markItemReturned', 'sendMail', 'updateTicketPartial', 'postComment']),
         ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit']),
         ...mapActions(['claimShippingVoucher', 'fetchShippingVouchers']),
+        ...mapMutations(['openLightboxModalWith']),
         changeTicketStatus() {
             this.ticket.state = this.selected_state;
             this.updateTicketPartial({

web/src/views/Tickets.vue

@@ -55,24 +55,22 @@
 
 <script>
 import Cards from '@/components/Cards';
-import Modal from '@/components/Modal';
-import EditItem from '@/components/EditItem';
 import {mapActions, mapGetters, mapState} from 'vuex';
-import Lightbox from '../components/Lightbox';
 import Table from '@/components/Table';
 import CollapsableCards from "@/components/CollapsableCards.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
+import router from "@/router";
 
 export default {
     name: 'Tickets',
-    components: {AsyncLoader, Lightbox, Table, Cards, Modal, EditItem, CollapsableCards},
+    components: {AsyncLoader, Table, Cards, CollapsableCards},
     computed: {
         ...mapGetters(['getEventTickets', 'isTicketsLoaded', 'stateInfo', 'getEventSlug', 'layout']),
     },
     methods: {
         ...mapActions(['loadTickets', 'fetchTicketStates', 'scheduleAfterInit']),
         gotoDetail(ticket) {
-            this.$router.push({name: 'ticket', params: {id: ticket.id}});
+            router.push({name: 'ticket', params: {id: ticket.id}});
         },
         formatTicket(ticket) {
             return {