simrsx-fe/app/components/content/therapy-protocol/history-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 { 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 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'
// #endregion

// Props
interface Props {
}
const props = defineProps<Props>()
// #endregion

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

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 summaryLoading = ref(false)

const recId = ref<number>(0)
const recAction = ref<string>('')
const recItem = ref<any>(null)
// #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 handleConfirmAdd() {
  isVerifyDialogOpen.value = true
}

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
  }
}
// #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.showDetail:
      navigateTo({
        name: 'therapy-protocol-id-detail',
        params: { id: recId.value },
      })
      break

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

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

    case ActionEvents.showPrint:
      navigateTo('https://google.com', {
        external: true,
        open: { target: "_blank" },
      });
      break
  }
})
// #endregion
</script>

<template>

  <Popover>
      <PopoverTrigger as-child>
        <Button variant="outline" :class="cn('mb-3 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>

    <AppTherapyProtocolHistoryDialog
      :data="data"
      :pagination-meta="paginationMeta"
      @page-change="handlePageChange" />
</template>