106 lines
4.2 KiB
JavaScript
106 lines
4.2 KiB
JavaScript
// static/js/components/FormMessage.js
|
|
|
|
export const FormMessage = {
|
|
name: 'FormMessage',
|
|
// Static method for direct rendering
|
|
renderComponent(container, props, app) {
|
|
console.log('🔍 [DEBUG] FormMessage.renderComponent() aangeroepen');
|
|
console.log('🔍 [DEBUG] FormMessage container:', container);
|
|
console.log('🔍 [DEBUG] FormMessage props:', props);
|
|
|
|
if (!container) {
|
|
console.error('Container element niet gevonden voor FormMessage');
|
|
return null;
|
|
}
|
|
|
|
console.log('🔍 [DEBUG] FormMessage container gevonden, Vue app aan het initialiseren');
|
|
|
|
try {
|
|
// We controleren het app object
|
|
if (!app) {
|
|
console.error('🚨 [ERROR] Geen Vue app object ontvangen');
|
|
return null;
|
|
}
|
|
|
|
// Check of we een correcte Vue app hebben of we moeten er een maken
|
|
if (typeof app.mount !== 'function') {
|
|
console.log('🔍 [DEBUG] Ontvangen app heeft geen mount functie, dit is mogelijk een config object');
|
|
// Controleer of window.Vue beschikbaar is
|
|
if (!window.Vue || typeof window.Vue.createApp !== 'function') {
|
|
console.error('🚨 [ERROR] window.Vue.createApp is niet beschikbaar');
|
|
return null;
|
|
}
|
|
|
|
// Maak een nieuwe Vue app met het FormMessage component en de props
|
|
console.log('🔍 [DEBUG] Nieuwe Vue app aanmaken met FormMessage component');
|
|
app = window.Vue.createApp(FormMessage, props);
|
|
console.log('🔍 [DEBUG] Nieuwe app aangemaakt:', app);
|
|
}
|
|
|
|
// Nu kunnen we de app mounten
|
|
console.log('🔍 [DEBUG] App.mount aanroepen op container');
|
|
const instance = app.mount(container);
|
|
console.log('🔍 [DEBUG] FormMessage component succesvol gemount');
|
|
return instance;
|
|
} catch (error) {
|
|
console.error('🚨 [ERROR] Fout bij mounten FormMessage component:', error);
|
|
console.error('Error stack:', error.stack);
|
|
return null;
|
|
}
|
|
},
|
|
props: {
|
|
formData: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
formValues: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
hasFormData() {
|
|
return this.formData && this.formData.fields && Object.keys(this.formData.fields).length > 0;
|
|
},
|
|
formattedFields() {
|
|
if (!this.hasFormData) return [];
|
|
|
|
return Object.entries(this.formData.fields).map(([fieldId, field]) => {
|
|
let displayValue = this.formValues[fieldId] || '';
|
|
|
|
// Format different field types
|
|
if (field.type === 'boolean') {
|
|
displayValue = displayValue ? 'Ja' : 'Nee';
|
|
} else if (field.type === 'enum' && !displayValue && field.default) {
|
|
displayValue = field.default;
|
|
} else if (field.type === 'text') {
|
|
// Voor tekstgebieden, behoud witruimte
|
|
// De CSS zal dit tonen met white-space: pre-wrap
|
|
}
|
|
|
|
return {
|
|
id: fieldId,
|
|
name: field.name,
|
|
value: displayValue || '-',
|
|
type: field.type
|
|
};
|
|
});
|
|
}
|
|
},
|
|
template: `
|
|
<div v-if="hasFormData" class="form-message">
|
|
<div v-if="formData.name" class="form-message-header">
|
|
<i v-if="formData.icon" class="material-icons form-message-icon">{{ formData.icon }}</i>
|
|
<span class="form-message-title">{{ formData.name }}</span>
|
|
</div>
|
|
|
|
<div class="form-message-fields">
|
|
<div v-for="field in formattedFields" :key="field.id" class="form-message-field">
|
|
<div class="field-message-label">{{ field.name }}:</div>
|
|
<div class="field-message-value" :class="{'text-value': field.type === 'text'}">{{ field.value }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|