feat(vorlagen): Abschnitte nur fuer bestimmte Abteilungen (#58)

src/components/laeufe/lauf-starten.tsx

@@ -51,6 +51,8 @@ export function LaufStarten({
   const [mitarbeiterId, setzeMitarbeiter] = useState(vorbelegung.mitarbeiterId ?? "");
   const [freitext, setzeFreitext] = useState("");
   const [kundeId, setzeKunde] = useState("");
+  /** Nur fuer den Hinweis, welche Abschnitte die Abteilung hinzunimmt (#031). */
+  const [abteilungId, setzeAbteilung] = useState("");
   const [variablen, setzeVariablen] = useState<Record<string, string>>({});
 
   const vorlage = useMemo(
@@ -58,6 +60,30 @@ export function LaufStarten({
     [vorlagen, versionId],
   );
 
+  /**
+   * Welche Abschnitte die gewaehlte Abteilung hinzunimmt — und welche fuer
+   * andere gelten und deshalb wegbleiben (#031).
+   *
+   * Verglichen wird wie im Dienst: ohne Ruecksicht auf Gross- und
+   * Kleinschreibung. Wuerde hier anders verglichen als dort, zeigte der Dialog
+   * etwas anderes an, als der Lauf danach enthaelt.
+   */
+  const { zusatzAbschnitte, nurFuerAndere } = useMemo(() => {
+    const eingeschraenkt = vorlage?.abteilungsAbschnitte ?? [];
+    const name = auswahl.abteilungen
+      .find((abteilung) => abteilung.id === abteilungId)
+      ?.name.trim()
+      .toLocaleLowerCase("de");
+    const passt = (abteilungen: readonly string[]): boolean =>
+      name !== undefined && abteilungen.some((eintrag) => eintrag.trim().toLocaleLowerCase("de") === name);
+    return {
+      zusatzAbschnitte: eingeschraenkt
+        .filter((abschnitt) => passt(abschnitt.abteilungen))
+        .map((abschnitt) => abschnitt.titel),
+      nurFuerAndere: eingeschraenkt.filter((abschnitt) => !passt(abschnitt.abteilungen)),
+    };
+  }, [vorlage, abteilungId, auswahl.abteilungen]);
+
   // Nach dem Anlegen direkt in den Lauf – wer ihn startet, will ihn abarbeiten.
   useEffect(() => {
     if (ergebnis.laufId) router.push(`/laeufe/${ergebnis.laufId}`);
@@ -284,7 +310,12 @@ export function LaufStarten({
             </label>
             <label className="flex flex-col gap-1.5 text-sm">
               <span className="text-nebentext">Abteilung</span>
-              <select name="abteilungId" defaultValue="" className={FELD}>
+              <select
+                name="abteilungId"
+                value={abteilungId}
+                onChange={(ereignis) => setzeAbteilung(ereignis.target.value)}
+                className={FELD}
+              >
                 <option value="">keine</option>
                 {auswahl.abteilungen.map((abteilung) => (
                   <option key={abteilung.id} value={abteilung.id}>
@@ -292,6 +323,26 @@ export function LaufStarten({
                   </option>
                 ))}
               </select>
+              {/*
+                Vorher sagen, was die Abteilung hinzunimmt (#031). Ohne das wäre
+                die Zahl der Schritte eine Überraschung, und wer sich bei der
+                Abteilung vertippt, merkt es erst in der Abarbeitung.
+              */}
+              {zusatzAbschnitte.length > 0 ? (
+                <span className="text-xs text-nebentext">
+                  Nimmt{" "}
+                  {zusatzAbschnitte.length === 1
+                    ? "einen Abschnitt"
+                    : `${zusatzAbschnitte.length} Abschnitte`}{" "}
+                  hinzu: {zusatzAbschnitte.join(", ")}
+                </span>
+              ) : nurFuerAndere.length > 0 ? (
+                <span className="text-xs text-nebentext">
+                  {nurFuerAndere.length === 1
+                    ? "Ein Abschnitt gilt nur für andere Abteilungen und bleibt weg."
+                    : `${nurFuerAndere.length} Abschnitte gelten nur für andere Abteilungen und bleiben weg.`}
+                </span>
+              ) : null}
             </label>
             <label className="flex flex-col gap-1.5 text-sm">
               <span className="text-nebentext">Zuweisen an</span>