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.
2025-03-26 11:04:32 +01:00
parent 726681d3fe
commit a169868ddc
4 changed files with 133 additions and 16 deletions
@@ -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) => {
      </div>
      <template v-if="isValidatorDefined(field.validation)">
        <!-- Select (If the field has options) -->
-        <div class="select is-fullwidth" v-if="getFieldOptions(field)">
+        <div class="select is-fullwidth" v-if="getFieldOptions(field).length > 0">
          <select :required="isFieldRequired(field)" :name="field.id" :id="field.id" @change="onFieldChange(field, $event.target.value)" v-model="fieldValues[field.id]" :disabled="isFieldLocked(field)">
            <!-- Loop through the options, while creating the select options -->
            <template v-for="(option, index) in getFieldOptions(field)">
@@ -3,7 +3,7 @@ import PageTitle from "@/components/global/PageTitle.vue";
 import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import DepartmentSubPageWrapper from "@/views/dashboards/superUserDashboard/department/DepartmentSubPageWrapper.vue";
-import { setDepartment, department, getDepartmentPrice, editDepartmentPrice, getDepartmentData } from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
+import { setDepartment, departmentAdvanced, getDepartmentPrice, editDepartmentPrice, getDepartmentData } from "@/views/dashboards/superUserDashboard/department/SuperUserSelectedDepartmentObject.vue";
 import { useRouter } from 'vue-router'
 import { ref } from 'vue';
 import { getProducts } from "@/components/shop/Products.vue";
@@ -47,7 +47,7 @@ loadAvailableBrands();
        <PageTitle title="Department" subtitle="Department pricing" />
      </template>
      <div>
-        <DepartmentCreatebrandForm v-bind:department="department" />
+        <DepartmentCreatebrandForm v-bind:department="departmentAdvanced" />
        <code>{{ branding }}</code>
      </div>
    </DepartmentSubPageWrapper>
@@ -14,6 +14,12 @@ const default_department = {
  prices: []
 };

+const default_department_functions = {
+  isLoaded() {
+    return this.id !== null;
+  }
+};
+

 // Define the department object
 export const department = {
@@ -26,7 +32,8 @@ export const department = {
 }

 export const departmentAdvanced = ref({
-  ...default_department
+  ...default_department,
+  ...default_department_functions
 });

 const isDepartmentPricesLoaded = ref(false);
@@ -47,6 +54,11 @@ export const getDepartmentData = async () => {
        department.description.value = response.data.data.description;
        department.created_at.value = response.data.data.created_at;
        department.updated_at.value = response.data.data.updated_at;
+        departmentAdvanced.value = {
+          ...default_department,
+          ...response.data.data,
+          ...default_department_functions
+        };
      })
 }

@@ -8,14 +8,34 @@ const props = defineProps({
    required: true
  },
 })
+
+const validator_options = ref({
+  validateDepartmentId: {
+    default: props.department.id,
+    locked: true,
+    visible: false
+  }
+})
+
+const field_options = ref({})
+
+const field_attributes = ref({
+  name: {
+    default: props.department.name,
+  },
+  description: {
+    default: props.department.description,
+  }
+})
 </script>

 <template>
-  <div>
-    {{props}}
+  <div v-if="props.department.isLoaded()">
    <FormDisplay
        :form_identifier="'CREATE_BRANDING'"
-        v-bind:validator_options="{validateDepartmentId: {default: props.department.id, locked: true}}"
+        v-bind:validator_options="validator_options"
+        v-bind:field_options="field_options"
+        v-bind:form_field_options="field_attributes"
    />
  </div>
 </template>