From fac00735ad9c16fbf6db5178444d1b9fabf499da Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sun, 7 Jan 2024 21:30:47 +0100
Subject: [PATCH] frontend: add ticket timeline component

---
 web/src/components/Timeline.vue            | 186 +++++++++++++++++++
 web/src/components/TimelineComment.vue     |  86 +++++++++
 web/src/components/TimelineMail.vue        | 203 +++++++++++++++++++++
 web/src/components/TimelineStateChange.vue |  77 ++++++++
 4 files changed, 552 insertions(+)
 create mode 100644 web/src/components/Timeline.vue
 create mode 100644 web/src/components/TimelineComment.vue
 create mode 100644 web/src/components/TimelineMail.vue
 create mode 100644 web/src/components/TimelineStateChange.vue

diff --git a/web/src/components/Timeline.vue b/web/src/components/Timeline.vue
new file mode 100644
index 0000000..d56ae3f
--- /dev/null
+++ b/web/src/components/Timeline.vue
@@ -0,0 +1,186 @@
+<template>
+    <ol class="timeline">
+        <li v-for="(item, index) in timeline" :key="index"
+            :class="{'timeline-item':true, 'extra-space': item.type === 'mail'}">
+            <span class="timeline-item-icon filled-icon" v-if="item.type === 'mail'">
+                <font-awesome-icon icon="envelope"/>
+            </span>
+            <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'">
+                <font-awesome-icon icon="check"/>
+            </span>
+            <span class="timeline-item-icon faded-icon" v-else>
+                <font-awesome-icon icon="pen"/>
+            </span>
+            <TimelineMail v-if="item.type === 'mail'" :item="item"/>
+            <TimelineComment v-else-if="item.type === 'comment'" :item="item"/>
+            <TimelineStateChange v-else-if="item.type === 'state'" :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">
+                <div class="input-group">
+                    <input type="text" placeholder="reply mail..." v-model="newMail">
+                    <button class="btn btn-primary" @click="sendMail">
+                        Send
+                    </button>
+                </div>
+            </div>
+        </li>
+    </ol>
+</template>
+
+<script>
+
+import TimelineMail from "@/components/TimelineMail.vue";
+import TimelineComment from "@/components/TimelineComment.vue";
+import TimelineStateChange from "@/components/TimelineStateChange.vue";
+
+export default {
+    name: 'Timeline',
+    components: {TimelineStateChange, TimelineComment, TimelineMail},
+    props: {
+        timeline: {
+            type: Array,
+            default: () => []
+        }
+    },
+    emits: ['sendMail'],
+    data: () => ({
+        newMail: ""
+    }),
+    methods: {
+        sendMail() {
+            this.$emit('sendMail', this.newMail);
+            this.newMail = "";
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+a {
+    color: inherit;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
+
+/* End basic CSS override */
+
+.timeline {
+    width: 85%;
+    display: flex;
+    flex-direction: column;
+    padding: 32px 0 32px 32px;
+    border-left: 2px solid var(--gray);
+    font-size: 1.125rem;
+    margin: 0 auto;
+}
+
+.timeline-item {
+    display: flex;
+    gap: 24px;
+
+    & + * {
+        margin-top: 24px;
+    }
+
+    & + .extra-space {
+        margin-top: 48px;
+    }
+}
+
+.new-comment {
+    width: 100%;
+
+    input {
+        border: 1px solid var(--gray);
+        border-radius: 6px;
+        height: 48px;
+        padding: 0 16px;
+
+        &::placeholder {
+            color: var(--gray-dark);
+        }
+
+        &:focus {
+            border-color: var(--gray-dark);
+            outline: 0; /* Don't actually do this */
+            box-shadow: 0 0 0 4px var(--dark);
+        }
+    }
+}
+
+.timeline-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-left: -57px;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+
+    &.faded-icon {
+        background-color: var(--secondary);
+        color: var(--light);
+    }
+
+    &.filled-icon {
+        background-color: var(--primary);
+        color: var(--light);
+    }
+}
+
+
+.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(--dark);
+    flex-shrink: 0;
+    cursor: pointer;
+    border-radius: 99em;
+
+    &:hover {
+        background-color: var(--gray);
+    }
+}
+
+
+</style>
\ No newline at end of file
diff --git a/web/src/components/TimelineComment.vue b/web/src/components/TimelineComment.vue
new file mode 100644
index 0000000..cf4bfb1
--- /dev/null
+++ b/web/src/components/TimelineComment.vue
@@ -0,0 +1,86 @@
+<template>
+    <div class="timeline-item-wrapper">
+        <div class="timeline-item-description">
+            <i class="avatar | small">
+                <font-awesome-icon icon="user"/>
+            </i>
+            <span><a href="#">$USER</a> commented <b></b> on <time
+                :datetime="item.timestamp">{{ item.timestamp }}</time></span>
+        </div>
+        <div class="card bg-dark">
+            <div class="card-body">
+                <p>{{ item.comment }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelineComment',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+};
+</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>
\ No newline at end of file
diff --git a/web/src/components/TimelineMail.vue b/web/src/components/TimelineMail.vue
new file mode 100644
index 0000000..df780d3
--- /dev/null
+++ b/web/src/components/TimelineMail.vue
@@ -0,0 +1,203 @@
+<template>
+    <div class="timeline-item-wrapper">
+        <div class="timeline-item-description">
+            <i class="avatar | small">
+                <font-awesome-icon icon="user"/>
+            </i>
+            <span><a href="#">$USER</a> commented on <time
+                :datetime="timestamp">{{ timestamp }}</time></span>
+        </div>
+        <div class="card bg-dark">
+            <div class="card-header">
+                {{ item.subject }}
+            </div>
+            <div class="card-body">
+            <p><span v-html="body"></span></p>
+            <!--button class="button">👏 2</button>
+            <button class="button | square">
+                <font-awesome-icon icon="user"/>
+            </button-->
+            </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>
+
+export default {
+    name: 'TimelineMail',
+    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/>');
+        }
+
+    }
+};
+</script>
+
+<style scoped>
+
+a {
+    color: inherit;
+}
+
+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>
\ No newline at end of file
diff --git a/web/src/components/TimelineStateChange.vue b/web/src/components/TimelineStateChange.vue
new file mode 100644
index 0000000..bccaaf2
--- /dev/null
+++ b/web/src/components/TimelineStateChange.vue
@@ -0,0 +1,77 @@
+<template>
+    <div class="timeline-item-description">
+        <i class="avatar | small">
+            <font-awesome-icon icon="user"/>
+        </i>
+        <span><a href="#">$USER</a> has changed state to <span
+            class="badge badge-pill badge-primary">{{ item.state }}</span> on <time
+            :datetime="item.timestamp">{{ item.timestamp }}</time></span>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'TimelineStateChange',
+    props: {
+        'item': {
+            type: Object,
+            required: true
+        }
+    },
+};
+</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>
\ No newline at end of file