Control Panel for Draggable Element

Form üzerindeki her bir sürüklenebilir elementi ayrı ayrı olarak yönetebileceğiniz şekilde, kolon şemasına bağlı olarak elementlere ait alanlar oluşturulur. Bu kontrol paneli, form elementlerinin özelliklerini, düzenini ve diğer ayarlarını kolayca yapılandırmanıza olanak tanır.

Özellikler ve Yapılandırma

• Element Ayarları: Her bir sürüklenebilir element için, boyut, yerleşim, görünüm ve işlevsellik gibi özelliklerin ayarlanması mümkündür. Bu ayarlar, kullanıcı deneyimini ve formun etkileşimini doğrudan etkiler.

• Kolon Şeması: Elementlerin form üzerindeki yerleşimi, kolon şemasına bağlı olarak yönetilir. Bu, elementlerin sayfa içinde nasıl hizalandığını ve birbiriyle olan ilişkisini belirler.

• Özel Alanlar: Her element için özel olarak tanımlanabilecek alanlar, elementin özgün ihtiyaçlarını karşılamak üzere düzenlenebilir. Örneğin, bir seçim kutusunun (select box) mümkün seçenekleri veya bir metin alanının (text field) maksimum karakter sınırı gibi.

• Draggable Interface: Kullanıcılar, form elementlerini sürükleyip bırakarak kolayca yeniden düzenleyebilir. Bu, formun görsel akışını ve kullanıcı etkileşimini optimize etmek için hızlı ve etkili bir yol sunar.

Yönetim ve Erişim

Control panel, form yapısını ve elementlerin nasıl davranacağını merkezi bir noktadan yönetmek için kullanılır. Kullanıcılar, bu panel aracılığıyla formun genel yapısını ve her bir elementin özelliklerini görebilir ve düzenleyebilir.

Bu yaklaşım, form tasarım sürecini daha esnek ve kullanıcı dostu hale getirir. Kullanıcılar, form elementlerini ihtiyaçlarına göre özelleştirebilir ve formun genel işlevselliğini artırabilir.

Properties

Bu alan, elementin kimlik bilgilerini taşır; tablodaki hangi sütuna, hangi taba ait olduğu gibi bilgileri içerir. Her bir özellik, elementin form üzerindeki ve veritabanındaki işlevselliğini tanımlar:

• Name: Bu özellik, elementin tablodaki sütuna karşılık gelir ve unic (benzersiz) olmalıdır.
• Label: Bu özellik, elementin kullanıcı tarafından görüntülenecek alanına aittir. Elementin form üzerindeki etiketi olarak işlev görür.
• Placeholder: Bu özellik, elementin form üzerindeki boş alanında görüntülenecek kısa bilgi veya ipucunu belirtir.
• Tooltip: Bu özellik, element hakkında detaylı bilgi sağlayan açıklama kısmıdır. Kullanıcıya elementin amacı veya kullanımı hakkında ek bilgiler sunar.
• Tab Menü: Bu özellik, elementin hangi tabda olduğunu belirtir. Formun farklı bölümlerini organize etmek için kullanılır.
• Parent: Bu özellik, elementin hangi üst (parent) elemente ait olduğunu belirler. Bu, özellikle iç içe elementler ve gruplanmış form kontrolleri için önemlidir.
• Data Type: Bu özellik, elementin data_type kısmına göre gelir. Veritabanı manipülasyonları için elle müdahale edilebilir.
• Default Data: Bu özellik, elementin varsayılan değerini (value) belirler. Kullanıcı, form üzerinde bu elemente veri girişi yapmak istediğinde, bu alan üzerinden değeri değiştirebilir.

Layout

Bu alan, elemente ait stil (style) verilerini manipüle eder. Form elementlerinin görünümünü ve sayfa içerisindeki yerleşimini belirlemek için iki önemli alan üzerinde değişiklik yapılabilir:

• Element Size: Elementin boyutu, default, small, large olarak seçilebilir. Bu, elementin form üzerindeki fiziksel boyutunu etkiler ve kullanıcı arayüzünde nasıl görüneceğini belirler. Örneğin, bir buton veya giriş alanının daha belirgin veya daha az yer kaplamasını isteyebilirsiniz.

• Column Width: Elementin sütun genişliği (col size) değiştirilir. Bu, özellikle grid tabanlı layoutlar kullanıldığında, elementin sayfa içerisinde kapladığı alanın genişliğini ayarlamak için kullanılır. Örneğin, bir form alanının tam genişlikte mi yoksa sütunun yalnızca bir kısmını mı kaplayacağını belirleyebilirsiniz.

Options

Bu alanda, form elementlerine ait seçenekler (options) belirlenir. Her bir element tipi, kendine özgü farklı seçeneklere sahiptir. Bu seçeneklere, elementlerin içinden erişilebildiği gibi, /right-control-panel/options üzerinden de bakabilirsiniz.

Store üzerinden form.options datasını detaylı olarak, her bir elemente render edilecek şekilde, column şemasından yönetebilirsiniz. Bu yaklaşım, form elementlerinin özelliklerini dinamik bir şekilde ayarlamanıza olanak tanır. Örneğin, bir select elementi için mümkün seçenekler, bir checkbox için ise seçili olup olmadığı gibi durumlar bu options alanı aracılığıyla tanımlanır.

Nasıl Yapılandırılır?

1. Element Seçeneklerine Erişim: İlgili form elementinin options alanına, doğrudan elementin kendisi üzerinden veya /right-control-panel/options yoluyla erişim sağlayabilirsiniz.

2. Seçenekleri Yönetme: Formun store'unu kullanarak, form.options içindeki data yapısını manipüle ederek, her elementin nasıl davranacağını ve hangi seçeneklere sahip olacağını belirleyin. Bu, özellikle kullanıcıya sunulan seçeneklerin dinamik olarak yönetilmesi gerektiğinde önemlidir.

3. Column Şeması Kullanımı: Elementlere ait seçenekler, column şeması üzerinden yönetilebilir. Bu, form yapısını ve elementler arası ilişkileri daha iyi kontrol etme imkanı sunar.

Her elementin tipine ve kullanım amacına göre farklı options setleri tanımlamak, formun esnekliğini ve kullanıcı deneyimini artırır. Bu seçeneklerin doğru şekilde yapılandırılması, formun işlevselliğini genişletir ve kullanıcıların form ile etkileşimini kolaylaştırır.

<!-- // for input options -->
<template
  v-if="
      formStore.isTypeInput(formStore.selectedElement.html_element) == 'input'
    "
>
  <InputOptions></InputOptions>
</template>

<!-- // for slider options -->
<template
  v-if="
      ['slider', 'range_slider', 'vertical_slider'].includes(
        formStore.selectedElement.html_element
      )
    "
>
  <SliderOptions></SliderOptions>
</template>

<!-- // for switch options -->
<template v-if="formStore.selectedElement.html_element == 'switch'">
  <SwitchOptions></SwitchOptions>
</template>

<!-- // for switch options -->
<template v-if="formStore.selectedElement.html_element == 'text_area'">
  <TextareaOptions></TextareaOptions>
</template>

<!-- // for switch options -->
<template v-if="formStore.selectedElement.html_element == 'checkbox'">
  <CheckboxOptions></CheckboxOptions>
</template>

<!-- // for radio options -->
<template v-if="formStore.selectedElement.html_element == 'radio'">
  <RadioOptions></RadioOptions>
</template>

<!-- // for date, mutiple_dates, date_range options -->
<template
  v-if="
      ['date', 'multiple_dates', 'date_range'].includes(
        formStore.selectedElement.html_element
      )
    "
>
  <DateOptions></DateOptions>
</template>

<!-- // for datetime options -->
<template v-if="formStore.selectedElement.html_element == 'datetime'">
  <DateTimeOptions></DateTimeOptions>
</template>

<!-- // for time options -->
<template v-if="formStore.selectedElement.html_element == 'time'">
  <TimeOptions></TimeOptions>
</template>

<!-- // for tag options -->
<template v-if="formStore.selectedElement.html_element == 'tags'">
  <TagOptions></TagOptions>
</template>

<!-- // for childform options -->
<template v-if="formStore.selectedElement.html_element == 'child_form'">
  <ChildFormOptions></ChildFormOptions>
</template>

<!-- // static -->
<!-- // for static_element options -->
<template v-if="formStore.selectedElement.html_element == 'static_element'">
  <StaticElementOptions></StaticElementOptions>
</template>

Data

Bu bölüm, belirli form elementlerine ait seçilebilenlerin datasını eklemek için kullanılır. Örneğin; select, checkbox group gibi elementler, kullanıcı tarafından seçim yapılabilen çeşitli seçeneklere sahiptir. Bu elementlerin her biri için, kullanıcının seçim yapabileceği değerlerin listesi, formun data kısmında tanımlanır.

Seçilebilen elementlerin datası, genellikle JSON formatında bir liste veya nesne olarak saklanır. Bu veri, elementin kendisiyle ilişkilendirilerek, kullanıcının form üzerindeki etkileşimi sırasında gösterilecek seçenekleri belirler.

Örnek Kullanım

select elementi için, kullanıcının seçim yapabileceği seçeneklerin listesi aşağıdaki gibi tanımlanabilir:

"selectOptions": [
  {"value": "option1", "label": "Seçenek 1"},
  {"value": "option2", "label": "Seçenek 2"},
  {"value": "option3", "label": "Seçenek 3"}
]

Settings

Bu alan, forma ait bir elementin davranışsal olarak nasıl davranacağının seçileceği kısımdır. Aşağıda, çeşitli durumlar için ayarlanabilecek özelliklerin bir listesi bulunmaktadır:

"api_display_settings": {
    "show_in_grid": true,        // Gridde gözüksün mü
    "show_in_select": true,      // Selectte gözüksün mü
    "order_in_select": true,     // Select sıralamasında gözüksün mü
    "show_in_create": true,      // Create işleminde gözüksün mü
    "show_in_update": true,      // Update işleminde gözüksün mü
    "show_in_delete": true,      // Delete işleminde gözüksün mü
    "show_in_detail": true,      // Detayda gözüksün mü
    "show_in_search": true,      // Aramada gözüksün mü
    "select_in_query": false,    // Sorguda seçilebilir mi
    "select_in_label": false,    // Selectte label olarak gözüksün mü
    "show_in_static_grid": true, // Statik gridde gözüksün mü
},
"mobile_display_settings": {
    "show_in_grid": true,
    "show_in_select": true,
    "order_in_select": true,
    "show_in_create": true,
    "show_in_update": true,
    "show_in_delete": true,
    "show_in_detail": true,
    "show_in_search": true,
    "select_in_query": false,
    "select_in_label": false,
    "show_in_static_grid": true,
},
"web_display_settings": {
    "show_in_grid": true,
    "show_in_select": true,
    "order_in_select": true,
    "show_in_create": true,
    "show_in_update": true,
    "show_in_delete": true,
    "show_in_detail": true,
    "show_in_search": true,
    "select_in_query": false,
    "select_in_label": false,
    "show_in_static_grid": true,
},

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;
  }
};

Validations

Elementin özelliklerinde ayarlanmış olan bütün şartlar kontrol edilir. eger sartlar saglaniyorsa true en az bir sart saglanmiyorsa false ve message doner.

• Required = eger required true ise elementin value datasi null olamaz.
• Min Length = elementin karakter uzunlugu minimum {min_length} karakterden az ise false doner
• Max Length = elementin karakter uzunlugu maximum {max_length} karakterden fazla ise false doner
• Regex = elementin value datasi regexi saglamiyorsa Error Message doner

Bu konuda nasıl çalıştığına dair detaylı bilgiye ulaşmak için Form Validation Render, bölümüne bakılabilir

Attributes

Bu alanda form elementine ait attribute'lar eklenir. Belirli özellikler, form elementlerinin davranışını yönetmek için kullanılır:

• disabled: Bu özellik, bir elementin kullanıcı tarafından etkileşime girilip girilemeyeceğini belirler. disabled=true olarak ayarlandığında, element kullanıcı etkileşimine kapalı hale gelir ve bu durumda kullanıcı tarafından değiştirilemez.
• readonly: Bir element readonly=true olarak ayarlandığında, kullanıcı tarafından içeriği değiştirilemez ancak okunabilir olur. Readonly olarak işaretlenen elementler, veritabanı tablosuna eklenmez ve sadece form üzerinde kullanılabilir alanlar olarak kalır. Bu, kullanıcının bilgiyi görmesine ancak değiştirmemesine izin vermek için kullanılır.
• hidden: Bu özellik, bir elementin form üzerinde gösterilip gösterilmeyeceğini kontrol eder. hidden=true olarak ayarlandığında, element kullanıcı arayüzünde görünmez hale gelir ancak ilgili veritabanı tablosuna bir sütun olarak eklenir. Bu, form üzerinde gösterilmemesi gereken ancak veritabanında saklanması gereken veriler için kullanılır.