simrsx-fe/app/components/content/resume/list.vue

<script setup lang="ts">
import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
import type { Summary } from '~/components/pub/my-ui/summary-card/type'

// #region Imports
import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
import { ActionEvents } from '~/components/pub/my-ui/data/types'

import Header from '~/components/pub/my-ui/nav-header/prep.vue'
import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
import { usePaginatedList } from '~/composables/usePaginatedList'
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'

import { getPatients, removePatient } from '~/services/patient.service'
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
import type { ExposedForm } from '~/types/form'
import { VerificationSchema } from '~/schemas/verification.schema'
import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
import type { PagePermission } from '~/models/role'
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
import { unauthorizedToast } from '~/lib/utils'
// #endregion


// #region Permission
const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
const { getPagePermissions } = useRBAC()
const pagePermission = getPagePermissions(roleAccess)

// #region State
const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
  entityName: 'patient',
})

const refSearchNav: RefSearchNav = {
  onClick: () => {
    // open filter modal
  },
  onInput: (val: string) => {
    searchInput.value = val
  },
  onClear: () => {
    searchInput.value = ''
  },
}

const verificationInputForm = ref<ExposedForm<any> | null>(null)
const isVerifyDialogOpen = ref(false)
const isDocPreviewDialogOpen = ref(false)
const isRecordConfirmationOpen = ref(false)
const summaryLoading = ref(false)

const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
const isCaptchaValid = ref(false)
provide('isCaptchaValid', isCaptchaValid)

const headerPrep: HeaderPrep = {
  title: "Resume",
  icon: 'i-lucide-newspaper',
  }
  if (pagePermission.canCreate) {
    headerPrep.addNav = {
      label: "Resume",
      onClick: () => navigateTo('/resume/add'),
    }
  }
// #endregion

// #region Lifecycle Hooks
onMounted(() => {
  getPatientSummary()
})
// #endregion

// #region Functions
async function getPatientSummary() {
  try {
    summaryLoading.value = true
    await new Promise((resolve) => setTimeout(resolve, 500))
  } catch (error) {
    console.error('Error fetching patient summary:', error)
  } finally {
    summaryLoading.value = false
  }
}

async function handleActionClick(eventType: string) {
  if (eventType === 'submit') {
    // const patient: Patient = await composeFormData()
    // let createdPatientId = 0

    // const response = await handleActionSave(
    //   patient,
    //   () => {},
    //   () => {},
    //   toast,
    // )

    // const data = (response?.body?.data ?? null) as PatientBase | null
    // if (!data) return
    // createdPatientId = data.id

    // If has callback provided redirect to callback with patientData
    // if (props.callbackUrl) {
    //   await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
    //   return
    // }

    // Navigate to patient list or show success message
    // await navigateTo('/outpatient/encounter')
    // return
  }

  if (eventType === 'back') {
    isVerifyDialogOpen.value = false
  }
}

async function handleConfirmDelete() {
  try {
      const result = await removePatient(recId.value)
      if (result.success) {
        console.log('Patient deleted successfully')
        // Refresh the list
        await fetchData()
      } else {
        console.error('Failed to delete patient:', result)
        // Handle error - show error message to user
      }
    } catch (error) {
      console.error('Error deleting patient:', error)
      // Handle error - show error message to user
    }
}

function handleCancelConfirmation() {
  // Reset record state when cancelled
  recId.value = 0
  recAction.value = ''
  recItem.value = null
}
// #endregion

// #region Provide
provide('rec_id', recId)
provide('rec_action', recAction)
provide('rec_item', recItem)
provide('table_data_loader', isLoading)
// #endregion

// #region Watchers
watch([recId, recAction], () => {
    switch (recAction.value) {
      case ActionEvents.showVerify:
        if(pagePermission.canUpdate) { 
          isVerifyDialogOpen.value = true
        } else {
          unauthorizedToast()
        }
        break
      case ActionEvents.showValidate:
        if(pagePermission.canUpdate) {        
          isRecordConfirmationOpen.value = true
        } else {
          unauthorizedToast()
        }
        break
      case ActionEvents.showPrint:
        isDocPreviewDialogOpen.value = true
        break
    }
})
// #endregion
</script>

<template>
  <Header :prep="{ ...headerPrep }" />

  <!-- <AppTherapyProtocolList
    :data="data"
    :pagination-meta="paginationMeta"
    @page-change="handlePageChange"/> -->
  <AppResumeList
    :data="data"
    :pagination-meta="paginationMeta"
    @page-change="handlePageChange"/>

  <Dialog v-model:open="isVerifyDialogOpen" title="Verifikasi">
    <AppResumeVerifyDialog
      ref="verificationInputForm"
      :schema="VerificationSchema" />
    <div class="flex justify-end">
      <Action v-show="isCaptchaValid" :enable-draft="false" @click="handleActionClick" />
    </div>
  </Dialog>

  <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
    <DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
  </Dialog>
  
  <Confirmation
    v-model:open="isRecordConfirmationOpen"
    title="Validasi Data"
    message="Apakah Anda yakin ingin menvalidasi data ini?"
    confirm-text="Validasi"
    @confirm="handleConfirmDelete"
    @cancel="handleCancelConfirmation"
  />
</template>