ViewHonorAddBpjs.vue & upload-file-bpjs.store.js

<template>
    <div class="px-5 relative surface-overlay w-full">
        <div class="sticky top-0 z-5 border-bottom-1 border-gray-200">
            <MyBreadcrumb />
        </div>
        <JleafMessage />
        <PageDesc label="descAddHonor" />
        <div class="lg:col-10 md:col-12 col-12 grid formgrid">
            <router-link :to="{ name: 'calculationProcess' }">
                <Button :label="$t('label.backToHonorDoctor')" icon="pi pi-arrow-left" class="py-4 mb-2 px-3" outlined
                    rel="noopener" />
            </router-link>
        </div>
        <div class="w-full">
            <div class="grid formgrid p-fluid w-full" style="margin-bottom:-1rem;">
                <div class="field col-12 grid formgrid justify-content-between p-fluid">
                    <div class="field lg:col-8 md:col-8 col-12 grid formgrid p-fluid">
                        <div class="flex flex-column gap-2 lg:col-3 md:col-4 col-6">
                            <label class="lb-comp" for="dates">{{ $tl('journalDate') }}</label>
                            <Calendar id="dates" v-model="context.journalDate" view="month" showIcon
                                :manualInput="false" dateFormat="dd MM yy" :disabled="true" />
                        </div>
                        <div class="flex flex-column gap-2 lg:col-3 md:col-4 col-6">
                            <label class="lb-comp" for="dates">{{ $tl('calculationPeriod') }}</label>
                            <Calendar id="dates" v-model="context.calculationPeriod" view="month" selectionMode="range"
                                hideOnRangeSelection @hide="changeDates" showIcon :manualInput="false"
                                dateFormat="dd MM yy" :disabled="true" />
                        </div>
                    </div>
                    <div class="flex flex-row align-items-end field gap-2">
                        <div class="kb-highlight" @click="reloadStatusProcess" v-bind:class="{
                'bg-blue-100 text-blue-600 w-9rem': context.status === 'I',
                'bg-red-100 text-red-600 w-9rem': context.status === 'N',
                'bg-yellow-100 text-yellow-600 w-9rem': context.status === 'D',
                'bg-green-100 text-green-600 w-9rem': context.status === 'F',
                'bg-gray-100 text-gray-600 w-9rem': context.status === 'V',
                'cursor-pointer': context.status === 'I'
            }">
                            <span class="text-lg font-semibold text-center">
                                {{ context.status === 'I' ? $t('label.inProgress') : context.status === 'N' ?
                $t('label.notProcess') : context.status === 'D' ?
                    $t('label.draft') : context.status === 'F' ? $t('label.done') : context.status === 'V' ?
                        $t('label.void') : '' }}
                            </span>
                        </div>
                        <Button :label="context.status === 'F' ? $tl('alreadySubmitted') : $tl('submitHonorBpjs')"
                            :icon="{ 'pi pi-spin pi-spinner': context.status === 'I', 'pi pi-check': context.status !== 'I' }"
                            :disabled="context.isSubmitHonorAddDisabled" severity="info" class="w-auto"
                            @click="confirmSubmitProcessHondok" />
                        <Button icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="menu_export"
                            text />
                        <Menu ref="menu" id="menu_export" :model="exportItems" :popup="true" />
                    </div>
                </div>

            </div>
        </div>
        <TabView lazy="true" :active-index="activeTab.activeTab" @tab-change="handleTabChange">
            <TabPanel>
                <template #header>
                    <i class="bi bi-clipboard2-pulse mr-2"></i>
                    <span class="font-medium"> {{ $tl('rawatJalan') }}</span>
                </template>
                <DataViewAddRawatJalan />
            </TabPanel>
            <TabPanel>
                <template #header>
                    <i class="bi bi-activity mr-2"></i>
                    <span class="font-medium">{{ $tl('rawatInap') }}</span>
                </template>
                <DataViewAddRawatInap />
            </TabPanel>
            <TabPanel>
                <template #header>
                    <i class="bi bi-filetype-txt mr-2"></i>
                    <span class="font-medium">{{ $tl('detailFileProcessHondok') }}</span>
                </template>
                <DataViewDetailFileProcessHondok />
            </TabPanel>
        </TabView>
    </div>
</template>

<script setup>
import { showConfirmDialog } from '@/utils/dialog.service';
import { computed, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { useAddHonorBpjsStore } from '../store/add-honor-bpjs.store';
import globalProperties from '@/utils/global-properties';
import DataViewDetailFileProcessHondok from '../components/DataViewDetailFileProcessHondok.vue'
import DataViewAddRawatInap from '../components/DataViewAddRawatInap.vue';
import DataViewAddRawatJalan from '../components/DataViewAddRawatJalan.vue';
import { useUploadFileBpjsStore } from '../store/upload-file-bpjs.store';

const { locale } = useI18n();
const { $tl } = globalProperties;
const route = useRoute();
const context = useAddHonorBpjsStore();
const activeTab = useUploadFileBpjsStore();

const menu = ref();

const handleTabChange = (e) => {
    activeTab.activeTab = e.index;
};

onMounted(async () => {

    const id = route.params.id;

    await context.getProcessHonorId(id);
    getExportItems.value = getExportItems($tl);
});

watch(locale, () => {
    getExportItems.value = getExportItems($tl);
});

const reloadStatusProcess = async () => {
    if (context.status === 'I') {
        await context.getProcessHonorId(route.params.id);
    }
};

const changeDates = () => {
    context.dateFrom = moment(context.dates[0]).format('YYYYMMDD');
    context.dateTo = moment(context.dates[1]).format('YYYYMMDD');

    context.getDetailList();
}

const getExportItems = () => [
    {
        label: $tl('options'),
        items: [
            {
                label: $tl('exportToXlsx'),
                icon: 'bi bi-filetype-xlsx'
            },
            {
                label: $tl('cancel'),
                icon: 'pi pi-times',
                command: () => {
                    confirmCancelProcessHondok();
                }
            },
        ]
    }
];

const exportItems = computed(() => getExportItems($tl));

const toggle = (event) => {
    menu.value.toggle(event);
};


const confirmSubmitProcessHondok = () => {
    showConfirmDialog({
        message: $tl('addSubmit'),
        header: $tl('confirmSubmit'),
        accept: () => {
            context.submitProcessHondok(context.id, context.version);
        },
        defaultFocus: 'reject',
        acceptLabel: $tl('yes'),
        acceptIcon: 'pi pi-check',
        rejectLabel: $tl('no'),
        rejectIcon: 'pi pi-times',
        label: [$tl('journalDate'), $tl('processType'), $tl('calculationPeriod')],
        param: [context.journalDate, context.typeProcess, context.calculationPeriod],
    });
};

const confirmCancelProcessHondok = () => {
    showConfirmDialog({
        message: $tl('cancelProcessHondok'),
        header: $tl('confirmCancel'),
        accept: () => {
            context.cancelProcessHondok(context.id, context.version);
        },
        defaultFocus: 'reject',
        acceptLabel: $tl('yes'),
        acceptIcon: 'pi pi-check',
        rejectLabel: $tl('no'),
        rejectIcon: 'pi pi-times',
        label: [$tl('journalDate'), $tl('processType'), $tl('calculationPeriod')],
        param: [context.journalDate, context.typeProcess, context.calculationPeriod],
    });
};

</script>























import { defineStore } from 'pinia';
import { ZicareHonorDokterApi } from '../../zicare-honor-dokter.api-constant';
import { callApiTask } from '@/utils/jleaf-api-connect';
import moment from 'moment';
import { ZicareConstants } from '@/modules/zicare/zicare.constant';

export const useUploadFileBpjsStore = defineStore({
    id: 'upload-file-bpjs.store',
    state: () => ({
        uploadFileApi: ZicareHonorDokterApi.UPLOAD_FILE,
        findId: ZicareHonorDokterApi.FIND_PROCESS_HONDOK_BY_ID,
        fileList: [],
        loading: {},
        id: '',
        version: '',
        dialogRef: null,
        activeTab: 0,
    }),
    actions: {
        async getProcessHonorId(id) {
            this.loading['reloadStatus'] = true;
            const payload = {
                api: this.findId,
                body: {
                    id: id
                }
            };
            const result = await callApiTask(payload);
            if (result.isOk) {
                const resultData = result.body;
                this.id = resultData.id;
                this.journalDate = moment(resultData.journalDate, 'YYYYMMDD').format('DD MMMM YYYY');
                if (resultData.hondokDateFrom && resultData.hondokDateTo) {
                    this.calculationPeriod = `${moment(resultData.hondokDateFrom, 'YYYYMMDD').format('DD MMMM YYYY')} - ${moment(resultData.hondokDateTo, 'YYYYMMDD').format('DD MMMM YYYY')}`;
                }
                this.status = resultData.statusProcess;
                this.version = resultData.version;
            }
            this.loading['reloadStatus'] = false;
        },
        async updateFileListRawatInap(files) {
            const fileNames = files.map(file => ({ fileName: file.name }));
            const payload = {
                api: this.uploadFileApi,
                body: {
                    processHondokId: this.id,
                    processHondokVersion: this.version,
                    jnsPelayananId: ZicareConstants.JNS_PELAYANAN_ID_RAWAT_INAP,
                    fileList: fileNames,
                }
            };
            const result = await callApiTask(payload);
            if (result.isOk) {
                await this.getProcessHonorId(this.id);
                setTimeout(() => {
                    this.dialogRef.close();
                    this.activeTab = 2; // Switch to DataViewDetailFileProcessHondok tab
                }, 3000);
            }
        },
        async updateFileListRawatJalan(files) {
            const fileNames = files.map(file => ({ fileName: file.name }));
            const payload = {
                api: this.uploadFileApi,
                body: {
                    processHondokId: this.id,
                    processHondokVersion: this.version,
                    jnsPelayananId: ZicareConstants.JNS_PELAYANAN_ID_RAWAT_JALAN,
                    fileList: fileNames,
                }
            };
            const result = await callApiTask(payload);
            if (result.isOk) {
                await this.getProcessHonorId(this.id);
                setTimeout(() => {
                    this.dialogRef.close();
                    this.activeTab = 2;
                    console.log(this.activeTab);
                }, 3000);
            }
        },
        setActiveTab(index) {
            this.activeTab = index;
        }
    }
});