feat(MembersView): add HTML support for info dialog details

- Introduced a new property `detailsHtml` to the info dialog for rendering HTML content.
- Added a new method `showInfoHtml` to display messages with HTML details.
- Updated the Click-TT application submission flow to utilize the new HTML details feature for improved user feedback.
This commit is contained in:
Torsten Schulz (local)
2026-03-11 20:19:16 +01:00
parent 9d13a2e211
commit 36ed320893

View File

@@ -317,6 +317,7 @@
:title="infoDialog.title"
:message="infoDialog.message"
:details="infoDialog.details"
:details-html="infoDialog.detailsHtml"
:type="infoDialog.type"
/>
@@ -434,6 +435,7 @@ export default {
title: '',
message: '',
details: '',
detailsHtml: '',
type: 'info'
},
confirmDialog: {
@@ -497,6 +499,13 @@ export default {
async showInfo(title, message, details = '', type = 'info') {
this.infoDialog = buildInfoConfig({ title, message, details, type });
},
async showInfoHtml(title, message, detailsHtml = '', type = 'info') {
this.infoDialog = {
...buildInfoConfig({ title, message, details: '', type }),
detailsHtml
};
},
async showConfirm(title, message, details = '', type = 'info', options = {}) {
return new Promise((resolve) => {
@@ -675,21 +684,19 @@ export default {
this.clickTtPendingMemberIds = [...this.clickTtPendingMemberIds, member.id];
try {
const response = await apiClient.post(`/clubmembers/clicktt-registration/${this.currentClub}/${member.id}`);
const detailsText = this.formatClickTtDetails(response.data?.details);
if (response.data?.success) {
member.clickTtApplicationSubmitted = true;
const successDetails = [response.data.finalUrl || '', detailsText].filter(Boolean).join('\n\n');
await this.showInfo(
await this.showInfoHtml(
'Click-TT-Antrag',
getSafeMessage(response.data.message, 'Der Click-TT-Antrag wurde erfolgreich eingereicht.'),
successDetails,
'Bitte loggen Sie sich noch auf click-tt ein und senden Sie den Antrag ab.',
'<a href="https://httv.click-tt.de" target="_blank" rel="noopener noreferrer">click-tt</a>',
'success'
);
} else {
await this.showInfo(
'Click-TT-Antrag',
getSafeMessage(response.data?.error, 'Der Click-TT-Antrag konnte nicht eingereicht werden.'),
detailsText,
'',
'error'
);
}
@@ -699,48 +706,13 @@ export default {
await this.showInfo(
'Click-TT-Antrag',
errorMessage,
this.formatClickTtDetails(error?.response?.data?.details),
'',
'error'
);
} finally {
this.clickTtPendingMemberIds = this.clickTtPendingMemberIds.filter(id => id !== member.id);
}
},
formatClickTtDetails(details) {
if (!details) {
return '';
}
const parts = [];
const selected = details.selectedSearchResult;
const lastSubmit = details.lastSubmitResult;
if (selected?.name || selected?.birthDate || selected?.href) {
parts.push([
'Ausgewaehlter Suchtreffer:',
selected?.name ? `Name: ${selected.name}` : '',
selected?.birthDate ? `Geburtsdatum: ${selected.birthDate}` : '',
selected?.href ? `Link: ${selected.href}` : ''
].filter(Boolean).join('\n'));
}
if (lastSubmit?.action || lastSubmit?.applicant || lastSubmit?.pageText) {
parts.push([
'Ergebnis letzter Submit:',
lastSubmit?.action ? `Aktion: ${lastSubmit.action}` : '',
lastSubmit?.applicant
? `Antrag fuer: ${[
lastSubmit.applicant.lastName,
lastSubmit.applicant.firstName
].filter(Boolean).join(', ')}${lastSubmit.applicant.birthDate ? ` (${lastSubmit.applicant.birthDate})` : ''}`
: '',
lastSubmit?.url ? `URL: ${lastSubmit.url}` : '',
lastSubmit?.pageText ? `Seitenstatus: ${lastSubmit.pageText}` : ''
].filter(Boolean).join('\n'));
}
return parts.join('\n\n');
},
toggleNewMember() {
this.memberFormIsOpen = !this.memberFormIsOpen;
},