From f80c9214b5dca60f5cdcaab768f1695426a1cb88 Mon Sep 17 00:00:00 2001
From: MusahMusah <shehialiyu0@gmail.com>
Date: Wed, 3 Aug 2022 09:20:17 +0100
Subject: [PATCH 1/3] feat: add changes made to files, routes and pages

---
 src/bulma/modules/task.js                     |  14 +
 src/bulma/pages/tasks/Index.vue               |  20 +-
 src/bulma/pages/tasks/Show.vue                | 143 +++++++++++
 .../pages/tasks/components/BaseInput.vue      |  32 +++
 .../pages/tasks/components/ChecklistItem.vue  | 150 +++++++++++
 .../pages/tasks/components/ChecklistItems.vue | 122 +++++++++
 src/bulma/pages/tasks/components/Filters.vue  |  22 +-
 .../tasks/components/comments/Comment.vue     | 200 ++++++++++++++
 .../tasks/components/comments/Comments.vue    | 226 ++++++++++++++++
 .../tasks/components/comments/Inputor.vue     | 243 ++++++++++++++++++
 src/bulma/routes/tasks/show.js                |  11 +
 11 files changed, 1169 insertions(+), 14 deletions(-)
 create mode 100644 src/bulma/modules/task.js
 create mode 100644 src/bulma/pages/tasks/Show.vue
 create mode 100644 src/bulma/pages/tasks/components/BaseInput.vue
 create mode 100644 src/bulma/pages/tasks/components/ChecklistItem.vue
 create mode 100644 src/bulma/pages/tasks/components/ChecklistItems.vue
 create mode 100644 src/bulma/pages/tasks/components/comments/Comment.vue
 create mode 100644 src/bulma/pages/tasks/components/comments/Comments.vue
 create mode 100644 src/bulma/pages/tasks/components/comments/Inputor.vue
 create mode 100644 src/bulma/routes/tasks/show.js

diff --git a/src/bulma/modules/task.js b/src/bulma/modules/task.js
new file mode 100644
index 0000000..6eb27e3
--- /dev/null
+++ b/src/bulma/modules/task.js
@@ -0,0 +1,14 @@
+const cssClass = (taskEnum, { status }) => {
+    switch (status) {
+        case parseInt(taskEnum.New):
+            return 'is-info';
+        case parseInt(taskEnum.InProgress):
+            return 'is-warning';
+        case parseInt(taskEnum.Finished):
+            return 'is-success';
+        default:
+            return '';
+    }
+};
+
+export default cssClass;
diff --git a/src/bulma/pages/tasks/Index.vue b/src/bulma/pages/tasks/Index.vue
index a1b8a8c..48e1faa 100644
--- a/src/bulma/pages/tasks/Index.vue
+++ b/src/bulma/pages/tasks/Index.vue
@@ -22,6 +22,12 @@
                         size="xs"/>
                 </span>
             </template>
+            <template #status="{ column, row }">
+                <span class="tag is-table-tag has-margin-right-small"
+                      :class="cssClass(column.enum, row)">
+                    {{ column.enum._get(row.status) }}
+                </span>
+            </template>
             <template #flag="{ row, column }">
                 <dropdown :triggers="['click']"
                     :ref="`flag-${row.id}`">
@@ -95,13 +101,7 @@
                     :user="row.allocatedTo"
                     v-else/>
             </template>
-            <template #completed="{ row }">
-                <div class="is-flex is-justify-content-center">
-                    <vue-switch class="is-medium"
-                        v-model="row.completed"
-                        @update:model-value="update(row.id, 'completed', row.completed)"/>
-                </div>
-            </template>
+
             <template #createdBy="{ row: { createdBy } }">
                 <avatar class="is-24x24"
                     :user="createdBy"/>
@@ -131,6 +131,7 @@ import { Dropdown } from 'v-tooltip';
 import { clickOutside } from '@enso-ui/directives';
 import Filters from './components/Filters.vue';
 import Flags from './components/Flags.vue';
+import cssClass from '../../modules/task';
 
 library.add(faClock, faInfoCircle, faCog);
 
@@ -159,9 +160,9 @@ export default {
         ready: false,
         filters: {
             tasks: {
-                completed: false,
                 flag: null,
                 allocated_to: null,
+                activity_id: null,
             },
         },
         intervals: {
@@ -205,6 +206,9 @@ export default {
                 }
             });
         },
+        cssClass(columnEnum, row) {
+            return cssClass(columnEnum, row);
+        },
     },
 };
 </script>
diff --git a/src/bulma/pages/tasks/Show.vue b/src/bulma/pages/tasks/Show.vue
new file mode 100644
index 0000000..1579993
--- /dev/null
+++ b/src/bulma/pages/tasks/Show.vue
@@ -0,0 +1,143 @@
+<template>
+    <div v-if="task" class="container m-auto">
+        <div class="columns mx-0 box">
+            <div class="column is-two-thirds">
+                <div id="box-header"
+                     class="is-flex has-text-grey-light is-justify-content-space-between is-align-items-center mb-5">
+                    <p>
+                        Updated ( {{ task.updatedAt }} ) | Created by <a href="#">{{ task.createdBy }}</a>
+                    </p>
+                    <fa :class="{ 'has-text-grey': !task.muted }"
+                        class="icon is-clickable is-medium"
+                        icon="bell"
+                        @click="toggleMuted"/>
+                </div>
+                <div>
+                    <h4 class="title is-4">
+                        {{ task.name }}
+                    </h4>
+                    <div class="columns is-vcentered is-multiline is-mobile">
+                        <div class="column is-3">
+                            <strong>{{ i18n('Status') }}</strong>
+                        </div>
+                        <div class="column is-9 px-2">
+                           <span :class="cssClass(enums.taskStatuses, task)"
+                                 class="tag">
+                                {{ enums.taskStatuses._get(task.status) }}
+                            </span>
+                        </div>
+                        <div class="column is-3">
+                            <strong>{{ i18n('From - to') }}</strong>
+                        </div>
+                        <div class="column is-9 px-2">
+                            {{ task.from }} - {{ task.to }}
+                        </div>
+                        <div class="column is-3-tablet is-4-mobile">
+                            <strong>{{ i18n('Allocated To') }}</strong>
+                        </div>
+                        <div class="column is-9-tablet is-8-mobile px-2 is-flex is-vcentered">
+                            <avatar :user="task.allocatedTo"
+                                    class="is-32x32 m-0"/>
+                            <span class="ml-2">
+                               {{ task.allocatedTo.person.name }}
+                            </span>
+                        </div>
+                        <div class="column is-3">
+                            <strong>{{ i18n('Flag') }}</strong>
+                        </div>
+                        <div class="column is-9 px-2">
+                           <span v-if="enums.flags._get(task.flag)"
+                                 :class="`has-text-${enums.flags._get(task.flag).toLowerCase()}`"
+                                 class="icon is-clickable">
+                                <fa icon="flag"/>
+                            </span>
+                            <span v-else
+                                  class="icon is-naked is-clickable is-small">
+                                <fa icon="cog"
+                                    size="xs"/>
+                            </span>
+                        </div>
+                    </div>
+
+                    <divider class="my-2"/>
+                    <div class="my-6">
+                        <h4 class="is-uppercase title is-6">
+                            {{ i18n('Description') }}
+                        </h4>
+                        <p class="subtitle is-6 mt-5">
+                            {{ task.description }}
+                        </p>
+                    </div>
+                    <divider class="my-2"/>
+
+                    <ChecklistItems :task="task"
+                        @reload-task="fetch" />
+                </div>
+            </div>
+            <div class="column">
+                <Comments :id="task.id"
+                          type="task" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import {Avatar} from '@enso-ui/users';
+import {FontAwesomeIcon as Fa} from '@fortawesome/vue-fontawesome';
+import {library} from '@fortawesome/fontawesome-svg-core';
+import {faBell, faCog, faPlus, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
+import cssClass from '../../modules/task';
+import Divider from '@enso-ui/divider';
+import ChecklistItems from './components/ChecklistItems.vue';
+import Comments from './components/comments/Comments.vue';
+
+library.add(faTimesCircle, faCog, faPlus, faBell);
+
+export default {
+    name: "Show",
+
+    inject: [
+        'errorHandler', 'http', 'toastr', 'route', 'i18n',
+    ],
+
+    components: {Avatar, Fa, Divider, ChecklistItems, Comments},
+
+    data: () => ({
+        task: null,
+    }),
+
+    computed: {
+        ...mapState(['enums']),
+    },
+
+    created() {
+        this.fetch();
+    },
+
+    methods: {
+        fetch() {
+            this.http.get(this.route(this.$route.name, this.$route.params.task))
+            .then(response => (this.task = response.data.task))
+            .catch(this.errorHandler);
+        },
+        cssClass(columnEnum, row) {
+            return cssClass(columnEnum, row);
+        },
+        toggleMuted() {
+            this.http.patch(this.route('tasks.update', this.$route.params.task),
+                {muted: !this.task.muted})
+            .then(response => {
+                this.fetch()
+                this.toastr.success(response.data.message);
+            })
+            .catch(this.errorHandler);
+        }
+    },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/bulma/pages/tasks/components/BaseInput.vue b/src/bulma/pages/tasks/components/BaseInput.vue
new file mode 100644
index 0000000..7589e7b
--- /dev/null
+++ b/src/bulma/pages/tasks/components/BaseInput.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="column is-4">
+        <p class="control has-icons-left has-icons-right">
+            <input
+                v-model="checklist"
+                class="input"
+                placeholder="Add a checklist"
+                @keypress.enter="add"
+            >
+            <span class="icon is-small is-left mauto">
+              <avatar :user="task.allocatedTo"
+                      class="is-32x32"/>
+            </span>
+        </p>
+    </div>
+</template>
+
+<script>
+import {Avatar} from '@enso-ui/users';
+
+export default {
+    name: "BaseInput",
+
+    components: {Avatar},
+}
+</script>
+
+<style scoped>
+input::placeholder {
+    padding-left: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/bulma/pages/tasks/components/ChecklistItem.vue b/src/bulma/pages/tasks/components/ChecklistItem.vue
new file mode 100644
index 0000000..b41be67
--- /dev/null
+++ b/src/bulma/pages/tasks/components/ChecklistItem.vue
@@ -0,0 +1,150 @@
+<template>
+    <div class="column is-full is-flex"
+         @mouseleave="enableRemoveIcon = false"
+         @mouseover="enableRemoveIcon = true"
+    >
+        <template v-if="!enableInput">
+            <div>
+                <input class="is-clickable"
+                    v-model="checklist.is_completed"
+                    type="checkbox"
+                    @click="toggleChecklist(checklist)"
+                >
+                <label class="checkbox"
+                    :class="{ 'checklist-selected' : checklist.is_completed }"
+                    @click="setChecklist(checklist)"
+                >
+                <span class="ml-3">
+                    {{ checklist.name }}
+                </span>
+                </label>
+            </div>
+        </template>
+        <template v-else>
+            <div class="columns is-multiline is-gapless">
+                <div class="column is-flex is-align-items-center is-align-content-center">
+                    <p class="control has-icons-right">
+                        <input
+                            class="input"
+                            placeholder="Add a checklist"
+                            autofocus
+                            v-model="editChecklist"
+                            @keypress.enter="updateChecklist(checklist)"
+                        >
+                    </p>
+                    <div class="mt-2 has-text-right ml-4">
+                        <a class="button is-rounded is-bold mr-1 is-small action"
+                           @click="enableInput = false; $emit('item-update', false)">
+                            <span>
+                                {{ i18n('Cancel') }}
+                            </span>
+                            <span class="icon is-small">
+                                <fa icon="ban"/>
+                            </span>
+                        </a>
+                        <a
+                           class="button is-rounded is-bold is-success is-small action"
+                           @click="updateChecklist(checklist);">
+                            <span>
+                                {{ i18n('Update') }}
+                            </span>
+                            <span class="icon is-small">
+                                <fa icon="check"/>
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <a
+            :class="{ 'is-hidden' : !enableRemoveIcon || enableInput == true }"
+            class="mx-5"
+            @click.prevent="remove(checklist)"
+        >
+            <span class="icon has-text-grey-light">
+                <fa icon="times-circle"/>
+            </span>
+        </a>
+    </div>
+</template>
+
+<script>
+import {FontAwesomeIcon as Fa} from '@fortawesome/vue-fontawesome';
+import {Avatar} from '@enso-ui/users';
+
+
+export default {
+    name: "ChecklistItem",
+
+    inject: [
+        'errorHandler', 'http', 'toastr', 'route', 'i18n',
+    ],
+
+    components: {Fa, Avatar},
+
+    data: () => ({
+        enableInput: false,
+        enableRemoveIcon: false,
+        editChecklist: null,
+    }),
+
+    props: {
+        checklist: {
+            type: Object,
+            required: true,
+        },
+        task: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    emits: [
+        'reload-task',
+        'item-update',
+    ],
+
+    methods: {
+        remove(checklist) {
+            this.http.delete(this.route('tasks.checklistItems.destroy', checklist.id))
+            .then(response => {
+                this.$emit('reload-task');
+                this.toastr.success(response.data.message);
+            }).catch(this.errorHandler);
+        },
+        toggleChecklist(checklist) {
+            this.http.patch(this.route('tasks.checklistItems.update', checklist.id),
+                { is_completed: !checklist.is_completed })
+            .then(response => {
+                this.$emit('reload-task');
+                this.toastr.success(response.data.message);
+            })
+            .catch(this.errorHandler);
+        },
+        setChecklist(checklist) {
+            this.$emit('item-update', false)
+            this.editChecklist = checklist.name;
+            this.enableInput = true;
+        },
+        updateChecklist(checklist) {
+            this.http.patch(this.route('tasks.checklistItems.update', checklist.id), {
+                name: this.editChecklist,
+                task_id: this.task.id,
+            })
+            .then(response => {
+                this.$emit('reload-task');
+                this.$emit('item-update', true);
+                this.toastr.success(response.data.message);
+            })
+            .catch(this.errorHandler);
+            this.enableInput = false;
+        },
+    },
+}
+</script>
+
+<style scoped>
+.checklist-selected {
+    text-decoration: line-through;
+}
+</style>
diff --git a/src/bulma/pages/tasks/components/ChecklistItems.vue b/src/bulma/pages/tasks/components/ChecklistItems.vue
new file mode 100644
index 0000000..1ce2c8d
--- /dev/null
+++ b/src/bulma/pages/tasks/components/ChecklistItems.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="mt-6">
+        <h4 class="is-uppercase title is-6">
+            {{ i18n('Checklist') }}
+            <a class="has-background-white has-text-grey-dark">
+                <span class="tag is-dark counter">
+                    {{ task.completedChecklist.percentageString }}
+                </span>
+            </a>
+        </h4>
+
+        <div class="columns is-multiline is-mobile is-gaples">
+            <ChecklistItem
+                v-for="(checklist, index) in task.checklist"
+                :key="checklist.id"
+                :checklist="checklist"
+                :task="task"
+                v-bind="$attrs"
+                @itemUpdate="changeInputState($event)"
+            />
+            <div class="column is-full is-clickable	has-text-grey-lighter"
+                 @click="openInput"
+                 v-if="addAction">
+                <span class="icon is-justify-content-flex-start">
+                    <fa icon="plus"/>
+                </span>
+                {{ i18n('Add to-do') }}
+            </div>
+        </div>
+
+        <div v-if="enableInput" class="columns is-multiline">
+            <div class="column is-flex is-align-items-center is-align-content-center">
+                <p class="control has-icons-right">
+                    <input
+                        v-model="checklist"
+                        class="input"
+                        ref="input"
+                        autofocus
+                        placeholder="Add a to-do"
+                        @keypress.enter="add"
+                    >
+                </p>
+                <div class="mt-2 has-text-right ml-4">
+                    <a class="button is-rounded is-bold mr-1 is-small action"
+                       @click="enableInput = false; addAction = true">
+                        <span>
+                            {{ i18n('Cancel') }}
+                        </span>
+                        <span class="icon is-small">
+                            <fa icon="ban"/>
+                        </span>
+                    </a>
+                    <a class="button is-rounded is-bold is-success is-small action"
+                        @click="add">
+                        <span>
+                            {{ i18n('Save') }}
+                        </span>
+                        <span class="icon is-small">
+                            <fa icon="check"/>
+                        </span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ChecklistItem from './ChecklistItem';
+import {FontAwesomeIcon as Fa} from "@fortawesome/vue-fontawesome";
+
+export default {
+    name: "ChecklistItems",
+
+    inject: [
+        'errorHandler', 'http', 'toastr', 'route', 'i18n',
+    ],
+
+    components: {ChecklistItem, Fa},
+
+    data: () => ({
+        enableInput: false,
+        addAction: true,
+        checklist: '',
+    }),
+
+    props: {
+        task: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    methods: {
+        add() {
+            this.http.post(this.route('tasks.checklistItems.store'), {
+                name: this.checklist,
+                task_id: this.$route.params.task
+            }).then(response => {
+                this.$emit('reload-task');
+                this.checklist = null;
+                this.enableInput = false
+                this.addAction = true;
+                this.toastr.success(response.data.message)
+            }).catch(this.errorHandler);
+        },
+        changeInputState(event) {
+            (!this.addAction && !this.enableInput)
+            ? this.addAction = true
+            : this.addAction = event;
+        },
+        openInput() {
+            this.enableInput = true;
+            this.addAction = false;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index b569642..e3f85a4 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -1,5 +1,20 @@
 <template>
     <div class="columns is-centered is-multiline">
+        <div class="column is-narrow">
+            <enso-select-filter class="box raises-on-hover allocation-filter"
+                v-model="project"
+                source="administration.projects.options"
+                label="name"
+                :name="i18n('Project')"/>
+        </div>
+        <div class="column is-narrow">
+            <enso-select-filter class="box raises-on-hover allocation-filter"
+                v-model="filters.tasks.activity_id"
+                :params="{ project_id: project }"
+                source="administration.activities.options"
+                label="name"
+                :name="i18n('Activity')"/>
+        </div>
         <div class="column is-narrow">
             <enso-select-filter class="box raises-on-hover allocation-filter"
                 v-model="filters.tasks.allocated_to"
@@ -14,12 +29,6 @@
                 :options="flagOptions"
                 :name="i18n('Importance')"/>
         </div>
-        <div class="column is-narrow">
-            <boolean-filter class="box raises-on-hover"
-                v-model="filters.tasks.completed"
-                icons
-                :name="i18n('Completed')"/>
-        </div>
         <div class="column is-narrow">
             <enso-filter class="box raises-on-hover"
                 v-model="params.overdue"
@@ -73,6 +82,7 @@ export default {
         overdueOptions: [
             { value: true, icon: 'exclamation', class: 'has-text-danger' },
         ],
+        project: null,
     }),
 
     computed: {
diff --git a/src/bulma/pages/tasks/components/comments/Comment.vue b/src/bulma/pages/tasks/components/comments/Comment.vue
new file mode 100644
index 0000000..cce4638
--- /dev/null
+++ b/src/bulma/pages/tasks/components/comments/Comment.vue
@@ -0,0 +1,200 @@
+<template>
+    <div class="box has-background-light p-3 raises-on-hover">
+        <article class="media"
+            @mouseover="controls = true"
+            @mouseleave="controls = !confirmation ? false : controls">
+            <figure class="media-left">
+                <p class="image is-32x32">
+                    <img class="is-rounded"
+                        alt="avatar"
+                        :src="route('core.avatars.show', comment.owner.avatar.id)">
+                </p>
+            </figure>
+            <div class="media-content">
+                <div class="mb-2"
+                    v-if="!isNew">
+                    <a>
+                        <strong>{{ comment.owner.person.name }}</strong>
+                    </a>
+                    <span class="has-text-muted ml-1"
+                        v-tooltip="dateFormat(commentedAt)"
+                        v-if="humanReadableDates">
+                        {{ timeFromNow(commentedAt) }} {{ i18n('ago') }}
+                    </span>
+                    <span class="has-text-muted ml-1"
+                        v-tooltip="`${timeFromNow(commentedAt)} ${i18n('ago')}`"
+                        v-else>
+                        {{ dateFormat(commentedAt) }}
+                    </span>
+                    <span v-if="comment.createdAt !== comment.updatedAt">
+                        &bull; {{ i18n('edited') }}
+                    </span>
+                    <div class="is-pulled-right is-flex"
+                        v-if="!isNew && !isEditing && controls">
+                        <a class="button is-naked is-small mr-1"
+                            @click="originalBody = comment.body;"
+                            v-if="comment.isEditable">
+                            <span class="icon is-small">
+                                <fa icon="pencil-alt"/>
+                            </span>
+                        </a>
+                        <confirmation placement="bottom-end"
+                            @confirm="$emit('delete')"
+                            @show="confirmation = true"
+                            @hide="confirmation = controls = false"
+                            v-if="comment.isDeletable">
+                            <a class="button is-naked is-small"
+                                @click="confirmation = true">
+                                <span class="icon is-small">
+                                    <fa icon="trash-alt"/>
+                                </span>
+                            </a>
+                        </confirmation>
+                    </div>
+                </div>
+                <div class="comment-body"
+                    v-html="highlightTaggedUsers"
+                    v-if="!isEditing && !isNew"/>
+                <div v-else>
+                    <inputor v-bind="$attrs"
+                         :comment="comment"/>
+                    <div class="mt-2 has-text-right">
+                        <a class="button is-rounded is-bold mr-1 is-small action"
+                            @click="isNew ? $emit('cancel-add') : cancelAdd()">
+                            <span>
+                                {{ i18n('Cancel') }}
+                            </span>
+                            <span class="icon is-small">
+                                <fa icon="ban"/>
+                            </span>
+                        </a>
+                        <a v-tooltip.right="{
+                                content: i18n('Shift + Enter to post'),
+                                delay: 800
+                            }"
+                            class="button is-rounded is-bold is-success is-small action"
+                            @click="isNew ? $emit('save') : update()">
+                            <span v-if="isNew">
+                                {{ i18n('Post') }}
+                            </span>
+                            <span v-else>
+                                {{ i18n('Update') }}
+                            </span>
+                            <span class="icon is-small">
+                                <fa icon="check"/>
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </article>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+    faPencilAlt, faTrashAlt, faCheck, faBan,
+} from '@fortawesome/free-solid-svg-icons';
+import Confirmation from '@enso-ui/confirmation/bulma';
+import format from '@enso-ui/ui/src/modules/plugins/date-fns/format';
+import formatDistance from '@enso-ui/ui/src/modules/plugins/date-fns/formatDistance';
+import Inputor from './Inputor.vue';
+
+library.add(faPencilAlt, faTrashAlt, faCheck, faBan);
+
+export default {
+    name: 'Comment',
+
+    components: { Fa, Inputor, Confirmation },
+
+    inject: ['i18n', 'route'],
+
+    props: {
+        comment: {
+            type: Object,
+            required: true,
+        },
+        humanReadableDates: {
+            type: Boolean,
+            default: true,
+        },
+        index: {
+            type: Number,
+            default: null,
+        },
+        isNew: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    emits: ['cancel-add', 'cancel-edit', 'delete', 'save'],
+
+    data: () => ({
+        controls: false,
+        confirmation: false,
+        originalBody: null,
+    }),
+
+    computed: {
+        ...mapState(['meta', 'user']),
+        highlightTaggedUsers() {
+            let { body } = this.comment;
+            return body;
+        },
+        isEditing() {
+            return this.originalBody !== null;
+        },
+        commentedAt() {
+            return this.comment.updatedAt || this.comment.createdAt;
+        },
+    },
+
+    methods: {
+        cancelAdd() {
+            this.comment.body = this.originalBody;
+            this.controls = false;
+            this.originalBody = null;
+            this.$emit('cancel-edit');
+        },
+        update() {
+            if (!this.comment.body.trim()) {
+                return;
+            }
+
+            this.controls = false;
+
+            if (this.comment.body === this.originalBody) {
+                this.originalBody = null;
+                return;
+            }
+
+            this.$emit('save');
+
+            this.originalBody = null;
+        },
+        timeFromNow(date) {
+            return formatDistance(date);
+        },
+        dateFormat(date) {
+            return format(date, `${this.meta.dateFormat} H:i`);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+    .media {
+        border-radius: inherit;
+        .comment-body {
+            word-break: break-all;
+        }
+
+        .media-content {
+            overflow: unset;
+        }
+    }
+</style>
diff --git a/src/bulma/pages/tasks/components/comments/Comments.vue b/src/bulma/pages/tasks/components/comments/Comments.vue
new file mode 100644
index 0000000..792c44e
--- /dev/null
+++ b/src/bulma/pages/tasks/components/comments/Comments.vue
@@ -0,0 +1,226 @@
+<template>
+    <div class="comments-wrapper">
+        <div class="field is-grouped">
+            <slot name="controls"
+                  :create="create"
+                  :internal-query="internalQuery"
+                  :fetch="fetch">
+                <p class="control">
+                    <a class="button is-rounded is-small is-bold is-info"
+                       @click="create()">
+                        <span v-if="!compact">
+                            {{ i18n('Add') }}
+                        </span>
+                        <span class="icon">
+                            <fa icon="plus"/>
+                        </span>
+                    </a>
+                </p>
+                <p class="control has-icons-left has-icons-right is-expanded">
+                    <input v-model="internalQuery"
+                           class="input is-rounded is-small is-expanded"
+                           type="text"
+                           :placeholder="i18n('Filter')">
+                    <span class="icon is-small is-left">
+                        <fa icon="search"/>
+                    </span>
+                    <span v-if="internalQuery"
+                          class="icon is-small is-right clear-button"
+                          @click="internalQuery = ''">
+                        <a class="delete is-small"/>
+                    </span>
+                </p>
+                <p class="control">
+                    <a class="button is-rounded is-small is-bold ml-2"
+                       @click="fetch()">
+                        <span v-if="!compact">
+                            {{ i18n('Reload') }}
+                        </span>
+                        <span class="icon">
+                            <fa icon="sync"/>
+                        </span>
+                    </a>
+                </p>
+            </slot>
+        </div>
+        <div class="comments p-1">
+            <comment v-if="comment"
+                     :id="id"
+                     is-new
+                     :type="type"
+                     :comment="comment"
+                     :index="-1"
+                     @cancel-add="comment = null"
+                     @save="add"/>
+            <comment v-for="(filteredComment, index) in filteredComments"
+                     :key="filteredComment.id"
+                     :comment="filteredComment"
+                     :index="index"
+                     :human-readable-dates="humanReadableDates"
+                     @save="update(filteredComment)"
+                     @delete="destroy(index)"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlus, faSync, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { mapState } from 'vuex';
+import Comment from './Comment.vue';
+
+library.add(faPlus, faSync, faSearch);
+
+export default {
+    name: 'Comments',
+
+    components: { Fa, Comment },
+
+    inject: ['errorHandler', 'http', 'i18n', 'route'],
+
+    props: {
+        id: {
+            type: [String, Number],
+            required: true,
+        },
+        type: {
+            type: String,
+            required: true,
+        },
+        query: {
+            type: String,
+            default: null,
+        },
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    emits: ['update'],
+
+    data: v => ({
+        comments: [],
+        comment: null,
+        loading: false,
+        internalQuery: '',
+        path: v.$route.path,
+        diffForHumansDate: null,
+    }),
+
+    computed: {
+        ...mapState(['user']),
+        filteredComments() {
+            const query = this.internalQuery.toLowerCase();
+
+            return query
+                ? this.comments.filter(({ body, owner }) => body.toLowerCase().indexOf(query) > -1
+                    || owner.person.name.toLowerCase().indexOf(query) > -1)
+                : this.comments;
+        },
+        count() {
+            return this.filteredComments.length;
+        },
+        params() {
+            return {
+                task_id: this.id,
+            };
+        },
+    },
+
+    watch: {
+        query() {
+            this.internalQuery = this.query;
+        },
+    },
+
+    created() {
+        this.fetch();
+    },
+
+    methods: {
+        fetch() {
+            this.loading = true;
+
+            this.http.get(
+                this.route('tasks.comments.index', this.id),
+                { params: this.params },
+            ).then(({ data }) => {
+                this.comments = data.data;
+                this.humanReadableDates = data.humanReadableDates;
+                this.loading = false;
+                this.$emit('update');
+            }).catch(this.errorHandler);
+        },
+
+        factory() {
+            return {
+                body: '',
+                owner: this.user,
+            };
+        },
+        create() {
+            if (this.comment) {
+                return;
+            }
+
+            this.comment = this.factory();
+        },
+        add() {
+            if (!this.comment.body.trim()) {
+                return;
+            }
+
+            this.loading = true;
+
+            this.http.post(
+                this.route('tasks.comments.store', this.id),
+                this.postParams(),
+            ).then(({ data }) => {
+                this.comments.unshift(data);
+                this.comment = null;
+                this.$emit('update');
+                this.loading = false;
+            }).catch(this.errorHandler);
+        },
+        postParams() {
+            return {
+                body: this.comment.body,
+                path: this.path,
+                ...this.params,
+            };
+        },
+        update(comment) {
+            comment.path = this.path;
+            this.loading = true;
+
+            this.http.patch(
+                this.route('tasks.comments.update', comment.id),
+                comment,
+            ).then(({ data }) => {
+                Object.assign(comment, data);
+                this.loading = false;
+            }).catch(this.errorHandler);
+        },
+        destroy(index) {
+            this.loading = true;
+
+            this.http.delete(this.route('tasks.comments.destroy', this.comments[index].id))
+                .then(() => {
+                    this.comments.splice(index, 1);
+                    this.$emit('update');
+                    this.loading = false;
+                }).catch(this.errorHandler);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.comments-wrapper .comments {
+    max-height: 500px;
+    overflow-y: auto;
+}
+</style>
+
diff --git a/src/bulma/pages/tasks/components/comments/Inputor.vue b/src/bulma/pages/tasks/components/comments/Inputor.vue
new file mode 100644
index 0000000..a42146b
--- /dev/null
+++ b/src/bulma/pages/tasks/components/comments/Inputor.vue
@@ -0,0 +1,243 @@
+<template>
+    <fade>
+        <div class="atwho-wrapper"
+            @keyup="filter"
+            @keydown.up="onUp"
+            @keydown.down="onDown"
+            @keydown.enter="onEnter">
+            <div v-show="items.length"
+                v-click-outside="hide"
+                class="atwho dropdown-menu">
+                <div class="dropdown-content">
+                    <a v-for="(item, index) in items"
+                        :key="index"
+                        :class="['dropdown-item', { 'is-active': index === position}]"
+                        @mousemove="position = index"
+                        @click="selectItem">
+                        <article class="media">
+                            <div class="media-left">
+                                <figure class="image is-24x24">
+                                    <img class="is-rounded"
+                                        :src="'/api/core/avatars/' + item.avatar.id">
+                                </figure>
+                            </div>
+                            <div class="media-content">
+                                <div class="content"
+                                    v-html="highlight(item.person.name)"/>
+                            </div>
+                        </article>
+                    </a>
+                </div>
+            </div>
+            <div class="field">
+                <p class="control">
+                    <textarea v-model="comment.body"
+                        v-focus
+                        class="textarea vue-comment"
+                        :placeholder="i18n('Type a new comment')"
+                        @keyup.shift.enter="$emit('save')"/>
+                </p>
+            </div>
+        </div>
+    </fade>
+</template>
+
+<script>
+import { Fade } from '@enso-ui/transitions';
+import { mapState } from 'vuex';
+import debounce from 'lodash/debounce';
+import getCaretCoordinates from 'textarea-caret';
+import { focus, clickOutside } from '@enso-ui/directives';
+
+export default {
+    name: 'Inputor',
+
+    directives: { focus, clickOutside },
+
+    components: { Fade },
+
+    inject: ['errorHandler', 'http', 'i18n', 'route'],
+
+    props: {
+        comment: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    emits: ['save'],
+
+    data: () => ({
+        items: [],
+        position: null,
+        query: null,
+    }),
+
+    computed: {
+        ...mapState(['user']),
+        hasText() {
+            return this.comment.body.trim();
+        },
+        atwhoContainer() {
+            return this.$el.querySelector('.atwho');
+        },
+        textarea() {
+            return this.$el.querySelector('textarea');
+        },
+    },
+
+    watch: {
+        query() {
+            if (this.query !== null) {
+                this.fetch();
+            }
+        },
+    },
+
+    created() {
+        this.fetch = debounce(this.fetch, 200);
+    },
+
+    methods: {
+        fetch() {
+            this.http.get(this.route('core.comments.users'), {
+                params: { query: this.query, paginate: 6 },
+            }).then(({ data }) => {
+                this.items = data
+                    .filter(({ id }) => id !== this.user.id);
+
+                if (this.items.length) {
+                    this.position = 0;
+                }
+            }).catch(this.errorHandler);
+        },
+        filter(event) {
+            const arg = this.comment.body
+                .substr(0, this.textarea.selectionEnd)
+                .split(' ')
+                .pop();
+
+            const showAtwho = arg[0] === '@'
+                && (this.comment.body.length === this.textarea.selectionEnd
+                    || this.comment.body[this.textarea.selectionEnd] === ' ');
+
+            if (!showAtwho) {
+                this.hide();
+            }
+
+            if (showAtwho) {
+                this.query = arg.substring(1);
+                this.atwho(event);
+            }
+        },
+        atwho(event) {
+            const caret = getCaretCoordinates(event.target, event.target.selectionEnd);
+            this.atwhoContainer.style.top = `${caret.top + 25}px`;
+            this.atwhoContainer.style.left = `${caret.left - 15}px`;
+        },
+        onUp(event) {
+            if (this.position > 0) {
+                this.position--;
+                event.preventDefault();
+            }
+        },
+        onDown(event) {
+            if (this.position < this.items.length - 1) {
+                this.position++;
+                event.preventDefault();
+            }
+        },
+        onEnter(event) {
+            if (this.position !== null) {
+                this.selectItem();
+                event.preventDefault();
+            }
+        },
+        selectItem() {
+            const { search, replace } = this.transform();
+
+            this.comment.body = this.comment.body.replace(search, replace);
+
+            this.tagUser();
+            this.hide();
+
+            this.$nextTick(() => {
+                this.textarea.selectionEnd = replace.length;
+            });
+        },
+        hide() {
+            this.items = [];
+            this.position = null;
+            this.query = null;
+        },
+        transform() {
+            const item = this.items[this.position];
+            const cursorPosition = this.textarea.selectionEnd;
+            let search = this.comment.body.substr(0, cursorPosition);
+            const atPosition = search.lastIndexOf('@');
+
+            if (this.comment.body[search.length] === ' ') {
+                search += ' ';
+            }
+
+            let replace = search.substr(0, atPosition + 1) + item.person.name;
+            replace += ' ';
+
+            return { search, replace };
+        },
+        highlight(item) {
+            return item
+                .replace(new RegExp(`(${this.query})`, 'gi'), '<b>$1</b>');
+        },
+        tagUser() {
+            const user = this.items[this.position];
+
+            this.comment.taggedUsers.push({
+                id: user.id,
+                name: user.person.name,
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+    .atwho-wrapper {
+        position: relative;
+
+        .dropdown-menu {
+            display: unset;
+            top: unset;
+            left: unset;
+            min-width: unset;
+            padding-top: unset;
+
+            .dropdown-content {
+                width: fit-content;
+                padding: 0.25rem 0;
+
+                a.dropdown-item {
+                    padding: .1rem 0.5rem;
+                }
+
+                .media {
+                    border-top: none;
+                    padding-top: 0;
+
+                    .media-left {
+                        margin-right: 0.5rem;
+                    }
+                }
+            }
+        }
+
+        textarea.vue-comment {
+            resize: none;
+            word-wrap: break-word;
+
+            &:not([rows]) {
+                min-height: 90px;
+            }
+        }
+    }
+</style>
diff --git a/src/bulma/routes/tasks/show.js b/src/bulma/routes/tasks/show.js
new file mode 100644
index 0000000..971a4dc
--- /dev/null
+++ b/src/bulma/routes/tasks/show.js
@@ -0,0 +1,11 @@
+const Show = () => import('../../pages/tasks/Show.vue');
+
+export default {
+    name: 'tasks.show',
+    path: ':task',
+    component: Show,
+    meta: {
+        breadcrumb: 'show',
+        title: 'Checklist',
+    },
+};

From af7b9de3effd62684e37b0d5342400fb6ce6e9d0 Mon Sep 17 00:00:00 2001
From: MusahMusah <shehialiyu0@gmail.com>
Date: Thu, 4 Aug 2022 16:28:48 +0100
Subject: [PATCH 2/3] chore: removed unwanted codeblocks

---
 src/bulma/pages/tasks/components/Filters.vue | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index e3f85a4..0c1088e 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -1,20 +1,5 @@
 <template>
     <div class="columns is-centered is-multiline">
-        <div class="column is-narrow">
-            <enso-select-filter class="box raises-on-hover allocation-filter"
-                v-model="project"
-                source="administration.projects.options"
-                label="name"
-                :name="i18n('Project')"/>
-        </div>
-        <div class="column is-narrow">
-            <enso-select-filter class="box raises-on-hover allocation-filter"
-                v-model="filters.tasks.activity_id"
-                :params="{ project_id: project }"
-                source="administration.activities.options"
-                label="name"
-                :name="i18n('Activity')"/>
-        </div>
         <div class="column is-narrow">
             <enso-select-filter class="box raises-on-hover allocation-filter"
                 v-model="filters.tasks.allocated_to"
@@ -82,7 +67,6 @@ export default {
         overdueOptions: [
             { value: true, icon: 'exclamation', class: 'has-text-danger' },
         ],
-        project: null,
     }),
 
     computed: {

From 665e8cf58b53ac863d66d6c01e1435cec3db763b Mon Sep 17 00:00:00 2001
From: MusahMusah <shehialiyu0@gmail.com>
Date: Fri, 5 Aug 2022 12:26:05 +0100
Subject: [PATCH 3/3] chore: updated file components

---
 package.json                                  |  2 +-
 .../pages/tasks/components/BaseInput.vue      | 32 -------------------
 .../pages/tasks/components/ChecklistItems.vue |  4 +--
 src/bulma/pages/tasks/components/Filters.vue  | 16 ++++++++++
 4 files changed, 19 insertions(+), 35 deletions(-)
 delete mode 100644 src/bulma/pages/tasks/components/BaseInput.vue

diff --git a/package.json b/package.json
index 7c38516..27e1628 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/tasks",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "description": "Basic tasks package",
   "main": "src/bulma/pages/tasks/Index.vue",
   "scripts": {
diff --git a/src/bulma/pages/tasks/components/BaseInput.vue b/src/bulma/pages/tasks/components/BaseInput.vue
deleted file mode 100644
index 7589e7b..0000000
--- a/src/bulma/pages/tasks/components/BaseInput.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <div class="column is-4">
-        <p class="control has-icons-left has-icons-right">
-            <input
-                v-model="checklist"
-                class="input"
-                placeholder="Add a checklist"
-                @keypress.enter="add"
-            >
-            <span class="icon is-small is-left mauto">
-              <avatar :user="task.allocatedTo"
-                      class="is-32x32"/>
-            </span>
-        </p>
-    </div>
-</template>
-
-<script>
-import {Avatar} from '@enso-ui/users';
-
-export default {
-    name: "BaseInput",
-
-    components: {Avatar},
-}
-</script>
-
-<style scoped>
-input::placeholder {
-    padding-left: 1rem;
-}
-</style>
\ No newline at end of file
diff --git a/src/bulma/pages/tasks/components/ChecklistItems.vue b/src/bulma/pages/tasks/components/ChecklistItems.vue
index 1ce2c8d..307726b 100644
--- a/src/bulma/pages/tasks/components/ChecklistItems.vue
+++ b/src/bulma/pages/tasks/components/ChecklistItems.vue
@@ -4,14 +4,14 @@
             {{ i18n('Checklist') }}
             <a class="has-background-white has-text-grey-dark">
                 <span class="tag is-dark counter">
-                    {{ task.completedChecklist.percentageString }}
+                    {{ task.completedChecklist }}
                 </span>
             </a>
         </h4>
 
         <div class="columns is-multiline is-mobile is-gaples">
             <ChecklistItem
-                v-for="(checklist, index) in task.checklist"
+                v-for="(checklist, index) in task.taskChecklistItems"
                 :key="checklist.id"
                 :checklist="checklist"
                 :task="task"
diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index 0c1088e..e3f85a4 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -1,5 +1,20 @@
 <template>
     <div class="columns is-centered is-multiline">
+        <div class="column is-narrow">
+            <enso-select-filter class="box raises-on-hover allocation-filter"
+                v-model="project"
+                source="administration.projects.options"
+                label="name"
+                :name="i18n('Project')"/>
+        </div>
+        <div class="column is-narrow">
+            <enso-select-filter class="box raises-on-hover allocation-filter"
+                v-model="filters.tasks.activity_id"
+                :params="{ project_id: project }"
+                source="administration.activities.options"
+                label="name"
+                :name="i18n('Activity')"/>
+        </div>
         <div class="column is-narrow">
             <enso-select-filter class="box raises-on-hover allocation-filter"
                 v-model="filters.tasks.allocated_to"
@@ -67,6 +82,7 @@ export default {
         overdueOptions: [
             { value: true, icon: 'exclamation', class: 'has-text-danger' },
         ],
+        project: null,
     }),
 
     computed: {