feat: Добавление умного подтверждения изменений в компоненты ASNsNewManager, DomainsNewManager и IPRangesManager. Модальное окно ConfirmDiffModal обновлено для отображения детального diff и статистики изменений, улучшая взаимодействие с пользователем при массовых изменениях.
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m49s
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m49s
This commit is contained in:
@@ -0,0 +1,359 @@
|
||||
# ✨ Улучшения 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 элементов (было → стало)
|
||||
|
||||
**Нужно что-то из этого?** Скажи, реализую! 😊
|
||||
|
||||
Reference in New Issue
Block a user