From 4f8edb4154b6701f5a9856b3935e330e1016a2bc Mon Sep 17 00:00:00 2001
From: Abdullahi Abdul Kabir <abdullahiabdulkabir1@gmail.com>
Date: Wed, 3 Aug 2022 10:01:26 +0100
Subject: [PATCH 1/6] Add Checklist items

---
 src/bulma/modules/task.js                     |  14 +
 src/bulma/pages/tasks/Index.vue               |  19 +-
 src/bulma/pages/tasks/Show.vue                | 175 +++++++++++++
 src/bulma/pages/tasks/components/Filters.vue  |  77 +++---
 .../components/checklists/ChecklistItem.vue   | 160 ++++++++++++
 .../components/checklists/ChecklistItems.vue  | 134 ++++++++++
 .../tasks/components/comments/Comment.vue     | 196 ++++++++++++++
 .../tasks/components/comments/Comments.vue    | 220 ++++++++++++++++
 .../tasks/components/comments/Inputor.vue     | 243 ++++++++++++++++++
 src/bulma/routes/tasks/show.js                |  11 +
 10 files changed, 1212 insertions(+), 37 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/checklists/ChecklistItem.vue
 create mode 100644 src/bulma/pages/tasks/components/checklists/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..67469ea
--- /dev/null
+++ b/src/bulma/modules/task.js
@@ -0,0 +1,14 @@
+const cssClass = (statuses, { status }) => {
+    switch (status) {
+        case parseInt(statuses.Finished):
+            return 'is-success';
+        case parseInt(statuses.Progress):
+            return 'is-warning';
+        case parseInt(statuses.New):
+            return 'is-info';
+        default:
+            return '';
+    }
+};
+
+export default cssClass;
diff --git a/src/bulma/pages/tasks/Index.vue b/src/bulma/pages/tasks/Index.vue
index a1b8a8c..1057260 100644
--- a/src/bulma/pages/tasks/Index.vue
+++ b/src/bulma/pages/tasks/Index.vue
@@ -44,6 +44,12 @@
                     </template>
                 </dropdown>
             </template>
+            <template #status="{ column, row }">
+                <span class="tag is-table-tag "
+                    :class="cssClass(column.enum, row)">
+                    {{ column.enum._get(row.status) }}
+                </span>
+            </template>
             <template #reminder="{ row }">
                 <dropdown :triggers="['click']"
                     :auto-hide="false"
@@ -95,13 +101,6 @@
                     :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 +130,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,7 +159,7 @@ export default {
         ready: false,
         filters: {
             tasks: {
-                completed: false,
+                status: 1,
                 flag: null,
                 allocated_to: null,
             },
@@ -205,6 +205,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..1c529c7
--- /dev/null
+++ b/src/bulma/pages/tasks/Show.vue
@@ -0,0 +1,175 @@
+<template>
+    <div v-if="task" class="containter m-auto">
+        <div class="columns mx-0 box">
+            <div class="column is-two-third-tablet px-5">
+                <div class="columns">
+                    <div class="column is-three-quarters is-size-7 pl-5">
+                        Updated {{ task.updatedAt }} | Created by
+                        <a>
+                            <strong>{{ task.createdBy.person.name }}</strong>
+                        </a>
+                    </div>
+                    <div class="column pt-0">
+                        <fa
+                            :class="{ 'has-text-grey': !task.muted }"
+                            @click="notification"
+                            class="bell is-clickable is-pulled-right is-flex fa-2xl" icon="bell"/>
+                    </div>
+                </div>
+                <div class="column">
+                    <h4 class="title is-4">
+                        {{ task.name }}
+                    </h4>
+                </div>
+                <div class="column">
+                    <div class="columns">
+                        <div class="column is-one-fifth">
+                            <div class="mt-3">Status</div>
+                            <div class="mt-4">From - To</div>
+                            <div class="mt-3">Flag</div>
+                            <div class="mt-3">Allocated To</div>
+                        </div>
+                        <div class="column is-two-fifth">
+                            <div class="mt-3">
+                                <span v-for="(status, id) in enums.statuses._all()">
+                                    <span class="tag is-table-tag"
+                                        :class="cssClass(enums.statuses, task)"
+                                        v-if="task.status ==id">
+                                        {{ status }}
+                                  </span>
+                                </span>
+                            </div>
+                            <div class="mt-3">
+                                {{ task.from }} - {{ task.to }}
+                            </div>
+                            <div class="mt-3">
+                                <span v-for="(flag, id) in enums.flags._all()"
+                                   class="icon" :class="`has-text-${flag.toLowerCase()}`">
+                                   <fa v-if="id==task.flag" icon="flag"/>
+                                </span>
+                            </div>
+                            <div class="mt-3">
+                                <figure class="is-flex is-align-items-center avatar">
+                                    <p class="image is-32x32 mr-2">
+                                        <img class="is-rounded"
+                                            alt="avatar"
+                                            :src="route('core.avatars.show', task.allocatedTo.avatar.id)">
+                                    </p>
+                                    {{ task.allocatedTo.person.name }}
+                                </figure>
+                            </div>
+                        </div>
+                    </div>
+                    <Divider/>
+                    <div class="mt-5">
+                        <div>
+                            <strong>{{ i18n('Description') }}</strong>
+                        </div>
+                        <div class="my-4">
+                            {{ task.description }}
+                        </div>
+                    </div>
+                    <Divider/>
+                    <div class="mt-5">
+                        <div>
+                            <strong>{{ i18n('Checklist') }} ({{task.completedTaskChecklistItems}})</strong>
+                        </div>
+                        <div>
+                            <checklist-items :id="taskId"
+                                :taskChecklistItems="taskChecklistItems"
+                                @update="fetch();"
+                                type="task"
+                                ref="checklists"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="column pt-0 is-one-third">
+                <comments :id="taskId"
+                    type="task"
+                    ref="comments"/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {FontAwesomeIcon as Fa} from '@fortawesome/vue-fontawesome';
+import {library} from '@fortawesome/fontawesome-svg-core';
+import {faCloudDownloadAlt, faBell} from '@fortawesome/free-solid-svg-icons';
+import {hljs} from '@enso-ui/directives';
+import {mapState} from "vuex";
+import ChecklistItems from './components/checklists/ChecklistItems.vue';
+import cssClass from '../../modules/task';
+import Divider from '@enso-ui/divider';
+import Comments from './components/comments/Comments.vue';
+
+
+library.add(faCloudDownloadAlt, faBell);
+
+export default {
+    name: 'Show',
+
+    directives: {hljs},
+
+    components: {
+        Fa,
+        ChecklistItems,
+        Divider,
+        Comments
+    },
+
+    inject: ['errorHandler', 'http', 'i18n', 'route', 'toastr', 'routerErrorHandler'],
+
+    data: () => ({
+        task: null,
+        taskChecklistItems: [],
+
+    }),
+    computed: {
+        ...mapState(['meta', 'enums']),
+        taskId() {
+            return Number.parseInt(this.$route.params.task, 10);
+        },
+    },
+
+    created() {
+        this.fetch();
+    },
+
+    methods: {
+        fetch() {
+            this.http.get(this.route('tasks.show', this.$route.params.task))
+                .then(({data}) => {
+                    this.task = data.task;
+                    this.taskChecklistItems = data.task.taskChecklistItems;
+                }).catch(this.errorHandler);
+        },
+        cssClass(columnEnum, row) {
+            return cssClass(columnEnum, row);
+        },
+        notification() {
+            this.http.patch(this.route('tasks.update', {'task': this.task}),
+                {muted: !this.task.muted})
+                .then(({data: {message}}) => {
+                    this.toastr.success(message);
+                    this.fetch()
+                }).catch(error => {
+                if (error.response && error.response.status === 422) {
+                    this.toastr.warning(this.i18n(error.response.data.message));
+                } else {
+                    this.errorHandler(error);
+                }
+            });
+        }
+    },
+};
+</script>
+
+<style src="highlight.js/styles/atom-one-light.css"></style>
+
+<style lang="scss">
+.wrapper {
+    padding: 1.2em;
+}
+</style>
diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index b569642..32bbfe4 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -1,47 +1,67 @@
 <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="filters.tasks.allocated_to"
-                source="administration.users.options"
-                label="person.name"
-                :name="i18n('Allocated To')"/>
+        <div class="column is-narrow is-one-fifth">
+            <enso-select-filter class="box raises-on-hover"
+                                v-model="filters.tasks.allocated_to"
+                                source="administration.users.options"
+                                label="person.name"
+                                :name="i18n('Allocated To')"/>
         </div>
         <div class="column is-narrow flags-filter">
             <enso-filter class="box raises-on-hover"
-                v-model="filters.tasks.flag"
-                icons
-                :options="flagOptions"
-                :name="i18n('Importance')"/>
+                         v-model="filters.tasks.flag"
+                         icons
+                         :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 class="column is-narrow is-2">
+            <enso-select-filter class="box raises-on-hover "
+                                v-model="filters.tasks.status"
+                                :options="enums.statuses._select()"
+                                :name="i18n('Status')"/>
         </div>
         <div class="column is-narrow">
             <enso-filter class="box raises-on-hover"
-                v-model="params.overdue"
-                icons
-                :options="overdueOptions"
-                :name="i18n('Overdue')"/>
+                         v-model="params.overdue"
+                         icons
+                         :options="overdueOptions"
+                         :name="i18n('Overdue')"/>
+        </div>
+
+    </div>
+    <div class="columns is-centered is-multline">
+        <div class="column is-narrow is-one-fifth">
+            <enso-select-filter class="box raises-on-hover"
+                                v-model="project"
+                                source="projects.options"
+                                :name="i18n('Project')"/>
         </div>
+        <div class="column is-narrow is-one-fifth">
+            <enso-select-filter class="box raises-on-hover"
+                                source="activities.options"
+                                v-model="filters.tasks.activity_id"
+                                :params="{project_id: project}"
+                                :name="i18n('Activity')"/>
+        </div>
+    </div>
+    <div class="columns is-centered ">
         <div class="column is-narrow">
             <enso-date-filter class="box raises-on-hover"
-                v-model:filter="params.dateFilter"
-                v-model:interval="intervals.tasks.reminder"/>
+                              v-model:filter="params.dateFilter"
+                              v-model:interval="intervals.tasks.reminder"/>
         </div>
     </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import {mapState} from 'vuex';
 import {
     BooleanFilter, EnsoDateFilter, EnsoFilter, EnsoSelectFilter,
 } from '@enso-ui/filters/bulma';
-import { faFlag, faExclamation } from '@fortawesome/free-solid-svg-icons';
-import { library } from '@fortawesome/fontawesome-svg-core';
+import {faFlag, faExclamation} from '@fortawesome/free-solid-svg-icons';
+import {library} from '@fortawesome/fontawesome-svg-core';
+import {EnsoSelect} from '@enso-ui/select/bulma';
+
 
 library.add(faFlag, faExclamation);
 
@@ -49,7 +69,7 @@ export default {
     name: 'Filters',
 
     components: {
-        BooleanFilter, EnsoDateFilter, EnsoFilter, EnsoSelectFilter,
+        BooleanFilter, EnsoDateFilter, EnsoFilter, EnsoSelectFilter, EnsoSelect
     },
 
     inject: ['i18n'],
@@ -70,8 +90,9 @@ export default {
     },
 
     data: () => ({
+        project: null,
         overdueOptions: [
-            { value: true, icon: 'exclamation', class: 'has-text-danger' },
+            {value: true, icon: 'exclamation', class: 'has-text-danger'},
         ],
     }),
 
@@ -86,12 +107,10 @@ export default {
                 class: `has-text-${this.enums.flags._get(flag).toLowerCase()}`,
             }));
         },
+
     },
 };
 </script>
 
 <style lang="scss">
-.allocation-filter {
-    width: 250px;
-}
 </style>
diff --git a/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue b/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
new file mode 100644
index 0000000..451c34d
--- /dev/null
+++ b/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
@@ -0,0 +1,160 @@
+<template>
+    <div @mouseover="display = true"
+         @mouseleave="display = false">
+        <label class="checkbox" v-show="!editForm">
+            <input class="form-check-input mr-1"
+                @change="updateStatus($event)"
+                :checked="checklist.isCompleted"
+               type="checkbox" :value="isCompleted">
+        </label>
+        <span v-show="!editForm" class="checklistName"
+            @click="edit(checklist);
+            editForm = true"
+            :style="{textDecoration: checklist.isCompleted ? 'line-through' : ''}">
+              {{ checklist.name }}
+        </span>
+        <div v-show="editForm" class="mt-3">
+            <input class="textarea" v-model="updateChecklist.name"
+                      rows="2" placeholder="Add new to-do">
+            <div class="mt-3">
+                <button class="button is-rounded is-small is-bold mr-1 action" @click="editForm = false">
+                    <span>
+                        {{ i18n('Cancel') }}
+                    </span>
+                    <span class="icon is-small">
+                        <fa icon="ban"/>
+                    </span>
+                </button>
+                <button class="button is-rounded is-bold is-small is-success action" @click="update">
+                    <span>
+                        {{ i18n('Update') }}
+                    </span>
+                    <span class="icon">
+                        <fa icon="check"/>
+                    </span>
+                </button>
+            </div>
+        </div>
+        <span>
+            <button @click="empty(checklist)"
+                    class="ml-2 mt-1 delete is-small"
+                    v-show="display &&!editForm"
+            ></button>
+        </span>
+    </div>
+
+</template>
+
+<script>
+import {FontAwesomeIcon as Fa} from '@fortawesome/vue-fontawesome';
+import {library} from '@fortawesome/fontawesome-svg-core';
+import {faCheck, faPencilAlt, faTimes, faGripLines} from '@fortawesome/free-solid-svg-icons';
+import {mapState} from "vuex";
+
+library.add([
+    faCheck, faTimes, faPencilAlt, faGripLines
+]);
+
+export default {
+    name: 'Checklist Item',
+
+    components: {Fa},
+
+    inject: ['canAccess', 'http', 'i18n', 'route', 'toastr', 'errorHandler'],
+
+    emits: ['change-status'],
+
+    props: {
+        checklist: {
+            type: Object,
+            required: true,
+        },
+        createForm: {
+            type: Boolean,
+        },
+    },
+
+    watch: {
+        createForm() {
+            if (this.editForm) {
+                this.editForm = !this.createForm
+            }
+        },
+    },
+
+    data: () => ({
+        controls: false,
+        display: false,
+        editForm: false,
+        isCompleted: false,
+        updateChecklist: {
+            name: '',
+            task_id: '',
+            is_completed: false
+        },
+    }),
+    computed: {
+        ...mapState(['meta']),
+        collapsed() {
+            return !!this.checklist.isCompleted;
+        }
+    },
+    methods: {
+        updateStatus(e) {
+            const payload = {
+                name: this.checklist.name,
+                task_id: this.checklist.taskId,
+                order_index: this.checklist.orderIndex,
+                is_completed: e.target.checked
+            };
+
+            this.http.patch(this.route('tasks.checklistItems.update',
+         {'checklistItem': this.checklist}), payload)
+                .then(({data: {message}}) => {
+                    this.toastr.success(message);
+                    this.$parent.fetch()
+                }).catch(error => {
+                if (error.response && error.response.status === 422) {
+                    this.toastr.warning(this.i18n(error.response.data.message));
+                } else {
+                    this.errorHandler(error);
+                }
+            });
+        },
+        empty(checklist) {
+            this.http.delete(this.route('tasks.checklistItems.destroy',
+        {'checklistItem': checklist})).then(({data}) => {
+                this.toastr.success(data.message);
+                this.$parent.fetch()
+            }).catch(this.errorHandler)
+        },
+        edit(checklist) {
+            this.$emit('change-status');
+            this.updateChecklist.name = checklist.name
+            this.updateChecklist.task_id = checklist.taskId
+            this.updateChecklist.is_completed = checklist.isCompleted
+        },
+        update() {
+            this.http.patch(this.route('tasks.checklistItems.update',
+        {'checklistItem': this.checklist}),
+                this.updateChecklist)
+                .then(({data: {message}}) => {
+                    this.editForm = false
+                    this.toastr.success(message);
+                    this.$parent.fetch()
+                }).catch(error => {
+                if (error.response && error.response.status === 422) {
+                    this.toastr.warning(this.i18n(error.response.data.message));
+                } else {
+                    this.errorHandler(error);
+                }
+            });
+        },
+    }
+};
+</script>
+<style lang="scss">
+.delete:hover{
+    background:#cd4400;
+}
+</style>
diff --git a/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue b/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
new file mode 100644
index 0000000..52e8436
--- /dev/null
+++ b/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
@@ -0,0 +1,134 @@
+<template>
+    <div class="checklists-wrapper">
+        <div class="is-multiline mt-3">
+            <div class="mt-2"
+                 v-for="checklist in filteredChecklists"
+                 :key="checklist.id">
+                <checklist-item :id="id"
+                    @change-status="createForm = false"
+                    :checklist="checklist" :create-form="createForm"
+                    ref="checklist"/>
+            </div>
+        </div>
+        <div v-show="createForm" class="mt-3">
+            <input class="textarea" v-model="checklist.name"
+                      rows="2" placeholder="Add new to-do">
+            <div class="mt-3">
+                <button class="button is-rounded is-small is-bold mr-1 action" @click="createForm = false">
+                    <span>
+                        {{ i18n('Cancel') }}
+                    </span>
+                    <span class="icon is-small">
+                        <fa icon="ban"/>
+                    </span>
+                </button>
+                <button class="button is-rounded is-small is-bold is-success action" @click="create">
+                    <span>
+                        {{ i18n('Save') }}
+                    </span>
+                    <span class="icon">
+                        <fa icon="check"/>
+                    </span>
+                </button>
+            </div>
+        </div>
+        <div id="add-item" class="mt-5 is-size-6 is-align-items-center
+                is-clickable" @click="createForm = true;">
+             <span class="icon is-small">
+                 <fa icon="plus"/>
+             </span>
+            Add an Item
+        </div>
+    </div>
+</template>
+
+<script>
+import {FontAwesomeIcon as Fa} from '@fortawesome/vue-fontawesome';
+import {library} from '@fortawesome/fontawesome-svg-core';
+import {faPlus, faSync, faCheck} from '@fortawesome/free-solid-svg-icons';
+import ChecklistItem from './ChecklistItem.vue';
+import {mapMutations} from "vuex";
+
+library.add(faPlus, faSync, faCheck);
+
+export default {
+    name: 'Checklists Items',
+    components: {
+        Fa, ChecklistItem
+    },
+    inject: [
+        'canAccess', 'errorHandler', 'i18n', 'http', 'route',
+        'routerErrorHandler', 'toastr',
+    ],
+
+    props: {
+        id: {
+            type: Number,
+            required: true,
+        },
+        taskChecklistItems: {
+            type: Array,
+            required: true,
+        },
+    },
+
+    emits: ['update'],
+
+    data: () => ({
+        loading: false,
+        path: null,
+        createForm: false,
+        checklist: {
+            name: '',
+            is_completed: false
+        },
+        checklistsValues: [],
+    }),
+
+    computed: {
+        filteredChecklists() {
+            return this.checklistsValues;
+        },
+        count() {
+            return this.checklistsValues.length;
+        },
+    },
+
+    watch: {
+        taskChecklistItems() {
+            this.checklistsValues = this.taskChecklistItems;
+        },
+    },
+
+    created() {
+        this.fetch()
+    },
+
+    methods: {
+        fetch() {
+            this.checklistsValues = this.taskChecklistItems
+            this.$emit('update');
+        },
+        create() {
+            this.http.post(this.route('tasks.checklistItems.store'),
+                {task_id: this.id, ...this.checklist})
+                .then(({data: {message}}) => {
+                    this.fetch()
+                    this.checklist.name = ''
+                    this.createForm = false
+                    this.toastr.success(message)
+                })
+                .catch(this.errorHandler);
+        }
+    },
+};
+</script>
+<style>
+#add-item {
+    color: #d8d8d8;
+}
+
+#add-item:hover {
+    color: black;
+}
+</style>
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..4bbcc9e
--- /dev/null
+++ b/src/bulma/pages/tasks/components/comments/Comment.vue
@@ -0,0 +1,196 @@
+<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="comment.body"
+                    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']),
+        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..9363d5c
--- /dev/null
+++ b/src/bulma/pages/tasks/components/comments/Comments.vue
@@ -0,0 +1,220 @@
+<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
+                     :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,
+        },
+        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..b9301d5
--- /dev/null
+++ b/src/bulma/routes/tasks/show.js
@@ -0,0 +1,11 @@
+const TaskShow = () => import('../../../../src/bulma/pages/tasks/Show.vue');
+
+export default {
+    name: 'tasks.show',
+    path: ':task',
+    component: TaskShow,
+    meta: {
+        breadcrumb: 'show',
+        title: 'Show Task',
+    },
+};

From 6e5c0857bc73bdac8f6366b9d2800208cf843ceb Mon Sep 17 00:00:00 2001
From: Abdullahi Abdul Kabir <abdullahiabdulkabir1@gmail.com>
Date: Wed, 3 Aug 2022 10:01:47 +0100
Subject: [PATCH 2/6] 4.1.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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": {

From 1b7f19264d29ad2c3ee1f5378718b8f8489970fb Mon Sep 17 00:00:00 2001
From: Abdullahi Abdul Kabir <abdullahiabdulkabir1@gmail.com>
Date: Wed, 3 Aug 2022 10:15:42 +0100
Subject: [PATCH 3/6] Remove unrelated codes

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

diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index 32bbfe4..e19cda8 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -36,13 +36,6 @@
                                 source="projects.options"
                                 :name="i18n('Project')"/>
         </div>
-        <div class="column is-narrow is-one-fifth">
-            <enso-select-filter class="box raises-on-hover"
-                                source="activities.options"
-                                v-model="filters.tasks.activity_id"
-                                :params="{project_id: project}"
-                                :name="i18n('Activity')"/>
-        </div>
     </div>
     <div class="columns is-centered ">
         <div class="column is-narrow">

From b7a63623653e9ff1871bb4660570482fd3d60e12 Mon Sep 17 00:00:00 2001
From: Abdullahi Abdul Kabir <abdullahiabdulkabir1@gmail.com>
Date: Wed, 3 Aug 2022 11:02:08 +0100
Subject: [PATCH 4/6] Fix spacings, removed unsused codes

---
 src/bulma/pages/tasks/Index.vue               |   3 +-
 src/bulma/pages/tasks/Show.vue                |  81 +++++++-------
 src/bulma/pages/tasks/components/Filters.vue  |  64 +++++------
 .../components/checklists/ChecklistItem.vue   | 105 ++++++++++--------
 .../components/checklists/ChecklistItems.vue  |  59 ++++++----
 5 files changed, 163 insertions(+), 149 deletions(-)

diff --git a/src/bulma/pages/tasks/Index.vue b/src/bulma/pages/tasks/Index.vue
index 1057260..302e497 100644
--- a/src/bulma/pages/tasks/Index.vue
+++ b/src/bulma/pages/tasks/Index.vue
@@ -45,7 +45,8 @@
                 </dropdown>
             </template>
             <template #status="{ column, row }">
-                <span class="tag is-table-tag "
+                <span 
+                    class="tag is-table-tag "
                     :class="cssClass(column.enum, row)">
                     {{ column.enum._get(row.status) }}
                 </span>
diff --git a/src/bulma/pages/tasks/Show.vue b/src/bulma/pages/tasks/Show.vue
index 1c529c7..c870c04 100644
--- a/src/bulma/pages/tasks/Show.vue
+++ b/src/bulma/pages/tasks/Show.vue
@@ -6,14 +6,14 @@
                     <div class="column is-three-quarters is-size-7 pl-5">
                         Updated {{ task.updatedAt }} | Created by
                         <a>
-                            <strong>{{ task.createdBy.person.name }}</strong>
+                            <strong>{{ task.createdBy.person.name }}
+                            </strong>
                         </a>
                     </div>
                     <div class="column pt-0">
-                        <fa
-                            :class="{ 'has-text-grey': !task.muted }"
-                            @click="notification"
-                            class="bell is-clickable is-pulled-right is-flex fa-2xl" icon="bell"/>
+                        <fa 
+                            :class="{ 'has-text-grey': !task.muted }" @click="notification"
+                            class="bell is-clickable is-pulled-right is-flex fa-2xl" icon="bell" />
                     </div>
                 </div>
                 <div class="column">
@@ -32,27 +32,25 @@
                         <div class="column is-two-fifth">
                             <div class="mt-3">
                                 <span v-for="(status, id) in enums.statuses._all()">
-                                    <span class="tag is-table-tag"
-                                        :class="cssClass(enums.statuses, task)"
-                                        v-if="task.status ==id">
+                                    <span class="tag is-table-tag"  :class="cssClass(enums.statuses, task)"
+                                        v-if="task.status == id">
                                         {{ status }}
-                                  </span>
+                                    </span>
                                 </span>
                             </div>
                             <div class="mt-3">
                                 {{ task.from }} - {{ task.to }}
                             </div>
                             <div class="mt-3">
-                                <span v-for="(flag, id) in enums.flags._all()"
-                                   class="icon" :class="`has-text-${flag.toLowerCase()}`">
-                                   <fa v-if="id==task.flag" icon="flag"/>
+                                <span v-for="(flag, id) in enums.flags._all()" class="icon"
+                                    :class="`has-text-${flag.toLowerCase()}`">
+                                    <fa v-if="id == task.flag" icon="flag" />
                                 </span>
                             </div>
                             <div class="mt-3">
                                 <figure class="is-flex is-align-items-center avatar">
                                     <p class="image is-32x32 mr-2">
-                                        <img class="is-rounded"
-                                            alt="avatar"
+                                        <img class="is-rounded" alt="avatar"
                                             :src="route('core.avatars.show', task.allocatedTo.avatar.id)">
                                     </p>
                                     {{ task.allocatedTo.person.name }}
@@ -60,7 +58,7 @@
                             </div>
                         </div>
                     </div>
-                    <Divider/>
+                    <Divider />
                     <div class="mt-5">
                         <div>
                             <strong>{{ i18n('Description') }}</strong>
@@ -69,36 +67,34 @@
                             {{ task.description }}
                         </div>
                     </div>
-                    <Divider/>
+                    <Divider />
                     <div class="mt-5">
                         <div>
-                            <strong>{{ i18n('Checklist') }} ({{task.completedTaskChecklistItems}})</strong>
+                            <strong>{{ i18n('Checklist') }} ({{ task.completedTaskChecklistItems }})</strong>
                         </div>
                         <div>
-                            <checklist-items :id="taskId"
-                                :taskChecklistItems="taskChecklistItems"
-                                @update="fetch();"
-                                type="task"
-                                ref="checklists"/>
+                            <checklist-items :id="taskId" :taskChecklistItems="taskChecklistItems" @update="fetch();"
+                                type="task" ref="checklists" />
                         </div>
                     </div>
                 </div>
             </div>
             <div class="column pt-0 is-one-third">
-                <comments :id="taskId"
-                    type="task"
-                    ref="comments"/>
+                <comments 
+                    :id="taskId" 
+                    type="task" r
+                    ef="comments" />
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import {FontAwesomeIcon as Fa} from '@fortawesome/vue-fontawesome';
-import {library} from '@fortawesome/fontawesome-svg-core';
-import {faCloudDownloadAlt, faBell} from '@fortawesome/free-solid-svg-icons';
-import {hljs} from '@enso-ui/directives';
-import {mapState} from "vuex";
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCloudDownloadAlt, faBell } from '@fortawesome/free-solid-svg-icons';
+import { hljs } from '@enso-ui/directives';
+import { mapState } from "vuex";
 import ChecklistItems from './components/checklists/ChecklistItems.vue';
 import cssClass from '../../modules/task';
 import Divider from '@enso-ui/divider';
@@ -110,7 +106,7 @@ library.add(faCloudDownloadAlt, faBell);
 export default {
     name: 'Show',
 
-    directives: {hljs},
+    directives: { hljs },
 
     components: {
         Fa,
@@ -140,7 +136,7 @@ export default {
     methods: {
         fetch() {
             this.http.get(this.route('tasks.show', this.$route.params.task))
-                .then(({data}) => {
+                .then(({ data }) => {
                     this.task = data.task;
                     this.taskChecklistItems = data.task.taskChecklistItems;
                 }).catch(this.errorHandler);
@@ -149,24 +145,25 @@ export default {
             return cssClass(columnEnum, row);
         },
         notification() {
-            this.http.patch(this.route('tasks.update', {'task': this.task}),
-                {muted: !this.task.muted})
-                .then(({data: {message}}) => {
+            this.http.patch(this.route('tasks.update', { 'task': this.task }),
+                { muted: !this.task.muted })
+                .then(({ data: { message } }) => {
                     this.toastr.success(message);
                     this.fetch()
                 }).catch(error => {
-                if (error.response && error.response.status === 422) {
-                    this.toastr.warning(this.i18n(error.response.data.message));
-                } else {
-                    this.errorHandler(error);
-                }
-            });
+                    if (error.response && error.response.status === 422) {
+                        this.toastr.warning(this.i18n(error.response.data.message));
+                    } else {
+                        this.errorHandler(error);
+                    }
+                });
         }
     },
 };
 </script>
 
-<style src="highlight.js/styles/atom-one-light.css"></style>
+<style src="highlight.js/styles/atom-one-light.css">
+</style>
 
 <style lang="scss">
 .wrapper {
diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index e19cda8..103cfaa 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -2,58 +2,51 @@
     <div class="columns is-centered is-multiline">
         <div class="column is-narrow is-one-fifth">
             <enso-select-filter class="box raises-on-hover"
-                                v-model="filters.tasks.allocated_to"
-                                source="administration.users.options"
-                                label="person.name"
-                                :name="i18n('Allocated To')"/>
+                v-model="filters.tasks.allocated_to"
+                source="administration.users.options"
+                label="person.name"
+                :name="i18n('Allocated To')" />
         </div>
         <div class="column is-narrow flags-filter">
-            <enso-filter class="box raises-on-hover"
-                         v-model="filters.tasks.flag"
-                         icons
-                         :options="flagOptions"
-                         :name="i18n('Importance')"/>
+            <enso-filter class="box raises-on-hover" 
+                v-model="filters.tasks.flag"
+                icons 
+                :options="flagOptions"
+                :name="i18n('Importance')" />
         </div>
         <div class="column is-narrow is-2">
-            <enso-select-filter class="box raises-on-hover "
-                                v-model="filters.tasks.status"
-                                :options="enums.statuses._select()"
-                                :name="i18n('Status')"/>
+            <enso-select-filter
+                class="box raises-on-hover "
+                v-model="filters.tasks.status"
+                :options="enums.statuses._select()" 
+                :name="i18n('Status')" />
         </div>
         <div class="column is-narrow">
-            <enso-filter class="box raises-on-hover"
-                         v-model="params.overdue"
-                         icons
-                         :options="overdueOptions"
-                         :name="i18n('Overdue')"/>
-        </div>
-
-    </div>
-    <div class="columns is-centered is-multline">
-        <div class="column is-narrow is-one-fifth">
-            <enso-select-filter class="box raises-on-hover"
-                                v-model="project"
-                                source="projects.options"
-                                :name="i18n('Project')"/>
+            <enso-filter class="box raises-on-hover" 
+                v-model="params.overdue" 
+                icons 
+                :options="overdueOptions"
+                :name="i18n('Overdue')" />
         </div>
     </div>
     <div class="columns is-centered ">
         <div class="column is-narrow">
-            <enso-date-filter class="box raises-on-hover"
-                              v-model:filter="params.dateFilter"
-                              v-model:interval="intervals.tasks.reminder"/>
+            <enso-date-filter 
+                class="box raises-on-hover" 
+                v-model:filter="params.dateFilter"
+                v-model:interval="intervals.tasks.reminder" />
         </div>
     </div>
 </template>
 
 <script>
-import {mapState} from 'vuex';
+import { mapState } from 'vuex';
 import {
     BooleanFilter, EnsoDateFilter, EnsoFilter, EnsoSelectFilter,
 } from '@enso-ui/filters/bulma';
-import {faFlag, faExclamation} from '@fortawesome/free-solid-svg-icons';
-import {library} from '@fortawesome/fontawesome-svg-core';
-import {EnsoSelect} from '@enso-ui/select/bulma';
+import { faFlag, faExclamation } from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { EnsoSelect } from '@enso-ui/select/bulma';
 
 
 library.add(faFlag, faExclamation);
@@ -83,9 +76,8 @@ export default {
     },
 
     data: () => ({
-        project: null,
         overdueOptions: [
-            {value: true, icon: 'exclamation', class: 'has-text-danger'},
+            { value: true, icon: 'exclamation', class: 'has-text-danger' },
         ],
     }),
 
diff --git a/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue b/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
index 451c34d..089058f 100644
--- a/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
+++ b/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
@@ -1,55 +1,68 @@
 <template>
-    <div @mouseover="display = true"
-         @mouseleave="display = false">
+    <div 
+        @mouseover="display = true" 
+        @mouseleave="display = false">
         <label class="checkbox" v-show="!editForm">
-            <input class="form-check-input mr-1"
-                @change="updateStatus($event)"
+            <input class="form-check-input mr-1" 
+                @change="updateStatus($event)" 
                 :checked="checklist.isCompleted"
-               type="checkbox" :value="isCompleted">
+                type="checkbox" 
+                :value="isCompleted">
         </label>
-        <span v-show="!editForm" class="checklistName"
+        <span 
+            v-show="!editForm" 
+            class="checklistName" 
             @click="edit(checklist);
-            editForm = true"
-            :style="{textDecoration: checklist.isCompleted ? 'line-through' : ''}">
-              {{ checklist.name }}
+            editForm = true" 
+            :style="{ textDecoration: checklist.isCompleted ? 'line-through' : '' }">
+            {{ checklist.name }}
         </span>
         <div v-show="editForm" class="mt-3">
-            <input class="textarea" v-model="updateChecklist.name"
-                      rows="2" placeholder="Add new to-do">
+            <input 
+                class="textarea" 
+                v-model="updateChecklist.name" 
+                rows="2" 
+                placeholder="Add new to-do">
             <div class="mt-3">
-                <button class="button is-rounded is-small is-bold mr-1 action" @click="editForm = false">
+                <button class="button is-rounded 
+                    is-small is-bold mr-1 action" 
+                    @click="editForm = false">
                     <span>
                         {{ i18n('Cancel') }}
                     </span>
                     <span class="icon is-small">
-                        <fa icon="ban"/>
+                        <fa icon="ban" />
                     </span>
                 </button>
-                <button class="button is-rounded is-bold is-small is-success action" @click="update">
+                <button 
+                    class="button is-rounded is-bold 
+                    is-small is-success action" 
+                    @click="update">
                     <span>
                         {{ i18n('Update') }}
                     </span>
                     <span class="icon">
-                        <fa icon="check"/>
+                        <fa icon="check" />
                     </span>
                 </button>
             </div>
         </div>
         <span>
-            <button @click="empty(checklist)"
-                    class="ml-2 mt-1 delete is-small"
-                    v-show="display &&!editForm"
-            ></button>
+            <button 
+                @click="empty(checklist)" 
+                class="ml-2 mt-1 delete is-small" 
+                v-show="display && !editForm"></button>
         </span>
     </div>
 
 </template>
 
 <script>
-import {FontAwesomeIcon as Fa} from '@fortawesome/vue-fontawesome';
-import {library} from '@fortawesome/fontawesome-svg-core';
-import {faCheck, faPencilAlt, faTimes, faGripLines} from '@fortawesome/free-solid-svg-icons';
-import {mapState} from "vuex";
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCheck, faPencilAlt, faTimes, faGripLines } 
+    from '@fortawesome/free-solid-svg-icons';
+import { mapState } from "vuex";
 
 library.add([
     faCheck, faTimes, faPencilAlt, faGripLines
@@ -58,7 +71,7 @@ library.add([
 export default {
     name: 'Checklist Item',
 
-    components: {Fa},
+    components: { Fa },
 
     inject: ['canAccess', 'http', 'i18n', 'route', 'toastr', 'errorHandler'],
 
@@ -109,24 +122,24 @@ export default {
             };
 
             this.http.patch(this.route('tasks.checklistItems.update',
-         {'checklistItem': this.checklist}), payload)
-                .then(({data: {message}}) => {
+                { 'checklistItem': this.checklist }), payload)
+                .then(({ data: { message } }) => {
                     this.toastr.success(message);
                     this.$parent.fetch()
                 }).catch(error => {
-                if (error.response && error.response.status === 422) {
-                    this.toastr.warning(this.i18n(error.response.data.message));
-                } else {
-                    this.errorHandler(error);
-                }
-            });
+                    if (error.response && error.response.status === 422) {
+                        this.toastr.warning(this.i18n(error.response.data.message));
+                    } else {
+                        this.errorHandler(error);
+                    }
+                });
         },
         empty(checklist) {
             this.http.delete(this.route('tasks.checklistItems.destroy',
-        {'checklistItem': checklist})).then(({data}) => {
-                this.toastr.success(data.message);
-                this.$parent.fetch()
-            }).catch(this.errorHandler)
+                { 'checklistItem': checklist })).then(({ data }) => {
+                    this.toastr.success(data.message);
+                    this.$parent.fetch()
+                }).catch(this.errorHandler)
         },
         edit(checklist) {
             this.$emit('change-status');
@@ -136,25 +149,25 @@ export default {
         },
         update() {
             this.http.patch(this.route('tasks.checklistItems.update',
-        {'checklistItem': this.checklist}),
+                { 'checklistItem': this.checklist }),
                 this.updateChecklist)
-                .then(({data: {message}}) => {
+                .then(({ data: { message } }) => {
                     this.editForm = false
                     this.toastr.success(message);
                     this.$parent.fetch()
                 }).catch(error => {
-                if (error.response && error.response.status === 422) {
-                    this.toastr.warning(this.i18n(error.response.data.message));
-                } else {
-                    this.errorHandler(error);
-                }
-            });
+                    if (error.response && error.response.status === 422) {
+                        this.toastr.warning(this.i18n(error.response.data.message));
+                    } else {
+                        this.errorHandler(error);
+                    }
+                });
         },
     }
 };
 </script>
 <style lang="scss">
-.delete:hover{
-    background:#cd4400;
+.delete:hover {
+    background: #cd4400;
 }
 </style>
diff --git a/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue b/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
index 52e8436..1128b09 100644
--- a/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
+++ b/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
@@ -1,53 +1,64 @@
 <template>
     <div class="checklists-wrapper">
         <div class="is-multiline mt-3">
-            <div class="mt-2"
-                 v-for="checklist in filteredChecklists"
-                 :key="checklist.id">
-                <checklist-item :id="id"
-                    @change-status="createForm = false"
-                    :checklist="checklist" :create-form="createForm"
-                    ref="checklist"/>
+            <div class="mt-2" 
+                v-for="checklist in filteredChecklists" 
+                :key="checklist.id">
+                <checklist-item 
+                    :id="id" 
+                    @change-status="createForm = false" :checklist="checklist"
+                    :create-form="createForm" 
+                    ref="checklist" />
             </div>
         </div>
         <div v-show="createForm" class="mt-3">
-            <input class="textarea" v-model="checklist.name"
-                      rows="2" placeholder="Add new to-do">
+            <input 
+                class="textarea" 
+                v-model="checklist.name" 
+                rows="2" 
+                placeholder="Add new to-do">
             <div class="mt-3">
-                <button class="button is-rounded is-small is-bold mr-1 action" @click="createForm = false">
+                <button 
+                    class="button is-rounded 
+                    is-small is-bold mr-1 action" 
+                    @click="createForm = false">
                     <span>
                         {{ i18n('Cancel') }}
                     </span>
                     <span class="icon is-small">
-                        <fa icon="ban"/>
+                        <fa icon="ban" />
                     </span>
                 </button>
-                <button class="button is-rounded is-small is-bold is-success action" @click="create">
+                <button 
+                    class="button is-rounded 
+                    is-small is-bold is-success action" 
+                    @click="create">
                     <span>
                         {{ i18n('Save') }}
                     </span>
                     <span class="icon">
-                        <fa icon="check"/>
+                        <fa icon="check" />
                     </span>
                 </button>
             </div>
         </div>
-        <div id="add-item" class="mt-5 is-size-6 is-align-items-center
-                is-clickable" @click="createForm = true;">
-             <span class="icon is-small">
-                 <fa icon="plus"/>
-             </span>
+        <div id="add-item" 
+            class="mt-5 is-size-6 is-align-items-center
+            is-clickable" 
+            @click="createForm = true;">
+            <span class="icon is-small">
+                <fa icon="plus" />
+            </span>
             Add an Item
         </div>
     </div>
 </template>
 
 <script>
-import {FontAwesomeIcon as Fa} from '@fortawesome/vue-fontawesome';
-import {library} from '@fortawesome/fontawesome-svg-core';
-import {faPlus, faSync, faCheck} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlus, faSync, faCheck } from '@fortawesome/free-solid-svg-icons';
 import ChecklistItem from './ChecklistItem.vue';
-import {mapMutations} from "vuex";
 
 library.add(faPlus, faSync, faCheck);
 
@@ -111,8 +122,8 @@ export default {
         },
         create() {
             this.http.post(this.route('tasks.checklistItems.store'),
-                {task_id: this.id, ...this.checklist})
-                .then(({data: {message}}) => {
+                { task_id: this.id, ...this.checklist })
+                .then(({ data: { message } }) => {
                     this.fetch()
                     this.checklist.name = ''
                     this.createForm = false

From bed8501f92783217c3a3f4921e4d76885653646f Mon Sep 17 00:00:00 2001
From: Abdullahi Abdul Kabir <abdullahiabdulkabir1@gmail.com>
Date: Wed, 3 Aug 2022 11:11:41 +0100
Subject: [PATCH 5/6] Fix lint

---
 src/bulma/pages/tasks/components/Filters.vue  | 24 +++++++++----------
 .../components/checklists/ChecklistItem.vue   |  9 +++----
 .../components/checklists/ChecklistItems.vue  | 16 ++++++-------
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index 103cfaa..bf025ad 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -5,36 +5,36 @@
                 v-model="filters.tasks.allocated_to"
                 source="administration.users.options"
                 label="person.name"
-                :name="i18n('Allocated To')" />
+                :name="i18n('Allocated To')"/>
         </div>
         <div class="column is-narrow flags-filter">
-            <enso-filter class="box raises-on-hover" 
+            <enso-filter class="box raises-on-hover"
                 v-model="filters.tasks.flag"
-                icons 
+                icons
                 :options="flagOptions"
-                :name="i18n('Importance')" />
+                :name="i18n('Importance')"/>
         </div>
         <div class="column is-narrow is-2">
             <enso-select-filter
-                class="box raises-on-hover "
+                class="box raises-on-hover"
                 v-model="filters.tasks.status"
                 :options="enums.statuses._select()" 
-                :name="i18n('Status')" />
+                :name="i18n('Status')"/>
         </div>
         <div class="column is-narrow">
-            <enso-filter class="box raises-on-hover" 
-                v-model="params.overdue" 
-                icons 
+            <enso-filter class="box raises-on-hover"
+                v-model="params.overdue"
+                icons
                 :options="overdueOptions"
-                :name="i18n('Overdue')" />
+                :name="i18n('Overdue')"/>
         </div>
     </div>
-    <div class="columns is-centered ">
+    <div class="columns is-centered">
         <div class="column is-narrow">
             <enso-date-filter 
                 class="box raises-on-hover" 
                 v-model:filter="params.dateFilter"
-                v-model:interval="intervals.tasks.reminder" />
+                v-model:interval="intervals.tasks.reminder"/>
         </div>
     </div>
 </template>
diff --git a/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue b/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
index 089058f..b2ed851 100644
--- a/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
+++ b/src/bulma/pages/tasks/components/checklists/ChecklistItem.vue
@@ -31,7 +31,7 @@
                         {{ i18n('Cancel') }}
                     </span>
                     <span class="icon is-small">
-                        <fa icon="ban" />
+                        <fa icon="ban"/>
                     </span>
                 </button>
                 <button 
@@ -42,7 +42,7 @@
                         {{ i18n('Update') }}
                     </span>
                     <span class="icon">
-                        <fa icon="check" />
+                        <fa icon="check"/>
                     </span>
                 </button>
             </div>
@@ -60,8 +60,9 @@
 <script>
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faCheck, faPencilAlt, faTimes, faGripLines } 
-    from '@fortawesome/free-solid-svg-icons';
+import { 
+    faCheck, faPencilAlt, faTimes, faGripLines 
+} from '@fortawesome/free-solid-svg-icons';
 import { mapState } from "vuex";
 
 library.add([
diff --git a/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue b/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
index 1128b09..0c67e6a 100644
--- a/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
+++ b/src/bulma/pages/tasks/components/checklists/ChecklistItems.vue
@@ -5,10 +5,10 @@
                 v-for="checklist in filteredChecklists" 
                 :key="checklist.id">
                 <checklist-item 
-                    :id="id" 
+                    :id="id"
                     @change-status="createForm = false" :checklist="checklist"
                     :create-form="createForm" 
-                    ref="checklist" />
+                    ref="checklist"/>
             </div>
         </div>
         <div v-show="createForm" class="mt-3">
@@ -18,26 +18,26 @@
                 rows="2" 
                 placeholder="Add new to-do">
             <div class="mt-3">
-                <button 
-                    class="button is-rounded 
+                <button
+                    class="button is-rounded
                     is-small is-bold mr-1 action" 
                     @click="createForm = false">
                     <span>
                         {{ i18n('Cancel') }}
                     </span>
                     <span class="icon is-small">
-                        <fa icon="ban" />
+                        <fa icon="ban"/>
                     </span>
                 </button>
                 <button 
-                    class="button is-rounded 
+                    class="button is-rounded
                     is-small is-bold is-success action" 
                     @click="create">
                     <span>
                         {{ i18n('Save') }}
                     </span>
                     <span class="icon">
-                        <fa icon="check" />
+                        <fa icon="check"/>
                     </span>
                 </button>
             </div>
@@ -47,7 +47,7 @@
             is-clickable" 
             @click="createForm = true;">
             <span class="icon is-small">
-                <fa icon="plus" />
+                <fa icon="plus"/>
             </span>
             Add an Item
         </div>

From b7e57ec517c3f2b6d18db06c1933749c9953e93d Mon Sep 17 00:00:00 2001
From: Abdullahi Abdul Kabir <abdullahiabdulkabir1@gmail.com>
Date: Wed, 3 Aug 2022 11:17:49 +0100
Subject: [PATCH 6/6] Fix lint

---
 src/bulma/pages/tasks/components/Filters.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/bulma/pages/tasks/components/Filters.vue b/src/bulma/pages/tasks/components/Filters.vue
index bf025ad..0a3379c 100644
--- a/src/bulma/pages/tasks/components/Filters.vue
+++ b/src/bulma/pages/tasks/components/Filters.vue
@@ -31,8 +31,7 @@
     </div>
     <div class="columns is-centered">
         <div class="column is-narrow">
-            <enso-date-filter 
-                class="box raises-on-hover" 
+            <enso-date-filter class="box raises-on-hover" 
                 v-model:filter="params.dateFilter"
                 v-model:interval="intervals.tasks.reminder"/>
         </div>
@@ -48,7 +47,6 @@ import { faFlag, faExclamation } from '@fortawesome/free-solid-svg-icons';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { EnsoSelect } from '@enso-ui/select/bulma';
 
-
 library.add(faFlag, faExclamation);
 
 export default {
@@ -92,7 +90,6 @@ export default {
                 class: `has-text-${this.enums.flags._get(flag).toLowerCase()}`,
             }));
         },
-
     },
 };
 </script>