add basic view for item history

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 */
 

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/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>