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 EditTeamMember from '@admin/pages/team/members/edit-team-member'; import { TeamMemberFormFields } from '@admin/pages/team/members/team-member-form-fields'; import { Head, useForm } from '@inertiajs/react'; import { FormEvent, useState } from 'react'; type MemberSummary = { id: number; name: string; status: boolean; }; type TeamPositionOption = { id: number; name: string; }; type MemberRecord = MemberSummary & { team_position_id: number; photo?: string; sort_order?: number; facebook?: string | null; linkedin?: string | null; x?: string | null; telegram?: string | null; positions?: TeamPositionOption[]; }; type CreateTeamMemberProps = { members: MemberSummary[]; positions: TeamPositionOption[]; }; const sidebarColumns: DataTableColumn[] = [ { header: 'Name', key: 'name', truncate: true, className: 'w-[50%]' }, { header: 'Status', key: 'status', className: 'w-24' }, ]; function CreateTeamMember({ members, positions }: CreateTeamMemberProps) { const { canEdit, canDelete } = useCrudPermissions('team-member'); const [isEditModalOpen, setIsEditModalOpen] = useState(false); const [initialData, setInitialData] = useState(null); const [deleteModal, setDeleteModal] = useState<{ show: boolean; member: MemberSummary | null }>({ show: false, member: null, }); const { data, setData, post, processing, errors, reset, transform } = useForm({ team_position_id: '', name: '', photo: '', sort_order: 0, facebook: '', linkedin: '', x: '', telegram: '', status: true, }); transform((payload) => ({ ...payload, team_position_id: payload.team_position_id ? Number(payload.team_position_id) : null, })); const action = useFormResponse({ onComplete: reset, loadingMessage: 'Creating team member...' }); const handleEdit = async (row: MemberSummary) => { try { const response = await fetch(`/admin/edit_team_member/${row.id}`); if (!response.ok) { throw new Error('Failed to fetch team member'); } const memberData = (await response.json()) as MemberRecord; setInitialData(memberData); setIsEditModalOpen(true); } catch { adminToast.error('Could not load team member details'); } }; const handleSubmit = (event: FormEvent) => { event.preventDefault(); post('/admin/api/create_team_member', { onStart: action.onStart, onSuccess: action.onSuccess, onError: action.onError, preserveScroll: true, }); }; return ( <>

Add team member

} sidebar={ setDeleteModal({ show: true, member: row }) : undefined} showEdit={canEdit} showDelete={canDelete} noDataText="No team members yet" /> } /> setDeleteModal({ show: false, member: null })} itemName={deleteModal.member?.name ?? 'this team member'} itemType="team member" deleteEndpoint={`/admin/api/delete_team_member/${deleteModal.member?.id ?? ''}`} loadingMessage="Deleting team member..." /> setIsEditModalOpen(false)} initialData={initialData} positions={positions} /> ); } export default Object.assign(CreateTeamMember, { layout: dashboardPersistentLayout('Create team member', 'Add a person to the team page'), });