¡complete save settings for all lists

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: [
-       "detail",
-        "case_number",
-        "case_title",
-        "process_name",
-        "task",
-        "priority",
-        "actions"
-      ],
+      // columns: [
+      //  "detail",
+      //   "case_number",
+      //   "case_title",
+      //   "process_name",
+      //   "task",
+      //   "priority",
+      //   "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") {