132 lines
3.3 KiB
TypeScript
132 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
import { Group, Peripherie, PeripherieFilterOptionen } from "@/types/rk";
|
|
import { useEffect, useState } from "react";
|
|
import PeripherieListView from "../peripherie/peripherieListView";
|
|
import { PeripherieFindApi } from "@/actions/rk/api-peripherie";
|
|
import { api_GroupAll, api_groupDelete } from "@/actions/rk/api-groups";
|
|
|
|
|
|
|
|
interface Props {
|
|
group: Group
|
|
}
|
|
|
|
export default function GroupViewItem({ group }: Props) {
|
|
|
|
const [showEA_Group, setShowEA_Group] = useState(false);
|
|
const [showEA_Element, setShowEA_Element] = useState(false);
|
|
const [showEA_Diff, setShowEA_Diff] = useState(false);
|
|
const [peripheries, setPeripheries] = useState<Peripherie[]>([]);
|
|
|
|
useEffect(() => {
|
|
setPeripheries([]);
|
|
setShowEA_Group(false);
|
|
setShowEA_Element(false);
|
|
setShowEA_Diff(false);
|
|
|
|
}, [group])
|
|
|
|
const handlerShow_Group = () => {
|
|
const newMode = !showEA_Group;
|
|
setShowEA_Group(newMode)
|
|
if (newMode) {
|
|
let filter: PeripherieFilterOptionen = {
|
|
groupId: group.id
|
|
}
|
|
PeripherieFindApi(filter).then(setPeripheries);
|
|
|
|
} else {
|
|
setPeripheries([])
|
|
};
|
|
|
|
};
|
|
const handlerShow_Element = () => {
|
|
setShowEA_Element((pre) => !pre)
|
|
//if (filterElementId) filter['elementId'] = filterElementId;
|
|
if (showEA_Group) {
|
|
let filter: PeripherieFilterOptionen = {
|
|
// elementId: group..id
|
|
};
|
|
|
|
// PeripherieFindApi(filter).then(setPeripheries);
|
|
|
|
}
|
|
|
|
};
|
|
const handlerShow_Diff = () => {
|
|
setShowEA_Diff((pre) => !pre)
|
|
|
|
};
|
|
|
|
const handlerDelete = () => {
|
|
if(group.id) api_groupDelete(group.id);
|
|
|
|
};
|
|
|
|
|
|
return (
|
|
<div className="ms-2">
|
|
<div className="flex gap-2 text-lg font-semibold bg-gray-200 ps-2">
|
|
<div>Gruppe :</div>
|
|
<div>{group.nr}</div>
|
|
<div>{group.name}</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<div>Anzeige Name :{group.displayName}</div>
|
|
<div>Info: {group.info}</div>
|
|
<div>Ort: {group.ort}</div>
|
|
<div>Type {group.type}</div>
|
|
</div>
|
|
|
|
<div className="mt-2 ps-2">
|
|
<div className="text-lg font-semibold">Eigenschaften</div>
|
|
{group.options &&
|
|
Object.entries(group.options).map(([key, value]) => (
|
|
<div key={key} className="grid grid-cols-2 gap-8">
|
|
<div >{key}</div>
|
|
<div>
|
|
{typeof value === "boolean" ? (value ? "Ja" : "Nein") : value}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-2 ps-2">
|
|
<div className="text-lg font-semibold">Elemente</div>
|
|
|
|
{group.elements && <div>
|
|
{group.elements.map((element) => (
|
|
<div key={element.id} className="grid grid-cols-2 gap-8">
|
|
{false && element.prefix &&
|
|
<div> {element.prefix}</div>
|
|
}
|
|
<div>{element.name}</div>
|
|
<div>{element.excelNr}</div>
|
|
|
|
</div>))}
|
|
</div>}
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<button className="bg-gray-300 rounded-xl p-2 hover:bg-gray-500 me-2" onClick={() => handlerShow_Group()}>Show EA Group</button>
|
|
<button className="bg-gray-300 rounded-xl p-2 hover:bg-gray-500 me-2" onClick={() => handlerShow_Element()}>Show EA Elements</button>
|
|
<button className="bg-red-300 rounded-xl p-2 hover:bg-gray-500 me-2" onClick={() => handlerDelete()}>Löschen</button>
|
|
|
|
<button className="bg-gray-300 rounded-xl p-2 hover:bg-gray-500 me-2">Show EA Diffrences to Excel</button>
|
|
</div>
|
|
{showEA_Group && <div>
|
|
Ein-Ausgänge
|
|
</div>}
|
|
{showEA_Group && <div className="border-1">
|
|
|
|
</div>}
|
|
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|