Define a dialog to create a new guest

app/dashboard/guests/page.tsx

@@ -1,29 +1,101 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
-import GuestsTable from '@/app/ui/guests/table';
-import React, { Suspense } from 'react';
-import SkeletonTable from '@/app/ui/guests/skeleton-row';
-import { TabView, TabPanel } from 'primereact/tabview';
+'use client';
+
+import { Group, Guest } from '@/app/lib/definitions';
+import { getCsrfToken } from '@/app/lib/utils';
+import CreationDialog from '@/app/ui/components/creation-dialog';
 import GroupsTable from '@/app/ui/groups/table';
+import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
+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';
 
 export default function Page() {
+  function loadGroups() {
+    fetch("/api/groups")
+      .then((response) => response.json())
+      .then((data) => {
+        setGroups(data.map((record: any) => {
+          return ({
+            id: record.id,
+            name: record.name,
+            color: record.color,
+            attendance: {
+              considered: record.considered,
+              invited: record.invited,
+              confirmed: record.confirmed,
+              tentative: record.tentative,
+              declined: record.declined,
+              total: record.total,
+            }
+          });
+        }));
+        setGroupsLoaded(true);
+      }, (error) => {
+        return [];
+      });
+  }
+
+  function loadGuests() {
+    fetch("/api/guests.json")
+      .then((response) => response.json())
+      .then((data) => {
+        setGuests(data.map((record: any) => {
+          return ({
+            id: record.id,
+            name: record.name,
+            status: record.status,
+            group_name: record.group.name,
+          });
+        }));
+        setGuestsLoaded(true);
+      }, (error) => {
+        return [];
+      });
+  };
+
+  const updateGuestStatus = (id: string, status: string) => {
+    fetch("/api/guests/bulk_update.json",
+      {
+        method: 'POST',
+        body: JSON.stringify({ properties: { status: status }, guest_ids: [id] }),
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': getCsrfToken(),
+        }
+      })
+      .then(() => loadGuests())
+      .catch((error) => console.error(error));
+  }
+
+  const [groupsLoaded, setGroupsLoaded] = useState(false);
+  const [groups, setGroups] = useState<Array<Group>>([]);
+
+  const [guestsLoaded, setGuestsLoaded] = useState(false);
+  const [guests, setGuests] = useState<Array<Guest>>([]);
+
+  !groupsLoaded && loadGroups();
+  !guestsLoaded && loadGuests();
+
   return (
     <div className="w-full">
       <AffinityGroupsTree />
 
       <TabView>
         <TabPanel header="Guests" leftIcon="pi pi-users mx-2">
-          <div className="flex w-full items-center justify-between">
+          <div className="flex flex-col w-full items-center justify-between">
+            <CreationDialog groups={groups} onCreate={loadGuests} />;
             <Suspense fallback={<SkeletonTable />}>
-              <GuestsTable />
+              <GuestsTable guests={guests} updateGuestStatus={updateGuestStatus} />
             </Suspense>
           </div>
         </ TabPanel>
         <TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
           <div className="flex w-full items-center justify-between">
             <Suspense fallback={<SkeletonTable />}>
-              <GroupsTable />
+              <GroupsTable groups={groups} />
             </Suspense>
           </div>
         </ TabPanel>

app/ui/components/button.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow';
 
 export function classNames(type: ButtonColor) {
-    return(clsx("text-white py-1 px-2 mx-1 rounded", {
+    return (clsx("text-white py-1 px-2 mx-1 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
         'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
         'bg-green-500 hover:bg-green-600': type === 'green',
         'bg-red-500 hover:bg-red-600': type === 'red',

app/ui/components/creation-dialog.tsx

@@ -0,0 +1,60 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client';
+
+import { Group } from '@/app/lib/definitions';
+import { getCsrfToken } 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 CreationDialog({ groups, onCreate }: { groups: Group[], onCreate?: () => void }) {
+  const [visible, setVisible] = useState(false);
+
+  const [name, setName] = useState('');
+  const [group, setGroup] = useState(null);
+  function createGuest() {
+    fetch("/api/guests", {
+      method: 'POST',
+      body: JSON.stringify({ name: name, group_id: group }),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        setVisible(false);
+        onCreate && onCreate();
+      })
+      .catch((error) => console.error(error));
+  }
+
+  return (
+    <>
+      <button onClick={() => setVisible(true)} className={classNames('primary')}>Add new</button>
+
+      <Dialog header="Add guest" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+        <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>
+          <button className={classNames('primary')} onClick={createGuest} disabled={!(name.length > 0 && group)}>Create</button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

app/ui/groups/table.tsx

@@ -2,40 +2,10 @@
 
 'use client';
 
-import TableOfContents from '../components/table-of-contents';
-import React, { useState } from 'react';
 import { Group } from '@/app/lib/definitions';
+import TableOfContents from '../components/table-of-contents';
 
-export default function GroupsTable() {
-  const [groups, setGroups] = useState<Array<Group>>([]);
-  const [groupsLoaded, setGroupsLoaded] = useState(false);
-
-  function loadGroups() {
-    fetch("/api/groups")
-      .then((response) => response.json())
-      .then((data) => {
-        setGroups(data.map((record: any) => {
-          return ({
-            id: record.id,
-            name: record.name,
-            color: record.color,
-            attendance: {
-              considered: record.considered,
-              invited: record.invited,
-              confirmed: record.confirmed,
-              tentative: record.tentative,
-              declined: record.declined,
-              total: record.total,
-            }
-          });
-        }));
-        setGroupsLoaded(true);
-      }, (error) => {
-        return [];
-      });
-  }
-
-  !groupsLoaded && loadGroups();
+export default function GroupsTable({ groups }: { groups: Group[] }) {
 
   return (
     <TableOfContents

app/ui/guests/table.tsx

@@ -2,67 +2,38 @@
 
 'use client';
 
-import clsx from 'clsx';
-import React, { useState, useEffect } from 'react';
 import { Guest } from '@/app/lib/definitions';
 import { getCsrfToken } from '@/app/lib/utils';
-import {classNames} from '@/app/ui/components/button';
-import TableOfContents from '../components/table-of-contents';
+import { classNames } from '@/app/ui/components/button';
+import clsx from 'clsx';
+import React from 'react';
 import InlineTextField from '../components/form/inlineTextField';
+import TableOfContents from '../components/table-of-contents';
 
-export default function guestsTable() {
-  const [guests, setGuests] = useState<Array<Guest>>([]);
-
-  function loadGuests() {
-    fetch("/api/guests.json")
-      .then((response) => response.json())
-      .then((data) => {
-        setGuests(data.map((record: any) => {
-          return ({
-            id: record.id,
-            name: record.name,
-            status: record.status,
-            group_name: record.group.name,
-          });
-        }));
-      }, (error) => {
-        return [];
-      });
-  };
-
+export default function guestsTable({ guests, updateGuestStatus }: { guests: Guest[], updateGuestStatus: (id: string, status: string) => void }) {
   const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
   const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
   const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
   const handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');
 
-  const handleGuestUpdate = (guest:Guest) => {
+  const handleGuestUpdate = (guest: Guest) => {
     fetch(`/api/guests/${guest.id}`,
-    {
-      method: 'PUT',
-      body: JSON.stringify({ guest: { name: guest.name } }),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    })
-    .catch((error) => console.error(error));
-  }
-
-  const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status:string) => {
-    fetch("/api/guests/bulk_update.json",
       {
-        method: 'POST',
-        body: JSON.stringify({ properties: { status: status }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
+        method: 'PUT',
+        body: JSON.stringify({ guest: { name: guest.name } }),
         headers: {
           'Content-Type': 'application/json',
           'X-CSRF-TOKEN': getCsrfToken(),
         }
       })
-      .then(() => loadGuests())
       .catch((error) => console.error(error));
   }
 
-  guests.length === 0 && loadGuests();
+
+  const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status: string) => {
+    updateGuestStatus(e.currentTarget.getAttribute('data-guest-id') || '', status);
+  }
+
 
   return (
     <TableOfContents
@@ -72,7 +43,7 @@ export default function guestsTable() {
       rowRender={(guest) => (
         <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
           <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            <InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName ; handleGuestUpdate(guest) }} />
+            <InlineTextField initialValue={guest.name} onChange={(newName) => { guest.name = newName; handleGuestUpdate(guest) }} />
           </td>
           <td className="px-6 py-4">
             {guest.group_name}
@@ -108,5 +79,5 @@ export default function guestsTable() {
         </tr>
       )}
     />
-   );
+  );
 }