add basic view for item history

web/src/components/AuthenticatedImage.vue

@@ -42,9 +42,8 @@ export default {
                     url: this.src,
                     data: this.image_data
                 });
-        }
         },
-    mounted() {
+        deferImage() {
             setTimeout(() => {
                 if (this.cached) {
                     const c = this.getThumbnail(this.src);
@@ -56,5 +55,14 @@ export default {
                 this.loadImage();
             }, 0);
         }
+    },
+    watch: {
+        src: function (newVal, oldVal) {
+            this.deferImage()
+        }
+    },
+    mounted() {
+        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,
+                        ...this.route,
-                        query: {...this.$router.currentRoute.query, collapsed: encoded}
+                        query: {...this.route.query, collapsed: encoded}
                     });
             },
             deep: true,

web/src/components/EditItem.vue

@@ -12,6 +12,8 @@
             field="description"
             :validation-fn="str => str && str.length > 0"
         />
+        <div class="form-group">
+            <label for="box">box</label>
             <InputCombo
                 label="box"
                 :model="item"
@@ -20,6 +22,7 @@
                 :options="boxes"
             />
         </div>
+    </div>
 </template>
 
 <script>

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">
+            <slot name="timeline_action1"/>
-                <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>
         </li>
         <li class="timeline-item">
-            <span class="timeline-item-icon | faded-icon">
+            <slot name="timeline_action2"/>
-                <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>
         </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,
+        TimelineRelatedTicket,
-        TimelineRelatedItem, TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail
+        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']),
+        ...mapGetters(['stateInfo'])
-        newestMailSubject() {
-            const mail = this.timeline.filter(item => item.type === 'mail').pop();
-            return mail ? mail.subject : "";
     },
-    },
-    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 */
 

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

@@ -5,8 +5,12 @@
             <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
+            <span><!--a href="#">$USER</a--> linked item <span class="badge badge-secondary">#{{
-                :datetime="timestamp">{{ timestamp }}</time> as <span class="badge badge-primary">{{ item.status }}</span>
+                    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">
@@ -20,8 +24,10 @@
                 </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-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 class="row mx-auto mt-2">
                             <div class="btn-group">
                                 <button class="btn btn-outline-success"

web/src/components/TimelineRelatedTicket.vue

@@ -0,0 +1,98 @@
+<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>
+
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
+import Lightbox from "@/components/Lightbox.vue";
+
+export default {
+    name: 'TimelineRelatedTicket',
+    components: {Lightbox},
+    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/InputCombo.vue

@@ -1,6 +1,4 @@
 <template>
-    <div class="form-group">
-        <label :for="label">{{ label }}</label>
     <div class="input-group">
         <div class="input-group-prepend">
             <button
@@ -34,7 +32,6 @@
         </div>
         <Addon type="Combo Box" :is-valid="isValid"/>
     </div>
-    </div>
 </template>
 
 <script>

web/src/router.js

@@ -27,7 +27,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

@@ -145,17 +145,15 @@ 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];
+                ({id}) => id === updatedItem.id)[0];
             Object.assign(item, updatedItem);
         },
         removeItem(state, item) {
@@ -167,13 +165,11 @@ const store = createStore({
         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(
@@ -336,14 +332,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}) {
@@ -405,16 +400,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) {

web/src/views/Item.vue

@@ -0,0 +1,168 @@
+<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">
+                            <AuthenticatedImage v-if="item.file" cached
+                                                :src="`/media/2/256/${item.file}/`"
+                                                class="d-block card-img"
+                                                @click="openLightboxModalWith(item)"
+                            />
+                            <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>
+                    </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">
+                            <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"/>
+                                </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"/>
+                                </button>
+                            </div>
+
+                            <InputCombo
+                                label="box"
+                                :model="item"
+                                nameKey="box"
+                                uniqueKey="cid"
+                                :options="boxes"
+                            />
+                            <div class="btn-group">
+                                <select class="form-control" v-model="selected_state">
+                                    <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>
+                        </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, 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";
+
+export default {
+    name: 'Item',
+    components: {AuthenticatedImage, InputString, InputCombo, AsyncLoader, ClipboardButton, Timeline},
+    data() {
+        return {
+            newComment: ""
+        }
+    },
+    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() {
+            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(['claimShippingVoucher', 'fetchShippingVouchers', 'loadEventItems', 'loadBoxes']),
+        changeTicketStatus(item) {
+            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 = "";
+        }
+    },
+    mounted() {
+        this.scheduleAfterInit(() => [Promise.all([this.loadEventItems(), this.loadBoxes()]).then(() => {
+            this.selected_state = this.item.state;
+            this.selected_assignee = this.item.assigned_to
+        })]);
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

web/src/views/Items.vue

@@ -5,7 +5,7 @@
                 <template #body>
                     <EditItem
                         :item="editingItem"
-                        badge="uid"
+                        badge="id"
                     />
                 </template>
                 <template #buttons>
@@ -17,10 +17,10 @@
             <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'"
+                        :keyName="'id'"
-                        @itemActivated="openLightboxModalWith($event)"
+                        @itemActivated="showItemDetail"
                     >
                         <template #actions="{ item }">
                             <div class="btn-group">
@@ -43,11 +43,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="showItemDetail"
             >
                 <AuthenticatedImage v-if="item.file" cached
                                     :src="`/media/2/256/${item.file}/`"
@@ -55,7 +55,7 @@
                 />
                 <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"
@@ -88,6 +88,7 @@ import {mapActions, mapGetters, mapState} from 'vuex';
 import Lightbox from '../components/Lightbox';
 import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 import AsyncLoader from "@/components/AsyncLoader.vue";
+import router from "@/router";
 
 export default {
     name: 'Items',
@@ -102,6 +103,9 @@ export default {
     },
     methods: {
         ...mapActions(['deleteItem', 'markItemReturned', 'loadEventItems', 'updateItem', 'scheduleAfterInit']),
+        showItemDetail(item) {
+            router.push({name: 'item', params: {id: item.id}});
+        },
         openLightboxModalWith(item) {
             this.lightboxHash = item.file;
         },

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">
+                                            <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">
+                                            <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,6 +96,30 @@
                         </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)"
+                                />
+                                <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>
@@ -68,15 +130,19 @@ import {mapActions, mapGetters, 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,51 @@ 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) {
+        changeTicketStatus() {
-            this.sendMail({
+            this.ticket.state = this.selected_state;
-                id: this.ticket.id,
-                message: mail
-            })
-        },
-        handleComment(comment) {
-            this.postComment({
-                id: this.ticket.id,
-                message: comment
-            })
-        },
-        changeTicketStatus(ticket) {
-            ticket.state = this.selected_state;
             this.updateTicketPartial({
-                id: ticket.id,
+                id: this.ticket.id,
                 state: this.selected_state,
             })
         },
-        assignTicket(ticket) {
+        assignTicket() {
-            ticket.assigned_to = this.selected_assignee;
+            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"
+                                <router-link :to="{name: 'ticket', params: {id: item.id}}" class="btn btn-primary"
-                                   @click.prevent="gotoDetail(item)">
+                                             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"
+                                <router-link :to="{name: 'ticket', params: {id: item.id}}" class="btn btn-primary"
-                                   @click.prevent="gotoDetail(item)">
+                                             title="view">
                                     <font-awesome-icon icon="eye"/>
                                     View
-                                </a>
+                                </router-link>
                             </div>
                         </td>
                     </tr>