From c05cfbbe383c452c23ad74e05368cecca7bfced7 Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Wed, 5 Nov 2025 15:39:34 +0100 Subject: [PATCH] Refactor MemberTransferDialog to improve configuration handling and UI Updated the MemberTransferDialog component to enhance user experience by displaying configuration summaries and handling missing configurations more effectively. Removed redundant form sections and added conditional rendering for login credentials. Improved validation logic for transfer settings and introduced new styles for better visual clarity. --- .../src/components/MemberTransferDialog.vue | 340 +++++++++--------- 1 file changed, 172 insertions(+), 168 deletions(-) diff --git a/frontend/src/components/MemberTransferDialog.vue b/frontend/src/components/MemberTransferDialog.vue index c39855b..0ac0b62 100644 --- a/frontend/src/components/MemberTransferDialog.vue +++ b/frontend/src/components/MemberTransferDialog.vue @@ -12,160 +12,81 @@
-
-

Server-Konfiguration

- -
- - - Aus Einstellungen geladen (nur lesend) -
+
+

Keine Konfiguration gefunden

+

Bitte konfigurieren Sie zuerst die Mitgliederübertragung in den Einstellungen.

+ + Zu den Einstellungen +
-
-

Login-Konfiguration

- -
- - - Optional: Relativer Pfad zum Login-Endpoint -
- -
- - -
- -
- -
-
- - +
+
+

Übertragungskonfiguration

+
+
+ Server: + {{ config.server }}
-
- - +
+ Endpoint: + {{ config.transferEndpoint }} +
+
+ Methode: + {{ config.transferMethod }} +
+
+ Format: + {{ config.transferFormat }} +
+
+ Modus: + {{ config.useBulkMode ? 'Bulk-Import' : 'Einzeln' }}
- Zusätzliche Felder werden nur verwendet, wenn sie ausgefüllt sind -
-
- -
-

Übertragungs-Konfiguration

- -
- - - Relativer Pfad zum Übertragungs-Endpoint -
- -
-
- - -
- -
- - -
+ + Konfiguration bearbeiten +
-
- - Wenn aktiviert, werden alle Mitglieder in einem Request als Array übertragen. Das Template definiert das Format für ein einzelnes Mitglied. -
- -
- - -
- Verfügbare Platzhalter: -
    -
  • {{firstName}} - Vorname
    • -
  • {{lastName}} - Nachname
    • -
  • {{fullName}} - Vollständiger Name
    • -
  • {{email}} - E-Mail-Adresse
    • -
  • {{phone}} - Telefonnummer
    • -
  • {{street}} - Straße
    • -
  • {{city}} - Ort
    • -
  • {{birthDate}} - Geburtsdatum (YYYY-MM-DD)
    • -
  • {{geburtsdatum}} - Geburtsdatum (YYYY-MM-DD, alternativ)
    • -
  • {{address}} - Kombinierte Adresse (Straße, Ort)
    • -
  • {{ttr}} - TTR-Wert
    • -
  • {{qttr}} - QTTR-Wert
    • -
  • {{gender}} - Geschlecht
    • -
-

Beispiel JSON (für einzelnes Mitglied):

- 
{{ jsonExample }}
-

- Bulk-Modus aktiv: Das Template wird für jedes Mitglied angewendet und automatisch in {"members": [...]} gewrappt. -

+
+

Login-Daten (optional überschreiben)

+

Die Login-Daten werden aus den Einstellungen verwendet. Sie können sie hier überschreiben, falls nötig.

+ +
+ +
+
+ + +
+
+ + +
+
+ Nur ausfüllen, wenn Sie die gespeicherten Login-Daten überschreiben möchten. Leere Felder verwenden die gespeicherten Werte.
@@ -204,6 +125,10 @@ export default { ...mapGetters(['currentClub']), isValid() { + return this.hasConfig && !!(this.config.server && this.config.transferEndpoint && this.config.transferTemplate); + }, + + hasConfig() { return !!(this.config.server && this.config.transferEndpoint && this.config.transferTemplate); }, @@ -219,17 +144,6 @@ export default { return 'Feldname: Wert (z.B. client_secret: xyz789)'; } return 'Zusätzliches Feld (z.B. client_secret)'; - }, - - jsonExample() { - return JSON.stringify({ - firstName: "{{firstName}}", - lastName: "{{lastName}}", - geburtsdatum: "{{geburtsdatum}}", - email: "{{email}}", - phone: "{{phone}}", - address: "{{address}}" - }, null, 2); } }, data() { @@ -242,7 +156,8 @@ export default { transferMethod: 'POST', transferFormat: 'json', transferTemplate: '', - useBulkMode: false + useBulkMode: false, + bulkWrapperTemplate: '' }, loginCredentials: { username: '', @@ -283,14 +198,15 @@ export default { this.config.transferFormat = savedConfig.transferFormat || 'json'; this.config.transferTemplate = savedConfig.transferTemplate || ''; this.config.useBulkMode = savedConfig.useBulkMode || false; + this.config.bulkWrapperTemplate = savedConfig.bulkWrapperTemplate || ''; - // Login-Credentials (Passwort wird nicht zurückgegeben, nur wenn vorhanden) - if (savedConfig.loginCredentials) { - this.loginCredentials.username = savedConfig.loginCredentials.username || ''; - this.loginCredentials.password = ''; // Passwort wird nicht zurückgegeben - // Zusätzliche Felder können nicht direkt zugewiesen werden, da sie verschlüsselt sind - // Benutzer muss diese neu eingeben - } + // Login-Credentials zurücksetzen (werden nur verwendet, wenn im Dialog eingegeben) + this.loginCredentials = { + username: '', + password: '', + additionalField1: '', + additionalField2: '' + }; } } catch (error) { // Keine Konfiguration vorhanden - das ist OK, Dialog bleibt leer @@ -315,7 +231,8 @@ export default { transferMethod: 'POST', transferFormat: 'json', transferTemplate: '', - useBulkMode: false + useBulkMode: false, + bulkWrapperTemplate: '' }; this.loginCredentials = { username: '', @@ -367,7 +284,8 @@ export default { transferMethod: this.config.transferMethod, transferFormat: this.config.transferFormat, transferTemplate: this.config.transferTemplate, - useBulkMode: this.config.useBulkMode + useBulkMode: this.config.useBulkMode, + bulkWrapperTemplate: this.config.bulkWrapperTemplate || null }; // Login-Konfiguration nur hinzufügen, wenn Endpoint vorhanden @@ -578,6 +496,92 @@ export default { color: #666; } +.config-missing { + text-align: center; + padding: 2rem; + background-color: #fff3cd; + border: 1px solid #ffc107; + border-radius: 6px; + color: #856404; +} + +.config-missing p { + margin: 0.5rem 0; +} + +.btn-link { + display: inline-block; + margin-top: 1rem; + padding: 0.75rem 1.5rem; + background-color: #007bff; + color: white; + text-decoration: none; + border-radius: 4px; + font-weight: 500; + transition: background-color 0.2s; +} + +.btn-link:hover { + background-color: #0056b3; +} + +.config-summary { + background-color: #f8f9fa; + border: 1px solid #dee2e6; + border-radius: 6px; + padding: 1.5rem; + margin-bottom: 1.5rem; +} + +.config-summary h4 { + margin: 0 0 1rem 0; + color: #333; + font-size: 1.1em; +} + +.summary-info { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1rem; +} + +.summary-row { + display: flex; + gap: 1rem; +} + +.summary-label { + font-weight: 600; + color: #555; + min-width: 100px; +} + +.summary-value { + color: #333; + font-family: 'Courier New', monospace; + font-size: 0.9em; +} + +.btn-link-small { + display: inline-block; + color: #007bff; + text-decoration: none; + font-size: 0.9em; + font-weight: 500; +} + +.btn-link-small:hover { + text-decoration: underline; +} + +.section-hint { + margin: 0 0 1rem 0; + font-size: 0.9em; + color: #666; + font-style: italic; +} + .btn-primary { background-color: #007bff; color: white;