Обновить README.md
This commit is contained in:
parent
e7313870c5
commit
c52f372f26
695
README.md
695
README.md
@ -1,3 +1,694 @@
|
|||||||
# CRUD_Dialogs
|
# Документация библиотеки CRUD Dialogs
|
||||||
|
|
||||||
Библиотека для абстракции создания диалогов для CRUD операций. Требует bootstrap и dom.js
|
Библиотека для создания модальных диалоговых окон на основе Bootstrap с поддержкой CRUD операций, вкладок и гибкой настройкой макета.
|
||||||
|
|
||||||
|
## Оглавление
|
||||||
|
|
||||||
|
1. [Подключение](#подключение)
|
||||||
|
2. [Основные концепции](#основные-концепции)
|
||||||
|
3. [API Reference](#api-reference)
|
||||||
|
- [makeDialog](#makedialog)
|
||||||
|
- [Методы объекта диалога](#методы-объекта-диалога)
|
||||||
|
- [Глобальные методы](#глобальные-методы)
|
||||||
|
4. [Типы полей](#типы-полей)
|
||||||
|
5. [Настройки диалога](#настройки-диалога)
|
||||||
|
6. [Layout и категории](#layout-и-категории)
|
||||||
|
7. [Примеры использования](#примеры-использования)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Подключение
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Зависимости -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Библиотека dom.js (должна быть подключена первой) -->
|
||||||
|
<script src="dom.js"></script>
|
||||||
|
|
||||||
|
<!-- Библиотека CRUD Dialogs -->
|
||||||
|
<script src="crud-dialogs.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Основные концепции
|
||||||
|
|
||||||
|
Библиотека работает с двумя основными режимами открытия диалога:
|
||||||
|
|
||||||
|
- **create** — создание нового элемента (пустая форма)
|
||||||
|
- **update** — редактирование существующего элемента (форма с подгруженными данными)
|
||||||
|
|
||||||
|
Каждый диалог имеет:
|
||||||
|
- Уникальный строковый идентификатор (dialogId)
|
||||||
|
- Набор полей с типами и настройками
|
||||||
|
- Эндпоинты для CRUD операций (устанавливаются отдельно)
|
||||||
|
- Опциональные настройки отображения (ширина, категории)
|
||||||
|
|
||||||
|
Управлять диалогом можно:
|
||||||
|
- Через объект, полученный при создании
|
||||||
|
- Через глобальные методы, используя dialogId
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## API Reference
|
||||||
|
|
||||||
|
### makeDialog
|
||||||
|
|
||||||
|
Создает новый диалог и возвращает объект для работы с ним.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
crud_d.makeDialog(dialogId, fields, options)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Параметры:**
|
||||||
|
|
||||||
|
| Параметр | Тип | Обязательный | Описание |
|
||||||
|
|----------|-----|--------------|----------|
|
||||||
|
| dialogId | string | Да | Уникальный идентификатор диалога (не DOM id) |
|
||||||
|
| fields | object | Да | Объект с описанием полей |
|
||||||
|
| options | object | Нет | Дополнительные настройки диалога |
|
||||||
|
|
||||||
|
**Возвращает:** Объект диалога с методами управления.
|
||||||
|
|
||||||
|
**Пример:**
|
||||||
|
```javascript
|
||||||
|
const dialog = crud_d.makeDialog('user_form', {
|
||||||
|
name: ['text', { label: 'Имя', required: true }, ''],
|
||||||
|
email: ['email', { label: 'Email', required: true }, '']
|
||||||
|
}, {
|
||||||
|
width: 'lg'
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Методы объекта диалога
|
||||||
|
|
||||||
|
#### setCreateEndpoint(endpoint)
|
||||||
|
Устанавливает endpoint для создания элемента (POST).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.setCreateEndpoint('/api/users')
|
||||||
|
```
|
||||||
|
|
||||||
|
#### setUpdateEndpoint(endpoint)
|
||||||
|
Устанавливает endpoint для обновления элемента (PUT). Используйте `{id}` для подстановки ID элемента.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.setUpdateEndpoint('/api/users/{id}')
|
||||||
|
```
|
||||||
|
|
||||||
|
#### setGetEndpoint(endpoint)
|
||||||
|
Устанавливает endpoint для получения данных элемента (GET). Используйте `{id}` для подстановки ID элемента.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.setGetEndpoint('/api/users/{id}')
|
||||||
|
```
|
||||||
|
|
||||||
|
#### setDeleteEndpoint(endpoint)
|
||||||
|
Устанавливает endpoint для удаления элемента (DELETE). Используйте `{id}` для подстановки ID элемента.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.setDeleteEndpoint('/api/users/{id}')
|
||||||
|
```
|
||||||
|
|
||||||
|
#### openCreate(title)
|
||||||
|
Открывает диалог в режиме создания.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.openCreate('Новый пользователь')
|
||||||
|
.onSuccess(function(result) {
|
||||||
|
console.log('Создан:', result);
|
||||||
|
})
|
||||||
|
.onError(function(error) {
|
||||||
|
console.error('Ошибка:', error);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### openUpdate(itemId, title)
|
||||||
|
Открывает диалог в режиме редактирования. Автоматически загружает данные через GET endpoint.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.openUpdate(42, 'Редактирование пользователя')
|
||||||
|
.onSuccess(function(result) {
|
||||||
|
console.log('Обновлен:', result);
|
||||||
|
})
|
||||||
|
.onDelete(function(id) {
|
||||||
|
console.log('Удален:', id);
|
||||||
|
})
|
||||||
|
.onError(function(error) {
|
||||||
|
console.error('Ошибка:', error);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### getConfig()
|
||||||
|
Возвращает текущую конфигурацию диалога.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const config = dialog.getConfig();
|
||||||
|
console.log(config.fields, config.options, config.endpoints);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### destroy()
|
||||||
|
Удаляет регистрацию диалога и закрывает его, если открыт.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.destroy();
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Методы API при открытом диалоге
|
||||||
|
|
||||||
|
При открытии диалога возвращается объект с методами для управления текущим экземпляром:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const api = dialog.openCreate('Заголовок');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### onSuccess(callback)
|
||||||
|
Устанавливает обработчик успешного выполнения операции.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
api.onSuccess(function(result) {
|
||||||
|
// result - данные, возвращенные сервером
|
||||||
|
console.log('Успех:', result);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### onError(callback)
|
||||||
|
Устанавливает обработчик ошибок.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
api.onError(function(error) {
|
||||||
|
console.error('Ошибка:', error.message);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### onDelete(callback)
|
||||||
|
Устанавливает обработчик успешного удаления (только для режима update).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
api.onDelete(function(itemId) {
|
||||||
|
console.log('Удален элемент с ID:', itemId);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### setValues(values)
|
||||||
|
Устанавливает значения полей формы.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
api.setValues({
|
||||||
|
name: 'Иван',
|
||||||
|
email: 'ivan@example.com'
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### getFormData()
|
||||||
|
Возвращает текущие данные формы.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const data = api.getFormData();
|
||||||
|
console.log(data);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### close()
|
||||||
|
Закрывает диалог программно.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
api.close();
|
||||||
|
```
|
||||||
|
|
||||||
|
#### show()
|
||||||
|
Показывает диалог (если был скрыт).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
api.show();
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Глобальные методы
|
||||||
|
|
||||||
|
Работа с диалогами через глобальный объект `crud_d` по dialogId.
|
||||||
|
|
||||||
|
#### setCreateEndpoint(dialogId, endpoint)
|
||||||
|
```javascript
|
||||||
|
crud_d.setCreateEndpoint('user_form', '/api/users');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### setUpdateEndpoint(dialogId, endpoint)
|
||||||
|
```javascript
|
||||||
|
crud_d.setUpdateEndpoint('user_form', '/api/users/{id}');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### setGetEndpoint(dialogId, endpoint)
|
||||||
|
```javascript
|
||||||
|
crud_d.setGetEndpoint('user_form', '/api/users/{id}');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### setDeleteEndpoint(dialogId, endpoint)
|
||||||
|
```javascript
|
||||||
|
crud_d.setDeleteEndpoint('user_form', '/api/users/{id}');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### openCreate(dialogId, title)
|
||||||
|
```javascript
|
||||||
|
crud_d.openCreate('user_form', 'Новый пользователь')
|
||||||
|
.onSuccess(function(result) {
|
||||||
|
console.log('Создан:', result);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### openUpdate(dialogId, itemId, title)
|
||||||
|
```javascript
|
||||||
|
crud_d.openUpdate('user_form', 42, 'Редактирование')
|
||||||
|
.onSuccess(function(result) {
|
||||||
|
console.log('Обновлен:', result);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### closeDialog(dialogId)
|
||||||
|
```javascript
|
||||||
|
crud_d.closeDialog('user_form');
|
||||||
|
```
|
||||||
|
|
||||||
|
#### getRegisteredDialogs()
|
||||||
|
```javascript
|
||||||
|
const dialogs = crud_d.getRegisteredDialogs();
|
||||||
|
console.log(dialogs); // ['user_form', 'product_form']
|
||||||
|
```
|
||||||
|
|
||||||
|
#### closeAll()
|
||||||
|
```javascript
|
||||||
|
crud_d.closeAll();
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Типы полей
|
||||||
|
|
||||||
|
### text
|
||||||
|
Текстовое поле ввода.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
fieldName: ['text', {
|
||||||
|
label: 'Название поля', // string - заголовок
|
||||||
|
required: true, // boolean - обязательно для заполнения
|
||||||
|
placeholder: 'Подсказка', // string - текст-подсказка
|
||||||
|
readonly: false, // boolean - только для чтения
|
||||||
|
maxlength: 100 // number - максимальная длина
|
||||||
|
}, 'значение по умолчанию']
|
||||||
|
```
|
||||||
|
|
||||||
|
### number
|
||||||
|
Числовое поле ввода.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
fieldName: ['number', {
|
||||||
|
label: 'Цена',
|
||||||
|
required: true,
|
||||||
|
min: 0, // number - минимальное значение
|
||||||
|
max: 1000000, // number - максимальное значение
|
||||||
|
step: 0.01 // number - шаг изменения
|
||||||
|
}, 0]
|
||||||
|
```
|
||||||
|
|
||||||
|
### email
|
||||||
|
Поле для email с валидацией формата.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
fieldName: ['email', {
|
||||||
|
label: 'Email',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'user@example.com'
|
||||||
|
}, '']
|
||||||
|
```
|
||||||
|
|
||||||
|
### password
|
||||||
|
Поле для пароля (скрытый ввод).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
fieldName: ['password', {
|
||||||
|
label: 'Пароль',
|
||||||
|
required: true,
|
||||||
|
placeholder: 'Введите пароль'
|
||||||
|
}, '']
|
||||||
|
```
|
||||||
|
|
||||||
|
### textarea
|
||||||
|
Многострочное текстовое поле.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
fieldName: ['textarea', {
|
||||||
|
label: 'Описание',
|
||||||
|
required: false,
|
||||||
|
rows: 5 // number - количество строк
|
||||||
|
}, '']
|
||||||
|
```
|
||||||
|
|
||||||
|
### select
|
||||||
|
Выпадающий список.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
fieldName: ['select', {
|
||||||
|
label: 'Категория',
|
||||||
|
required: true,
|
||||||
|
options: [ // array - список опций
|
||||||
|
{ value: 'electronics', label: 'Электроника' },
|
||||||
|
{ value: 'books', label: 'Книги' },
|
||||||
|
{ value: 'clothing', label: 'Одежда' }
|
||||||
|
]
|
||||||
|
}, 'electronics'] // значение по умолчанию
|
||||||
|
```
|
||||||
|
|
||||||
|
### checkbox
|
||||||
|
Флажок (чекбокс).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
fieldName: ['checkbox', {
|
||||||
|
label: 'Активен',
|
||||||
|
required: false
|
||||||
|
}, true] // значение по умолчанию
|
||||||
|
```
|
||||||
|
|
||||||
|
### date
|
||||||
|
Поле выбора даты.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
fieldName: ['date', {
|
||||||
|
label: 'Дата рождения',
|
||||||
|
required: true
|
||||||
|
}, '2024-01-01']
|
||||||
|
```
|
||||||
|
|
||||||
|
### custom
|
||||||
|
Кастомное поле на основе HTMLElement.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const customElement = document.createElement('div');
|
||||||
|
customElement.innerHTML = `
|
||||||
|
<label class="form-label">Цвет</label>
|
||||||
|
<input type="color" class="form-control">
|
||||||
|
`;
|
||||||
|
|
||||||
|
fieldName: ['custom', customElement, '#ff0000']
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Настройки диалога
|
||||||
|
|
||||||
|
Объект options передается третьим параметром в `makeDialog`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
width: 'lg', // Ширина диалога: 'sm', 'lg', 'xl' или CSS значение ('800px', '90%')
|
||||||
|
categories: { // Категории (вкладки)
|
||||||
|
'Основное': [
|
||||||
|
['name', 'price'],
|
||||||
|
['description']
|
||||||
|
],
|
||||||
|
'Дополнительно': [
|
||||||
|
['sku', 'weight'],
|
||||||
|
['dimensions']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Layout и категории
|
||||||
|
|
||||||
|
### Без категорий
|
||||||
|
Если категории не указаны, все поля отображаются последовательно по одному в ряду.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
crud_d.makeDialog('simple', {
|
||||||
|
name: ['text', { label: 'Имя' }, ''],
|
||||||
|
email: ['email', { label: 'Email' }, ''],
|
||||||
|
phone: ['text', { label: 'Телефон' }, '']
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Layout в категориях
|
||||||
|
Каждая категория содержит массив рядов. Ряд — это массив имен полей, которые будут в одной строке.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
categories: {
|
||||||
|
'Основная информация': [
|
||||||
|
['first_name', 'last_name'], // 2 поля в ряд
|
||||||
|
['email', 'phone'], // 2 поля в ряд
|
||||||
|
['address'] // 1 поле в ряд
|
||||||
|
],
|
||||||
|
'Дополнительно': [
|
||||||
|
['birth_date', 'gender'], // 2 поля в ряд
|
||||||
|
['notes'] // 1 поле в ряд
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Автоматическая категория "Дополнительно"
|
||||||
|
- Если указана только одна категория, все поля, не попавшие в неё, автоматически добавляются во вкладку "Дополнительно"
|
||||||
|
- Если категорий несколько, нераспределенные поля также добавляются в "Дополнительно"
|
||||||
|
- Если категории не указаны вообще, все поля идут подряд без вкладок
|
||||||
|
|
||||||
|
### Ширина колонок в ряду
|
||||||
|
Автоматически рассчитывается на основе количества полей:
|
||||||
|
- 1 поле: `col-12` (полная ширина)
|
||||||
|
- 2 поля: `col-md-6` (по половине)
|
||||||
|
- 3 поля: `col-md-4` (по трети)
|
||||||
|
- 4 поля: `col-md-3` (по четверти)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Примеры использования
|
||||||
|
|
||||||
|
### Простой диалог создания
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const dialog = crud_d.makeDialog('simple_user', {
|
||||||
|
name: ['text', { label: 'Имя', required: true }, ''],
|
||||||
|
email: ['email', { label: 'Email', required: true }, '']
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog.setCreateEndpoint('/api/users');
|
||||||
|
|
||||||
|
// Открытие
|
||||||
|
dialog.openCreate('Новый пользователь')
|
||||||
|
.onSuccess(function(result) {
|
||||||
|
alert('Пользователь создан!');
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Диалог с обновлением и удалением
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const dialog = crud_d.makeDialog('user_edit', {
|
||||||
|
name: ['text', { label: 'Имя', required: true }, ''],
|
||||||
|
email: ['email', { label: 'Email', required: true }, ''],
|
||||||
|
role: ['select', {
|
||||||
|
label: 'Роль',
|
||||||
|
options: [
|
||||||
|
{ value: 'user', label: 'Пользователь' },
|
||||||
|
{ value: 'admin', label: 'Администратор' }
|
||||||
|
]
|
||||||
|
}, 'user']
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog.setGetEndpoint('/api/users/{id}');
|
||||||
|
dialog.setUpdateEndpoint('/api/users/{id}');
|
||||||
|
dialog.setDeleteEndpoint('/api/users/{id}');
|
||||||
|
|
||||||
|
// Открытие на редактирование
|
||||||
|
dialog.openUpdate(42, 'Редактирование пользователя')
|
||||||
|
.onSuccess(function(result) {
|
||||||
|
console.log('Обновлен:', result);
|
||||||
|
// Обновить список пользователей
|
||||||
|
})
|
||||||
|
.onDelete(function(id) {
|
||||||
|
console.log('Удален:', id);
|
||||||
|
// Удалить из списка
|
||||||
|
})
|
||||||
|
.onError(function(error) {
|
||||||
|
alert('Ошибка: ' + error.message);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Сложный диалог с категориями
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const dialog = crud_d.makeDialog('product_form', {
|
||||||
|
name: ['text', { label: 'Название', required: true }, ''],
|
||||||
|
price: ['number', { label: 'Цена', required: true, min: 0 }, 0],
|
||||||
|
quantity: ['number', { label: 'Количество', min: 0 }, 0],
|
||||||
|
category: ['select', {
|
||||||
|
label: 'Категория',
|
||||||
|
options: [
|
||||||
|
{ value: 'electronics', label: 'Электроника' },
|
||||||
|
{ value: 'clothing', label: 'Одежда' }
|
||||||
|
]
|
||||||
|
}, 'electronics'],
|
||||||
|
description: ['textarea', { label: 'Описание', rows: 5 }, ''],
|
||||||
|
weight: ['number', { label: 'Вес (кг)', step: 0.1 }, null],
|
||||||
|
dimensions: ['text', { label: 'Размеры' }, ''],
|
||||||
|
manufacturer: ['text', { label: 'Производитель' }, ''],
|
||||||
|
in_stock: ['checkbox', { label: 'В наличии' }, true]
|
||||||
|
}, {
|
||||||
|
width: 'lg',
|
||||||
|
categories: {
|
||||||
|
'Основное': [
|
||||||
|
['name'],
|
||||||
|
['price', 'quantity', 'in_stock'],
|
||||||
|
['category'],
|
||||||
|
['description']
|
||||||
|
],
|
||||||
|
'Характеристики': [
|
||||||
|
['weight', 'dimensions'],
|
||||||
|
['manufacturer']
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog.setCreateEndpoint('/api/products');
|
||||||
|
dialog.setGetEndpoint('/api/products/{id}');
|
||||||
|
dialog.setUpdateEndpoint('/api/products/{id}');
|
||||||
|
dialog.setDeleteEndpoint('/api/products/{id}');
|
||||||
|
```
|
||||||
|
|
||||||
|
### Глобальное управление
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Регистрируем диалог
|
||||||
|
crud_d.makeDialog('quick_user', {
|
||||||
|
name: ['text', { label: 'Имя' }, ''],
|
||||||
|
email: ['email', { label: 'Email' }, '']
|
||||||
|
});
|
||||||
|
|
||||||
|
// Устанавливаем эндпоинты глобально
|
||||||
|
crud_d.setCreateEndpoint('quick_user', '/api/users');
|
||||||
|
crud_d.setGetEndpoint('quick_user', '/api/users/{id}');
|
||||||
|
|
||||||
|
// Открываем из любого места
|
||||||
|
crud_d.openCreate('quick_user', 'Быстрое создание')
|
||||||
|
.onSuccess(function(result) {
|
||||||
|
console.log('Готово!', result);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Закрываем при необходимости
|
||||||
|
crud_d.closeDialog('quick_user');
|
||||||
|
|
||||||
|
// Закрыть все открытые диалоги
|
||||||
|
crud_d.closeAll();
|
||||||
|
```
|
||||||
|
|
||||||
|
### Кастомное поле
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Создаем кастомный элемент для выбора цвета
|
||||||
|
const colorPicker = document.createElement('div');
|
||||||
|
colorPicker.className = 'mb-3';
|
||||||
|
colorPicker.innerHTML = `
|
||||||
|
<label class="form-label">Цвет товара</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="color" class="form-control form-control-color"
|
||||||
|
value="#563d7c" title="Выберите цвет">
|
||||||
|
<input type="text" class="form-control" value="#563d7c">
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Синхронизация инпутов
|
||||||
|
const [colorInput, textInput] = colorPicker.querySelectorAll('input');
|
||||||
|
colorInput.addEventListener('input', () => textInput.value = colorInput.value);
|
||||||
|
textInput.addEventListener('input', () => colorInput.value = textInput.value);
|
||||||
|
|
||||||
|
const dialog = crud_d.makeDialog('custom_example', {
|
||||||
|
name: ['text', { label: 'Название' }, ''],
|
||||||
|
color: ['custom', colorPicker, '#563d7c']
|
||||||
|
});
|
||||||
|
|
||||||
|
dialog.setCreateEndpoint('/api/products');
|
||||||
|
dialog.openCreate('Товар с цветом');
|
||||||
|
```
|
||||||
|
|
||||||
|
### Установка значений по умолчанию
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.openCreate('Новый заказ')
|
||||||
|
.setValues({
|
||||||
|
priority: 'high',
|
||||||
|
status: 'pending',
|
||||||
|
date: new Date().toISOString().split('T')[0]
|
||||||
|
})
|
||||||
|
.onSuccess(function(result) {
|
||||||
|
console.log('Заказ создан:', result);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## События и колбэки
|
||||||
|
|
||||||
|
### Порядок выполнения
|
||||||
|
|
||||||
|
1. **Создание (create):**
|
||||||
|
- Валидация формы
|
||||||
|
- POST запрос на create endpoint
|
||||||
|
- `onSuccess` при успехе
|
||||||
|
- `onError` при ошибке
|
||||||
|
- Автоматическое закрытие диалога при успехе
|
||||||
|
|
||||||
|
2. **Обновление (update):**
|
||||||
|
- GET запрос на get endpoint для загрузки данных
|
||||||
|
- Заполнение формы полученными данными
|
||||||
|
- При сохранении: валидация → PUT запрос → `onSuccess`/`onError`
|
||||||
|
- При удалении: подтверждение → DELETE запрос → `onDelete`/`onError`
|
||||||
|
- Автоматическое закрытие диалога при успехе
|
||||||
|
|
||||||
|
### Цепочка методов
|
||||||
|
|
||||||
|
Все методы настройки возвращают `this`, что позволяет использовать цепочку вызовов:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog
|
||||||
|
.setCreateEndpoint('/api/users')
|
||||||
|
.setGetEndpoint('/api/users/{id}')
|
||||||
|
.openCreate('Пользователь')
|
||||||
|
.onSuccess(handleSuccess)
|
||||||
|
.onError(handleError);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Обработка ошибок
|
||||||
|
|
||||||
|
Библиотека автоматически обрабатывает HTTP ошибки и отображает их в диалоге:
|
||||||
|
|
||||||
|
- Ошибки валидации отображаются в alert-блоке внутри диалога
|
||||||
|
- Ошибки сети/сервера отображаются там же
|
||||||
|
- Все ошибки также передаются в `onError` колбэк
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
dialog.openCreate('Форма')
|
||||||
|
.onError(function(error) {
|
||||||
|
// error.message содержит текст ошибки
|
||||||
|
if (error.message.includes('422')) {
|
||||||
|
// Ошибка валидации на сервере
|
||||||
|
} else if (error.message.includes('500')) {
|
||||||
|
// Ошибка сервера
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Примечания
|
||||||
|
|
||||||
|
- Все эндпоинты поддерживают подстановку `{id}` в URL
|
||||||
|
- При закрытии диалога через `data-bs-dismiss="modal"` он автоматически очищается
|
||||||
|
- Одновременно может быть открыт только один экземпляр диалога с одинаковым dialogId
|
||||||
|
- Библиотека требует Bootstrap 5 и библиотеку dom.js
|
||||||
|
- Все HTTP запросы отправляются с заголовком `Content-Type: application/json`
|
||||||
Loading…
x
Reference in New Issue
Block a user