stand2026_10_06

src/components/rk/groups/groupView.tsx

@@ -0,0 +1,65 @@
+"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>
+	)
+}
+
+