From ccefb69f0c7c5e883be438910184e4cf11e820f2 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 28 Nov 2025 10:36:30 +0700
Subject: [PATCH] adjustment on picker dialog procedure

refactor(procedure-picker): improve component structure and add readonly support

- Reorganize imports and add type imports section
- Replace custom Button with ButtonAction component
- Add readonly state handling for fields and buttons
- Improve type safety with ProcedureSrc type casting

feat(usePaginatedList): add syncToUrl option for nested components

Add syncToUrl option to disable URL synchronization when used in modals or nested components to prevent overriding parent page URL. Default remains true for backward compatibility.

Also includes minor formatting improvements in procedure-list.vue template.
---
 .../arrangement-procedure/procedure-list.vue  | 33 +++++-----
 .../procedure-picker.vue                      | 63 +++++++++----------
 .../app/treatment-report/preview.vue          |  0
 app/composables/usePaginatedList.ts           | 36 ++++++++---
 4 files changed, 77 insertions(+), 55 deletions(-)
 create mode 100644 app/components/app/treatment-report/preview.vue

diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
index e4836c7c..fabb0463 100644
--- a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-list.vue
@@ -45,6 +45,7 @@ const {
   handleSearch,
   fetchData: getItemList,
 } = usePaginatedList({
+  syncToUrl: false,
   fetchFn: async (params: any) => {
     const result = await getList({
       search: params.search,
@@ -102,19 +103,23 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog v-model:open="isModalOpen" title="" size="xl">
-  <Header
-    v-model="searchInput"
-    :prep="headerPrep"
-    :ref-search-nav="headerPrep.refSearchNav"
-    @search="handleSearch"
-    class=""
-  />
-  <AppProcedureSrcList
-    :table-config="config"
-    :data="data"
-    :pagination-meta="paginationMeta"
-    @page-change="handlePageChange"
-  />
+  <Dialog
+    v-model:open="isModalOpen"
+    title=""
+    size="xl"
+  >
+    <Header
+      v-model="searchInput"
+      :prep="headerPrep"
+      :ref-search-nav="headerPrep.refSearchNav"
+      @search="handleSearch"
+      class=""
+    />
+    <AppProcedureSrcList
+      :table-config="config"
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </Dialog>
 </template>
diff --git a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
index e6ba7f2b..ec2aad35 100644
--- a/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
+++ b/app/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue
@@ -1,23 +1,24 @@
 <script setup lang="ts">
-import ProcedureListDialog from './procedure-list.vue'
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
-import { Form } from '~/components/pub/ui/form'
-import { FieldArray } from 'vee-validate'
-import InputBase from '~/components/pub/my-ui/form/input-base.vue'
-import * as DE from '~/components/pub/my-ui/doc-entry'
-import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
 import { cn } from '~/lib/utils'
+
+// types
+import { type ProcedureSrc } from '~/models/procedure-src'
+
+// componenets
+import { FieldArray } from 'vee-validate'
+import { ButtonAction } from '~/components/pub/my-ui/form'
 import TableHeader from '~/components/pub/ui/table/TableHeader.vue'
-import { is } from 'date-fns/locale'
+import ProcedureListDialog from './procedure-list.vue'
 
 interface Props {
   fieldName: string
   title: string
   subTitle?: string
+  isReadonly?: boolean
 }
 const props = defineProps<Props>()
 
+const { isReadonly = false } = props
 const isProcedurePickerDialogOpen = ref<boolean>(false)
 provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
 </script>
@@ -26,19 +27,15 @@ provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
   <div class="">
     <div class="mb-2 flex items-center justify-between">
       <p class="mb-2 font-medium">{{ title }}</p>
-      <Button
-        type="button"
+      <ButtonAction
+        preset="add"
+        title="Tambah Item"
+        icon="i-lucide-search"
+        :disabled="isReadonly"
+        :label="subTitle || 'Pilih Diagnosis'"
+        :full-width-mobile="true"
         @click="isProcedurePickerDialogOpen = true"
-        size="xs"
-        variant="outline"
-        class="border-orange-400 bg-transparent text-orange-400"
-      >
-        <Icon
-          name="i-lucide-search"
-          class="h-4 w-4 align-middle transition-colors"
-        />
-        {{ subTitle || 'Pilih Diagnosis' }}
-      </Button>
+      />
     </div>
 
     <FieldArray
@@ -61,20 +58,20 @@ provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)
               v-for="(field, idx) in fields"
               :key="idx"
             >
-              <TableCell class="">{{ field.value?.name }}</TableCell>
-              <TableCell class="">{{ field.value?.code }}</TableCell>
+              <TableCell :class="cn(isReadonly && 'text-muted-foreground')">
+                {{ (field.value as ProcedureSrc)?.name }}
+              </TableCell>
+              <TableCell :class="cn(isReadonly && 'text-muted-foreground')">
+                {{ (field.value as ProcedureSrc)?.code }}
+              </TableCell>
               <TableCell class="">
-                <Button
-                  type="button"
-                  variant="destructive"
-                  size="sm"
+                <ButtonAction
+                  :disabled="isReadonly"
+                  preset="delete"
+                  :title="`Hapus prosedur '${(field.value as ProcedureSrc)?.name}'`"
+                  icon-only
                   @click="remove(idx)"
-                >
-                  <Icon
-                    name="i-lucide-trash-2"
-                    class="h-4 w-4"
-                  />
-                </Button>
+                />
               </TableCell>
             </TableRow>
           </TableBody>
diff --git a/app/components/app/treatment-report/preview.vue b/app/components/app/treatment-report/preview.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/composables/usePaginatedList.ts b/app/composables/usePaginatedList.ts
index 71dd99b3..ce5dbb40 100644
--- a/app/composables/usePaginatedList.ts
+++ b/app/composables/usePaginatedList.ts
@@ -2,7 +2,6 @@ import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import { refDebounced, useUrlSearchParams } from '@vueuse/core'
 import * as z from 'zod'
-import { is } from "date-fns/locale"
 
 // Default query schema yang bisa digunakan semua list
 export const defaultQuerySchema = z.object({
@@ -38,10 +37,23 @@ interface UsePaginatedListOptions<T = any> {
   }>
   // Nama endpoint untuk logging error
   entityName: string
+  /**
+   * Apakah state harus disinkronkan ke URL Browser?
+   * Set `false` jika digunakan di dalam Modal, Drawer, atau Nested Component
+   * agar tidak menimpa URL halaman induk.
+   * @default true
+   */
+  syncToUrl?: boolean
 }
 
 export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
-  const { querySchema = defaultQuerySchema, defaultQuery = defaultQueryParams, fetchFn, entityName } = options
+  const {
+    querySchema = defaultQuerySchema,
+    defaultQuery = defaultQueryParams,
+    fetchFn,
+    entityName,
+    syncToUrl = true, // Default true agar behavior lama tetap jalan
+  } = options
 
   // State management
   const data = ref<T[]>([])
@@ -49,11 +61,19 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
     isTableLoading: false,
   })
 
-  // URL state management
-  const queryParams = useUrlSearchParams('history', {
-    initialValue: defaultQuery,
-    removeFalsyValues: true,
-  })
+  let queryParams: any
+
+  if (syncToUrl) {
+    // Mode Halaman Utama: Sync ke URL
+    queryParams = useUrlSearchParams('history', {
+      initialValue: defaultQuery,
+      removeFalsyValues: true,
+      write: false,
+    })
+  } else {
+    // Mode Nested/Modal: Local Reactive State
+    queryParams = reactive({ ...defaultQuery })
+  }
 
   const params = computed(() => {
     const result = querySchema.safeParse(queryParams)
@@ -168,7 +188,7 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
   }
 }
 
-export function transform(endpoint: string ,params: any): string {
+export function transform(endpoint: string, params: any): string {
   const urlParams = new URLSearchParams()
 
   Object.entries(params).forEach(([key, value]) => {