Skip to content

Fields

Jump to bottom
vkiranananda edited this page Jun 22, 2021 · 14 revisions

Работа с полями

Описание полей

В данной секции перечисляются все поля которые будут использоваться.

Обязательные опции поля

name название поля в БД, оно же используется как ключ для поля.

type Тип поля

Не обязательные опции поля

label Заголовок

desc описание поля

validate Валидация как в Laravel

field-save Куда сохраняем, если не указано, то корневую ячейку в таблице, если array то в массив в специальной ячейке (удобно для хранения данных не участвующих в where).

col-classes Классы бутстрап или свои отвечающие за размерность поля, по умолчанию col-12 .

protected Дополнительно защищает поле от случайных изменений

show Опция отображения, привязывается к полю типа select. Пример использования

'show' => [ 
    [ 'type' => '==', 'field' => 'template', 'value' => '' ],
    [ 'operator' => '||', 'type' => '==', 'field' => 'template', 'value' => 'contacts' ]
]

Если используется более одного условия, во всех последующих надо указывать опцию operator.

Текстовый input

'name' => [
    'name' => 'name',
    'type' => 'text', 
    'label' => 'Заголовок',
    'validate' => 'required',
],

Текстовый редактор

upload включает загрузку файлов

size Высота редактора, по умолчанию самый маленький, значения: normal

format количество элементов, по умолчанию минимум, значения: fool

'text' => [	
    'name' => 'text',
    'type' => 'editor', 
    'label' => 'Текст',
    'upload' => true,
],

Select. Он же radio и checkbox. Просто меняем тип поля.

options указываем массив опций

'template' => [ 
    name' => 'template',
    'type' => 'select', 
    'field-save' => 'array',
    'label' => 'Шаблон', 
    'options' => [
	[ 'value' => '', 'label' => 'По умолчанию' ],
     	[ 'value' => 'contacts', 'label' => 'Контакты' ],
     	[ 'value' => 'about', 'label' => 'О нас' ],
     	[ 'value' => 'clients', 'label' => 'Клиенты' ],
     	[ 'value' => 'main', 'label' => 'Главная' ],
    ],
],

Галерея файлов, то же но с типом files для загрузки файлов.

max-files указывается максимальное количество файлов.

'gallery' => [
    'name' => 'gallery',
    'type' => 'gallery',
    'label' => 'Галерея',
],

Выбор даты.

time если true, то отображаем время.

format для списков, можно указать формат выводимой даты.

'date' => [
    'name' => 'date',
    'type' => 'date',
    'label' => 'Дата',
],

Выбор элемента с поиском.

multiple возможность выбирать несколько элементов. Количество элементов можно ограничить в опции max-items, указав нужное количество.

url URL по которому будет осуществляться запрос элементов по AJAX. Метод POST, параметр value. Отдавать надо массив как для поля select options.

options что бы отобразились элементы после сохранения надо динамически сгенерировать массив options, как для поля select.

'users' => [
    'name' => 'users',
    'type' => 'select-search',
    'label' => 'Пользователи',
    'max-items' => 5,
    'multiple' => true,
    'url' => action('\Backend\Users\Controllers\UsersController@getUser'),
]

Тип group для создания отдельной группы полей.

load-from указывает откуда подгрузить поля.

fields список полей.

'seo' => [
    'name' => 'seo',
    'type' => 'group',
    'load-from' => 'seo-fields',
    'field-save' => 'array' 
],

Повторители, те поля которые можно добавлять сколько угодно раз.

add-label название кнопки добавить. По умолчанию "Добавить".

'plashki' => [
    'name' => 'plashki',
    'type' => 'repeated', 
    'label' => 'Вращающиеся элементы',
    'add-label' => 'Добавить новый блок',
    'fields' => [
	'text' => [
		'name' => 'text',
		'type' => 'editor', 
		'size' => 'small',
		'label' => 'Текст',
	],
    ],	
],

Дополнительные элементы

Выводим HTML код

'my-html' => [
    'type' => 'html',
    'html' => '<b>Hello world</b>'
],

Выводим заголовок

'my-title' => [
    'type' => 'html-title',
    'title' => 'Hello world'
],

Выводим свой компонент

В компонент передаются 2 параметра field - это массив компонента в который можно записать все что нужно и errors - если были ошибки при сохранении записи.

'my-component' => [
    'type' => 'component',
    'name' => 'my-field', // в итоге название компонента должно быть form-component-my-field
],

Список list 

[ 'name' => 'name', 'icon' => 'file', 'link' => 'edit', 'sortable' => true ],
[ 'name' => 'category', 'label' => 'Категория', 'attr' => [ 'width' => '20%' ], 'func' => 'indexCategoryField', 'link' => 'category' ],

В данном примере name название поля, если есть данное поле в массиве fields то оно объединится с этим и элементы, которые объявлены здесь перекроют элементы в родительском поле. icon - иконка, название берется из https://primer.style/octicons/ . link - обернет данное поле ссылкой: edit - редактирование, show - просмотр и edit-show будет работать так, если ссылки edit нет, то добавиться ссылка show.

Иногда бывает нужно отобразить значение одного и того же поля в разных ячейках по разному. Например время и дату. Но нельзя сделать одинаковые имена для полей, для этих целей можно создать уникальное имя поля и добавить параметр bd-name в котором и указать нужное значение.

Поиск search

Тут мы указываем поля которые будут в поиске. Смысл такой же как в массиве fields.

Если мы хотим скопировать данные из существующего поля в массиве fields указываем название поля в ключе field-from. Данные указаны в текущем поле перезапишут одноименные данные из столбца поля указанного в field-from.

Если нам нужно осуществить поиск своими силами, но оставить поле для поиска то указываем параметр 'query' => 'none'.

Ключ fields содержит массив столбцов в базе данных по которым ищем. Каждый столбец добавляется в запрос как or. Однако каждое поле добавляется как and.

По умолчанию оператор сравнения like для полей типа select =. Это можно переопределять в ключе type-comparison, в корне поля или же для конкретной опции в массиве options. Так же в начале и в конце строки запроса добавляется %, кроме поля типа select. В select идет точное сравнение. Это можно переопределять в ключе exact-match. Что бы в поле select добавить % к запросу надо либо в опциях либо в корне поля указать exact-match => false

Так же для того что бы добавить пустой элемент в начала поля select есть опция options-empty, где указываем название опции.

Рабочий пример

<?php
	return [

        'list' => [
        	[ 'name' => 'name', 'icon' => 'file', 'link' => 'edit', 'sortable' => true ],
        	[ 'name' => 'category', 'label' => 'Категория', 'attr' => [ 'width' => '20%' ], 'func' => 'indexCategoryField', 'link' => 'category' ],
        	[ 'name' => 'url', 'attr' => [ 'width' => '10%' ] ],
        	[ 'name' => 'updated_at', 'label' => 'Дата модификации', 'attr' => [ 'width' => '190px' ], 'sortable' => true ]
        ],

		'fields' => [
  	        'name' => [
	        	'name' => 'name',
	            'type' => 'text', 
	            'label' => 'Заголовок',
	            'validate' => 'required',
	        ],
	        'text' => [
	        	'name' => 'text',
	            'type' => 'editor', 
	            'label' => 'Текст',
	            'format' => 'fool',
	            'size' => 'normal',
	            'upload' => true,
    			'show' => [ 
	            	[ 'type' => '==', 'field' => 'template', 'value' => '' ],
	            	[ 'operator' => '||', 'type' => '==', 'field' => 'template', 'value' => 'contacts' ]
	            ]	
	        ],
    		'seo' => [
    			'name' => 'seo',
    			'type' => 'group',
    			'load-from' => 'seo-fields',
    			'field-save' => 'array' 
    		],
	        'template' => [ 
	        	'name' => 'template',
        		'type' => 'select', 
        		'field-save' => 'array',
        		'label' => 'Шаблон', 
        		'options' => [
        			[ 'value' => '', 'label' => 'По умолчанию' ],
	         		[ 'value' => 'contacts', 'label' => 'Контакты' ],
	         		[ 'value' => 'about', 'label' => 'О нас' ],
	         		[ 'value' => 'clients', 'label' => 'Клиенты' ],
	         		[ 'value' => 'main', 'label' => 'Главная' ],
        		],
    		],
    		'category_id' => [ 
	        	'name' => 'category_id',
        		'type' => 'select', 
        		'name' => 'category_id', 
        		'label' => 'Категория', 
    		],
			'url' => [
	            'name' => 'url',
	            'type' => 'text', 
	            'label' => 'URL',
	            'validate' => 'required|alpha_dash',
	        ],
	        // unique:pages,url

	        'slider' => [
	        	'name' => 'slider',
	            'type' => 'gallery',
	            'label' => 'Слайдер',
	        ],

	        // clients
	        'clients' => [
	        	'name' => 'clients',
	            'type' => 'group', 
	            'field-save' => 'array',
	            'fields' => [
			        'map' => [
			        	'name' => 'map',
			            'type' => 'gallery',
			            'label' => 'Карта',
			            'max-files' => 1, 
			        ],	            	
				  	'gallery4' => [
			        	'name' => 'gallery4',
			            'type' => 'gallery',
			            'label' => 'Логотипы по 4 в ряд',
			        ],
				  	'gallery5' => [
			        	'name' => 'gallery5',
			            'type' => 'gallery',
			            'label' => 'Логотипы по 5 в ряд',
			        ],
	            ],
    			'show' => [ 
	            	[ 'type' => '==', 'field' => 'template', 'value' => 'clients' ],
	            ]	
	        ], 


	        // main page
	        'main' => [
	        	'name' => 'main',
	            'type' => 'group', 
	            'field-save' => 'array',
	            'fields' => [
			        'slider' => [
			        	'name' => 'slider',
			            'type' => 'repeated', 
			            'label' => 'Слайдер',
			            'field-save' => 'array',
			            'fields' => [
				  	        'title' => [
					        	'name' => 'title',
					            'type' => 'text', 
					            'label' => 'Заголовок',
					            'col-classes' => 'col-6',
					        ],
				  	        'desc' => [
					        	'name' => 'desc',
					            'type' => 'text', 
					            'label' => 'Описание',
					            'col-classes' => 'col-6',
					        ],
				  	        'url' => [
					        	'name' => 'url',
					            'type' => 'text', 
					            'label' => 'URL',
					            'col-classes' => 'col-6',
					        ],
					        'gallery' => [
					        	'name' => 'gallery',
					            'type' => 'gallery',
					            'label' => 'Слайд',
					            'col-classes' => 'col-6',
					            'max-files' => 1, 
					        ],
			            ],	
			        ],  
			        'plashki' => [
			        	'name' => 'plashki',
			            'type' => 'repeated', 
			            'label' => 'Вращающиеся элементы',
			            'field-save' => 'array',
			            'fields' => [
				  	        'text' => [
					        	'name' => 'text',
					            'type' => 'editor', 
					            'size' => 'small',
					            'label' => 'Текст',
					        ],
			            ],	
			        ], 
			        'gallery' => [
			        	'name' => 'gallery',
			            'type' => 'gallery',
			            'label' => 'Галерея',
			            'desc' => 'Если картинка вертикальная, то она отобразится в 2 ряда, если горизонтальная и ширина в 2 раза больше высоты, она отобразиться в 2 ячейки.'
			        ],
	            ],
    			'show' => [ 
	            	[ 'type' => '==', 'field' => 'template', 'value' => 'main' ],
	            ]	
	        ],  

	        // about us
	        'about' => [
	        	'name' => 'about',
	            'type' => 'repeated', 
	            'label' => 'Страница',
	            'field-save' => 'array',
	            'fields' => [
			        'type' => [ 
			        	'name' => 'type',
		        		'type' => 'select', 
		        		'field-save' => 'array',
		        		'label' => 'Тип', 
		        		'options' => [
		        			[ 'value' => 'big', 'label' => 'Большой банер' ],
		        			[ 'value' => 'big_title', 'label' => 'Заголовок' ],
			         		[ 'value' => 'left', 'label' => 'Картинка слева' ],
			         		[ 'value' => 'right', 'label' => 'Картинка справа' ],
		        		],
		        		'col-classes' => 'col-6'
		    		],
		  	        'big_title' => [
			        	'name' => 'big_title',
			            'type' => 'text', 
			            'label' => 'Заголовок',
		    			'show' => [ 
			            	[ 'type' => '==', 'field' => 'type', 'value' => 'big_title' ],
			            ],
			            'col-classes' => 'col-6'
			        ],
			        'gallery' => [
			        	'name' => 'gallery',
			            'type' => 'gallery',
			            'label' => 'Картинка',
			            'max-files' => 1, 
			            'col-classes' => 'col-6',
		    			'show' => [ 
			            	[ 'type' => '!=', 'field' => 'type', 'value' => 'big_title' ],
			            ],
			        ],
		  	        'text' => [
			        	'name' => 'text',
			            'type' => 'editor',
			            'size' => 'small', 
			            'label' => 'Текст',
		    			'show' => [
			            	[ 'type' => '!=', 'field' => 'type', 'value' => 'big' ],
			            	[ 'operator' => '&&', 'type' => '!=', 'field' => 'type', 'value' => 'big_title' ],
			            ],
			        ],
	            ],
    			'show' => [ 
	            	[ 'type' => '==', 'field' => 'template', 'value' => 'about' ],
	            ]	
	        ], 
    		'sitemap' => [
    			'name' => 'sitemap',
    			'type' => 'group',
    			'load-from' => 'Sitemap::page',
    			'field-save' => 'array',
    			'label' => 'Карта сайта' 
    		], 
	    ],

		'edit' => [
			'default' => [
				'label' => 'Основные',
				'name' => 'default',
				'fields' => [ 'name', 'text', 'clients', 'main', 'about' ],
			],
			'attr' => [
				'label' => 'Атрибуты',
				'name' => 'attr',
				'fields' => [ 'category_id', 'template' ],
			],
			'seo' => [
				'label' => 'SEO',
				'name' => 'seo',
				'fields' => [ 'url', 'seo' ],
			],'sitemap' => [
				'label' => 'Карта сайта',
				'name' => 'sitemap',
				'fields' => [ 'sitemap' ],
			]
		],
		'search' => [
          	[
          		'name' => 'search',
          		'type' => 'text',
        		'attr' => [ 'placeholder' => 'Введите текст для поиска' ],
          		'fields' => [ 'name', 'text' ],
          	],[
          		'options-empty' => 'Все категории',
          		'name' => 'parent_cat',
          		'field-from' => 'category_id',
          		'label' => '',
          		'fields' => [ 'category_id'],
          		'search-type' => 'filter',
          	],
        ]
    ];
Clone this wiki locally