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

/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/

'use client';

import { AbstractApi } from '@/app/api/abstract-api';
import { Group, GroupSerializer } from '@/app/lib/group';
import { classNames } from '@/app/ui/components/button';
import { ColorPicker } from 'primereact/colorpicker';
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 GroupFormDialog({ groups, onCreate, onHide, group, visible }: {
  groups: Group[],
  onCreate?: (newGroup: Group) => void,
  onHide: () => void,
  group?: Group,
  visible: boolean,
}) {

  const [name, setName] = useState(group?.name || '');
  const [icon, setIcon] = useState(group?.icon || '');
  const [color, setColor] = useState<string>(group?.color || '');
  const [parentId, setParentId] = useState(group?.parentId || '');

  const api = new AbstractApi<Group>();
  const serializer = new GroupSerializer();

  function resetForm() {
    setName('');
    setIcon('');
    setColor('');
    setParentId('');
  }

  function submitGroup() {
    if (!(name)) {
      return
    }

    if (group?.id !== undefined) {
      group.name = name;
      group.icon = icon;
      group.color = color;
      group.parentId = parentId;

      api.update(serializer, group, (newGroup) => {
        resetForm();
        onCreate && onCreate(newGroup);
      });
    } else {

      api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), (newGroup) => {
        resetForm();
        onCreate && onCreate(newGroup);
      });
    }
  }

  return (
    <>

      <Dialog header="Add group" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
        <div className="card flex justify-evenly py-5">
          <FloatLabel>
            <InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
            <label htmlFor="name">Name</label>
          </FloatLabel>
          <FloatLabel>
            <InputText id="icon" className='rounded-sm' value={icon} onChange={(e) => setIcon(e.target.value)} />
            <label htmlFor="icon">Icon</label>
          </FloatLabel>
          <FloatLabel>
            <ColorPicker value={color} format='hex' onChange={(e) => setColor(`#${e.value}`)} />
            <label htmlFor="color" />
          </FloatLabel>
          <FloatLabel>
            <Dropdown id="parentId" className='rounded-sm min-w-32' value={parentId} onChange={(e) => setParentId(e.target.value)} options={
              groups.map((group) => {
                return { label: group.name, value: group.id };
              })
            } />
            <label htmlFor="parentId">Parent</label>
          </FloatLabel>

          <button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
            {group?.id !== undefined ? 'Update' : 'Create'}
          </button>
        </div>
      </Dialog>
    </>
  );
}