@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/tables/DashboardDataTable.vue

@@ -1,707 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, computed } from "vue";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "../../components/ui/table";
-import { Skeleton } from "../../components/ui/skeleton";
-import LoadingIndicator from "../../components/loadings/LoadingIndicator.vue";
-import {
-	LucideArrowDownWideNarrow,
-	LucideArrowUpDown,
-	LucideArrowUpNarrowWide,
-	LucideDatabase,
-	LucideOctagonAlert,
-} from "lucide-vue-next";
-import BtnPrimary from "../../components/button/BtnPrimary.vue";
-import { cn } from "../../lib/utils";
-import { useRoute } from "vue-router";
-import type { ColumnRef } from "../../vueform/config/types";
-
-export interface DashboardColumnRef
-	extends Omit<ColumnRef, "cellRender" | "textAlign"> {
-	sticky?: boolean; // New property to mark columns as sticky
-	textAlign?: "right" | "left" | "center";
-	cellRender?: (index: number, row: any) => string;
-	parentHeader?: string; // Parent header for grouped columns
-}
-
-interface Props {
-	data: any[];
-	columns: DashboardColumnRef[];
-	loading?: boolean;
-	loadingType?: "skeleton" | "loader";
-	error?: string | null;
-	showCheckboxItem?: boolean;
-	stickyOffset?: number; // Offset for sticky positioning
-	groupBy?: string; // New: key to group by (e.g., 'pltu')
-}
-
-const route = useRoute();
-const props = withDefaults(defineProps<Props>(), {
-	loading: false,
-	loadingType: "loader",
-	error: null,
-	showCheckboxItem: false,
-	stickyOffset: 0,
-});
-
-const emits = defineEmits(["getData", "openDetail", "editItem", "rowClick"]);
-const selectedId = defineModel("selectedId");
-const sortBy = defineModel<any>("sortBy");
-
-// Compute sticky and scrollable columns
-const stickyColumns = computed<DashboardColumnRef[]>(() =>
-	props.columns.filter((col) => col.visible && col.sticky)
-);
-
-const scrollableColumns = computed<DashboardColumnRef[]>(() =>
-	props.columns.filter((col) => col.visible && !col.sticky)
-);
-
-// Group scrollable columns by parent header
-const groupedScrollableColumns = computed(() => {
-	const groups: { [key: string]: DashboardColumnRef[] } = {};
-	const ungrouped: DashboardColumnRef[] = [];
-
-	scrollableColumns.value.forEach((col) => {
-		if (col.parentHeader) {
-			if (!groups[col.parentHeader]) {
-				groups[col.parentHeader] = [];
-			}
-			groups[col.parentHeader].push(col);
-		} else {
-			ungrouped.push(col);
-		}
-	});
-
-	return { groups, ungrouped };
-});
-
-// Calculate sticky positioning for each sticky column
-const getStickyLeft = (index: number) => {
-	let offset = props.stickyOffset;
-	for (let i = 0; i < index; i++) {
-		offset += stickyColumns.value[i].size || 150; // Default width 150px
-	}
-	return `${offset}px`;
-};
-
-function setSortBy(key?: string) {
-	if (!key) return;
-	if (sortBy.value && sortBy.value.key === key) {
-		const by = sortBy.value.by === "asc" ? "desc" : "asc";
-		sortBy.value = { key, by };
-	} else {
-		sortBy.value = { key, by: "asc" };
-	}
-}
-
-function handleRowClick(row: any, index: number) {
-	selectedId.value = row.id;
-	emits("rowClick", row, index);
-}
-
-/**
- * Handle edit from query parameter
- */
-function handleEditQueryParam() {
-	const editId = route.query.edit;
-	if (editId && props.data.length > 0) {
-		const itemToEdit = props.data.find(
-			(item: any) =>
-				item.id === editId ||
-				(typeof item.id === "object" && item.id.toString() === editId)
-		);
-
-		if (itemToEdit) {
-			const itemIndex = props.data.findIndex(
-				(item: any) =>
-					item.id === editId ||
-					(typeof item.id === "object" && item.id.toString() === editId)
-			);
-
-			if (itemIndex !== -1) {
-				emits("editItem", itemIndex, itemToEdit);
-				selectedId.value = itemToEdit.id;
-			}
-		}
-	}
-}
-
-watch(
-	() => props.data,
-	() => {
-		if (route.query.edit && props.data.length > 0) {
-			handleEditQueryParam();
-		}
-	},
-	{ deep: true }
-);
-
-onMounted(() => {
-	if (route.query.edit) {
-		if (props.data.length > 0) {
-			handleEditQueryParam();
-		}
-	}
-});
-</script>
-
-<template>
-	<div class="relative">
-		<div class="overflow-x-auto">
-			<Table
-				class="bg-white border-y dark:bg-slate-800 dark:border-y-slate-700 relative"
-			>
-				<TableHeader>
-					<!-- First Header Row: Parent Headers -->
-					<TableRow class="dark:border-slate-700">
-						<!-- Sticky Headers (span both rows) -->
-						<TableHead
-							v-for="(cell, index) in stickyColumns"
-							:key="`sticky-parent-${cell.key}`"
-							:rowspan="2"
-							:class="
-								cn(
-									'bg-slate-100 pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 dark:bg-slate-900 text-[13px] 2xl:text-sm sticky z-10',
-									cell.headerClass
-								)
-							"
-							:style="{
-								width: cell.size ? `${cell.size}px` : '150px',
-								left: getStickyLeft(index),
-								minWidth: cell.size ? `${cell.size}px` : '150px',
-							}"
-						>
-							<div
-								class="flex items-center rounded-md px-2 py-1.5 -my-1.5 -mx-2"
-								:class="{
-									'transition hover:bg-slate-200 cursor-pointer': cell.sortKey,
-									'justify-end': cell.textAlign === 'right',
-									'justify-center': cell.textAlign === 'center',
-								}"
-								v-on:click="setSortBy(cell.sortKey)"
-							>
-								{{ cell.header }}
-								<div class="ml-2 flex-none" v-if="cell.sortKey">
-									<LucideArrowDownWideNarrow
-										:size="18"
-										v-if="
-											sortBy &&
-											sortBy.key === cell.sortKey &&
-											sortBy.by === 'desc'
-										"
-									/>
-									<LucideArrowUpNarrowWide
-										:size="18"
-										v-else-if="
-											sortBy &&
-											sortBy.key === cell.sortKey &&
-											sortBy.by === 'asc'
-										"
-									/>
-									<LucideArrowUpDown :size="18" class="opacity-40" v-else />
-								</div>
-							</div>
-						</TableHead>
-
-						<!-- Parent Headers for Grouped Columns -->
-						<TableHead
-							v-for="(parentName, groupKey) in groupedScrollableColumns.groups"
-							:key="`parent-${groupKey}`"
-							:colspan="parentName.length"
-							:class="
-								cn(
-									'bg-slate-200 text-center text-[13px] 2xl:text-sm font-semibold border-b border-r-2 border-slate-300 dark:bg-slate-800 dark:border-slate-600'
-								)
-							"
-						>
-							{{ groupKey }}
-						</TableHead>
-
-						<!-- Ungrouped Headers (span both rows) -->
-						<TableHead
-							v-for="cell in groupedScrollableColumns.ungrouped"
-							:key="`ungrouped-parent-${cell.key}`"
-							:rowspan="2"
-							:class="
-								cn(
-									'bg-slate-100 pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 dark:bg-slate-900 text-[13px] 2xl:text-sm',
-									cell.headerClass
-								)
-							"
-							:style="{
-								width: cell.size ? `${cell.size}px` : 'auto',
-								minWidth: cell.size ? `${cell.size}px` : '100px',
-							}"
-						>
-							<div
-								class="flex items-center rounded-md px-2 py-1.5 -my-1.5 -mx-2"
-								:class="{
-									'transition hover:bg-slate-200 cursor-pointer': cell.sortKey,
-									'justify-end': cell.textAlign === 'right',
-									'justify-center': cell.textAlign === 'center',
-								}"
-								v-on:click="setSortBy(cell.sortKey)"
-							>
-								{{ cell.header }}
-								<div class="ml-2 flex-none" v-if="cell.sortKey">
-									<LucideArrowDownWideNarrow
-										:size="18"
-										v-if="
-											sortBy &&
-											sortBy.key === cell.sortKey &&
-											sortBy.by === 'desc'
-										"
-									/>
-									<LucideArrowUpNarrowWide
-										:size="18"
-										v-else-if="
-											sortBy &&
-											sortBy.key === cell.sortKey &&
-											sortBy.by === 'asc'
-										"
-									/>
-									<LucideArrowUpDown :size="18" class="opacity-40" v-else />
-								</div>
-							</div>
-						</TableHead>
-					</TableRow>
-
-					<!-- Second Header Row: Child Headers -->
-					<TableRow class="dark:border-slate-700">
-						<!-- Child Headers for Grouped Columns -->
-						<template
-							v-for="(parentName, groupKey) in groupedScrollableColumns.groups"
-							:key="`group-${groupKey}`"
-						>
-							<TableHead
-								v-for="(cell, cellIndex) in parentName"
-								:key="`child-${cell.key}`"
-								:class="
-									cn(
-										'bg-slate-100 pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 dark:bg-slate-900 text-[13px] 2xl:text-sm',
-										cell.headerClass,
-										{
-											'border-r-2 border-r-slate-300':
-												cellIndex === parentName.length - 1,
-										}
-									)
-								"
-								:style="{
-									width: cell.size ? `${cell.size}px` : 'auto',
-									minWidth: cell.size ? `${cell.size}px` : '100px',
-								}"
-							>
-								<div
-									class="flex items-center rounded-md px-2 py-1.5 -my-1.5 -mx-2"
-									:class="{
-										'transition hover:bg-slate-200 cursor-pointer':
-											cell.sortKey,
-										'justify-end': cell.textAlign === 'right',
-										'justify-center': cell.textAlign === 'center',
-									}"
-									v-on:click="setSortBy(cell.sortKey)"
-								>
-									{{ cell.header }}
-									<div class="ml-2 flex-none" v-if="cell.sortKey">
-										<LucideArrowDownWideNarrow
-											:size="18"
-											v-if="
-												sortBy &&
-												sortBy.key === cell.sortKey &&
-												sortBy.by === 'desc'
-											"
-										/>
-										<LucideArrowUpNarrowWide
-											:size="18"
-											v-else-if="
-												sortBy &&
-												sortBy.key === cell.sortKey &&
-												sortBy.by === 'asc'
-											"
-										/>
-										<LucideArrowUpDown :size="18" class="opacity-40" v-else />
-									</div>
-								</div>
-							</TableHead>
-						</template>
-					</TableRow>
-				</TableHeader>
-
-				<TableBody v-if="error">
-					<TableRow>
-						<TableCell
-							:colspan="stickyColumns.length + scrollableColumns.length"
-							class="bg-red-50"
-						>
-							<div
-								class="min-h-[400px] h-[60vh] flex items-center justify-center"
-							>
-								<div class="text-center w-full text-red-500">
-									<LucideOctagonAlert
-										:size="40"
-										:stroke-width="1.5"
-										class="mx-auto mb-3"
-									/>
-									<div class="font-bold text-lg">Loading Data Error</div>
-									<div class="text-sm mb-4">{{ error }}</div>
-									<BtnPrimary
-										class="py-0 h-9 rounded-full"
-										v-on:click="emits('getData')"
-										>Coba Lagi</BtnPrimary
-									>
-								</div>
-							</div>
-						</TableCell>
-					</TableRow>
-				</TableBody>
-
-				<TableBody v-else-if="props.loading">
-					<template v-if="props.loadingType === 'skeleton'">
-						<TableRow
-							v-for="i in 25"
-							:key="i"
-							class="border-slate-100 dark:border-slate-700"
-						>
-							<TableCell
-								:colspan="stickyColumns.length + scrollableColumns.length"
-								class="px-4 2xl:px-6 py-3 bg-white dark:bg-slate-800"
-							>
-								<div class="flex gap-2">
-									<Skeleton class="h-6 w-6 rounded-s"></Skeleton>
-									<Skeleton class="h-6 rounded-s w-full"></Skeleton>
-								</div>
-							</TableCell>
-						</TableRow>
-					</template>
-					<TableRow v-else>
-						<TableCell
-							:colspan="stickyColumns.length + scrollableColumns.length"
-							class="bg-slate-50 dark:bg-slate-900"
-						>
-							<div
-								class="min-h-[400px] h-[60vh] flex items-center justify-center"
-							>
-								<div class="text-center">
-									<LoadingIndicator
-										class="mx-auto mb-4"
-									></LoadingIndicator>
-									<p class="text-sm text-gray-500">Memuat data...</p>
-								</div>
-							</div>
-						</TableCell>
-					</TableRow>
-				</TableBody>
-
-				<!-- Grouped Table Body -->
-				<TableBody v-else-if="props.groupBy && data.length">
-					<template
-						v-for="(group, groupIdx) in data"
-						:key="group[props.groupBy]"
-					>
-						<!-- Parent Row -->
-						<TableRow class="bg-blue-50 font-bold sticky top-0 z-10">
-							<TableCell
-								:colspan="stickyColumns.length + scrollableColumns.length"
-							>
-								<div class="flex items-center gap-4">
-									<span class="text-blue-700">{{ group[props.groupBy] }}</span>
-									<span v-if="group.kapasitas" class="text-xs text-gray-500">{{
-										group.kapasitas
-									}}</span>
-								</div>
-							</TableCell>
-						</TableRow>
-						<!-- Child Rows -->
-						<TableRow
-							v-for="(row, i) in group.children"
-							:key="row.id || i"
-							class="border-gray-100 dark:border-slate-700 hover:bg-gray-50 transition-colors cursor-pointer"
-							:class="{ '!bg-blue-100': selectedId === row.id }"
-							v-on:click.stop="handleRowClick(row, i)"
-						>
-							<!-- Sticky Cells -->
-							<TableCell
-								v-for="(cell, index) in stickyColumns"
-								:key="`sticky-cell-${cell.key}`"
-								:class="
-									cn(
-										'pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 align-top text-[13px] 2xl:text-sm bg-white sticky z-5 border-r border-gray-200',
-										{ 'font-semibold': cell.bold }
-									)
-								"
-								:style="{
-									width: cell.size ? `${cell.size}px` : '150px',
-									left: getStickyLeft(index),
-									minWidth: cell.size ? `${cell.size}px` : '150px',
-								}"
-							>
-								<div
-									v-if="cell.cellRender"
-									v-html="cell.cellRender(i, row)"
-									:class="{
-										'text-right': cell.textAlign === 'right',
-										'text-center': cell.textAlign === 'center',
-									}"
-								></div>
-								<div
-									v-else
-									:class="{
-										'text-right': cell.textAlign === 'right',
-										'text-center': cell.textAlign === 'center',
-									}"
-								>
-									{{ row[cell.key] }}
-								</div>
-							</TableCell>
-							<!-- Scrollable Cells -->
-							<TableCell
-								v-for="(cell, cellIndex) in scrollableColumns"
-								:key="`scroll-cell-${cell.key}`"
-								:class="
-									cn(
-										'pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 align-top text-[13px] 2xl:text-sm',
-										{ 'font-semibold': cell.bold },
-										{
-											'border-r-2 border-r-slate-200':
-												cell.parentHeader &&
-												cellIndex < scrollableColumns.length - 1 &&
-												cell.parentHeader !==
-													scrollableColumns[cellIndex + 1].parentHeader,
-										}
-									)
-								"
-								:style="{
-									width: cell.size ? `${cell.size}px` : 'auto',
-									minWidth: cell.size ? `${cell.size}px` : '100px',
-								}"
-							>
-								<div
-									v-if="cell.cellRender"
-									v-html="cell.cellRender(i, row)"
-									:class="{
-										'text-right': cell.textAlign === 'right',
-										'text-center': cell.textAlign === 'center',
-									}"
-								></div>
-								<div
-									v-else
-									:class="{
-										'text-right': cell.textAlign === 'right',
-										'text-center': cell.textAlign === 'center',
-									}"
-								>
-									{{ row[cell.key] }}
-								</div>
-							</TableCell>
-						</TableRow>
-						<!-- Subtotal Row -->
-						<TableRow class="bg-gray-100 font-bold">
-							<TableCell
-								:colspan="stickyColumns.length + scrollableColumns.length - 2"
-								class="text-right text-gray-700"
-								>Sub Total</TableCell
-							>
-							<TableCell class="text-center text-blue-700">{{
-								group.subtotal?.rencana?.toLocaleString() || "-"
-							}}</TableCell>
-							<TableCell class="text-center text-blue-700">{{
-								group.subtotal?.realisasi?.toLocaleString() || "-"
-							}}</TableCell>
-						</TableRow>
-					</template>
-				</TableBody>
-
-				<!-- Flat Table Body (default) -->
-				<TableBody v-else-if="data.length">
-					<TableRow
-						v-for="(row, i) in data"
-						:key="i"
-						class="border-gray-100 dark:border-slate-700 hover:bg-gray-50 transition-colors cursor-pointer"
-						:class="{ '!bg-blue-100': selectedId === row.id }"
-						v-on:click.stop="handleRowClick(row, i)"
-					>
-						<!-- Sticky Cells -->
-						<TableCell
-							v-for="(cell, index) in stickyColumns"
-							:key="`sticky-cell-${cell.key}`"
-							:class="
-								cn(
-									'pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 align-top text-[13px] 2xl:text-sm bg-white sticky z-5 border-r border-gray-200',
-									{ 'font-semibold': cell.bold }
-								)
-							"
-							:style="{
-								width: cell.size ? `${cell.size}px` : '150px',
-								left: getStickyLeft(index),
-								minWidth: cell.size ? `${cell.size}px` : '150px',
-							}"
-						>
-							<div
-								v-if="cell.cellRender"
-								v-html="cell.cellRender(i, row)"
-								:class="{
-									'text-right': cell.textAlign === 'right',
-									'text-center': cell.textAlign === 'center',
-								}"
-							></div>
-							<div
-								v-else
-								:class="{
-									'text-right': cell.textAlign === 'right',
-									'text-center': cell.textAlign === 'center',
-								}"
-							>
-								{{ row[cell.key] }}
-							</div>
-						</TableCell>
-
-						<!-- Scrollable Cells -->
-						<TableCell
-							v-for="(cell, cellIndex) in scrollableColumns"
-							:key="`scroll-cell-${cell.key}`"
-							:class="
-								cn(
-									'pl-4 2xl:pl-6 pr-2.5 2xl:pr-3.5 align-top text-[13px] 2xl:text-sm',
-									{ 'font-semibold': cell.bold },
-									{
-										'border-r-2 border-r-slate-200':
-											cell.parentHeader &&
-											cellIndex < scrollableColumns.length - 1 &&
-											cell.parentHeader !==
-												scrollableColumns[cellIndex + 1].parentHeader,
-									}
-								)
-							"
-							:style="{
-								width: cell.size ? `${cell.size}px` : 'auto',
-								minWidth: cell.size ? `${cell.size}px` : '100px',
-							}"
-						>
-							<div
-								v-if="cell.cellRender"
-								v-html="cell.cellRender(i, row)"
-								:class="{
-									'text-right': cell.textAlign === 'right',
-									'text-center': cell.textAlign === 'center',
-								}"
-							></div>
-							<div
-								v-else
-								:class="{
-									'text-right': cell.textAlign === 'right',
-									'text-center': cell.textAlign === 'center',
-								}"
-							>
-								{{ row[cell.key] }}
-							</div>
-						</TableCell>
-					</TableRow>
-				</TableBody>
-
-				<TableBody v-else>
-					<TableRow>
-						<TableCell
-							:colspan="stickyColumns.length + scrollableColumns.length"
-							class="bg-slate-50"
-						>
-							<div
-								class="min-h-[400px] h-[60vh] flex items-center justify-center"
-							>
-								<div class="text-center w-full">
-									<LucideDatabase
-										:stroke-width="1.5"
-										class="mx-auto mb-3 text-gray-500 size-[34px] 2xl:size-[40px]"
-									/>
-									<div class="font-semibold 2xl:text-lg">Tidak Ada Data</div>
-									<div class="text-gray-500 text-xs 2xl:text-sm">
-										Maaf! Data Anda belum tersedia
-									</div>
-								</div>
-							</div>
-						</TableCell>
-					</TableRow>
-				</TableBody>
-			</Table>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-/* Ensure sticky columns have proper shadows and z-index hierarchy */
-.sticky {
-	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-}
-
-/* Ensure table sticky elements respect leftbar z-index */
-.sticky.z-10 {
-	z-index: 10;
-}
-
-.sticky.z-5 {
-	z-index: 5;
-}
-
-/* Custom scrollbar */
-.overflow-x-auto::-webkit-scrollbar {
-	height: 8px;
-}
-
-.overflow-x-auto::-webkit-scrollbar-track {
-	background: #f1f5f9;
-}
-
-.overflow-x-auto::-webkit-scrollbar-thumb {
-	background: #cbd5e1;
-	border-radius: 4px;
-}
-
-.overflow-x-auto::-webkit-scrollbar-thumb:hover {
-	background: #94a3b8;
-}
-
-/* Hover effect for sticky cells */
-tr:hover .sticky {
-	background-color: #f9fafb;
-}
-
-/* Selected row styling for sticky cells */
-tr.bg-blue-100 .sticky {
-	background-color: #dbeafe !important;
-}
-
-/* Enhanced styling for grouped headers */
-.bg-slate-200 {
-	background-color: #e2e8f0;
-	border-bottom: 2px solid #cbd5e1;
-}
-
-/* Ensure proper border styling for grouped columns */
-thead th {
-	border-bottom: 1px solid #e2e8f0;
-}
-
-thead tr:first-child th {
-	border-bottom: 1px solid #cbd5e1;
-}
-
-/* Dark mode adjustments for grouped headers */
-.dark .bg-slate-200 {
-	background-color: #475569;
-	border-bottom-color: #64748b;
-}
-
-.dark thead th {
-	border-bottom-color: #475569;
-}
-
-.dark thead tr:first-child th {
-	border-bottom-color: #64748b;
-}
-</style>