Eine leere Organisationseinheit wieder entfernen

Der Papierkorb neben dem Plus, im Organigramm wie in der Liste, und nur dort, wo nichts darunter haengt. Ein Knopf, der beim Klick eine Absage erteilt, ist schlechter als kein Knopf -- die Datenbank prueft es trotzdem, denn sie sieht auch geschlossene Planstellen, die im Baum gar nicht gezeichnet sind. Abgewiesen wird mit Grund: untergeordnete Einheiten, Planstellen (geschlossene zaehlen mit), Kostenstellen, die darauf verweisen, und die Wurzel selbst. Geloescht und nicht geschlossen, und das ist eine bewusste Einschraenkung. delete_position macht seit dem OM-Umbau den Unterschied vor: besetzt gewesen → valid_to, nie besetzt gewesen → weg. Fuer Einheiten laesst sich davon heute nur die zweite Haelfte umsetzen, weil ein valid_to an einer Einheit zwar eingetragen, aber nirgends gelesen wuerde -- weder Organigramm noch orgMapsAbfragen, Berichte, Druck oder die Auswahl beim Anlegen einer Planstelle schraenken org_units auf den Stichtag ein. Die geschlossene Einheit staende ueberall weiter da, nur mit einem Datum, das niemand sieht. Das Schliessen zum Stichtag kommt, wenn org_units gegen den Stichtag gelesen wird -- dieselbe Arbeit, die auch das Verschieben braucht.
2026-09-28 16:51:26 +02:00
parent a6b6a7d67c
commit a3dde61ec1
7 changed files with 276 additions and 24 deletions
--- a/components/orgchart/GraphOrgChart.tsx
+++ b/components/orgchart/GraphOrgChart.tsx
@@ -41,6 +41,7 @@ export type GraphOrgChartProps = {
  matchedIds?: Set<string> | null;
  /** Nur die Struktursicht reicht sie herein; in der Mitarbeitersicht gibt es keine Einheiten. */
  onAddUnit?: (unitId: string) => void;
+  onDeleteUnit?: (unitId: string) => void;
 };

 export function GraphOrgChart(props: GraphOrgChartProps) {
@@ -51,7 +52,7 @@ export function GraphOrgChart(props: GraphOrgChartProps) {
  );
 }

-function GraphOrgChartInner({ tree, isExpanded, onToggle, matchedIds, onAddUnit }: GraphOrgChartProps) {
+function GraphOrgChartInner({ tree, isExpanded, onToggle, matchedIds, onAddUnit, onDeleteUnit }: GraphOrgChartProps) {
  const { visibleNodes, visibleEdges } = useMemo(() => collectVisible(tree, isExpanded), [tree, isExpanded]);

  const { rfNodes, rfEdges } = useMemo(() => {
@@ -68,6 +69,7 @@ function GraphOrgChartInner({ tree, isExpanded, onToggle, matchedIds, onAddUnit
        childCount: n.children.length,
        onToggle,
        onAddUnit,
+        onDeleteUnit,
      },
    }));
    const rfEdges: Edge[] = visibleEdges.map((e) => ({
@@ -79,7 +81,7 @@ function GraphOrgChartInner({ tree, isExpanded, onToggle, matchedIds, onAddUnit
      style: { stroke: "#e3cddb", strokeWidth: 1.5 },
    }));
    return { rfNodes, rfEdges };
-  }, [visibleNodes, visibleEdges, isExpanded, onToggle, onAddUnit]);
+  }, [visibleNodes, visibleEdges, isExpanded, onToggle, onAddUnit, onDeleteUnit]);

  const [nodes, setNodes, onNodesChange] = useNodesState(rfNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(rfEdges);
--- a/components/orgchart/OrgChartNode.tsx
+++ b/components/orgchart/OrgChartNode.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
-import { Building2, ChevronDown, Plus, UserRound } from "lucide-react";
+import { Building2, ChevronDown, Plus, Trash2, UserRound } from "lucide-react";
 import Link from "next/link";
 import { memo } from "react";
 import { Avatar } from "@/components/ui/Avatar";
@@ -16,6 +16,7 @@ export type OrgChartNodeData = {
  onToggle: (id: string) => void;
  /** Nur in der Struktursicht gesetzt — ohne sie bleibt die Karte unverändert. */
  onAddUnit?: (unitId: string) => void;
+  onDeleteUnit?: (unitId: string) => void;
 };

 export type OrgChartRFNode = Node<OrgChartNodeData, "orgNode">;
@@ -44,7 +45,7 @@ const KIND_SHELL: Record<ChartNodeKind, string> = {
 // React Flow re-renders node components on every pan/zoom frame — memo is
 // required, not just tidy, to keep that smooth at a few hundred nodes.
 export const OrgChartNode = memo(function OrgChartNode({ id, data }: NodeProps<OrgChartRFNode>) {
-  const { chartNode, expanded, hasChildren, childCount, onToggle, onAddUnit } = data;
+  const { chartNode, expanded, hasChildren, childCount, onToggle, onAddUnit, onDeleteUnit } = data;
  const { kind, label, sublabel, avatar, href, vacant, totalReports, absent, coveredBy, coveringFor, unitId } = chartNode;
  const isMatch = chartNode.matched ?? false;
  const { width, height } = NODE_DIMENSIONS[kind];
@@ -113,21 +114,44 @@ export const OrgChartNode = memo(function OrgChartNode({ id, data }: NodeProps<O
          achtzig ständig sichtbare Pluszeichen ein Muster und kein Angebot.
          Auf Geräten ohne Zeigegerät bleibt er stehen — dort gibt es kein
          Überfahren, und unsichtbar hiesse dann unerreichbar. */}
-      {unitId && onAddUnit && (
-        <button
-          type="button"
-          onClick={() => onAddUnit(unitId)}
-          aria-label={`Einheit unter ${label} anlegen`}
-          title="Untergeordnete Einheit anlegen"
-          className="nodrag nopan absolute -right-2.5 -top-2.5 z-10 flex h-6 w-6 items-center justify-center rounded-full
-                     border border-border bg-white text-ink-muted shadow-sm transition-colors
-                     hover:border-brand-500 hover:bg-brand-500 hover:text-white
-                     focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500
-                     opacity-0 group-hover:opacity-100 focus-visible:opacity-100
+      {unitId && (onAddUnit || onDeleteUnit) && (
+        <span
+          className="nodrag nopan absolute -right-2.5 -top-2.5 z-10 flex items-center gap-1
+                     opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100
                     [@media(hover:none)]:opacity-100"
        >
-          <Plus className="h-3.5 w-3.5" />
-        </button>
+          {/* Der Papierkorb nur am Blatt. Eine Einheit mit Kindern lässt sich
+              ohnehin nicht entfernen — der Knopf wäre dort ein Angebot, das
+              beim Klick eine Absage erteilt, und das ist schlechter als kein
+              Knopf. Die Datenbank prüft es trotzdem: sie sieht auch
+              geschlossene Planstellen, die hier gar nicht gezeichnet sind. */}
+          {onDeleteUnit && !hasChildren && (
+            <button
+              type="button"
+              onClick={() => onDeleteUnit(unitId)}
+              aria-label={`Einheit ${label} entfernen`}
+              title="Einheit entfernen"
+              className="flex h-6 w-6 items-center justify-center rounded-full border border-border bg-white text-ink-muted shadow-sm
+                         transition-colors hover:border-danger-solid hover:bg-danger-solid hover:text-white
+                         focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500"
+            >
+              <Trash2 className="h-3 w-3" />
+            </button>
+          )}
+          {onAddUnit && (
+            <button
+              type="button"
+              onClick={() => onAddUnit(unitId)}
+              aria-label={`Einheit unter ${label} anlegen`}
+              title="Untergeordnete Einheit anlegen"
+              className="flex h-6 w-6 items-center justify-center rounded-full border border-border bg-white text-ink-muted shadow-sm
+                         transition-colors hover:border-brand-500 hover:bg-brand-500 hover:text-white
+                         focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500"
+            >
+              <Plus className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </span>
      )}

      {/* Accent stripe, inset so it follows the card's rounded corner. */}
--- a/components/orgchart/PositionTree.tsx
+++ b/components/orgchart/PositionTree.tsx
@@ -1,9 +1,12 @@
 "use client";

-import { ChevronDown, ChevronRight, Plus } from "lucide-react";
+import { ChevronDown, ChevronRight, Plus, Trash2 } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useCallback, useMemo, useState } from "react";
+import { deleteOrgUnit } from "@/actions/org";
 import { SegmentedControl } from "@/components/ui/SegmentedControl";
+import { useToast } from "@/components/ui/Toast";
 import { CreateOrgUnitModal } from "./CreateOrgUnitModal";
 import { LazyGraphOrgChart } from "./LazyGraphOrgChart";
 import type { ChartNode, OrgEmployee, OrgUnitNode, OrgVacancy } from "./types";
@@ -28,6 +31,8 @@ type PositionTreeProps = {
 export function PositionTree({ employees, units, vacancies }: PositionTreeProps) {
  const [expanded, setExpanded] = useState<Set<string>>(() => new Set(units.filter((u) => u.parent_id === null).map((u) => `unit-${u.id}`)));
  const [mode, setMode] = useState<ViewMode>("list");
+  const { showToast } = useToast();
+  const router = useRouter();

  // useCallback-stabil: das Layout-Memo von GraphOrgChart hängt an diesen
  // Referenzen, instabile Funktionen erzwängen sonst bei jedem Re-Render ein
@@ -49,6 +54,23 @@ export function PositionTree({ employees, units, vacancies }: PositionTreeProps)
  const onAddUnit = useCallback((unitId: string) => setAnlegenUnter(unitId), []);
  const eltern = anlegenUnter ? (units.find((u) => u.id === anlegenUnter) ?? null) : null;

+  // Ohne Rückfrage, wie beim Entfernen einer Planstelle: entfernbar ist nur,
+  // was nie eine Planstelle getragen hat und nichts unter sich hat. Alles
+  // andere weist die Datenbank mit dem Grund ab, und der steht dann im Toast.
+  const onDeleteUnit = useCallback(
+    async (unitId: string) => {
+      const einheit = units.find((u) => u.id === unitId);
+      const result = await deleteOrgUnit(unitId);
+      if (result.success) {
+        showToast(`${einheit ? `${einheit.org_number} · ${einheit.name}` : "Einheit"} entfernt.`);
+        router.refresh();
+      } else {
+        showToast(result.error ?? "Fehler beim Entfernen.", "error");
+      }
+    },
+    [units, showToast, router]
+  );
+
  const tree = useMemo(() => buildUnitTree(units, employees, vacancies), [units, employees, vacancies]);

  return (
@@ -64,11 +86,25 @@ export function PositionTree({ employees, units, vacancies }: PositionTreeProps)
        />
      </div>
      {mode === "graph" ? (
-        <LazyGraphOrgChart tree={tree} isExpanded={isExpanded} onToggle={toggle} onAddUnit={onAddUnit} />
+        <LazyGraphOrgChart
+          tree={tree}
+          isExpanded={isExpanded}
+          onToggle={toggle}
+          onAddUnit={onAddUnit}
+          onDeleteUnit={onDeleteUnit}
+        />
      ) : (
        <div className="rounded border border-border bg-white p-4">
          {tree.map((node) => (
-            <ListNode key={node.id} node={node} depth={0} expanded={expanded} onToggle={toggle} onAddUnit={onAddUnit} />
+            <ListNode
+              key={node.id}
+              node={node}
+              depth={0}
+              expanded={expanded}
+              onToggle={toggle}
+              onAddUnit={onAddUnit}
+              onDeleteUnit={onDeleteUnit}
+            />
          ))}
        </div>
      )}
@@ -84,12 +120,14 @@ function ListNode({
  expanded,
  onToggle,
  onAddUnit,
+  onDeleteUnit,
 }: {
  node: ChartNode;
  depth: number;
  expanded: Set<string>;
  onToggle: (id: string) => void;
  onAddUnit: (unitId: string) => void;
+  onDeleteUnit: (unitId: string) => void;
 }) {
  const expandable = node.children.length > 0;
  const open = expanded.has(node.id);
@@ -129,6 +167,19 @@ function ListNode({
        {/* Derselbe Knopf wie auf der Karte in der Grafik — beide Ansichten
            kommen aus einem Baum, und eine Handlung, die es nur in einer von
            beiden gibt, findet man in der anderen nie. */}
+        {node.unitId && !expandable && (
+          <button
+            type="button"
+            onClick={() => onDeleteUnit(node.unitId!)}
+            aria-label={`Einheit ${node.label} entfernen`}
+            title="Einheit entfernen"
+            className="ml-1 shrink-0 rounded p-0.5 text-ink-muted opacity-0 transition-opacity hover:text-danger-solid
+                       focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500
+                       group-hover/zeile:opacity-100 [@media(hover:none)]:opacity-100"
+          >
+            <Trash2 className="h-3 w-3" />
+          </button>
+        )}
        {node.unitId && (
          <button
            type="button"
@@ -145,7 +196,15 @@ function ListNode({
      </div>
      {open &&
        node.children.map((child) => (
-          <ListNode key={child.id} node={child} depth={depth + 1} expanded={expanded} onToggle={onToggle} onAddUnit={onAddUnit} />
+          <ListNode
+            key={child.id}
+            node={child}
+            depth={depth + 1}
+            expanded={expanded}
+            onToggle={onToggle}
+            onAddUnit={onAddUnit}
+            onDeleteUnit={onDeleteUnit}
+          />
        ))}
    </div>
  );