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:
@@ -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;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user