From 5c3d8727e09b8cc8162b7080388baf26a9da37d3 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 15 Apr 2022 17:08:55 +0800
Subject: [PATCH] no message

---
 resources/assets/js/components/ChatInput.vue  | 190 +++++++++++++++---
 .../assets/sass/components/chat-input.scss    |  42 +++-
 2 files changed, 196 insertions(+), 36 deletions(-)

diff --git a/resources/assets/js/components/ChatInput.vue b/resources/assets/js/components/ChatInput.vue
index 859348932..f4d87c272 100755
--- a/resources/assets/js/components/ChatInput.vue
+++ b/resources/assets/js/components/ChatInput.vue
@@ -1,10 +1,12 @@
 <template>
-    <div class="chat-input-wrapper">
+    <div class="chat-input-wrapper" :class="modeClass">
         <div ref="editor"></div>
     </div>
 </template>
 
 <script>
+import {mapGetters, mapState} from "vuex";
+
 import Quill from 'quill';
 import "quill-mention";
 
@@ -53,7 +55,10 @@ export default {
             _content: '',
             _options: {},
 
+            modeClass: '',
+
             userList: null,
+            taskList: null,
         };
     },
     mounted() {
@@ -63,6 +68,11 @@ export default {
         this.quill = null
         delete this.quill
     },
+    computed: {
+        ...mapState(['cacheProjects', 'cacheTasks', 'cacheUserBasic', 'userId']),
+
+        ...mapGetters(['dashboardTask', 'transforTasks']),
+    },
     watch: {
         // Watch content change
         value(newVal) {
@@ -83,12 +93,14 @@ export default {
             }
         },
 
-        // Reset userList
+        // Reset lists
         dialogId() {
             this.userList = null;
+            this.taskList = null;
         },
         taskId() {
             this.userList = null;
+            this.taskList = null;
         },
     },
     methods: {
@@ -126,6 +138,7 @@ export default {
                         }
                     },
                     mention: {
+                        allowedChars: /^\S*$/,
                         mentionDenotationChars: ["@", "#"],
                         defaultMenuOrientation: this.defaultMenuOrientation,
                         renderItem: (data) => {
@@ -138,24 +151,25 @@ export default {
                             if (data.avatar) {
                                 return `<div class="mention-item-img${data.online ? ' online' : ''}"><img src="${data.avatar}"/><em></em></div><div class="mention-item-name">${data.value}</div>`;
                             }
-                            return `<div class="mention-item-name">${data.value}</div>`;
+                            return `<div class="mention-item-name" title="${data.value}">${data.value}</div>`;
                         },
                         renderLoading: () => {
                             return "Loading...";
                         },
                         source: (searchTerm, renderList, mentionChar) => {
-                            this.getSource(mentionChar).then(values => {
-                                if (searchTerm.length === 0) {
-                                    renderList(values, searchTerm);
-                                } else {
-                                    const matches = [];
-                                    for (let i = 0; i < values.length; i++) {
-                                        if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {
-                                            matches.push(values[i]);
-                                        }
+                            this.getSource(mentionChar).then(array => {
+                                let values = [];
+                                array.some(item => {
+                                    let list = item.list;
+                                    if (searchTerm && !item.ignoreSearch) {
+                                        list = list.filter(({value}) => $A.strExists(value, searchTerm));
                                     }
-                                    renderList(matches, searchTerm);
-                                }
+                                    if (list.length > 0 || item.ignoreSearch) {
+                                        item.label && values.push(...item.label)
+                                        list.length > 0 && values.push(...list)
+                                    }
+                                })
+                                renderList(values, searchTerm);
                             })
                         }
                     }
@@ -219,10 +233,32 @@ export default {
             return new Promise(resolve => {
                 switch (mentionChar) {
                     case "@": // @成员
+                        this.modeClass = "user-mention";
                         if (this.userList !== null) {
                             resolve(this.userList)
                             return;
                         }
+                        const atCallback = (list) => {
+                            if (list.length > 2) {
+                                this.userList = [{
+                                    ignoreSearch: true,
+                                    label: null,
+                                    list: [{id: 0, value: this.$L('所有人')}]
+                                }, {
+                                    ignoreSearch: false,
+                                    label: [{id: 0, value: this.$L('会话内成员'), disabled: true}],
+                                    list,
+                                }]
+                            } else {
+                                this.userList = [{
+                                    ignoreSearch: false,
+                                    label: null,
+                                    list
+                                }]
+                            }
+                            resolve(this.userList)
+                        }
+                        let array = [];
                         if (this.dialogId > 0) {
                             // 根据会话ID获取成员
                             this.$store.dispatch("call", {
@@ -233,11 +269,7 @@ export default {
                                 }
                             }).then(({data}) => {
                                 if (data.length > 0) {
-                                    this.userList = [
-                                        { id: 0, value: this.$L('所有人') },
-                                        { id: 0, value: this.$L('会话内成员'), disabled: true },
-                                    ];
-                                    this.userList.push(...data.map(item => {
+                                    array.push(...data.map(item => {
                                         return {
                                             id: item.userid,
                                             value: item.nickname,
@@ -245,29 +277,123 @@ export default {
                                             online: item.online,
                                         }
                                     }))
-                                } else {
-                                    this.userList = [];
                                 }
-                                resolve(this.userList)
+                                atCallback(array)
                             }).catch(_ => {
-                                resolve([]);
+                                atCallback(array)
                             });
-                            return;
                         } else if (this.taskId > 0) {
-                            // 根据任务ID获取成员 todo
-                            return;
+                            // 根据任务ID获取成员
+                            const task = this.cacheTasks.find(({id}) => id == this.taskId)
+                            if (task && $A.isArray(task.task_user)) {
+                                task.task_user.some(tmp => {
+                                    let item = this.cacheUserBasic.find(({userid}) => userid == tmp.userid);
+                                    if (item) {
+                                        array.push({
+                                            id: item.userid,
+                                            value: item.nickname,
+                                            avatar: item.userimg,
+                                            online: item.online,
+                                        })
+                                    }
+                                })
+                            }
+                            atCallback(array)
                         }
                         break;
 
-                    case "#": // #任务 todo
-                        resolve([
-                            { id: 3, value: "Fredrik Sundqvist 2" },
-                            { id: 4, value: "Patrik Sjölin 2" }
-                        ])
+                    case "#": // #任务
+                        this.modeClass = "task-mention";
+                        if (this.taskList !== null) {
+                            resolve(this.taskList)
+                            return;
+                        }
+                        const taskCallback = (list) => {
+                            this.taskList = [];
+                            // 项目任务
+                            if (list.length > 0) {
+                                list = list.map(item => {
+                                    return {
+                                        id: item.id,
+                                        value: item.name
+                                    }
+                                })
+                                this.taskList.push({
+                                    ignoreSearch: false,
+                                    label: [{id: 0, value: this.$L('项目未完成任务'), disabled: true}],
+                                    list,
+                                })
+                            }
+                            // 待完成任务
+                            let data = this.transforTasks(this.dashboardTask['all']);
+                            if (data.length > 0) {
+                                data = data.sort((a, b) => {
+                                    return $A.Date(a.end_at || "2099-12-31 23:59:59") - $A.Date(b.end_at || "2099-12-31 23:59:59");
+                                })
+                                this.taskList.push({
+                                    ignoreSearch: false,
+                                    label: [{id: 0, value: this.$L('我的待完成任务'), disabled: true}],
+                                    list: data.map(item => {
+                                        return {
+                                            id: item.id,
+                                            value: item.name
+                                        }
+                                    }),
+                                })
+                            }
+                            resolve(this.taskList)
+                        }
+                        //
+                        const projectId = this.getProjectId();
+                        if (projectId > 0) {
+                            this.$store.dispatch("getTaskForProject", projectId).then(_ => {
+                                let tasks = this.cacheTasks.filter(task => {
+                                    if (task.archived_at) {
+                                        return false;
+                                    }
+                                    return task.project_id == projectId
+                                        && task.parent_id === 0
+                                        && !task.archived_at
+                                        && !task.complete_at
+                                })
+                                if (tasks.length > 0) {
+                                    taskCallback(tasks);
+                                } else {
+                                    taskCallback([])
+                                }
+                            }).catch(_ => {
+                                taskCallback([])
+                            })
+                            return;
+                        }
+                        taskCallback([])
+                        break;
+
+                    default:
+                        resolve([])
                         break;
                 }
-                resolve([])
             })
+        },
+
+        getProjectId() {
+            let object = null;
+            if (this.dialogId > 0) {
+                object = this.cacheProjects.find(({dialog_id}) => dialog_id == this.dialogId);
+                if (object) {
+                    return object.id;
+                }
+                object = this.cacheTasks.find(({dialog_id}) => dialog_id == this.dialogId);
+                if (object) {
+                    return object.project_id;
+                }
+            } else if (this.taskId > 0) {
+                object = this.cacheTasks.find(({id}) => id == this.taskId);
+                if (object) {
+                    return object.project_id;
+                }
+            }
+            return 0;
         }
     }
 }
diff --git a/resources/assets/sass/components/chat-input.scss b/resources/assets/sass/components/chat-input.scss
index 07e4b207e..ed8ec7135 100755
--- a/resources/assets/sass/components/chat-input.scss
+++ b/resources/assets/sass/components/chat-input.scss
@@ -5,6 +5,24 @@
     display: inline-block;
     width: 100%;
 
+    &.task-mention {
+        .ql-mention-list-container {
+            .ql-mention-list {
+                > li {
+                    &:first-child {
+                        margin-top: 0;
+                    }
+                }
+            }
+            .ql-mention-list-item {
+                line-height: 36px;
+                .mention-item-disabled {
+                    padding: 8px 4px 0;
+                }
+            }
+        }
+    }
+
     .ql-editor {
         padding: 4px 7px;
         font-size: 14px;
@@ -27,14 +45,30 @@
 
     .ql-mention-list-container {
         width: auto;
-        min-width: 200px;
-        max-width: 300px;
+        min-width: 220px;
+        max-width: 350px;
         max-height: 500px;
 
+        .ql-mention-list {
+            > li {
+                &:first-child {
+                    margin-top: 8px;
+                }
+                &:last-child {
+                    margin-bottom: 8px;
+                }
+            }
+        }
+
         .ql-mention-list-item {
-            padding: 0 12px;
+            padding: 0 8px;
             display: flex;
             align-items: center;
+            margin: 0 8px;
+
+            &.selected {
+                border-radius: 4px;
+            }
 
             .mention-item-at {
                 width: 28px;
@@ -98,7 +132,7 @@
             }
 
             .mention-item-disabled {
-                color: #8f8f8e;
+                color: #aaa;
                 font-size: 12px;
                 padding: 0 4px;
                 line-height: 40px;