// resources/js/Pages/Admin/DynamicTables/Insert.tsx import Pagination from '@/components/Pagination'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import { Head, Link, router, usePage } from '@inertiajs/react'; import { ArrowLeft, Check, Edit2, Plus, Trash2, X } from 'lucide-react'; import { useState } from 'react'; interface Column { name: string; type: 'text' | 'number' | 'date' | 'select' | 'textarea' | 'group'; required: boolean; options?: string; subColumns?: Column[]; } interface TableData { id: number; name: string; columns: Column[]; has_column_total?: boolean; has_row_total?: boolean; has_row_number?: boolean; } interface DataRow { id: number; data: Record; created_at: string; } interface PaginationLink { url: string | null; label: string; active: boolean; } interface InsertPageProps { auth: { user: { id: number; name: string; email: string; }; }; table: TableData; tableData: { data: DataRow[]; links?: PaginationLink[]; current_page?: number; last_page?: number; per_page?: number; total?: number; from?: number; to?: number; }; errors?: Record; flash?: { success?: string; error?: string; }; [key: string]: unknown; } export default function Insert() { let pageProps: InsertPageProps; try { pageProps = usePage().props; } catch (error) { console.error('Error getting page props:', error); return (

Error Loading Page

Please check the console for details.

); } const { auth, table, tableData, errors, flash } = pageProps; const [editingRowId, setEditingRowId] = useState(null); const [editingData, setEditingData] = useState>({}); if (!auth || !auth.user) { return (

Authentication Error

User authentication data is missing.

); } if (!table) { return (

Tabel Not Found

The table data is missing.

Kembali ke Daftar Tabel
); } const showRowNumber = table.has_row_number ?? false; const initializeFormData = (columns: Column[], prefix: string = ''): Record => { const formData: Record = {}; columns.forEach((col) => { const fieldName = prefix ? `${prefix}.${col.name}` : col.name; if (col.type === 'group' && col.subColumns) { Object.assign(formData, initializeFormData(col.subColumns, fieldName)); } else { formData[fieldName] = ''; } }); return formData; }; const flattenData = (obj: Record, prefix: string = ''): Record => { const result: Record = {}; for (const key in obj) { const value = obj[key]; const newKey = prefix ? `${prefix}.${key}` : key; if (typeof value === 'object' && value !== null && !Array.isArray(value)) { Object.assign(result, flattenData(value, newKey)); } else { result[newKey] = value; } } return result; }; const unflattenData = (flatData: Record): Record => { const result: Record = {}; for (const key in flatData) { const keys = key.split('.'); let current = result; for (let i = 0; i < keys.length - 1; i++) { if (!current[keys[i]]) current[keys[i]] = {}; current = current[keys[i]]; } current[keys[keys.length - 1]] = flatData[key]; } return result; }; const calculateRowTotal = (flatData: Record, fields: Array<{ fieldName: string; column: Column }>) => { let total = 0; fields.forEach((field) => { if (field.column.type === 'number') { const value = parseFloat(flatData[field.fieldName] || 0); if (!isNaN(value)) total += value; } }); return total; }; const calculateColumnTotal = (fieldName: string, dataArray: DataRow[]) => { let total = 0; dataArray.forEach((row) => { const flatData = flattenData(row.data); const value = parseFloat(flatData[fieldName] || 0); if (!isNaN(value)) total += value; }); return total; }; const organizedHeaders: Array<{ type: 'regular' | 'group'; name: string; fields: Array<{ fieldName: string; displayName: string; column: Column }>; }> = []; table.columns.forEach((col) => { if (col.type === 'group' && col.subColumns) { organizedHeaders.push({ type: 'group', name: col.name, fields: col.subColumns.map((subCol) => ({ fieldName: `${col.name}.${subCol.name}`, displayName: subCol.name, column: subCol, })), }); } else { organizedHeaders.push({ type: 'regular', name: col.name, fields: [{ fieldName: col.name, displayName: col.name, column: col }], }); } }); const allFields = organizedHeaders.flatMap((h) => h.fields); const dataArray = Array.isArray(tableData?.data) ? tableData.data : []; // Total colspan for empty-state cell const totalColspan = organizedHeaders.reduce((total, h) => total + h.fields.length, 0) + (showRowNumber ? 1 : 0) + (table.has_column_total ? 1 : 0) + 1; // aksi const handleAddNew = () => { setEditingData(initializeFormData(table.columns)); setEditingRowId('new'); }; const handleEdit = (row: DataRow) => { setEditingData(flattenData(row.data)); setEditingRowId(row.id); }; const handleCancel = () => { setEditingRowId(null); setEditingData({}); }; const handleSave = () => { const nestedData = unflattenData(editingData); if (editingRowId === 'new') { router.post( route('admin.dynamic-tables.insert-data', table.id), { data: nestedData }, { onSuccess: () => { setEditingRowId(null); setEditingData({}); }, onError: (errors) => console.error('Error saving data:', errors), }, ); } else if (editingRowId) { router.put( route('admin.dynamic-tables.update-data', { dynamicTable: table.id, data: editingRowId }), { data: nestedData }, { onSuccess: () => { setEditingRowId(null); setEditingData({}); }, onError: (errors) => console.error('Error updating data:', errors), }, ); } }; const handleDelete = (row: DataRow) => { if (window.confirm('Apakah Anda yakin ingin menghapus data ini?')) { router.delete(route('admin.dynamic-tables.delete-data', { dynamicTable: table.id, data: row.id }), { onError: (errors) => { console.error('Error deleting data:', errors); alert('Terjadi kesalahan saat menghapus data. Silakan coba lagi.'); }, }); } }; const updateFieldValue = (fieldName: string, value: any) => setEditingData({ ...editingData, [fieldName]: value }); const renderCell = (fieldName: string, column: Column, value: any, isEditing: boolean) => { if (!isEditing) return {value || '-'}; const currentValue = editingData[fieldName] || ''; switch (column.type) { case 'textarea': return (