Formalar

Platon platformasidagi ma'lumotlar bilan ishlash uchun qo'llaniladigan Formalar qo'llanmasi.

Asosiy ma'lumotlar

Formalar bo'limining asosiy funksionali web-sahifa foydalanuvchilari tomonidan ma'lumotlar kiritilishi uchun mo'ljallangan oyna shaklini yasash hisoblanadi. Batafsil ->

Bo'lim tuzilishi

Form yaratish

Forma yaratish uchun Platon platformasi navigatsiya panelining Formalar bo'limiga o'tiladi. Ushbu ochilgan sahifada Platon platformasida ilgari ochilgan formalar ro'yxati aks etadi. Ushbu sahifa pastgi qismida joylashgan Qo'shish tugmasi bosiladi va quyidagi oyna ("forma") ochiladi:

Forma yaratishda inputlar type va vazifasi:

• name: text formatdagi qiymatlarni qabul qiladi va bu formani nomi hisoblanadi. Unda probel bo`lmasligi kerak.
• source_table_name: formaga to`ldirilgan ma'lumot databasedagi qaysi tablega yozishini aytish kerak.
• data_source: forma qaysi databasega borib saqlashi kerak ma'lumotni (PROJECT,PLATON,CLICKHOUSE).
• sequence_name: forma bazadagi tablega qaysi sequens bilan insert qilishini aytish kerak.
• data_filter: formadagi ma'lumotlarga filter qo'yish uchun foydalaniladi;

data_type = #data_type
type_id = 1

• unique_fields: ushbu funksional ma'lumotlar bazasidagi column unique bo`lishini taminlaydi;

username

• focused_field_name: formaga kirganda qaysi column focusda turishini belgilaydi. Bu yerga forma elementlarini data_field qiymati yoziladi va faqat 1ta element focusda bo`lishi mumkin;

name ✅
name,username ❌

• grid_offset: formaning ikki tomonidan joy tashlab berish uchun xizmat qiladi;
• group_by: forma qaysi guruhga mansub ekanini bildiradi;
• next_link: forma to'ldirilib, saqlash tugmasi bosilganidan so'ng ochilishi lozim bo'lgan sahifa manzilini yozish uchun foydalaniladi. Saqlashdan so'ng modal yoki blank oyna yopilishi uchun back nomli maxsus url dan foydalaniladi;
• public: formaga Authorization mavjud bo'lmaganda ham kirish mumkin bo'ladi. Public qilingan formalarda $user userParams dan foydalanish mumkin emas;
• add_title: ushbu forma web-sahifasi manzili (https) qismining sarlavhasini yozish uchun foydalaniladi;
• edit_title: tahrirlash sarlavhasini nomlash uchun ishlatiladi;
• add_header: ushbu forma sarlavhasini yozish uchun foydalaniladi;
• edit_header: ushbu forma sarlavhasini taxrirlash uchun foydalaniladi;
• default_sql: forma saqlaganda doimiy saqlashi kerak bo'lgan qiymatlarni shu qismda aytib ketish kerak;

select #type_id as type_id, --forma ochilganda paramdagi type_id ni bazaga ham saqlab ketish kerak
       #parent_id as parent_id, 
       1 as category_id

• params_sql: paramsdagi o`zgaruvchilarni saqlab turish uchun. Bu sql faqat select uchun;

SELECT $user.locale as locale, 
       $user.id as moderator_user_id, 
       to_char(now(),'yyyy-mm-dd hh24:mm') as moderator_view_date , 
       'ACTIVE' as status_moderator

• before_add_sql: forma yangi ma'lumot qo'shishdan oldin bajariladigan sql. Unda update va insert querylar yozish mumkin. Bir nechta querylarni ham ; bilan ajratib yozish mumkin.@{data_field} belgisi orqali forma element qiymatlarini olish mumkin faqat;

update ob_ads_moderators m
set state=0
from ob_ads ads
where ads.id = #id 
and m.ads_id = ads.id 
and ads.status != @status::ads_status;

insert into ob_ads_moderators(created_by,
                              ads_id,
                              moderator_conclusion_id,
                              moderator_conclusion_note,
                              moderator_view_date,
                              moderator_user_id,
                              moderator_status)
select $user.id::bigint,
       id,
       (attributes ->> 'moderator_conclusion_id')::bigint,
       (attributes ->> 'moderator_conclusion_note')::varchar,
       now(),
       $user.id::bigint,
       @status::ads_status
from ob_ads
where id = #id 
and status != @status::ads_status;

• after_add_sql: forma yangi ma'lumot qo'shishdan keyin bajariladigan sql. Ishlash prinsipi before_add_sql kabi;
• before_edit_sql: formadagi ma'lumot yangilanishdan oldin bajariladigan sql. Ishlash prinsipi before_add_sql kabi;
• after_add_sql: formadagi ma'lumot yangilangandan keyin bajariladigan sql. Ishlash prinsipi before_add_sql kabi;
• Js: formadagi elementlar ustida custom js codelari;
• css: forma elementlariga custom css codelari yozish uchun;
• visibility: forma permissionlari qanday userlar formani ko`rishi mumkin ekanini belgilanadi;

$user.has_perm('moderator.user') && $user.has_perm('hy.admin')

• can_create_condition: forma orqali qanday userlar malumot saqlashi mumkin ekani belgilanadi;

 $user.has_perm('hy.admin') || $user.has_perm('platon.admin')

• can_edit_condition: forma orqali qanday userlar malumotlarni o'zgartirishi mumkin ekani belgilanadi. Ishlash prinsipi can_create_condition kabi;
• can_delete_condition: forma orqali qanday userlar malumotni o'chirishi mumkin ekani belgilanadi. Ishlash prinsipi can_create_condition kabi;

FormElements

Forma yaratib olinganidan so'ng quyidagi oyna paydo bo'ladi:

Ushbu oynada quyidagi tugmalar mavjud:

• Foydalanuvchilar uchun
  • Saqlash: Ushbu tugmani bosish orqali formaga kirilgan ma'lumotlar saqlanadi.
  • Chiqish: Ushbu tugmani bosish orqali forma shaklidan chiqib ketiladi.
• Dasturchilar uchun:
  • Oynani sozlash: Ushbu tugmadan formaga o'zgartirishlar kiritish uchun foydalaniladi.
  • Yangi element qo'shish: Ushbu tugmadan formaga yangi elementlar (foydalanuvchi tomonidan ma'lumotlar kiritishga mo'ljallangan yacheykalar) qo'shish uchun foydalaniladi
  • Elementlar ro'yxati: Ushbu tugmani bosish orqali forma sahifasidagi barcha elementlar ro'yxatini ko'rish mimkin.

Yangi element qo'shish

Ushbu tugmadan formaga yangi elementlar (foydalanuvchi tomonidan ma'lumotlar kiritishga mo'ljallangan yacheykalar) qo'shish uchun foydalaniladi. Ushbu tugma bosilganida quyidagi oyna ochiladi: Oyna quyidagi yacheykalardan iborat:

• form: formaning nomi (shuningdek, forma URLda ham shu nom bilan joylashadi);
• type: element funksiyasi yoki turi bo'lib quyidagilardan iborat:
  • a) fieldset - elementlarni joylashtirish uchun yangi maydon shakllantirib beradi;
  • b) text - tekst kiritish uchun input yaratadi;
  • c) raw_json - faqat json turidagi ma'lumotlarni qabul qilish uchun ishlatiladi;
  • d) number - son (natural son) kiritish uchun input yaratadi;
  • e) file - fayllar qabul qilish uchun input yaratadi;
  • f) image - rasmlar qabul qilish uchun input yaratadi;
  • g) button - turli xil so'rovlarni yuborish uchun tugma yaratadi;
  • h) date - sanalarni qabul qilish uchun input yaratadi;
  • i) select - bir nechta ma'lumotlardan birini tanlash imkoniyatini beruvchi input yaratadi;
  • j) time - vaqtni qabul qilish uchun input yaratadi;
  • k) multiselect - bir nechta ma'lumotlarni tanlash imkoniyatini beruvchi input yaratadi;
  • l) checkbox - boolean turidagi ma'lumot qaytaradigan element yaratadi;
  • m) textarea - katta hajmdagi tekstlarni kiritish uchun input yaratadi(description uchun);
  • p) code - turli xil dasturlash tilidagi kodni saqlash imkoniyatini beradi (js, html, css, sql)
  • r) html - bu orqali hohlagan API ga so'rov yuborish va hohlagan ko'rinishdagi dizayn yaratish mumkin;
  • s) geo - ushbu element turi bo'yicha geopozitsiyani kiritish imkoniyati mavjud (map_center, map_zoom). Bunda qaysi karta orqali tanlashni active_map maydonida ko'rsatib ketiladi;
  • t) geo polygon - ushbu elementda turi bo'yicha bir nechta geopozitsiyani kiritish imkoniyati mavjud ( map_center, map_zoom, is). Bunda qaysi karta orqali tanlashni active_map maydonida ko'rsatib ketiladi. Bundan tashqari bir nechta geopozitsiyalarni kiritish uchun is_multiple tugmasi active holatga keltiriladi;
  • u) simple key-vale - unikal qiymatlarni shakllantirish uchun qo'llaniladi;
  • v) tab - turli xil ma'lumotlarni sahifaviy joylashtirish uchun ishlatiladi;
  • w) tab container - sahifaviy joylashtirilgan ma'lumotlarni ma'lum bir ko'rinishda jamlash;
  • x) markdown editor, monaco_editor, vue_editor, wysiwyg - kontentlarni tahrirlash;
• data_field: ustunning ichki nomi. SQL so'rovlarida ushbu ichki kod nomi yoziladi;
• parent: boshqa elementlarni o'z ichiga oluvchi bosh element;
• sort_order: elementning forma sahifasidagi joylashgan o'rni (kichik raqamli elementlar sahifaning oldingi qismida, katta raqamli elementlar sahifaning keyingi qismida joylashadi);
• default_value: forma shakllantirish jarayonida ushbu element uchun default qiymat berish u/n ishlatiladi. Bu yerda shartga ko'ra qiymat olish mumkin va h.k;
• width: ushbu yacheykaga ustun kengligi yoziladi;
• sql: ushbu yacheyka SQL so'rovlari yozish uchun mo'ljallangan;
• validation_sql: inputdagi ma'lumotlarni validatsiya qilish. Yani bu yerda shart yoziladi va agar shu shartga to'g'ri kelmasa post bo'lmaydi masalan:

SELECT
 not EXISTS (SELECT 1 FROM table_name WHERE name = @name)
--Bu yerda agar kiritilayotgan name aval kiritlgan bo'lsa xatolik qaytaradi!

• is_attribute: ushbu svitchdan ma'lumotlar bazasi 'attributes' ustuniga ma'lumotlar kiritish uchun foydalaniladi;
• is_required svitchi: ushbu svitch element yacheykasiga ma'lumotni kirgizmasdan turib saqlash imkonini bermaslik uchun foydalaniladi (yani ushbu svitch yoqilsa foydalanuvchi element yacheykasiga ma'lumot kirgizish shart hisoblanadi);
• is_read_only svitchi: ushbu svitch yoqilsa foydalanuvchi elementdagi ma'lumotlarni faqat o'qish imkoniga ega bo'ladi;
• is_disabled: svitchi: inputga kiritilgan ma'lumotni bazaga saqlamaslik imkoniyatini beradi;
• label: element yacheykasining sarlavhasini yozish uchun foydalaniladi;
• hint: elementga kiritiladigan ma'lumotlar bo'yicha yordamchi so'z yozish uchun foydalaniladi;
• placeholder: element yacheykasiga yozuv kiritilish uchun foydalaniladi (foydalanuvchi tomonidan yacheykaga ma'lumot kiritilganida ushbu yozuv o'chib ketadi);
• visibility: ushbu yacheykaga yaratilayotgan jadvalni ko'rish huquqiga ega bo'lgan foydalanuvchilar kiritiladi;
• render_condition: Forma elementlarining kiritilganligiga qarab boshqa elementlarni ko'rinishi yoki ko'rinmasligini hal qiladi. Agar render_condition maydoniga qiymat yozilsa, ma'lumotlar bazasida kiritilgan ma'lumotni saqlaydi. Aks holda ma'lumotlar bazasida null qiymatni saqlaydi;
• style: css kod yozish uchun mo'ljallangan
• class: element xususiyatlarini (rangi va boshqa) shakllantiruvchi kodlar yozish uchun foydalaniladi;

FormJS

Qo'shimcha

Platon formalarning JS qismiga JavaScript ES6 kodlari yoziladi vue emas

• beforeSave: Ushbu funktsiya formadagi malumotlar saqlanishidan oldin ishladi. Odatda saqlashdan oldin inputlardagi ma'lumotlarni tekshirish , validatsiya qilish va boshqa turlixil maqsadlarda ishlatiladi. Masalan:

this.beforeSave = () => {
    // javascript codlar
    // ushbu funkisya ichidagam fetch apilarni o'zimiz hohlaganimizdak ishlatishimiz mumkin. Masalan:
    // this.$api.get('api-url').then(res=>{})
    return true
}

Diqqat

Agar beforeSave da return: false qaytsa formadagi ma'lumotlar saqlanmaydi.

• afterSave: Ushbu funksiya yuqoridagi beforeSave singari ishlaydi faqat formadagi ma'lumotlar saqlanganidan so'ng ishlaydi.

this.afterSave = (id) => {
    // bu yerda ham biz JavaScript kodlarimizni yozishimiz mumkin .
    // `id` bu forma saqlangandagi malumotlar bazasiga tushgana qaytgan id
}

• setVal: Ushbu metod platon formadagi inputlarga default ma'lumot yoki boshqa holatlarda ma'lumotlar yozish uchun ishlatiladi. Masalan:

$setVal('Data_field' , 'value')
// Data_field qaysi inputga ma'lumot yozishi kerakligi
// value  yozilishi kerak bo'lgan ma'lumot

• toast: Toastlar bu platonning custom Toastlari(ogoxlaruvlari)dir. Platonda ikki xil toast mavjud boo'lib (shaxsiy toastlariniham yasash mumkin!) this.errorToast('Ogoxlantiruv habari') yoki this.$platonApp.errorToast('error') Error yani qizil rangadi ogoxlantiruv. this.greenToast('Ogoxlantiruv habari') yoki this.$platonApp.greenToast('success') Green yani yashil rangadi ogoxlantiruv.

  

• $w: $w orqali Platon formadagi inputlarning o'zgarishini ushlab olishimiz mumkin. Masalan username Data_field inputini o'zgarganida qandaydir funktsiyani avtomatik ishlatmoqchi bo'lsak.

const testFunc = () => {
    // odatiy JavaScript funktsiyasi
}
$w('username', testFunc);

$w('username', (val) => {
    test(val)
})

function test(a) {
    console.log(a)
}

• $form.q: forma linkidagi o`zgaruvchilarni qiymatini olish uchun ishlatiladi;

let user_id = $form.q('user_id')

• $form.params: formadagi params_sql orqali olib kelingan qiymatlarni js ni ichida ishlatish uchun;

$form.params.{{variable_name}}

• $data: forma tahrirlash uchun ochilganda formaga keladigan elementlar qiymatlarini ushlash uchun ishlatiladi;

$data.{{data_field}} // forma elementini dataField qiymati yoziladi;

• this.$router.apps[0].navigateTo(): bu orqali hozir ochilib turgan formani boshqasi bilan almashtirish mumkin. Misol uchun formani save qilgandan keyin orqasidan boshqa forma ochilishi kerak bo'lsa afterSave function ichida yozilsa forma saqlangandan keyin boshqa formani ochadi;

this.$router.apps[0].navigateTo(`forms/checkpone?_target=modal_40`)

• Events: this.$onEvent() va this.$sendEvent() eventlarni almashish uchun functionlar
  • this.$sendEvent(): o'zgarishni yuborish uchun ishlatiladi;
  • this.$onEvent(): o'zgarishni ushlab olish uchun ishlatilad

 this.$sendEvent('SAVE', id)
// buyerda forma save bo`lganligi va uni idsi event sifatida yuborilyapdi
this.$onEvent('SAVE', saveFunction)

function saveFunction(id) {
    console.log(save)
}

this.$onEvent('SAVE', (el) => {
    saveFunction(el)
})

• $option(): formadagi Select typedagi elementlarni sql qiymatlarini olish mumkin.

$option('dataField').{variableName}

• form element hide va show: forma elementlarini js orqali canditionga qarab ko'rsatish yoki ko'rsatmaslik mumkin;

$('.street_id').hide();
$('.street_id').show();
// buyerda .street_id forma elementi dataFieldi

• $setAttr(): bu function forma elementi type select bo'lganda tanlash uchun chiqadigan datani set qilish uchun ishlatiladi. Misol uchun integratsiya orqali tanlanadigan qiymatlar o'zgarishi mumkin bo'lsa api orqali data olinib $setAttr() orqali set qilinadi;

$api.get('path')
    .then(res => {
        $setAttr('street_id', 'data', data);
        $setAttr('element dataField',
            'bu elementni datasiga set qilish kerakligini anglatadi',
            'apidan olingan data array [{},{}]');
    })

• $form.formElementsWithKey.DataField.{variable name}: foma elementlarini qiymatlari o`zgartirish uchun ishlatiladi;

$form.formElementsWithKey.sold_amount.maxValue = params.left_amount
$form.formElementsWithKey.final_sum.maxValue = 50000000

function setLanguageFlags() {
    $form.formElementsWithKey['name'].label = $form.params.sale_type + ' ' + $form.formElementsWithKey['name'].label + ' ' + getFlagEmoji('uz') + ':';
    $form.formElementsWithKey['name_copy'].label = $form.params.sale_type + ' ' + $form.formElementsWithKey['name_copy'].label + ' ' + getFlagEmoji('uz') + ':';
    $form.formElementsWithKey['description'].label = $form.params.sale_type + ' ' + $form.formElementsWithKey['description'].label + ' ' + getFlagEmoji('uz') + ':';
    $form.formElementsWithKey['description_copy'].label = $form.params.sale_type + ' ' + $form.formElementsWithKey['description_copy'].label + ' ' + getFlagEmoji('uz') + ':';
    $form.formElementsWithKey['name_ru'].label = $form.params.sale_type + ' ' + $form.formElementsWithKey['name_ru'].label + ' ' + getFlagEmoji('ru') + ':';
    $form.formElementsWithKey['name_ru_copy'].label = $form.params.sale_type + ' ' + $form.formElementsWithKey['name_ru_copy'].label + ' ' + getFlagEmoji('ru') + ':';
    $form.formElementsWithKey['description_ru'].label = $form.params.sale_type + ' ' + $form.formElementsWithKey['description_ru'].label + ' ' + getFlagEmoji('ru') + ':';
    $form.formElementsWithKey['description_ru_copy'].label = $form.params.sale_type + ' ' + $form.formElementsWithKey['description_ru_copy'].label + ' ' + getFlagEmoji('ru') + ':';
}

function getFlagEmoji(countryCode) {
    let codePoints = countryCode.toUpperCase().split('').map(char => 127397 + char.charCodeAt());
    return String.fromCodePoint(...codePoints);
}

• this.$user: bu function orqali kirib turgan user ma`lumotlarini olish mumkin.

this.$user.{variableName}

• this.$api.method(get,post,put,patch,delete): Apilar bilan ishlash uchun maxsus functionlar;

this.$api.post(`path`, {data})
this.$api.put(`path`, {'Authorization': 'basic'}, {data})
this.$api.get(`path`)
this.$api.delete(`path`)

Ma'lumot

Qolgan holatlar uchun JavaScript ES6 barcha funcsiyalari ishlaydi