Conditions

Condition, bir elementin gözükmesine ya da gizlenmesine ait true ya da false değeri döndürür. Bu süreçte, belirlenen tüm şartlar recursive olarak kontrol edilir.

Recursive olarak istediğimiz kadar şart ekleyebiliriz. Bunu yapmamızı sağlayan, bir nested (iç içe) tabloya sahibiz. Burada en önemli kısım, her AND bloğunun kendi içinde OR olarak eklenen şartlara sahip olmasıdır. Bu şartlardan en az birinin sağlanması AND bloğunu true olarak döndürürken, en az bir AND bloğunun false döndürmesi bütün condition şartını false olarak döndürür ve şart koşullarını sağlamayan form elementi render edilmez.

Bu konuda nasıl çalıştığına dair detaylı bilgiye ulaşmak için Form Condition Render bölümüne bakılabilir. Burada kullanılan data referansı ise her bir elemente ait /conditions[] alanı ile çalışmaktadır.

Bu yapı, form elementlerinin kullanıcı tarafından belirlenen şartlara göre dinamik bir şekilde gösterilmesini veya gizlenmesini sağlar. Böylece, formun kullanıcı etkileşimi ve görsel akışı, formun mantığına ve kullanım senaryolarına uygun şekilde optimize edilebilir.

<div class="modal-body">
  <!-- Andlerin siralanmasi  -->
  <div
    class="mb-5"
    v-for="(elCond, elCondIndex) in formStore.selectedElement
        .conditions"
    :key="elCondIndex"
  >
    <!-- Orlarin siralanmasi -->
    <template v-for="(elOr, elOrIndex) in elCond.or">
      <div
        class="d-flex align-items-center gap-1 pb-5 or-element-container position-relative"
        :class="elOrIndex != 0 ? 'ms-10 ps-2' : ''"
      >
        <!-- eger ilk elemansa and oalrak degilse andin orlari olarak goster ui duzenlemeri icin -->
        <template v-if="elOrIndex == 0">
          <button
            class="delete-hover hide-on-not-hover bg-danger position-absolute justify-content-center align-items-center rounded-circle"
            style="left: -15px; top: 0px; height: 25px; width: 25px"
            @click="deleteAnd(elCond)"
          >
            <i class="fa fa-trash text-light fs-7"></i>
          </button>
          <span>And</span>
        </template>
        <template v-if="elOrIndex != 0">
          <button
            class="delete-hover hide-on-not-hover bg-danger position-absolute justify-content-center align-items-center rounded-circle"
            style="left: -15px; top: 0; height: 25px; width: 25px"
            @click="deleteOr(elCond, elOr)"
          >
            <i class="fa fa-trash text-light fs-7"></i>
          </button>
          <span>Or</span>
        </template>

        <select v-model="elOr.field" class="form-control">
          <option
            v-for="item in fieldOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </select>

        <select v-model="elOr.cond" class="form-control">
          <option
            v-for="item in condOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </select>
        <template
          v-if="
                elOr.cond != 'is_empty' &&
                elOr.cond != 'is_not_empty' &&
                elOr.cond != ''
            "
        >
          <input
            class="form-control"
            placeholder="condition string here !"
            type="text"
            v-model="elOr.equal"
          />
        </template>
      </div>
    </template>
    <button class="ms-5 btn btn-primary p-2" @click="addNewOr(elCond.id)">
      Or
    </button>
  </div>
  <button @click="addNewAND" class="btn btn-primary p-2">AND</button>
  <div class="d-flex justify-content-end">
    <button @click="saveAndClose" class="btn btn-info bnt-sm">Save</button>
  </div>
</div>

fieldsOptions conndition icin kendisinden farkli butun elementleri recurisive olarak name alanlarini getiren methoddur.

const getFiledOptions = () => {
  if (formStore.data.length > 1 && formStore.selectedElement) {
    const allOtherFields = formStore.data
      .filter((allFiled) => allFiled.id != formStore.selectedElement.id)
      .map((allFiled) => {
        return { label: allFiled.name, value: allFiled.name };
      });

    fieldOptions.value = allOtherFields;
  }
};