Merged in feature/PMCORE-3062-A (pull request #7997)

PMCORE-3062-A

Approved-by: Rodrigo Quelca

resources/assets/js/components/vuetable/SettingsPopover.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="pm-all-view-popover">
+    <b-popover
+      :target="target"
+      ref="popover"
+      triggers="click"
+      placement="bottom"
+      @show="onshow"
+    >
+      <template #title>{{ $t("ID_COLUMNS").toUpperCase() }}</template>
+
+      <div>
+        <div class="input-group input-group-sm mb-3">
+          <span class="input-group-text" id="inputGroup-sizing-sm"
+            ><i class="fas fa-search"></i
+          ></span>
+
+          <input
+            type="text"
+            class="form-control"
+            aria-describedby="inputGroup-sizing-sm"
+            @keyup="search"
+            v-model="text"
+          />
+        </div>
+
+        <div class="form-check border-bottom">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            v-model="allColumns"
+            @change="toogleAllColumns"
+          />
+
+          <label class="form-check-label" for="flexCheckDefault">
+            {{ $t("ID_ALL") }}
+          </label>
+        </div>
+
+        <b-form-group>
+          <b-form-checkbox-group
+            v-model="localSelected"
+            :options="results"
+            value-field="key"
+            text-field="value"
+            name="flavour-2a"
+            @change="changeOptions"
+            stacked
+          ></b-form-checkbox-group>
+        </b-form-group>
+
+        <div class="v-popover-footer">
+          <div class="float-right">
+            <b-button @click="onClose" size="sm" variant="danger">
+              {{ $t("ID_CANCEL") }}</b-button
+            >
+
+            <b-button @click="onSave" size="sm" variant="success">{{
+              $t("ID_SAVE")
+            }}</b-button>
+          </div>
+        </div>
+      </div>
+    </b-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["target", "options", "selected"],
+  data() {
+    return {
+      localSelected: [],
+      text: "",
+      results: [],
+      allColumns: false,
+    };
+  },
+  mounted() {
+    this.results = this.options;
+    this.localSelected = this.selected || [];
+  },
+  methods: {
+    /**
+     * Close buton click handler
+     */
+    onClose() {
+      this.$refs.popover.$emit("close");
+      this.$emit("closePopover");
+    },
+    /**
+     * Save button click handler
+     */
+    onSave() {
+      let sels;
+      sels = _.clone(this.localSelected);
+      //this.$root.$emit("bv::hide::popover");
+      this.$emit("onUpdateColumnSettings", sels);
+    },
+    /**
+     * Show popover event handler
+     */
+    onshow() {
+      this.$root.$emit("bv::hide::popover");
+    },
+    /**
+     * Search in the column name
+     */
+    search() {
+      let txt = this.text.toLowerCase(),
+        val,
+        opts = [];
+
+      opts = _.filter(this.options, function (o) {
+        val = o.value.toLowerCase();
+
+        return val.search(txt) != -1;
+      });
+
+      this.results = opts;
+    },
+    /**
+     * Toogle all options in popover
+     */
+    toogleAllColumns() {
+      let res = [];
+      if (this.allColumns) {
+        _.each(this.options, function (o) {
+          res.push(o.key);
+        });
+      }
+      this.localSelected = res;
+    },
+    /**
+     * Handler when change options event
+     */
+    changeOptions() {
+      let that = this,
+        res = [];
+
+      _.each(this.options, function (o) {
+        if (
+          _.findIndex(that.localSelected, function (v) {
+            return v === o.key;
+          }) != -1
+        ) {
+          res.push(o.key);
+        }
+      });
+      this.localSelected = res;
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.pm-all-view-popover .popover {
+  max-width: 350px !important;
+
+  min-width: 200px !important;
+}
+
+.v-popover-footer {
+  display: flow-root;
+}
+</style>

resources/assets/js/components/vuetable/extends/VtSettingsControl.vue

@@ -0,0 +1,29 @@
+<template>
+  <span v-if="settings()" :class="classObject" :id="id"> </span>
+</template>
+<script>
+export default {
+  name: "VtSettingsControl",
+  props: ["props", "parent"],
+  mounted() {},
+  methods: {
+    settings() {
+      return (
+        this.props.opts.settings && this.props.opts.settings[this.parent.column]
+      );
+    },
+  },
+  computed: {
+    classObject() {
+      return this.settings()
+        ? this.props.opts.settings[this.parent.column]["class"]
+        : this.props.class;
+    },
+    id() {
+      return this.settings()
+        ? this.props.opts.settings[this.parent.column]["id"]
+        : "default-settings-case";
+    },
+  },
+};
+</script>

resources/assets/js/components/vuetable/extends/VtTableHeadingCustom.vue

@@ -0,0 +1,42 @@
+<template>
+  <th slot-scope="props" v-on="events()" v-bind="props.thAttrs" :key="random">
+    <span class="VueTables__heading" :title="props.title">
+      <vnodes :vnodes="props.heading" />
+    </span>
+    <vt-sort-control />
+    <vt-settings-control :props="props" :parent="$parent" />
+  </th>
+</template>
+<script>
+import VtSortControl from "vue-tables-2/compiled/components/VtSortControl";
+import VtSettingsControl from "./VtSettingsControl.vue";
+export default {
+  name: "VtTableHeading",
+  components: {
+    VtSortControl,
+    VtSettingsControl,
+    vnodes: {
+      functional: true,
+      render: (h, ctx) =>
+        typeof ctx.props.vnodes === "object"
+          ? ctx.props.vnodes
+          : [ctx.props.vnodes],
+    },
+  },
+  computed: {
+    random() {
+      return _.random(0, 10000000000);
+    },
+  },
+  props: ["props"],
+  mounted() {},
+  methods: {
+    events() {
+      return this.props.opts.settings &&
+        this.props.opts.settings[this.$parent.column]
+        ? this.props.opts.settings[this.$parent.column]["events"]
+        : this.props.thEvents;
+    },
+  },
+};
+</script>

resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue

@@ -24,13 +24,14 @@
         />
 
         <modal-new-request ref="newRequest"></modal-new-request>
-
+        <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
         <v-server-table
             :data="tableData"
             :columns="columns"
             :options="options"
             ref="vueTable"
             @row-click="onRowClick"
+            :key="random"
         >
             <div slot="info" slot-scope="props">
                 <b-icon
@@ -82,17 +83,19 @@
     </div>
 </template>
 <script>
-import ButtonFleft from "../components/home/ButtonFleft.vue";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
-import ModalNewRequest from "./ModalNewRequest.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
-import AdvancedFilter from "../components/search/AdvancedFilter";
+import AdvancedFilter from "../../components/search/AdvancedFilter";
-import TaskCell from "../components/vuetable/TaskCell.vue";
+import TaskCell from "../../components/vuetable/TaskCell.vue";
-import CurrentUserCell from "../components/vuetable/CurrentUserCell.vue";
+import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
-import ModalComments from "./modal/ModalComments.vue";
+import ModalComments from "../modal/ModalComments.vue";
-import api from "./../api/index";
+import api from "../../api/index";
-import utils from "./../utils/utils";
+import utils from "../../utils/utils";
+import defaultMixin from "./defaultMixins.js";
 
 export default {
     name: "AdvancedSearch",
+    mixins: [defaultMixin],
     components: {
         AdvancedFilter,
         ButtonFleft,
@@ -103,6 +106,7 @@ export default {
     },
     props: ["id", "name", "filters"],
     data() {
+        let that = this;
         return {
             dismissSecs: 5,
             dismissCountDown: 0,
@@ -137,7 +141,6 @@ export default {
             options: {
                 filterable: false,
                 headings: {
-                    info: "",
                     case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
                     case_title: this.$i18n.t("ID_CASE_TITLE"),
                     status: this.$i18n.t("ID_STATUS"),
@@ -170,6 +173,17 @@ export default {
                     return this.$parent.$parent.getCasesForVueTable(data);
                 },
                 customFilters: ["myfilter"],
+                settings: {
+                    "actions":{
+                        class: "fas fa-cog",
+                        id:"pm-dr-column-settings",
+                        events:{ 
+                            click(){
+                                that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
+                            }
+                        }
+                    }
+                }
             },
             pmDateFormat: window.config.FORMATS.dateFormat,
             clickCount: 0,

resources/assets/js/home/AdvancedSearch/defaultMixins.js

@@ -0,0 +1,46 @@
+import api from "../../api/index";
+export default {
+    data() {
+        return {
+            random: 1
+        };
+    },
+    methods: {
+        /**
+         * Format columns for custom columns
+         * @param {*} headings 
+         * @returns 
+         */
+        formatColumnSettings(headings) {
+            let res = [];
+            _.forEach(headings, function (value, key) {
+                if (key != "actions") {
+                    res.push({ value, key });
+                }
+            });
+            return res;
+        },
+        /**
+         * Formating the columns selected
+         * @param {*} columns 
+         * @returns 
+         */
+        formatColumnSelected(columns) {
+            let cols = _.clone(columns);
+            cols.pop();
+            return cols;
+        },
+        /**
+         * Event handler when update the settings columns
+         * @param {*} columns 
+         */
+        onUpdateColumnSettings(columns) {
+            let cols = columns;
+            if (_.findIndex(cols, 'actions') == -1) {
+                cols.push("actions");
+            }
+            this.columns = cols;
+            this.random = _.random(0, 10000000000);
+        }
+    }
+}

resources/assets/js/home/Draft/Draft.vue

@@ -9,6 +9,7 @@
       @onUpdateFilters="onUpdateFilters"
     />
     <multiview-header :data="dataMultiviewHeader" />
+    <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
       :data="tableData"
@@ -16,6 +17,7 @@
       :options="options"
       ref="vueTable"
       @row-click="onRowClick"
+      :key="random"
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -187,6 +189,7 @@ export default {
   },
   props: ["defaultOption", "filters"],
   data() {
+    let that = this;
     return {
       newCase: {
         title: this.$i18n.t("ID_NEW_CASE"),
@@ -234,7 +237,18 @@ export default {
             limit: this.$i18n.t("ID_RECORDS") + ":",
             page: this.$i18n.t("ID_PAGE") + ":",
             noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS")
-        }
+        },
+        settings: {
+          "actions":{
+              class: "fas fa-cog",
+              id:"pm-dr-column-settings",
+              events:{ 
+                  click(){
+                      that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
+                  }
+              }
+          }
+        },
       },
       pmDateFormat: "Y-m-d H:i:s",
       clickCount: 0,  

resources/assets/js/home/Draft/defaultMixins.js

@@ -4,6 +4,7 @@ export default {
     let that = this;
     return {
       typeView: "GRID",
+      random: 1,
       dataMultiviewHeader: {
         actions: [
           {
@@ -139,5 +140,41 @@ export default {
           });
       });
     },
+    /**
+     * Format columns for custom columns
+     * @param {*} headings 
+     * @returns 
+     */
+     formatColumnSettings(headings) {
+      let res=[];
+      _.forEach(headings, function(value, key) {
+        if(key != "actions"){
+            res.push({value,key});
+        }
+      });
+      return res;
+    },
+    /**
+     * Formating the columns selected
+     * @param {*} columns 
+     * @returns 
+     */
+    formatColumnSelected(columns) {
+      let cols = _.clone(columns);
+      cols.pop();
+      return cols;
+    },
+    /**
+     * Event handler when update the settings columns
+     * @param {*} columns 
+     */
+    onUpdateColumnSettings(columns) {
+      let cols = columns;
+      if(_.findIndex(cols, 'actions') == -1){
+        cols.push("actions");
+      }
+      this.columns = cols;
+      this.random = _.random(0, 10000000000);
+    }
   }
 }

resources/assets/js/home/Home.vue

@@ -38,7 +38,7 @@
 </template>
 <script>
 import CustomSidebar from "./../components/menu/CustomSidebar";
-import MyCases from "./MyCases";
+import MyCases from "./MyCases/MyCases.vue";
 import MyDocuments from "./MyDocuments";
 import Todo from "./Inbox/Todo.vue";
 import Paused from "./Paused/Paused.vue";
@@ -48,7 +48,7 @@ import BatchRouting from "./BatchRouting";
 import CaseDetail from "./CaseDetail";
 import XCase from "./XCase";
 import TaskReassignments from "./TaskReassignments";
-import AdvancedSearch from "./AdvancedSearch";
+import AdvancedSearch from "./AdvancedSearch/AdvancedSearch.vue";
 import LegacyFrame from "./LegacyFrame";
 
 import api from "./../api/index";

resources/assets/js/home/Inbox/Todo.vue

@@ -9,6 +9,7 @@
       @onUpdateFilters="onUpdateFilters"
     />
     <multiview-header :data="dataMultiviewHeader" />
+    <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
       :data="tableData"
@@ -16,6 +17,7 @@
       :options="options"
       ref="vueTable"
       @row-click="onRowClick"
+      :key="random"
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -195,6 +197,7 @@ export default {
   },
   props: ["defaultOption", "filters"],
   data() {
+    let that = this;
     return {
       newCase: {
         title: this.$i18n.t("ID_NEW_CASE"),
@@ -212,18 +215,17 @@ export default {
         "due_date",
         "delegation_date",
         "priority",
-        "actions",
+        "actions"
       ],
       tableData: [],
       options: {
         filterable: false,
         headings: {
-          detail: "",
+          detail: this.$i18n.t("ID_DETAIL_CASE"),
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
           task: this.$i18n.t("ID_TASK"),
-          current_user: this.$i18n.t("ID_CURRENT_USER"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
           delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
           priority: this.$i18n.t("ID_PRIORITY"),
@@ -249,6 +251,17 @@ export default {
         requestFunction(data) {
           return this.$parent.$parent.getCasesForVueTable(data);
         },
+        settings: {
+            "actions":{
+                class: "fas fa-cog",
+                id:"pm-dr-column-settings",
+                events:{ 
+                    click(){
+                        that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
+                    }
+                }
+            }
+        },
       },
       pmDateFormat: "Y-m-d H:i:s",
       clickCount: 0,

resources/assets/js/home/Inbox/defaultMixins.js

@@ -1,9 +1,11 @@
+import _ from "lodash";
 import api from "../../api/index";
 export default {
   data() {
     let that = this;
     return {
       typeView: "GRID",
+      random: 1,
       dataMultiviewHeader: {
         actions: [
           {
@@ -135,5 +137,41 @@ export default {
           });
       });
     },
+    /**
+     * Format columns for custom columns
+     * @param {*} headings 
+     * @returns 
+     */
+    formatColumnSettings(headings) {
+      let res=[];
+      _.forEach(headings, function(value, key) {
+        if(key != "actions"){
+            res.push({value,key});
+        }
+      });
+      return res;
+    },
+    /**
+     * Formating the columns selected
+     * @param {*} columns 
+     * @returns 
+     */
+    formatColumnSelected(columns) {
+      let cols = _.clone(columns);
+      cols.pop();
+      return cols;
+    },
+    /**
+     * Event handler when update the settings columns
+     * @param {*} columns 
+     */
+    onUpdateColumnSettings(columns) {
+      let cols = columns;
+      if(_.findIndex(cols, 'actions') == -1){
+        cols.push("actions");
+      }
+      this.columns = cols;
+      this.random = _.random(0, 10000000000);
+    }
   }
 }

resources/assets/js/home/MyCases/MyCases.vue

@@ -18,13 +18,14 @@
         />
         <header-counter :data="headers"> </header-counter>
         <modal-new-request ref="newRequest"></modal-new-request>
-
+        <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
         <v-server-table
             :data="tableData"
             :columns="columns"
             :options="options"
             ref="vueTable"
             @row-click="onRowClick"
+            :key="random"
         >
             <div slot="detail" slot-scope="props">
                 <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -64,17 +65,19 @@
 </template>
 
 <script>
-import HeaderCounter from "../components/home/HeaderCounter.vue";
+import HeaderCounter from "../../components/home/HeaderCounter.vue";
-import ButtonFleft from "../components/home/ButtonFleft.vue";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
-import ModalNewRequest from "./ModalNewRequest.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
-import MyCasesFilter from "../components/search/MyCasesFilter";
+import MyCasesFilter from "../../components/search/MyCasesFilter";
-import ModalComments from "./modal/ModalComments.vue";
+import ModalComments from "../modal/ModalComments.vue";
-import GroupedCell from "../components/vuetable/GroupedCell.vue";
+import GroupedCell from "../../components/vuetable/GroupedCell.vue";
-import api from "./../api/index";
+import api from "../../api/index";
-import utils from "./../utils/utils";
+import utils from "../../utils/utils";
+import defaultMixins from "./defaultMixins";
 
 export default {
     name: "MyCases",
+    mixins: [defaultMixins],
     components: {
         MyCasesFilter,
         HeaderCounter,
@@ -85,6 +88,7 @@ export default {
     },
     props: ["filters", "defaultOption"],
     data() {
+        let that = this;
         return {
             dataAlert: {
               dismissSecs: 5,
@@ -150,6 +154,17 @@ export default {
                 requestFunction(data) {
                     return this.$parent.$parent.getCasesForVueTable(data);
                 },
+                settings: {
+                    "actions":{
+                        class: "fas fa-cog",
+                        id:"pm-dr-column-settings",
+                        events:{ 
+                            click(){
+                                that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
+                            }
+                        }
+                    }
+                }
             },
             translations: null,
             pmDateFormat: window.config.FORMATS.dateFormat,

resources/assets/js/home/MyCases/defaultMixins.js

@@ -0,0 +1,46 @@
+import api from "../../api/index";
+export default {
+    data() {
+        return {
+            random: 1
+        };
+    },
+    methods: {
+        /**
+         * Format columns for custom columns
+         * @param {*} headings 
+         * @returns 
+         */
+        formatColumnSettings(headings) {
+            let res = [];
+            _.forEach(headings, function (value, key) {
+                if (key != "actions") {
+                    res.push({ value, key });
+                }
+            });
+            return res;
+        },
+        /**
+         * Formating the columns selected
+         * @param {*} columns 
+         * @returns 
+         */
+        formatColumnSelected(columns) {
+            let cols = _.clone(columns);
+            cols.pop();
+            return cols;
+        },
+        /**
+         * Event handler when update the settings columns
+         * @param {*} columns 
+         */
+        onUpdateColumnSettings(columns) {
+            let cols = columns;
+            if (_.findIndex(cols, 'actions') == -1) {
+                cols.push("actions");
+            }
+            this.columns = cols;
+            this.random = _.random(0, 10000000000);
+        }
+    }
+}

resources/assets/js/home/Paused/Paused.vue

@@ -9,6 +9,7 @@
       @onUpdateFilters="onUpdateFilters"
     />
     <multiview-header :data="dataMultiviewHeader" />
+    <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
       :data="tableData"
@@ -16,6 +17,7 @@
       :options="options"
       ref="vueTable"
       @row-click="onRowClick"
+      :key="random"
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -200,6 +202,7 @@ export default {
   },
   props: ["defaultOption", "filters"],
   data() {
+    let that = this;
     return {
       newCase: {
         title: this.$i18n.t("ID_NEW_CASE"),
@@ -223,16 +226,15 @@ export default {
       options: {
         filterable: false,
         headings: {
+          detail: this.$i18n.t("ID_DETAIL_CASE"),
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
           task: this.$i18n.t("ID_TASK"),
-          current_user: this.$i18n.t("ID_CURRENT_USER"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
           delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
           priority: this.$i18n.t("ID_PRIORITY"),
-          actions: "",
+          actions: ""
-          detail: "",
         },
         texts: {
             count:this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
@@ -254,6 +256,17 @@ export default {
         requestFunction(data) {
           return this.$parent.$parent.getCasesForVueTable(data);
         },
+        settings: {
+          "actions":{
+              class: "fas fa-cog",
+              id:"pm-dr-column-settings",
+              events:{ 
+                  click(){
+                      that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
+                  }
+              }
+          }
+        },
       },
       pmDateFormat: "Y-m-d H:i:s",
       clickCount: 0,

resources/assets/js/home/Paused/defaultMixins.js

@@ -4,6 +4,7 @@ export default {
     let that = this;
     return {
       typeView: "GRID",
+      random: 1,
       dataMultiviewHeader: {
         actions: [
           {
@@ -139,5 +140,41 @@ export default {
           });
       });
     },
+    /**
+     * Format columns for custom columns
+     * @param {*} headings 
+     * @returns 
+     */
+    formatColumnSettings(headings) {
+      let res=[];
+      _.forEach(headings, function(value, key) {
+        if(key != "actions"){
+            res.push({value,key});
+        }
+      });
+      return res;
+    },
+    /**
+     * Formating the columns selected
+     * @param {*} columns 
+     * @returns 
+     */
+    formatColumnSelected(columns) {
+      let cols = _.clone(columns);
+      cols.pop();
+      return cols;
+    },
+    /**
+     * Event handler when update the settings columns
+     * @param {*} columns 
+     */
+    onUpdateColumnSettings(columns) {
+      let cols = columns;
+      if(_.findIndex(cols, 'actions') == -1){
+        cols.push("actions");
+      }
+      this.columns = cols;
+      this.random = _.random(0, 10000000000);
+    }
   }
 }

resources/assets/js/home/Unassigned/Unassigned.vue

@@ -9,12 +9,14 @@
       @onUpdateFilters="onUpdateFilters"
     />
     <multiview-header :data="dataMultiviewHeader" />
+    <settings-popover :options="formatColumnSettings(options.headings)" target="pm-dr-column-settings" @onUpdateColumnSettings="onUpdateColumnSettings" :key="random+1" :selected="formatColumnSelected(columns)"/>
     <v-server-table
       v-if="typeView === 'GRID'"
       :columns="columns"
       :options="options"
       ref="vueTable"
       @row-click="onRowClick"
+      :key="random"
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -195,6 +197,7 @@ export default {
   },
   props: ["defaultOption", "filters"],
   data() {
+    let that = this;
     return {
       newCase: {
         title: this.$i18n.t("ID_NEW_CASE"),
@@ -217,16 +220,15 @@ export default {
       options: {
         filterable: false,
         headings: {
+          detail: this.$i18n.t("ID_DETAIL_CASE"),
           case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
           case_title: this.$i18n.t("ID_CASE_TITLE"),
           process_name: this.$i18n.t("ID_PROCESS_NAME"),
           task: this.$i18n.t("ID_TASK"),
-          current_user: this.$i18n.t("ID_CURRENT_USER"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
           delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
           priority: this.$i18n.t("ID_PRIORITY"),
-          actions: "",
+          actions: ""
-          detail: "",
         },
         texts: {
             count:this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
@@ -248,6 +250,17 @@ export default {
         requestFunction(data) {
           return this.$parent.$parent.getCasesForVueTable(data);
         },
+        settings: {
+          "actions":{
+            class: "fas fa-cog",
+            id:"pm-dr-column-settings",
+            events:{ 
+                click(){
+                    that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
+                }
+            }
+          }
+        },
       },
       pmDateFormat: "Y-m-d H:i:s",
       clickCount: 0,

resources/assets/js/home/Unassigned/defaultMixins.js

@@ -4,6 +4,7 @@ export default {
     let that = this;
     return {
       typeView: "GRID",
+      random: 1,
       dataMultiviewHeader: {
         actions: [
           {
@@ -135,5 +136,41 @@ export default {
           });
       });
     },
+    /**
+     * Format columns for custom columns
+     * @param {*} headings 
+     * @returns 
+     */
+    formatColumnSettings(headings) {
+      let res=[];
+      _.forEach(headings, function(value, key) {
+        if(key != "actions"){
+            res.push({value,key});
+        }
+      });
+      return res;
+    },
+    /**
+     * Formating the columns selected
+     * @param {*} columns 
+     * @returns 
+     */
+    formatColumnSelected(columns) {
+      let cols = _.clone(columns);
+      cols.pop();
+      return cols;
+    },
+    /**
+     * Event handler when update the settings columns
+     * @param {*} columns 
+     */
+    onUpdateColumnSettings(columns) {
+      let cols = columns;
+      if(_.findIndex(cols, 'actions') == -1){
+        cols.push("actions");
+      }
+      this.columns = cols;
+      this.random = _.random(0, 10000000000);
+    }
   }
 }

resources/assets/js/home/main.js

@@ -3,7 +3,9 @@ import VueRouter from "vue-router";
 import VueSidebarMenu from "vue-sidebar-menu";
 import VueI18n from 'vue-i18n';
 import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
-import { ServerTable, Event, ClientTable} from 'vue-tables-2';
+import { ServerTable, Event, ClientTable } from 'vue-tables-2';
+import VtTableHeadingCustom from './../components/vuetable/extends/VtTableHeadingCustom';
+import SettingsPopover from "../components/vuetable/SettingsPopover.vue";
 import Sortable from 'sortablejs';
 import "@fortawesome/fontawesome-free/css/all.css";
 import "@fortawesome/fontawesome-free/js/all.js";
@@ -18,8 +20,11 @@ Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);
 Vue.use(VueI18n);
 
-Vue.use(ServerTable, {}, false, 'bootstrap3', {});
+Vue.use(ServerTable, {}, false, 'bootstrap3', {
+    tableHeading: VtTableHeadingCustom
+});
 Vue.use(ClientTable, {}, false, 'bootstrap3', {});
+Vue.component('settings-popover', SettingsPopover);
 window.ProcessMaker = {
     apiClient: require('axios')
 };