feat: Implement encounter list management with search, date range filtering, and record actions.

app/components/content/encounter/list.vue

@@ -13,7 +13,11 @@ import { useSidebar } from '~/components/pub/ui/sidebar/utils'
 import { getServicePosition } from '~/lib/roles' // previously getPositionAs
 
 // Services
-import { getList as getEncounterList, remove as removeEncounter, cancel as cancelEncounter } from '~/services/encounter.service'
+import {
+  getList as getEncounterList,
+  remove as removeEncounter,
+  cancel as cancelEncounter,
+} from '~/services/encounter.service'
 
 // Apps
 import Content from '~/components/app/encounter/list.vue'
@@ -40,6 +44,7 @@ const { getActiveRole } = useUserStore()
 // Main data
 const data = ref([])
 const dataFiltered = ref([])
+const filterParams = ref<any>({})
 const activeServicePosition = ref(getServicePosition(getActiveRole()))
 const isLoading = reactive<DataTableLoader>({
   summary: false,
@@ -99,27 +104,30 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-watch(getActiveRole, (role? : string) => {
+watch(getActiveRole, (role?: string) => {
   activeServicePosition.value = getServicePosition(role)
 })
 
-watch(() => recAction.value, () => {
-  const basePath = `/${props.classCode}/encounter`
-  if (recAction.value === ActionEvents.showConfirmDelete) {
-    isRecordConfirmationOpen.value = true
-  } else if (recAction.value === ActionEvents.showCancel) {
-    isRecordCancelOpen.value = true
-  } else if (recAction.value === ActionEvents.showDetail) {
-    navigateTo(`${basePath}/${recId.value}/detail`)
-  } else if (recAction.value === ActionEvents.showEdit) {
-    navigateTo(`${basePath}/${recId.value}/edit`)
-  } else if (recAction.value === ActionEvents.showProcess) {
-    navigateTo(`${basePath}/${recId.value}/process`)
-  } else if (recAction.value === ActionEvents.showConfirmDelete) {
-    isRecordConfirmationOpen.value = true
-  }
-  recAction.value = '' // reset
-})
+watch(
+  () => recAction.value,
+  () => {
+    const basePath = `/${props.classCode}/encounter`
+    if (recAction.value === ActionEvents.showConfirmDelete) {
+      isRecordConfirmationOpen.value = true
+    } else if (recAction.value === ActionEvents.showCancel) {
+      isRecordCancelOpen.value = true
+    } else if (recAction.value === ActionEvents.showDetail) {
+      navigateTo(`${basePath}/${recId.value}/detail`)
+    } else if (recAction.value === ActionEvents.showEdit) {
+      navigateTo(`${basePath}/${recId.value}/edit`)
+    } else if (recAction.value === ActionEvents.showProcess) {
+      navigateTo(`${basePath}/${recId.value}/process`)
+    } else if (recAction.value === ActionEvents.showConfirmDelete) {
+      isRecordConfirmationOpen.value = true
+    }
+    recAction.value = '' // reset
+  },
+)
 
 onMounted(() => {
   getPatientList()
@@ -128,13 +136,16 @@ onMounted(() => {
 /////// Functions
 async function getPatientList() {
   isLoading.isTableLoading = true
+  const includesParams =
+    'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,Responsible_Doctor,Responsible_Doctor-employee,Responsible_Doctor-employee-person'
+  data.value = []
   try {
-    const params: any = { includes: 'patient,patient-person' }
+    const params: any = { includes: includesParams, ...filterParams.value }
     if (props.classCode) {
-      params['class-code'] = props.classCode
+      params.class_code = props.classCode
     }
     if (props.subClassCode) {
-      params['sub-class-code'] = props.subClassCode
+      params.sub_class_code = props.subClassCode
     }
     const result = await getEncounterList(params)
     if (result.success) {
@@ -148,6 +159,15 @@ async function getPatientList() {
   }
 }
 
+function handleFilterApply(filters: { personName: string; startDate: string; endDate: string }) {
+  filterParams.value = {
+    'person-name': filters.personName,
+    'start-date': filters.startDate,
+    'end-date': filters.endDate,
+  }
+  getPatientList()
+}
+
 // Handle confirmation result
 async function handleConfirmCancel(record: any, action: string) {
   if (action === 'deactivate' && record?.id) {
@@ -243,7 +263,7 @@ function handleRemoveConfirmation() {
   <CH.ContentHeader v-bind="hreaderPrep">
     <FilterNav
       :active-positon="activeServicePosition"
-      @onFilterClick="() => isFilterFormDialogOpen = true"
+      @apply="handleFilterApply"
       @onExportPdf="() => {}"
       @onExportExcel="() => {}"
       @nExportCsv="() => {}"
@@ -259,7 +279,7 @@ function handleRemoveConfirmation() {
     size="lg"
     prevent-outside
   >
-    <FilterForm v-bind="filter"  />
+    <FilterForm v-bind="filter" />
   </Dialog>
 
   <!-- Batal -->