Compare commits

...

3 Commits

Author SHA1 Message Date
Renovate Bot
c3d7d2f640 Update dependency @types/node to v20.14.15 2024-08-11 17:03:01 +00:00
e62cd65709 Merge pull request 'Several UI adjustments' (#5) from display-group-name into main
Reviewed-on: #5
2024-08-11 16:55:39 +00:00
5d6aa68f63 Display the name of the group in the guests list
Display the total number of guests per group in the tree
2024-08-11 18:53:53 +02:00
5 changed files with 41 additions and 17 deletions

View File

@ -20,8 +20,17 @@ export type Guest = {
id: string; id: string;
name: string; name: string;
email: string; email: string;
group_name: string;
} }
export type Group = {
id: string;
name: string;
guest_count: number;
icon: string;
children: Group[];
};
export type Invoice = { export type Invoice = {
id: string; id: string;
customer_id: string; customer_id: string;

View File

@ -1,27 +1,41 @@
'use client' 'use client'
import React, { useState, useEffect, Suspense } from 'react'; import React, { useState, useEffect, Suspense } from 'react';
import { Tree } from 'primereact/tree'; import { Tree, TreeNode } from 'primereact/tree';
import { PrimeIcons } from 'primereact/api'; import { PrimeIcons } from 'primereact/api';
import { debug } from 'console'; import { debug } from 'console';
import { Group } from '@/app/lib/definitions';
export default function AffinityGroupsTree() { export default function AffinityGroupsTree() {
const [nodes, setNodes] = useState([]); const [nodes, setNodes] = useState([]);
const parseNode = (record: any, included: any[]) => {
const groupToNode = (group: Group): TreeNode => {
return({
key: group.id,
label: `${group.name} (${group.guest_count})`,
icon: group.icon,
children: group.children.map((child) => groupToNode(child)),
className: "px-4",
})
}
const parseNode = (record: any, included: any[]): Group => {
if (!record.attributes) { if (!record.attributes) {
record = included.find((a) => a.id === record.id); record = included.find((a) => a.id === record.id);
} }
const children = (record?.relationships?.children?.data || []).map((child: any) => { const children: Group[] = (record?.relationships?.children?.data || []).map((child: any) => {
return (parseNode(child, included)); return (parseNode(child, included));
}); });
const children_guest_count: number = children.reduce((acc: number, child: Group) => acc + child.guest_count, 0);
return ({ return ({
key: record.id, id: record.id,
label: record.attributes.name, name: record.attributes.name,
guest_count: record.attributes.guest_count + children_guest_count,
icon: record.attributes.icon, icon: record.attributes.icon,
children: children, children: children,
className: "px-4",
}) })
} }
@ -34,7 +48,7 @@ export default function AffinityGroupsTree() {
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
setNodes(data.data.map((record: any) => { setNodes(data.data.map((record: any) => {
return (parseNode(record, data.included)); return (groupToNode(parseNode(record, data.included)));
})) }))
}); });
}); });

View File

@ -19,6 +19,7 @@ export default function guestsTable() {
id: record.id, id: record.id,
name: record.attributes.name, name: record.attributes.name,
email: record.attributes.email, email: record.attributes.email,
group_name: record.attributes.group_name
}); });
})) }))
}); });
@ -37,7 +38,7 @@ export default function guestsTable() {
Email Email
</th> </th>
<th scope="col" className="px-6 py-3"> <th scope="col" className="px-6 py-3">
Status Group
</th> </th>
</tr> </tr>
</thead> </thead>
@ -52,7 +53,7 @@ export default function guestsTable() {
{guest.email} {guest.email}
</td> </td>
<td className="px-6 py-4"> <td className="px-6 py-4">
Confirmed {guest.group_name}
</td> </td>
</tr> </tr>
))} ))}

View File

@ -26,7 +26,7 @@
}, },
"devDependencies": { "devDependencies": {
"@types/bcrypt": "^5.0.2", "@types/bcrypt": "^5.0.2",
"@types/node": "20.14.8", "@types/node": "20.14.15",
"@types/react": "18.3.3", "@types/react": "18.3.3",
"@types/react-dom": "18.3.0" "@types/react-dom": "18.3.0"
}, },

14
pnpm-lock.yaml generated
View File

@ -64,8 +64,8 @@ importers:
specifier: ^5.0.2 specifier: ^5.0.2
version: 5.0.2 version: 5.0.2
'@types/node': '@types/node':
specifier: 20.14.8 specifier: 20.14.15
version: 20.14.8 version: 20.14.15
'@types/react': '@types/react':
specifier: 18.3.3 specifier: 18.3.3
version: 18.3.3 version: 18.3.3
@ -337,8 +337,8 @@ packages:
'@types/cookie@0.6.0': '@types/cookie@0.6.0':
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
'@types/node@20.14.8': '@types/node@20.14.15':
resolution: {integrity: sha512-DO+2/jZinXfROG7j7WKFn/3C6nFwxy2lLpgLjEXJz+0XKphZlTLJ14mo8Vfg8X5BWN6XjyESXq+LcYdT7tR3bA==} resolution: {integrity: sha512-Fz1xDMCF/B00/tYSVMlmK7hVeLh7jE5f3B7X1/hmV0MJBwE27KlS7EvD/Yp+z1lm8mVhwV5w+n8jOZG8AfTlKw==}
'@types/pg@8.6.6': '@types/pg@8.6.6':
resolution: {integrity: sha512-O2xNmXebtwVekJDD+02udOncjVcMZQuTEQEMpKJ0ZRf5E7/9JJX3izhKUcUifBkyKpljyUM6BTgy2trmviKlpw==} resolution: {integrity: sha512-O2xNmXebtwVekJDD+02udOncjVcMZQuTEQEMpKJ0ZRf5E7/9JJX3izhKUcUifBkyKpljyUM6BTgy2trmviKlpw==}
@ -1410,17 +1410,17 @@ snapshots:
'@types/bcrypt@5.0.2': '@types/bcrypt@5.0.2':
dependencies: dependencies:
'@types/node': 20.14.8 '@types/node': 20.14.15
'@types/cookie@0.6.0': {} '@types/cookie@0.6.0': {}
'@types/node@20.14.8': '@types/node@20.14.15':
dependencies: dependencies:
undici-types: 5.26.5 undici-types: 5.26.5
'@types/pg@8.6.6': '@types/pg@8.6.6':
dependencies: dependencies:
'@types/node': 20.14.8 '@types/node': 20.14.15
pg-protocol: 1.6.1 pg-protocol: 1.6.1
pg-types: 2.2.0 pg-types: 2.2.0