Skip to content

Commit f8f8cc5

Browse files
arnobt78arnobt78
committed
fixed socket group section issue on default plates
1 parent 9f14a84 commit f8f8cc5

1 file changed

Lines changed: 93 additions & 87 deletions

File tree

‎components/control-panel.tsx‎

Lines changed: 93 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1054,97 +1054,103 @@ export default function ControlPanel({
10541054
</>
10551055
)}
10561056

1057-
{/* Reused stacked circles indicator before configured list */}
1058-
<div className="relative md:ml-0 md:h-0 mt-2">
1059-
<div className="absolute left-[0px] md:left-[-40px] top-0">
1060-
<StackedIndicator number={6} />
1061-
</div>
1062-
</div>
1063-
10641057
{/* Configured socket groups - Always show when socketToggle is true */}
1065-
{socketGroups.length > 0 && (
1066-
<div className={`mt-4 ${!isEditingSocket ? "" : ""}`}>
1067-
<p className="text-md text-gray-700 font-medium mb-2">
1068-
Konfigurierte Steckdosen bestätigen
1069-
</p>
1070-
{socketGroups.map((sg, idx) => {
1071-
const plate = plates.find((p) => p.id === sg.plateId);
1072-
const isSelected = selectedSocketGroup?.id === sg.id;
1073-
return (
1074-
<div
1075-
key={sg.id}
1076-
onClick={() => {
1077-
// When not editing, clicking the item displays it on canvas
1078-
if (!isEditingSocket) {
1079-
handleSocketGroupView(sg.id);
1080-
}
1081-
}}
1082-
className={`flex items-center justify-between p-3 transition-colors border rounded-lg mb-2 cursor-pointer ${
1083-
isSelected && !isEditingSocket
1084-
? "bg-green-50 hover:bg-green-100 border-green-300"
1085-
: "bg-gray-50 hover:bg-gray-100 border-gray-200"
1086-
}`}
1087-
>
1088-
<div className="text-md font-medium">
1089-
<span className="text-gray-700">
1090-
{idx + 1}. Rückwand - {plate?.width} x{" "}
1091-
{plate?.height}
1092-
</span>
1093-
<span className="text-gray-300">{" | "}</span>
1094-
<span className="text-gray-700">
1095-
{sg.count} x Steckdose
1096-
</span>
1097-
<span className="text-gray-500"> + 20.00 €</span>
1098-
</div>
1058+
{(() => {
1059+
// Filter socket groups to only include those with existing plates
1060+
const validSocketGroups = socketGroups.filter((sg) =>
1061+
plates.some((p) => p.id === sg.plateId)
1062+
);
1063+
// Only show section if there are valid socket groups
1064+
return validSocketGroups.length > 0 ? (
1065+
<div className={`mt-4 ${!isEditingSocket ? "" : ""}`}>
1066+
{/* Reused stacked circles indicator before configured list */}
1067+
<div className="relative md:ml-0 md:h-0 mt-2">
1068+
<div className="absolute left-[0px] md:left-[-40px] top-0">
1069+
<StackedIndicator number={6} />
1070+
</div>
1071+
</div>
1072+
<p className="text-md text-gray-700 font-medium mb-2">
1073+
Konfigurierte Steckdosen bestätigen
1074+
</p>
1075+
{validSocketGroups.map((sg, idx) => {
1076+
const plate = plates.find((p) => p.id === sg.plateId);
1077+
const isSelected = selectedSocketGroup?.id === sg.id;
1078+
return (
1079+
<div
1080+
key={sg.id}
1081+
onClick={() => {
1082+
// When not editing, clicking the item displays it on canvas
1083+
if (!isEditingSocket) {
1084+
handleSocketGroupView(sg.id);
1085+
}
1086+
}}
1087+
className={`flex items-center justify-between p-3 transition-colors border rounded-lg mb-2 cursor-pointer ${
1088+
isSelected && !isEditingSocket
1089+
? "bg-green-50 hover:bg-green-100 border-green-300"
1090+
: "bg-gray-50 hover:bg-gray-100 border-gray-200"
1091+
}`}
1092+
>
1093+
<div className="text-md font-medium">
1094+
<span className="text-gray-700">
1095+
{idx + 1}. Rückwand - {plate?.width} x{" "}
1096+
{plate?.height}
1097+
</span>
1098+
<span className="text-gray-300">{" | "}</span>
1099+
<span className="text-gray-700">
1100+
{sg.count} x Steckdose
1101+
</span>
1102+
<span className="text-gray-500"> + 20.00 €</span>
1103+
</div>
10991104

1100-
<div className="flex gap-1">
1101-
{/* Task Requirement: Edit/Delete socket groups */}
1102-
{selectedSocketGroup?.id === sg.id &&
1103-
isEditingSocket ? (
1104-
<Button
1105-
size="sm"
1106-
variant="destructive"
1107-
onClick={(e) => {
1108-
e.stopPropagation(); // Prevent triggering parent onClick
1109-
handleDeleteClick(sg);
1110-
}}
1111-
className="h-8 px-3 text-xs rounded-lg"
1112-
title="Delete"
1113-
>
1114-
<Minus className="h-3 w-3 mr-1" />
1115-
Delete
1116-
</Button>
1117-
) : (
1118-
<Button
1119-
size="sm"
1120-
variant="ghost"
1121-
onClick={(e) => {
1122-
e.stopPropagation(); // Prevent triggering parent onClick
1123-
handleSocketGroupSelection(sg.id);
1124-
}}
1125-
className="h-8 w-8 p-0 rounded-lg hover:bg-gray-200"
1126-
title="Edit"
1127-
>
1128-
<MoreVertical className="h-4 w-4" />
1129-
</Button>
1130-
)}
1105+
<div className="flex gap-1">
1106+
{/* Task Requirement: Edit/Delete socket groups */}
1107+
{selectedSocketGroup?.id === sg.id &&
1108+
isEditingSocket ? (
1109+
<Button
1110+
size="sm"
1111+
variant="destructive"
1112+
onClick={(e) => {
1113+
e.stopPropagation(); // Prevent triggering parent onClick
1114+
handleDeleteClick(sg);
1115+
}}
1116+
className="h-8 px-3 text-xs rounded-lg"
1117+
title="Delete"
1118+
>
1119+
<Minus className="h-3 w-3 mr-1" />
1120+
Delete
1121+
</Button>
1122+
) : (
1123+
<Button
1124+
size="sm"
1125+
variant="ghost"
1126+
onClick={(e) => {
1127+
e.stopPropagation(); // Prevent triggering parent onClick
1128+
handleSocketGroupSelection(sg.id);
1129+
}}
1130+
className="h-8 w-8 p-0 rounded-lg hover:bg-gray-200"
1131+
title="Edit"
1132+
>
1133+
<MoreVertical className="h-4 w-4" />
1134+
</Button>
1135+
)}
1136+
</div>
11311137
</div>
1132-
</div>
1133-
);
1134-
})}
1135-
1136-
{/* Add socket group button */}
1137-
<div className="flex justify-end mt-4 mb-4">
1138-
<Button
1139-
onClick={handleAddSocketGroup}
1140-
size={undefined}
1141-
className="w-fit h-auto px-6 py-2.5 bg-green-50 border-2 border-green-300 text-green-500 font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors hover:bg-green-200 hover:text-green-600 shadow-lg active:bg-green-300 active:text-green-700"
1142-
>
1143-
Steckdose hinzufügen
1144-
</Button>
1138+
);
1139+
})}
1140+
1141+
{/* Add socket group button */}
1142+
<div className="flex justify-end mt-4 mb-4">
1143+
<Button
1144+
onClick={handleAddSocketGroup}
1145+
size={undefined}
1146+
className="w-fit h-auto px-6 py-2.5 bg-green-50 border-2 border-green-300 text-green-500 font-semibold rounded-lg flex items-center justify-center gap-2 transition-colors hover:bg-green-200 hover:text-green-600 shadow-lg active:bg-green-300 active:text-green-700"
1147+
>
1148+
Steckdose hinzufügen
1149+
</Button>
1150+
</div>
11451151
</div>
1146-
</div>
1147-
)}
1152+
) : null;
1153+
})()}
11481154
</>
11491155
)}
11501156
</div>

0 commit comments

Comments
 (0)