@libs-ui/services-dialog 0.2.356-41 → 0.2.356-43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +368 -67
- package/fesm2022/libs-ui-services-dialog.mjs.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,21 +1,30 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/services-dialog
|
|
2
2
|
|
|
3
|
-
>
|
|
4
|
-
>
|
|
5
|
-
> Service giúp tạo và quản lý Modal Dialog động trong ứng dụng Angular một cách chuyên nghiệp.
|
|
3
|
+
> Service quản lý Modal Dialog động trong Angular — tạo, hiển thị và đóng Dialog mà không cần khai báo thẻ trong template.
|
|
6
4
|
|
|
7
5
|
## Giới thiệu
|
|
8
6
|
|
|
9
|
-
`LibsUiDialogService` cung cấp
|
|
7
|
+
`LibsUiDialogService` cung cấp API đơn giản để hiển thị Modal Dialog tại bất kỳ đâu trong ứng dụng Angular thông qua Service, không cần khai báo component trong template HTML. Service quản lý toàn bộ vòng đời của Dialog — từ khởi tạo component động, gắn vào DOM, xử lý các event (agree/cancel/close/back), đến dọn dẹp khi đóng. Mỗi Dialog được định danh bằng UUID, cho phép quản lý nhiều Dialog đồng thời một cách độc lập.
|
|
10
8
|
|
|
11
|
-
##
|
|
9
|
+
## Tính năng
|
|
12
10
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
- ✅ Tạo Modal Dialog động tại runtime (không cần khai báo trong template)
|
|
12
|
+
- ✅ Quản lý nhiều Dialog đồng thời qua Map với UUID unique
|
|
13
|
+
- ✅ Xử lý 4 loại event: `agree`, `cancel`, `close`, `back` với callback async
|
|
14
|
+
- ✅ Hỗ trợ tùy chỉnh footer với danh sách button tùy ý (`buttonsFooter`)
|
|
15
|
+
- ✅ Auto-close sau event hoặc kiểm soát thủ công qua `ignoreRemoveDialog`
|
|
16
|
+
- ✅ Toggle disable trạng thái toàn bộ Dialog để ngăn thao tác trùng lặp
|
|
17
|
+
- ✅ Hỗ trợ cả Micro Frontend (`isAddParentDocument`)
|
|
18
|
+
- ✅ Bảo mật XSS mặc định cho title (`titleUseXssFilter: true`)
|
|
19
|
+
- ✅ Hai chế độ vị trí: `center` và `offset-right`
|
|
20
|
+
|
|
21
|
+
## Khi nào sử dụng
|
|
22
|
+
|
|
23
|
+
- Khi cần hiển thị Dialog/Modal từ service layer mà không muốn khai báo component trong template
|
|
24
|
+
- Khi cần thông báo xác nhận (`confirm`) trước các thao tác destructive (xóa, reset, gửi)
|
|
25
|
+
- Khi cần Dialog với async action (gọi API, loading state) trước khi đóng
|
|
26
|
+
- Khi cần tạo Dialog linh hoạt với nhiều loại button tùy chỉnh ở footer
|
|
27
|
+
- Khi cần quản lý nhiều Dialog đồng thời và có thể đóng từ bất kỳ component nào
|
|
19
28
|
|
|
20
29
|
## Cài đặt
|
|
21
30
|
|
|
@@ -27,78 +36,370 @@ npm install @libs-ui/services-dialog
|
|
|
27
36
|
|
|
28
37
|
```typescript
|
|
29
38
|
import { LibsUiDialogService } from '@libs-ui/services-dialog';
|
|
39
|
+
import { IDialog, IDialogConfigEvent } from '@libs-ui/services-dialog';
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Vì là Service (`providedIn: 'root'`), không cần khai báo trong `imports[]` của component. Chỉ cần inject:
|
|
43
|
+
|
|
44
|
+
```typescript
|
|
45
|
+
import { Component, inject } from '@angular/core';
|
|
46
|
+
import { LibsUiDialogService } from '@libs-ui/services-dialog';
|
|
30
47
|
|
|
31
48
|
@Component({
|
|
32
49
|
standalone: true,
|
|
33
|
-
|
|
34
|
-
|
|
50
|
+
selector: 'app-my-feature',
|
|
51
|
+
templateUrl: './my-feature.component.html',
|
|
35
52
|
})
|
|
36
|
-
export class
|
|
37
|
-
private dialogService = inject(LibsUiDialogService);
|
|
53
|
+
export class MyFeatureComponent {
|
|
54
|
+
private readonly dialogService = inject(LibsUiDialogService);
|
|
38
55
|
}
|
|
39
56
|
```
|
|
40
57
|
|
|
41
|
-
##
|
|
58
|
+
## Ví dụ sử dụng
|
|
42
59
|
|
|
43
|
-
### 1. Dialog cơ bản
|
|
60
|
+
### 1. Dialog thông báo cơ bản
|
|
44
61
|
|
|
45
62
|
```typescript
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
63
|
+
import { Component, inject } from '@angular/core';
|
|
64
|
+
import { LibsUiDialogService } from '@libs-ui/services-dialog';
|
|
65
|
+
|
|
66
|
+
@Component({
|
|
67
|
+
standalone: true,
|
|
68
|
+
selector: 'app-notification-demo',
|
|
69
|
+
template: `<button (click)="handlerOpenNotice()">Thông báo</button>`,
|
|
70
|
+
})
|
|
71
|
+
export class NotificationDemoComponent {
|
|
72
|
+
private readonly dialogService = inject(LibsUiDialogService);
|
|
73
|
+
|
|
74
|
+
protected handlerOpenNotice(): void {
|
|
75
|
+
const dialogId = this.dialogService.addDialog({
|
|
76
|
+
title: 'Thông báo',
|
|
77
|
+
bodyConfig: {
|
|
78
|
+
lines: [{ text: 'Cập nhật dữ liệu thành công.' }],
|
|
79
|
+
},
|
|
80
|
+
buttonsFooter: [
|
|
81
|
+
{
|
|
82
|
+
label: 'Đóng',
|
|
83
|
+
type: 'button-primary',
|
|
84
|
+
action: async () => {
|
|
85
|
+
this.dialogService.removeDialog(dialogId);
|
|
86
|
+
await Promise.resolve();
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
],
|
|
90
|
+
});
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### 2. Dialog xác nhận xóa với async action
|
|
96
|
+
|
|
97
|
+
```typescript
|
|
98
|
+
import { Component, inject } from '@angular/core';
|
|
99
|
+
import { LibsUiDialogService } from '@libs-ui/services-dialog';
|
|
100
|
+
|
|
101
|
+
@Component({
|
|
102
|
+
standalone: true,
|
|
103
|
+
selector: 'app-delete-confirm',
|
|
104
|
+
template: `<button (click)="handlerDeleteItem()">Xóa</button>`,
|
|
105
|
+
})
|
|
106
|
+
export class DeleteConfirmComponent {
|
|
107
|
+
private readonly dialogService = inject(LibsUiDialogService);
|
|
108
|
+
|
|
109
|
+
protected handlerDeleteItem(): void {
|
|
110
|
+
const dialogId = this.dialogService.addDialog({
|
|
111
|
+
title: 'Xác nhận xóa',
|
|
112
|
+
width: '400px',
|
|
113
|
+
bodyConfig: {
|
|
114
|
+
iconType: 'warning',
|
|
115
|
+
lines: [
|
|
116
|
+
{ text: 'Bạn có chắc chắn muốn xóa mục này không?' },
|
|
117
|
+
{ text: 'Hành động này không thể hoàn tác.', class: 'text-red-500' },
|
|
118
|
+
],
|
|
119
|
+
},
|
|
120
|
+
buttonsFooter: [
|
|
121
|
+
{
|
|
122
|
+
label: 'Hủy bỏ',
|
|
123
|
+
type: 'button-primary-revert',
|
|
124
|
+
action: async () => {
|
|
125
|
+
this.dialogService.removeDialog(dialogId);
|
|
126
|
+
await Promise.resolve();
|
|
127
|
+
},
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
label: 'Xóa ngay',
|
|
131
|
+
type: 'button-danger-high',
|
|
132
|
+
action: async () => {
|
|
133
|
+
await this.deleteApi();
|
|
134
|
+
this.dialogService.removeDialog(dialogId);
|
|
135
|
+
},
|
|
136
|
+
},
|
|
137
|
+
],
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
private async deleteApi(): Promise<void> {
|
|
142
|
+
// Gọi API xóa dữ liệu
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
### 3. Dialog với loading state — ngăn auto-close
|
|
148
|
+
|
|
149
|
+
```typescript
|
|
150
|
+
import { Component, inject } from '@angular/core';
|
|
151
|
+
import { LibsUiDialogService } from '@libs-ui/services-dialog';
|
|
152
|
+
|
|
153
|
+
@Component({
|
|
154
|
+
standalone: true,
|
|
155
|
+
selector: 'app-processing-dialog',
|
|
156
|
+
template: `<button (click)="handlerSubmit()">Gửi dữ liệu</button>`,
|
|
157
|
+
})
|
|
158
|
+
export class ProcessingDialogComponent {
|
|
159
|
+
private readonly dialogService = inject(LibsUiDialogService);
|
|
160
|
+
|
|
161
|
+
protected handlerSubmit(): void {
|
|
162
|
+
const dialogId = this.dialogService.addDialog({
|
|
163
|
+
title: 'Xác nhận gửi',
|
|
164
|
+
bodyConfig: {
|
|
165
|
+
lines: [{ text: 'Bạn muốn gửi dữ liệu lên hệ thống?' }],
|
|
166
|
+
},
|
|
167
|
+
configAgreeEvent: {
|
|
168
|
+
ignoreRemoveDialog: true, // Ngăn auto-close để chờ xử lý xong
|
|
169
|
+
callback: async (control) => {
|
|
170
|
+
control?.setStateDisable(true); // Disable nút tránh click nhiều lần
|
|
171
|
+
try {
|
|
172
|
+
await this.submitApi();
|
|
173
|
+
this.dialogService.removeDialog(dialogId); // Đóng thủ công sau khi xong
|
|
174
|
+
} catch {
|
|
175
|
+
control?.setStateDisable(false); // Re-enable khi lỗi
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
configCancelEvent: {
|
|
180
|
+
callback: async () => {
|
|
181
|
+
await Promise.resolve();
|
|
182
|
+
},
|
|
183
|
+
},
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
private async submitApi(): Promise<void> {
|
|
188
|
+
// Gọi API submit dữ liệu
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### 4. Dialog với nhiều Dialog đồng thời và clearAll
|
|
194
|
+
|
|
195
|
+
```typescript
|
|
196
|
+
import { Component, inject, signal } from '@angular/core';
|
|
197
|
+
import { LibsUiDialogService } from '@libs-ui/services-dialog';
|
|
198
|
+
|
|
199
|
+
@Component({
|
|
200
|
+
standalone: true,
|
|
201
|
+
selector: 'app-multi-dialog',
|
|
202
|
+
template: `
|
|
203
|
+
<button (click)="handlerOpenMultiple()">Mở nhiều Dialog</button>
|
|
204
|
+
<button (click)="handlerClearAll()">Đóng tất cả</button>
|
|
205
|
+
`,
|
|
206
|
+
})
|
|
207
|
+
export class MultiDialogComponent {
|
|
208
|
+
private readonly dialogService = inject(LibsUiDialogService);
|
|
209
|
+
private readonly openDialogIds = signal<string[]>([]);
|
|
210
|
+
|
|
211
|
+
protected handlerOpenMultiple(): void {
|
|
212
|
+
const id = this.dialogService.addDialog({
|
|
213
|
+
title: `Dialog #${this.openDialogIds().length + 1}`,
|
|
214
|
+
bodyConfig: {
|
|
215
|
+
lines: [{ text: 'Dialog được mở tại runtime.' }],
|
|
216
|
+
},
|
|
217
|
+
zIndex: 1000 + this.openDialogIds().length * 10,
|
|
218
|
+
buttonsFooter: [
|
|
219
|
+
{
|
|
220
|
+
label: 'Đóng',
|
|
221
|
+
type: 'button-primary',
|
|
222
|
+
action: async () => {
|
|
223
|
+
this.dialogService.removeDialog(id);
|
|
224
|
+
await Promise.resolve();
|
|
225
|
+
},
|
|
226
|
+
},
|
|
227
|
+
],
|
|
228
|
+
});
|
|
229
|
+
this.openDialogIds.update((ids) => [...ids, id]);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
protected handlerClearAll(): void {
|
|
233
|
+
this.dialogService.clearDialogsRef();
|
|
234
|
+
this.openDialogIds.set([]);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### 5. Dialog dạng offset-right (panel bên phải)
|
|
240
|
+
|
|
241
|
+
```typescript
|
|
242
|
+
import { Component, inject } from '@angular/core';
|
|
243
|
+
import { LibsUiDialogService } from '@libs-ui/services-dialog';
|
|
244
|
+
|
|
245
|
+
@Component({
|
|
246
|
+
standalone: true,
|
|
247
|
+
selector: 'app-side-panel',
|
|
248
|
+
template: `<button (click)="handlerOpenPanel()">Mở panel</button>`,
|
|
249
|
+
})
|
|
250
|
+
export class SidePanelComponent {
|
|
251
|
+
private readonly dialogService = inject(LibsUiDialogService);
|
|
252
|
+
|
|
253
|
+
protected handlerOpenPanel(): void {
|
|
254
|
+
const dialogId = this.dialogService.addDialog({
|
|
255
|
+
title: 'Chi tiết',
|
|
256
|
+
mode: 'offset-right',
|
|
257
|
+
width: '480px',
|
|
258
|
+
height: '100%',
|
|
259
|
+
bodyConfig: {
|
|
260
|
+
lines: [{ text: 'Nội dung chi tiết hiển thị dạng panel bên phải.' }],
|
|
261
|
+
},
|
|
262
|
+
configCloseEvent: {
|
|
263
|
+
callback: async () => {
|
|
264
|
+
await Promise.resolve();
|
|
265
|
+
},
|
|
266
|
+
},
|
|
267
|
+
});
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
## Methods
|
|
273
|
+
|
|
274
|
+
| Method | Signature | Mô tả |
|
|
275
|
+
|---|---|---|
|
|
276
|
+
| `addDialog` | `(config: IDialog, isAddParentDocument?: boolean) => string` | Tạo và hiển thị một Dialog mới. Trả về `dialogId` (UUID) để tham chiếu sau này |
|
|
277
|
+
| `removeDialog` | `(id: string) => void` | Đóng và xóa Dialog theo ID. Bỏ qua nếu ID không tồn tại |
|
|
278
|
+
| `clearDialogsRef` | `() => void` | Đóng và xóa tất cả Dialog đang mở |
|
|
279
|
+
| `switchDisableActionsOnDialog` | `(id: string) => void` | Toggle trạng thái `disable` của Dialog theo ID (`false → true → false`) |
|
|
280
|
+
|
|
281
|
+
## Types & Interfaces
|
|
282
|
+
|
|
283
|
+
```typescript
|
|
284
|
+
import { IDialog, IDialogConfigEvent } from '@libs-ui/services-dialog';
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
### IDialog
|
|
288
|
+
|
|
289
|
+
Cấu hình truyền vào `addDialog()`:
|
|
290
|
+
|
|
291
|
+
| Property | Type | Default | Mô tả | Ví dụ |
|
|
292
|
+
|---|---|---|---|---|
|
|
293
|
+
| `title` | `string` | `-` | Tiêu đề của Dialog | `title: 'Xác nhận xóa'` |
|
|
294
|
+
| `bodyConfig` | `IModalBodyConfig` | `-` | Cấu hình nội dung Dialog (lines, icon, class) | `bodyConfig: { lines: [{ text: 'Nội dung' }] }` |
|
|
295
|
+
| `buttonsFooter` | `IButton[]` | `-` | Danh sách button tùy chỉnh ở footer. Khi có, footer mặc định bị thay thế hoàn toàn | `buttonsFooter: [{ label: 'OK', type: 'button-primary', action: async () => {} }]` |
|
|
296
|
+
| `width` | `string` | `'500px'` | Độ rộng của Dialog | `width: '400px'` |
|
|
297
|
+
| `height` | `string` | `'auto'` | Chiều cao của Dialog | `height: '600px'` |
|
|
298
|
+
| `maxWidth` | `string` | `-` | Chiều rộng tối đa | `maxWidth: '90vw'` |
|
|
299
|
+
| `maxHeight` | `string` | `-` | Chiều cao tối đa | `maxHeight: '80vh'` |
|
|
300
|
+
| `mode` | `'center' \| 'offset-right'` | `'center'` | Vị trí hiển thị Dialog | `mode: 'offset-right'` |
|
|
301
|
+
| `zIndex` | `number` | `-` | Thứ tự lớp hiển thị | `zIndex: 1050` |
|
|
302
|
+
| `disable` | `boolean` | `false` | Khóa toàn bộ tương tác trên Dialog | `disable: true` |
|
|
303
|
+
| `titleUseInnerText` | `boolean` | `false` | Dùng `innerText` cho title (bảo mật, ngăn HTML injection) | `titleUseInnerText: true` |
|
|
304
|
+
| `titleUseXssFilter` | `boolean` | `true` | Bật bộ lọc XSS cho title (mặc định bật) | `titleUseXssFilter: false` |
|
|
305
|
+
| `classIncludeModalWrapper` | `string` | `-` | Class CSS thêm vào wrapper ngoài cùng của Modal | `classIncludeModalWrapper: 'custom-dialog'` |
|
|
306
|
+
| `headerConfig` | `IModalHeaderConfig` | `{ hidden: !title }` | Cấu hình header (ẩn/hiện, style). Mặc định ẩn nếu không có `title` | `headerConfig: { hidden: false }` |
|
|
307
|
+
| `footerConfig` | `IModalFooterConfig` | `-` | Cấu hình footer container | `footerConfig: { classInclude: 'justify-start' }` |
|
|
308
|
+
| `configAgreeEvent` | `IDialogConfigEvent` | `-` | Callback khi nhấn nút Đồng ý (Agree). Không hoạt động khi có `buttonsFooter` | xem bên dưới |
|
|
309
|
+
| `configCancelEvent` | `IDialogConfigEvent` | `-` | Callback khi nhấn nút Hủy (Cancel). Không hoạt động khi có `buttonsFooter` | xem bên dưới |
|
|
310
|
+
| `configCloseEvent` | `IDialogConfigEvent` | `-` | Callback khi nhấn nút Close (X) ở header | xem bên dưới |
|
|
311
|
+
| `configBackEvent` | `IDialogConfigEvent` | `-` | Callback khi nhấn nút Back | xem bên dưới |
|
|
312
|
+
| `ignoreCommunicateMicroEvent` | `boolean` | `-` | Bỏ qua xử lý event giao tiếp Micro Frontend | `ignoreCommunicateMicroEvent: true` |
|
|
313
|
+
|
|
314
|
+
### IDialogConfigEvent
|
|
315
|
+
|
|
316
|
+
```typescript
|
|
317
|
+
import { IDialogConfigEvent } from '@libs-ui/services-dialog';
|
|
318
|
+
|
|
319
|
+
// Cấu trúc interface
|
|
320
|
+
interface IDialogConfigEvent {
|
|
321
|
+
callback: (functionsControl?: IModalFunctionsControl) => Promise<void>;
|
|
322
|
+
ignoreRemoveDialog?: boolean; // true = Dialog không tự đóng sau event
|
|
323
|
+
}
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
Ví dụ sử dụng:
|
|
327
|
+
|
|
328
|
+
```typescript
|
|
329
|
+
const config: IDialogConfigEvent = {
|
|
330
|
+
ignoreRemoveDialog: true,
|
|
331
|
+
callback: async (control) => {
|
|
332
|
+
control?.setStateDisable(true); // Disable nút trong khi xử lý
|
|
333
|
+
await someAsyncOperation();
|
|
334
|
+
control?.setStateDisable(false);
|
|
50
335
|
},
|
|
51
|
-
}
|
|
336
|
+
};
|
|
337
|
+
```
|
|
338
|
+
|
|
339
|
+
### IModalBodyConfig (từ @libs-ui/components-modal)
|
|
340
|
+
|
|
341
|
+
```typescript
|
|
342
|
+
import { IModalBodyConfig, IModalBodyLineConfig } from '@libs-ui/components-modal';
|
|
343
|
+
|
|
344
|
+
// Cấu trúc interface
|
|
345
|
+
interface IModalBodyConfig {
|
|
346
|
+
classInclude?: string; // Class CSS thêm vào body container
|
|
347
|
+
hidden?: boolean; // Ẩn/hiện body
|
|
348
|
+
lines?: IModalBodyLineConfig[]; // Danh sách dòng nội dung
|
|
349
|
+
iconType?: 'warning' | 'success' | 'fail' | 'information'; // Icon phía trên nội dung
|
|
350
|
+
classIcon?: string; // Class tùy chỉnh cho icon
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
interface IModalBodyLineConfig {
|
|
354
|
+
text: string; // Nội dung dòng text
|
|
355
|
+
class?: string; // Class CSS cho dòng này
|
|
356
|
+
useXssFilter?: boolean; // Bật lọc XSS cho text này
|
|
357
|
+
}
|
|
52
358
|
```
|
|
53
359
|
|
|
54
|
-
|
|
360
|
+
Ví dụ với icon và nhiều dòng:
|
|
55
361
|
|
|
56
362
|
```typescript
|
|
57
|
-
|
|
58
|
-
title: '
|
|
363
|
+
this.dialogService.addDialog({
|
|
364
|
+
title: 'Cảnh báo',
|
|
59
365
|
bodyConfig: {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
control?.setStateDisable(true); // Disable nút tránh click nhiều lần
|
|
66
|
-
await this.apiService.deleteItem();
|
|
67
|
-
this.dialogService.removeDialog(dialogId); // Đóng thủ công sau khi xong
|
|
68
|
-
},
|
|
366
|
+
iconType: 'warning',
|
|
367
|
+
lines: [
|
|
368
|
+
{ text: 'Thao tác này có thể ảnh hưởng đến dữ liệu hiện tại.' },
|
|
369
|
+
{ text: 'Vui lòng kiểm tra kỹ trước khi tiếp tục.', class: 'text-gray-500 text-sm' },
|
|
370
|
+
],
|
|
69
371
|
},
|
|
70
372
|
});
|
|
71
373
|
```
|
|
72
374
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
- **Production**: _Tạm thời không khả dụng_
|
|
375
|
+
### IModalFunctionsControl (từ @libs-ui/components-modal)
|
|
376
|
+
|
|
377
|
+
Nhận được qua tham số `control` trong `callback` của config event:
|
|
378
|
+
|
|
379
|
+
```typescript
|
|
380
|
+
interface IModalFunctionsControl {
|
|
381
|
+
show: () => Promise<void>; // Hiển thị Modal
|
|
382
|
+
hide: () => Promise<void>; // Ẩn Modal (không xóa)
|
|
383
|
+
setStateDisable: (stateDisable: boolean) => Promise<void>; // Bật/tắt disable state
|
|
384
|
+
}
|
|
385
|
+
```
|
|
386
|
+
|
|
387
|
+
## Lưu ý quan trọng
|
|
388
|
+
|
|
389
|
+
⚠️ **`buttonsFooter` Override — configEvent KHÔNG hoạt động**: Khi truyền `buttonsFooter`, footer mặc định bị thay thế hoàn toàn. Các button trong `buttonsFooter` chỉ gọi `button.action()`, **không** emit event `agree`/`cancel`. Do đó, `configAgreeEvent` và `configCancelEvent` sẽ **không bao giờ được gọi**. Chỉ `configCloseEvent` vẫn hoạt động vì được trigger bởi nút Close (X) ở header (không phải footer). Khuyến nghị: khi dùng `buttonsFooter`, xử lý toàn bộ logic trong `button.action()`.
|
|
390
|
+
|
|
391
|
+
⚠️ **Auto-close mặc định**: Dialog tự đóng ngay sau khi `callback` của config event chạy xong (trừ khi `ignoreRemoveDialog: true`). Nếu cần chờ async operation xong mới đóng, set `ignoreRemoveDialog: true` và gọi `removeDialog(id)` thủ công.
|
|
392
|
+
|
|
393
|
+
⚠️ **Singleton Service**: Service là `providedIn: 'root'`, tất cả component dùng chung một instance và cùng `dialogsRef` Map. `dialogId` trả về từ `addDialog()` có thể dùng để đóng Dialog từ bất kỳ component nào có biết ID đó.
|
|
394
|
+
|
|
395
|
+
⚠️ **`setStateDisable` trong callback**: Khi nhận event (agree/cancel/close/back), service tự động gọi `functionControl.setStateDisable(true)` trước khi gọi `callback`. Không cần gọi lại trong `callback` trừ khi muốn re-enable (`setStateDisable(false)`).
|
|
396
|
+
|
|
397
|
+
⚠️ **`isAddParentDocument` cho Micro Frontend**: Tham số thứ 2 của `addDialog()`. Khi `true`, Dialog sẽ được gắn vào `parentDocument` thay vì `document` hiện tại — dùng trong môi trường Micro Frontend để Dialog hiển thị đúng layer.
|
|
398
|
+
|
|
399
|
+
## Demo
|
|
400
|
+
|
|
401
|
+
```bash
|
|
402
|
+
npx nx serve core-ui
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
Truy cập: http://localhost:4500/services/dialog
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-services-dialog.mjs","sources":["../../../../../libs-ui/services/dialog/src/dialog.service.ts","../../../../../libs-ui/services/dialog/src/libs-ui-services-dialog.ts"],"sourcesContent":["import { ComponentRef, Injectable, inject } from '@angular/core';\nimport { IModalFunctionsControl, LibsUiComponentsModalComponent, TYPE_MODAL_EVENT } from '@libs-ui/components-modal';\nimport { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';\nimport { uuid } from '@libs-ui/utils';\nimport { IDialog } from './interfaces/dialog.interface';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class LibsUiDialogService {\n private readonly dialogsRef: Map<string, { component: ComponentRef<LibsUiComponentsModalComponent> }> = new Map();\n private readonly dynamicComponentService = inject(LibsUiDynamicComponentService);\n\n public addDialog(config: IDialog, isAddParentDocument?: boolean): string {\n const idDialog = uuid();\n const component = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsModalComponent);\n const instance = component.instance;\n let functionControl: IModalFunctionsControl;\n instance.outFunctionControl.subscribe((func: IModalFunctionsControl) => (functionControl = func));\n\n instance.outEvent.subscribe((eventName: TYPE_MODAL_EVENT) => {\n functionControl.setStateDisable(true);\n\n switch (eventName) {\n case 'agree':\n config.configAgreeEvent?.callback(functionControl);\n if (!config.configAgreeEvent?.ignoreRemoveDialog) {\n this.removeDialog(idDialog);\n }\n\n return;\n\n case 'close':\n config.configCloseEvent?.callback(functionControl);\n if (!config.configCloseEvent?.ignoreRemoveDialog) {\n this.removeDialog(idDialog);\n }\n\n return;\n\n case 'cancel':\n config.configCancelEvent?.callback(functionControl);\n if (!config.configCancelEvent?.ignoreRemoveDialog) {\n this.removeDialog(idDialog);\n }\n break;\n\n case 'back':\n config.configBackEvent?.callback(functionControl);\n if (!config.configBackEvent?.ignoreRemoveDialog) {\n this.removeDialog(idDialog);\n }\n break;\n }\n });\n\n component.setInput('zIndex', config.zIndex);\n component.setInput('title', config.title);\n component.setInput('titleUseInnerText', config.titleUseInnerText ?? false);\n component.setInput('titleUseXssFilter', config.titleUseXssFilter ?? true);\n component.setInput('width', config.width || '500px');\n component.setInput('height', config.height || 'auto');\n component.setInput('maxWidth', config.maxWidth);\n component.setInput('maxHeight', config.maxHeight);\n component.setInput('headerConfig', config.headerConfig || { hidden: !config.title });\n component.setInput('bodyConfig', config.bodyConfig);\n component.setInput('footerConfig', config.footerConfig);\n component.setInput('classIncludeModalWrapper', config.classIncludeModalWrapper);\n component.setInput('disable', config.disable || false);\n component.setInput('mode', config.mode || 'center');\n component.setInput('ignoreCommunicateMicroEvent', config.ignoreCommunicateMicroEvent);\n if (config.buttonsFooter) {\n component.setInput('buttonsFooter', config.buttonsFooter);\n }\n this.dialogsRef.set(idDialog, { component });\n this.dynamicComponentService.addToBody(component, isAddParentDocument);\n\n return idDialog;\n }\n\n public switchDisableActionsOnDialog(id: string) {\n const data = this.dialogsRef.get(id);\n\n if (!data) {\n return;\n }\n data.component.setInput('disable', !data.component.instance.disable);\n }\n\n public removeDialog(id: string) {\n const data = this.dialogsRef.get(id);\n\n if (!data) {\n return;\n }\n this.dynamicComponentService.remove(data.component);\n this.dialogsRef.delete(id);\n }\n\n public clearDialogsRef() {\n const keys = this.dialogsRef.keys();\n\n for (const key of keys) {\n this.removeDialog(key);\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MASa,mBAAmB,CAAA;AACb,IAAA,UAAU,GAA6E,IAAI,GAAG,EAAE;
|
|
1
|
+
{"version":3,"file":"libs-ui-services-dialog.mjs","sources":["../../../../../libs-ui/services/dialog/src/dialog.service.ts","../../../../../libs-ui/services/dialog/src/libs-ui-services-dialog.ts"],"sourcesContent":["import { ComponentRef, Injectable, inject } from '@angular/core';\nimport { IModalFunctionsControl, LibsUiComponentsModalComponent, TYPE_MODAL_EVENT } from '@libs-ui/components-modal';\nimport { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';\nimport { uuid } from '@libs-ui/utils';\nimport { IDialog } from './interfaces/dialog.interface';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class LibsUiDialogService {\n private readonly dialogsRef: Map<string, { component: ComponentRef<LibsUiComponentsModalComponent> }> = new Map();\n private readonly dynamicComponentService = inject(LibsUiDynamicComponentService);\n\n public addDialog(config: IDialog, isAddParentDocument?: boolean): string {\n const idDialog = uuid();\n const component = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsModalComponent);\n const instance = component.instance;\n let functionControl: IModalFunctionsControl;\n instance.outFunctionControl.subscribe((func: IModalFunctionsControl) => (functionControl = func));\n\n instance.outEvent.subscribe((eventName: TYPE_MODAL_EVENT) => {\n functionControl.setStateDisable(true);\n\n switch (eventName) {\n case 'agree':\n config.configAgreeEvent?.callback(functionControl);\n if (!config.configAgreeEvent?.ignoreRemoveDialog) {\n this.removeDialog(idDialog);\n }\n\n return;\n\n case 'close':\n config.configCloseEvent?.callback(functionControl);\n if (!config.configCloseEvent?.ignoreRemoveDialog) {\n this.removeDialog(idDialog);\n }\n\n return;\n\n case 'cancel':\n config.configCancelEvent?.callback(functionControl);\n if (!config.configCancelEvent?.ignoreRemoveDialog) {\n this.removeDialog(idDialog);\n }\n break;\n\n case 'back':\n config.configBackEvent?.callback(functionControl);\n if (!config.configBackEvent?.ignoreRemoveDialog) {\n this.removeDialog(idDialog);\n }\n break;\n }\n });\n\n component.setInput('zIndex', config.zIndex);\n component.setInput('title', config.title);\n component.setInput('titleUseInnerText', config.titleUseInnerText ?? false);\n component.setInput('titleUseXssFilter', config.titleUseXssFilter ?? true);\n component.setInput('width', config.width || '500px');\n component.setInput('height', config.height || 'auto');\n component.setInput('maxWidth', config.maxWidth);\n component.setInput('maxHeight', config.maxHeight);\n component.setInput('headerConfig', config.headerConfig || { hidden: !config.title });\n component.setInput('bodyConfig', config.bodyConfig);\n component.setInput('footerConfig', config.footerConfig);\n component.setInput('classIncludeModalWrapper', config.classIncludeModalWrapper);\n component.setInput('disable', config.disable || false);\n component.setInput('mode', config.mode || 'center');\n component.setInput('ignoreCommunicateMicroEvent', config.ignoreCommunicateMicroEvent);\n if (config.buttonsFooter) {\n component.setInput('buttonsFooter', config.buttonsFooter);\n }\n this.dialogsRef.set(idDialog, { component });\n this.dynamicComponentService.addToBody(component, isAddParentDocument);\n\n return idDialog;\n }\n\n public switchDisableActionsOnDialog(id: string) {\n const data = this.dialogsRef.get(id);\n\n if (!data) {\n return;\n }\n data.component.setInput('disable', !data.component.instance.disable);\n }\n\n public removeDialog(id: string) {\n const data = this.dialogsRef.get(id);\n\n if (!data) {\n return;\n }\n this.dynamicComponentService.remove(data.component);\n this.dialogsRef.delete(id);\n }\n\n public clearDialogsRef() {\n const keys = this.dialogsRef.keys();\n\n for (const key of keys) {\n this.removeDialog(key);\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/services-dialog",
|
|
3
|
-
"version": "0.2.356-
|
|
3
|
+
"version": "0.2.356-43",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-modal": "0.2.356-
|
|
7
|
-
"@libs-ui/services-dynamic-component": "0.2.356-
|
|
8
|
-
"@libs-ui/utils": "0.2.356-
|
|
9
|
-
"@libs-ui/components-buttons-button": "0.2.356-
|
|
6
|
+
"@libs-ui/components-modal": "0.2.356-43",
|
|
7
|
+
"@libs-ui/services-dynamic-component": "0.2.356-43",
|
|
8
|
+
"@libs-ui/utils": "0.2.356-43",
|
|
9
|
+
"@libs-ui/components-buttons-button": "0.2.356-43"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|
|
12
12
|
"module": "fesm2022/libs-ui-services-dialog.mjs",
|