update task metrics

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

@@ -25,6 +25,7 @@
       ref="vueTable"
       @row-click="onRowClick"
       :key="random"
+      name="todo" 
     >
       <div slot="detail" slot-scope="props">
         <div class="btn-default" @click="openCaseDetail(props.row)">
@@ -227,6 +228,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';
 import CurrentUserCell from "../../components/vuetable/CurrentUserCell.vue";
 
 export default {
@@ -246,10 +248,15 @@ export default {
     ModalReassignCase,
     CurrentUserCell,
   },
-  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",
@@ -257,18 +264,25 @@ export default {
           this.$refs["newRequest"].show();
         },
       },
-      columns: [
-        "detail",
-        "case_number",
-        "case_title",
-        "process_name",
-        "task",
-        "send_by",
-        "due_date",
-        "delegation_date",
-        "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",
+                  "send_by",
+                  "due_date",
+                  "delegation_date",
+                  "priority",
+                  "actions"
+                ],
       tableData: [],
       icon:"fas fa-check-circle",
       options: {
@@ -302,6 +316,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);
         },
@@ -338,10 +354,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
@@ -433,18 +461,22 @@ export default {
         paged,
         limit = data.limit,
         start = data.page === 1 ? 0 : limit * (data.page - 1),
-        filters = {};
+        filters = {},
+        sort = "";
       paged = start + "," + limit;
 
       filters = {
         paged: paged,
-      };
-
+      }
       _.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)
@@ -460,6 +492,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
      */
@@ -562,7 +606,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") {