bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 7 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Remove component that renders groups in a tree structure' (#111) from cleanup-tree-hierarchy into main
All checks were successful
Check usage of free licenses / build-static-assets (push) Successful in 49s
Details
Playwright Tests / test (push) Successful in 3m23s
Details
Build Nginx-based docker image / build-static-assets (push) Successful in 4m29s
Details

Browse Source 
Reviewed-on: #111
This commit is contained in:
bustikiller 2024-11-17 18:27:47 +00:00
commit 6906b3cb6e
2 changed files with 0 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/dashboard/guests/page.tsx
View File

@ -8,7 +8,6 @@ import { Group, Guest } from '@/app/lib/definitions';
import { classNames } from '@/app/ui/components/button';
import GuestFormDialog from '@/app/ui/components/guest-form-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';
@ -42,8 +41,6 @@ export default function Page() {
return (
<div className="w-full">
<AffinityGroupsTree />
<TabView>
<TabPanel header="Guests" leftIcon="pi pi-users mx-2">
<div className="flex flex-col w-full items-center justify-between">

65
app/ui/guests/affinity-groups-tree.tsx
View File

@ -1,65 +0,0 @@
/* Copyright (C) 2024 Manuel Bustillo*/
'use client'
import React, { useState, useEffect, Suspense } from 'react';
import { Tree } from 'primereact/tree';
import { PrimeIcons } from 'primereact/api';
import { debug } from 'console';
import { Group } from '@/app/lib/definitions';
export default function AffinityGroupsTree() {
const [nodes, setNodes] = useState([]);
const groupToNode = (group: Group): any => {
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) {
record = included.find((a) => a.id === record.id);
}
const children: Group[] = (record?.relationships?.children?.data || []).map((child: any) => {
return (parseNode(child, included));
});
const children_guest_count: number = children.reduce((acc: number, child: Group) => acc + child.guest_count, 0);
return ({
id: record.id,
name: record.attributes.name,
guest_count: record.attributes.guest_count + children_guest_count,
icon: record.attributes.icon,
children: children,
})
}
useEffect(() => {
if (nodes.length > 0) {
return;
}
fetch("/api/groups.json")
.then((response) => response.json())
.then((data) => {
setNodes(data.data.map((record: any) => {
return (groupToNode(parseNode(record, data.included)));
}))
});
});
return (
<div className="card flex justify-content-center">
<Suspense>
<Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value as any)} className="w-full md:w-30rem" />
</Suspense>
</div>
)
}