Leftbar

Bu alanda draggable olan form elementleri bulunmaktadır. Bu form elementlerinin html_element ve control_type değişkenlerine bağlı render olur.

Elementler üç ana kategoriye ayrılır:

• fields: HTML form elementleri. Bu kategori, input, select, textarea gibi form kontrol elementlerini içerir.
• static: HTML statik elementleri. Bu kategori, h1, br, div gibi sayfa düzeni ve metin biçimlendirme için kullanılan statik HTML elementlerini içerir.
• concat: Container elementleri. Bu kategori, gruplandırma veya bölme amacıyla kullanılan container tipindeki elementleri içerir, örneğin divcontrol veya childcontrol gibi.

Bu elementlerin her biri, formStore içinde bulunan elements datasına bağlı olarak render edilir. Kullanıcı bu elementleri sol taraftaki çubuktan seçerek sürükleyip ana form alanına bırakabilir. Elementlerin yerleştirildikten sonra özellikleri ve yapılandırmaları, kullanıcının ihtiyaçlarına göre ayarlanabilir.

Elementlerin render edilmesi, dinamik form oluşturma işleminin temel bir parçasıdır. Kullanıcılar, bu sayede interaktif ve kullanıcı dostu formlar tasarlayabilirler.

<draggable
  class="dragArea list-group"
  :list="formStore.elements.fields"
  :group="{ name: 'people', pull: 'clone', put: false }"
  :clone="cloneDog"
  item-key="id"
>
  <template #item="{ element }">
    <div class="card m-2">
      <div class="card-body p-2">
        <div class="d-flex align-items-center">
          <div class="bg-gray-200 element-icon">
            <i class="fa-solid fa-thumbtack fs-12"></i>
          </div>
          <div class="d-flex flex-column">
            <div class="element-title">{{ element.label }}</div>
            <div style="font-size: 12px" class="text-gray-500">
              {{ element.description }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
</draggable>

vuedraggble dokumantasyonu icin detayli butun propslarina bakabilirsiniz draggble

her bi fileds elmani cloneDog ile drop edilen main builderdaki drag dataina kopyalanir

cloneDog

const cloneDog = (element) => {
  return formStore.clone(element);
};

clone

const clone = (d) => {
  console.log("d :>> ", d);
  let id = uuidv4();

  var columns = {
    ////// properties

    html_element: d.key,
    control_type: d.control_type, //for dragble zone
    tab_menu: activeTabMenu.value, // wich tab of child

    name: "",
    label: d.label,
    class: "col-12",
    layout: {
      responsive: false, //m element style responsive or not
      element_size: "default",
      column_size: "md",
      column_width_sm: "12",
      column_width_md: "12",
      column_width_lg: "12",
    },
    tooltip: "",
    placeholder: "placeholder in here !",
    description: "",
    parent: {
      service_name: "",
      parent_prop: "",
      parent_prop_key: "",
    },

    rank: 1,
    level: 1,

    value: null,

    ////// data
    // element data type and default data
    data_type: d.data_type || "character_varying",
    default_element_data: {
      uuid: "",
      integer: 0,
      boolean: false,
      character_varying: "",
      text: "",
      date: "",
      json: {},
      "json[]": [],
    },
    // default list or endpoint data
    source_data: {
      type: "list",
      list: {},
      endpoint: {
        endpoint_select_data: false,
        service_name: "",
        endpoint_column: "",
        endpoint_column_name: "",
        relations: [], // for select json object in visible field
        endpoint_with_default_data: [], // with defeault data
      },
      json: {},
      data: [],
    },

    ////// validation
    validation: {
      // state
      isValid: true,
      isFocus: true,
      //field
      field_name: "",
      required: false,
      nullable: false,
      unic: false,
      exist: false,
      min_length: "",
      max_length: "",
      exact_length: "",
      regex: "",
    },

    ////// options
    options: {
      // default value mounteed in html_element
      input_opt: {},
      text_area_opt: {},
      switch_opt: {},
      slider_opt: {},
      checkbox_opt: {},
      radio_opt: {},
      date_opt: {},
      date_time_opt: {},
      time_opt: {},
      multiple_times_opt: {},
      tags_opt: {},
      child_form_opt: {},
      static_element_opt: {},
    },

    ////// conditions
    conditions: [
      {
        id: uuidv4(),
        or: [{ id: uuidv4(), field: "", cond: "", equal: "" }],
      },
    ],

    ////// attributes
    attributes: {
      disabled: false,
      hidden: false,
      readonly: false,
    },

    api_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,
    },
    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,
    },

    special: {},
    group: {},
  };

  return { ...d, id, ...columns, child: [] };
};