add timeline nodes for linked items and shipping vouchers

web/src/components/Timeline.vue

@@ -8,12 +8,19 @@
             <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'comment'">
                 <font-awesome-icon icon="comment"/>
             </span>
-            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'" :class="'bg-' + stateInfo(item.state).color">
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'state'"
+                  :class="'bg-' + stateInfo(item.state).color">
                 <font-awesome-icon :icon="stateInfo(item.state).icon"/>
             </span>
             <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'assignment'" :class="'bg-secondary'">
                 <font-awesome-icon icon="user"/>
             </span>
+            <span class="timeline-item-icon faded-icon" v-else-if="item.type === 'item_relation'">
+                <font-awesome-icon icon="object-group"/>
+            </span>
+            <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>
                 <font-awesome-icon icon="pen"/>
             </span>
@@ -21,6 +28,8 @@
             <TimelineComment v-else-if="item.type === 'comment'" :item="item"/>
             <TimelineStateChange v-else-if="item.type === 'state'" :item="item"/>
             <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"/>
             <p v-else>{{ item }}</p>
         </li>
         <li class="timeline-item">
@@ -66,10 +75,15 @@ import TimelineComment from "@/components/TimelineComment.vue";
 import TimelineStateChange from "@/components/TimelineStateChange.vue";
 import {mapGetters} from "vuex";
 import TimelineAssignment from "@/components/TimelineAssignment.vue";
+import TimelineRelatedItem from "@/components/TimelineRelatedItem.vue";
+import TimelineShippingVoucher from "@/components/TimelineShippingVoucher.vue";
 
 export default {
     name: 'Timeline',
-    components: {TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail},
+    components: {
+        TimelineShippingVoucher,
+        TimelineRelatedItem, TimelineAssignment, TimelineStateChange, TimelineComment, TimelineMail
+    },
     props: {
         timeline: {
             type: Array,

web/src/components/TimelineRelatedItem.vue

@@ -0,0 +1,252 @@
+<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>
+        </div>
+        <div class="card bg-dark">
+            <div class="row">
+                <div class="col" style="min-width: 4em;">
+                    <AuthenticatedImage v-if="item.item.file" cached
+                                        :src="`/media/2/256/${item.item.file}/`"
+                                        class="d-block w-100 card-img-left"
+                                        @click="openLightboxModalWith(item.item)"
+                    />
+                </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-->
+                    </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>
+
+<script>
+
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
+import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
+import Lightbox from "@/components/Lightbox.vue";
+
+export default {
+    name: 'TimelineRelatedItem',
+    components: {Lightbox, AuthenticatedImage, AuthenticatedDataLink},
+    data() {
+        return {
+            lightboxHash: null,
+        }
+    },
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        'timestamp': function () {
+            return new Date(this.item.timestamp).toLocaleString();
+        },
+        'body': function () {
+            return this.item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
+        }
+
+    },
+    methods: {
+        openLightboxModalWith(attachment) {
+            this.lightboxHash = attachment.hash;
+        },
+        closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
+            this.lightboxHash = null;
+        },
+    },
+};
+</script>
+
+<style scoped>
+
+a {
+    color: inherit;
+}
+
+.card-img-left {
+    border-top-left-radius: calc(.25rem - 1px);
+    border-bottom-left-radius: calc(.25rem - 1px);
+}
+
+/*img {
+    display: block;
+    max-width: 100%;
+}*/
+
+
+.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;
+    }
+}
+
+.button {
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    margin-right: 4px;
+    margin-top: 12px;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    height: 32px;
+    padding: 0 8px;
+    background-color: var(--gray);
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 99em;
+
+    &:hover {
+        background-color: var(--info);
+    }
+
+    &.square {
+        border-radius: 50%;
+        color: var(--gray);
+        background-color: var(--dark);
+        width: 32px;
+        height: 32px;
+        padding: 0;
+
+        svg {
+            width: 24px;
+            height: 24px;
+        }
+
+        &:hover {
+            color: var(--info);
+        }
+    }
+}
+
+.show-replies {
+    color: var(--gray);
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 1rem;
+    cursor: pointer;
+
+    svg {
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+    }
+
+    &:hover,
+    &:focus {
+        color: var(--info);
+    }
+}
+
+.avatar-list {
+    display: flex;
+    align-items: center;
+
+    & > * {
+        position: relative;
+        box-shadow: 0 0 0 2px #fff;
+        background: var(--dark);
+        margin-right: -8px;
+    }
+}
+
+</style>

web/src/components/TimelineShippingVoucher.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="timeline-item-description">
+        <i class="avatar | small">
+            <font-awesome-icon icon="user"/>
+        </i>
+        <span><a href="#">$USER</a> has claimed shipping voucher
+            <ClipboardButton class="btn btn-primary badge badge-pill" title="Copy shipping voucher to clipboard"
+                             :payload="item.voucher">{{ item.voucher }}
+                <font-awesome-icon icon="clipboard"/>
+            </ClipboardButton> of type <span class="badge badge-pill badge-secondary">{{ item.voucher_type }}</span> for this ticket at <time
+                :datetime="timestamp">{{ timestamp }}</time>
+        </span>
+    </div>
+</template>
+
+<script>
+
+import {mapState} from "vuex";
+import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
+
+export default {
+    name: 'TimelineShippingVoucher',
+    components: {ClipboardButton},
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+    computed: {
+        ...mapState(['state_options']),
+        '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);
+        }
+    }
+}
+
+.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/TimelineStateChange.vue

@@ -25,7 +25,15 @@ export default {
     computed: {
         ...mapState(['state_options']),
         lookupState: function () {
+            try {
+                if (this.item.state)
                     return this.state_options.find(state => state.value === this.item.state);
+            } catch (e) {
+            }
+            return {
+                text: 'Unknown',
+                value: 'unknown'
+            };
         },
         colorLookup: function () {
             if (this.item.state.startsWith('closed_')) {

web/src/main.js

@@ -39,13 +39,15 @@ import {
     faClipboard,
     faTasks,
     faAngleRight,
-    faAngleDown
+    faAngleDown,
+    faTruck,
+    faObjectGroup
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
 library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList,
     faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave, faEye, faComment, faUser, faComments, faEnvelope,
-    faArchive, faMinus, faExclamation, faHourglass, faClipboard, faTasks, faAngleDown, faAngleRight);
+    faArchive, faMinus, faExclamation, faHourglass, faClipboard, faTasks, faAngleDown, faAngleRight, faTruck, faObjectGroup);
 
 
 const app = createApp(App).use(store).use(router);