munawwirul_jamal/simrsx-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

⚡ enhance (pub): adjust data-table toggleSelection

Browse Source
This commit is contained in:
Abizrh
2025-10-30 20:45:46 +07:00
parent 831749a55e
commit 608a0ce6c1
1 changed files with 59 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/pub/my-ui/data-table/data-table.vue
+59 -25
View File
@@ -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>