import { adminToast } from '@admin/components/ui/admin-toast'; import { CreatePageLayout } from '@admin/components/ui/create-page-layout'; import { DataTable, type DataTableColumn } from '@admin/components/ui/data-table'; import { DeleteConfirmationModal } from '@admin/components/ui/delete-confirmation-modal'; import { formClassName } from '@admin/components/ui/field-styles'; import { useCrudPermissions } from '@admin/hooks/use-crud-permissions'; import { useFormResponse } from '@admin/hooks/use-form-response'; import { dashboardPersistentLayout } from '@admin/layouts/dashboard-page-layout'; import EditSlider from '@admin/pages/sliders/edit-slider'; import { SliderFormFields } from '@admin/pages/sliders/slider-form-fields'; import { Head, useForm } from '@inertiajs/react'; import { FormEvent, useState } from 'react'; type SliderSummary = { id: number; title: string; sort_order: number; status: boolean; }; type SliderRecord = SliderSummary & { description?: string | null; counter_value?: string | null; counter_text?: string | null; image?: string | null; video?: string | null; }; type CreateSliderProps = { sliders: SliderSummary[]; }; const sidebarColumns: DataTableColumn[] = [ { header: 'Name', key: 'title', truncate: true, className: 'w-[40%]' }, { header: 'Order', key: 'sort_order', className: 'w-20' }, { header: 'Status', key: 'status', className: 'w-24' }, ]; function CreateSlider({ sliders }: CreateSliderProps) { const { canEdit, canDelete } = useCrudPermissions('slider'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; slider: SliderSummary | null }>({ show: false, slider: null, }); const { data, setData, post, processing, errors, reset, transform } = useForm({ title: '', description: '', link: '', counter_value: '', counter_text: '', status: true, sort_order: 0, image: '', video: '', media_type: 'image' as 'image' | 'video', }); transform((payload) => { const { media_type: _mediaType, ...rest } = payload; return rest; }); const action = useFormResponse({ onComplete: reset, loadingMessage: 'Creating slider...' }); const handleEdit = async (row: SliderSummary) => { try { const response = await fetch(`/admin/edit_slider/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch slider'); } const sliderData = (await response.json()) as SliderRecord; setInitialData(sliderData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load slider details'); } }; const handleSubmit = (event: FormEvent) => { event.preventDefault(); post('/admin/api/create_slider', { onStart: action.onStart, onSuccess: action.onSuccess, onError: action.onError, preserveScroll: true, }); }; return ( <>

Add slider

} sidebar={ setDeleteModal({ show: true, slider: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No sliders yet" /> } /> setDeleteModal({ show: false, slider: null })} itemName={deleteModal.slider?.title ?? 'this slider'} itemType="slider" deleteEndpoint={`/admin/api/delete_slider/${deleteModal.slider?.id ?? ''}`} loadingMessage="Deleting slider..." /> setIsEditModalOpen(false)} initialData={initialData} /> ); } export default Object.assign(CreateSlider, { layout: dashboardPersistentLayout('Create slider', 'Add a new hero slider'), });