wedding-planner-frontend/app/ui/components/guest-form-dialog.tsx

/* 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>
    </>
  );
}