2026-05-22 07:16:33 +02:00
10 changed files with 79 additions and 66 deletions
--- a/frontend/src/components/ExercisePickerModal.jsx
+++ b/frontend/src/components/ExercisePickerModal.jsx
@ -7,6 +7,7 @@ import { useVirtualizer } from '@tanstack/react-virtual'
 import api from '../utils/api'
 import { useAuth } from '../context/AuthContext'
 import { SKILL_LEVEL_OPTIONS } from '../constants/skillLevels'
+import { EXERCISE_VISIBILITY_FIELD_LABEL } from '../constants/exerciseGovernanceLabels'
 import {
  INITIAL_EXERCISE_LIST_FILTERS,
  mergeExerciseListPrefsFromApi,
@ -373,7 +374,7 @@ export default function ExercisePickerModal({
            {quickOpen ? (
              <div style={{ marginTop: '12px', display: 'grid', gap: '10px' }}>
                <p style={{ margin: 0, fontSize: '13px', color: 'var(--text2)', lineHeight: 1.45 }}>
-                  Wird mit Sichtbarkeit <strong>privat</strong> und Status <strong>Entwurf</strong> gespeichert und
+                  Wird mit Freigabelevel <strong>privat</strong> und Status <strong>Entwurf</strong> gespeichert und
                  erscheint auf dem Dashboard zum Weiterbearbeiten. Nach dem Speichern wird die Übung direkt in den
                  Ablauf übernommen.
                </p>
@ -462,7 +463,7 @@ export default function ExercisePickerModal({
              <div style={{ marginTop: '0.35rem', fontSize: '13px', color: 'var(--text2)' }}>
                  <p style={{ margin: '0 0 12px 0' }}>
                  Felder gelten mit <strong>UND</strong>. Kataloge: mehrere „+“ = alle zutreffend; „−“ schließt aus.
-                  Sichtbarkeit/Status: mehrere „+“ = eine davon (ODER); „−“ blendet aus.
+                  Freigabelevel/Status: mehrere „+“ = eine davon (ODER); „−“ blendet aus.
                </p>
                <ExerciseFocusRulePicker
                  focusOptions={focusOptions}
@ -539,12 +540,12 @@ export default function ExercisePickerModal({
                </div>
                <div className="exercise-filters-modal-grid exercise-filters-modal-grid--two exercise-filters-modal-grid--catalog" style={{ marginTop: 12 }}>
                  <CatalogRulePicker
-                    label="Sichtbarkeit"
+                    label={EXERCISE_VISIBILITY_FIELD_LABEL}
                    options={visibilityOptions}
                    rules={filters.visibility_rules}
                    rulesFieldName="visibility_rules"
                    idKind="string"
-                    placeholder="Sichtbarkeit …"
+                    placeholder="Freigabelevel …"
                    onPatch={(patch) => setFilters((f) => ({ ...f, ...patch }))}
                  />
                  <CatalogRulePicker
--- a/frontend/src/components/ExerciseProgressionGraphPanel.jsx
+++ b/frontend/src/components/ExerciseProgressionGraphPanel.jsx
@ -9,6 +9,7 @@ import SkillProfilePanel from './skills/SkillProfilePanel'
 import { useAuth } from '../context/AuthContext'
 import { getTenantClubDependencyKey } from '../utils/activeClub'
 import ExercisePickerModal from './ExercisePickerModal'
+import { EXERCISE_VISIBILITY_FIELD_LABEL } from '../constants/exerciseGovernanceLabels'

 const VIS_OPTIONS = [
  { value: 'private', label: 'Privat' },
@ -605,7 +606,7 @@ export default function ExerciseProgressionGraphPanel({
              />
            </div>
            <div className="form-row" style={{ flex: '1 1 140px', marginBottom: 0 }}>
-              <label className="form-label">Sichtbarkeit</label>
+              <label className="form-label">{EXERCISE_VISIBILITY_FIELD_LABEL}</label>
              <select
                className="form-input"
                value={newGraphVisibility}
@ -642,7 +643,7 @@ export default function ExerciseProgressionGraphPanel({
            />
          </div>
          <div className="form-row">
-            <label className="form-label">Sichtbarkeit</label>
+            <label className="form-label">{EXERCISE_VISIBILITY_FIELD_LABEL}</label>
            <select className="form-input" value={metaVisibility} onChange={(e) => setMetaVisibility(e.target.value)}>
              {filteredGraphVisOptions.map((o) => (
                <option key={o.value} value={o.value}>
--- a/frontend/src/components/exercises/ExerciseFormPageRoot.jsx
+++ b/frontend/src/components/exercises/ExerciseFormPageRoot.jsx
@ -44,6 +44,10 @@ import {
  EXERCISE_SKILL_INTENSITY_DEFAULT,
  normalizeExerciseSkillIntensity,
 } from '../../constants/exerciseSkillIntensity'
+import {
+  EXERCISE_VISIBILITY_CLUB_FIELD_LABEL,
+  EXERCISE_VISIBILITY_FIELD_LABEL,
+} from '../../constants/exerciseGovernanceLabels'

 const VARIANT_DIFFICULTY = [
  { value: '', label: '—' },
@ -859,6 +863,33 @@ function ExerciseFormPageRoot() {
    setVariants(rows)
  }, [exerciseId, syncVariantsSavedSnapshot])

+  const createVariantFromDraft = useCallback(
+    async ({ showSuccessToast = false } = {}) => {
+      if (!exerciseId) return false
+      if (!variantDraftHasContent(variantDraft)) return true
+      const payload = buildVariantPayloadFromRow(variantDraft)
+      if (payload.variant_name.length < 3) {
+        toast.error('Variantenname mindestens 3 Zeichen')
+        return false
+      }
+      setVariantBusy(true)
+      try {
+        const created = await api.createExerciseVariant(exerciseId, payload)
+        setVariantDraft(emptyVariantDraft())
+        if (created?.id != null) setVariantEditSelection(created.id)
+        await refreshVariants()
+        if (showSuccessToast) toast.success('Variante angelegt.')
+        return true
+      } catch (e) {
+        toast.error(e.message || String(e))
+        return false
+      } finally {
+        setVariantBusy(false)
+      }
+    },
+    [exerciseId, variantDraft, refreshVariants, toast],
+  )
+
  const persistPendingVariantChanges = useCallback(async () => {
    if (!exerciseId) return true

@ -885,28 +916,9 @@ function ExerciseFormPageRoot() {
      }
    }

-    if (variantDraftHasContent(variantDraft)) {
-      const payload = buildVariantPayloadFromRow(variantDraft)
-      if (payload.variant_name.length < 3) {
-        toast.error('Variantenentwurf: Name mindestens 3 Zeichen, sonst Felder verwerfen oder ausfüllen.')
-        return false
-      }
-      setVariantBusy(true)
-      try {
-        const created = await api.createExerciseVariant(exerciseId, payload)
-        setVariantDraft(emptyVariantDraft())
-        if (created?.id != null) setVariantEditSelection(created.id)
-        await refreshVariants()
-      } catch (e) {
-        toast.error(e.message || String(e))
-        return false
-      } finally {
-        setVariantBusy(false)
-      }
-    }
-
-    return true
-  }, [exerciseId, variantDraft, variants, getDirtyVariantRows, refreshVariants, toast])
+    const draftOk = await createVariantFromDraft()
+    return draftOk
+  }, [exerciseId, variants, getDirtyVariantRows, refreshVariants, toast, createVariantFromDraft])

  const performSaveAttempt = useCallback(
    async ({ fromUnsavedDialog = false, closeAfter = false } = {}) => {
@ -1223,27 +1235,9 @@ function ExerciseFormPageRoot() {
    }
  }

-  const createVariantSubmit = async (e) => {
-    e.preventDefault()
-    if (!exerciseId) return
-    const payload = buildVariantPayloadFromRow(variantDraft)
-    if (payload.variant_name.length < 3) {
-      toast.error('Variantenname mindestens 3 Zeichen')
-      return
-    }
-    setVariantBusy(true)
-    try {
-      const created = await api.createExerciseVariant(exerciseId, payload)
-      setVariantDraft(emptyVariantDraft())
-      await refreshVariants()
-      if (created?.id != null) setVariantEditSelection(created.id)
-      else setVariantEditSelection(null)
-    } catch (err) {
-      toast.error(err.message || String(err))
-    } finally {
-      setVariantBusy(false)
-    }
-  }
+  const handleCreateVariantClick = useCallback(async () => {
+    await createVariantFromDraft({ showSuccessToast: true })
+  }, [createVariantFromDraft])

  const selectedVariantForEdit =
    typeof variantEditSelection === 'number' ? variants.find((v) => v.id === variantEditSelection) : null
@ -1298,7 +1292,7 @@ function ExerciseFormPageRoot() {
            title="Stammdaten"
            hint={
              isEdit
-                ? 'Titel, Rahmendaten und Sichtbarkeit — Inhalt und Einordnung in den anderen Tabs.'
+                ? 'Titel, Rahmendaten und Freigabelevel — Inhalt und Einordnung in den anderen Tabs.'
                : 'Titel und Rahmendaten. Varianten, Medien und Progressionsgraph sind nach dem ersten Speichern verfügbar.'
            }
          >
@ -1428,7 +1422,7 @@ function ExerciseFormPageRoot() {

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }}>
            <div className="form-row">
-              <label className="form-label">Sichtbarkeit</label>
+              <label className="form-label">{EXERCISE_VISIBILITY_FIELD_LABEL}</label>
              <select
                className="form-input"
                value={formData.visibility}
@ -1456,7 +1450,7 @@ function ExerciseFormPageRoot() {

          {formData.visibility === 'club' && visibilityClubChoices.length > 0 ? (
            <div className="form-row" style={{ marginTop: '10px' }}>
-              <label className="form-label">Verein (Sichtbarkeit)</label>
+              <label className="form-label">{EXERCISE_VISIBILITY_CLUB_FIELD_LABEL}</label>
              <select
                className="form-input"
                value={formData.club_id != null && formData.club_id !== '' ? String(formData.club_id) : ''}
@ -2081,9 +2075,8 @@ function ExerciseFormPageRoot() {
            )}

            {variantEditSelection === 'new' && (
-              <form
+              <div
                className="exercise-variant-single-form"
-                onSubmit={createVariantSubmit}
                style={{ marginTop: '14px', paddingTop: '14px', borderTop: '1px solid var(--border)' }}
              >
                <h3 style={{ marginTop: 0, fontSize: '1rem' }}>Neue Variante</h3>
@ -2099,10 +2092,19 @@ function ExerciseFormPageRoot() {
                  linkedExerciseMedia={isEdit ? mediaList : []}
                  onExerciseMediaListChanged={refreshMedia}
                />
-                <button type="submit" className="btn btn-primary" style={{ marginTop: '10px' }} disabled={variantBusy}>
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  style={{ marginTop: '10px' }}
+                  disabled={variantBusy}
+                  onClick={handleCreateVariantClick}
+                >
                  {variantBusy ? 'Anlegen…' : 'Variante anlegen'}
                </button>
-              </form>
+                <p className="exercise-form-panel__hint" style={{ marginTop: '8px', marginBottom: 0 }}>
+                  Alternativ reicht „Speichern“ in der Aktionsleiste — der Entwurf wird dann mitgesichert.
+                </p>
+              </div>
            )}

            {selectedVariantForEdit && (
--- a/frontend/src/components/exercises/ExerciseListBulkModal.jsx
+++ b/frontend/src/components/exercises/ExerciseListBulkModal.jsx
@ -1,5 +1,6 @@
 import React from 'react'
 import { activeClubMemberships } from '../../utils/activeClub'
+import { EXERCISE_VISIBILITY_FIELD_LABEL } from '../../constants/exerciseGovernanceLabels'
 import MultiSelectCombo from '../MultiSelectCombo'

 /**
@ -83,7 +84,7 @@ export default function ExerciseListBulkModal({
            Primärzuordnung.
          </p>
          <div className="form-row">
-            <label className="form-label">Sichtbarkeit</label>
+            <label className="form-label">{EXERCISE_VISIBILITY_FIELD_LABEL}</label>
            <select className="form-input" value={bulkVisibility} onChange={(e) => setBulkVisibility(e.target.value)}>
              {bulkVisibilityOptions.map((o) => (
                <option key={o.id === '' ? '_unchanged' : o.id} value={o.id}>
--- a/frontend/src/components/exercises/ExerciseListCard.jsx
+++ b/frontend/src/components/exercises/ExerciseListCard.jsx
@ -21,6 +21,7 @@ import {
 } from 'lucide-react'
 import ExerciseRichTextBlock from '../ExerciseRichTextBlock'
 import { coerceApiNameList } from '../../utils/sanitizeHtml'
+import { EXERCISE_VISIBILITY_FIELD_LABEL } from '../../constants/exerciseGovernanceLabels'
 import { canUserRequestExerciseDelete } from '../../utils/exercisePermissions'

 const VIS_LABELS = { official: 'Global', club: 'Verein', private: 'Privat' }
@ -118,7 +119,7 @@ function ExerciseCardScopeStatus({ exercise }) {
    <div
      className="exercise-card__meta-compact"
      title={tip}
-      aria-label={`Sichtbarkeit: ${visLabel}. Status: ${stLabel}.`}
+      aria-label={`${EXERCISE_VISIBILITY_FIELD_LABEL}: ${visLabel}. Status: ${stLabel}.`}
    >
      <span className="exercise-card__meta-glyph">
        <VisIcon size={15} strokeWidth={2} aria-hidden />
--- a/frontend/src/components/exercises/ExerciseListFilterModal.jsx
+++ b/frontend/src/components/exercises/ExerciseListFilterModal.jsx
@ -1,5 +1,6 @@
 import React from 'react'
 import { SKILL_LEVEL_OPTIONS } from '../../constants/skillLevels'
+import { EXERCISE_VISIBILITY_FIELD_LABEL } from '../../constants/exerciseGovernanceLabels'
 import SkillTreeMultiSelect from '../SkillTreeMultiSelect'
 import ExerciseFocusRulePicker from '../ExerciseFocusRulePicker'
 import CatalogRulePicker from '../CatalogRulePicker'
@ -56,7 +57,7 @@ export default function ExerciseListFilterModal({
            Zwischen den Bereichen gilt <strong>UND</strong>. Fokusbereiche: mehrere „+ mit“ bedeuten alle müssen
            gesetzt sein; „− ohne“ schließt Übungen aus, die diesen Fokus zusätzlich haben. Stilrichtung /
            Trainingsstil / Zielgruppe: mehrere „+“ = alle zutreffend (UND); „−“ verbietet die Zuordnung. Unter
-            „Freigabe“: Sichtbarkeit / Status mit „+“ = eine davon (ODER); „−“ blendet aus.
+            „Freigabe“: Freigabelevel / Status mit „+“ = eine davon (ODER); „−“ blendet aus.
          </p>

          <section className="exercise-filter-section">
@ -155,7 +156,7 @@ export default function ExerciseListFilterModal({
          <section className="exercise-filter-section">
            <h4 className="exercise-filter-section-title">Ausblenden / Liste</h4>
            <p className="muted" style={{ marginTop: 0, marginBottom: '12px', fontSize: '13px' }}>
-              Sichtbarkeit und Status steuern Sie unter „Freigabe“ mit + und −. Hier nur globale Listen-Optionen.
+              Freigabelevel und Status steuern Sie unter „Freigabe“ mit + und −. Hier nur globale Listen-Optionen.
            </p>
            <div style={{ marginTop: '6px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
              <label
@ -199,12 +200,12 @@ export default function ExerciseListFilterModal({
            </p>
            <div className="exercise-filters-modal-grid exercise-filters-modal-grid--two exercise-filters-modal-grid--catalog">
              <CatalogRulePicker
-                label="Sichtbarkeit"
+                label={EXERCISE_VISIBILITY_FIELD_LABEL}
                options={visibilityOptions}
                rules={filters.visibility_rules}
                rulesFieldName="visibility_rules"
                idKind="string"
-                placeholder="Sichtbarkeit …"
+                placeholder="Freigabelevel …"
                onPatch={(patch) => setFilters((prev) => ({ ...prev, ...patch }))}
              />
              <CatalogRulePicker
--- a/frontend/src/components/exercises/ExercisesListPageRoot.jsx
+++ b/frontend/src/components/exercises/ExercisesListPageRoot.jsx
@ -373,7 +373,7 @@ function ExercisesListPageRoot() {
      bulkPatchTargetGroups
    if (!bulkVisibility && !bulkStatus && !anyRelationPatch) {
      alert(
-        'Bitte mindestens eine Änderung wählen (Sichtbarkeit, Status oder eine der Zuordnungen mit gesetztem Häkchen „ersetzen“).'
+        'Bitte mindestens eine Änderung wählen (Freigabelevel, Status oder eine der Zuordnungen mit gesetztem Häkchen „ersetzen“).'
      )
      return
    }
--- a/frontend/src/components/exercises/SaveSelectedExercisesAsModuleModal.jsx
+++ b/frontend/src/components/exercises/SaveSelectedExercisesAsModuleModal.jsx
@ -9,6 +9,7 @@ import { activeClubMemberships, getDefaultClubIdForGovernanceForms } from '../..
 import { hydrateExercisePlanningRow } from '../../utils/trainingUnitSectionsForm'
 import { buildRowsPayload, moduleItemToPayload } from '../../utils/exerciseListSelection'
 import { navigateWithAppReturn } from '../../utils/navReturnContext'
+import { EXERCISE_VISIBILITY_FIELD_LABEL } from '../../constants/exerciseGovernanceLabels'

 /**
 * Erstellt ein Trainingsmodul aus per Checkbox ausgewählten Übungen (Reihenfolge = Auswahlreihenfolge).
@ -174,7 +175,7 @@ export default function SaveSelectedExercisesAsModuleModal({
        if (Number.isFinite(fallback) && fallback > 0) cid = fallback
      }
      if (visibility === 'club' && (!Number.isFinite(cid) || cid < 1)) {
-        toast.error('Bitte einen Verein wählen (Sichtbarkeit „Verein“).')
+        toast.error('Bitte einen Verein wählen (Freigabelevel „Verein“).')
        return
      }
      if (visibility !== 'club') cid = null
@ -275,7 +276,7 @@ export default function SaveSelectedExercisesAsModuleModal({
                  </div>

                  <div className="form-row" style={{ marginBottom: '0.85rem' }}>
-                    <label className="form-label">Sichtbarkeit</label>
+                    <label className="form-label">{EXERCISE_VISIBILITY_FIELD_LABEL}</label>
                    <select
                      className="form-input"
                      value={visibility}
--- a/frontend/src/constants/exerciseGovernanceLabels.js
+++ b/frontend/src/constants/exerciseGovernanceLabels.js
@ -0,0 +1,4 @@
+/** UI-Bezeichnung für `exercises.visibility` (API/DB-Feldname unverändert). */
+export const EXERCISE_VISIBILITY_FIELD_LABEL = 'Freigabelevel'
+
+export const EXERCISE_VISIBILITY_CLUB_FIELD_LABEL = 'Verein (Freigabelevel)'
--- a/frontend/src/utils/exerciseListFilterChips.js
+++ b/frontend/src/utils/exerciseListFilterChips.js
@ -1,4 +1,5 @@
 import { SKILL_LEVEL_OPTIONS } from '../constants/skillLevels'
+import { EXERCISE_VISIBILITY_FIELD_LABEL } from '../constants/exerciseGovernanceLabels'

 const LEVEL_FILTER_OPTS = SKILL_LEVEL_OPTIONS.filter((o) => o.level != null)

@ -164,7 +165,7 @@ export function buildExerciseListFilterChips({
    'visibility_rules',
    filters.visibility_rules,
    visibilityOptions,
-    'Sichtbarkeit',
+    EXERCISE_VISIBILITY_FIELD_LABEL,
    setFilters
  )
  pushCatalogRuleFilterChips(chips, 'status_rules', filters.status_rules, statusOptions, 'Status', setFilters)