From d7722df0cadce2d14ff6c549459a10ededcc66dc Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Fri, 24 Sep 2021 17:10:33 +0000
Subject: [PATCH] PMCORE-3102

---
 package.json                                  |  3 +-
 .../vuetable/extends/VtTableRow.vue           | 33 ++++++++++++++
 .../js/home/AdvancedSearch/AdvancedSearch.vue | 11 ++++-
 .../js/home/AdvancedSearch/customMixins.js    | 15 +++++++
 .../js/home/AdvancedSearch/defaultMixins.js   | 44 ++++++++++++++++++-
 resources/assets/js/home/main.js              | 11 +++--
 6 files changed, 110 insertions(+), 7 deletions(-)
 create mode 100644 resources/assets/js/components/vuetable/extends/VtTableRow.vue
 create mode 100644 resources/assets/js/home/AdvancedSearch/customMixins.js

diff --git a/package.json b/package.json
index b3f73d27c..982d59e17 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "vuejs-datepicker": "^1.5.4",
     "vuejs-paginate": "^2.0.1",
     "vuetify": "^1.1.4",
-    "web-animations-js": "^2.3.2"
+    "web-animations-js": "^2.3.2",
+    "vue-simple-context-menu": "^3.4.1"
   }
 }
diff --git a/resources/assets/js/components/vuetable/extends/VtTableRow.vue b/resources/assets/js/components/vuetable/extends/VtTableRow.vue
new file mode 100644
index 000000000..d8e2f5107
--- /dev/null
+++ b/resources/assets/js/components/vuetable/extends/VtTableRow.vue
@@ -0,0 +1,33 @@
+<template>
+  <tr
+    :class="`VueTables__row ${props.rowAttrs.class}`"
+    v-bind="props.rowAttrs.attrs"
+    @contextmenu.prevent.stop="props.rowEvents.click"
+    @click="props.rowEvents.click"
+  >
+    <vt-child-row-toggler
+      :row-id="props.rowId"
+      v-if="props.childRowTogglerFirst"
+    />
+    <vt-table-cell
+      v-for="(column, i) in props.columns"
+      :key="i"
+      :column="column"
+    />
+    <vt-child-row-toggler
+      :row-id="props.rowId"
+      v-if="props.childRowTogglerLast"
+    />
+  </tr>
+</template>
+<script>
+import VtTableCell from "vue-tables-2/compiled/components/VtTableCell";
+import VtChildRowToggler from "vue-tables-2/compiled/components/VtChildRowToggler";
+export default {
+  name: "MyTableRow",
+  props: ["props"],
+  components: { VtTableCell, VtChildRowToggler },
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue b/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
index bbed857b7..232d997b8 100644
--- a/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
+++ b/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
@@ -30,7 +30,7 @@
             :columns="columns"
             :options="options"
             ref="vueTable"
-            @row-click="onRowClick"
+            @row-click="configRowClick"
             :key="random"
         >
             <div slot="info" slot-scope="props">
@@ -76,6 +76,12 @@
                 </div>
             </div>
         </v-server-table>
+        <vue-simple-context-menu
+            :elementId="idContextMenu"
+            :options="contextMenuItems"
+            :ref="idContextMenu"
+            @option-clicked="contextMenuItemClicked"
+        />
         <ModalComments
             ref="modal-comments"
             @postNotes="onPostNotes"
@@ -93,10 +99,11 @@ import ThreadTitleCell from "../../components/vuetable/ThreadTitleCell.vue"
 import api from "../../api/index";
 import utils from "../../utils/utils";
 import defaultMixin from "./defaultMixins.js";
+import customMixin from "./customMixins";
 
 export default {
     name: "AdvancedSearch",
-    mixins: [defaultMixin],
+    mixins: [defaultMixin, customMixin],
     components: {
         AdvancedFilter,
         ButtonFleft,
diff --git a/resources/assets/js/home/AdvancedSearch/customMixins.js b/resources/assets/js/home/AdvancedSearch/customMixins.js
new file mode 100644
index 000000000..c16f74747
--- /dev/null
+++ b/resources/assets/js/home/AdvancedSearch/customMixins.js
@@ -0,0 +1,15 @@
+export default {
+    data() {
+        return {
+            contextMenuItems: []
+        };
+    },
+    methods: {
+        /**
+        * Handler for item context menu clicked
+        */
+        contextMenuItemClicked(info) {
+            console.log(info);
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/js/home/AdvancedSearch/defaultMixins.js b/resources/assets/js/home/AdvancedSearch/defaultMixins.js
index aa59023fc..f0975801c 100644
--- a/resources/assets/js/home/AdvancedSearch/defaultMixins.js
+++ b/resources/assets/js/home/AdvancedSearch/defaultMixins.js
@@ -2,7 +2,9 @@ import api from "../../api/index";
 export default {
     data() {
         return {
-            random: 1
+            random: 1,
+            idContextMenu: "pm-ad-context-menu",
+            contextMenuItems: []
         };
     },
     methods: {
@@ -41,6 +43,46 @@ export default {
             }
             this.columns = cols;
             this.random = _.random(0, 10000000000);
+        },
+        /**
+         * Row click event handler
+         * @param {*} event 
+         */
+        configRowClick(event) {
+            if (event.event.button === 2) {
+                this.onRowContextMenu(event);
+            } else {
+                this.onRowClick(event);
+            }
+        },
+        /**
+         * Context Menu event handler
+         * @param {*} event 
+         */
+        onRowContextMenu(event) {
+            this.$refs[this.idContextMenu].showMenu(event.event, event.row);
+        },
+        /**
+         * Row click event handler
+         * @param {*} event 
+         */
+        onRowClick(event) {
+            var self = this;
+            self.clickCount += 1;
+            if (self.clickCount === 1) {
+                self.singleClickTimer = setTimeout(function () {
+                    self.clickCount = 0;
+                }, 400);
+            } else if (self.clickCount === 2) {
+                clearTimeout(self.singleClickTimer);
+                self.clickCount = 0;
+                self.openCaseDetail(event.row);
+            }
+        },
+        /**
+         * Handler for item context menu clicked
+         */
+        contextMenuItemClicked(event) {
         }
     }
 }
\ No newline at end of file
diff --git a/resources/assets/js/home/main.js b/resources/assets/js/home/main.js
index eaf91b5d1..dcb3c45ee 100644
--- a/resources/assets/js/home/main.js
+++ b/resources/assets/js/home/main.js
@@ -12,8 +12,11 @@ import "@fortawesome/fontawesome-free/css/all.css";
 import 'bootstrap/dist/css/bootstrap-grid.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css';
-import VueApexCharts from 'vue-apexcharts'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+import VueApexCharts from 'vue-apexcharts';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+import VueSimpleContextMenu from 'vue-simple-context-menu';
+import VtTableRow from '../components/vuetable/extends/VtTableRow';
+import 'vue-simple-context-menu/dist/vue-simple-context-menu.css'
 
 import Home from "./Home";
 
@@ -26,11 +29,13 @@ Vue.use(VueI18n);
 
 Vue.use(ServerTable, {}, false, 'bootstrap3', {
     tableHeading: VtTableHeadingCustom,
-    sortControl: VtSortControl
+    sortControl: VtSortControl,
+    tableRow: VtTableRow
 });
 Vue.use(ClientTable, {}, false, 'bootstrap3', {});
 Vue.component('settings-popover', SettingsPopover);
 Vue.component('apexchart', VueApexCharts);
+Vue.component('vue-simple-context-menu', VueSimpleContextMenu);
 
 window.ProcessMaker = {
     apiClient: require('axios')