66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { Group } from "@/types/rk";
|
|
import GroupSelect from "./groupSelect";
|
|
import { useEffect, useState } from "react";
|
|
import GroupViewItem from "./group_ViewItem";
|
|
import GroupFilter from "./group_Filter";
|
|
import { GroupEdit } from "./group_Edit";
|
|
|
|
|
|
interface Props {
|
|
groups: Group[],
|
|
}
|
|
|
|
export default function GroupView({ groups }: Props) {
|
|
|
|
const [selectedItem, setSelectedItem] = useState<Group | undefined>();
|
|
const [groupFilterd, setGroupFilterd] = useState<Group[]>([]);
|
|
|
|
useEffect(() => {
|
|
setGroupFilterd([...groups]);
|
|
if(selectedItem){
|
|
const updatedGroup = groups.find((g)=>g.id==selectedItem.id);
|
|
if(updatedGroup) setSelectedItem(()=>updatedGroup);
|
|
|
|
}
|
|
}, [groups])
|
|
|
|
const handlerOnChangeFilter = (groups: Group[]) => {
|
|
setGroupFilterd([...groups]);
|
|
}
|
|
|
|
const handleSelect = (item: Group) => {
|
|
console.log(item);
|
|
setSelectedItem(item);
|
|
}
|
|
|
|
|
|
return (
|
|
<div>
|
|
<div className="m-4 p-4 border-1 border-gray-100 w-256">
|
|
<GroupFilter groups={groups} onChange={handlerOnChangeFilter}></GroupFilter>
|
|
|
|
</div>
|
|
<div className="m-4 grid grid-cols-[300_2fr]">
|
|
{/** Spalte 1 Auswahl Gruppe */}
|
|
<div>
|
|
<GroupSelect onSelect={handleSelect} groups={groupFilterd}></GroupSelect>
|
|
</div>
|
|
|
|
{/** Spalte 2 Anzeige Gruppe details */}
|
|
<div className="flex flex-col w-256 h-10">
|
|
{selectedItem && <div >
|
|
<div>edit</div>
|
|
<GroupViewItem group={selectedItem} ></GroupViewItem>
|
|
{<GroupEdit debug={true} initData={selectedItem} ></GroupEdit>}
|
|
</div>}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|