From 30742b47461f49ebed3429c1696e68ab3d9fc5bd Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Thu, 28 Oct 2021 16:15:12 +0000
Subject: [PATCH] update

---
 .../js/home/TaskMetrics/VueChartLvThree.vue   | 997 +++++++++---------
 1 file changed, 519 insertions(+), 478 deletions(-)

diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
index 2ae16d432..7c2d66f14 100644
--- a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
@@ -1,105 +1,107 @@
 <template>
-  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
-    <div class="p-1 v-flex">
-      <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_RISK_MATRIX") }}</h6>
-      <div>
-        <BreadCrumb
-          :options="dataBreadcrumbs()"
-          :settings="settingsBreadcrumbs"
-        />
-        <div class="vp-width-p30 vp-inline-block">
-          <b-form-datepicker
-            id="date-from"
-            :date-format-options="{
-              year: '2-digit',
-              month: '2-digit',
-              day: '2-digit',
-            }"
-            size="sm"
-            :placeholder="$t('ID_DELEGATE_DATE_FROM')"
-            v-model="dateFrom"
-            @input="changeOption"
-          ></b-form-datepicker>
+    <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+        <div class="p-1 v-flex">
+            <h6 class="v-search-title">
+                {{ $t("ID_DRILL_DOWN_RISK_MATRIX") }}
+            </h6>
+            <div>
+                <BreadCrumb
+                    :options="dataBreadcrumbs()"
+                    :settings="settingsBreadcrumbs"
+                />
+                <div class="vp-width-p30 vp-inline-block">
+                    <b-form-datepicker
+                        id="date-from"
+                        :date-format-options="{
+                            year: '2-digit',
+                            month: '2-digit',
+                            day: '2-digit',
+                        }"
+                        size="sm"
+                        :placeholder="$t('ID_DELEGATE_DATE_FROM')"
+                        v-model="dateFrom"
+                        @input="changeOption"
+                    ></b-form-datepicker>
+                </div>
+                <div class="vp-width-p30 vp-inline-block">
+                    <b-form-datepicker
+                        id="date-to"
+                        size="sm"
+                        :date-format-options="{
+                            year: '2-digit',
+                            month: '2-digit',
+                            day: '2-digit',
+                        }"
+                        :placeholder="$t('ID_DELEGATE_DATE_TO')"
+                        v-model="dateTo"
+                        @input="changeOption"
+                    ></b-form-datepicker>
+                </div>
+                <div class="vp-inline-block">
+                    <label class="form-label">{{ $t("ID_TOP") }}</label>
+                </div>
+                <div class="vp-inline-block">
+                    <multiselect
+                        v-model="size"
+                        :options="sizeOptions"
+                        :searchable="false"
+                        :close-on-select="true"
+                        :show-labels="false"
+                        track-by="id"
+                        label="name"
+                        @input="changeOption"
+                    ></multiselect>
+                </div>
+            </div>
+            <apexchart
+                ref="LevelThreeChart"
+                :width="width"
+                :options="options"
+                :series="series"
+            ></apexchart>
+            <div class="vp-width-p100">
+                <div class="vp-text-align-center" role="group">
+                    <button
+                        type="button"
+                        @click="
+                            riskType = 'ON_TIME';
+                            changeOption();
+                        "
+                        class="btn vp-btn-success btn-sm"
+                    >
+                        On Time
+                    </button>
+                    <button
+                        type="button"
+                        @click="
+                            riskType = 'AT_RISK';
+                            changeOption();
+                        "
+                        class="btn vp-btn-warning btn-sm"
+                    >
+                        At Risk
+                    </button>
+                    <button
+                        type="button"
+                        @click="
+                            riskType = 'OVERDUE';
+                            changeOption();
+                        "
+                        class="btn vp-btn-danger btn-sm"
+                    >
+                        Overdue
+                    </button>
+                </div>
+            </div>
+            <div class="vp-width-p100 vp-text-align-center">
+                <label class="vp-form-label">
+                    {{ $t("ID_TODAY") }} : {{ dateNow }}
+                </label>
+            </div>
+            <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
+            <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
         </div>
-        <div class="vp-width-p30 vp-inline-block">
-          <b-form-datepicker
-            id="date-to"
-            size="sm"
-            :date-format-options="{
-              year: '2-digit',
-              month: '2-digit',
-              day: '2-digit',
-            }"
-            :placeholder="$t('ID_DELEGATE_DATE_TO')"
-            v-model="dateTo"
-            @input="changeOption"
-          ></b-form-datepicker>
-        </div>
-        <div class="vp-inline-block">
-          <label class="form-label">{{ $t("ID_TOP") }}</label>
-        </div>
-        <div class="vp-inline-block">
-          <multiselect
-            v-model="size"
-            :options="sizeOptions"
-            :searchable="false"
-            :close-on-select="true"
-            :show-labels="false"
-            track-by="id"
-            label="name"
-            @input="changeOption"
-          ></multiselect>
-        </div>
-      </div>
-      <apexchart
-        ref="LevelThreeChart"
-        :width="width"
-        :options="options"
-        :series="series"
-      ></apexchart>
-      <div class="vp-width-p100">
-        <div class="vp-text-align-center" role="group">
-          <button
-            type="button"
-            @click="
-              riskType = 'ON_TIME';
-              changeOption();
-            "
-            class="btn vp-btn-success btn-sm"
-          >
-            On Time
-          </button>
-          <button
-            type="button"
-            @click="
-              riskType = 'AT_RISK';
-              changeOption();
-            "
-            class="btn vp-btn-warning btn-sm"
-          >
-            At Risk
-          </button>
-          <button
-            type="button"
-            @click="
-              riskType = 'OVERDUE';
-              changeOption();
-            "
-            class="btn vp-btn-danger btn-sm"
-          >
-            Overdue
-          </button>
-        </div>
-      </div>
-      <div class="vp-width-p100 vp-text-align-center">
-        <label class="vp-form-label">
-          {{ $t("ID_TODAY") }} : {{ dateNow }}
-        </label>
-      </div>
-      <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
-      <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
     </div>
-  </div>
 </template>
 
 <script>
@@ -112,247 +114,282 @@ import ModalUnpauseCase from "../modal/ModalUnpauseCase.vue";
 import ModalClaimCase from "../modal/ModalClaimCase.vue";
 
 export default {
-  name: "VueChartLvThree",
-  mixins: [],
-  components: {
-    Multiselect,
-    BreadCrumb,
-    ModalUnpauseCase,
-    ModalClaimCase,
-  },
-  props: ["data", "breadCrumbs"],
-  data() {
-    let that = this;
-    return {
-      currentSelection: null,
-      dateFrom:
-        this.data[3] && this.data[3].data.dateFrom
-          ? this.data[3].data.dateFrom
-          : moment().subtract(30, "d").format("YYYY-MM-DD"),
-      dateTo:
-        this.data[3] && this.data[3].data.dateTo
-          ? this.data[3].data.dateTo
-          : moment().format("YYYY-MM-DD"),
-      dateNow: moment().format("YYYY-MM-DD h:mm:ss a"),
-      size:
-        this.data[3] && this.data[3].data.size
-          ? this.data[3].data.size
-          : { name: "20", id: "20" },
-      riskType:
-        this.data[3] && this.data[3].data.riskType
-          ? this.data[3].data.riskType
-          : "AT_RISK",
-      settingsBreadcrumbs: [
-        {
-          class: "fas fa-info-circle",
-          tooltip: this.$t("ID_TASK_RISK_LEVEL3_INFO"),
-          onClick() {},
-        },
-      ],
-      sizeOptions: [
-        { name: "10", id: "10" },
-        { name: "20", id: "20" },
-        { name: "30", id: "30" },
-        { name: "40", id: "40" },
-        { name: "50", id: "50" },
-      ],
-      dataCasesByRisk: [],
-      width: 0,
-      series: [],
-      options: {
-        chart: {
-          height: 350,
-          type: "bubble",
-          zoom: {
-            enabled: true,
-            type: "xy",
-          },
-          id: "LevelThreeChart",
-          events: {
-            markerClick: function (event, chartContext, config) {
-              that.currentSelection = that.dataCasesByRisk[config.seriesIndex];
-              that.onClickCaseMarker(that.currentSelection);
-            },
-          },
-        },
-        legend: {
-          show: false,
-        },
-        dataLabels: {
-          enabled: true,
-          formatter: function (val, opt) {
-            if (that.dataCasesByRisk.length > 0) {
-              return that.dataCasesByRisk[opt["seriesIndex"]]["number_case"];
-            }
-            return "";
-          },
-          offsetX: 0,
-        },
-        xaxis: {
-          type: "datetime",
-        },
-        yaxis: {
-          tickAmount: 7,
-        },
-        tooltip: {
-          custom: function ({ series, seriesIndex, dataPointIndex, w }) {
-            return that.customTooltip(series, seriesIndex, dataPointIndex, w);
-          },
-        },
-      },
-    };
-  },
-  created() {},
-  mounted() {
-    this.getBodyHeight();
-    this.loadOption();
-  },
-  watch: {},
-  computed: {},
-  updated() {},
-  beforeCreate() {},
-  methods: {
-    /**
-     * Return the height for Vue Card View body
-     */
-    getBodyHeight() {
-      this.width = window.innerHeight * 0.95;
+    name: "VueChartLvThree",
+    mixins: [],
+    components: {
+        Multiselect,
+        BreadCrumb,
+        ModalUnpauseCase,
+        ModalClaimCase,
     },
-    /**
-     * Change datepickers or radio button
-     */
-    changeOption() {
-      let dt;
-      if (this.dateFrom && this.dateTo) {
-        dt = {
-          process: this.data[2].id,
-          caseList: this.data[1].id.toLowerCase(),
-          dateFrom: moment(this.dateFrom).format("YYYY-MM-DD"),
-          dateTo: moment(this.dateTo).format("YYYY-MM-DD"),
-          riskStatus: this.riskType,
+    props: ["data", "breadCrumbs"],
+    data() {
+        let that = this;
+        return {
+            currentSelection: null,
+            dateFrom:
+                this.data[3] && this.data[3].data.dateFrom
+                    ? this.data[3].data.dateFrom
+                    : moment()
+                          .subtract(30, "d")
+                          .format("YYYY-MM-DD"),
+            dateTo:
+                this.data[3] && this.data[3].data.dateTo
+                    ? this.data[3].data.dateTo
+                    : moment().format("YYYY-MM-DD"),
+            dateNow: moment().format("YYYY-MM-DD h:mm:ss a"),
+            size:
+                this.data[3] && this.data[3].data.size
+                    ? this.data[3].data.size
+                    : { name: "20", id: "20" },
+            riskType:
+                this.data[3] && this.data[3].data.riskType
+                    ? this.data[3].data.riskType
+                    : "AT_RISK",
+            settingsBreadcrumbs: [
+                {
+                    class: "fas fa-info-circle",
+                    tooltip: this.$t("ID_TASK_RISK_LEVEL3_INFO"),
+                    onClick() {},
+                },
+            ],
+            sizeOptions: [
+                { name: "10", id: "10" },
+                { name: "20", id: "20" },
+                { name: "30", id: "30" },
+                { name: "40", id: "40" },
+                { name: "50", id: "50" },
+            ],
+            dataCasesByRisk: [],
+            width: 0,
+            series: [],
+            options: {
+                chart: {
+                    height: 350,
+                    type: "bubble",
+                    zoom: {
+                        enabled: true,
+                        type: "xy",
+                    },
+                    id: "LevelThreeChart",
+                    events: {
+                        markerClick: function(event, chartContext, config) {
+                            that.currentSelection =
+                                that.dataCasesByRisk[config.seriesIndex];
+                            that.onClickCaseMarker(that.currentSelection);
+                        },
+                    },
+                },
+                legend: {
+                    show: false,
+                },
+                dataLabels: {
+                    enabled: true,
+                    formatter: function(val, opt) {
+                        if (that.dataCasesByRisk.length > 0) {
+                            return that.dataCasesByRisk[opt["seriesIndex"]][
+                                "number_case"
+                            ];
+                        }
+                        return "";
+                    },
+                    offsetX: 0,
+                },
+                xaxis: {
+                    type: "datetime",
+                },
+                yaxis: {
+                    tickAmount: 7,
+                },
+                tooltip: {
+                    custom: function({
+                        series,
+                        seriesIndex,
+                        dataPointIndex,
+                        w,
+                    }) {
+                        return that.customTooltip(
+                            series,
+                            seriesIndex,
+                            dataPointIndex,
+                            w
+                        );
+                    },
+                },
+            },
         };
-        this.size.id != "all" ? (dt["topCases"] = this.size.id) : null;
-        this.dateNow = moment().format("YYYY-MM-DD h:mm:ss a");
-        this.updateSettings();
-      }
     },
-    /**
-     * Load option saved in userConfig
-     */
-    loadOption() {
-      let that = this,
-        dt;
-      if (this.data.length > 2) {
-        if (this.dateFrom && this.dateTo) {
-          dt = {
-            process: this.data[2].id,
-            caseList: this.data[1].id.toLowerCase(),
-            dateFrom: moment(this.dateFrom).format("YYYY-MM-DD"),
-            dateTo: moment(this.dateTo).format("YYYY-MM-DD"),
-            riskStatus: this.riskType,
-          };
-          this.size.id != "all" ? (dt["topCases"] = this.size.id) : null;
-          this.dateNow = moment().format("YYYY-MM-DD h:mm:ss a");
-          Api.process
-            .totalCasesByRisk(dt)
-            .then((response) => {
-              that.formatDataRange(response.data);
-            })
-            .catch((e) => {
-              console.error(e);
-            });
-        }
-      }
+    created() {},
+    mounted() {
+        this.getBodyHeight();
+        this.loadOption();
     },
-    /**
-     * Format response fromn API
-     * @param {object} data
-     */
-    formatDataRange(data) {
-      let that = this,
-        serie = [];
-      this.dataCasesByRisk = data;
-      _.each(data, (el) => {
-        //Format the response to risk type Overdue/At risk/ On time
-        switch (that.riskType) {
-          case "OVERDUE":
-            serie.push({
-              name: el["number_case"].toString(),
-              data: [
-                [moment(el["due_date"]).toDate().getTime(), el["days"], 20],
-              ],
+    watch: {},
+    computed: {},
+    updated() {},
+    beforeCreate() {},
+    methods: {
+        /**
+         * Return the height for Vue Card View body
+         */
+        getBodyHeight() {
+            this.width = window.innerHeight * 0.95;
+        },
+        /**
+         * Change datepickers or radio button
+         */
+        changeOption() {
+            let dt;
+            if (this.dateFrom && this.dateTo) {
+                dt = {
+                    process: this.data[2].id,
+                    caseList: this.data[1].id.toLowerCase(),
+                    dateFrom: moment(this.dateFrom).format("YYYY-MM-DD"),
+                    dateTo: moment(this.dateTo).format("YYYY-MM-DD"),
+                    riskStatus: this.riskType,
+                };
+                this.size.id != "all" ? (dt["topCases"] = this.size.id) : null;
+                this.dateNow = moment().format("YYYY-MM-DD h:mm:ss a");
+                this.updateSettings();
+            }
+        },
+        /**
+         * Load option saved in userConfig
+         */
+        loadOption() {
+            let that = this,
+                dt;
+            if (this.data.length > 2) {
+                if (this.dateFrom && this.dateTo) {
+                    dt = {
+                        process: this.data[2].id,
+                        caseList: this.data[1].id.toLowerCase(),
+                        dateFrom: moment(this.dateFrom).format("YYYY-MM-DD"),
+                        dateTo: moment(this.dateTo).format("YYYY-MM-DD"),
+                        riskStatus: this.riskType,
+                    };
+                    this.size.id != "all"
+                        ? (dt["topCases"] = this.size.id)
+                        : null;
+                    this.dateNow = moment().format("YYYY-MM-DD h:mm:ss a");
+                    Api.process
+                        .totalCasesByRisk(dt)
+                        .then((response) => {
+                            that.formatDataRange(response.data);
+                        })
+                        .catch((e) => {
+                            console.error(e);
+                        });
+                }
+            }
+        },
+        /**
+         * Format response fromn API
+         * @param {object} data
+         */
+        formatDataRange(data) {
+            let that = this,
+                serie = [];
+            this.dataCasesByRisk = data;
+            _.each(data, (el) => {
+                //Format the response to risk type Overdue/At risk/ On time
+                switch (that.riskType) {
+                    case "OVERDUE":
+                        serie.push({
+                            name: el["number_case"].toString(),
+                            data: [
+                                [
+                                    moment(el["due_date"])
+                                        .toDate()
+                                        .getTime(),
+                                    el["days"],
+                                    20,
+                                ],
+                            ],
+                        });
+                        break;
+                    case "AT_RISK":
+                        serie.push({
+                            name: el["number_case"].toString(),
+                            data: [
+                                [
+                                    moment(el["delegated"])
+                                        .toDate()
+                                        .getTime(),
+                                    -el["days"],
+                                    20,
+                                ],
+                            ],
+                        });
+                        break;
+                    case "ON_TIME":
+                        serie.push({
+                            name: el["number_case"].toString(),
+                            data: [
+                                [
+                                    moment(el["delegated"])
+                                        .toDate()
+                                        .getTime(),
+                                    -el["days"],
+                                    20,
+                                ],
+                            ],
+                        });
+                        break;
+                }
             });
-            break;
-          case "AT_RISK":
-            serie.push({
-              name: el["number_case"].toString(),
-              data: [
-                [moment(el["delegated"]).toDate().getTime(), -el["days"], 20],
-              ],
-            });
-            break;
-          case "ON_TIME":
-            serie.push({
-              name: el["number_case"].toString(),
-              data: [
-                [moment(el["delegated"]).toDate().getTime(), -el["days"], 20],
-              ],
-            });
-            break;
-        }
-      });
 
-      this.updateApexchartAxis();
-      if (this.data[1].id.toLowerCase() !== "draft") {
-        this.series = serie;
-      }
-    },
-    /**
-     * Update axis chart
-     */
-    updateApexchartAxis() {
-      switch (this.riskType) {
-        case "OVERDUE":
-          this.$refs["LevelThreeChart"].updateOptions({
-            yaxis: {
-              min: 0,
-              tickAmount: 7,
-            },
-            title: {
-              text: "Overdue days",
-            },
-          });
-          break;
-        case "AT_RISK":
-          this.$refs["LevelThreeChart"].updateOptions({
-            yaxis: {
-              max: 0,
-              tickAmount: 7,
-            },
-            title: {
-              text: "Days before being Overdue",
-            },
-          });
-          break;
-        case "ON_TIME":
-          this.$refs["LevelThreeChart"].updateOptions({
-            yaxis: {
-              max: 0,
-              tickAmount: 7,
-            },
-            title: {
-              text: "Days before being At-Risk",
-            },
-          });
-          break;
-      }
-    },
-    /**
-     * Create custom tooltip
-     */
-    customTooltip(series, seriesIndex, dataPointIndex, w) {
-      let obj = this.dataCasesByRisk[seriesIndex];
-      return `<div class="apexcharts-theme-light">
+            this.updateApexchartAxis();
+            if (this.data[1].id.toLowerCase() !== "draft") {
+                this.series = serie;
+            }
+        },
+        /**
+         * Update axis chart
+         */
+        updateApexchartAxis() {
+            switch (this.riskType) {
+                case "OVERDUE":
+                    this.$refs["LevelThreeChart"].updateOptions({
+                        yaxis: {
+                            min: 0,
+                            tickAmount: 7,
+                        },
+                        title: {
+                            text: "Overdue days",
+                        },
+                    });
+                    break;
+                case "AT_RISK":
+                    this.$refs["LevelThreeChart"].updateOptions({
+                        yaxis: {
+                            max: 0,
+                            tickAmount: 7,
+                        },
+                        title: {
+                            text: "Days before being Overdue",
+                        },
+                    });
+                    break;
+                case "ON_TIME":
+                    this.$refs["LevelThreeChart"].updateOptions({
+                        yaxis: {
+                            max: 0,
+                            tickAmount: 7,
+                        },
+                        title: {
+                            text: "Days before being At-Risk",
+                        },
+                    });
+                    break;
+            }
+        },
+        /**
+         * Create custom tooltip
+         */
+        customTooltip(series, seriesIndex, dataPointIndex, w) {
+            let obj = this.dataCasesByRisk[seriesIndex];
+            return `<div class="apexcharts-theme-light">
                   <div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
                     ${"Number Case"} : ${obj["number_case"]}
                   </div>
@@ -361,203 +398,207 @@ export default {
                   <div class="apexcharts-tooltip-y-group">
                     <span class="" style="background-color: #28a745;"></span>
                     <span class="apexcharts-tooltip-text-y-label">Delegated</span> : <span class="apexcharts-tooltip-text-y-value">${
-                      obj["delegated"]
+                        obj["delegated"]
                     }</span>
                   </div>
                    <div class="apexcharts-tooltip-y-group">
                     <span class="" style="background-color: #28a745;"></span>
                     <span class="apexcharts-tooltip-text-y-label">At Risk</span> : <span class="apexcharts-tooltip-text-y-value">${
-                      obj["at_risk"]
+                        obj["at_risk"]
                     }</span>
                   </div>
                    <div class="apexcharts-tooltip-y-group">
                     <span class="" style="background-color: #28a745;"></span>
                     <span class="apexcharts-tooltip-text-y-label">Due Date</span> : <span class="apexcharts-tooltip-text-y-value">${
-                      obj["due_date"]
+                        obj["due_date"]
                     }</span>
                   </div>
                 </div>
               </div>
             </div>`;
-    },
-    /**
-     * Open selected cases in the inbox
-     * @param {object} item
-     */
-    openCase(item) {
-      this.$parent.$parent.$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.$parent.$parent.$emit("onUpdatePage", "XCase");
-    },
-    /**
-     * Click in marker chart
-     * @param {object} selection
-     */
-    onClickCaseMarker(selection) {
-      let process = this.data[0].id,
-        caseList = this.data[1].id.toLowerCase();
-      switch (caseList) {
-        case "inbox":
-        case "draft":
-          this.openCase({
-            APP_UID: selection["app_uid"],
-            DEL_INDEX: selection["del_index"],
-            PRO_UID: process,
-            TAS_UID: selection["tas_uid"],
-          });
-          break;
-        case "paused":
-          this.showModalUnpauseCase({
-            APP_UID: selection["app_uid"],
-            DEL_INDEX: selection["del_index"],
-            PRO_UID: process,
-            TAS_UID: selection["tas_uid"],
-          });
-          break;
-        case "unassigned":
-          this.showModalClaimCase({
-            APP_UID: selection["app_uid"],
-            DEL_INDEX: selection["del_index"],
-            PRO_UID: process,
-            TAS_UID: selection["tas_uid"],
-          });
-          break;
-      }
-    },
-    /**
-     * Show modal unpause
-     * @param {object} item
-     */
-    showModalUnpauseCase(item) {
-      this.$refs["modal-unpause-case"].data = item;
-      this.$refs["modal-unpause-case"].show();
-    },
-    /**
-     * Claim case
-     * @param {object} item
-     */
-    showModalClaimCase(item) {
-      let that = this;
-      api.cases.open(_.extend({ ACTION: "unassigned" }, item)).then(() => {
-        api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
-          that.$refs["modal-claim-case"].data = item;
-          that.$refs["modal-claim-case"].show();
-        });
-      });
-    },
-    /**
-     * Return the breadcrumbs
-     */
-    dataBreadcrumbs() {
-      let res = [];
-      if (this.data[1]) {
-        res.push({
-          label: this.data[1]["name"],
-          onClick() {},
-          color: this.data[1]["color"],
-        });
-      }
-      if (this.data[2]) {
-        res.push({
-          label: this.data[2]["name"],
-          onClick() {},
-          color: null,
-        });
-      }
-      return res;
-    },
-    /**
-     * UPdate settings user config
-     */
-    updateSettings() {
-      this.$emit("updateDataLevel", {
-        id: "level3",
-        name: this.data[2]["name"],
-        level: 3,
-        data: {
-          dateFrom: this.dateFrom,
-          dateTo: this.dateTo,
-          period: this.data[3].data.period,
-          size: this.size,
-          riskType: this.riskType,
         },
-      });
+        /**
+         * Open selected cases in the inbox
+         * @param {object} item
+         */
+        openCase(item) {
+            this.$parent.$parent.$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.$parent.$parent.$emit("onUpdatePage", "XCase");
+        },
+        /**
+         * Click in marker chart
+         * @param {object} selection
+         */
+        onClickCaseMarker(selection) {
+            let process = this.data[0].id,
+                caseList = this.data[1].id.toLowerCase();
+            switch (caseList) {
+                case "inbox":
+                case "draft":
+                    this.openCase({
+                        APP_UID: selection["app_uid"],
+                        DEL_INDEX: selection["del_index"],
+                        PRO_UID: process,
+                        TAS_UID: selection["tas_uid"],
+                    });
+                    break;
+                case "paused":
+                    this.showModalUnpauseCase({
+                        APP_UID: selection["app_uid"],
+                        DEL_INDEX: selection["del_index"],
+                        PRO_UID: process,
+                        TAS_UID: selection["tas_uid"],
+                    });
+                    break;
+                case "unassigned":
+                    this.showModalClaimCase({
+                        APP_UID: selection["app_uid"],
+                        DEL_INDEX: selection["del_index"],
+                        PRO_UID: process,
+                        TAS_UID: selection["tas_uid"],
+                    });
+                    break;
+            }
+        },
+        /**
+         * Show modal unpause
+         * @param {object} item
+         */
+        showModalUnpauseCase(item) {
+            this.$refs["modal-unpause-case"].data = item;
+            this.$refs["modal-unpause-case"].show();
+        },
+        /**
+         * Claim case
+         * @param {object} item
+         */
+        showModalClaimCase(item) {
+            let that = this;
+            api.cases
+                .open(_.extend({ ACTION: "unassigned" }, item))
+                .then(() => {
+                    api.cases
+                        .cases_open(_.extend({ ACTION: "todo" }, item))
+                        .then(() => {
+                            that.$refs["modal-claim-case"].data = item;
+                            that.$refs["modal-claim-case"].show();
+                        });
+                });
+        },
+        /**
+         * Return the breadcrumbs
+         */
+        dataBreadcrumbs() {
+            let res = [];
+            if (this.data[1]) {
+                res.push({
+                    label: this.data[1]["name"],
+                    onClick() {},
+                    color: this.data[1]["color"],
+                });
+            }
+            if (this.data[2]) {
+                res.push({
+                    label: this.data[2]["name"],
+                    onClick() {},
+                    color: null,
+                });
+            }
+            return res;
+        },
+        /**
+         * UPdate settings user config
+         */
+        updateSettings() {
+            this.$emit("updateDataLevel", {
+                id: "level3",
+                name: this.data[2]["name"],
+                level: 3,
+                data: {
+                    dateFrom: this.dateFrom,
+                    dateTo: this.dateTo,
+                    period: this.data[3].data.period,
+                    size: this.size,
+                    riskType: this.riskType,
+                },
+            });
+        },
     },
-  },
 };
 </script>
 <style>
 .vp-task-metrics-label {
-  display: inline-block;
+    display: inline-block;
 }
 
 .vp-width-p30 {
-  width: 30%;
+    width: 30%;
 }
 
 .vp-inline-block {
-  display: inline-block;
+    display: inline-block;
 }
 
 .vp-padding-l20 {
-  padding-left: 20px;
+    padding-left: 20px;
 }
 
 .vp-width-p100 {
-  width: 100%;
+    width: 100%;
 }
 
 .vp-text-align-center {
-  text-align: center;
+    text-align: center;
 }
 
 .vp-btn-success {
-  color: #fff;
-  background-color: #368b48;
-  border-color: #368b48;
+    color: #fff;
+    background-color: #368b48;
+    border-color: #368b48;
 }
 .vp-btn-success:hover {
-  color: #fff;
-  background-color: #255a30;
-  border-color: #368b48;
+    color: #fff;
+    background-color: #255a30;
+    border-color: #368b48;
 }
 
 .vp-btn-warning {
-  color: #fff;
-  background-color: #c99e11;
-  border-color: #a1831d;
+    color: #fff;
+    background-color: #c99e11;
+    border-color: #a1831d;
 }
 .vp-btn-warning:hover {
-  color: #fff;
-  background-color: #886c0e;
-  border-color: #a1831d;
+    color: #fff;
+    background-color: #886c0e;
+    border-color: #a1831d;
 }
 .vp-btn-danger {
-  color: #fff;
-  background-color: #b63b32;
-  border-color: #b63b32;
+    color: #fff;
+    background-color: #b63b32;
+    border-color: #b63b32;
 }
 
 .vp-btn-danger:hover {
-  color: #fff;
-  background-color: #832923;
-  border-color: #b63b32;
+    color: #fff;
+    background-color: #832923;
+    border-color: #b63b32;
 }
 
 .vp-form-label {
-  display: inline-block;
-  font-family: Helvetica, Arial, sans-serif;
-  text-anchor: start;
-  font-size: 14px;
-  font-weight: 900;
-  fill: rgb(15 17 18);
-  margin-top: 0.5rem;
-  color: #7d7f93;
+    display: inline-block;
+    font-family: Helvetica, Arial, sans-serif;
+    text-anchor: start;
+    font-size: 14px;
+    font-weight: 900;
+    fill: rgb(15 17 18);
+    margin-top: 0.5rem;
+    color: #7d7f93;
 }
 </style>
-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
\ No newline at end of file
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>