Updates for checklists items and Comments UI

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

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;

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>

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>

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>