simrsx-fe/app/components/content/therapy-protocol/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 { getList, remove } from '~/services/therapy-protocol.service'
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
import type { Encounter } from '~/models/encounter'
import { cn } from '~/lib/utils'
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
import type { DateRange } from 'radix-vue'
import type { ExposedForm } from '~/types/form'
import { VerificationSchema } from '~/schemas/verification.schema'
import { handleActionSave } from '~/handlers/therapy-protocol.handler'
import { toast } from '~/components/pub/ui/toast'
import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
// #endregion

// Props
interface Props {
  encounter: Encounter
}
const props = defineProps<Props>()
const route = useRoute()
const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
// #endregion

// #region State
const isVerifyDialogOpen = ref(false)
const isHistoryDialogOpen = ref(false)
const isPatientInTherapy = ref(false)
const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
  fetchFn: (params) => getList({ ...params }),
  entityName: 'therapy-protocol',
})

const df = new DateFormatter('en-US', {
  dateStyle: 'medium',
})

const dateValue = ref({
  start: new CalendarDate(2022, 1, 20),
  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
}) as Ref<DateRange>

const isRecordConfirmationOpen = ref(false)
const isDocPreviewDialogOpen = ref(false)
const summaryLoading = ref(false)

const inputForm = ref<ExposedForm<any> | null>(null)
const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
const timestamp = ref<number>(0)

const isCaptchaValid = ref(false)
provide('isCaptchaValid', isCaptchaValid)

const headerPrep: HeaderPrep = {
  title: "Protokol Terapi",
  icon: 'i-lucide-newspaper',
  addNav: {
    label: "Protokol Terapi",
    onClick: () => navigateTo({
      name: 'rehab-encounter-id-therapy-protocol-add',
    }),
  },
}
// #endregion

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

  const isInTherapy = false // TODO: determine if patient is in therapy
  handleIsPatientInTherapy(isInTherapy)
})
// #endregion

// #region Functions
function handleIsPatientInTherapy(value: boolean) {
  if (value) {
    isPatientInTherapy.value = true
  } else {
    isPatientInTherapy.value = false
  }
}
async function handleOpenHistory() {
  isHistoryDialogOpen.value = true
  console.log(`jalan history`)
}
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 handleVerify() {
  isVerifyDialogOpen.value = true
}

async function handleConfirmVerify() {
  const inputData: any = await composeFormData()
  const response = await handleActionSave(
    inputData,
    () => { },
    () => { },
    toast,
  )

  const data = (response?.body?.data ?? null)
  if (!data) return
  isVerifyDialogOpen.value = false
}

async function composeFormData(): Promise<any> {
  const [input,] = await Promise.all([
    inputForm.value?.validate(),
  ])

  const results = [input]
  const allValid = results.every((r) => r?.valid)

  // exit, if form errors happend during validation
  if (!allValid) return Promise.reject('Form validation failed')

  const formData = input?.values
  // formData.encounter_id = encounterId

  return new Promise((resolve) => resolve(formData))
}
// #endregion region

// #region Utilities & event handlers
async function handleActionClick(eventType: string) {
  if (eventType === 'submit') {
    handleConfirmVerify()
  }

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

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

// #region Watchers
watch([recId, recAction, timestamp], () => {
  switch (recAction.value) {
    case ActionEvents.showDetail:
      navigateTo({
        name: 'therapy-protocol-id-detail',
        params: { id: recId.value },
      })
      break

    case ActionEvents.showEdit:
      navigateTo({
        name: 'rehab-encounter-id-therapy-protocol-therapy_protocol_id-edit',
        params: { therapy_protocol_id: recId.value },
      })
      break

    case ActionEvents.showConfirmVerify:
      // Trigger confirmation modal open
      handleVerify()
      break

    case ActionEvents.showPrint:
      isDocPreviewDialogOpen.value = true
      break
  }
})
// #endregion
</script>

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

  <section class="mb-5 flex justify-between items-center">
    <!-- DATE RANGE -->
    <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" :class="cn('w-[280px] justify-start text-left font-normal',
          !dateValue && 'text-muted-foreground')">
          <CalendarIcon class="mr-2 h-4 w-4" />
          <template v-if="dateValue.start">
            <template v-if="dateValue.end">
              {{ df.format(dateValue.start.toDate(getLocalTimeZone())) }} -
              {{ df.format(dateValue.end.toDate(getLocalTimeZone())) }}
            </template>

            <template v-else>
              {{ df.format(dateValue.start.toDate(getLocalTimeZone())) }}
            </template>
          </template>
          <template v-else> Pick a date </template>
        </Button>
      </PopoverTrigger>
      <PopoverContent class="w-auto p-0">
        <RangeCalendar v-model="dateValue" initial-focus :number-of-months="2"
          @update:start-value="(startDate) => (dateValue.start = startDate)" />
      </PopoverContent>
    </Popover>

    <!-- HISTORY -->
    <Button variant="outline" :class="cn('',)" @click="handleOpenHistory">
          <Icon name="i-lucide-history" class="h-4 w-4" />
          History
    </Button>
  </section>

  <AppTherapyProtocolCommonBannerPatientInTherapy 
    v-if="isPatientInTherapy"
    class="mb-5" />
    
  <AppTherapyProtocolList
    :data="data"
    :pagination-meta="paginationMeta"
    @page-change="handlePageChange"/>

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

  <Dialog v-model:open="isHistoryDialogOpen" title="History" size="full">
    <ContentTherapyProtocolHistoryList />
  </Dialog>

  <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
    <!-- <DocPreviewDialog :link="recItem.url" /> -->
    <DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
  </Dialog>
</template>