From 2d6e5687161388f677fbe49c81dd9fbce4a208d5 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Fri, 18 Dec 2020 12:48:24 +0000
Subject: [PATCH] PMCORE-2549: add task title suggest

fix autoshow
---
 resources/assets/js/api/Api.js                |  3 +-
 resources/assets/js/api/Filters.js            | 12 +++
 .../js/components/search/AdvancedFilter.vue   | 71 +++++++++-----
 .../js/components/search/MyCasesFilter.vue    | 26 ++++-
 .../components/search/popovers/TaskTitle.vue  | 94 +++++++++++++++++++
 .../translations/english/processmaker.en.po   | 12 +++
 workflow/engine/data/mysql/insert.sql         |  2 +
 7 files changed, 193 insertions(+), 27 deletions(-)
 create mode 100644 resources/assets/js/components/search/popovers/TaskTitle.vue

diff --git a/resources/assets/js/api/Api.js b/resources/assets/js/api/Api.js
index 46887a245..6a3ee6dad 100644
--- a/resources/assets/js/api/Api.js
+++ b/resources/assets/js/api/Api.js
@@ -67,7 +67,8 @@ const services = {
     DELETE_MY_FILTERS: "/cases/advanced-search/filter/",
     SEARCH: "/home/search",
     PROCESSES: "/home/processes",
-    USERS: "/home/users"
+    USERS: "/home/users",
+    TASKS: "/home/tasks"
 };
 
 export default {
diff --git a/resources/assets/js/api/Filters.js b/resources/assets/js/api/Filters.js
index 59152fb2c..8117c4881 100644
--- a/resources/assets/js/api/Filters.js
+++ b/resources/assets/js/api/Filters.js
@@ -69,6 +69,18 @@ export let filters = {
             keys: {},
         });
     },
+    /**
+     * Service to get the users list
+     */
+    taskList(query) {
+        return Api.get({
+            service: "TASKS",
+            params: {
+                text: query,
+            },
+            keys: {},
+        });
+    },
     /**
      * Service to get the users list
      */
diff --git a/resources/assets/js/components/search/AdvancedFilter.vue b/resources/assets/js/components/search/AdvancedFilter.vue
index 4f084b92a..e9690751d 100644
--- a/resources/assets/js/components/search/AdvancedFilter.vue
+++ b/resources/assets/js/components/search/AdvancedFilter.vue
@@ -174,6 +174,7 @@ import ProcessName from "./popovers/ProcessName.vue";
 import CasePriority from "./popovers/CasePriority.vue";
 import CaseStatus from "./popovers/CaseStatus.vue";
 import CurrentUser from "./popovers/CurrentUser.vue";
+import TaskTitle from "./popovers/TaskTitle.vue";
 import api from "./../../api/index";
 
 export default {
@@ -188,6 +189,7 @@ export default {
         CaseStatus,
         CurrentUser,
         DateFilter,
+        TaskTitle
     },
     data() {
         return {
@@ -247,7 +249,49 @@ export default {
                         }
                     ],
                     makeTagText: function (params, data) {
-                        return  `${params.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
+                        return  `${params.tagPrefix}:  ${data[0].options && data[0].options.label || ''}`;
+                    }
+                },
+                {
+                    type: "TaskTitle",
+                    id: "taskTitle",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_TASK_NAME')}`,
+                    optionLabel: this.$i18n.t('ID_TASK'),
+                    detail: "",
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_TASK_NAME'),
+                    autoShow: true,
+                    items:[
+                        {
+                            id: "task",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t('ID_TASK_NAME')
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${this.tagPrefix}: ${data[0].label || ''}`;
+                    }
+                },
+                {
+                    type: "CurrentUser",
+                    id: "currentUser",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CURRENT_USER')}`,
+                    optionLabel: this.$i18n.t('ID_CURRENT_USER'),
+                    detail: "",
+                    placeholder: this.$i18n.t('ID_USER_NAME'),
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_USER'),
+                    items:[
+                        {
+                            id: "userId",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t('ID_USER_NAME')
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${params.tagPrefix} : ${data[0].label || ''}`;
                     }
                 },
                 {
@@ -297,28 +341,8 @@ export default {
                     makeTagText: function (params, data) {
                         return  `${params.tagPrefix} ${data[0].value} - ${data[1].value}`;
                     }
-                },
-                {
-                    type: "CurrentUser",
-                    id: "currentUser",
-                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_CURRENT_USER')}`,
-                    optionLabel: this.$i18n.t('ID_CURRENT_USER'),
-                    detail: "",
-                    placeholder: this.$i18n.t('ID_USER_NAME'),
-                    tagText: "",
-                    tagPrefix:  this.$i18n.t('ID_USER'),
-                    items:[
-                        {
-                            id: "userId",
-                            value: "",
-                            options: [],
-                            placeholder: this.$i18n.t('ID_USER_NAME')
-                        }
-                    ],
-                    makeTagText: function (params, data) {
-                        return  `${params.tagPrefix} : ${data[0].label || ''}`;
-                    }
-                },
+                }
+              
             ],
             selected: "",
             itemModel: {},
@@ -385,7 +409,6 @@ export default {
     
         tagInfo(id) {
              if (this.itemModel[id]) {
-                 debugger;
                 return this.itemModel[id];
             }
             return null;
diff --git a/resources/assets/js/components/search/MyCasesFilter.vue b/resources/assets/js/components/search/MyCasesFilter.vue
index 312f0d990..53882fb1a 100644
--- a/resources/assets/js/components/search/MyCasesFilter.vue
+++ b/resources/assets/js/components/search/MyCasesFilter.vue
@@ -71,6 +71,7 @@ import CaseIntegerNumber from "./popovers/CaseIntegerNumber.vue";
 import CaseTitle from "./popovers/CaseTitle.vue";
 import ProcessName from "./popovers/ProcessName.vue";
 import DateFilter from "./popovers/DateFilter.vue";
+import TaskTitle from "./popovers/TaskTitle.vue";
 import api from "./../../api/index";
 
 export default { 
@@ -81,7 +82,8 @@ export default {
         CaseIntegerNumber,
         CaseTitle,
         ProcessName,
-        DateFilter
+        DateFilter,
+        TaskTitle
     },
     data() {
         return {
@@ -150,6 +152,27 @@ export default {
                         return  `${this.tagPrefix} ${data[0].options && data[0].options.label || ''}`;
                     }
                 },
+                {
+                    type: "TaskTitle",
+                    id: "taskTitle",
+                    title: `${this.$i18n.t('ID_FILTER')}: ${this.$i18n.t('ID_BY_TASK')}`,
+                    optionLabel: this.$i18n.t('ID_BY_TASK'),
+                    detail: "",
+                    tagText: "",
+                    tagPrefix:  this.$i18n.t('ID_SEARCH_BY_TASK_TITLE'),
+                    autoShow: true,
+                    items:[
+                        {
+                            id: "task",
+                            value: "",
+                            options: [],
+                            placeholder: this.$i18n.t('ID_TASK_NAME')
+                        }
+                    ],
+                    makeTagText: function (params, data) {
+                        return  `${this.tagPrefix} ${data[0].label || ''}`;
+                    }
+                },
                 {
                     type: "DateFilter",
                     id: "startDate",
@@ -281,7 +304,6 @@ export default {
     
         tagInfo(id) {
              if (this.itemModel[id]) {
-                 debugger;
                 return this.itemModel[id];
             }
             return null;
diff --git a/resources/assets/js/components/search/popovers/TaskTitle.vue b/resources/assets/js/components/search/popovers/TaskTitle.vue
new file mode 100644
index 000000000..5480083c8
--- /dev/null
+++ b/resources/assets/js/components/search/popovers/TaskTitle.vue
@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <SearchPopover :target="tag" @savePopover="onOk" :title="info.title" :autoShow="info.autoShow || false">
+            <template v-slot:body>
+                <p>{{ info.detail }}</p>
+                <form ref="form" @submit.stop.prevent="handleSubmit">
+                    <b-form-group
+                        label-for="name"
+                        :invalid-feedback="$t('ID_PROCESS_IS_REQUIRED')"
+                    >
+                        <multiselect
+                            v-model="filter[0].options"
+                            :options="taks"
+                            placeholder="Sselect one"
+                            label="TAS_TITLE"
+                            track-by="TAS_ID"
+                            :show-no-results="false"
+                            @search-change="asyncFind"
+                            :loading="isLoading"
+                            id="ajax"
+                            :limit="10"
+                            :clear-on-select="true"
+                        >
+                        </multiselect>
+                    </b-form-group>
+                </form>
+            </template>
+        </SearchPopover>
+    </div>
+</template>
+
+<script>
+import SearchPopover from "./SearchPopover.vue";
+import Multiselect from "vue-multiselect";
+import api from "./../../../api/index";
+
+export default {
+    components: {
+        SearchPopover,
+        Multiselect
+    },
+    props: ["tag", "info", "filter"],
+    data() {
+        return {
+            taks: [],
+            isLoading: false
+        };
+    },
+    methods: {
+        /**
+         * Find asynchronously in the server
+         * @param {string} query - string from the text field
+         */
+
+        asyncFind(query) {
+            this.isLoading = true;
+            api.filters
+                .taskList(query)
+                .then((response) => {
+                    this.taks = response.data;
+                    this.isLoading = false;
+                })
+                .catch((e) => {
+                    console.error(err);
+                });
+        },
+        /**
+         * Form validations review
+         */
+        checkFormValidity() {
+            const valid = this.query !== "";
+            this.valueState = valid;
+            return valid;
+        },
+        /**
+         * On Ok event handler
+         */
+        onOk() {
+            this.handleSubmit();
+        },
+        /**
+         *  Form submit handler
+         */
+        handleSubmit() {
+            this.filter[0].value = this.filter[0].options.TAS_ID;
+            this.filter[0].label = this.filter[0].options.TAS_TITLE;
+            this.$emit("updateSearchTag", this.filter);
+            this.$root.$emit("bv::hide::popover");
+        }
+    }
+};
+</script>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style scoped></style>
diff --git a/workflow/engine/content/translations/english/processmaker.en.po b/workflow/engine/content/translations/english/processmaker.en.po
index 1d483b985..71fb810d5 100755
--- a/workflow/engine/content/translations/english/processmaker.en.po
+++ b/workflow/engine/content/translations/english/processmaker.en.po
@@ -23825,6 +23825,12 @@ msgstr "Search by Process Name:"
 msgid "Search by Start Date:"
 msgstr "Search by Start Date:"
 
+# TRANSLATION
+# LABEL/ID_SEARCH_BY_TASK_NAME
+#: LABEL/ID_SEARCH_BY_TASK_NAME
+msgid "Search by Task Name:"
+msgstr "Search by Task Name:"
+
 # TRANSLATION
 # LABEL/ID_SEARCH_FOR_USER
 #: LABEL/ID_SEARCH_FOR_USER
@@ -25457,6 +25463,12 @@ msgstr "Task properties has been saved successfully"
 msgid "Task Reassignments"
 msgstr "Task Reassignments"
 
+# TRANSLATION
+# LABEL/ID_TASK_TITLE
+#: LABEL/ID_TASK_TITLE
+msgid "Task Title"
+msgstr "Task Title"
+
 # TRANSLATION
 # LABEL/ID_TASK_TRANSFER
 #: LABEL/ID_TASK_TRANSFER
diff --git a/workflow/engine/data/mysql/insert.sql b/workflow/engine/data/mysql/insert.sql
index 189c3dd10..b152fcd7a 100755
--- a/workflow/engine/data/mysql/insert.sql
+++ b/workflow/engine/data/mysql/insert.sql
@@ -60885,6 +60885,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_SEARCH_BY_FINISH_DATE','en','Search by Finish Date:','2020-12-16') ,
 ( 'LABEL','ID_SEARCH_BY_PROCESS_NAME','en','Search by Process Name:','2020-12-16') ,
 ( 'LABEL','ID_SEARCH_BY_START_DATE','en','Search by Start Date:','2020-12-16') ,
+( 'LABEL','ID_SEARCH_BY_TASK_NAME','en','Search by Task Name:','2020-12-16') ,
 ( 'LABEL','ID_SEARCH_FOR_USER','en','Search for user','2015-09-15') ,
 ( 'LABEL','ID_SEARCH_PATTERN','en','Search Pattern','2014-01-15') ,
 ( 'LABEL','ID_SEARCH_RESULT','en','Search results','2014-01-15') ,
@@ -61167,6 +61168,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_TASK_OVERDUE','en','Overdue','2015-06-09') ,
 ( 'LABEL','ID_TASK_PROPERTIES_SAVE','en','Task properties has been saved successfully','2014-01-15') ,
 ( 'LABEL','ID_TASK_REASSIGNMENTS','en','Task Reassignments','2020-12-07') ,
+( 'LABEL','ID_TASK_TITLE','en','Task Title','2020-12-17') ,
 ( 'LABEL','ID_TASK_TRANSFER','en','Task Transfer Date','2014-01-15') ,
 ( 'LABEL','ID_TASK_WAS_ASSIGNED_TO_USER','en','Manual assignment shouldn''t be used with sub-processes.<br>The task "{0}" from case {1} was assigned to user <b>{2}</b> ( {3} {4} )','2015-02-24') ,
 ( 'LABEL','ID_TAS_DURATION_REQUIRE','en','Duration task required','2014-0f-15') ,