91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
/* Copyright (C) 2024 Manuel Bustillo*/
|
|
|
|
'use client';
|
|
|
|
import { AbstractApi } from '@/app/api/abstract-api';
|
|
import { Group } from '@/app/lib/group';
|
|
import { Guest, GuestSerializer, GuestStatus, guestStatuses } from '@/app/lib/guest';
|
|
import { capitalize } from '@/app/lib/utils';
|
|
import { classNames } from '@/app/ui/components/button';
|
|
import { Dialog } from 'primereact/dialog';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { FloatLabel } from 'primereact/floatlabel';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { useState } from 'react';
|
|
|
|
export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible }: {
|
|
groups: Group[],
|
|
onCreate?: () => void,
|
|
onHide: () => void,
|
|
guest?: Guest,
|
|
visible: boolean,
|
|
}) {
|
|
|
|
const [name, setName] = useState(guest?.name || '');
|
|
const [group, setGroup] = useState(guest?.groupId || null);
|
|
const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
|
|
|
|
const api = new AbstractApi<Guest>();
|
|
const serializer = new GuestSerializer();
|
|
|
|
function resetForm() {
|
|
setName('');
|
|
setGroup(null);
|
|
setStatus(null);
|
|
}
|
|
|
|
function submitGuest() {
|
|
if (!(name && group && status)) {
|
|
return
|
|
}
|
|
|
|
if (guest?.id !== undefined) {
|
|
guest.name = name;
|
|
guest.groupId = group;
|
|
guest.status = status;
|
|
|
|
api.update(serializer, guest, () => {
|
|
resetForm();
|
|
onCreate && onCreate();
|
|
});
|
|
} else {
|
|
api.create(serializer, new Guest(undefined, name, undefined, group, undefined, status), ()=> {
|
|
resetForm();
|
|
onCreate && onCreate();
|
|
});
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
|
|
<Dialog header="Add guest" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
|
|
<div className="card flex justify-evenly py-5">
|
|
<FloatLabel>
|
|
<InputText id="username" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
|
|
<label htmlFor="username">Username</label>
|
|
</FloatLabel>
|
|
<FloatLabel>
|
|
<Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={
|
|
groups.map((group) => {
|
|
return { label: group.name, value: group.id };
|
|
})
|
|
} />
|
|
<label htmlFor="group">Group</label>
|
|
</FloatLabel>
|
|
<FloatLabel>
|
|
<Dropdown id="status" className='rounded-sm min-w-32' value={status} onChange={(e) => setStatus(e.target.value)} options={
|
|
guestStatuses.map((status) => {
|
|
return { label: capitalize(status), value: status };
|
|
})
|
|
} />
|
|
<label htmlFor="status">Status</label>
|
|
</FloatLabel>
|
|
<button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group && status)}>
|
|
{guest?.id !== undefined ? 'Update' : 'Create'}
|
|
</button>
|
|
</div>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
} |