Render

Konfigürasyonu yapılmış bütün form datalarını render ettiğimiz alan burasıdır.

Build alanında düzenlenmiş olan form elementlerini önizlemek için view alanı kullanılır. Bu alan iki temel özelliği test etme olanağı sağlar:

• Conditionlara bağlı render edilmesi ya da gizlenmesi
• Validationa bağlı olarak elementleri tetiklemek

ViewRender.vue recursive componenti render edilir ve sürekli kendini çağırır.

<template v-for="element in elements">
  <template v-if="formStore.activeTabMenu == element.tab_menu">
    <!-- // controltype  divcontrol ise recurisive cagir -->
    <template v-if="element.control_type == 'divcontrol'">
      <template v-if="isConditionValid(element)">
        <div class="mb-3" :class="element.class">
          <!-- // recurisive renderview component -->
          <component
            :key="element.id"
            is="ViewRender"
            :elements="element.child"
          ></component>
        </div>
      </template>
    </template>

    <!-- // controltype  fieldelement ise elementi gertir-->
    <!-- // conditions use display visible -->
    <template v-if="element.control_type == 'fieldcontrol'">
      <template v-if="isConditionValid(element)">
        <div class="mb-3" :class="element.class">
          <label>{{ element.label }}</label>
          <!-- // html element -->
          <component
            :key="element.id"
            :is="getComponentName(element.html_element)"
            :column="element"
            :isValidate="isValidate(element)"
          ></component>
        </div>
      </template>
    </template>
  </template>
</template>

Condition Render

Condition bir elementin gözükmesine ya da gizlenmesine ait true ya da false değeri döndürür. Bu durumda recursive olarak bütün şartlar kontrol edilir.

isConditionValid()

change condition state

// is condition valid
const isConditionValid = (element) => {
  let status = true;

  element.conditions.forEach((cond) => {
    let orStatusArray = [];
    cond.or.forEach((elOr) => {
      console.log("elOr :>> ", elOr);
      let currentElement = formStore.findElementNameRecursive(
        formStore.data,
        elOr.field
      );
      console.log("currentElement :>> ", currentElement);

      // eger bossa gosterme degilse goster
      if (elOr.cond == "is_not_empty") {
        if (!currentElement.value || currentElement.value == "") {
          orStatusArray.push(false);
        } else {
          orStatusArray.push(true);
        }
      }

      // eger esitse goster degilse gosterme
      if (elOr.cond == "is_equal_to") {
        if (currentElement.value != elOr.equal) {
          orStatusArray.push(false);
        } else {
          orStatusArray.push(true);
        }
      }

      // eger >than goster degilse gosterme
      if (elOr.cond == ">than") {
        if (currentElement.value > elOr.equal) {
          orStatusArray.push(false);
        } else {
          orStatusArray.push(true);
        }
      }

      // eger >=than goster degilse gosterme
      if (elOr.cond == ">=than") {
        if (currentElement.value >= elOr.equal) {
          orStatusArray.push(false);
        } else {
          orStatusArray.push(true);
        }
      }

      // eger <than goster degilse gosterme
      if (elOr.cond == "<than") {
        if (currentElement.value < elOr.equal) {
          orStatusArray.push(false);
        } else {
          orStatusArray.push(true);
        }
      }

      // eger <=than goster degilse gosterme
      if (elOr.cond == "<=than") {
        if (currentElement.value <= elOr.equal) {
          orStatusArray.push(false);
        } else {
          orStatusArray.push(true);
        }
      }

      //starts_with
      //endswith
    });

    let orStatus = true; // defaul orStatus true cunku eger sart varsa o zmana or secici olsun
    if (orStatusArray.length > 0) {
      orStatus = orStatusArray.some((deger) => deger === true);
    }

    console.log("orStatusArray :>> ", orStatusArray);
    console.log("orStatus :>> ", orStatus);
    status = status && orStatus;
  });

  console.log("status :>> ", status);
  return status;
};

Validation Render

Validation, elementin özelliklerinde ayarlanmış olan bütün şartlar kontrol edilir.

isValidate()

change validation state

const isValidate = (element) => {
  let currentElement = formStore.findElementRecursive(
    formStore.data,
    element.id
  );
  let isValidState = true;
  // console.log("element.value :>> ", element.value.length);

  // required
  if (element.validation.required) {
    if (!element.value || element.value == "") {
      element.validation.error_message = `filed required`;
      isValidState = false;
    }
  }

  //minlength
  if (
    element.validation.min_length != 0 &&
    element?.value?.length < element.validation.min_length
  ) {
    element.validation.error_message = `min ${element.validation.min_length} character in must`;
    isValidState = false;
  }

  //maxlength
  if (
    element.validation.max_length != 0 &&
    element?.value?.length > element.validation.max_length
  ) {
    element.validation.error_message = `max ${element.validation.max_length} character in must`;
    isValidState = false;
  }

  // Başlangıç ve bitişteki / karakterlerini kaldırın
  var regex = new RegExp(
    // Şimdi deseni RegExp constructor'ına geçirebilirsiniz
    element.validation.regex.replace(/^\//, "").replace(/\/$/, "")
  );

  if (regex instanceof RegExp) {
    console.log("regex", regex);
    if (!regex.test(element.value)) {
      element.validation.error_message = `${element.validation.regex_error_message}`;
    }
    isValidState = isValidState && regex.test(element.value);
  }

  console.log("isValidState :>> ", isValidState);
  currentElement.validation.isValid = isValidState;
  return isValidState;
};