¡complete save settings for all lists

resources/assets/js/api/Config.js

@@ -5,8 +5,8 @@ let Api = new ApiInstance( Services );
 export let config = {
     get(data) {
         return Api.get({
-            service: "CONFIG",
+            service: "GET_CONFIG",
-            params: data
+            keys: data
         });
     },
     post(data) {

resources/assets/js/api/Services.js

@@ -68,5 +68,6 @@
     TASKS: "/home/tasks",
     CATEGORIES: "/home/categories",
     DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
-    CONFIG: "/home/config"
+    CONFIG: "/home/config",
+    GET_CONFIG: "/home/config/{id}/{name}"
 };

resources/assets/js/components/search/CasesFilter.vue

@@ -233,7 +233,9 @@ export default {
             initialFilters = this.prepareFilterItems(element.items, this.selected, true);
         }
         //adding process name filter 
-        initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
+        if (self.byProcessName !== "") {
+            initialFilters =[...new Set([...initialFilters,...this.prepareFilterItems(this.processName.items, self.byProcessName, true)])];
+        }
         this.$emit("onUpdateFilters", {params: initialFilters, refresh: false}); 
     },
     /**
@@ -348,6 +350,7 @@ export default {
      * @param {string} tag filter identifier
      */
     updateSearchTag(params) {
+      debugger;
       let temp = this.filters.concat(params);
       temp = [...new Set([...this.filters, ...params])];
       this.$emit("onUpdateFilters", { params: temp, refresh: true });

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

@@ -169,21 +169,12 @@ export default {
                     selectAllMode: "page",
                     programmatic: false,
                 },
+                sortable: [],
+                orderBy: {},
                 requestFunction(data) {
                     return this.$parent.$parent.getCasesForVueTable(data);
                 },
-                customFilters: ["myfilter"],
+                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/Draft/Draft.vue

@@ -18,6 +18,7 @@
       ref="vueTable"
       @row-click="onRowClick"
       :key="random"
+      name="draft"
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -172,6 +173,7 @@ import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue"
 import VueListView from "../../components/dataViews/vueListView/VueListView.vue";
 import defaultMixins from "./defaultMixins";
 import Ellipsis from '../../components/utils/ellipsis.vue';
+import { Event } from 'vue-tables-2';
 
 export default {
   name: "Draft",
@@ -187,10 +189,15 @@ export default {
     VueCardView,
     VueListView
   },
-  props: ["defaultOption", "filters"],
+  props: ["defaultOption", "settings"],
   data() {
     let that = this;
     return {
+      columMap: {
+          case_number: "APP_NUMBER",
+          case_title: "DEL_TITLE",
+          process_name: "PRO_TITLE"
+      },
       newCase: {
         title: this.$i18n.t("ID_NEW_CASE"),
         class: "btn-success",
@@ -198,20 +205,36 @@ export default {
           this.$refs["newRequest"].show();
         },
       },
-      columns: [
+      // columns: [
-       "detail",
+      //  "detail",
-        "case_number",
+      //   "case_number",
-        "case_title",
+      //   "case_title",
-        "process_name",
+      //   "process_name",
-        "task",
+      //   "task",
-        "priority",
+      //   "priority",
-        "actions"
+      //   "actions"
-      ],
+      // ],
+       filters:
+          this.settings && this.settings.filters
+              ? this.settings.filters
+              : {},
+      columns:
+          this.settings && this.settings.columns
+              ? this.settings.columns
+              : [
+                  "detail",
+                  "case_number",
+                  "case_title",
+                  "process_name",
+                  "task",
+                  "priority",
+                  "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"),
@@ -226,6 +249,8 @@ export default {
           selectAllMode: "page",
           programmatic: false,
         },
+        sortable: ['case_number'],
+        orderBy: this.settings && this.settings.orderBy ?  this.settings.orderBy: {},
         requestFunction(data) {
           return this.$parent.$parent.getCasesForVueTable(data);
         },
@@ -270,9 +295,21 @@ export default {
     this.initFilters();
   },
   mounted() {
+    let that = this;
     this.openDefaultCase();
+     // define sort event
+    Event.$on('vue-tables.draft.sorted', function (data) {
+        that.$emit("updateUserSettings", "orderBy", data);
+    });
+  },
+  watch: {
+      columns: function (val) {
+          this.$emit("updateUserSettings", "columns", val);
+      },  
+      filters: function (val) {
+          this.$emit("updateUserSettings", "filters", val);
+      },
   },
-  watch: {},
   computed: {
     /**
      * Build our ProcessMaker apiClient
@@ -364,7 +401,8 @@ export default {
         paged,
         limit = data.limit,
         start = data.page === 1 ? 0 : limit * (data.page - 1),
-        filters = {};
+        filters = {},
+        sort = "";
       paged = start + "," + limit;
 
       filters = {
@@ -376,6 +414,10 @@ export default {
               filters[item.filterVar] = item.value;
           }
       });
+      sort = that.prepareSortString(data);
+      if (sort) {
+          filters["sort"] = sort;
+      }
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases
           .draft(filters)
@@ -391,6 +433,18 @@ export default {
           });
       });
     },
+    /**
+     * Prepare sort string to be sended in the service
+     * @param {object} data
+     * @returns {string}
+     */
+    prepareSortString(data){
+        let sort = "";
+        if (data.orderBy && this.columMap[data.orderBy]) {
+            sort  =  `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
+        }
+        return sort;
+    },
     /**
      * Format Response API TODO to grid todo and columns
      */
@@ -456,7 +510,7 @@ export default {
     },
     onRemoveFilter(data) {},
     onUpdateFilters(data) {
-      this.$emit("onUpdateFilters", data.params);
+      this.filters = data.params;
       if (data.refresh) {
         this.$nextTick(() => {
           if (this.typeView === "GRID") {

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

@@ -87,7 +87,9 @@ export default {
 
       _.forIn(this.filters, function (item, key) {
         if (item.value && item.value != "") {
-          filters[item.filterVar] = item.value;
+            if(filters && item.value) {
+                filters[item.filterVar] = item.value;
+            }
         }
       });
       return new Promise((resolutionFunc, rejectionFunc) => {

resources/assets/js/home/Home.vue

@@ -20,12 +20,12 @@
             <component
                 v-bind:is="page"
                 ref="component"
-                :filters="filters"
                 :id="pageId"
                 :pageUri="pageUri"
                 :name="pageName"
                 :defaultOption="defaultOption"
-                :settings="config[page]"
+                :settings="config.setting[page]"
+                :filters="filters"
                 @onSubmitFilter="onSubmitFilter"    
                 @onRemoveFilter="onRemoveFilter"
                 @onUpdatePage="onUpdatePage"
@@ -87,10 +87,10 @@ export default {
             pageName: null,
             pageUri: null,
             filters: null,
-            config: {},
+            config: {
-            configParams: {
                 id: window.config.userId || "1",
-                name: "home"
+                name: "home",
+                setting: {}
             },
             menuMap: {
                 CASES_MY_CASES: "MyCases",
@@ -162,7 +162,10 @@ export default {
          */
         getUserSettings() {
             api.config
-                .get(this.configParams)
+                .get({
+                    id: this.config.id,
+                    name: this.config.name
+                })
                 .then((response) => {
                     if (response.data) {
                         this.config = response.data;
@@ -196,23 +199,22 @@ export default {
          * Update the user config service
          */
         updateUserSettings(prop, data) {
-            if (!this.config.setting[this.page]) {
+            if (this.config.setting) {
-                this.config.setting[this.page] = {};
+                if (!this.config.setting[this.page]) {
+                    this.config.setting[this.page] = {};
+                }
+                this.config.setting[this.page][prop] = data;
+                api.config
+                    .put(this.config)
+                    .then((response) => {
+                        if (response.data) {
+                            //TODO success response
+                        }
+                    })
+                    .catch((e) => {
+                        console.error(e);
+                    });
             }
-            this.config.setting[this.page][prop] = data;
-            console.log(this.config);
-            api.config
-                .put(this.config)
-                .then((response) => {
-                    if (response.data) {
-                        // this.settings = response.data;
-                        console.log("Updated")
-                        console.log(this.config);
-                    }
-                })
-                .catch((e) => {
-                    console.error(e);
-                });
         },
         /**
          * Set default cases menu option
@@ -274,6 +276,7 @@ export default {
                 this.pageId = item.item.id;
                 this.pageUri = item.item.href;
                 this.pageName = item.item.title;
+
             } else {
                 this.filters = [];
                 this.pageId = null;

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

@@ -20,6 +20,7 @@
       ref="vueTable"
       @row-click="onRowClick"
       :key="random"
+      name="todo" 
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -186,7 +187,7 @@ import defaultMixins from "./defaultMixins";
 import Ellipsis from '../../components/utils/ellipsis.vue';
 import ModalPauseCase from '../modal/ModalPauseCase.vue';
 import ModalReassignCase from '../modal/ModalReassignCase.vue';
-
+import { Event } from 'vue-tables-2';
 
 export default {
   name: "Todo",
@@ -204,10 +205,15 @@ export default {
     ModalPauseCase,
     ModalReassignCase,
   },
-  props: ["defaultOption", "filters"],
+  props: ["defaultOption", "settings"],
   data() {
     let that = this;
     return {
+      columMap: {
+          case_number: "APP_NUMBER",
+          case_title: "DEL_TITLE",
+          process_name: "PRO_TITLE"
+      },
       newCase: {
         title: this.$i18n.t("ID_NEW_CASE"),
         class: "btn-success",
@@ -215,17 +221,24 @@ export default {
           this.$refs["newRequest"].show();
         },
       },
-      columns: [
+      filters:
-        "detail",
+          this.settings && this.settings.filters
-        "case_number",
+              ? this.settings.filters
-        "case_title",
+              : {},
-        "process_name",
+      columns:
-        "task",
+          this.settings && this.settings.columns
-        "due_date",
+              ? this.settings.columns
-        "delegation_date",
+              : [
-        "priority",
+                  "detail",
-        "actions"
+                  "case_number",
-      ],
+                  "case_title",
+                  "process_name",
+                  "task",
+                  "due_date",
+                  "delegation_date",
+                  "priority",
+                  "actions"
+                ],
       tableData: [],
       options: {
         filterable: false,
@@ -257,6 +270,8 @@ export default {
           selectAllMode: "page",
           programmatic: false,
         },
+        sortable: ['case_number'],
+        orderBy: this.settings && this.settings.orderBy ?  this.settings.orderBy: {},
         requestFunction(data) {
           return this.$parent.$parent.getCasesForVueTable(data);
         },
@@ -292,10 +307,22 @@ export default {
     this.initFilters();
   },
   mounted() {
+    let that = this;
     // force to open case
     this.openDefaultCase();
+    // define sort event
+    Event.$on('vue-tables.todo.sorted', function (data) {
+        that.$emit("updateUserSettings", "orderBy", data);
+    });
+  },
+  watch: {
+      columns: function (val) {
+          this.$emit("updateUserSettings", "columns", val);
+      },  
+      filters: function (val) {
+          this.$emit("updateUserSettings", "filters", val);
+      },
   },
-  watch: {},
   computed: {
     /**
      * Build our ProcessMaker apiClient
@@ -387,18 +414,23 @@ export default {
         paged,
         limit = data.limit,
         start = data.page === 1 ? 0 : limit * (data.page - 1),
-        filters = {};
+        filters = {},
+        sort = "";
       paged = start + "," + limit;
 
       filters = {
         paged: paged,
-      };
+      }
-
+      debugger;
       _.forIn(this.filters, function (item, key) {
           if(filters && item.value) {
               filters[item.filterVar] = item.value;
           }
       });
+      sort = that.prepareSortString(data);
+      if (sort) {
+          filters["sort"] = sort;
+      }
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases
           .todo(filters)
@@ -414,6 +446,18 @@ export default {
           });
       });
     },
+    /**
+     * Prepare sort string to be sended in the service
+     * @param {object} data
+     * @returns {string}
+     */
+    prepareSortString(data){
+        let sort = "";
+        if (data.orderBy && this.columMap[data.orderBy]) {
+            sort  =  `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
+        }
+        return sort;
+    },
     /**
      * Format Response API TODO to grid todo and columns
      */
@@ -491,7 +535,7 @@ export default {
     },
     onRemoveFilter(data) {},
     onUpdateFilters(data) {
-      this.$emit("onUpdateFilters", data.params);
+      this.filters = data.params;
       if (data.refresh) {
         this.$nextTick(() => {
           if (this.typeView === "GRID") {

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

@@ -120,7 +120,9 @@ export default {
         paged: paged,
       };
       _.forIn(this.filters, function (item, key) {
-        filters[item.filterVar] = item.value;
+          if(filters && item.value) {
+              filters[item.filterVar] = item.value;
+          }
       });
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases

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

@@ -1,14 +1,14 @@
 <template>
     <div id="v-mycases" ref="v-mycases" class="v-container-mycases">
-      <b-alert
+        <b-alert
-        :show="dataAlert.dismissCountDown"
+            :show="dataAlert.dismissCountDown"
-        dismissible
+            dismissible
-        :variant="dataAlert.variant"
+            :variant="dataAlert.variant"
-        @dismissed="dataAlert.dismissCountDown = 0"
+            @dismissed="dataAlert.dismissCountDown = 0"
-        @dismiss-count-down="countDownChanged"
+            @dismiss-count-down="countDownChanged"
-      >
+        >
-        {{ dataAlert.message }}
+            {{ dataAlert.message }}
-      </b-alert>
+        </b-alert>
         <button-fleft :data="newCase"></button-fleft>
         <MyCasesFilter
             :filters="filters"
@@ -18,7 +18,13 @@
         />
         <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)"/>
+        <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"
@@ -30,7 +36,7 @@
         >
             <div slot="detail" slot-scope="props">
                 <div class="btn-default" @click="openCaseDetail(props.row)">
-                <i class="fas fa-info-circle"></i>
+                    <i class="fas fa-info-circle"></i>
                 </div>
             </div>
             <div slot="case_number" slot-scope="props">
@@ -56,12 +62,19 @@
                 {{ props.row.DURATION }}
             </div>
             <div slot="actions" slot-scope="props">
-                <div class="btn-default"  v-bind:style="{ color: props.row.MESSAGE_COLOR}" @click="openComments(props.row)">
+                <div
+                    class="btn-default"
+                    v-bind:style="{ color: props.row.MESSAGE_COLOR }"
+                    @click="openComments(props.row)"
+                >
                     <span class="fas fa-comments"></span>
                 </div>
             </div>
         </v-server-table>
-        <ModalComments ref="modal-comments" @postNotes="onPostNotes"></ModalComments>
+        <ModalComments
+            ref="modal-comments"
+            @postNotes="onPostNotes"
+        ></ModalComments>
     </div>
 </template>
 
@@ -75,8 +88,7 @@ import GroupedCell from "../../components/vuetable/GroupedCell.vue";
 import api from "../../api/index";
 import utils from "../../utils/utils";
 import defaultMixins from "./defaultMixins";
-import { Event } from 'vue-tables-2';
+import { Event } from "vue-tables-2";
-
 
 export default {
     name: "MyCases",
@@ -89,18 +101,18 @@ export default {
         GroupedCell,
         ModalComments,
     },
-    props: ["filters", "defaultOption", "settings"],
+    props: ["defaultOption", "settings"],
     data() {
         let that = this;
         return {
             dataAlert: {
-              dismissSecs: 5,
+                dismissSecs: 5,
-              dismissCountDown: 0,
+                dismissCountDown: 0,
-              message: "",
+                message: "",
-              variant: "info"
+                variant: "info",
             },
             metrics: [],
-            title: this.$i18n.t('ID_MY_CASES'),
+            title: this.$i18n.t("ID_MY_CASES"),
             filter: "CASES_INBOX",
             allView: [],
             filterHeader: "STARTED",
@@ -108,7 +120,7 @@ export default {
             columMap: {
                 case_number: "APP_NUMBER",
                 case_title: "DEL_TITLE",
-                process_name: "PRO_TITLE"
+                process_name: "PRO_TITLE",
             },
             newCase: {
                 title: this.$i18n.t("ID_NEW_CASE"),
@@ -117,17 +129,24 @@ export default {
                     this.$refs["newRequest"].show();
                 },
             },
-            columns: [
+            filters:
-                "case_number",
+                this.settings && this.settings.filters
-                "case_title",
+                    ? this.settings.filters
-                "process_name",
+                    : {},
-                "pending_taks",
+            columns:
-                "status",
+                this.settings && this.settings.columns
-                "start_date",
+                    ? this.settings.columns
-                "finish_date",
+                    : [
-                "duration",
+                          "case_number",
-                "actions",
+                          "case_title",
-            ],
+                          "process_name",
+                          "pending_taks",
+                          "status",
+                          "start_date",
+                          "finish_date",
+                          "duration",
+                          "actions",
+                      ],
             tableData: [],
             options: {
                 filterable: false,
@@ -143,13 +162,13 @@ export default {
                     actions: "",
                 },
                 texts: {
-                    count:this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
+                    count: this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
                     first: this.$i18n.t("ID_FIRST"),
                     last: this.$i18n.t("ID_LAST"),
                     filter: this.$i18n.t("ID_FILTER") + ":",
                     limit: this.$i18n.t("ID_RECORDS") + ":",
                     page: this.$i18n.t("ID_PAGE") + ":",
-                    noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS")
+                    noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
                 },
                 selectable: {
                     mode: "single",
@@ -159,34 +178,40 @@ export default {
                     selectAllMode: "page",
                     programmatic: false,
                 },
-                sortable: ['case_number'],
+                sortable: ["case_number"],
-                orderBy: this.settings && this.settings.orderBy ?  this.settings.orderBy: {},
+                orderBy:
+                    this.settings && this.settings.orderBy
+                        ? this.settings.orderBy
+                        : {},
                 requestFunction(data) {
                     return this.$parent.$parent.getCasesForVueTable(data);
                 },
                 settings: {
-                    "actions":{
+                    actions: {
                         class: "fas fa-cog",
-                        id:"pm-dr-column-settings",
+                        id: "pm-dr-column-settings",
-                        events:{ 
+                        events: {
-                            click(){
+                            click() {
-                                that.$root.$emit('bv::show::popover', 'pm-dr-column-settings')
+                                that.$root.$emit(
-                            }
+                                    "bv::show::popover",
-                        }
+                                    "pm-dr-column-settings"
-                    }
+                                );
-                }
+                            },
+                        },
+                    },
+                },
             },
             translations: null,
             pmDateFormat: window.config.FORMATS.dateFormat,
             clickCount: 0,
             singleClickTimer: null,
             statusTitle: {
-                "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
+                ON_TIME: this.$i18n.t("ID_IN_PROGRESS"),
-                "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
+                OVERDUE: this.$i18n.t("ID_TASK_OVERDUE"),
-                "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
+                DRAFT: this.$i18n.t("ID_IN_DRAFT"),
-                "PAUSED": this.$i18n.t("ID_PAUSED"),
+                PAUSED: this.$i18n.t("ID_PAUSED"),
-                "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
+                UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
-            }
+            },
         };
     },
     mounted() {
@@ -199,15 +224,16 @@ export default {
             this.$refs["newRequest"].show();
         }
         // define sort event
-        Event.$on('vue-tables.mycases.sorted', function (data) {
+        Event.$on("vue-tables.mycases.sorted", function(data) {
             that.$emit("updateUserSettings", "orderBy", data);
         });
+        // this.columns = this.settings.columns;
     },
     watch: {
-        columns: function (val) {
+        columns: function(val) {
             this.$emit("updateUserSettings", "columns", val);
         },
-        filters: function (val) {
+        filters: function(val) {
             this.$emit("updateUserSettings", "filters", val);
         },
     },
@@ -227,12 +253,12 @@ export default {
          */
         openDefaultCase() {
             let params;
-            if(this.defaultOption) {
+            if (this.defaultOption) {
                 params = utils.getAllUrlParams(this.defaultOption);
                 if (params && params.app_uid && params.del_index) {
                     this.openCase({
                         APP_UID: params.app_uid,
-                        DEL_INDEX: params.del_index
+                        DEL_INDEX: params.del_index,
                     });
                     this.$emit("cleanDefaultOption");
                 }
@@ -266,7 +292,7 @@ export default {
                 DEL_INDEX: item.DEL_INDEX,
                 PRO_UID: item.PRO_UID,
                 TAS_UID: item.TAS_UID,
-                ACTION: "todo"
+                ACTION: "todo",
             });
             this.$emit("onUpdatePage", "XCase");
         },
@@ -278,17 +304,22 @@ export default {
         openCaseDetail(item) {
             let that = this;
             api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
-                api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
+                api.cases
-                    that.$emit("onUpdateDataCase", {
+                    .cases_open(_.extend({ ACTION: "todo" }, item))
-                    APP_UID: item.APP_UID,
+                    .then(() => {
-                    DEL_INDEX: item.DEL_INDEX,
+                        that.$emit("onUpdateDataCase", {
-                    PRO_UID: item.PRO_UID,
+                            APP_UID: item.APP_UID,
-                    TAS_UID: item.TAS_UID,
+                            DEL_INDEX: item.DEL_INDEX,
-                    APP_NUMBER: item.CASE_NUMBER,
+                            PRO_UID: item.PRO_UID,
-                    ACTION: that.filterHeader === "SUPERVISING" ? "to_revise": "todo"
+                            TAS_UID: item.TAS_UID,
+                            APP_NUMBER: item.CASE_NUMBER,
+                            ACTION:
+                                that.filterHeader === "SUPERVISING"
+                                    ? "to_revise"
+                                    : "todo",
+                        });
+                        that.$emit("onUpdatePage", "case-detail");
                     });
-                    that.$emit("onUpdatePage", "case-detail");
-                });
             });
         },
         /**
@@ -333,13 +364,12 @@ export default {
                 filters = {},
                 sort = "";
             paged = start + "," + limit;
-            debugger;
             filters = {
                 filter: that.filterHeader,
                 paged: paged,
             };
-            _.forIn(this.filters, function (item, key) {
+            _.forIn(this.filters, function(item, key) {
-                if(filters && item.value) {
+                if (filters && item.value) {
                     filters[item.filterVar] = item.value;
                 }
             });
@@ -368,10 +398,12 @@ export default {
          * @param {object} data
          * @returns {string}
          */
-        prepareSortString(data){
+        prepareSortString(data) {
             let sort = "";
             if (data.orderBy && this.columMap[data.orderBy]) {
-                sort  =  `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
+                sort = `${this.columMap[data.orderBy]},${
+                    data.ascending === 1 ? "ASC" : "DESC"
+                }`;
             }
             return sort;
         },
@@ -389,13 +421,16 @@ export default {
                     STATUS: v.APP_STATUS,
                     START_DATE: v.APP_CREATE_DATE_LABEL || "",
                     FINISH_DATE: v.APP_FINISH_DATE_LABEL || "",
-                    PENDING_TASKS: that.formantPendingTask(v.PENDING, v.APP_STATUS),
+                    PENDING_TASKS: that.formantPendingTask(
+                        v.PENDING,
+                        v.APP_STATUS
+                    ),
                     DURATION: v.DURATION,
                     DEL_INDEX: v.DEL_INDEX,
                     APP_UID: v.APP_UID,
                     PRO_UID: v.PRO_UID,
                     TAS_UID: v.TAS_UID,
-                    MESSAGE_COLOR: v.CASE_NOTES_COUNT > 0 ? "black":"silver"
+                    MESSAGE_COLOR: v.CASE_NOTES_COUNT > 0 ? "black" : "silver",
                 });
             });
             return data;
@@ -409,26 +444,34 @@ export default {
                 dataFormat = [];
             for (i = 0; i < data.length; i += 1) {
                 userDataFormat = utils.userNameDisplayFormat({
-                        userName: data[i].user_tooltip.usr_username || "",
+                    userName: data[i].user_tooltip.usr_username || "",
-                        firstName: data[i].user_tooltip.usr_firstname || "",
+                    firstName: data[i].user_tooltip.usr_firstname || "",
-                        lastName: data[i].user_tooltip.usr_lastname || "",
+                    lastName: data[i].user_tooltip.usr_lastname || "",
-                        format: window.config.FORMATS.format || null
+                    format: window.config.FORMATS.format || null,
-                    });
+                });
-                dataFormat.push(
+                dataFormat.push({
-                    {
+                    TAS_NAME: data[i].tas_title,
-                        TAS_NAME: data[i].tas_title,
+                    STATUS: data[i].tas_color,
-                        STATUS: data[i].tas_color,
+                    DELAYED_TITLE: this.delayedTitle(data[i], status),
-                        DELAYED_TITLE: this.delayedTitle(data[i], status),
+                    DELAYED_MSG:
-                        DELAYED_MSG: data[i].tas_status === "OVERDUE" && status !== "COMPLETED" ? data[i].delay : "",
+                        data[i].tas_status === "OVERDUE" &&
-                        AVATAR: userDataFormat !== "" ? window.config.SYS_SERVER_AJAX +
+                        status !== "COMPLETED"
-                                window.config.SYS_URI +
+                            ? data[i].delay
-                                `users/users_ViewPhotoGrid?pUID=${data[i].user_id}` : "",
+                            : "",
-                        USERNAME: userDataFormat !== "" ? userDataFormat : this.$i18n.t("ID_UNASSIGNED"),
+                    AVATAR:
-                        POSITION: data[i].user_tooltip.usr_position,
+                        userDataFormat !== ""
-                        EMAIL: data[i].user_tooltip.usr_email,
+                            ? window.config.SYS_SERVER_AJAX +
-                        UNASSIGNED: userDataFormat !== "" ? true : false
+                              window.config.SYS_URI +
-                    }
+                              `users/users_ViewPhotoGrid?pUID=${data[i].user_id}`
-                );
+                            : "",
+                    USERNAME:
+                        userDataFormat !== ""
+                            ? userDataFormat
+                            : this.$i18n.t("ID_UNASSIGNED"),
+                    POSITION: data[i].user_tooltip.usr_position,
+                    EMAIL: data[i].user_tooltip.usr_email,
+                    UNASSIGNED: userDataFormat !== "" ? true : false,
+                });
             }
             return dataFormat;
         },
@@ -442,10 +485,15 @@ export default {
             let title = "";
             if (status === "COMPLETED") {
                 title = this.$i18n.t("ID_COMPLETED") + ": ";
-                title += data.tas_status === "ON_TIME" ? this.$i18n.t("ID_ON_TIME"): this.$i18n.t("ID_TASK_OVERDUE");
+                title +=
+                    data.tas_status === "ON_TIME"
+                        ? this.$i18n.t("ID_ON_TIME")
+                        : this.$i18n.t("ID_TASK_OVERDUE");
             } else {
-                title = data.tas_status === "OVERDUE" ?
+                title =
-                this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[data.tas_status];
+                    data.tas_status === "OVERDUE"
+                        ? this.$i18n.t("ID_DELAYED") + ":"
+                        : this.statusTitle[data.tas_status];
             }
             return title;
         },
@@ -562,7 +610,7 @@ export default {
                 };
             _.forEach(response, (v) => {
                 //Hack for display the SUPERVISING CARD
-                if(!(v.id === "SUPERVISING" && v.counter === 0)){
+                if (!(v.id === "SUPERVISING" && v.counter === 0)) {
                     data.push({
                         title: v.title,
                         counter: v.counter,
@@ -574,7 +622,7 @@ export default {
                             that.$refs["vueTable"].setPage(1); // Reset the page when change the header filter
                             that.$refs["vueTable"].getData();
                         },
-                        class: info[v.id].class
+                        class: info[v.id].class,
                     });
                 }
             });
@@ -591,11 +639,11 @@ export default {
                 that.$refs["modal-comments"].show();
             });
         },
-        onRemoveFilter(data) {
+        onRemoveFilter(data) {},
-        },
         onUpdateFilters(data) {
-            this.$emit("onUpdateFilters", data.params);
+            debugger;
-
+            // this.$emit("onUpdateFilters", data.params);
+            this.filters = data.params;
             if (data.refresh) {
                 this.$nextTick(() => {
                     this.$refs["vueTable"].getData();
@@ -614,9 +662,9 @@ export default {
          * @param {string} type - alert type
          */
         showAlert(message, type) {
-          this.dataAlert.message = message;
+            this.dataAlert.message = message;
-          this.dataAlert.variant = type || "info";
+            this.dataAlert.variant = type || "info";
-          this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
+            this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
         },
         /**
          * Updates the alert dismiss value to update
@@ -624,7 +672,7 @@ export default {
          * @param {mumber}
          */
         countDownChanged(dismissCountDown) {
-          this.dataAlert.dismissCountDown = dismissCountDown;
+            this.dataAlert.dismissCountDown = dismissCountDown;
         },
     },
 };

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

@@ -19,6 +19,7 @@
       ref="vueTable"
       @row-click="onRowClick"
       :key="random"
+      name="paused"
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -186,6 +187,7 @@ import VueListView from "../../components/dataViews/vueListView/VueListView.vue"
 import defaultMixins from "./defaultMixins";
 import Ellipsis from '../../components/utils/ellipsis.vue';
 import ModalReassignCase from '../modal/ModalReassignCase.vue';
+import { Event } from 'vue-tables-2';
 
 export default {
   name: "Paused",
@@ -203,10 +205,15 @@ export default {
     VueListView,
     ModalReassignCase,
   },
-  props: ["defaultOption", "filters"],
+  props: ["defaultOption", "settings"],
   data() {
     let that = this;
     return {
+      columMap: {
+          case_number: "APP_NUMBER",
+          case_title: "DEL_TITLE",
+          process_name: "PRO_TITLE"
+      },
       newCase: {
         title: this.$i18n.t("ID_NEW_CASE"),
         class: "btn-success",
@@ -214,17 +221,35 @@ export default {
           this.$refs["newRequest"].show();
         },
       },
-      columns: [
+      // columns: [
-        "detail",
+      //   "detail",
-        "case_number",
+      //   "case_number",
-        "case_title",
+      //   "case_title",
-        "process_name",
+      //   "process_name",
-        "task",
+      //   "task",
-        "due_date",
+      //   "due_date",
-        "delegation_date",
+      //   "delegation_date",
-        "priority",
+      //   "priority",
-        "actions",
+      //   "actions",
-      ],
+      // ],
+      filters:
+          this.settings && this.settings.filters
+              ? this.settings.filters
+              : {},
+      columns:
+          this.settings && this.settings.columns
+              ? this.settings.columns
+              : [
+                  "detail",
+                  "case_number",
+                  "case_title",
+                  "process_name",
+                  "task",
+                  "due_date",
+                  "delegation_date",
+                  "priority",
+                  "actions"
+                ],
       tableData: [],
       options: {
         filterable: false,
@@ -256,6 +281,8 @@ export default {
           selectAllMode: "page",
           programmatic: false,
         },
+        sortable: ['case_number'],
+        orderBy: this.settings && this.settings.orderBy ?  this.settings.orderBy: {},
         requestFunction(data) {
           return this.$parent.$parent.getCasesForVueTable(data);
         },
@@ -291,10 +318,21 @@ export default {
     this.initFilters();
   },
   mounted() {
+    let that = this;
     // force to open case
     this.openDefaultCase();
+    Event.$on('vue-tables.paused.sorted', function (data) {
+        that.$emit("updateUserSettings", "orderBy", data);
+    });
+  },
+  watch: {
+      columns: function (val) {
+          this.$emit("updateUserSettings", "columns", val);
+      },  
+      filters: function (val) {
+          this.$emit("updateUserSettings", "filters", val);
+      },
   },
-  watch: {},
   computed: {
     /**
      * Build our ProcessMaker apiClient
@@ -386,7 +424,8 @@ export default {
         paged,
         limit = data.limit,
         start = data.page === 1 ? 0 : limit * (data.page - 1),
-        filters = {};
+        filters = {},
+        sort = "";
       paged = start + "," + limit;
 
       filters = {
@@ -398,6 +437,10 @@ export default {
               filters[item.filterVar] = item.value;
           }
       });
+      sort = that.prepareSortString(data);
+      if (sort) {
+          filters["sort"] = sort;
+      }
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases
           .paused(filters)
@@ -413,6 +456,18 @@ export default {
           });
       });
     },
+    /**
+     * Prepare sort string to be sended in the service
+     * @param {object} data
+     * @returns {string}
+     */
+    prepareSortString(data){
+        let sort = "";
+        if (data.orderBy && this.columMap[data.orderBy]) {
+            sort  =  `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
+        }
+        return sort;
+    },
     /**
      * Format Response API TODO to grid todo and columns
      */
@@ -489,7 +544,7 @@ export default {
     },
     onRemoveFilter(data) {},
     onUpdateFilters(data) {
-      this.$emit("onUpdateFilters", data.params);
+      this.filters = data.params;
       if (data.refresh) {
         this.$nextTick(() => {
           if (this.typeView === "GRID") {

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

@@ -86,9 +86,9 @@ export default {
       };
 
       _.forIn(this.filters, function (item, key) {
-        if (item.value && item.value != "") {
+          if(filters && item.value) {
-          filters[item.filterVar] = item.value;
+              filters[item.filterVar] = item.value;
-        }
+          }
       });
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases

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

@@ -17,6 +17,7 @@
       ref="vueTable"
       @row-click="onRowClick"
       :key="random"
+      name="unassigned"
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -181,6 +182,7 @@ import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue"
 import VueListView from "../../components/dataViews/vueListView/VueListView.vue";
 import defaultMixins from "./defaultMixins";
 import ModalPauseCase from '../modal/ModalPauseCase.vue';
+import { Event } from 'vue-tables-2';
 
 export default {
   name: "Unassigned",
@@ -198,10 +200,15 @@ export default {
     VueListView,
     ModalPauseCase,
   },
-  props: ["defaultOption", "filters"],
+  props: ["defaultOption", "settings"],
   data() {
     let that = this;
     return {
+      columMap: {
+          case_number: "APP_NUMBER",
+          case_title: "DEL_TITLE",
+          process_name: "PRO_TITLE"
+      },
       newCase: {
         title: this.$i18n.t("ID_NEW_CASE"),
         class: "btn-success",
@@ -209,17 +216,24 @@ export default {
           this.$refs["newRequest"].show();
         },
       },
-      columns: [
+      filters:
-        "detail",
+          this.settings && this.settings.filters
-        "case_number",
+              ? this.settings.filters
-        "case_title",
+              : {},
-        "process_name",
+      columns:
-        "task",
+          this.settings && this.settings.columns
-        "due_date",
+              ? this.settings.columns
-        "delegation_date",
+              : [
-        "priority",
+                  "detail",
-        "actions",
+                  "case_number",
-      ],
+                  "case_title",
+                  "process_name",
+                  "task",
+                  "due_date",
+                  "delegation_date",
+                  "priority",
+                  "actions"
+                ],
       options: {
         filterable: false,
         headings: {
@@ -250,6 +264,8 @@ export default {
           selectAllMode: "page",
           programmatic: false,
         },
+        sortable: ['case_number'],
+        orderBy: this.settings && this.settings.orderBy ?  this.settings.orderBy: {},
         requestFunction(data) {
           return this.$parent.$parent.getCasesForVueTable(data);
         },
@@ -282,9 +298,21 @@ export default {
     };
   },
   mounted() {
+    let that = this;
     this.initFilters();
+    // define sort event
+    Event.$on('vue-tables.unassigned.sorted', function (data) {
+        that.$emit("updateUserSettings", "orderBy", data);
+    });
+  },
+   watch: {
+      columns: function (val) {
+          this.$emit("updateUserSettings", "columns", val);
+      },  
+      filters: function (val) {
+          this.$emit("updateUserSettings", "filters", val);
+      },
   },
-  watch: {},
   computed: {
     /**
      * Build our ProcessMaker apiClient
@@ -350,7 +378,8 @@ export default {
         paged,
         limit = data.limit,
         start = data.page === 1 ? 0 : limit * (data.page - 1),
-        filters = {};
+        filters = {},
+        sort = "";
       paged = start + "," + limit;
 
       filters = {
@@ -362,6 +391,10 @@ export default {
               filters[item.filterVar] = item.value;
           }
       });
+      sort = that.prepareSortString(data);
+      if (sort) {
+          filters["sort"] = sort;
+      }
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases
           .unassigned(filters)
@@ -377,6 +410,18 @@ export default {
           });
       });
     },
+    /**
+     * Prepare sort string to be sended in the service
+     * @param {object} data
+     * @returns {string}
+     */
+    prepareSortString(data){
+        let sort = "";
+        if (data.orderBy && this.columMap[data.orderBy]) {
+            sort  =  `${this.columMap[data.orderBy]},${data.ascending === 1 ? "ASC": "DESC"}`;
+        }
+        return sort;
+    },
     /**
      * Format Response API TODO to grid todo and columns
      */
@@ -458,7 +503,7 @@ export default {
     onRemoveFilter(data) {},
     onUpdateFilters(data) {
       if (data.params) {
-        this.$emit("onUpdateFilters", data.params);
+        this.filters = data.params;
       }
       if (data.refresh) {
         this.$nextTick(() => {

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

@@ -86,7 +86,9 @@ export default {
       };
 
       _.forIn(this.filters, function (item, key) {
-        filters[item.filterVar] = item.value;
+          if(filters && item.value) {
+              filters[item.filterVar] = item.value;
+          }
       });
       return new Promise((resolutionFunc, rejectionFunc) => {
         api.cases