changed the db to have tags for items

core/core/settings.py

@@ -124,19 +124,12 @@ TEMPLATES = [
     },
 ]
 
-WSGI_APPLICATION = 'core.wsgi.application'
+ASGI_APPLICATION = 'core.asgi.application'
 
 # Database
 # https://docs.djangoproject.com/en/4.2/ref/settings/#databases
 
-if 'test' in sys.argv:
-    DATABASES = {
-        'default': {
-            'ENGINE': 'django.db.backends.sqlite3',
-            'NAME': ':memory:',
-        }
-    }
-else:
+if os.getenv('DB_HOST') is not None:
     DATABASES = {
         'default': {
             'ENGINE': 'django.db.backends.mysql',
@@ -149,6 +142,20 @@ else:
                 'charset': 'utf8mb4',
                 'init_command': "SET sql_mode='STRICT_TRANS_TABLES'"
             }
+        },
+    }
+elif os.getenv('DB_FILE') is not None:
+    DATABASES = {
+        'default': {
+            'ENGINE': 'django.db.backends.sqlite3',
+            'NAME': os.getenv('DB_FILE', 'local.db'),
+        }
+    }
+else:
+    DATABASES = {
+        'default': {
+            'ENGINE': 'django.db.backends.sqlite3',
+            'NAME': ':memory:',
         }
     }
 

core/files/media_v2.py

@@ -38,6 +38,8 @@ def media_urls(request, hash):
                                 'Age': 0,
                                 'ETag': file.hash,
                             })
+    except FileNotFoundError:
+        return Response(status=status.HTTP_404_NOT_FOUND)
     except File.DoesNotExist:
         return Response(status=status.HTTP_404_NOT_FOUND)
     except EmailAttachment.DoesNotExist:
@@ -80,6 +82,8 @@ def thumbnail_urls(request, size, hash):
                                 'ETag': file.hash + "_" + str(size),
                             })
 
+    except FileNotFoundError:
+        return Response(status=status.HTTP_404_NOT_FOUND)
     except File.DoesNotExist:
         return Response(status=status.HTTP_404_NOT_FOUND)
     except EmailAttachment.DoesNotExist:

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.serializers import EventSerializer, ContainerSerializer, ItemSerializer, SearchResultSerializer
+from inventory.models import Event, Container, Item, Comment
+from inventory.serializers import EventSerializer, ContainerSerializer, CommentSerializer, ItemSerializer, \
+    SearchResultSerializer
 
 from base64 import b64decode
 
@@ -22,6 +23,20 @@ class ContainerViewSet(viewsets.ModelViewSet):
     queryset = Container.objects.all()
 
 
+class ItemViewSet(viewsets.ModelViewSet):
+    serializer_class = ItemSerializer
+
+    def prefetch_queryset(self, queryset):
+        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 get_queryset(self):
+        queryset = Item.objects.all()
+        return self.prefetch_queryset(queryset)
+
+
 def filter_items(items, query):
     query_tokens = query.split(' ')
     for item in items:
@@ -49,6 +64,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 +72,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.prefetch_queryset(Item.objects.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,6 +87,25 @@ 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):
@@ -117,5 +152,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/migrations/0008_tag_item_tags.py

@@ -0,0 +1,25 @@
+# Generated by Django 4.2.7 on 2025-01-29 20:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('inventory', '0007_rename_container_item_container_old_itemplacement_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Tag',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('slug', models.TextField()),
+            ],
+        ),
+        migrations.AddField(
+            model_name='item',
+            name='tags',
+            field=models.ManyToManyField(to='inventory.tag'),
+        ),
+    ]

core/inventory/models.py

@@ -28,11 +28,16 @@ class Item(SoftDeleteModel):
     returned_at = models.DateTimeField(blank=True, null=True)
     created_at = models.DateTimeField(null=True, auto_now_add=True)
     updated_at = models.DateTimeField(blank=True, null=True)
+    tags = models.ManyToManyField('Tag')
 
     @property
     def container(self):
         try:
-            return self.container_history.order_by('-timestamp').first().container
+            history = sorted(self.container_history.all(), key=lambda x: x.timestamp, reverse=True)
+            if history:
+                return history[0].container
+            else:
+                return None
         except AttributeError:
             return None
 
@@ -94,6 +99,12 @@ class Comment(models.Model):
     def __str__(self):
         return str(self.item) + ' comment #' + str(self.id)
 
+class Tag(models.Model):
+    slug = models.TextField()
+
+    def __str__(self):
+        return self.slug     
+
 
 class Event(models.Model):
     id = models.AutoField(primary_key=True)

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,12 @@ 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',
+                                   'container_history__container', 'files', 'event',
+                                   'issue_relation_changes__issue_thread',
+                                   'issue_relation_changes__issue_thread__event',
+                                   'issue_relation_changes__issue_thread__state_changes',
+                                   'issue_relation_changes__issue_thread__assignments']
 
     def to_internal_value(self, data):
         container = None

core/mail/protocol.py

@@ -81,11 +81,11 @@ def make_reply(reply_email, references=None, event=None):
         reply_email.save()
     if references:
         reply["References"] = " ".join(references)
-
-    reply.set_content(reply_email.body)
-
-    return reply
-
+    if reply_email.body != "":
+        reply.set_content(reply_email.body)
+        return reply
+    else:
+        raise SpecialMailException("mail content emty")
 
 async def send_smtp(message):
     await aiosmtplib.send(message, hostname="127.0.0.1", port=25, use_tls=False, start_tls=False)
@@ -268,10 +268,10 @@ class LMTPHandler:
             systemevent = await database_sync_to_async(SystemEvent.objects.create)(type='email received',
                                                                                    reference=email.id)
             log.info(f"Created system event {systemevent.id}")
-            channel_layer = get_channel_layer()
-            await channel_layer.group_send(
-                'general', {"type": "generic.event", "name": "send_message_to_frontend", "event_id": systemevent.id,
-                            "message": "email received"})
+            #channel_layer = get_channel_layer()
+            #await channel_layer.group_send(
+            #    'general', {"type": "generic.event", "name": "send_message_to_frontend", "event_id": systemevent.id,
+            #                "message": "email received"})
             log.info(f"Sent message to frontend")
             if new and reply:
                 log.info('Sending message to %s' % reply['To'])

core/requirements.dev.txt

@@ -13,7 +13,7 @@ Automat==22.10.0
 beautifulsoup4==4.12.2
 bs4==0.0.1
 certifi==2023.11.17
-cffi==1.16.0
+cffi==1.17.1
 channels==4.0.0
 channels-redis==4.1.0
 charset-normalizer==3.3.2
@@ -40,12 +40,12 @@ inflection==0.5.1
 itypes==1.2.0
 Jinja2==3.1.2
 MarkupSafe==2.1.3
-msgpack==1.0.7
+msgpack==1.1.0
 msgpack-python==0.5.6
 multidict==6.0.5
 openapi-codec==1.3.2
 packaging==23.2
-Pillow==10.1.0
+Pillow==10.4.0
 pyasn1==0.5.1
 pyasn1-modules==0.3.0
 pycares==4.4.0

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):
@@ -96,12 +102,6 @@ def manual_ticket(request, event_slug):
         subject=request.data['name'],
         body=request.data['body'],
     )
-    systemevent = SystemEvent.objects.create(type='email received', reference=email.id)
-    channel_layer = get_channel_layer()
-    async_to_sync(channel_layer.group_send)(
-        'general', {"type": "generic.event", "name": "send_message_to_frontend", "event_id": systemevent.id,
-                    "message": "email received"}
-    )
 
     return Response(IssueSerializer(issue).data, status=status.HTTP_201_CREATED)
 
@@ -127,12 +127,6 @@ def add_comment(request, pk):
         issue_thread=issue,
         comment=request.data['comment'],
     )
-    systemevent = SystemEvent.objects.create(type='comment added', reference=comment.id)
-    channel_layer = get_channel_layer()
-    async_to_sync(channel_layer.group_send)(
-        'general', {"type": "generic.event", "name": "send_message_to_frontend", "event_id": systemevent.id,
-                    "message": "comment added"}
-    )
     return Response(CommentSerializer(comment).data, status=status.HTTP_201_CREATED)
 
 
@@ -171,5 +165,5 @@ urlpatterns = ([
                    re_path(r'^tickets/(?P<pk>\d+)/comment/$', add_comment, name='add_comment'),
                    re_path(r'^(?P<event_slug>[\w-]+)/tickets/manual/$', manual_ticket, name='manual_ticket'),
                    re_path(r'^(?P<event_slug>[\w-]+)/tickets/(?P<query>[-A-Za-z0-9+/]*={0,3})/$', search_issues,
-                            name='search_issues'),
+                           name='search_issues'),
                ] + router.urls)

core/tickets/serializers.py

@@ -47,6 +47,12 @@ 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', 'item_relation_changes__item',
+                                   'item_relation_changes__item__container_history', 'event',
+                                   'item_relation_changes__item__container_history__container',
+                                   'item_relation_changes__item__files', 'item_relation_changes__item__event',
+                                   'item_relation_changes__item__event']
 
     def to_internal_value(self, data):
         ret = super().to_internal_value(data)
@@ -63,12 +69,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 +137,6 @@ class IssueSerializer(BasicIssueSerializer):
         return sorted(timeline, key=lambda x: x['timestamp'])
 
 
-
 class SearchResultSerializer(serializers.Serializer):
     search_score = serializers.IntegerField()
     item = IssueSerializer()

deploy/dev/docker-compose.yml

@@ -3,20 +3,16 @@ services:
     build:
       context: ../../core
       dockerfile: ../deploy/dev/Dockerfile.backend
-    command: bash -c 'python manage.py migrate && python manage.py runserver 0.0.0.0:8000'
+    command: bash -c 'python manage.py migrate && python testdata.py && python manage.py runserver 0.0.0.0:8000'
     environment:
       - HTTP_HOST=core
-      - DB_HOST=db
-      - DB_PORT=3306
-      - DB_NAME=system3
-      - DB_USER=system3
-      - DB_PASSWORD=system3
+      - DB_FILE=dev.db
+      - DEBUG_MODE_ACTIVE=true
     volumes:
       - ../../core:/code
+      - ../testdata.py:/code/testdata.py
     ports:
       - "8000:8000"
-    depends_on:
-      - db
 
   frontend:
     build:
@@ -31,18 +27,3 @@ services:
       - "8080:8080"
     depends_on:
       - core
-
-  db:
-    image: mariadb
-    environment:
-      MARIADB_RANDOM_ROOT_PASSWORD: true
-      MARIADB_DATABASE: system3
-      MARIADB_USER: system3
-      MARIADB_PASSWORD: system3
-    volumes:
-      - mariadb_data:/var/lib/mysql
-    ports:
-      - "3306:3306"
-
-volumes:
-  mariadb_data:

deploy/testdata.py

@@ -0,0 +1,88 @@
+import os
+
+
+def setup():
+    from authentication.models import ExtendedUser, EventPermission
+    from inventory.models import Event
+    from django.contrib.auth.models import Permission, Group
+    permissions = ['add_item', 'view_item', 'view_file', 'delete_item', 'change_item']
+    if not ExtendedUser.objects.filter(username='admin').exists():
+        admin = ExtendedUser.objects.create_superuser('admin', 'admin@example.com', 'admin')
+        admin.set_password('admin')
+        admin.user_permissions.add(*Permission.objects.all())
+        admin.save()
+
+    if not ExtendedUser.objects.filter(username='testuser').exists():
+        testuser = ExtendedUser.objects.create_user('testuser', 'testuser@example.com', 'testuser')
+        testuser.set_password('testuser')
+        testuser.user_permissions.add(*Permission.objects.all())
+        testuser.save()
+
+    team = Group.objects.get(name='Team')
+    team.permissions.add(
+        *Permission.objects.all()
+    )
+
+    if not ExtendedUser.objects.filter(username='testuser2').exists():
+        testuser2 = ExtendedUser.objects.create_user('testuser2', 'testuser2@example.com', 'testuser2')
+        testuser2.set_password('testuser2')
+        testuser2.groups.add(team)
+        testuser2.save()
+
+    event1 = Event.objects.get_or_create(id=1, name='first test event', slug='TEST1',
+                                         start='2023-12-18 00:00:00.000000', end='2023-12-27 00:00:00.000000',
+                                         pre_start='2023-12-31 00:00:00.000000', post_end='2024-01-04 00:00:00.000000')[
+        0]
+
+    event2 = Event.objects.get_or_create(id=2, name='second test event', slug='TEST2',
+                                         start='2024-12-18 00:00:00.000000', end='2024-12-27 00:00:00.000000',
+                                         pre_start='2024-12-31 00:00:00.000000', post_end='2025-01-04 00:00:00.000000')[
+        0]
+
+    #    for permission in permissions:
+    #        EventPermission.objects.create(event=event_37c3, user=foo,
+    #                                       permission=Permission.objects.get(codename=permission))
+
+    from tickets.models import IssueThread
+
+    from mail.models import Email
+
+    issue_thread = IssueThread.objects.get_or_create(
+        id=1,
+        name="test",
+        event=Event.objects.get(slug='TEST1')
+    )[0]
+    mail1 = Email.objects.get_or_create(
+        id=1,
+        subject='test subject',
+        body='test',
+        sender='test1@test',
+        recipient='test2@test',
+        issue_thread=issue_thread,
+    )[0]
+    mail1_reply = Email.objects.get_or_create(
+        id=2,
+        subject='Message received',
+        body='Thank you for your message.',
+        sender='test2@test',
+        recipient='test1@test',
+        in_reply_to=mail1.reference,
+        issue_thread=issue_thread,
+    )[0]
+
+
+def main():
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "core.settings")
+    import django
+
+    django.setup()
+
+    from django.core.management import call_command
+    call_command('migrate')
+
+    setup()
+    print('testdata initialised')
+
+
+if __name__ == '__main__':
+    main()

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/AuthenticatedImage.vue

@@ -42,19 +42,27 @@ export default {
                     url: this.src,
                     data: this.image_data
                 });
+        },
+        deferImage() {
+            setTimeout(() => {
+                if (this.cached) {
+                    const c = this.getThumbnail(this.src);
+                    if (c) {
+                        this.image_data = c;
+                        return;
+                    }
+                }
+                this.loadImage();
+            }, 0);
+        }
+    },
+    watch: {
+        src: function (newVal, oldVal) {
+            this.deferImage()
         }
     },
     mounted() {
-        setTimeout(() => {
-            if (this.cached) {
-                const c = this.getThumbnail(this.src);
-                if (c) {
-                    this.image_data = c;
-                    return;
-                }
-            }
-            this.loadImage();
-        }, 0);
+        this.deferImage();
     }
 }
 </script>

web/src/components/CollapsableCards.vue

@@ -52,7 +52,7 @@ export default {
         };
     },
     created() {
-        const query = this.$router.currentRoute ? (this.$router.currentRoute.query ? this.$router.currentRoute.query.collapsed : null) : null;
+        const query = this.route ? (this.route.query ? this.route.query.collapsed : null) : null;
         if (query !== null && query !== undefined) {
             this.collapsed = this.unpackInt(parseInt(query), this.sections.length);
         } else {
@@ -84,8 +84,8 @@ export default {
                 const encoded = this.packInt(this.collapsed).toString()
                 if (this.route.query.collapsed !== encoded)
                     this.$router.push({
-                        ...this.$router.currentRoute,
-                        query: {...this.$router.currentRoute.query, collapsed: encoded}
+                        ...this.route,
+                        query: {...this.route.query, collapsed: encoded}
                     });
             },
             deep: true,

web/src/components/EditItem.vue

@@ -12,13 +12,16 @@
             field="description"
             :validation-fn="str => str && str.length > 0"
         />
-        <InputCombo
-            label="box"
-            :model="item"
-            nameKey="box"
-            uniqueKey="cid"
-            :options="boxes"
-        />
+        <div class="form-group">
+            <label for="box">box</label>
+            <InputCombo
+                label="box"
+                :model="item"
+                nameKey="box"
+                uniqueKey="cid"
+                :options="boxes"
+            />
+        </div>
     </div>
 </template>
 

web/src/components/Timeline.vue

@@ -21,6 +21,9 @@
             <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'shipping_voucher'">
                 <font-awesome-icon icon="truck"/>
             </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'placement'">
+                <font-awesome-icon icon="archive"/>
+            </span>
             <span class="timeline-item-icon faded-icon" v-else>
                 <font-awesome-icon icon="pen"/>
             </span>
@@ -30,40 +33,15 @@
             <TimelineAssignment v-else-if="item.type === 'assignment'" :item="item"/>
             <TimelineRelatedItem v-else-if="item.type === 'item_relation'" :item="item"/>
             <TimelineShippingVoucher v-else-if="item.type === 'shipping_voucher'" :item="item"/>
+            <TimelinePlacement v-else-if="item.type === 'placement'" :item="item"/>
+            <TimelineRelatedTicket v-else-if="item.type === 'issue_relation'" :item="item"/>
             <p v-else>{{ item }}</p>
         </li>
         <li class="timeline-item">
-            <span class="timeline-item-icon | faded-icon">
-                <font-awesome-icon icon="comment"/>
-            </span>
-            <div class="new-comment card bg-dark">
-                <div class="">
-                    <textarea placeholder="add comment..." v-model="newComment" class="form-control">
-                    </textarea>
-                    <AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
-                        <font-awesome-icon icon="comment"/>
-                        Save Comment
-                    </AsyncButton>
-                </div>
-            </div>
+            <slot name="timeline_action1"/>
         </li>
         <li class="timeline-item">
-            <span class="timeline-item-icon | faded-icon">
-                <font-awesome-icon icon="envelope"/>
-            </span>
-            <div class="new-mail card bg-dark">
-                <div class="card-header">
-                    {{ newestMailSubject }}
-                </div>
-                <div>
-                    <textarea placeholder="reply mail..." v-model="newMail" class="form-control">
-                    </textarea>
-                    <AsyncButton class="btn btn-primary float-right" :task="sendMailAndClear">
-                        <font-awesome-icon icon="envelope"/>
-                        Send Mail
-                    </AsyncButton>
-                </div>
-            </div>
+            <slot name="timeline_action2"/>
         </li>
     </ol>
 </template>
@@ -78,12 +56,20 @@ import TimelineAssignment from "@/components/TimelineAssignment.vue";
 import TimelineRelatedItem from "@/components/TimelineRelatedItem.vue";
 import TimelineShippingVoucher from "@/components/TimelineShippingVoucher.vue";
 import AsyncButton from "@/components/inputs/AsyncButton.vue";
+import TimelinePlacement from "@/components/TimelinePlacement.vue";
+import TimelineRelatedTicket from "@/components/TimelineRelatedTicket.vue";
 
 export default {
     name: 'Timeline',
     components: {
-        TimelineShippingVoucher, AsyncButton,
-        TimelineRelatedItem, TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail
+        TimelineRelatedTicket,
+        TimelinePlacement,
+        TimelineShippingVoucher,
+        TimelineRelatedItem,
+        TimelineAssignment,
+        TimelineStateChange,
+        TimelineComment,
+        TimelineMail
     },
     props: {
         timeline: {
@@ -91,33 +77,13 @@ export default {
             default: () => []
         }
     },
-    emits: ['sendMail', 'addComment'],
-    data: () => ({
-        newMail: "",
-        newComment: ""
-    }),
     computed: {
-        ...mapGetters(['stateInfo']),
-        newestMailSubject() {
-            const mail = this.timeline.filter(item => item.type === 'mail').pop();
-            return mail ? mail.subject : "";
-        },
+        ...mapGetters(['stateInfo'])
     },
-    methods: {
-        ...mapActions(['sendMail', 'postComment']),
-        sendMailAndClear: async function () {
-            await this.sendMail(this.newMail);
-            this.newMail = "";
-        },
-        addCommentAndClear: async function () {
-            await this.postComment(this.newComment);
-            this.newComment = "";
-        }
-    }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 *,
 *:before,
@@ -136,10 +102,10 @@ a {
     color: inherit;
 }
 
-img {
+/*img {
     display: block;
     max-width: 100%;
-}
+}*/
 
 /* End basic CSS override */
 
@@ -237,4 +203,4 @@ img {
 }
 
 
-</style>
+</style>

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},
-    data() {
-        return {
-            lightboxHash: null,
-        }
-    },
+    components: {AuthenticatedImage, AuthenticatedDataLink},
     props: {
         'item': {
             type: Object,
@@ -85,12 +59,7 @@ export default {
 
     },
     methods: {
-        openLightboxModalWith(attachment) {
-            this.lightboxHash = attachment.hash;
-        },
-        closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
-            this.lightboxHash = null;
-        },
+        ...mapMutations(['openLightboxModalWith'])
     },
 };
 </script>

web/src/components/TimelinePlacement.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="timeline-item-description">
+        <i class="avatar | small">
+            <font-awesome-icon icon="user"/>
+        </i>
+        <span><a href="#">$USER</a> has placed item in '{{item.box}}' (#{{item.cid}}) at <time
+            :datetime="timestamp">{{ timestamp }}</time>
+        </span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelinePlacement',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        },
+    }
+};
+</script>
+
+<style scoped>
+
+
+a {
+    color: inherit;
+}
+
+/* End basic CSS override */
+
+
+.timeline-item-description {
+    display: flex;
+    padding-top: 6px;
+    gap: 8px;
+    color: var(--gray);
+
+    img {
+        flex-shrink: 0;
+    }
+
+    a {
+        /*color: var(--c-grey-500);*/
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            outline: 0; /* Don't actually do this */
+            color: var(--info);
+        }
+    }
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+
+    &.small {
+        width: 28px;
+        height: 28px;
+    }
+
+    img {
+        object-fit: cover;
+    }
+}
+
+
+</style>

web/src/components/TimelineRelatedItem.vue

@@ -1,12 +1,15 @@
 <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"/>
             </i>
-            <span><!--a href="#">$USER</a--> linked item <span class="badge badge-secondary">#{{ item.item.uid }} </span> on <time
-                :datetime="timestamp">{{ timestamp }}</time> as <span class="badge badge-primary">{{ item.status }}</span>
+            <span><!--a href="#">$USER</a--> linked item <span class="badge badge-secondary">#{{
+                    item.item.id
+                }} </span> on <time
+                :datetime="timestamp">{{ timestamp }}</time> as <span class="badge badge-primary">{{
+                    item.status
+                }}</span>
             </span>
         </div>
         <div class="card bg-dark">
@@ -15,56 +18,19 @@
                     <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">
                     <div class="card-body">
-                        <h6 class="card-subtitle text-secondary">uid: {{ item.item.uid }} box: {{ item.item.box }}</h6>
-                        <h6 class="card-title">{{ item.item.description }}</h6>
-                        <!--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-->
+                        <h6 class="card-subtitle text-secondary">id: {{ item.item.id }} box: {{ item.item.box }}</h6>
+                        <router-link :to="{name: 'item', params: {id: item.item.id}}">
+                            <h6 class="card-title">{{ item.item.description }}</h6>
+                        </router-link>
                     </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>
 
@@ -72,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},
-    data() {
-        return {
-            lightboxHash: null,
-        }
-    },
+    components: {AuthenticatedImage, AuthenticatedDataLink},
     props: {
         'item': {
             type: Object,
@@ -98,13 +59,8 @@ export default {
 
     },
     methods: {
-        openLightboxModalWith(attachment) {
-            this.lightboxHash = attachment.hash;
-        },
-        closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
-            this.lightboxHash = null;
-        },
-    },
+        ...mapMutations(['openLightboxModalWith'])
+    }
 };
 </script>
 

web/src/components/TimelineRelatedTicket.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="timeline-item-wrapper">
+        <div class="timeline-item-description">
+            <i class="avatar | small">
+                <font-awesome-icon icon="user"/>
+            </i>
+            <span> linked ticket <span class="badge badge-secondary">#{{ item.issue_thread.id }} </span> on
+                <time :datetime="timestamp">{{ timestamp }}</time> as
+                <span class="badge badge-primary">{{ item.status }}</span>
+            </span>
+        </div>
+        <div class="timeline-item-description">
+            <router-link :to="{name: 'ticket', params: {id: item.issue_thread.id}}">
+                <h6 class="card-title">Ticket #{{ item.issue_thread.id }} - {{ item.issue_thread.name }}</h6>
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelineRelatedTicket',
+    components: {},
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        }
+    },
+};
+</script>
+
+<style scoped>
+
+a {
+    color: inherit;
+}
+
+.timeline-item-description {
+    display: flex;
+    padding-top: 6px;
+    gap: 8px;
+    color: var(--gray);
+
+    img {
+        flex-shrink: 0;
+    }
+
+    a {
+        /*color: var(--c-grey-500);*/
+        font-weight: 500;
+        text-decoration: none;
+
+        &:hover,
+        &:focus {
+            outline: 0; /* Don't actually do this */
+            color: var(--info);
+        }
+    }
+}
+
+
+.card {
+    border: 1px solid var(--gray);
+}
+
+.avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+
+    &.small {
+        width: 28px;
+        height: 28px;
+    }
+
+    img {
+        object-fit: cover;
+    }
+}
+
+</style>

web/src/components/inputs/AsyncButton.vue

@@ -1,9 +1,9 @@
 <template>
-    <button @click.stop="handleClick" :disabled="disabled">
+    <button @click.stop="handleClick" :disabled="disabled || inProgress">
         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
-              :class="{'d-none': !disabled}"></span>
-        <span class="ml-2" :class="{'d-none': !disabled}">In Progress...</span>
-        <span :class="{'d-none': disabled}"><slot></slot></span>
+              :class="{'d-none': !inProgress}"></span>
+        <span class="ml-2" :class="{'d-none': !inProgress}">In Progress...</span>
+        <span :class="{'d-none': inProgress}"><slot></slot></span>
     </button>
 </template>
 
@@ -13,7 +13,7 @@ export default {
     name: 'AsyncButton',
     data() {
         return {
-            disabled: false,
+            inProgress: false,
         };
     },
     props: {
@@ -21,18 +21,21 @@ export default {
             type: Function,
             required: true,
         },
+		disabled: {
+			type: Boolean,
+			required: false,
+		},
     },
     methods: {
         async handleClick() {
-            console.log("AsyncButton.handleClick() called");
             if (this.task && typeof this.task === 'function') {
-                this.disabled = true;
+                this.inProgress = true;
                 try {
                     await this.task();
                 } catch (e) {
                     console.error(e);
                 } finally {
-                    this.disabled = false;
+                    this.inProgress = false;
                 }
             }
         },
@@ -44,4 +47,4 @@ export default {
 .spinner-border {
     vertical-align: -0.125em;
 }
-</style>
+</style>

web/src/components/inputs/InputCombo.vue

@@ -1,39 +1,36 @@
 <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, index) in sortedOptions"
-                        :key="index"
-                        class="dropdown-item"
-                        @click="setInternalValue(option)"
-                        :class="{ active: option == selectedOption }"
-                    >
-                        {{ option[nameKey] }}
-                    </a>
-                </div>
-            </div>
-            <input type="text" class="form-control" :id="label" v-model="internalName">
-            <div class="input-group-append">
-                <button
-                    class="btn"
-                    :class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
-                    v-if="!isValid"
-                    @click="addOption()"
+    <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, index) in sortedOptions"
+                    :key="index"
+                    class="dropdown-item"
+                    @click="setInternalValue(option)"
+                    :class="{ active: option == selectedOption }"
                 >
-                    <font-awesome-icon icon="plus"/>
-                </button>
+                    {{ option[nameKey] }}
+                </a>
             </div>
-            <Addon type="Combo Box" :is-valid="isValid"/>
         </div>
+        <input type="text" class="form-control" :id="label" v-model="internalName">
+        <div class="input-group-append">
+            <button
+                class="btn"
+                :class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
+                v-if="!isValid"
+                @click="addOption()"
+            >
+                <font-awesome-icon icon="plus"/>
+            </button>
+        </div>
+        <Addon type="Combo Box" :is-valid="isValid"/>
     </div>
 </template>
 

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/router.js

@@ -1,10 +1,11 @@
 import {createRouter, createWebHistory} from 'vue-router'
 import store from '@/store';
 
-import Items from './views/Items';
-import Boxes from './views/Boxes';
-import Files from './views/Files';
-import HowTo from './views/HowTo';
+import Item from "@/views/Item.vue";
+import Items from '@/views/Items';
+import Boxes from '@/views/Boxes';
+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";
@@ -27,7 +28,7 @@ const routes = [
             {requiresAuth: true, requiresPermission: 'view_item'}
     },
     {
-        path: '/:event/item/:uid/', name: 'item', component: Items, meta:
+        path: '/:event/item/:id/', name: 'item', component: Item, meta:
             {requiresAuth: true, requiresPermission: 'view_item'}
     },
     {

web/src/store.js

@@ -34,6 +34,7 @@ const store = createStore({
             expiry: null,
         },
 
+        lightboxHash: null,
         thumbnailCache: {},
         fetchedData: {
             events: 0,
@@ -145,38 +146,34 @@ const store = createStore({
         setItems(state, {slug, items}) {
             state.loadedItems[slug] = items;
             state.loadedItems = {...state.loadedItems};
-            console.log(state.loadedItems)
         },
         replaceItems(state, items) {
             const groups = Object.groupBy(items, i => i.event ? i.event : 'none')
             for (const [key, value] of Object.entries(groups)) state.loadedItems[key] = value;
             state.loadedItems = {...state.loadedItems};
-            console.log(state.loadedItems)
         },
         updateItem(state, updatedItem) {
-            const item = state.loadedItems[updatedItem.event?updatedItem.event:'none'].filter(
-                ({uid}) => uid === updatedItem.uid)[0];
+            const item = state.loadedItems[updatedItem.event ? updatedItem.event : 'none'].filter(
+                ({id}) => id === updatedItem.id)[0];
             Object.assign(item, updatedItem);
         },
         removeItem(state, item) {
-            state.loadedItems[item.event?item.event:'none'] = state.loadedItems[item.event].filter(it => it !== item);
+            state.loadedItems[item.event ? item.event : 'none'] = state.loadedItems[item.event].filter(it => it !== item);
         },
         appendItem(state, item) {
-            state.loadedItems[item.event?item.event:'none'].push(item);
+            state.loadedItems[item.event ? item.event : 'none'].push(item);
         },
         setTickets(state, {slug, tickets}) {
             state.loadedTickets[slug] = tickets;
             state.loadedTickets = {...state.loadedTickets};
-            console.log(state.loadedTickets)
         },
         replaceTickets(state, tickets) {
             const groups = Object.groupBy(tickets, t => t.event ? t.event : 'none')
             for (const [key, value] of Object.entries(groups)) state.loadedTickets[key] = value;
             state.loadedTickets = {...state.loadedTickets};
-            console.log(state.loadedTickets)
         },
         updateTicket(state, updatedTicket) {
-            const ticket = state.loadedTickets[updatedTicket.event?updatedTicket.event:'none'].filter(
+            const ticket = state.loadedTickets[updatedTicket.event ? updatedTicket.event : 'none'].filter(
                 ({id}) => id === updatedTicket.id)[0];
             Object.assign(ticket, updatedTicket);
             state.loadedTickets = {...state.loadedTickets};
@@ -189,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;
         },
@@ -336,14 +336,13 @@ const store = createStore({
             const {data, success} = await getters.session.delete(`/2/events/${event_id}/`);
             if (success) {
                 await dispatch('loadEvents')
-                commit('replaceEvents', [...state.events.filter(e => e.eid !== event_id)])
+                commit('replaceEvents', [...state.events.filter(e => e.id !== event_id)])
             }
         },
         async updateEvent({commit, dispatch, state}, {id, partial_event}){
-            console.log(id, partial_event);
             const {data, success} = await http.patch(`/2/events/${id}/`, partial_event, state.user.token);
             if (success) {
-                commit('replaceEvents', [...state.events.filter(e => e.eid !== id), data])
+                commit('replaceEvents', [...state.events.filter(e => e.id !== id), data])
             }
         },
         async fetchTicketStates({commit, state, getters}) {
@@ -354,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}/`});
@@ -405,16 +403,16 @@ const store = createStore({
         async updateItem({commit, getters, state}, item) {
             const {
                 data, success
-            } = await getters.session.put(`/2/${getters.getEventSlug}/item/${item.uid}/`, item);
+            } = await getters.session.put(`/2/${getters.getEventSlug}/item/${item.id}/`, item);
             commit('updateItem', data);
         },
         async markItemReturned({commit, getters, state}, item) {
-            await getters.session.patch(`/2/${getters.getEventSlug}/item/${item.uid}/`, {returned: true},
+            await getters.session.patch(`/2/${getters.getEventSlug}/item/${item.id}/`, {returned: true},
                 state.user.token);
             commit('removeItem', item);
         },
         async deleteItem({commit, getters, state}, item) {
-            await getters.session.delete(`/2/${getters.getEventSlug}/item/${item.uid}/`, item);
+            await getters.session.delete(`/2/${getters.getEventSlug}/item/${item.id}/`, item);
             commit('removeItem', item);
         },
         async postItem({commit, getters, state}, item) {
@@ -457,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/${getters.getEventSlug}/item/${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

@@ -0,0 +1,186 @@
+<template>
+    <AsyncLoader :loaded="!!item.id">
+        <div class="container-fluid px-xl-5 mt-3">
+            <div class="row">
+                <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"
+                            />
+                            <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">
+                                <InputString
+                                    v-if="!!editingItem"
+                                    label="description"
+                                    :model="editingItem"
+                                    field="description"
+                                    :validation-fn="str => str && str.length > 0"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xl-8">
+                    <div class="card bg-dark text-light mb-2" id="filters">
+                        <div class="card-header">
+                            <h3>Item #{{ item.id }} - {{ item.description }}</h3>
+                        </div>
+                        <Timeline :timeline="item.timeline">
+                            <template v-slot:timeline_action1>
+                                <span class="timeline-item-icon | faded-icon">
+                                    <font-awesome-icon icon="comment"/>
+                                </span>
+                                <div class="new-comment card bg-dark">
+                                    <div class="">
+                                        <textarea placeholder="add comment..." v-model="newComment"
+                                                  class="form-control">
+                                        </textarea>
+                                        <AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
+                                            <font-awesome-icon icon="comment"/>
+                                            Save Comment
+                                        </AsyncButton>
+                                    </div>
+                                </div>
+                            </template>
+                        </Timeline>
+                        <div class="card-footer d-flex justify-content-between">
+                            <div class="btn-group">
+                                <button class="btn btn-outline-success"
+                                        @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?') && deleteItemAndClose(item)"
+                                        title="delete">
+                                    <font-awesome-icon icon="trash"/>&nbsp;delete
+                                </button>
+                            </div>
+
+                            <InputCombo
+                                v-if="!!editingItem"
+                                label="box"
+                                :model="editingItem"
+                                nameKey="box"
+                                uniqueKey="cid"
+                                :options="boxes"
+                                style="width: auto;"
+                            />
+
+                            <button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-3 col-xl-2" v-if="item.related_issues && item.related_issues.length">
+                    <div class="card bg-dark text-light mb-2" id="filters">
+                        <div class="card-body">
+                            <h5 class="card-title text-info">Related</h5>
+                        </div>
+                        <div class="card bg-dark" v-for="issue in item.related_issues" v-bind:key="item.id">
+                            <div class="card-body">
+                                <router-link :to="{name: 'ticket', params: {id: issue.id}}">
+                                    <h6 class="card-title">Ticket #{{ issue.id }} - {{ issue.name }}</h6>
+                                </router-link>
+                                <h6 class="card-subtitle text-secondary">state: {{ issue.state }}</h6>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AsyncLoader>
+</template>
+
+
+<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";
+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";
+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,
+        }
+    },
+    computed: {
+        ...mapState(['state_options', 'users']),
+        ...mapGetters(['availableShippingVoucherTypes', 'getAllItems', 'route', 'getBoxes']),
+        item() {
+            const id = parseInt(this.route.params.id)
+            const ret = this.getAllItems.find(item => item.id === id);
+            return ret ? ret : {};
+        },
+        boxes() {
+            return this.getBoxes.map(obj => ({cid: obj.id, box: obj.name}));
+        }
+    },
+    methods: {
+        ...mapActions(['deleteItem', 'markItemReturned', 'updateTicketPartial', 'postItemComment']),
+        ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit', 'updateItem']),
+        ...mapActions(['claimShippingVoucher', 'fetchShippingVouchers', 'loadEventItems', 'loadBoxes']),
+        ...mapMutations(['openLightboxModalWith']),
+        async addCommentAndClear() {
+            await this.postItemComment({
+                id: this.item.id,
+                message: this.newComment
+            })
+            this.newComment = "";
+        },
+        async saveEditingItem() { // Saves the edited copy of the item.
+            await this.updateItem(this.editingItem);
+            this.editingItem = {...this.item}
+        },
+        storeImage(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(() => {
+            this.selected_state = this.item.state;
+            this.selected_assignee = this.item.assigned_to
+            this.editingItem = {...this.item}
+        })]);
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

web/src/views/Items.vue

@@ -1,26 +1,13 @@
 <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="uid"
-                    />
-                </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
-                        :columns="['uid', 'description', 'box']"
+                        :columns="['id', 'description', 'box']"
                         :items="getEventItems"
-                        :keyName="'uid'"
-                        @itemActivated="openLightboxModalWith($event)"
+                        :keyName="'id'"
+                        @itemActivated="showItemDetail"
                     >
                         <template #actions="{ item }">
                             <div class="btn-group">
@@ -43,11 +30,11 @@
             </div>
             <Cards
                 v-if="layout === 'cards'"
-                :columns="['uid', 'description', 'box']"
+                :columns="['id', 'description', 'box']"
                 :items="getEventItems"
-                :keyName="'uid'"
+                :keyName="'id'"
                 v-slot="{ item }"
-                @itemActivated="openLightboxModalWith($event)"
+                @itemActivated="item => openLightboxModalWith(item.file)"
             >
                 <AuthenticatedImage v-if="item.file" cached
                                     :src="`/media/2/256/${item.file}/`"
@@ -55,14 +42,14 @@
                 />
                 <div class="card-body">
                     <h6 class="card-title">{{ item.description }}</h6>
-                    <h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
+                    <h6 class="card-subtitle text-secondary">id: {{ item.id }} box: {{ item.box }}</h6>
                     <div class="row mx-auto mt-2">
                         <div class="btn-group">
                             <button class="btn btn-outline-success"
                                     @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,10 +71,10 @@ 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 Lightbox from '../components/Lightbox';
+import {mapActions, mapGetters, mapMutations} from 'vuex';
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
+import router from "@/router";
 
 export default {
     name: 'Items',
@@ -95,28 +82,15 @@ 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']),
-        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();
+        ...mapMutations(['openLightboxModalWith']),
+        showItemDetail(item) {
+            router.push({name: 'item', params: {id: item.id}});
         },
         confirm(message) {
             return window.confirm(message);

web/src/views/Ticket.vue

@@ -1,5 +1,5 @@
 <template>
-    <AsyncLoader :loaded="ticket.id">
+    <AsyncLoader :loaded="!!ticket.id">
         <div class="container-fluid px-xl-5 mt-3">
             <div class="row">
                 <div class="col-xl-8 offset-xl-2">
@@ -7,7 +7,42 @@
                         <div class="card-header">
                             <h3>Ticket #{{ ticket.id }} - {{ ticket.name }}</h3>
                         </div>
-                        <Timeline :timeline="ticket.timeline" @sendMail="handleMail" @addComment="handleComment"/>
+                        <Timeline :timeline="ticket.timeline">
+                            <template v-slot:timeline_action1>
+                                <span class="timeline-item-icon | faded-icon">
+                                    <font-awesome-icon icon="comment"/>
+                                </span>
+                                <div class="new-comment card bg-dark">
+                                    <div>
+                                        <textarea placeholder="add comment..." v-model="newComment"
+                                                  class="form-control">
+                                        </textarea>
+                                        <AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear" :disabled="!newComment">
+                                            <font-awesome-icon icon="comment"/>
+                                            Save Comment
+                                        </AsyncButton>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-slot:timeline_action2>
+                                <span class="timeline-item-icon | faded-icon">
+                                    <font-awesome-icon icon="envelope"/>
+                                </span>
+                                <div class="new-mail card bg-dark">
+                                    <div class="card-header">
+                                        {{ newestMailSubject }}
+                                    </div>
+                                    <div>
+                                        <textarea placeholder="reply mail..." v-model="newMail" class="form-control">
+                                        </textarea>
+                                        <AsyncButton class="btn btn-primary float-right" :task="sendMailAndClear" :disabled="!newMail">
+                                            <font-awesome-icon icon="envelope"/>
+                                            Send Mail
+                                        </AsyncButton>
+                                    </div>
+                                </div>
+                            </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-danger" @click="deleteItem({type: 'tickets', id: ticket.id})">
@@ -16,11 +51,14 @@
                             </button-->
                             <div class="btn-group">
                                 <select class="form-control" v-model="selected_assignee">
-                                    <option v-for="user in users" :value="user.username">{{ user.username }}</option>
+                                    <option v-for="user in users" :value="user.username">{{
+                                            user.username
+                                        }}
+                                    </option>
                                 </select>
                                 <button class="form-control btn btn-success"
                                         @click="assignTicket(ticket)"
-                                        :disabled="!selected_assignee || (selected_assignee == ticket.assigned_to)">
+                                        :disabled="!selected_assignee || (selected_assignee === ticket.assigned_to)">
                                     Assign&nbsp;Ticket
                                 </button>
                             </div>
@@ -33,7 +71,7 @@
                                 </select>
                                 <button class="form-control btn btn-success"
                                         @click="changeTicketStatus(ticket)"
-                                        :disabled="(selected_state == ticket.state)">
+                                        :disabled="(selected_state === ticket.state)">
                                     Change&nbsp;Status
                                 </button>
                             </div>
@@ -58,25 +96,53 @@
                         </div>
                     </div>
                 </div>
+                <div class="col-lg-3 col-xl-2 d-lg-none d-xl-block"
+                     v-if="ticket.related_items && ticket.related_items.length">
+                    <div class="card bg-dark text-light mb-2" id="filters">
+                        <div class="card-body">
+                            <h5 class="card-title text-info">Related</h5>
+                            <div class="card bg-dark" v-for="item in ticket.related_items" v-bind:key="item.id">
+                                <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-title text-info"><span class="badge badge-primary">{{ item.relation_status }}</span></--h6-->
+                                    <h6 class="card-subtitle text-secondary">id: {{ item.id }} box: {{
+                                            item.box
+                                        }}</h6>
+                                    <router-link :to="{name: 'item', params: {id: item.id}}">
+                                        <h6 class="card-title">{{ item.description }}</h6>
+                                    </router-link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </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 AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import AsyncButton from "@/components/inputs/AsyncButton.vue";
 
 export default {
     name: 'Ticket',
-    components: {AsyncLoader, ClipboardButton, Timeline},
+    components: {AsyncButton, AuthenticatedImage, AsyncLoader, ClipboardButton, Timeline},
     data() {
         return {
             selected_state: null,
             selected_assignee: null,
             shipping_voucher_type: null,
+            newMail: "",
+            newComment: ""
         }
     },
     computed: {
@@ -90,46 +156,52 @@ export default {
         shippingEmail() {
             const domain = document.location.hostname;
             return `ticket+${this.ticket.uuid}@${domain}`;
-        }
+        },
+        newestMailSubject() {
+            const mail = this.ticket.timeline ? this.ticket.timeline.filter(item => item.type === 'mail').pop() : null;
+            return mail ? mail.subject : "";
+        },
     },
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned', 'sendMail', 'updateTicketPartial', 'postComment']),
         ...mapActions(['loadTickets', 'fetchTicketStates', 'loadUsers', 'scheduleAfterInit']),
         ...mapActions(['claimShippingVoucher', 'fetchShippingVouchers']),
-        handleMail(mail) {
-            this.sendMail({
-                id: this.ticket.id,
-                message: mail
-            })
-        },
-        handleComment(comment) {
-            this.postComment({
-                id: this.ticket.id,
-                message: comment
-            })
-        },
-        changeTicketStatus(ticket) {
-            ticket.state = this.selected_state;
+        ...mapMutations(['openLightboxModalWith']),
+        changeTicketStatus() {
+            this.ticket.state = this.selected_state;
             this.updateTicketPartial({
-                id: ticket.id,
+                id: this.ticket.id,
                 state: this.selected_state,
             })
         },
-        assignTicket(ticket) {
-            ticket.assigned_to = this.selected_assignee;
+        assignTicket() {
+            this.ticket.assigned_to = this.selected_assignee;
             this.updateTicketPartial({
-                id: ticket.id,
+                id: this.ticket.id,
                 assigned_to: this.selected_assignee
             })
         },
+        sendMailAndClear: async function () {
+            await this.sendMail({
+                id: this.ticket.id,
+                message: this.newMail,
+            })
+            this.newMail = "";
+        },
+        addCommentAndClear: async function () {
+            await this.postComment({
+                id: this.ticket.id,
+                message: this.newComment
+            })
+            this.newComment = "";
+        }
     },
     mounted() {
         this.scheduleAfterInit(() => [Promise.all([this.fetchTicketStates(), this.loadTickets(), this.loadUsers(), this.fetchShippingVouchers()]).then(() => {
-            if (this.ticket.state == "pending_new") {
+            if (this.ticket.state === "pending_new") {
                 this.selected_state = "pending_open";
-                this.changeTicketStatus(this.ticket)
+                this.changeTicketStatus()
             }
-            ;
             this.selected_state = this.ticket.state;
             this.selected_assignee = this.ticket.assigned_to
         })]);

web/src/views/Tickets.vue

@@ -12,11 +12,11 @@
                     >
                         <template v-slot:actions="{item}">
                             <div class="btn-group">
-                                <a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
-                                   @click.prevent="gotoDetail(item)">
+                                <router-link :to="{name: 'ticket', params: {id: item.id}}" class="btn btn-primary"
+                                             title="view">
                                     <font-awesome-icon icon="eye"/>
                                     View
-                                </a>
+                                </router-link>
                             </div>
                         </template>
                     </Table>
@@ -39,11 +39,11 @@
                         <td v-if="getEventSlug==='all'">{{ item.event }}</td>
                         <td>
                             <div class="btn-group">
-                                <a class="btn btn-primary" :href="'/'+ getEventSlug + '/ticket/' + item.id" title="view"
-                                   @click.prevent="gotoDetail(item)">
+                                <router-link :to="{name: 'ticket', params: {id: item.id}}" class="btn btn-primary"
+                                             title="view">
                                     <font-awesome-icon icon="eye"/>
                                     View
-                                </a>
+                                </router-link>
                             </div>
                         </td>
                     </tr>
@@ -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 {