From 5361616f9b60ecb03950bea51cc7359a0536e496 Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Thu, 22 Jul 2021 19:33:43 +0000
Subject: [PATCH 1/2] PMCORE-3062-A

---
 .../components/vuetable/SettingsPopover.vue   | 167 ++++++++++++++++++
 .../vuetable/extends/VtSettingsControl.vue    |  29 +++
 .../vuetable/extends/VtTableHeadingCustom.vue |  42 +++++
 .../{ => AdvancedSearch}/AdvancedSearch.vue   |  34 ++--
 .../js/home/AdvancedSearch/defaultMixins.js   |  46 +++++
 resources/assets/js/home/Draft/Draft.vue      |  16 +-
 .../assets/js/home/Draft/defaultMixins.js     |  36 ++++
 resources/assets/js/home/Home.vue             |   4 +-
 resources/assets/js/home/Inbox/Todo.vue       |  19 +-
 .../assets/js/home/Inbox/defaultMixins.js     |  37 ++++
 .../assets/js/home/{ => MyCases}/MyCases.vue  |  33 +++-
 .../assets/js/home/MyCases/defaultMixins.js   |  46 +++++
 resources/assets/js/home/Paused/Paused.vue    |  19 +-
 .../assets/js/home/Paused/defaultMixins.js    |  36 ++++
 .../assets/js/home/Unassigned/Unassigned.vue  |  19 +-
 .../js/home/Unassigned/defaultMixins.js       |  36 ++++
 resources/assets/js/home/main.js              |   9 +-
 17 files changed, 595 insertions(+), 33 deletions(-)
 create mode 100644 resources/assets/js/components/vuetable/SettingsPopover.vue
 create mode 100644 resources/assets/js/components/vuetable/extends/VtSettingsControl.vue
 create mode 100644 resources/assets/js/components/vuetable/extends/VtTableHeadingCustom.vue
 rename resources/assets/js/home/{ => AdvancedSearch}/AdvancedSearch.vue (94%)
 create mode 100644 resources/assets/js/home/AdvancedSearch/defaultMixins.js
 rename resources/assets/js/home/{ => MyCases}/MyCases.vue (94%)
 create mode 100644 resources/assets/js/home/MyCases/defaultMixins.js

diff --git a/resources/assets/js/components/vuetable/SettingsPopover.vue b/resources/assets/js/components/vuetable/SettingsPopover.vue
new file mode 100644
index 000000000..5a0e73850
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/assets/js/components/vuetable/extends/VtSettingsControl.vue b/resources/assets/js/components/vuetable/extends/VtSettingsControl.vue
new file mode 100644
index 000000000..1bd6c61a0
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/assets/js/components/vuetable/extends/VtTableHeadingCustom.vue b/resources/assets/js/components/vuetable/extends/VtTableHeadingCustom.vue
new file mode 100644
index 000000000..8d0e150d1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/assets/js/home/AdvancedSearch.vue b/resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
similarity index 94%
rename from resources/assets/js/home/AdvancedSearch.vue
rename to resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
index c9b494fa0..f3d022c3b 100644
--- a/resources/assets/js/home/AdvancedSearch.vue
+++ b/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 ModalNewRequest from "./ModalNewRequest.vue";
-import AdvancedFilter from "../components/search/AdvancedFilter";
-import TaskCell from "../components/vuetable/TaskCell.vue";
-import CurrentUserCell from "../components/vuetable/CurrentUserCell.vue";
-import ModalComments from "./modal/ModalComments.vue";
-import api from "./../api/index";
-import utils from "./../utils/utils";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
+import AdvancedFilter from "../../components/search/AdvancedFilter";
+import TaskCell from "../../components/vuetable/TaskCell.vue";
+import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
+import ModalComments from "../modal/ModalComments.vue";
+import api from "../../api/index";
+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,
diff --git a/resources/assets/js/home/AdvancedSearch/defaultMixins.js b/resources/assets/js/home/AdvancedSearch/defaultMixins.js
new file mode 100644
index 000000000..aa59023fc
--- /dev/null
+++ b/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);
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/js/home/Draft/Draft.vue b/resources/assets/js/home/Draft/Draft.vue
index 6f8e8f01b..1836bd757 100644
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/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,  
diff --git a/resources/assets/js/home/Draft/defaultMixins.js b/resources/assets/js/home/Draft/defaultMixins.js
index f3193f9e6..56852eeac 100644
--- a/resources/assets/js/home/Draft/defaultMixins.js
+++ b/resources/assets/js/home/Draft/defaultMixins.js
@@ -4,6 +4,7 @@ export default {
     let that = this;
     return {
       typeView: "GRID",
+      random: 1,
       dataMultiviewHeader: {
         actions: [
           {
@@ -136,5 +137,40 @@ 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);
+    }
   }
 }
\ No newline at end of file
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index ea7d81ac3..ce8ab8d90 100644
--- a/resources/assets/js/home/Home.vue
+++ b/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";
diff --git a/resources/assets/js/home/Inbox/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue
index 5aceed80c..9f96fcd1f 100644
--- a/resources/assets/js/home/Inbox/Todo.vue
+++ b/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,
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
index ed071edac..8e69bf9ae 100644
--- a/resources/assets/js/home/Inbox/defaultMixins.js
+++ b/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: [
           {
@@ -162,5 +164,40 @@ 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);
+    }
   }
 }
\ No newline at end of file
diff --git a/resources/assets/js/home/MyCases.vue b/resources/assets/js/home/MyCases/MyCases.vue
similarity index 94%
rename from resources/assets/js/home/MyCases.vue
rename to resources/assets/js/home/MyCases/MyCases.vue
index 3f49420fe..612b89513 100644
--- a/resources/assets/js/home/MyCases.vue
+++ b/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 ButtonFleft from "../components/home/ButtonFleft.vue";
-import ModalNewRequest from "./ModalNewRequest.vue";
-import MyCasesFilter from "../components/search/MyCasesFilter";
-import ModalComments from "./modal/ModalComments.vue";
-import GroupedCell from "../components/vuetable/GroupedCell.vue";
-import api from "./../api/index";
-import utils from "./../utils/utils";
+import HeaderCounter from "../../components/home/HeaderCounter.vue";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
+import MyCasesFilter from "../../components/search/MyCasesFilter";
+import ModalComments from "../modal/ModalComments.vue";
+import GroupedCell from "../../components/vuetable/GroupedCell.vue";
+import api from "../../api/index";
+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,
diff --git a/resources/assets/js/home/MyCases/defaultMixins.js b/resources/assets/js/home/MyCases/defaultMixins.js
new file mode 100644
index 000000000..aa59023fc
--- /dev/null
+++ b/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);
+        }
+    }
+}
\ No newline at end of file
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
index e7ae0e2c5..114d69bcf 100644
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/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: "",
-          detail: "",
+          actions: ""
         },
         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,
diff --git a/resources/assets/js/home/Paused/defaultMixins.js b/resources/assets/js/home/Paused/defaultMixins.js
index 29ea6a09e..a081cf775 100644
--- a/resources/assets/js/home/Paused/defaultMixins.js
+++ b/resources/assets/js/home/Paused/defaultMixins.js
@@ -4,6 +4,7 @@ export default {
     let that = this;
     return {
       typeView: "GRID",
+      random: 1,
       dataMultiviewHeader: {
         actions: [
           {
@@ -136,5 +137,40 @@ 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);
+    }
   }
 }
\ No newline at end of file
diff --git a/resources/assets/js/home/Unassigned/Unassigned.vue b/resources/assets/js/home/Unassigned/Unassigned.vue
index 07ed86ff7..8752aa27d 100644
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/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: "",
-          detail: "",
+          actions: ""
         },
         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,
diff --git a/resources/assets/js/home/Unassigned/defaultMixins.js b/resources/assets/js/home/Unassigned/defaultMixins.js
index be3c636a9..930f4d3fe 100644
--- a/resources/assets/js/home/Unassigned/defaultMixins.js
+++ b/resources/assets/js/home/Unassigned/defaultMixins.js
@@ -4,6 +4,7 @@ export default {
     let that = this;
     return {
       typeView: "GRID",
+      random: 1,
       dataMultiviewHeader: {
         actions: [
           {
@@ -132,5 +133,40 @@ 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);
+    }
   }
 }
\ No newline at end of file
diff --git a/resources/assets/js/home/main.js b/resources/assets/js/home/main.js
index 6e5fdcdbb..ad7208823 100644
--- a/resources/assets/js/home/main.js
+++ b/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')
 };

From ba5389aa9f72d1dec04ecc5f1179422953184211 Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Thu, 22 Jul 2021 19:39:12 +0000
Subject: [PATCH 2/2] update

---
 resources/assets/js/home/Draft/defaultMixins.js      | 3 ++-
 resources/assets/js/home/Inbox/defaultMixins.js      | 3 ++-
 resources/assets/js/home/Paused/defaultMixins.js     | 3 ++-
 resources/assets/js/home/Unassigned/defaultMixins.js | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/resources/assets/js/home/Draft/defaultMixins.js b/resources/assets/js/home/Draft/defaultMixins.js
index 56852eeac..34a923cec 100644
--- a/resources/assets/js/home/Draft/defaultMixins.js
+++ b/resources/assets/js/home/Draft/defaultMixins.js
@@ -149,7 +149,8 @@ export default {
             res.push({value,key});
         }
       });
-      return res;    },
+      return res;
+    },
     /**
      * Formating the columns selected
      * @param {*} columns 
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
index 8e69bf9ae..5c1e31235 100644
--- a/resources/assets/js/home/Inbox/defaultMixins.js
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -176,7 +176,8 @@ export default {
             res.push({value,key});
         }
       });
-      return res;    },
+      return res;
+    },
     /**
      * Formating the columns selected
      * @param {*} columns 
diff --git a/resources/assets/js/home/Paused/defaultMixins.js b/resources/assets/js/home/Paused/defaultMixins.js
index a081cf775..383a8c24a 100644
--- a/resources/assets/js/home/Paused/defaultMixins.js
+++ b/resources/assets/js/home/Paused/defaultMixins.js
@@ -149,7 +149,8 @@ export default {
             res.push({value,key});
         }
       });
-      return res;    },
+      return res;
+    },
     /**
      * Formating the columns selected
      * @param {*} columns 
diff --git a/resources/assets/js/home/Unassigned/defaultMixins.js b/resources/assets/js/home/Unassigned/defaultMixins.js
index 930f4d3fe..cc7c1b59f 100644
--- a/resources/assets/js/home/Unassigned/defaultMixins.js
+++ b/resources/assets/js/home/Unassigned/defaultMixins.js
@@ -145,7 +145,8 @@ export default {
             res.push({value,key});
         }
       });
-      return res;    },
+      return res;
+    },
     /**
      * Formating the columns selected
      * @param {*} columns