From 488630e7b2825e9f6f62f40688815ca5d70923ce Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Wed, 14 Jul 2021 20:50:12 +0000
Subject: [PATCH 1/2] PMCORE-3165

---
 resources/assets/js/home/Home.vue             |   2 +-
 resources/assets/js/home/Paused/Paused.vue    | 535 ++++++++++++++++++
 .../assets/js/home/Paused/defaultMixins.js    | 140 +++++
 3 files changed, 676 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/js/home/Paused/Paused.vue
 create mode 100644 resources/assets/js/home/Paused/defaultMixins.js

diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index c780de3ee..d0b2d5ce6 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -42,7 +42,7 @@ import MyCases from "./MyCases";
 import MyDocuments from "./MyDocuments";
 import Todo from "./Inbox/Todo.vue";
 import Draft from "./Draft";
-import Paused from "./Paused";
+import Paused from "./Paused/Paused.vue";
 import Unassigned from "./Unassigned";
 import BatchRouting from "./BatchRouting";
 import CaseDetail from "./CaseDetail";
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
new file mode 100644
index 000000000..e7ae0e2c5
--- /dev/null
+++ b/resources/assets/js/home/Paused/Paused.vue
@@ -0,0 +1,535 @@
+<template>
+  <div id="v-paused" ref="v-paused" class="v-container-paused">
+    <button-fleft :data="newCase"></button-fleft>
+    <modal-new-request ref="newRequest"></modal-new-request>
+    <CasesFilter
+      :filters="filters"
+      :title="$t('ID_PAUSED')"
+      @onRemoveFilter="onRemoveFilter"
+      @onUpdateFilters="onUpdateFilters"
+    />
+    <multiview-header :data="dataMultiviewHeader" />
+    <v-server-table
+      v-if="typeView === 'GRID'"
+      :data="tableData"
+      :columns="columns"
+      :options="options"
+      ref="vueTable"
+      @row-click="onRowClick"
+    >
+      <div slot="detail" slot-scope="props">
+        <div class="btn-default" @click="openCaseDetail(props.row)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
+      <div slot="case_number" slot-scope="props">
+        {{ props.row.CASE_NUMBER }}
+      </div>
+      <div slot="case_title" slot-scope="props">
+        {{ props.row.CASE_TITLE }}
+      </div>
+      <div slot="process_name" slot-scope="props">
+        {{ props.row.PROCESS_NAME }}
+      </div>
+
+      <div slot="task" slot-scope="props">
+        <TaskCell :data="props.row.TASK" />
+      </div>
+      <div slot="current_user" slot-scope="props">
+        {{ props.row.USERNAME_DISPLAY_FORMAT }}
+      </div>
+      <div slot="due_date" slot-scope="props">
+        {{ props.row.DUE_DATE }}
+      </div>
+      <div slot="delegation_date" slot-scope="props">
+        {{ props.row.DELEGATION_DATE }}
+      </div>
+      <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
+      <div slot="actions" slot-scope="props">
+        <div @click="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        </div>
+      </div>
+    </v-server-table>
+    <VueCardView
+      v-if="typeView === 'CARD'"
+      :options="optionsVueCardView"
+      ref="vueCardView"
+    >
+      <div slot="detail" slot-scope="props">
+        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
+      <div slot="case_number" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-highlight"
+          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        >
+      </div>
+      <div slot="case_title" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["CASE_TITLE"] }}
+        </span>
+      </div>
+      <div slot="process_name" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_NAME"] }}
+        </span>
+      </div>
+      <div slot="due_date" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["DUE_DATE"] }}
+        </span>
+      </div>
+      <div slot="delegation_date" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["DELEGATION_DATE"] }}
+        </span>
+      </div>
+      <div slot="task" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light">
+          <TaskCell :data="props.item.TASK" />
+        </span>
+      </div>
+
+    </VueCardView>
+    <VueListView
+      v-if="typeView === 'LIST'"
+      :options="optionsVueCardView"
+      ref="vueListView"
+    >
+      <div slot="detail" slot-scope="props">
+        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
+      <div slot="case_number" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-highlight"
+          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        >
+      </div>
+      <div slot="case_title" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["CASE_TITLE"] }}
+        </span>
+      </div>
+      <div slot="process_name" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_NAME"] }}
+        </span>
+      </div>
+      <div slot="due_date" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["DUE_DATE"] }}
+        </span>
+      </div>
+      <div slot="delegation_date" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["DELEGATION_DATE"] }}
+        </span>
+      </div>
+      <div slot="task" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light">
+          <TaskCell :data="props.item.TASK" />
+        </span>
+      </div>
+    </VueListView>
+    <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
+  </div>
+</template>
+
+<script>
+import HeaderCounter from "../../components/home/HeaderCounter.vue";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
+import CasesFilter from "../../components/search/CasesFilter";
+import TaskCell from "../../components/vuetable/TaskCell.vue";
+import ModalUnpauseCase from "../modal/ModalUnpauseCase.vue";
+import api from "../../api/index";
+import utils from "../../utils/utils";
+import MultiviewHeader from "../../components/headers/MultiviewHeader.vue";
+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';
+
+export default {
+  name: "Paused",
+  mixins: [defaultMixins],
+  components: {
+    HeaderCounter,
+    ButtonFleft,
+    ModalNewRequest,
+    TaskCell,
+    ModalUnpauseCase,
+    CasesFilter,
+    Ellipsis,
+    MultiviewHeader,
+    VueCardView,
+    VueListView
+  },
+  props: ["defaultOption", "filters"],
+  data() {
+    return {
+      newCase: {
+        title: this.$i18n.t("ID_NEW_CASE"),
+        class: "btn-success",
+        onClick: () => {
+          this.$refs["newRequest"].show();
+        },
+      },
+      columns: [
+        "detail",
+        "case_number",
+        "case_title",
+        "process_name",
+        "task",
+        "due_date",
+        "delegation_date",
+        "priority",
+        "actions",
+      ],
+      tableData: [],
+      options: {
+        filterable: false,
+        headings: {
+          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: "",
+        },
+        texts: {
+            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")
+        },
+        selectable: {
+          mode: "single",
+          only: function (row) {
+            return true;
+          },
+          selectAllMode: "page",
+          programmatic: false,
+        },
+        requestFunction(data) {
+          return this.$parent.$parent.getCasesForVueTable(data);
+        },
+      },
+      pmDateFormat: "Y-m-d H:i:s",
+      clickCount: 0,
+      singleClickTimer: null,
+      statusTitle: {
+          "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
+          "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
+          "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
+          "PAUSED": this.$i18n.t("ID_PAUSED"),
+          "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
+      },
+      dataEllipsis: {
+        buttons: {}
+      },
+      showEllipsis: false
+    };
+  },
+  created() {
+    this.initFilters();
+  },
+  mounted() {
+    // force to open case
+    this.openDefaultCase();
+  },
+  watch: {},
+  computed: {
+    /**
+     * Build our ProcessMaker apiClient
+     */
+    ProcessMaker() {
+      return window.ProcessMaker;
+    },
+  },
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Initialize filters
+     */
+    initFilters() {
+       let params;
+        if(this.defaultOption) {
+            params = utils.getAllUrlParams(this.defaultOption);
+              if (params && params.openapplicationuid) {
+                this.$emit("onUpdateFilters",[
+                    {
+                        fieldId: "caseNumber",
+                        filterVar: "caseNumber",
+                        label: "",
+                        options:[],
+                        value: params.openapplicationuid,
+                        autoShow: false
+                    }
+                ]);
+              }
+        }
+    },
+    /**
+     * Open a case when the component was mounted
+     */
+    openDefaultCase() {
+        let params;
+        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
+                });
+                this.$emit("cleanDefaultOption");
+            }   
+            //force to search in the parallel tasks
+            if (params && params.openapplicationuid) {
+                this.onUpdateFilters({
+                        params: [
+                            {
+                                fieldId: "caseNumber",
+                                filterVar: "caseNumber",
+                                label: "",
+                                options:[],
+                                value: params.openapplicationuid,
+                                autoShow: false
+                            }
+                        ],
+                        refresh: false
+                });
+                this.$emit("cleanDefaultOption");                
+            }
+        }
+    },
+    /**
+     * On row click event handler
+     * @param {object} event
+     */
+    onRowClick(event) {
+        let self = this;
+        self.clickCount += 1;
+        if (self.clickCount === 1) {
+            self.singleClickTimer = setTimeout(function() {
+                self.clickCount = 0;            
+            }, 400);
+        } else if (self.clickCount === 2) {
+            clearTimeout(self.singleClickTimer);
+            self.clickCount = 0;
+            self.showModalUnpauseCase(event.row);
+        }
+    },
+    /**
+     * Get cases todo data
+     */
+    getCasesForVueTable(data) {
+      let that = this,
+        dt,
+        paged,
+        limit = data.limit,
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+
+      _.forIn(this.filters, function (item, key) {
+          if(filters && item.value) {
+              filters[item.filterVar] = item.value;
+          }
+      });
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .paused(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+    /**
+     * Format Response API TODO to grid todo and columns
+     */
+    formatDataResponse(response) {
+      let data = [];
+      _.forEach(response, (v) => {
+        data.push({
+          CASE_NUMBER: v.APP_NUMBER,
+          CASE_TITLE: v.DEL_TITLE,
+          PROCESS_NAME: v.PRO_TITLE,
+          TASK: [{
+            TITLE: v.TAS_TITLE,
+            CODE_COLOR: v.TAS_COLOR,
+            COLOR: v.TAS_COLOR_LABEL,
+            DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
+              this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
+            DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
+          }],
+          USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
+              userName: v.USR_LASTNAME,
+              firstName: v.USR_LASTNAME,
+              lastName: v.USR_LASTNAME,
+              format: window.config.FORMATS.format || null
+          }),
+          DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
+          DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
+          PRIORITY: v.DEL_PRIORITY_LABEL,
+          DEL_INDEX: v.DEL_INDEX,
+          APP_UID: v.APP_UID,
+          PRO_UID: v.PRO_UID,
+          TAS_UID: v.TAS_UID,
+        });
+      });
+      return data;
+    },
+    /**
+     * Open selected cases in the inbox
+     *
+     * @param {object} item
+     */
+    openCase(item) {
+      this.$emit("onUpdateDataCase", {
+        APP_UID: item.APP_UID,
+        DEL_INDEX: item.DEL_INDEX,
+        PRO_UID: item.PRO_UID,
+        TAS_UID: item.TAS_UID,
+        ACTION: "todo"
+      });
+      this.$emit("onUpdatePage", "XCase");
+    },
+    /**
+     * Open case detail
+     *
+     * @param {object} item
+     */
+    openCaseDetail(item) {
+      let that = this;
+      api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
+        api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
+          that.$emit("onUpdateDataCase", {
+            APP_UID: item.APP_UID,
+            DEL_INDEX: item.DEL_INDEX,
+            PRO_UID: item.PRO_UID,
+            TAS_UID: item.TAS_UID,
+            APP_NUMBER: item.CASE_NUMBER,
+          });
+          that.$emit("onUpdatePage", "case-detail");
+        });
+      });
+    },
+    showModalUnpauseCase(item) {
+      this.$refs["modal-unpause-case"].data = item;
+      this.$refs["modal-unpause-case"].show();
+    },
+    onRemoveFilter(data) {},
+    onUpdateFilters(data) {
+      this.$emit("onUpdateFilters", data.params);
+      if (data.refresh) {
+        this.$nextTick(() => {
+          if (this.typeView === "GRID") {
+            this.$refs["vueTable"].getData();
+          }
+          if (this.typeView === "CARD") {
+            this.$refs["vueCardView"].getData();
+          }
+          if (this.typeView === "LIST") {
+            this.$refs["vueListView"].getData();
+          }
+        });
+      }
+    },
+    /**
+     * update view in component
+     */
+    updateView(){
+      this.$refs["vueTable"].getData();
+    },
+    /**
+     * Show options in the ellipsis 
+     */
+    updateDataEllipsis(data) {
+      let that = this;
+      this.showEllipsis = !this.showEllipsis;
+      if (this.showEllipsis) {
+        this.dataEllipsis = {
+          buttons: {
+            note: {
+              name: "case note",
+              icon: "far fa-comments",
+              fn: function() {console.log("comments");}
+            },
+            play: {
+              name: "play case",
+              icon: "far fa-play-circle",
+              fn: function() {console.log("play case");}
+            },
+            reassign: {
+              name: "reassign case",
+              icon: "fas fa-redo",
+              fn: function() {console.log("reassign case");}
+            }
+          }
+        }
+      }
+    },
+  },
+};
+</script>
+<style>
+.v-container-paused {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/Paused/defaultMixins.js b/resources/assets/js/home/Paused/defaultMixins.js
new file mode 100644
index 000000000..29ea6a09e
--- /dev/null
+++ b/resources/assets/js/home/Paused/defaultMixins.js
@@ -0,0 +1,140 @@
+import api from "../../api/index";
+export default {
+  data() {
+    let that = this;
+    return {
+      typeView: "GRID",
+      dataMultiviewHeader: {
+        actions: [
+          {
+            id: "view-grid",
+            title: "Grid",
+            onClick(action) {
+              that.typeView = "GRID";
+            },
+            icon: "fas fa-table",
+          },
+          {
+            id: "view-list",
+            title: "List",
+            onClick(action) {
+              that.typeView = "LIST";
+            },
+            icon: "fas fa-list",
+          },
+          {
+            id: "view-card",
+            title: "Card",
+            onClick(action) {
+              that.typeView = "CARD";
+            },
+            icon: "fas fa-th",
+          },
+        ],
+      },
+      optionsVueCardView: {
+        limit: 10,
+        headings: {
+          detail: "",
+          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")
+        },
+        columns: [
+          "detail",
+          "case_number",
+          "case_title",
+          "process_name",
+          "due_date",
+          "delegation_date",
+          "priority",
+          "task"
+        ],
+        requestFunction(data) {
+          return that.getCasesVueList(data);
+        },
+        requestFunctionViewMore(data) {
+          return that.getCasesVueListViewMore(data);
+        }
+      }
+    }
+  },
+  created: function () {
+
+  },
+  methods: {
+    /**
+    * Get cases for Vue Card View
+    */
+    getCasesVueList(data) {
+      let that = this,
+        dt,
+        start = 0,
+        limit = data.limit,
+        filters = {};
+      filters = {
+        paged: "0," + limit,
+      };
+
+      _.forIn(this.filters, function (item, key) {
+        if (item.value && item.value != "") {
+          filters[item.filterVar] = item.value;
+        }
+      });
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .paused(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+    /**
+    * Get cases for Vue Card View
+    */
+    getCasesVueListViewMore(data) {
+      let that = this,
+        dt,
+        paged,
+        limit = data.limit,
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+      _.forIn(this.filters, function (item, key) {
+        if (item.value && item.value != "") {
+          filters[item.filterVar] = item.value;
+        }
+      });
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .paused(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+  }
+}
\ No newline at end of file

From a87bc9884b3b999492ffb4aa36467dda511e6a0f Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Wed, 14 Jul 2021 20:52:28 +0000
Subject: [PATCH 2/2] update

---
 resources/assets/js/home/Paused.vue | 404 ----------------------------
 1 file changed, 404 deletions(-)
 delete mode 100644 resources/assets/js/home/Paused.vue

diff --git a/resources/assets/js/home/Paused.vue b/resources/assets/js/home/Paused.vue
deleted file mode 100644
index 826ae956f..000000000
--- a/resources/assets/js/home/Paused.vue
+++ /dev/null
@@ -1,404 +0,0 @@
-<template>
-  <div id="v-paused" ref="v-paused" class="v-container-paused">
-    <button-fleft :data="newCase"></button-fleft>
-    <modal-new-request ref="newRequest"></modal-new-request>
-    <CasesFilter
-      :filters="filters"
-      :title="$t('ID_PAUSED')"
-      @onRemoveFilter="onRemoveFilter"
-      @onUpdateFilters="onUpdateFilters"
-    />
-    <v-server-table
-      :data="tableData"
-      :columns="columns"
-      :options="options"
-      ref="vueTable"
-      @row-click="onRowClick"
-    >
-      <div slot="detail" slot-scope="props">
-        <div class="btn-default" @click="openCaseDetail(props.row)">
-          <i class="fas fa-info-circle"></i>
-        </div>
-      </div>
-      <div slot="case_number" slot-scope="props">
-        {{ props.row.CASE_NUMBER }}
-      </div>
-      <div slot="case_title" slot-scope="props">
-        {{ props.row.CASE_TITLE }}
-      </div>
-      <div slot="process_name" slot-scope="props">
-        {{ props.row.PROCESS_NAME }}
-      </div>
-
-      <div slot="task" slot-scope="props">
-        <TaskCell :data="props.row.TASK" />
-      </div>
-      <div slot="current_user" slot-scope="props">
-        {{ props.row.USERNAME_DISPLAY_FORMAT }}
-      </div>
-      <div slot="due_date" slot-scope="props">
-        {{ props.row.DUE_DATE }}
-      </div>
-      <div slot="delegation_date" slot-scope="props">
-        {{ props.row.DELEGATION_DATE }}
-      </div>
-      <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
-      <div slot="actions" slot-scope="props">
-        <div @click="updateDataEllipsis(props.row)">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-        </div>
-      </div>
-    </v-server-table>
-    <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
-  </div>
-</template>
-
-<script>
-import HeaderCounter from "../components/home/HeaderCounter.vue";
-import ButtonFleft from "../components/home/ButtonFleft.vue";
-import ModalNewRequest from "./ModalNewRequest.vue";
-import CasesFilter from "../components/search/CasesFilter";
-import TaskCell from "../components/vuetable/TaskCell.vue";
-import ModalUnpauseCase from "./modal/ModalUnpauseCase.vue";
-import api from "./../api/index";
-import utils from "./../utils/utils";
-import Ellipsis from '../components/utils/ellipsis.vue';
-
-export default {
-  name: "Paused",
-  components: {
-    HeaderCounter,
-    ButtonFleft,
-    ModalNewRequest,
-    TaskCell,
-    ModalUnpauseCase,
-    CasesFilter,
-    Ellipsis,
-  },
-  props: ["defaultOption", "filters"],
-  data() {
-    return {
-      newCase: {
-        title: this.$i18n.t("ID_NEW_CASE"),
-        class: "btn-success",
-        onClick: () => {
-          this.$refs["newRequest"].show();
-        },
-      },
-      columns: [
-        "detail",
-        "case_number",
-        "case_title",
-        "process_name",
-        "task",
-        "due_date",
-        "delegation_date",
-        "priority",
-        "actions",
-      ],
-      tableData: [],
-      options: {
-        filterable: false,
-        headings: {
-          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: "",
-        },
-        texts: {
-            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")
-        },
-        selectable: {
-          mode: "single",
-          only: function (row) {
-            return true;
-          },
-          selectAllMode: "page",
-          programmatic: false,
-        },
-        requestFunction(data) {
-          return this.$parent.$parent.getCasesForVueTable(data);
-        },
-      },
-      pmDateFormat: "Y-m-d H:i:s",
-      clickCount: 0,
-      singleClickTimer: null,
-      statusTitle: {
-          "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
-          "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
-          "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
-          "PAUSED": this.$i18n.t("ID_PAUSED"),
-          "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
-      },
-      dataEllipsis: {
-        buttons: {}
-      },
-      showEllipsis: false
-    };
-  },
-  created() {
-    this.initFilters();
-  },
-  mounted() {
-    // force to open case
-    this.openDefaultCase();
-  },
-  watch: {},
-  computed: {
-    /**
-     * Build our ProcessMaker apiClient
-     */
-    ProcessMaker() {
-      return window.ProcessMaker;
-    },
-  },
-  updated() {},
-  beforeCreate() {},
-  methods: {
-    /**
-     * Initialize filters
-     */
-    initFilters() {
-       let params;
-        if(this.defaultOption) {
-            params = utils.getAllUrlParams(this.defaultOption);
-              if (params && params.openapplicationuid) {
-                this.$emit("onUpdateFilters",[
-                    {
-                        fieldId: "caseNumber",
-                        filterVar: "caseNumber",
-                        label: "",
-                        options:[],
-                        value: params.openapplicationuid,
-                        autoShow: false
-                    }
-                ]);
-              }
-        }
-    },
-    /**
-     * Open a case when the component was mounted
-     */
-    openDefaultCase() {
-        let params;
-        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
-                });
-                this.$emit("cleanDefaultOption");
-            }   
-            //force to search in the parallel tasks
-            if (params && params.openapplicationuid) {
-                this.onUpdateFilters({
-                        params: [
-                            {
-                                fieldId: "caseNumber",
-                                filterVar: "caseNumber",
-                                label: "",
-                                options:[],
-                                value: params.openapplicationuid,
-                                autoShow: false
-                            }
-                        ],
-                        refresh: false
-                });
-                this.$emit("cleanDefaultOption");                
-            }
-        }
-    },
-    /**
-     * On row click event handler
-     * @param {object} event
-     */
-    onRowClick(event) {
-        let self = this;
-        self.clickCount += 1;
-        if (self.clickCount === 1) {
-            self.singleClickTimer = setTimeout(function() {
-                self.clickCount = 0;            
-            }, 400);
-        } else if (self.clickCount === 2) {
-            clearTimeout(self.singleClickTimer);
-            self.clickCount = 0;
-            self.showModalUnpauseCase(event.row);
-        }
-    },
-    /**
-     * Get cases todo data
-     */
-    getCasesForVueTable(data) {
-      let that = this,
-        dt,
-        paged,
-        limit = data.limit,
-        start = data.page === 1 ? 0 : limit * (data.page - 1),
-        filters = {};
-      paged = start + "," + limit;
-
-      filters = {
-        paged: paged,
-      };
-
-      _.forIn(this.filters, function (item, key) {
-          if(filters && item.value) {
-              filters[item.filterVar] = item.value;
-          }
-      });
-      return new Promise((resolutionFunc, rejectionFunc) => {
-        api.cases
-          .paused(filters)
-          .then((response) => {
-            dt = that.formatDataResponse(response.data.data);
-            resolutionFunc({
-              data: dt,
-              count: response.data.total,
-            });
-          })
-          .catch((e) => {
-            rejectionFunc(e);
-          });
-      });
-    },
-    /**
-     * Format Response API TODO to grid todo and columns
-     */
-    formatDataResponse(response) {
-      let data = [];
-      _.forEach(response, (v) => {
-        data.push({
-          CASE_NUMBER: v.APP_NUMBER,
-          CASE_TITLE: v.DEL_TITLE,
-          PROCESS_NAME: v.PRO_TITLE,
-          TASK: [{
-            TITLE: v.TAS_TITLE,
-            CODE_COLOR: v.TAS_COLOR,
-            COLOR: v.TAS_COLOR_LABEL,
-            DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
-              this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
-            DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
-          }],
-          USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
-              userName: v.USR_LASTNAME,
-              firstName: v.USR_LASTNAME,
-              lastName: v.USR_LASTNAME,
-              format: window.config.FORMATS.format || null
-          }),
-          DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
-          DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
-          PRIORITY: v.DEL_PRIORITY_LABEL,
-          DEL_INDEX: v.DEL_INDEX,
-          APP_UID: v.APP_UID,
-          PRO_UID: v.PRO_UID,
-          TAS_UID: v.TAS_UID,
-        });
-      });
-      return data;
-    },
-    /**
-     * Open selected cases in the inbox
-     *
-     * @param {object} item
-     */
-    openCase(item) {
-      this.$emit("onUpdateDataCase", {
-        APP_UID: item.APP_UID,
-        DEL_INDEX: item.DEL_INDEX,
-        PRO_UID: item.PRO_UID,
-        TAS_UID: item.TAS_UID,
-        ACTION: "todo"
-      });
-      this.$emit("onUpdatePage", "XCase");
-    },
-    /**
-     * Open case detail
-     *
-     * @param {object} item
-     */
-    openCaseDetail(item) {
-      let that = this;
-      api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
-        api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
-          that.$emit("onUpdateDataCase", {
-            APP_UID: item.APP_UID,
-            DEL_INDEX: item.DEL_INDEX,
-            PRO_UID: item.PRO_UID,
-            TAS_UID: item.TAS_UID,
-            APP_NUMBER: item.CASE_NUMBER,
-          });
-          that.$emit("onUpdatePage", "case-detail");
-        });
-      });
-    },
-    showModalUnpauseCase(item) {
-      this.$refs["modal-unpause-case"].data = item;
-      this.$refs["modal-unpause-case"].show();
-    },
-    onRemoveFilter(data) {},
-    onUpdateFilters(data) {
-      this.$emit("onUpdateFilters", data.params);
-      if (data.refresh) {
-        this.$nextTick(() => {
-          this.$refs["vueTable"].getData();
-        });
-      }
-    },
-    /**
-     * update view in component
-     */
-    updateView(){
-      this.$refs["vueTable"].getData();
-    },
-    /**
-     * Show options in the ellipsis 
-     */
-    updateDataEllipsis(data) {
-      let that = this;
-      this.showEllipsis = !this.showEllipsis;
-      if (this.showEllipsis) {
-        this.dataEllipsis = {
-          buttons: {
-            note: {
-              name: "case note",
-              icon: "far fa-comments",
-              fn: function() {console.log("comments");}
-            },
-            play: {
-              name: "play case",
-              icon: "far fa-play-circle",
-              fn: function() {console.log("play case");}
-            },
-            reassign: {
-              name: "reassign case",
-              icon: "fas fa-redo",
-              fn: function() {console.log("reassign case");}
-            }
-          }
-        }
-      }
-    },
-  },
-};
-</script>
-<style>
-.v-container-paused {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  padding-left: 50px;
-  padding-right: 50px;
-}
-</style>
\ No newline at end of file