Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feeat/pendaftaran-kemoterapi-141

2025-11-13 10:14:17 +07:00
parent a592a0be36 02508b22de
commit bb8df3d53a
244 changed files with 14473 additions and 2258 deletions
@@ -16,22 +16,23 @@ const props = defineProps<{

 const emit = defineEmits<{
  'update:modelValue': [value: string]
+  'update:searchText': [value: string]
 }>()

 const open = ref(false)
-
+const searchText = ref('')
+const debouncedSearchText = refDebounced(searchText, 500) // 500ms debounce
 const selectedItem = computed(() => props.items.find((item) => item.value === props.modelValue))

 const displayText = computed(() => {
-  console.log(selectedItem)
  if (selectedItem.value?.label) {
    return selectedItem.value.label
  }
  return props.placeholder || 'Pilih item'
 })

-watch(props, () => {
-  console.log(props.modelValue)
+watch(debouncedSearchText, (newValue) => {
+  emit('update:searchText', newValue)
 })

 const searchableItems = computed(() => {
@@ -106,6 +107,11 @@ function onSelect(item: Item) {
          class="h-9 border-0 border-b border-gray-200 bg-white text-black focus:ring-0 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
          :placeholder="searchPlaceholder || 'Cari...'"
          :aria-label="`Cari ${displayText}`"
+          @input="
+            (evt: any) => {
+              searchText = evt?.target?.value || ''
+            }
+          "
        />
        <CommandEmpty class="py-6 text-center text-sm text-gray-500 dark:text-gray-400">
          {{ emptyMessage || 'Item tidak ditemukan.' }}
@@ -12,14 +12,14 @@ const emit = defineEmits<{
 }>()

 function changeTab(value: string) {
-  activeTab.value = value;
-  emit('changeTab', value);
+  activeTab.value = value
+  emit('changeTab', value)
 }
 </script>

 <template>
  <!-- Tabs -->
-  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
    <Button
      v-for="tab in data"
      :key="tab.value"
@@ -34,10 +34,12 @@ function changeTab(value: string) {
  <!-- Active Tab Content -->
  <div class="mt-4 rounded-md border p-4">
    <component
-      v-if="data.find((t) => t.value === activeTab)?.component"
      :is="data.find((t) => t.value === activeTab)?.component"
-      :label="data.find((t) => t.value === activeTab)?.label"
-      v-bind="data.find((t) => t.value === activeTab)?.props || {}"
+      v-bind="data.find((t) => t.value === activeTab)?.props"
    />
+    <!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- :is="data.find((t) => t.value === activeTab)?.component" -->
+    <!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
+    <!-- :label="data.find((t) => t.value === activeTab)?.label" -->
  </div>
-</template>
+</template>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isRef } from 'vue';
+import { isRef } from 'vue'
 import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
 import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
@@ -19,14 +19,21 @@ const loader = inject('table_data_loader') as DataTableLoader
 // local state utk selection
 const selected = ref<any[]>([])

-function toggleSelection(row: any) {
-  if (props.selectMode === 'single') {
+function toggleSelection(row: any, event?: Event) {
+  if (event) event.stopPropagation() // cegah event bubble ke TableRow
+
+  const isMultiple = props.selectMode === 'multi' || props.selectMode === 'multiple'
+
+  // gunakan pembanding berdasarkan id atau stringify data
+  const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
+
+  if (!isMultiple) {
+    // mode single
    selected.value = [row]
    emit('update:modelValue', row)
  } else {
-    const idx = selected.value.findIndex((r) => r === row)
-    if (idx >= 0) {
-      selected.value.splice(idx, 1)
+    if (findIndex >= 0) {
+      selected.value.splice(findIndex, 1)
    } else {
      selected.value.push(row)
    }
@@ -35,23 +42,22 @@ function toggleSelection(row: any) {
 }

 function deepFetch(data: Record<string, any>, key: string): string {
-  let result = '';
+  let result = ''
  const keys = key.split('.')
-  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  let lastVal: any = isRef(data) ? { ...(data.value as any) } : data
  for (let i = 0; i < keys.length; i++) {
    let idx = keys[i] || ''
    if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
      if (i == keys.length - 1) {
-        return lastVal[idx];
+        return lastVal[idx]
      } else {
-        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+        lastVal = isRef(lastVal[idx]) ? { ...(lastVal[idx].value as any) } : lastVal[idx]
      }
    }
  }
-  return result;
+  return result
 }

-
 function handleActionCellClick(event: Event, _cellRef: string) {
  // Prevent event if clicked directly on the button/dropdown
  const target = event.target as HTMLElement
@@ -70,7 +76,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {

 <template>
  <Table>
-    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
+    <TableHeader
+      v-if="headers"
+      class="bg-gray-50 dark:bg-gray-800"
+    >
      <TableRow v-for="(hr, hrIdx) in headers">
        <TableHead
          v-for="(th, idx) in headers[hrIdx]"
@@ -85,15 +94,25 @@ function handleActionCellClick(event: Event, _cellRef: string) {

    <TableBody v-if="loader?.isTableLoading">
      <!-- Loading state with 5 skeleton rows -->
-      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
-          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
+      <TableRow
+        v-for="n in getSkeletonSize"
+        :key="`skeleton-${n}`"
+      >
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-skel-${n}-${cellIndex}`"
+          class="border"
+        >
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground dark:bg-gray-700" />
        </TableCell>
      </TableRow>
    </TableBody>
    <TableBody v-else-if="rows.length === 0">
      <TableRow>
-        <TableCell :colspan="keys.length" class="py-8 text-center">
+        <TableCell
+          :colspan="keys.length"
+          class="py-8 text-center"
+        >
          <div class="flex items-center justify-center">
            <Info class="size-5 text-muted-foreground" />
            <span class="ml-2">Tidak ada data tersedia</span>
@@ -106,8 +125,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
        v-for="(row, rowIndex) in rows"
        :key="`row-${rowIndex}`"
        :class="{
-          'bg-green-50': props.selectMode === 'single' && selected.includes(row),
-          'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
+          'bg-green-50':
+            props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
+          'bg-blue-50':
+            (props.selectMode === 'multi' || props.selectMode === 'multiple') &&
+            selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
        }"
        @click="toggleSelection(row)"
      >
@@ -116,14 +138,23 @@ function handleActionCellClick(event: Event, _cellRef: string) {
          <input
            v-if="props.selectMode === 'single'"
            type="radio"
-            :checked="selected.includes(row)"
-            @change="toggleSelection(row)"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
+          />
+          <input
+            v-else
+            type="checkbox"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
          />
-          <input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
        </TableCell>

        <!-- lanjut render cell normal -->
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-${rowIndex}-${cellIndex}`"
+          class="border"
+        >
          <!-- existing cell renderer -->
          <component
            :is="components?.[key]?.(row, rowIndex).component"
@@ -133,9 +164,12 @@ function handleActionCellClick(event: Event, _cellRef: string) {
            v-bind="components[key]?.(row, rowIndex).props"
          />
          <template v-else>
-            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
+            <div
+              v-if="htmls?.[key]"
+              v-html="htmls?.[key]?.(row, rowIndex)"
+            ></div>
            <template v-else>
-              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch(row as any, key) }}
            </template>
          </template>
        </TableCell>
@@ -2,9 +2,14 @@
 import type { LinkItem, ListItemDto } from './types'
 import { ActionEvents } from './types'

-const props = defineProps<{
+interface Props {
  rec: ListItemDto
-}>()
+  size?: 'default' | 'sm' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'lg',
+})

 const recId = inject<Ref<number>>('rec_id')!
 const recAction = inject<Ref<string>>('rec_action')!
@@ -58,7 +63,7 @@ function del() {
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <SidebarMenuButton
-          size="lg"
+          :size="size"
          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
        >
          <Icon
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed, inject, type Ref } from 'vue'
+// Components
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+const props = defineProps<{
+  rec: { id: string; name: string; menu: string }
+  selected?: string
+}>()
+
+const emit = defineEmits<{
+  // No emits needed - using provide/inject
+}>()
+
+const record = props.rec || {}
+const recId = inject('rec_select_id') as Ref<number>
+const recMenu = inject('rec_select_menu') as Ref<string>
+const selected = computed(() => recId.value === Number(record.id) ? record.id : '')
+
+function handleSelection(value: string) {
+  if (value === record.id) {
+    recId.value = Number(record.id) || 0
+    recMenu.value = record.menu || ''
+  }
+}
+</script>
+
+<template>
+  <RadioGroup
+    :model-value="selected"
+    @update:model-value="handleSelection"
+  >
+    <RadioGroupItem
+      :id="record.id"
+      :value="record.id"
+    />
+  </RadioGroup>
+</template>
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+function onClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button
+      class="bg-gray-400"
+      type="button"
+      @click="onClick"
+    >
+      <Icon
+        name="i-lucide-arrow-left"
+        class="me-2 align-middle"
+      />
+      Back
+    </Button>
+  </div>
+</template>
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'ok'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button type="button" @click="onClick('ok')">
+        <Icon name="i-lucide-x"  />
+        OK
+      </Button>
+    </div>
+  </div>
+</template>
@@ -34,9 +34,18 @@ const df = new DateFormatter('en-US', {
  dateStyle: 'medium',
 })

+// Get current date
+const today = new Date()
+const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())
+
+// Get date 1 month ago
+const oneMonthAgo = new Date(today)
+oneMonthAgo.setMonth(today.getMonth() - 1)
+const oneMonthAgoCalendar = new CalendarDate(oneMonthAgo.getFullYear(), oneMonthAgo.getMonth() + 1, oneMonthAgo.getDate())
+
 const value = ref({
-  start: new CalendarDate(2022, 1, 20),
-  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+  start: oneMonthAgoCalendar,
+  end: todayCalendar,
 }) as Ref<DateRange>

 function onFilterClick() {
@@ -4,6 +4,10 @@ import Pagination from './pagination.vue'

 const props = defineProps<{
  paginationMeta: PaginationMeta
+  conf?: {
+    showInfo: boolean
+    showControl: boolean
+  }
 }>()

 const emit = defineEmits<{
@@ -17,8 +21,10 @@ function handlePageChange(page: number) {

 <template>
  <Pagination
-  v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
-  :pagination-meta="paginationMeta"
-  @page-change="handlePageChange"
+    v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
+    :pagination-meta="paginationMeta"
+    :show-info="conf?.showInfo"
+    :show-control="conf?.showControl"
+    @page-change="handlePageChange"
  />
 </template>
@@ -15,11 +15,13 @@ interface Props {
  paginationMeta: PaginationMeta
  onPageChange?: (page: number) => void
  showInfo?: boolean
+  showControl?: boolean
 }

 const props = withDefaults(defineProps<Props>(), {
  onPageChange: undefined,
  showInfo: true,
+  showControl: true,
 })

 const emit = defineEmits<{
@@ -65,7 +67,7 @@ const formattedRecordCount = computed(() => {
 })

 const startRecord = computed(() => {
-  const start = ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+  const start = (props.paginationMeta.page - 1) * props.paginationMeta.pageSize + 1
  return Number(start).toLocaleString('id-ID')
 })

@@ -77,53 +79,95 @@ const endRecord = computed(() => {
 function getButtonClass(pageNumber: number) {
  const digits = pageNumber.toString().length

-  if (digits >= 4) { // 1000+ (1k+)
+  if (digits >= 4) {
+    // 1000+ (1k+)
    return 'h-9 px-4 min-w-12'
-  } else if (digits === 3) { // 100-999
+  } else if (digits === 3) {
+    // 100-999
    return 'h-9 px-3 min-w-10'
-  } else { // 1-99
+  } else {
+    // 1-99
    return 'w-9 h-9 p-0'
  }
 }
 </script>

 <template>
-  <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
+  <div class="flex w-full min-w-0 items-center justify-between px-2 py-2">
    <!-- Info text -->
-    <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
-      Menampilkan {{ startRecord }}
-      hingga {{ Number(endRecord).toLocaleString('id-ID') }}
-      dari {{ formattedRecordCount }} data
+    <div
+      v-if="showInfo && endRecord > 0"
+      class="shrink-0 text-sm text-muted-foreground"
+    >
+      Menampilkan {{ startRecord }} hingga {{ Number(endRecord).toLocaleString('id-ID') }} dari
+      {{ formattedRecordCount }} data
+    </div>
+    <div
+      v-else
+      class="shrink-0"
+    >
+      -
    </div>
-    <div v-else class="shrink-0">-</div>

    <!-- Spacer untuk memastikan ada ruang di tengah -->
-    <div class="flex-1 min-w-4"></div>
+    <div class="min-w-4 flex-1"></div>

    <!-- Pagination controls -->
-    <div class="shrink-0">
+    <div
+      v-if="showControl"
+      class="shrink-0"
+    >
      <Pagination
-v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
-        :items-per-page="paginationMeta.pageSize" show-edges
->
-        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-          <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
-          <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+        v-slot="{ page }"
+        :total="paginationMeta.recordCount"
+        :sibling-count="1"
+        :page="paginationMeta.page"
+        :items-per-page="paginationMeta.pageSize"
+        show-edges
+      >
+        <PaginationList
+          v-slot="{ items }"
+          class="flex items-center gap-1"
+        >
+          <PaginationFirst
+            :disabled="!paginationMeta.hasPrev"
+            @click="handleFirst"
+          />
+          <PaginationPrev
+            :disabled="!paginationMeta.hasPrev"
+            @click="handlePrev"
+          />

          <template v-for="(item, index) in items">
            <PaginationListItem
-v-if="item.type === 'page'" :key="index" :value="item.value" as-child
+              v-if="item.type === 'page'"
+              :key="index"
+              :value="item.value"
+              as-child
              @click="handlePageChange(item.value)"
->
-              <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
+            >
+              <Button
+                :class="getButtonClass(item.value)"
+                :variant="item.value === page ? 'default' : 'outline'"
+              >
                {{ item.value }}
              </Button>
            </PaginationListItem>
-            <PaginationEllipsis v-else :key="item.type" :index="index" />
+            <PaginationEllipsis
+              v-else
+              :key="item.type"
+              :index="index"
+            />
          </template>

-          <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
-          <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+          <PaginationNext
+            :disabled="!paginationMeta.hasNext"
+            @click="handleNext"
+          />
+          <PaginationLast
+            :disabled="!paginationMeta.hasNext"
+            @click="handleLast"
+          />
        </PaginationList>
      </Pagination>
    </div>