@rolatech/angular-notification 17.2.2 → 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 +52 -10
- 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 +95 -136
- 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 +13 -1
- package/package.json +2 -2
- 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,18 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injectable, input, Component, output, viewChild, importProvidersFrom, makeEnvironmentProviders } from '@angular/core';
|
|
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
16
|
import { MatPaginator } from '@angular/material/paginator';
|
|
17
17
|
import { MatTableDataSource } from '@angular/material/table';
|
|
18
18
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
@@ -23,65 +23,41 @@ class NotificationTemplateService {
|
|
|
23
23
|
environment = inject(APP_CONFIG);
|
|
24
24
|
http = inject(HttpClient);
|
|
25
25
|
find(options) {
|
|
26
|
-
return this.http
|
|
27
|
-
.get(`${this.environment.baseUrl}/notifications`, {
|
|
26
|
+
return this.http.get(`${this.environment.baseUrl}/notifications`, {
|
|
28
27
|
params: options,
|
|
29
28
|
withCredentials: true,
|
|
30
|
-
})
|
|
31
|
-
.pipe(catchError((error) => {
|
|
32
|
-
throw error;
|
|
33
|
-
}));
|
|
29
|
+
});
|
|
34
30
|
}
|
|
35
31
|
me(options) {
|
|
36
|
-
return this.http
|
|
37
|
-
.get(`${this.environment.baseUrl}/notifications/me`, {
|
|
32
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/me`, {
|
|
38
33
|
params: options,
|
|
39
34
|
withCredentials: true,
|
|
40
|
-
})
|
|
41
|
-
.pipe(catchError((error) => {
|
|
42
|
-
throw error;
|
|
43
|
-
}));
|
|
35
|
+
});
|
|
44
36
|
}
|
|
45
37
|
get(id) {
|
|
46
|
-
return this.http
|
|
47
|
-
.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
38
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
48
39
|
withCredentials: true,
|
|
49
|
-
})
|
|
50
|
-
.pipe(catchError((error) => {
|
|
51
|
-
throw error;
|
|
52
|
-
}));
|
|
40
|
+
});
|
|
53
41
|
}
|
|
54
42
|
read(ids) {
|
|
55
|
-
return this.http
|
|
56
|
-
.get(`${this.environment.baseUrl}/notifications/${ids}`, {
|
|
43
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${ids}`, {
|
|
57
44
|
withCredentials: true,
|
|
58
|
-
})
|
|
59
|
-
.pipe(catchError((error) => {
|
|
60
|
-
throw error;
|
|
61
|
-
}));
|
|
45
|
+
});
|
|
62
46
|
}
|
|
63
47
|
delete(id) {
|
|
64
|
-
return this.http
|
|
65
|
-
.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
48
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
66
49
|
withCredentials: true,
|
|
67
|
-
})
|
|
68
|
-
.pipe(catchError((error) => {
|
|
69
|
-
throw error;
|
|
70
|
-
}));
|
|
50
|
+
});
|
|
71
51
|
}
|
|
72
52
|
findByUserId(userId) {
|
|
73
|
-
return this.http
|
|
74
|
-
.get(`${this.environment.baseUrl}/notifications/by?userId=${userId}`, {
|
|
53
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/by?userId=${userId}`, {
|
|
75
54
|
withCredentials: true,
|
|
76
|
-
})
|
|
77
|
-
.pipe(catchError((error) => {
|
|
78
|
-
throw error;
|
|
79
|
-
}));
|
|
55
|
+
});
|
|
80
56
|
}
|
|
81
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
82
|
-
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' });
|
|
83
59
|
}
|
|
84
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationTemplateService, decorators: [{
|
|
85
61
|
type: Injectable,
|
|
86
62
|
args: [{
|
|
87
63
|
providedIn: 'root',
|
|
@@ -93,10 +69,10 @@ class StoreService {
|
|
|
93
69
|
getCount() {
|
|
94
70
|
return this.$count.asObservable();
|
|
95
71
|
}
|
|
96
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
97
|
-
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' });
|
|
98
74
|
}
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: StoreService, decorators: [{
|
|
100
76
|
type: Injectable,
|
|
101
77
|
args: [{
|
|
102
78
|
providedIn: 'root',
|
|
@@ -108,42 +84,26 @@ class NotificationService {
|
|
|
108
84
|
http = inject(HttpClient);
|
|
109
85
|
storeService = inject(StoreService);
|
|
110
86
|
find(options) {
|
|
111
|
-
return this.http
|
|
112
|
-
.get(`${this.environment.baseUrl}/notifications`, {
|
|
87
|
+
return this.http.get(`${this.environment.baseUrl}/notifications`, {
|
|
113
88
|
params: options,
|
|
114
89
|
withCredentials: true,
|
|
115
|
-
})
|
|
116
|
-
.pipe(catchError((error) => {
|
|
117
|
-
throw error;
|
|
118
|
-
}));
|
|
90
|
+
});
|
|
119
91
|
}
|
|
120
92
|
me(options) {
|
|
121
|
-
return this.http
|
|
122
|
-
.get(`${this.environment.baseUrl}/notifications/me`, {
|
|
93
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/me`, {
|
|
123
94
|
params: options,
|
|
124
95
|
withCredentials: true,
|
|
125
|
-
})
|
|
126
|
-
.pipe(catchError((error) => {
|
|
127
|
-
throw error;
|
|
128
|
-
}));
|
|
96
|
+
});
|
|
129
97
|
}
|
|
130
98
|
get(id) {
|
|
131
|
-
return this.http
|
|
132
|
-
.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
99
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
133
100
|
withCredentials: true,
|
|
134
|
-
})
|
|
135
|
-
.pipe(catchError((error) => {
|
|
136
|
-
throw error;
|
|
137
|
-
}));
|
|
101
|
+
});
|
|
138
102
|
}
|
|
139
103
|
read(ids) {
|
|
140
|
-
return this.http
|
|
141
|
-
.get(`${this.environment.baseUrl}/notifications/${ids}`, {
|
|
104
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${ids}`, {
|
|
142
105
|
withCredentials: true,
|
|
143
|
-
})
|
|
144
|
-
.pipe(catchError((error) => {
|
|
145
|
-
throw error;
|
|
146
|
-
}));
|
|
106
|
+
});
|
|
147
107
|
}
|
|
148
108
|
update(id) {
|
|
149
109
|
return this.http
|
|
@@ -153,8 +113,6 @@ class NotificationService {
|
|
|
153
113
|
.pipe(map((res) => {
|
|
154
114
|
const value = this.storeService.$count.value - 1;
|
|
155
115
|
this.storeService.$count.next(value);
|
|
156
|
-
}), catchError((error) => {
|
|
157
|
-
throw error;
|
|
158
116
|
}));
|
|
159
117
|
}
|
|
160
118
|
readAll() {
|
|
@@ -164,27 +122,17 @@ class NotificationService {
|
|
|
164
122
|
})
|
|
165
123
|
.pipe(map((res) => {
|
|
166
124
|
this.storeService.$count.next(0);
|
|
167
|
-
}), catchError((error) => {
|
|
168
|
-
throw error;
|
|
169
125
|
}));
|
|
170
126
|
}
|
|
171
127
|
delete(id) {
|
|
172
|
-
return this.http
|
|
173
|
-
.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
128
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/${id}`, {
|
|
174
129
|
withCredentials: true,
|
|
175
|
-
})
|
|
176
|
-
.pipe(catchError((error) => {
|
|
177
|
-
throw error;
|
|
178
|
-
}));
|
|
130
|
+
});
|
|
179
131
|
}
|
|
180
132
|
findByUserId(userId) {
|
|
181
|
-
return this.http
|
|
182
|
-
.get(`${this.environment.baseUrl}/notifications/by?userId=${userId}`, {
|
|
133
|
+
return this.http.get(`${this.environment.baseUrl}/notifications/by?userId=${userId}`, {
|
|
183
134
|
withCredentials: true,
|
|
184
|
-
})
|
|
185
|
-
.pipe(catchError((error) => {
|
|
186
|
-
throw error;
|
|
187
|
-
}));
|
|
135
|
+
});
|
|
188
136
|
}
|
|
189
137
|
countByStatus(status) {
|
|
190
138
|
return this.http
|
|
@@ -194,14 +142,12 @@ class NotificationService {
|
|
|
194
142
|
.pipe(map(({ data }) => {
|
|
195
143
|
this.storeService.$count.next(data);
|
|
196
144
|
return data;
|
|
197
|
-
}), catchError((error) => {
|
|
198
|
-
throw error;
|
|
199
145
|
}));
|
|
200
146
|
}
|
|
201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
202
|
-
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' });
|
|
203
149
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationService, decorators: [{
|
|
205
151
|
type: Injectable,
|
|
206
152
|
args: [{
|
|
207
153
|
providedIn: 'root',
|
|
@@ -252,10 +198,10 @@ class NotificationIconComponent {
|
|
|
252
198
|
},
|
|
253
199
|
});
|
|
254
200
|
}
|
|
255
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
256
|
-
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"] }] });
|
|
257
203
|
}
|
|
258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
204
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationIconComponent, decorators: [{
|
|
259
205
|
type: Component,
|
|
260
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"] }]
|
|
261
207
|
}] });
|
|
@@ -275,10 +221,10 @@ class NotificationDetailComponent extends BaseComponent {
|
|
|
275
221
|
},
|
|
276
222
|
});
|
|
277
223
|
}
|
|
278
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
279
|
-
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: [""] });
|
|
280
226
|
}
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationDetailComponent, decorators: [{
|
|
282
228
|
type: Component,
|
|
283
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" }]
|
|
284
230
|
}] });
|
|
@@ -300,8 +246,8 @@ class NotificationItemComponent {
|
|
|
300
246
|
onToggle(item) {
|
|
301
247
|
this.toggle.emit(item);
|
|
302
248
|
}
|
|
303
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
304
|
-
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: [
|
|
305
251
|
trigger('contentAnimation', [
|
|
306
252
|
state('hidden', style({
|
|
307
253
|
height: '0',
|
|
@@ -315,7 +261,7 @@ class NotificationItemComponent {
|
|
|
315
261
|
]),
|
|
316
262
|
] });
|
|
317
263
|
}
|
|
318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationItemComponent, decorators: [{
|
|
319
265
|
type: Component,
|
|
320
266
|
args: [{ selector: 'rolatech-notification-item', animations: [
|
|
321
267
|
trigger('contentAnimation', [
|
|
@@ -333,10 +279,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
|
|
|
333
279
|
}] });
|
|
334
280
|
|
|
335
281
|
class NotificationIndexComponent {
|
|
282
|
+
route = inject(ActivatedRoute);
|
|
336
283
|
notificationService = inject(NotificationService);
|
|
337
284
|
snackBar = inject(MatSnackBar);
|
|
338
285
|
notifications = [];
|
|
339
|
-
filter =
|
|
286
|
+
filter = false;
|
|
340
287
|
pageEvent;
|
|
341
288
|
length = 100;
|
|
342
289
|
pageSize = 15;
|
|
@@ -344,6 +291,7 @@ class NotificationIndexComponent {
|
|
|
344
291
|
isLoading = false;
|
|
345
292
|
isSearch = false;
|
|
346
293
|
selectedId = '';
|
|
294
|
+
select = 0;
|
|
347
295
|
notificationIconComponent = NotificationIconComponent;
|
|
348
296
|
displayedColumns = ['title', 'status', 'createdAt', 'actions'];
|
|
349
297
|
paginator = viewChild(MatPaginator);
|
|
@@ -376,7 +324,33 @@ class NotificationIndexComponent {
|
|
|
376
324
|
status = NotificationStatus;
|
|
377
325
|
orderString = 'createdAt desc';
|
|
378
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
|
+
];
|
|
379
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
|
+
});
|
|
380
354
|
this.find(null);
|
|
381
355
|
}
|
|
382
356
|
find(event) {
|
|
@@ -388,8 +362,10 @@ class NotificationIndexComponent {
|
|
|
388
362
|
page,
|
|
389
363
|
limit,
|
|
390
364
|
sort,
|
|
391
|
-
filter: this.filter,
|
|
392
365
|
};
|
|
366
|
+
if (this.filter) {
|
|
367
|
+
options['filter'] = this.filter;
|
|
368
|
+
}
|
|
393
369
|
this.notificationService.me(options).subscribe({
|
|
394
370
|
next: (res) => {
|
|
395
371
|
this.notifications = res.data;
|
|
@@ -414,38 +390,22 @@ class NotificationIndexComponent {
|
|
|
414
390
|
},
|
|
415
391
|
});
|
|
416
392
|
}
|
|
417
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
419
|
-
}
|
|
420
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NotificationIndexComponent, decorators: [{
|
|
421
|
-
type: Component,
|
|
422
|
-
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" }]
|
|
423
|
-
}] });
|
|
424
|
-
|
|
425
|
-
class NotificationLayoutComponent {
|
|
426
|
-
links = [
|
|
427
|
-
{
|
|
428
|
-
name: '全部',
|
|
429
|
-
icon: 'dashboard',
|
|
430
|
-
link: '.',
|
|
431
|
-
},
|
|
432
|
-
{
|
|
433
|
-
name: '课程',
|
|
434
|
-
icon: 'category',
|
|
435
|
-
link: 'course',
|
|
436
|
-
},
|
|
437
|
-
{
|
|
438
|
-
name: '订单',
|
|
439
|
-
icon: 'category',
|
|
440
|
-
link: 'order',
|
|
441
|
-
},
|
|
442
|
-
];
|
|
443
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: NotificationLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
444
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", 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 });
|
|
445
395
|
}
|
|
446
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: NotificationIndexComponent, decorators: [{
|
|
447
397
|
type: Component,
|
|
448
|
-
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"] }]
|
|
449
409
|
}] });
|
|
450
410
|
|
|
451
411
|
function provideAngularNotification() {
|
|
@@ -459,8 +419,7 @@ function provideAngularNotification() {
|
|
|
459
419
|
const notificationRoutes = [
|
|
460
420
|
{
|
|
461
421
|
path: '',
|
|
462
|
-
component:
|
|
463
|
-
children: [{ path: '', component: NotificationIndexComponent }],
|
|
422
|
+
component: NotificationIndexComponent,
|
|
464
423
|
},
|
|
465
424
|
{ path: ':id', component: NotificationDetailComponent },
|
|
466
425
|
];
|
|
@@ -469,5 +428,5 @@ const notificationRoutes = [
|
|
|
469
428
|
* Generated bundle index. Do not edit.
|
|
470
429
|
*/
|
|
471
430
|
|
|
472
|
-
export { NotificationDetailComponent, NotificationIconComponent, NotificationIndexComponent, NotificationItemComponent,
|
|
431
|
+
export { NotificationDetailComponent, NotificationIconComponent, NotificationIndexComponent, NotificationItemComponent, NotificationService, NotificationTemplateService, notificationRoutes, provideAngularNotification };
|
|
473
432
|
//# sourceMappingURL=rolatech-angular-notification.mjs.map
|