PMCORE-3102

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"
   }
 }

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>

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,

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);
+        }
+    }
+}

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) {
         }
     }
 }

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')