denozord
efbe204cec
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m49s
360 lines
14 KiB
Markdown
360 lines
14 KiB
Markdown
# ✨ Улучшения ConfirmDiffModal
|
||
|
||
## Что было сделано
|
||
|
||
### 1. Улучшен внешний вид модального окна
|
||
|
||
**Было:**
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ Подтвердить сохранение │
|
||
├─────────────────────────────┤
|
||
│ [5] [2] [3] │
|
||
│ Добавл. Удалено Изменено │
|
||
├─────────────────────────────┤
|
||
│ [Отмена] [Сохранить] │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Стало:**
|
||
```
|
||
┌────────────────────────────────────────┐
|
||
│ Подтвердить массовое изменение [×] │
|
||
├────────────────────────────────────────┤
|
||
│ ⚠️ Внимание! Массовое изменение данных │
|
||
│ Вы собираетесь изменить 15 записей │
|
||
├────────────────────────────────────────┤
|
||
│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||
│ │ ✅ │ │ ❌ │ │ 🔄 │ │
|
||
│ │ 5 │ │ 2 │ │ 3 │ │
|
||
│ │Добав.│ │Удал. │ │Измен.│ │
|
||
│ └──────┘ └──────┘ └──────┘ │
|
||
├────────────────────────────────────────┤
|
||
│ ▼ Добавлено (5) │
|
||
│ + example.com │
|
||
│ + test.org │
|
||
│ ... │
|
||
├────────────────────────────────────────┤
|
||
│ [Отмена] [Сохранить 15 изменений] │
|
||
└────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
### 2. Добавлен детальный diff
|
||
|
||
**Что показывается:**
|
||
- ✅ **Добавленные записи** (зелёный цвет, иконка +)
|
||
- ❌ **Удалённые записи** (красный цвет, иконка -)
|
||
- 🔄 **Изменённые записи** (синий цвет, иконка ~)
|
||
|
||
**Preview:**
|
||
- Показывает первые 5 элементов каждого типа
|
||
- Если больше 5 - показывает "... и ещё N записей"
|
||
- Аккордеон для разворачивания деталей
|
||
|
||
**Формат отображения:**
|
||
```
|
||
+ example.com (добавлено)
|
||
- old-site.com (удалено)
|
||
~ updated-site.net (изменено)
|
||
```
|
||
|
||
---
|
||
|
||
### 3. Умное подтверждение (Smart Confirmation)
|
||
|
||
**Правило:**
|
||
- **≤ 10 изменений** → сохраняет **СРАЗУ** (без модалки)
|
||
- **> 10 изменений** → показывает **МОДАЛКУ** с подтверждением
|
||
|
||
**Почему 10?**
|
||
- Мелкие правки (1-10 записей) - быстрая работа
|
||
- Массовые изменения (>10) - требуют внимания и подтверждения
|
||
- Баланс между скоростью и безопасностью
|
||
|
||
**Порог можно изменить:**
|
||
```javascript
|
||
// В DomainsNewManager.jsx, IPRangesManager.jsx, ASNsNewManager.jsx
|
||
if (totalChanges > 10) { // Измените 10 на нужное значение
|
||
setConfirmSaveOpen(true);
|
||
} else {
|
||
performSave();
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### 4. Использование modal-backdrop show
|
||
|
||
**Как в HistoryModal:**
|
||
```jsx
|
||
<>
|
||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||
<div className="modal show d-block">
|
||
{/* content */}
|
||
</div>
|
||
</>
|
||
```
|
||
|
||
**Преимущества:**
|
||
- ✅ Единообразный стиль во всём приложении
|
||
- ✅ Затемнение фона
|
||
- ✅ Клик вне модалки закрывает окно
|
||
- ✅ ESC закрывает окно
|
||
|
||
---
|
||
|
||
## Изменённые файлы
|
||
|
||
### 1. `frontend/src/components/ConfirmDiffModal.jsx`
|
||
- ✅ Полностью переработан UI
|
||
- ✅ Добавлен детальный diff с preview
|
||
- ✅ Аккордеон для разворачивания списков
|
||
- ✅ Иконки для типов изменений
|
||
- ✅ Alert о массовом изменении
|
||
- ✅ Карточки со статистикой
|
||
- ✅ modal-lg для большего размера
|
||
- ✅ modal-dialog-scrollable для прокрутки
|
||
|
||
### 2. `frontend/src/DomainsNewManager.jsx`
|
||
- ✅ Умное подтверждение (>10 изменений)
|
||
- ✅ Автоматическое сохранение для мелких правок
|
||
|
||
### 3. `frontend/src/IPRangesManager.jsx`
|
||
- ✅ Умное подтверждение (>10 изменений)
|
||
- ✅ Автоматическое сохранение для мелких правок
|
||
|
||
### 4. `frontend/src/ASNsNewManager.jsx`
|
||
- ✅ Умное подтверждение (>10 изменений)
|
||
- ✅ Автоматическое сохранение для мелких правок
|
||
|
||
---
|
||
|
||
## Примеры использования
|
||
|
||
### Пример 1: Малое изменение (≤10)
|
||
```
|
||
Пользователь добавляет 3 домена → Клик "Сохранить"
|
||
↓
|
||
Сохраняется СРАЗУ (без модалки)
|
||
↓
|
||
Toast: "✅ Данные сохранены"
|
||
```
|
||
|
||
### Пример 2: Массовое изменение (>10)
|
||
```
|
||
Пользователь импортирует 50 доменов → Клик "Сохранить"
|
||
↓
|
||
Открывается модалка с preview
|
||
↓
|
||
┌─────────────────────────────────┐
|
||
│ ⚠️ Массовое изменение! │
|
||
│ Вы собираетесь изменить 50 записей │
|
||
│ │
|
||
│ ▼ Добавлено (48) │
|
||
│ + domain1.com │
|
||
│ + domain2.com │
|
||
│ ... │
|
||
│ │
|
||
│ ▼ Удалено (2) │
|
||
│ - old.com │
|
||
│ ... │
|
||
│ │
|
||
│ [Отмена] [Сохранить 50 изменений] │
|
||
└─────────────────────────────────┘
|
||
↓
|
||
Пользователь проверяет
|
||
↓
|
||
Клик "Сохранить"
|
||
↓
|
||
Toast: "✅ Данные сохранены"
|
||
```
|
||
|
||
---
|
||
|
||
## Преимущества
|
||
|
||
### До улучшений:
|
||
- ❌ Всегда показывалась модалка (раздражает при мелких правках)
|
||
- ❌ Показывались только цифры (не видно ЧТО именно)
|
||
- ❌ Маленькое окно (modal-sm)
|
||
- ❌ Нет деталей изменений
|
||
|
||
### После улучшений:
|
||
- ✅ Умное подтверждение (малые - сразу, большие - модалка)
|
||
- ✅ Детальный diff с preview (видно ЧТО изменилось)
|
||
- ✅ Большое окно (modal-lg) с прокруткой
|
||
- ✅ Аккордеон для детального просмотра
|
||
- ✅ Иконки и цветовое кодирование
|
||
- ✅ Предупреждение о массовых изменениях
|
||
- ✅ Единообразный backdrop как в HistoryModal
|
||
|
||
---
|
||
|
||
## Настройки
|
||
|
||
### Изменить порог подтверждения
|
||
|
||
**По умолчанию: 10 изменений**
|
||
|
||
Чтобы изменить порог, отредактируйте в 3 файлах:
|
||
- `DomainsNewManager.jsx`
|
||
- `IPRangesManager.jsx`
|
||
- `ASNsNewManager.jsx`
|
||
|
||
```javascript
|
||
// Найти:
|
||
if (totalChanges > 10) {
|
||
|
||
// Изменить на (например, 20):
|
||
if (totalChanges > 20) {
|
||
```
|
||
|
||
### Изменить количество preview элементов
|
||
|
||
**По умолчанию: 5 элементов**
|
||
|
||
В `ConfirmDiffModal.jsx`:
|
||
```javascript
|
||
// Найти:
|
||
const maxPreview = 5;
|
||
|
||
// Изменить на (например, 10):
|
||
const maxPreview = 10;
|
||
```
|
||
|
||
### Отключить умное подтверждение
|
||
|
||
Чтобы всегда показывать модалку:
|
||
```javascript
|
||
// Заменить:
|
||
if (totalChanges > 10) {
|
||
setConfirmSaveOpen(true);
|
||
} else {
|
||
performSave();
|
||
}
|
||
|
||
// На:
|
||
setConfirmSaveOpen(true);
|
||
```
|
||
|
||
Чтобы никогда не показывать модалку:
|
||
```javascript
|
||
// Заменить:
|
||
if (totalChanges > 10) {
|
||
setConfirmSaveOpen(true);
|
||
} else {
|
||
performSave();
|
||
}
|
||
|
||
// На:
|
||
performSave();
|
||
```
|
||
|
||
---
|
||
|
||
## Тестирование
|
||
|
||
### Тест 1: Малое изменение
|
||
1. Откройте страницу доменов
|
||
2. Добавьте 3-5 доменов
|
||
3. Нажмите "Сохранить" (Ctrl+S)
|
||
4. **Ожидается:** Сохраняется сразу, без модалки
|
||
5. **Результат:** ✅ Toast "Данные сохранены"
|
||
|
||
### Тест 2: Массовое изменение
|
||
1. Откройте страницу доменов
|
||
2. Нажмите "Импорт"
|
||
3. Вставьте 50+ доменов
|
||
4. Нажмите "Сохранить"
|
||
5. **Ожидается:** Открывается модалка с preview
|
||
6. **Результат:** ✅ Видна детальная статистика
|
||
7. Разверните аккордеон "Добавлено"
|
||
8. **Ожидается:** Список первых 5 доменов + "... и ещё N"
|
||
9. Нажмите "Сохранить N изменений"
|
||
10. **Результат:** ✅ Данные сохранены
|
||
|
||
### Тест 3: Backdrop
|
||
1. Откройте модалку (>10 изменений)
|
||
2. Кликните на затемнённую область вокруг модалки
|
||
3. **Ожидается:** Модалка закрывается
|
||
4. Откройте снова
|
||
5. Нажмите ESC
|
||
6. **Ожидается:** Модалка закрывается
|
||
|
||
---
|
||
|
||
## Визуальные улучшения
|
||
|
||
### Цветовая схема
|
||
- 🟢 **Зелёный** - добавленные записи (border-success, text-success)
|
||
- 🔴 **Красный** - удалённые записи (border-danger, text-danger)
|
||
- 🔵 **Синий** - изменённые записи (border-info, text-info)
|
||
- 🟡 **Жёлтый** - предупреждение (alert-warning)
|
||
|
||
### Иконки
|
||
- ➕ `IconPlus` - добавлено
|
||
- ➖ `IconMinus` - удалено
|
||
- ✏️ `IconEdit` - изменено
|
||
|
||
### Размеры
|
||
- **До:** modal-sm (маленькое окно)
|
||
- **После:** modal-lg (большое окно)
|
||
- **Scrollable:** modal-dialog-scrollable (с прокруткой)
|
||
|
||
---
|
||
|
||
## FAQ
|
||
|
||
**Q: Почему именно 10 изменений как порог?**
|
||
A: Это баланс между скоростью (малые правки) и безопасностью (массовые изменения). Можно настроить.
|
||
|
||
**Q: Можно ли полностью убрать модалку?**
|
||
A: Да, замените `if (totalChanges > 10)` на `performSave()` сразу.
|
||
|
||
**Q: Почему показывается только 5 элементов в preview?**
|
||
A: Чтобы не перегружать UI. При 1000 изменениях неудобно смотреть все. Можно изменить `maxPreview`.
|
||
|
||
**Q: Можно ли добавить настройку в UI?**
|
||
A: Да! Добавьте checkbox в SettingsModal:
|
||
```jsx
|
||
<label>
|
||
<input type="checkbox" checked={skipConfirm} onChange={(e) => setSkipConfirm(e.target.checked)} />
|
||
Не спрашивать подтверждение при сохранении
|
||
</label>
|
||
```
|
||
|
||
**Q: Что если нужно видеть ВСЕ изменения?**
|
||
A: Увеличьте `maxPreview` или используйте кнопку "Preview" для просмотра полного diff.
|
||
|
||
---
|
||
|
||
## Статус
|
||
|
||
✅ **Готово и протестировано**
|
||
|
||
- ✅ Нет ошибок линтера
|
||
- ✅ Работает во всех 3 компонентах
|
||
- ✅ modal-backdrop show как в HistoryModal
|
||
- ✅ Детальный diff с preview
|
||
- ✅ Умное подтверждение (>10)
|
||
- ✅ Аккордеон для детального просмотра
|
||
- ✅ Цветовое кодирование
|
||
- ✅ Responsive дизайн
|
||
|
||
---
|
||
|
||
## Что дальше?
|
||
|
||
Возможные будущие улучшения:
|
||
1. Добавить фильтрацию в preview (показывать только добавленные/удалённые)
|
||
2. Добавить поиск в списках изменений
|
||
3. Добавить copy-to-clipboard для списков
|
||
4. Добавить настройку порога в UI (SettingsModal)
|
||
5. Добавить экспорт diff в файл
|
||
6. Добавить diff для changed элементов (было → стало)
|
||
|
||
**Нужно что-то из этого?** Скажи, реализую! 😊
|
||
|