@rolatech/angular-notification 17.2.1 → 17.2.3
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/esm2022/index.mjs +1 -2
- package/esm2022/lib/components/notification-detail/notification-detail.component.mjs +3 -3
- package/esm2022/lib/components/notification-icon/notification-icon.component.mjs +3 -3
- package/esm2022/lib/components/notification-index/notification-index.component.mjs +54 -15
- package/esm2022/lib/components/notification-item/notification-item.component.mjs +3 -3
- package/esm2022/lib/notification.routes.mjs +2 -4
- package/esm2022/lib/services/notification-template.service.mjs +16 -41
- package/esm2022/lib/services/notification.service.mjs +17 -47
- package/esm2022/lib/state/store.mjs +4 -4
- package/fesm2022/rolatech-angular-notification.mjs +97 -140
- package/fesm2022/rolatech-angular-notification.mjs.map +1 -1
- package/index.d.ts +0 -1
- package/lib/components/notification-index/notification-index.component.d.ts +14 -2
- package/package.json +3 -3
- package/themes/_default.scss +1 -1
- package/esm2022/lib/components/notification-layout/notification-layout.component.mjs +0 -29
- package/lib/components/notification-layout/notification-layout.component.d.ts +0 -10
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injectable, input, Component, output,
|
|
2
|
+
import { inject, Injectable, input, Component, output, viewChild, ViewEncapsulation, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import { HttpClient } from '@angular/common/http';
|
|
4
4
|
import { APP_CONFIG, AngularCommonModule } from '@rolatech/angular-common';
|
|
5
|
-
import {
|
|
6
|
-
import { AngularComponentsModule, BaseComponent } from '@rolatech/angular-components';
|
|
5
|
+
import { BehaviorSubject, map } from 'rxjs';
|
|
6
|
+
import { AngularComponentsModule, BaseComponent, AppContainerComponent, ToolbarComponent, TabsComponent, TabComponent, ListComponent, EmptyComponent } from '@rolatech/angular-components';
|
|
7
7
|
import * as i1 from '@angular/router';
|
|
8
|
-
import {
|
|
8
|
+
import { ActivatedRoute, RouterModule } from '@angular/router';
|
|
9
9
|
import * as i2 from '@angular/material/badge';
|
|
10
10
|
import * as i3 from '@angular/material/button';
|
|
11
11
|
import * as i4 from '@angular/material/icon';
|
|
12
12
|
import { MatIconModule } from '@angular/material/icon';
|
|
13
13
|
import * as i5 from '@angular/material/menu';
|
|
14
14
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i2$1 from '@angular/material/paginator';
|
|
16
|
+
import { MatPaginator } from '@angular/material/paginator';
|
|
16
17
|
import { MatTableDataSource } from '@angular/material/table';
|
|
17
18
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
18
19
|
import { NgClass, DatePipe, CommonModule } from '@angular/common';
|
|
@@ -22,65 +23,41 @@ class NotificationTemplateService {
|
|
|
22
23
|
environment = inject(APP_CONFIG);
|
|
23
24
|
http = inject(HttpClient);
|
|
24
25
|
find(options) {
|
|
25
|
-
return this.http
|
|
26
|
-
.get(`${this.environment.baseUrl}/notifications`, {
|
|
26
|
+
return this.http.get(`${this.environment.baseUrl}/notifications`, {
|
|
27
27
|
params: options,
|
|
28
28
|
withCredentials: true,
|
|
29
|
-
})
|
|
30
|
-
.pipe(catchError((error) => {
|
|
31
|
-
throw error;
|
|
32
|
-
}));
|
|
29
|
+
});
|
|
33
30
|
}
|
|
34
31
|
me(options) {
|
|
35
|
-
return this.http
|
|
36
|
-
.get(`${this.environment.baseUrl}/notifications/me`, {
|
|
32
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/me`, {
|
|
37
33
|
params: options,
|
|
38
34
|
withCredentials: true,
|
|
39
|
-
})
|
|
40
|
-
.pipe(catchError((error) => {
|
|
41
|
-
throw error;
|
|
42
|
-
}));
|
|
35
|
+
});
|
|
43
36
|
}
|
|
44
37
|
get(id) {
|
|
45
|
-
return this.http
|
|
46
|
-
.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
38
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
47
39
|
withCredentials: true,
|
|
48
|
-
})
|
|
49
|
-
.pipe(catchError((error) => {
|
|
50
|
-
throw error;
|
|
51
|
-
}));
|
|
40
|
+
});
|
|
52
41
|
}
|
|
53
42
|
read(ids) {
|
|
54
|
-
return this.http
|
|
55
|
-
.get(`${this.environment.baseUrl}/notifications/${ids}`, {
|
|
43
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${ids}`, {
|
|
56
44
|
withCredentials: true,
|
|
57
|
-
})
|
|
58
|
-
.pipe(catchError((error) => {
|
|
59
|
-
throw error;
|
|
60
|
-
}));
|
|
45
|
+
});
|
|
61
46
|
}
|
|
62
47
|
delete(id) {
|
|
63
|
-
return this.http
|
|
64
|
-
.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
48
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
65
49
|
withCredentials: true,
|
|
66
|
-
})
|
|
67
|
-
.pipe(catchError((error) => {
|
|
68
|
-
throw error;
|
|
69
|
-
}));
|
|
50
|
+
});
|
|
70
51
|
}
|
|
71
52
|
findByUserId(userId) {
|
|
72
|
-
return this.http
|
|
73
|
-
.get(`${this.environment.baseUrl}/notifications/by?userId=${userId}`, {
|
|
53
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/by?userId=${userId}`, {
|
|
74
54
|
withCredentials: true,
|
|
75
|
-
})
|
|
76
|
-
.pipe(catchError((error) => {
|
|
77
|
-
throw error;
|
|
78
|
-
}));
|
|
55
|
+
});
|
|
79
56
|
}
|
|
80
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
81
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
57
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
58
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationTemplateService, providedIn: 'root' });
|
|
82
59
|
}
|
|
83
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationTemplateService, decorators: [{
|
|
84
61
|
type: Injectable,
|
|
85
62
|
args: [{
|
|
86
63
|
providedIn: 'root',
|
|
@@ -92,10 +69,10 @@ class StoreService {
|
|
|
92
69
|
getCount() {
|
|
93
70
|
return this.$count.asObservable();
|
|
94
71
|
}
|
|
95
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
96
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
72
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: StoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
73
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: StoreService, providedIn: 'root' });
|
|
97
74
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: StoreService, decorators: [{
|
|
99
76
|
type: Injectable,
|
|
100
77
|
args: [{
|
|
101
78
|
providedIn: 'root',
|
|
@@ -107,42 +84,26 @@ class NotificationService {
|
|
|
107
84
|
http = inject(HttpClient);
|
|
108
85
|
storeService = inject(StoreService);
|
|
109
86
|
find(options) {
|
|
110
|
-
return this.http
|
|
111
|
-
.get(`${this.environment.baseUrl}/notifications`, {
|
|
87
|
+
return this.http.get(`${this.environment.baseUrl}/notifications`, {
|
|
112
88
|
params: options,
|
|
113
89
|
withCredentials: true,
|
|
114
|
-
})
|
|
115
|
-
.pipe(catchError((error) => {
|
|
116
|
-
throw error;
|
|
117
|
-
}));
|
|
90
|
+
});
|
|
118
91
|
}
|
|
119
92
|
me(options) {
|
|
120
|
-
return this.http
|
|
121
|
-
.get(`${this.environment.baseUrl}/notifications/me`, {
|
|
93
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/me`, {
|
|
122
94
|
params: options,
|
|
123
95
|
withCredentials: true,
|
|
124
|
-
})
|
|
125
|
-
.pipe(catchError((error) => {
|
|
126
|
-
throw error;
|
|
127
|
-
}));
|
|
96
|
+
});
|
|
128
97
|
}
|
|
129
98
|
get(id) {
|
|
130
|
-
return this.http
|
|
131
|
-
.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
99
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
132
100
|
withCredentials: true,
|
|
133
|
-
})
|
|
134
|
-
.pipe(catchError((error) => {
|
|
135
|
-
throw error;
|
|
136
|
-
}));
|
|
101
|
+
});
|
|
137
102
|
}
|
|
138
103
|
read(ids) {
|
|
139
|
-
return this.http
|
|
140
|
-
.get(`${this.environment.baseUrl}/notifications/${ids}`, {
|
|
104
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${ids}`, {
|
|
141
105
|
withCredentials: true,
|
|
142
|
-
})
|
|
143
|
-
.pipe(catchError((error) => {
|
|
144
|
-
throw error;
|
|
145
|
-
}));
|
|
106
|
+
});
|
|
146
107
|
}
|
|
147
108
|
update(id) {
|
|
148
109
|
return this.http
|
|
@@ -152,8 +113,6 @@ class NotificationService {
|
|
|
152
113
|
.pipe(map((res) => {
|
|
153
114
|
const value = this.storeService.$count.value - 1;
|
|
154
115
|
this.storeService.$count.next(value);
|
|
155
|
-
}), catchError((error) => {
|
|
156
|
-
throw error;
|
|
157
116
|
}));
|
|
158
117
|
}
|
|
159
118
|
readAll() {
|
|
@@ -163,27 +122,17 @@ class NotificationService {
|
|
|
163
122
|
})
|
|
164
123
|
.pipe(map((res) => {
|
|
165
124
|
this.storeService.$count.next(0);
|
|
166
|
-
}), catchError((error) => {
|
|
167
|
-
throw error;
|
|
168
125
|
}));
|
|
169
126
|
}
|
|
170
127
|
delete(id) {
|
|
171
|
-
return this.http
|
|
172
|
-
.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
128
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
173
129
|
withCredentials: true,
|
|
174
|
-
})
|
|
175
|
-
.pipe(catchError((error) => {
|
|
176
|
-
throw error;
|
|
177
|
-
}));
|
|
130
|
+
});
|
|
178
131
|
}
|
|
179
132
|
findByUserId(userId) {
|
|
180
|
-
return this.http
|
|
181
|
-
.get(`${this.environment.baseUrl}/notifications/by?userId=${userId}`, {
|
|
133
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/by?userId=${userId}`, {
|
|
182
134
|
withCredentials: true,
|
|
183
|
-
})
|
|
184
|
-
.pipe(catchError((error) => {
|
|
185
|
-
throw error;
|
|
186
|
-
}));
|
|
135
|
+
});
|
|
187
136
|
}
|
|
188
137
|
countByStatus(status) {
|
|
189
138
|
return this.http
|
|
@@ -193,14 +142,12 @@ class NotificationService {
|
|
|
193
142
|
.pipe(map(({ data }) => {
|
|
194
143
|
this.storeService.$count.next(data);
|
|
195
144
|
return data;
|
|
196
|
-
}), catchError((error) => {
|
|
197
|
-
throw error;
|
|
198
145
|
}));
|
|
199
146
|
}
|
|
200
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
201
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
147
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
148
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationService, providedIn: 'root' });
|
|
202
149
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationService, decorators: [{
|
|
204
151
|
type: Injectable,
|
|
205
152
|
args: [{
|
|
206
153
|
providedIn: 'root',
|
|
@@ -251,10 +198,10 @@ class NotificationIconComponent {
|
|
|
251
198
|
},
|
|
252
199
|
});
|
|
253
200
|
}
|
|
254
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
255
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: NotificationIconComponent, isStandalone: true, selector: "rolatech-notification-icon", inputs: { router: { classPropertyName: "router", publicName: "router", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-2\">\n <button mat-icon-button class=\"flex\" onclick=\"this.blur()\" [matMenuTriggerFor]=\"notificationsMenu\">\n <mat-icon aria-hidden=\"false\" [matBadge]=\"count\" [matBadgeHidden]=\"count === 0\">notifications</mat-icon>\n </button>\n</div>\n<mat-menu #notificationsMenu=\"matMenu\" class=\"custom-menu\">\n <div class=\"flex flex-col divide-y min-w-[256px]\">\n <div class=\"h-11 px-3 flex justify-between items-center\">\n <span class=\"font-medium\">\u901A\u77E5\u6D88\u606F</span>\n @if (count) {\n <span class=\"text-sm font-medium cursor-pointer hover:underline\" (click)=\"readAll()\">\u5168\u90E8\u5DF2\u8BFB</span>\n }\n </div>\n <div>\n @if (notifications && notifications.length > 0) {\n <div class=\"divide-y\">\n @for (item of notifications; track item) {\n <div class=\"p-2 cursor-pointer hover:bg-gray-100\" [routerLink]=\"[router(), item.id]\">\n <div>\n {{ item.title }}\n </div>\n <div class=\"text-sm\">\n {{ item.content }}\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"h-32 flex justify-center items-center\">\u6682\u65E0\u901A\u77E5</div>\n }\n </div>\n <div class=\"h-11 flex justify-center items-center cursor-pointer hover:bg-gray-100\" [routerLink]=\"router()\">\n <a class=\"flex justify-center items-center\">\n <span class=\"text-sm text-orange-600\"> \u901A\u77E5\u4E2D\u5FC3 </span>\n </a>\n </div>\n </div>\n</mat-menu>\n", styles: [":host .custom-menu>.mat-mdc-menu-content{padding:0!important}:host .mat-mdc-menu-content{padding:0!important}.mat-mdc-menu-content{padding:0!important}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "directive", type: i2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
256
203
|
}
|
|
257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationIconComponent, decorators: [{
|
|
258
205
|
type: Component,
|
|
259
206
|
args: [{ standalone: true, imports: [AngularCommonModule, AngularComponentsModule], selector: 'rolatech-notification-icon', template: "<div class=\"px-2\">\n <button mat-icon-button class=\"flex\" onclick=\"this.blur()\" [matMenuTriggerFor]=\"notificationsMenu\">\n <mat-icon aria-hidden=\"false\" [matBadge]=\"count\" [matBadgeHidden]=\"count === 0\">notifications</mat-icon>\n </button>\n</div>\n<mat-menu #notificationsMenu=\"matMenu\" class=\"custom-menu\">\n <div class=\"flex flex-col divide-y min-w-[256px]\">\n <div class=\"h-11 px-3 flex justify-between items-center\">\n <span class=\"font-medium\">\u901A\u77E5\u6D88\u606F</span>\n @if (count) {\n <span class=\"text-sm font-medium cursor-pointer hover:underline\" (click)=\"readAll()\">\u5168\u90E8\u5DF2\u8BFB</span>\n }\n </div>\n <div>\n @if (notifications && notifications.length > 0) {\n <div class=\"divide-y\">\n @for (item of notifications; track item) {\n <div class=\"p-2 cursor-pointer hover:bg-gray-100\" [routerLink]=\"[router(), item.id]\">\n <div>\n {{ item.title }}\n </div>\n <div class=\"text-sm\">\n {{ item.content }}\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"h-32 flex justify-center items-center\">\u6682\u65E0\u901A\u77E5</div>\n }\n </div>\n <div class=\"h-11 flex justify-center items-center cursor-pointer hover:bg-gray-100\" [routerLink]=\"router()\">\n <a class=\"flex justify-center items-center\">\n <span class=\"text-sm text-orange-600\"> \u901A\u77E5\u4E2D\u5FC3 </span>\n </a>\n </div>\n </div>\n</mat-menu>\n", styles: [":host .custom-menu>.mat-mdc-menu-content{padding:0!important}:host .mat-mdc-menu-content{padding:0!important}.mat-mdc-menu-content{padding:0!important}\n"] }]
|
|
260
207
|
}] });
|
|
@@ -274,10 +221,10 @@ class NotificationDetailComponent extends BaseComponent {
|
|
|
274
221
|
},
|
|
275
222
|
});
|
|
276
223
|
}
|
|
277
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: NotificationDetailComponent, isStandalone: true, selector: "rolatech-notification-detail", usesInheritance: true, ngImport: i0, template: "@if (notification) {\n <div class=\"p-3\">\n <div class=\"text-xl\">{{ notification.title }}</div>\n <div class=\"text-md\">\n {{ notification.content }}\n </div>\n </div>\n}\n", styles: [""] });
|
|
279
226
|
}
|
|
280
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationDetailComponent, decorators: [{
|
|
281
228
|
type: Component,
|
|
282
229
|
args: [{ selector: 'rolatech-notification-detail', standalone: true, imports: [], template: "@if (notification) {\n <div class=\"p-3\">\n <div class=\"text-xl\">{{ notification.title }}</div>\n <div class=\"text-md\">\n {{ notification.content }}\n </div>\n </div>\n}\n" }]
|
|
283
230
|
}] });
|
|
@@ -299,8 +246,8 @@ class NotificationItemComponent {
|
|
|
299
246
|
onToggle(item) {
|
|
300
247
|
this.toggle.emit(item);
|
|
301
248
|
}
|
|
302
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: NotificationItemComponent, isStandalone: true, selector: "rolatech-notification-item", inputs: { notification: { classPropertyName: "notification", publicName: "notification", isSignal: true, isRequired: true, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<div class=\"border-b\" [ngClass]=\"expand() ? 'shadow shadow-light-400' : ''\">\n <div\n class=\"flex justify-between items-center h-16 cursor-pointer px-3\"\n [ngClass]=\"notification().status === 'READ' ? 'text-gray-400' : ''\"\n (click)=\"onToggle(notification())\"\n >\n <div>{{ notification().title }}</div>\n <div class=\"flex items-center opacity-60\">\n <div class=\"text-sm mr-3\">{{ notification().createdAt | date }}</div>\n <mat-icon>{{ expand() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </div>\n <div\n [class.hidden]=\"!expand()\"\n [@contentAnimation]=\"expand()\"\n class=\"p-3\"\n [ngClass]=\"notification().status === 'READ' ? 'text-gray-400' : ''\"\n >\n {{ notification().content }}\n </div>\n <div class=\"divide\"></div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DatePipe, name: "date" }], animations: [
|
|
304
251
|
trigger('contentAnimation', [
|
|
305
252
|
state('hidden', style({
|
|
306
253
|
height: '0',
|
|
@@ -314,7 +261,7 @@ class NotificationItemComponent {
|
|
|
314
261
|
]),
|
|
315
262
|
] });
|
|
316
263
|
}
|
|
317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationItemComponent, decorators: [{
|
|
318
265
|
type: Component,
|
|
319
266
|
args: [{ selector: 'rolatech-notification-item', animations: [
|
|
320
267
|
trigger('contentAnimation', [
|
|
@@ -332,10 +279,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
332
279
|
}] });
|
|
333
280
|
|
|
334
281
|
class NotificationIndexComponent {
|
|
282
|
+
route = inject(ActivatedRoute);
|
|
335
283
|
notificationService = inject(NotificationService);
|
|
336
284
|
snackBar = inject(MatSnackBar);
|
|
337
285
|
notifications = [];
|
|
338
|
-
filter =
|
|
286
|
+
filter = false;
|
|
339
287
|
pageEvent;
|
|
340
288
|
length = 100;
|
|
341
289
|
pageSize = 15;
|
|
@@ -343,9 +291,10 @@ class NotificationIndexComponent {
|
|
|
343
291
|
isLoading = false;
|
|
344
292
|
isSearch = false;
|
|
345
293
|
selectedId = '';
|
|
294
|
+
select = 0;
|
|
346
295
|
notificationIconComponent = NotificationIconComponent;
|
|
347
296
|
displayedColumns = ['title', 'status', 'createdAt', 'actions'];
|
|
348
|
-
paginator;
|
|
297
|
+
paginator = viewChild(MatPaginator);
|
|
349
298
|
orderOptions = [
|
|
350
299
|
{
|
|
351
300
|
key: 'createdAt',
|
|
@@ -375,7 +324,33 @@ class NotificationIndexComponent {
|
|
|
375
324
|
status = NotificationStatus;
|
|
376
325
|
orderString = 'createdAt desc';
|
|
377
326
|
dataSource = new MatTableDataSource();
|
|
327
|
+
links = [
|
|
328
|
+
{
|
|
329
|
+
name: '全部',
|
|
330
|
+
icon: 'dashboard',
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
name: '课程',
|
|
334
|
+
icon: 'category',
|
|
335
|
+
type: 'course',
|
|
336
|
+
},
|
|
337
|
+
{
|
|
338
|
+
name: '订单',
|
|
339
|
+
icon: 'category',
|
|
340
|
+
type: 'order',
|
|
341
|
+
},
|
|
342
|
+
];
|
|
378
343
|
ngOnInit() {
|
|
344
|
+
this.route.queryParams.subscribe(({ type }) => {
|
|
345
|
+
this.select = this.links.findIndex((item) => item.type === type);
|
|
346
|
+
if (type) {
|
|
347
|
+
this.filter = `type:${type}`;
|
|
348
|
+
}
|
|
349
|
+
else {
|
|
350
|
+
this.filter = false;
|
|
351
|
+
}
|
|
352
|
+
this.find(null);
|
|
353
|
+
});
|
|
379
354
|
this.find(null);
|
|
380
355
|
}
|
|
381
356
|
find(event) {
|
|
@@ -387,8 +362,10 @@ class NotificationIndexComponent {
|
|
|
387
362
|
page,
|
|
388
363
|
limit,
|
|
389
364
|
sort,
|
|
390
|
-
filter: this.filter,
|
|
391
365
|
};
|
|
366
|
+
if (this.filter) {
|
|
367
|
+
options['filter'] = this.filter;
|
|
368
|
+
}
|
|
392
369
|
this.notificationService.me(options).subscribe({
|
|
393
370
|
next: (res) => {
|
|
394
371
|
this.notifications = res.data;
|
|
@@ -413,41 +390,22 @@ class NotificationIndexComponent {
|
|
|
413
390
|
},
|
|
414
391
|
});
|
|
415
392
|
}
|
|
416
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
417
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
418
|
-
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NotificationIndexComponent, decorators: [{
|
|
420
|
-
type: Component,
|
|
421
|
-
args: [{ selector: 'rolatech-notification-index', standalone: true, imports: [NotificationItemComponent, AngularCommonModule, AngularComponentsModule], template: "@if (isLoading) {\n <div style=\"height: 80%\">\n <!-- <app-loading-spinner></app-loading-spinner> -->\n </div>\n} @else {\n @for (item of notifications; track $index) {\n <div class=\"divide-y\">\n <rolatech-notification-item\n [notification]=\"item\"\n (toggle)=\"read(item)\"\n [expand]=\"item.id === selectedId\"\n ></rolatech-notification-item>\n </div>\n }\n}\n<mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"pageEvent = find($event)\"\n hidePageSize\n showFirstLastButtons\n>\n</mat-paginator>\n" }]
|
|
422
|
-
}], propDecorators: { paginator: [{
|
|
423
|
-
type: ViewChild,
|
|
424
|
-
args: ['paginator']
|
|
425
|
-
}] } });
|
|
426
|
-
|
|
427
|
-
class NotificationLayoutComponent {
|
|
428
|
-
links = [
|
|
429
|
-
{
|
|
430
|
-
name: '全部',
|
|
431
|
-
icon: 'dashboard',
|
|
432
|
-
link: '.',
|
|
433
|
-
},
|
|
434
|
-
{
|
|
435
|
-
name: '课程',
|
|
436
|
-
icon: 'category',
|
|
437
|
-
link: 'course',
|
|
438
|
-
},
|
|
439
|
-
{
|
|
440
|
-
name: '订单',
|
|
441
|
-
icon: 'category',
|
|
442
|
-
link: 'order',
|
|
443
|
-
},
|
|
444
|
-
];
|
|
445
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: NotificationLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
446
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: NotificationLayoutComponent, isStandalone: true, selector: "rolatech-notification-layout", ngImport: i0, template: "<div class=\"p-3 max-w-[1120px] m-auto\">\n <div class=\"text-3xl font-medium p-2\">\u901A\u77E5\u4E2D\u5FC3</div>\n <div class=\"flex gap-3 items-center mb-2 p-2\">\n @for (item of links; track $index) {\n <div class=\"font-medium\">\n <a\n class=\"text-gray-600 py-2\"\n [routerLink]=\"item.link\"\n routerLinkActive=\"notification-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >{{ item.name }}</a\n >\n </div>\n }\n </div>\n <div>\n <router-outlet></router-outlet>\n </div>\n</div>\n", styles: [".notification-active{color:#000;border-bottom:4px solid #ff6600}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
|
|
393
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationIndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
394
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: NotificationIndexComponent, isStandalone: true, selector: "rolatech-notification-index", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-app-container>\n <rolatech-toolbar title=\"\u901A\u77E5\u4E2D\u5FC3\" large></rolatech-toolbar>\n <rolatech-tabs [select]=\"select\">\n @for (item of links; track item) {\n @if (item.type) {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ type: item.type }\"></rolatech-tab>\n } @else {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n }\n }\n </rolatech-tabs>\n <rolatech-list>\n @if (notifications) {\n @for (item of notifications; track $index) {\n <div class=\"divide-y px-3\">\n <rolatech-notification-item\n [notification]=\"item\"\n (toggle)=\"read(item)\"\n [expand]=\"item.id === selectedId\"\n ></rolatech-notification-item>\n </div>\n }\n <mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"pageEvent = find($event)\"\n hidePageSize\n showFirstLastButtons\n >\n </mat-paginator>\n } @else {\n <rolatech-empty></rolatech-empty>\n }\n </rolatech-list>\n</rolatech-app-container>\n", styles: [".notification-active{color:#000;border-bottom:4px solid #ff6600}\n"], dependencies: [{ kind: "component", type: NotificationItemComponent, selector: "rolatech-notification-item", inputs: ["notification", "expand"], outputs: ["toggle"] }, { kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: AppContainerComponent, selector: "rolatech-app-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ListComponent, selector: "rolatech-list" }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }], encapsulation: i0.ViewEncapsulation.None });
|
|
447
395
|
}
|
|
448
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationIndexComponent, decorators: [{
|
|
449
397
|
type: Component,
|
|
450
|
-
args: [{ selector: 'rolatech-notification-
|
|
398
|
+
args: [{ selector: 'rolatech-notification-index', standalone: true, imports: [
|
|
399
|
+
NotificationItemComponent,
|
|
400
|
+
AngularCommonModule,
|
|
401
|
+
AngularComponentsModule,
|
|
402
|
+
AppContainerComponent,
|
|
403
|
+
ToolbarComponent,
|
|
404
|
+
TabsComponent,
|
|
405
|
+
TabComponent,
|
|
406
|
+
ListComponent,
|
|
407
|
+
EmptyComponent,
|
|
408
|
+
], encapsulation: ViewEncapsulation.None, template: "<rolatech-app-container>\n <rolatech-toolbar title=\"\u901A\u77E5\u4E2D\u5FC3\" large></rolatech-toolbar>\n <rolatech-tabs [select]=\"select\">\n @for (item of links; track item) {\n @if (item.type) {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ type: item.type }\"></rolatech-tab>\n } @else {\n <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n }\n }\n </rolatech-tabs>\n <rolatech-list>\n @if (notifications) {\n @for (item of notifications; track $index) {\n <div class=\"divide-y px-3\">\n <rolatech-notification-item\n [notification]=\"item\"\n (toggle)=\"read(item)\"\n [expand]=\"item.id === selectedId\"\n ></rolatech-notification-item>\n </div>\n }\n <mat-paginator\n #paginator\n [length]=\"length\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"pageEvent = find($event)\"\n hidePageSize\n showFirstLastButtons\n >\n </mat-paginator>\n } @else {\n <rolatech-empty></rolatech-empty>\n }\n </rolatech-list>\n</rolatech-app-container>\n", styles: [".notification-active{color:#000;border-bottom:4px solid #ff6600}\n"] }]
|
|
451
409
|
}] });
|
|
452
410
|
|
|
453
411
|
function provideAngularNotification() {
|
|
@@ -461,8 +419,7 @@ function provideAngularNotification() {
|
|
|
461
419
|
const notificationRoutes = [
|
|
462
420
|
{
|
|
463
421
|
path: '',
|
|
464
|
-
component:
|
|
465
|
-
children: [{ path: '', component: NotificationIndexComponent }],
|
|
422
|
+
component: NotificationIndexComponent,
|
|
466
423
|
},
|
|
467
424
|
{ path: ':id', component: NotificationDetailComponent },
|
|
468
425
|
];
|
|
@@ -471,5 +428,5 @@ const notificationRoutes = [
|
|
|
471
428
|
* Generated bundle index. Do not edit.
|
|
472
429
|
*/
|
|
473
430
|
|
|
474
|
-
export { NotificationDetailComponent, NotificationIconComponent, NotificationIndexComponent, NotificationItemComponent,
|
|
431
|
+
export { NotificationDetailComponent, NotificationIconComponent, NotificationIndexComponent, NotificationItemComponent, NotificationService, NotificationTemplateService, notificationRoutes, provideAngularNotification };
|
|
475
432
|
//# sourceMappingURL=rolatech-angular-notification.mjs.map
|