luos/resources/assets/js/home/CustomCaseList/CustomCaseList.vue

<template>
    <div id="v-todo" ref="v-todo" class="v-container-todo">
        <button-fleft :data="newCase"></button-fleft>
        <modal-new-request ref="newRequest"></modal-new-request>
        <ModalPauseCase ref="modal-pause-case"></ModalPauseCase>
        <ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>
        <CasesFilter
            :filters="filters"
            :title="titleMap[data.pageParent].label"
            :icon="titleMap[data.pageParent].icon"
            @onRemoveFilter="onRemoveFilter"
            @onUpdateFilters="onUpdateFilters"
        />
        <multiview-header
            :data="dataMultiviewHeader"
            :dataSubtitle="dataSubtitle"
        />

        <settings-popover
            :options="settingOptions"
            target="pm-dr-column-settings2"
            @onUpdateColumnSettings="onUpdateColumnSettings"
            :key="random + 1"
            :selected="columns"
        />
        <v-server-table
            v-if="typeView === 'GRID'"
            :data="tableData"
            :columns="columns"
            :options="getTableOptions()"
            ref="vueTable"
            @row-click="onRowClick"
            :key="random"
            name="todo"
        >
            <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="send_by" slot-scope="props">
                <CurrentUserCell :data="props.row.USER_DATA" />
            </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
                        ref="ellipsis"
                        v-if="dataEllipsis"
                        :data="dataEllipsis"
                    >
                    </ellipsis>
                </div>
            </div>
        </v-server-table>
        <VueCardView
            v-if="typeView === 'CARD'"
            :options="getVueViewOptions()"
            ref="vueCardView"
        >
            <b-col
                sm="11"
                slot="actions"
                slot-scope="props"
                class="vp-inbox-list-actions"
            >
                <b-row>
                    <b-col sm="12">
                        <div
                            class="v-pm-card-info"
                            @click="openCaseDetail(props.item)"
                        >
                            <i class="fas fa-info-circle"></i>
                        </div>
                    </b-col>
                    <b-col sm="12">
                        <div @click="updateDataEllipsis(props.item)">
                            <ellipsis v-if="dataEllipsis" :data="dataEllipsis">
                            </ellipsis>
                        </div>
                    </b-col>
                </b-row>
            </b-col>
            <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>
            <div slot="priority" 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"]["PRIORITY"] }}
                </span>
            </div>
            <div slot="send_by" slot-scope="props" class="v-card-text">
                <span class="v-card-text-dark"
                    >{{ props["headings"][props.column] }} :</span
                >
                <span class="v-card-text-light">
                    <CurrentUserCell :data="props.item.USER_DATA" />
                </span>
            </div>
        </VueCardView>
        <VueListView
            v-if="typeView === 'LIST'"
            :options="getVueViewOptions()"
            ref="vueListView"
        >
            <b-col
                sm="12"
                slot="actions"
                slot-scope="props"
                class="vp-inbox-list-actions"
            >
                <div class="">
                    <b-row>
                        <b-col sm="12">
                            <div
                                class="v-pm-card-info"
                                @click="openCaseDetail(props.item)"
                            >
                                <i class="fas fa-info-circle"></i>
                            </div>
                        </b-col>
                        <b-col sm="12">
                            <div @click="updateDataEllipsis(props.row)">
                                <ellipsis
                                    ref="ellipsis"
                                    v-if="dataEllipsis"
                                    :data="dataEllipsis"
                                >
                                </ellipsis>
                            </div>
                        </b-col>
                    </b-row>
                </div>
            </b-col>
            <b-col
                sm="5"
                ref="text"
                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
                >
            </b-col>
            <b-col
                sm="5"
                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>
            </b-col>
            <b-col
                sm="5"
                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>
            </b-col>
            <b-col sm="5" 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>
            </b-col>
            <b-col
                sm="5"
                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>
            </b-col>
            <b-col
                sm="5"
                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>
            </b-col>
            <b-col
                sm="5"
                slot="priority"
                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"]["PRIORITY"] }}
                </span>
            </b-col>

            <b-col sm="5" slot="send_by" slot-scope="props" class="v-card-text">
                <span class="v-card-text-dark"
                    >{{ props["headings"][props.column] }} :</span
                >
                <span class="v-card-text-light">
                    <CurrentUserCell :data="props.item.USER_DATA" />
                </span>
            </b-col>
        </VueListView>
        <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
        <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
    </div>
</template>

<script>
import HeaderCounter from "../../components/home/HeaderCounter.vue";
import ButtonFleft from "../../components/home/ButtonFleft.vue";
import ModalNewRequest from "../ModalNewRequest.vue";
import ModalUnpauseCase from "../modal/ModalUnpauseCase.vue";
import ModalClaimCase from "../modal/ModalClaimCase.vue";
import TaskCell from "../../components/vuetable/TaskCell.vue";
import CasesFilter from "../../components/search/CasesFilter";
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";
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";
import _ from "lodash";

export default {
    name: "CustomCaseList",
    mixins: [defaultMixins],
    components: {
        HeaderCounter,
        ButtonFleft,
        ModalNewRequest,
        ModalUnpauseCase,
        ModalClaimCase,
        TaskCell,
        CasesFilter,
        MultiviewHeader,
        VueCardView,
        VueListView,
        Ellipsis,
        ModalPauseCase,
        ModalReassignCase,
        CurrentUserCell,
    },
    props: ["defaultOption", "settings", "data"],
    data() {
        let that = this;
        return {
            titleMap: {
                inbox: {
                    icon:"fas fa-check-circle",
                    label: this.$i18n.t('ID_INBOX')
                },
                draft: {
                    icon:"fas fa-edit",
                    label: this.$i18n.t('ID_DRAFT')
                },
                paused: {
                    icon:"far fa-pause-circle",
                    label: this.$i18n.t('ID_PAUSED')
                },
                unassigned: {
                    icon:"fas fa-users",
                    label: this.$i18n.t('ID_UNASSIGNED')
                }
            },
            columMap: {
                case_number: "APP_NUMBER",
                case_title: "DEL_TITLE",
                process_name: "PRO_TITLE",
            },
            newCase: {
                title: this.$i18n.t("ID_NEW_CASE"),
                class: "btn-success",
                onClick: () => {
                    this.$refs["newRequest"].show();
                },
            },
            filters:
                this.settings && this.settings.filters
                    ? this.settings.filters
                    : {},
            defaultColumns: [
                "case_number",
                "case_title",
                "process_name",
                "task",
                "send_by",
                "due_date",
                "delegation_date",
                "priority",
            ],
            settingOptions: [],
            cardColumns: [],
            isFistTime: true,
            columns: ["detail", "actions"],
            headings: {
                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"),
                task: this.$i18n.t("ID_TASK"),
                send_by: this.$i18n.t("ID_SEND_BY"),
                due_date: this.$i18n.t("ID_DUE_DATE"),
                delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
                priority: this.$i18n.t("ID_PRIORITY"),
                actions: "",
            },
            tableData: [],
            icon: "fas fa-check-circle",
            options: {
                filterable: false,
                headings: {},
                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,
                },
                sortable: ["case_number"],
                orderBy:
                    this.settings && this.settings.orderBy
                        ? this.settings.orderBy
                        : {},
                requestFunction(data) {
                    return this.$parent.$parent.getCasesForVueTable(data);
                },
                settings: {
                    actions: {
                        class: "fas fa-cog",
                        id: "pm-dr-column-settings2",
                        events: {
                            click() {
                                that.$root.$emit(
                                    "bv::show::popover",
                                    "pm-dr-column-settings2"
                                );
                            },
                        },
                    },
                },
            },
            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,
            dataSubtitle: {
                subtitle: this.data.pageName,
                icon: this.data.pageIcon,
                color: this.data.color
            },
        };
    },
    created() {
        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("updateSettings", {
                data: data,
                key: "orderBy",
                parent: that.data.pageParent,
                type: "custom",
                id: that.data.customListId
            });
        });
    },
    watch: {
        columns: function(val) {
            if (this.isFistTime) {
                 this.isFistTime = false;
            }  else {
                this.$emit("updateSettings", {
                    data: val,
                    key: "columns",
                    parent: this.data.pageParent,
                    type: "custom",
                    id: this.data.customListId
                });
            }
        },
        filters: function(val) {
            this.$emit("updateSettings", {
                data: val,
                key: "filters",
                parent: this.data.pageParent,
                type: "custom",
                id: this.data.customListId
            });
        },
    },
    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.openCase(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 = {},
                sort = "",
                id = this.data.customListId;
            filters = {
                paged: paged,
                limit: limit,
                offset: start,
            };
            _.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[that.data.pageParent]
                    ({
                        id,
                        filters,
                    })
                    .then((response) => {
                        let tmp, columns;

                        columns = response.data.columns.map((item) => {
                            return item.field;
                        });
                        that.settingOptions = that.formatColumnSettings(columns);
                        dt = that.formatDataResponse(response.data.data);
                        that.cardColumns = columns;
                        if (that.isFistTime) {
                            that.columns = that.settings && that.settings.columns ? that.settings.columns :  that.getTableColumns(columns);
                        }
                        resolutionFunc({
                            data: dt,
                            count: response.data.total,
                        });
                    })
                    .catch((e) => {
                        rejectionFunc(e);
                    });
            });
        },
        /**
         * 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
         * @param {object} response
         * @returns {object}
         */
        formatDataResponse(response) {
            let data = [];
            _.forEach(response, (v) => {
                data.push({
                    ...v,
                    ...{
                        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 : "",
                            },
                        ],
                        USER_DATA: this.formatUser(v.SEND_BY_INFO),
                        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;
        },
        /**
         * Set the format to show user's information
         * @return {array} data
         * @returns {object}
         */
        formatUser(data) {
            var dataFormat = [],
                userDataFormat;
            userDataFormat = utils.userNameDisplayFormat({
                userName: data.user_tooltip.usr_firstname,
                firstName: data.user_tooltip.usr_lastname,
                lastName: data.user_tooltip.usr_username,
                format: window.config.FORMATS.format || null,
            });
            dataFormat.push({
                USERNAME_DISPLAY_FORMAT: userDataFormat,
                EMAIL: data.user_tooltip.usr_email,
                POSITION: data.user_tooltip.usr_position,
                AVATAR:
                    userDataFormat !== ""
                        ? window.config.SYS_SERVER_AJAX +
                          window.config.SYS_URI +
                          `users/users_ViewPhotoGrid?pUID=${data.user_tooltip.usr_id}`
                        : "",
                UNASSIGNED: userDataFormat !== "" ? true : false,
            });
            return dataFormat;
        },
        /**
         * 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,
                            ACTION: "todo",
                        });
                        that.$emit("onUpdatePage", "case-detail");
                    });
            });
        },
        onRemoveFilter(data) {},
        onUpdateFilters(data) {
            this.filters = 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(newData) {
            this.isFistTime = true;
            this.typeView = "GRID";
            // force to update component id
            if (newData){
                if(newData.customListId) {
                    this.data.customListId = newData.customListId;
                }
                this.dataSubtitle = {
                    subtitle: newData.pageName,
                    icon: newData.pageIcon,
                    color: newData.color
                }
            }
            if (this.typeView === "GRID" && this.$refs["vueTable"]) {
                this.$refs["vueTable"].getData();
            }
            if (this.typeView === "CARD" && this.$refs["vueCardView"]) {
                this.$refs["vueCardView"].getData();
            }
            if (this.typeView === "LIST" && this.$refs["vueCardView"]) {
                this.$refs["vueListView"].getData();
            }
        },
        /**
         * Show modal to pause a case
         * @param {objec} data
         */
        showModalPause(data) {
            this.$refs["modal-pause-case"].data = data;
            this.$refs["modal-pause-case"].show();
        },
        /**
         * Show modal to reassign a case
         * @param {objec} data
         */
        showModalReassign(data) {
            this.$refs["modal-reassign-case"].data = data;
            this.$refs["modal-reassign-case"].show();
        },
        /**
         * Show options in the ellipsis
         * @param {objec} data
         */
        updateDataEllipsis(data) {
            this.showEllipsis = !this.showEllipsis;
            if (this.showEllipsis) {
                this.dataEllipsis = this.ellipsisItemFactory(data, this.data.pageParent);
            }
        },
        /**
         * Claim case
         *
         * @param {object} item
         */
        claimCase(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();
            });
          });
        },
        showModalUnpauseCase(item) {
          this.$refs["modal-unpause-case"].data = item;
          this.$refs["modal-unpause-case"].show();
        },
        /**
         * Json factory for ellipsis control item
         * @param {object} data
         * @param {object} page
         * @returns {object}
         */
        ellipsisItemFactory (data, page) {
          let that = this;
          let dataEllipsisMap = {
            inbox: {
              buttons: {
                  open: {
                      name: "open",
                      icon: "far fa-edit",
                      fn: function() {
                          that.openCase(data);
                      },
                  },
                  note: {
                      name: "case note",
                      icon: "far fa-comments",
                      fn: function() {
                          that.openCaseDetail(data);
                      },
                  },
                  reassign: {
                      name: "reassign case",
                      icon: "fas fa-undo",
                      fn: function() {
                          that.showModalReassign(data);
                      },
                  },
                  pause: {
                      name: "pause case",
                      icon: "far fa-pause-circle",
                      fn: function() {
                          that.showModalPause(data);
                      },
                  },
              },
            },
            draft: {
              buttons: {
                open: {
                  name: "open",
                  icon: "far fa-edit",
                  fn: function() {
                    that.openCase(data);
                  }
                },
                note: {
                  name: "case note",
                  icon: "far fa-comments",
                  fn: function() {
                    that.openCaseDetail(data);
                  }
                },
              }
            },
            paused: {
              buttons: {
                note: {
                  name: "case note",
                  icon: "far fa-comments",
                  fn: function() {
                    that.openCaseDetail(data);
                  }
                },
                play: {
                  name: "play case",
                  icon: "far fa-play-circle",
                  fn: function() {
                    that.showModalUnpauseCase(data);
                  }
                },
                reassign: {
                  name: "reassign case",
                  icon: "fas fa-undo",
                  fn: function() {
                    that.showModalReassign(data);
                  }
                }
              }
            },
            unassigned: {
              buttons: {
                note: {
                  name: "case note",
                  icon: "far fa-comments",
                  fn: function() {
                    that.openCaseDetail(data);
                  }
                },
                pause: {
                  name: "pause case",
                  icon: "far fa-pause-circle",
                  fn: function() {
                    that.showModalPause(data);
                  }
                },
                claim: {
                  name: "claim case",
                  icon: "fas fa-briefcase",
                  fn: function() {
                    that.claimCase(data);
                  }
                }
              }
            }
          };
          return dataEllipsisMap[page];
        }
    },
};
</script>
<style>
.v-container-todo {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 50px;
    padding-right: 50px;
}
.VueTables__limit {
    display: none;
}

.v-card-text-dark {
    color: #343944;
    display: inline-block;
}

.v-card-text-highlight {
    color: #313541;
    display: inline-block;
}

.v-card-text-light {
    color: #313541;
    display: inline-block;
}

.ellipsis-container {
    margin-top: 5em;
}

.v-pm-card-info {
    float: right;
}

.vp-inbox-list-actions {
    top: 25%;
    position: absolute;
}
</style>