From a169868ddc241558abda2eefb20233070d0ba4d1 Mon Sep 17 00:00:00 2001 From: Jepp9350 <2jepp9350@gmail.com> Date: Wed, 26 Mar 2025 11:04:32 +0100 Subject: [PATCH] Refactor department and form logic for improved flexibility Replaced `department` with `departmentAdvanced` for enhanced logic, introducing reusable functions and default configurations. Extended `FormDisplay` with customizable `field_options`, `form_field_options`, and `validator_options` to support dynamic validation and field attributes. --- src/components/displays/FormDisplay.vue | 105 ++++++++++++++++-- .../department/DepartmentProfile.vue | 4 +- .../SuperUserSelectedDepartmentObject.vue | 14 ++- .../profile/DepartmentCreatebrandForm.vue | 26 ++++- 4 files changed, 133 insertions(+), 16 deletions(-) diff --git a/src/components/displays/FormDisplay.vue b/src/components/displays/FormDisplay.vue index 9b159195..04170831 100644 --- a/src/components/displays/FormDisplay.vue +++ b/src/components/displays/FormDisplay.vue @@ -21,9 +21,35 @@ const props = defineProps({ default: () => { return {}; } + }, + /** + * This adds the options to the fields + * + */ + field_options: { + type: Object, + default: () => { + return {}; + } + }, + /** + * This adds the attributes to the form field + * E.g. { name: { placeholder: 'Enter your name', default: 'John Doe', locked: true, visible: false } } + */ + form_field_options: { + type: Object, + default: () => { + return {}; + } } }) +const default_validator_options = { + validateBookingId: { + visible: true, + } +} + const reCAPTCHA_data = ref({ enabled: false, site_key: '', @@ -79,6 +105,7 @@ const fieldErrors = ref([]); const validators = [ { + ...default_validator_options, name: 'validateCustomerNumber', description: 'the E-conomic customer number', type: 'number', @@ -86,9 +113,11 @@ const validators = [ min: 1, max: 999999999, default: SessionUser.user.customer_number, - locked: SessionUser.functions.hasToken() + locked: SessionUser.functions.hasToken(), + ...props.validator_options.validateCustomerNumber ?? {} }, { + ...default_validator_options, name: 'validateBookingId', description: 'the booking id', type: 'number', @@ -98,66 +127,87 @@ const validators = [ ...props.validator_options.validateBookingId ?? {} }, { + ...default_validator_options, name: 'validateEmail', description: 'the email address', type: 'email', required: true, + ...props.validator_options.validateEmail ?? {} }, { + ...default_validator_options, name: 'validateString', description: 'the string', type: 'text', required: true, + ...props.validator_options.validateString ?? {} }, { + ...default_validator_options, name: 'validateRegistrationNumber', description: 'the registration number', type: 'text', required: true, min: 3, max: 12, + ...props.validator_options.validateRegistrationNumber ?? {} }, { + ...default_validator_options, name: 'validateBoolean', description: 'the boolean', type: 'checkbox', required: false, + ...props.validator_options.validateBoolean ?? {} }, { + ...default_validator_options, name: 'validateDate', description: 'the date', type: 'date', required: true, + ...props.validator_options.validateDate ?? {} }, { + ...default_validator_options, name: 'validateArray', description: 'the array', type: 'array', required: true, + ...props.validator_options.validateArray ?? {} }, { + ...default_validator_options, name: 'validateObject', description: 'the object', type: 'object', required: true, + ...props.validator_options.validateObject ?? {} }, { + ...default_validator_options, name: 'validateInt', description: 'the integer', type: 'number', required: true, + ...props.validator_options.validateInt ?? {} }, { + ...default_validator_options, name: 'validateDepartmentId', description: 'the integer', type: 'number', required: true, + min: 1, + ...props.validator_options.validateDepartmentId ?? {} }, { + ...default_validator_options, name: 'validateRecaptcha', description: 'The recaptcha token', type: 'text', required: true, + ...props.validator_options.validateRecaptcha ?? {} }, ]; @@ -274,19 +324,37 @@ const isCheckboxChecked = (field) => { } const isFieldLocked = (field) => { + let result = false; const validator = getValidator(field.validation); // Check if the locked property is set - if (validator.locked === undefined) { + if (validator.locked !== undefined) { //console.log('locked is undefined', field); - return false; + result = validator.locked === true; } //console.log('locked', field, result, validator); - return validator.locked; + return result; } const getFieldOptions = (field) => { try { - return field.options; + let result = { + ...field.options, + ...props.field_options[field.name] ?? {} + }; + console.log(result); + return result; + } + catch (e) { + return {}; + } +} + +const getFieldMetadata = (field) => { + try { + return { + ...field.metadata, + ...props.form_field_options[field.name] ?? {} + }; } catch (e) { return {}; @@ -340,7 +408,8 @@ const setDefaultValues = () => { } // Check if the field has a default value if (field.metadata.default !== undefined) { - fieldValues.value[field.id] = field.metadata.default; + // Get the options for the field + fieldValues.value[field.id] = getFieldDefaultValue(field.id) ?? field.metadata.default ?? null; } } } @@ -352,10 +421,18 @@ SessionUser.objects.forms.get.single(props.form_identifier).then((response) => { let fields_tmp = []; for (const field_index in response.fields) { const field = response.fields[field_index]; - fields_tmp.push({ + const field_metadata = getFieldMetadata(field); + console.log(getFieldMetadata(field)); + let field_tmp = { ...field_default, - ...field - }); + ...field, + metadata: { + ...field.metadata, + ...field_metadata + } + }; + console.log(field_tmp); + fields_tmp.push(field_tmp); } fields.value = fields_tmp; setDefaultValues(); @@ -397,8 +474,16 @@ const isFieldRequired = (field) => { return result; } +const isValidatorVisible = (validator) => { + return validator.visible ?? true; +} + const isFieldDisplayable = (field) => { let result = true; + // Check if the validator is visible (by default it is) + if (isValidatorVisible(getValidator(field.validation)) === false) { + result = false; + } // Check if the field has a display_if property if (field.metadata.display_if !== undefined && field.metadata.display_if_value !== undefined) { // Check if the field is displayable @@ -435,7 +520,7 @@ watch(SessionUser.permissions, (permissions) => {