93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
/* Copyright (C) 2024 Manuel Bustillo*/
|
|
|
|
'use client';
|
|
|
|
import { AbstractApi, } from '@/app/api/abstract-api';
|
|
import { Guest, GuestSerializer } from '@/app/lib/guest';
|
|
import { classNames } from '@/app/ui/components/button';
|
|
import GroupFormDialog from '@/app/ui/components/group-form-dialog';
|
|
import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
|
|
import GroupsTable from '@/app/ui/groups/table';
|
|
import SkeletonTable from '@/app/ui/guests/skeleton-row';
|
|
import GuestsTable from '@/app/ui/guests/table';
|
|
import { TabPanel, TabView } from 'primereact/tabview';
|
|
import { Suspense, useState } from 'react';
|
|
import { Group, GroupSerializer } from '@/app/lib/group';
|
|
|
|
|
|
export default function Page() {
|
|
function refreshGuests() {
|
|
new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
|
|
setGuests(objects);
|
|
setGuestsLoaded(true);
|
|
});
|
|
}
|
|
|
|
function refreshGroups() {
|
|
new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
|
|
setGroups(objects);
|
|
setGroupsLoaded(true);
|
|
});
|
|
}
|
|
|
|
const [groupsLoaded, setGroupsLoaded] = useState(false);
|
|
const [groups, setGroups] = useState<Array<Group>>([]);
|
|
const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
|
|
|
|
const [guestsLoaded, setGuestsLoaded] = useState(false);
|
|
const [guests, setGuests] = useState<Array<Guest>>([]);
|
|
const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
|
|
|
|
!groupsLoaded && refreshGroups();
|
|
!guestsLoaded && refreshGuests();
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<TabView>
|
|
<TabPanel header="Guests" leftIcon="pi pi-users mx-2">
|
|
<div className="flex flex-col w-full items-center justify-between">
|
|
<button onClick={() => setGuestBeingEdited({})} className={classNames('primary')}>Add new</button>
|
|
<GuestFormDialog
|
|
key={guestBeingEdited?.id}
|
|
groups={groups}
|
|
onCreate={() => { refreshGuests(); setGuestBeingEdited(undefined) }}
|
|
guest={guestBeingEdited}
|
|
visible={guestBeingEdited !== undefined}
|
|
onHide={() => { setGuestBeingEdited(undefined) }}
|
|
/>
|
|
<Suspense fallback={<SkeletonTable />}>
|
|
<GuestsTable
|
|
guests={guests}
|
|
onUpdate={refreshGuests}
|
|
onEdit={(guest) => setGuestBeingEdited(guest)}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
</ TabPanel>
|
|
<TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
|
|
<div className="flex flex-col w-full items-center justify-between">
|
|
|
|
<button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
|
|
<GroupFormDialog
|
|
key={groupBeingEdited?.id}
|
|
groups={groups}
|
|
onCreate={() => { refreshGroups(); setGroupBeingEdited(undefined) }}
|
|
group={groupBeingEdited}
|
|
visible={groupBeingEdited !== undefined}
|
|
onHide={() => { setGroupBeingEdited(undefined) }}
|
|
/>
|
|
|
|
<Suspense fallback={<SkeletonTable />}>
|
|
<GroupsTable
|
|
groups={groups}
|
|
onUpdate={refreshGroups}
|
|
onEdit={(group) => setGroupBeingEdited(group)}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
</ TabPanel>
|
|
</ TabView>
|
|
</div>
|
|
|
|
);
|
|
} |