60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
// static/js/components/FormMessage.js
|
|
|
|
export const FormMessage = {
|
|
name: 'FormMessage',
|
|
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>
|
|
`
|
|
};
|