@rolatech/angular-comment 17.1.0 → 17.2.0
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/lib/components/comment-action/comment-action.component.mjs +16 -27
- package/esm2022/lib/components/comment-item/comment-item.component.mjs +10 -9
- package/esm2022/lib/components/comment-replies/comment-replies.component.mjs +15 -25
- package/esm2022/lib/components/comments/comments.component.mjs +9 -16
- package/esm2022/lib/components/comments-header/comments-header.component.mjs +17 -29
- package/esm2022/lib/components/reply-item/reply-item.component.mjs +13 -15
- package/esm2022/lib/interfaces/comment.interface.mjs +1 -1
- package/esm2022/lib/services/comment.service.mjs +10 -8
- package/fesm2022/rolatech-angular-comment.mjs +77 -116
- package/fesm2022/rolatech-angular-comment.mjs.map +1 -1
- package/lib/components/comment-action/comment-action.component.d.ts +6 -7
- package/lib/components/comment-item/comment-item.component.d.ts +5 -4
- package/lib/components/comment-replies/comment-replies.component.d.ts +6 -7
- package/lib/components/comments/comments.component.d.ts +2 -2
- package/lib/components/comments-header/comments-header.component.d.ts +5 -6
- package/lib/components/reply-item/reply-item.component.d.ts +5 -4
- package/lib/interfaces/comment.interface.d.ts +2 -2
- package/lib/services/comment.service.d.ts +3 -4
- package/package.json +1 -1
- package/themes/_default.scss +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject,
|
|
2
|
+
import { inject, output, Injectable, input, Component, effect, model } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/material/button';
|
|
@@ -28,9 +28,9 @@ class CommentService extends BaseService {
|
|
|
28
28
|
super(...arguments);
|
|
29
29
|
this.authService = inject(AuthService);
|
|
30
30
|
this.authUserService = inject(AuthUserService);
|
|
31
|
-
this.onCommentLoading =
|
|
32
|
-
this.onComment =
|
|
33
|
-
this.onCommentReply =
|
|
31
|
+
this.onCommentLoading = output();
|
|
32
|
+
this.onComment = output();
|
|
33
|
+
this.onCommentReply = output();
|
|
34
34
|
}
|
|
35
35
|
init() {
|
|
36
36
|
this.endpoint = 'comments';
|
|
@@ -39,6 +39,7 @@ class CommentService extends BaseService {
|
|
|
39
39
|
findComments(options) {
|
|
40
40
|
options = {
|
|
41
41
|
sort: 'createdAt desc',
|
|
42
|
+
limit: 20,
|
|
42
43
|
};
|
|
43
44
|
return this.http.get(`${this.actionUrl}`, { params: options }).pipe(map((res) => {
|
|
44
45
|
const userIds = _.uniq(_.map(res.data, 'userId')); // [12, 14, 16, 18]
|
|
@@ -50,6 +51,7 @@ class CommentService extends BaseService {
|
|
|
50
51
|
const options = {
|
|
51
52
|
sort: 'createdAt desc',
|
|
52
53
|
filter: `itemId:${itemId}`,
|
|
54
|
+
limit: 2,
|
|
53
55
|
};
|
|
54
56
|
return this.http.get(`${this.actionUrl}`, { params: options }).pipe(switchMap((comments) => {
|
|
55
57
|
const userIds = _.uniq(_.map(comments.data, 'userId')); // [12, 14, 16, 18]
|
|
@@ -209,10 +211,10 @@ class CommentService extends BaseService {
|
|
|
209
211
|
withCredentials: true,
|
|
210
212
|
});
|
|
211
213
|
}
|
|
212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
213
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
215
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentService, providedIn: 'root' }); }
|
|
214
216
|
}
|
|
215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentService, decorators: [{
|
|
216
218
|
type: Injectable,
|
|
217
219
|
args: [{ providedIn: 'root' }]
|
|
218
220
|
}] });
|
|
@@ -220,10 +222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
220
222
|
class CommentActionComponent {
|
|
221
223
|
constructor() {
|
|
222
224
|
this.commentService = inject(CommentService);
|
|
223
|
-
this.placeholder = '请输入回复内容';
|
|
224
|
-
this.
|
|
225
|
-
this.
|
|
226
|
-
this.
|
|
225
|
+
this.placeholder = input('请输入回复内容');
|
|
226
|
+
this.data = input.required();
|
|
227
|
+
this.reply = output();
|
|
228
|
+
this.thumbsUp = output();
|
|
229
|
+
this.thumbsDown = output();
|
|
227
230
|
this.show = false;
|
|
228
231
|
this.content = '';
|
|
229
232
|
this.loading = false;
|
|
@@ -235,12 +238,10 @@ class CommentActionComponent {
|
|
|
235
238
|
onReply() {
|
|
236
239
|
this.loading = true;
|
|
237
240
|
this.reply.emit(this.content);
|
|
238
|
-
this.commentService.onCommentLoading.subscribe({
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
this.content = '';
|
|
243
|
-
},
|
|
241
|
+
this.commentService.onCommentLoading.subscribe((res) => {
|
|
242
|
+
this.loading = res;
|
|
243
|
+
this.show = false;
|
|
244
|
+
this.content = '';
|
|
244
245
|
});
|
|
245
246
|
}
|
|
246
247
|
onThumbsUp() {
|
|
@@ -249,37 +250,31 @@ class CommentActionComponent {
|
|
|
249
250
|
onThumbsDown() {
|
|
250
251
|
this.thumbsDown.emit();
|
|
251
252
|
}
|
|
252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
253
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CommentActionComponent, isStandalone: true, selector: "rolatech-comment-action", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { reply: "reply", thumbsUp: "thumbsUp", thumbsDown: "thumbsDown" }, ngImport: i0, template: "<div>\n <div class=\"flex items-center -ml-2\">\n <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsUp()\">\n <mat-icon [color]=\"data().like ? 'primary' : ''\">thumb_up</mat-icon>\n </button>\n @if (data().thumbsUpCount > 0) {\n <span class=\"text-sm opacity-80\">{{ data().thumbsUpCount }}</span>\n }\n <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsDown()\">\n <mat-icon [color]=\"data().dislike ? 'primary' : ''\">thumb_down</mat-icon>\n </button>\n @if (data().thumbsDownCount > 0) {\n <span class=\"text-sm opacity-80\">{{ data().thumbsDownCount }}</span>\n }\n\n <button mat-button (click)=\"show = true\" class=\"w-8 h-8\">\u56DE\u590D</button>\n </div>\n <div>\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n } @else {\n @if (show) {\n <mat-form-field>\n <textarea\n matInput\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"8\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"content\"\n (focus)=\"show = true\"\n ></textarea>\n </mat-form-field>\n <div class=\"flex justify-end items-center gap-2 pr-2\">\n <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" (click)=\"onReply()\">\n <span class=\"text-white\">\u56DE\u590D</span>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
254
255
|
}
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentActionComponent, decorators: [{
|
|
256
257
|
type: Component,
|
|
257
|
-
args: [{ selector: 'rolatech-comment-action', standalone: true, imports: [AngularCommonModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule], template: "<div>\n <div class=\"flex items-center -ml-2\">\n <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsUp()\">\n <mat-icon [color]=\"data.like ? 'primary' : ''\">thumb_up</mat-icon>\n </button>\n @if (data.thumbsUpCount > 0) {\n <span class=\"text-sm opacity-80\">{{ data.thumbsUpCount }}</span>\n }\n <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsDown()\">\n <mat-icon [color]=\"data.dislike ? 'primary' : ''\">thumb_down</mat-icon>\n </button>\n @if (data.thumbsDownCount > 0) {\n <span class=\"text-sm opacity-80\">{{ data.thumbsDownCount }}</span>\n }\n\n <button mat-button (click)=\"show = true\" class=\"w-8 h-8\">\u56DE\u590D</button>\n </div>\n <div>\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n } @else {\n @if (show) {\n <mat-form-field>\n <textarea\n matInput\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"8\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"content\"\n (focus)=\"show = true\"\n ></textarea>\n </mat-form-field>\n <div class=\"flex justify-end items-center gap-2 pr-2\">\n <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" (click)=\"onReply()\">\n <span class=\"text-white\">\u56DE\u590D</span>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"] }]
|
|
258
|
-
}]
|
|
259
|
-
type: Input
|
|
260
|
-
}], data: [{
|
|
261
|
-
type: Input
|
|
262
|
-
}], reply: [{
|
|
263
|
-
type: Output
|
|
264
|
-
}], thumbsUp: [{
|
|
265
|
-
type: Output
|
|
266
|
-
}], thumbsDown: [{
|
|
267
|
-
type: Output
|
|
268
|
-
}] } });
|
|
258
|
+
args: [{ selector: 'rolatech-comment-action', standalone: true, imports: [AngularCommonModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatProgressSpinnerModule], template: "<div>\n <div class=\"flex items-center -ml-2\">\n <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsUp()\">\n <mat-icon [color]=\"data().like ? 'primary' : ''\">thumb_up</mat-icon>\n </button>\n @if (data().thumbsUpCount > 0) {\n <span class=\"text-sm opacity-80\">{{ data().thumbsUpCount }}</span>\n }\n <button class=\"w-8 h-8 p-1 hover:bg-gray-200 rounded-full\" (click)=\"onThumbsDown()\">\n <mat-icon [color]=\"data().dislike ? 'primary' : ''\">thumb_down</mat-icon>\n </button>\n @if (data().thumbsDownCount > 0) {\n <span class=\"text-sm opacity-80\">{{ data().thumbsDownCount }}</span>\n }\n\n <button mat-button (click)=\"show = true\" class=\"w-8 h-8\">\u56DE\u590D</button>\n </div>\n <div>\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n } @else {\n @if (show) {\n <mat-form-field>\n <textarea\n matInput\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"8\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"content\"\n (focus)=\"show = true\"\n ></textarea>\n </mat-form-field>\n <div class=\"flex justify-end items-center gap-2 pr-2\">\n <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" (click)=\"onReply()\">\n <span class=\"text-white\">\u56DE\u590D</span>\n </button>\n </div>\n }\n }\n </div>\n</div>\n", styles: ["mat-icon{transform:scale(.8)}mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"] }]
|
|
259
|
+
}] });
|
|
269
260
|
|
|
270
261
|
class ReplyItemComponent {
|
|
271
262
|
constructor() {
|
|
272
263
|
this.commentService = inject(CommentService);
|
|
273
|
-
this.commentId =
|
|
274
|
-
this.
|
|
264
|
+
this.commentId = input.required();
|
|
265
|
+
this.item = input.required();
|
|
266
|
+
this.replied = output();
|
|
275
267
|
this.show = false;
|
|
268
|
+
effect(() => {
|
|
269
|
+
this.reply = this.item();
|
|
270
|
+
});
|
|
276
271
|
}
|
|
277
272
|
onReply(content) {
|
|
278
273
|
const data = {
|
|
279
274
|
replyId: this.reply.id,
|
|
280
275
|
content,
|
|
281
276
|
};
|
|
282
|
-
this.commentService.reply(this.commentId, data).subscribe({
|
|
277
|
+
this.commentService.reply(this.commentId(), data).subscribe({
|
|
283
278
|
next: (res) => {
|
|
284
279
|
this.commentService.onCommentLoading.emit(false);
|
|
285
280
|
this.replied.emit(res);
|
|
@@ -310,28 +305,22 @@ class ReplyItemComponent {
|
|
|
310
305
|
},
|
|
311
306
|
});
|
|
312
307
|
}
|
|
313
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ReplyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
309
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: ReplyItemComponent, isStandalone: true, selector: "rolatech-reply-item", inputs: { commentId: { classPropertyName: "commentId", publicName: "commentId", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { replied: "replied" }, ngImport: i0, template: "<div class=\"block w-full\">\n @if (reply) {\n <div class=\"flex group\">\n <div class=\"bg-orange-600 min-w-[28px] min-h-[28px] h-fit mr-3 rounded-full\">\n @if (reply.user && reply.user.avatar) {\n <img class=\"w-7 h-7 rounded-full\" [src]=\"reply.user.avatar\" />\n }\n </div>\n <div class=\"flex flex-col w-full\">\n <a class=\"mb-0.5\">\n @if (reply.user) {\n <span class=\"text-md font-semibold mr-1\">@{{ reply.user.username }}</span>\n }\n <span class=\"text-sm opacity-70\">{{ reply.createdAt | time }}</span>\n </a>\n <div [innerText]=\"reply.content\"></div>\n <rolatech-comment-action\n (reply)=\"onReply($event)\"\n [data]=\"reply\"\n (thumbsUp)=\"onThumbsUp()\"\n (thumbsDown)=\"onThumbsDown()\"\n ></rolatech-comment-action>\n </div>\n <div class=\"min-w-10\">\n <button\n class=\"hover:bg-gray-200 w-9 h-9 flex items-center justify-center rounded-full group-hover:visible\"\n [ngClass]=\"memnu.menuOpen ? 'visible' : 'invisible'\"\n [matMenuTriggerFor]=\"actionMenu\"\n #memnu=\"matMenuTrigger\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n }\n</div>\n<mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item>\n <mat-icon>flag</mat-icon>\n <span>\u4E3E\u62A5</span>\n </button>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CommentActionComponent, selector: "rolatech-comment-action", inputs: ["placeholder", "data"], outputs: ["reply", "thumbsUp", "thumbsDown"] }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
315
310
|
}
|
|
316
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ReplyItemComponent, decorators: [{
|
|
317
312
|
type: Component,
|
|
318
313
|
args: [{ selector: 'rolatech-reply-item', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, CommentActionComponent, TimePipe, MatMenuModule], template: "<div class=\"block w-full\">\n @if (reply) {\n <div class=\"flex group\">\n <div class=\"bg-orange-600 min-w-[28px] min-h-[28px] h-fit mr-3 rounded-full\">\n @if (reply.user && reply.user.avatar) {\n <img class=\"w-7 h-7 rounded-full\" [src]=\"reply.user.avatar\" />\n }\n </div>\n <div class=\"flex flex-col w-full\">\n <a class=\"mb-0.5\">\n @if (reply.user) {\n <span class=\"text-md font-semibold mr-1\">@{{ reply.user.username }}</span>\n }\n <span class=\"text-sm opacity-70\">{{ reply.createdAt | time }}</span>\n </a>\n <div [innerText]=\"reply.content\"></div>\n <rolatech-comment-action\n (reply)=\"onReply($event)\"\n [data]=\"reply\"\n (thumbsUp)=\"onThumbsUp()\"\n (thumbsDown)=\"onThumbsDown()\"\n ></rolatech-comment-action>\n </div>\n <div class=\"min-w-10\">\n <button\n class=\"hover:bg-gray-200 w-9 h-9 flex items-center justify-center rounded-full group-hover:visible\"\n [ngClass]=\"memnu.menuOpen ? 'visible' : 'invisible'\"\n [matMenuTriggerFor]=\"actionMenu\"\n #memnu=\"matMenuTrigger\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n }\n</div>\n<mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item>\n <mat-icon>flag</mat-icon>\n <span>\u4E3E\u62A5</span>\n </button>\n</mat-menu>\n" }]
|
|
319
|
-
}],
|
|
320
|
-
type: Input
|
|
321
|
-
}], commentId: [{
|
|
322
|
-
type: Input
|
|
323
|
-
}], replied: [{
|
|
324
|
-
type: Output
|
|
325
|
-
}] } });
|
|
314
|
+
}], ctorParameters: () => [] });
|
|
326
315
|
|
|
327
316
|
class CommentRepliesComponent {
|
|
328
317
|
constructor() {
|
|
329
318
|
this.commentService = inject(CommentService);
|
|
330
|
-
this.total = 0;
|
|
331
|
-
this.replies = [];
|
|
332
|
-
this.commentId =
|
|
333
|
-
this.replied =
|
|
334
|
-
this.fetch =
|
|
319
|
+
this.total = model(0);
|
|
320
|
+
this.replies = model([]);
|
|
321
|
+
this.commentId = input.required();
|
|
322
|
+
this.replied = output();
|
|
323
|
+
this.fetch = output();
|
|
335
324
|
this.expand = false;
|
|
336
325
|
this.loading = false;
|
|
337
326
|
this.fetched = false;
|
|
@@ -340,37 +329,30 @@ class CommentRepliesComponent {
|
|
|
340
329
|
this.expand = !this.expand;
|
|
341
330
|
if (!this.fetched) {
|
|
342
331
|
this.fetched = true;
|
|
343
|
-
this.fetch.emit(this.commentId);
|
|
332
|
+
this.fetch.emit(this.commentId());
|
|
344
333
|
}
|
|
345
334
|
}
|
|
346
335
|
onItemReplied(reply) {
|
|
347
|
-
this.total
|
|
348
|
-
this.replies.push(reply);
|
|
336
|
+
this.total.set(this.total() + 1);
|
|
337
|
+
this.replies().push(reply);
|
|
349
338
|
}
|
|
350
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
339
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentRepliesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
340
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CommentRepliesComponent, isStandalone: true, selector: "rolatech-comment-replies", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, replies: { classPropertyName: "replies", publicName: "replies", isSignal: true, isRequired: false, transformFunction: null }, commentId: { classPropertyName: "commentId", publicName: "commentId", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { total: "totalChange", replies: "repliesChange", replied: "replied", fetch: "fetch" }, ngImport: i0, template: "<div class=\"block ml-14\">\n @if (total() > 0) {\n <div>\n <button class=\"inline-flex items-center rounded-lg hover:bg-orange-200 py-1 -ml-1\" (click)=\"onFetch()\">\n <mat-icon color=\"primary\">{{ expand ? 'arrow_drop_up' : 'arrow_drop_down' }}</mat-icon>\n <span class=\"mr-2 text-sm text-orange-500\">\u56DE\u590D({{ total() || replies.length }})</span>\n </button>\n <!-- <div class=\"less-button\">\n <button (click)=\"expand = false\">222</button>\n </div> -->\n </div>\n }\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n }\n\n @if (expand) {\n @for (item of replies(); track $index) {\n <rolatech-reply-item [commentId]=\"commentId()\" [item]=\"item\" (replied)=\"onItemReplied($event)\"></rolatech-reply-item>\n }\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: ReplyItemComponent, selector: "rolatech-reply-item", inputs: ["commentId", "item"], outputs: ["replied"] }] }); }
|
|
352
341
|
}
|
|
353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
342
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentRepliesComponent, decorators: [{
|
|
354
343
|
type: Component,
|
|
355
|
-
args: [{ selector: 'rolatech-comment-replies', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule, ReplyItemComponent], template: "<div class=\"block ml-14\">\n @if (total > 0) {\n <div>\n <button class=\"inline-flex items-center rounded-lg hover:bg-orange-200 py-1 -ml-1\" (click)=\"onFetch()\">\n <mat-icon color=\"primary\">{{ expand ? 'arrow_drop_up' : 'arrow_drop_down' }}</mat-icon>\n <span class=\"mr-2 text-sm text-orange-500\">\u56DE\u590D({{ total || replies.length }})</span>\n </button>\n <!-- <div class=\"less-button\">\n <button (click)=\"expand = false\">222</button>\n </div> -->\n </div>\n }\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n }\n\n @if (expand) {\n @for (item of replies; track $index) {\n <rolatech-reply-item [commentId]=\"commentId\" [
|
|
356
|
-
}]
|
|
357
|
-
type: Input
|
|
358
|
-
}], replies: [{
|
|
359
|
-
type: Input
|
|
360
|
-
}], commentId: [{
|
|
361
|
-
type: Input
|
|
362
|
-
}], replied: [{
|
|
363
|
-
type: Output
|
|
364
|
-
}], fetch: [{
|
|
365
|
-
type: Output
|
|
366
|
-
}] } });
|
|
344
|
+
args: [{ selector: 'rolatech-comment-replies', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule, ReplyItemComponent], template: "<div class=\"block ml-14\">\n @if (total() > 0) {\n <div>\n <button class=\"inline-flex items-center rounded-lg hover:bg-orange-200 py-1 -ml-1\" (click)=\"onFetch()\">\n <mat-icon color=\"primary\">{{ expand ? 'arrow_drop_up' : 'arrow_drop_down' }}</mat-icon>\n <span class=\"mr-2 text-sm text-orange-500\">\u56DE\u590D({{ total() || replies.length }})</span>\n </button>\n <!-- <div class=\"less-button\">\n <button (click)=\"expand = false\">222</button>\n </div> -->\n </div>\n }\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n }\n\n @if (expand) {\n @for (item of replies(); track $index) {\n <rolatech-reply-item [commentId]=\"commentId()\" [item]=\"item\" (replied)=\"onItemReplied($event)\"></rolatech-reply-item>\n }\n }\n</div>\n" }]
|
|
345
|
+
}] });
|
|
367
346
|
|
|
368
347
|
class CommentItemComponent {
|
|
369
348
|
constructor() {
|
|
370
349
|
this.commentService = inject(CommentService);
|
|
350
|
+
this.item = input.required();
|
|
371
351
|
this.show = false;
|
|
372
352
|
this.loading = false;
|
|
373
|
-
|
|
353
|
+
effect(() => {
|
|
354
|
+
this.comment = this.item();
|
|
355
|
+
});
|
|
374
356
|
}
|
|
375
357
|
ngOnInit() {
|
|
376
358
|
// this.countRepliesByCommentId(this.comment.id!);
|
|
@@ -435,10 +417,10 @@ class CommentItemComponent {
|
|
|
435
417
|
},
|
|
436
418
|
});
|
|
437
419
|
}
|
|
438
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
439
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CommentItemComponent, isStandalone: true, selector: "rolatech-comment-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"block w-full\">\n @if (comment) {\n <div class=\"flex group\">\n <div class=\"bg-orange-600 min-w-10 min-h-10 mr-4 h-fit rounded-full\">\n @if (comment.user && comment.user.avatar) {\n <img class=\"w-10 h-10 rounded-full\" [src]=\"comment.user.avatar\" />\n }\n </div>\n <div class=\"flex flex-col w-full\">\n <a class=\"mb-0.5\">\n @if (comment.user) {\n <span class=\"text-md font-semibold mr-1\">@{{ comment.user.username }}</span>\n }\n <span class=\"text-sm opacity-70\">{{ comment.createdAt | time }}</span>\n </a>\n\n <div [innerText]=\"comment.content\"></div>\n <rolatech-comment-action\n (reply)=\"onCommentReply($event)\"\n [data]=\"comment\"\n (thumbsUp)=\"onThumbsUp()\"\n (thumbsDown)=\"onThumbsDown()\"\n ></rolatech-comment-action>\n </div>\n <div class=\"min-w-9\">\n <button\n class=\"hover:bg-gray-200 w-9 h-9 flex items-center justify-center rounded-full group-hover:visible\"\n [ngClass]=\"memnu.menuOpen ? 'visible' : 'invisible'\"\n [matMenuTriggerFor]=\"actionMenu\"\n #memnu=\"matMenuTrigger\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n <div>\n <rolatech-comment-replies\n [total]=\"comment.repliesCount\"\n [commentId]=\"comment.id!\"\n [replies]=\"comment.replies!\"\n (fetch)=\"onFetchReplies($event)\"\n ></rolatech-comment-replies>\n </div>\n }\n</div>\n<mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item>\n <mat-icon>flag</mat-icon>\n <span>\u4E3E\u62A5</span>\n </button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: CommentRepliesComponent, selector: "rolatech-comment-replies", inputs: ["total", "replies", "commentId"], outputs: ["totalChange", "repliesChange", "replied", "fetch"] }, { kind: "component", type: CommentActionComponent, selector: "rolatech-comment-action", inputs: ["placeholder", "data"], outputs: ["reply", "thumbsUp", "thumbsDown"] }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
440
422
|
}
|
|
441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentItemComponent, decorators: [{
|
|
442
424
|
type: Component,
|
|
443
425
|
args: [{ selector: 'rolatech-comment-item', standalone: true, imports: [
|
|
444
426
|
CommonModule,
|
|
@@ -452,26 +434,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
452
434
|
TimePipe,
|
|
453
435
|
MatMenuModule,
|
|
454
436
|
], template: "<div class=\"block w-full\">\n @if (comment) {\n <div class=\"flex group\">\n <div class=\"bg-orange-600 min-w-10 min-h-10 mr-4 h-fit rounded-full\">\n @if (comment.user && comment.user.avatar) {\n <img class=\"w-10 h-10 rounded-full\" [src]=\"comment.user.avatar\" />\n }\n </div>\n <div class=\"flex flex-col w-full\">\n <a class=\"mb-0.5\">\n @if (comment.user) {\n <span class=\"text-md font-semibold mr-1\">@{{ comment.user.username }}</span>\n }\n <span class=\"text-sm opacity-70\">{{ comment.createdAt | time }}</span>\n </a>\n\n <div [innerText]=\"comment.content\"></div>\n <rolatech-comment-action\n (reply)=\"onCommentReply($event)\"\n [data]=\"comment\"\n (thumbsUp)=\"onThumbsUp()\"\n (thumbsDown)=\"onThumbsDown()\"\n ></rolatech-comment-action>\n </div>\n <div class=\"min-w-9\">\n <button\n class=\"hover:bg-gray-200 w-9 h-9 flex items-center justify-center rounded-full group-hover:visible\"\n [ngClass]=\"memnu.menuOpen ? 'visible' : 'invisible'\"\n [matMenuTriggerFor]=\"actionMenu\"\n #memnu=\"matMenuTrigger\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </div>\n <div>\n <rolatech-comment-replies\n [total]=\"comment.repliesCount\"\n [commentId]=\"comment.id!\"\n [replies]=\"comment.replies!\"\n (fetch)=\"onFetchReplies($event)\"\n ></rolatech-comment-replies>\n </div>\n }\n</div>\n<mat-menu #actionMenu=\"matMenu\">\n <button mat-menu-item>\n <mat-icon>flag</mat-icon>\n <span>\u4E3E\u62A5</span>\n </button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}\n"] }]
|
|
455
|
-
}],
|
|
456
|
-
type: Input
|
|
457
|
-
}] } });
|
|
437
|
+
}], ctorParameters: () => [] });
|
|
458
438
|
|
|
459
439
|
class CommentsHeaderComponent {
|
|
460
440
|
constructor() {
|
|
461
441
|
this.commentService = inject(CommentService);
|
|
462
|
-
this.
|
|
463
|
-
this.
|
|
464
|
-
this.
|
|
465
|
-
this.comment = new EventEmitter();
|
|
442
|
+
this.placeholder = input('请输入评论内容');
|
|
443
|
+
this.total = model(0);
|
|
444
|
+
this.comment = output();
|
|
466
445
|
this.content = '';
|
|
467
446
|
this.show = false;
|
|
468
447
|
this.loading = false;
|
|
469
448
|
}
|
|
470
449
|
ngOnInit() {
|
|
471
|
-
this.commentService.onComment.subscribe({
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
},
|
|
450
|
+
this.commentService.onComment.subscribe((res) => {
|
|
451
|
+
// this.total++;
|
|
452
|
+
this.total.set(this.total() + 1);
|
|
475
453
|
});
|
|
476
454
|
}
|
|
477
455
|
onFocus(event) {
|
|
@@ -484,20 +462,18 @@ class CommentsHeaderComponent {
|
|
|
484
462
|
onComment() {
|
|
485
463
|
this.loading = true;
|
|
486
464
|
this.comment.emit(this.content);
|
|
487
|
-
this.commentService.onCommentLoading.subscribe({
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
this.content = '';
|
|
492
|
-
},
|
|
465
|
+
this.commentService.onCommentLoading.subscribe((res) => {
|
|
466
|
+
this.loading = res;
|
|
467
|
+
this.show = false;
|
|
468
|
+
this.content = '';
|
|
493
469
|
});
|
|
494
470
|
}
|
|
495
471
|
fetchByComments() { }
|
|
496
472
|
fetchByReplies() { }
|
|
497
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
498
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
474
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CommentsHeaderComponent, isStandalone: true, selector: "rolatech-comments-header", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { total: "totalChange", comment: "comment" }, ngImport: i0, template: "<div class=\"my-2\">\n <div class=\"flex items-center gap-3 py-2\">\n <span class=\"text-lg font-bold\">\u8BC4\u8BBA({{ total() }})</span>\n <button mat-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>sort</mat-icon>\n <span>\u6392\u5E8F</span>\n </button>\n </div>\n\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n } @else {\n <div class=\"mr-3\">\n <mat-form-field>\n <textarea\n matInput\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"8\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"content\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n </mat-form-field>\n @if (show) {\n <div class=\"flex justify-end items-center gap-2 pr-2\">\n <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" (click)=\"onComment()\">\n <span class=\"text-white\">\u8BC4\u8BBA</span>\n </button>\n </div>\n }\n </div>\n }\n</div>\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"fetchByReplies()\">\u6700\u591A\u56DE\u590D</button>\n <button mat-menu-item (click)=\"fetchByComments()\">\u6700\u65B0\u8BC4\u8BBA</button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
499
475
|
}
|
|
500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentsHeaderComponent, decorators: [{
|
|
501
477
|
type: Component,
|
|
502
478
|
args: [{ selector: 'rolatech-comments-header', standalone: true, imports: [
|
|
503
479
|
AngularCommonModule,
|
|
@@ -509,23 +485,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
509
485
|
MatInputModule,
|
|
510
486
|
CommentActionComponent,
|
|
511
487
|
MatProgressSpinnerModule,
|
|
512
|
-
], template: "<div class=\"my-2\">\n <div class=\"flex items-center gap-3 py-2\">\n <span class=\"text-lg font-bold\">\u8BC4\u8BBA({{ total }})</span>\n <button mat-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>sort</mat-icon>\n <span>\u6392\u5E8F</span>\n </button>\n </div>\n\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n } @else {\n <div class=\"mr-3\">\n <mat-form-field>\n <textarea\n matInput\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"8\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"content\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n </mat-form-field>\n @if (show) {\n <div class=\"flex justify-end items-center gap-2 pr-2\">\n <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" (click)=\"onComment()\">\n <span class=\"text-white\">\u8BC4\u8BBA</span>\n </button>\n </div>\n }\n </div>\n }\n</div>\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"fetchByReplies()\">\u6700\u591A\u56DE\u590D</button>\n <button mat-menu-item (click)=\"fetchByComments()\">\u6700\u65B0\u8BC4\u8BBA</button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"] }]
|
|
513
|
-
}]
|
|
514
|
-
type: Input
|
|
515
|
-
}], placeholder: [{
|
|
516
|
-
type: Input
|
|
517
|
-
}], total: [{
|
|
518
|
-
type: Input
|
|
519
|
-
}], comment: [{
|
|
520
|
-
type: Output
|
|
521
|
-
}] } });
|
|
488
|
+
], template: "<div class=\"my-2\">\n <div class=\"flex items-center gap-3 py-2\">\n <span class=\"text-lg font-bold\">\u8BC4\u8BBA({{ total() }})</span>\n <button mat-button [matMenuTriggerFor]=\"menu\">\n <mat-icon>sort</mat-icon>\n <span>\u6392\u5E8F</span>\n </button>\n </div>\n\n @if (loading) {\n <div class=\"flex items-center justify-center h-20\">\n <mat-spinner diameter=\"32\"></mat-spinner>\n </div>\n } @else {\n <div class=\"mr-3\">\n <mat-form-field>\n <textarea\n matInput\n cdkTextareaAutosize\n #autosize=\"cdkTextareaAutosize\"\n cdkAutosizeMinRows=\"1\"\n cdkAutosizeMaxRows=\"8\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"content\"\n (focus)=\"onFocus($event)\"\n ></textarea>\n </mat-form-field>\n @if (show) {\n <div class=\"flex justify-end items-center gap-2 pr-2\">\n <button mat-button (click)=\"onCancel()\">\u53D6\u6D88</button>\n <button mat-flat-button color=\"primary\" (click)=\"onComment()\">\n <span class=\"text-white\">\u8BC4\u8BBA</span>\n </button>\n </div>\n }\n </div>\n }\n</div>\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"fetchByReplies()\">\u6700\u591A\u56DE\u590D</button>\n <button mat-menu-item (click)=\"fetchByComments()\">\u6700\u65B0\u8BC4\u8BBA</button>\n</mat-menu>\n", styles: ["mat-form-field{width:100%}textarea:focus{outline:none;box-shadow:none}\n"] }]
|
|
489
|
+
}] });
|
|
522
490
|
|
|
523
491
|
class CommentsComponent {
|
|
524
492
|
constructor() {
|
|
525
493
|
this.commentService = inject(CommentService);
|
|
526
494
|
this.authUserService = inject(AuthUserService);
|
|
495
|
+
this.itemId = input.required();
|
|
527
496
|
this.comments = [];
|
|
528
|
-
this.itemId = '';
|
|
529
497
|
this.total = 0;
|
|
530
498
|
this.show = false;
|
|
531
499
|
this.content = '';
|
|
@@ -544,12 +512,11 @@ class CommentsComponent {
|
|
|
544
512
|
}
|
|
545
513
|
onComment(content) {
|
|
546
514
|
const data = {
|
|
547
|
-
itemId: this.itemId,
|
|
515
|
+
itemId: this.itemId(),
|
|
548
516
|
content,
|
|
549
517
|
};
|
|
550
518
|
this.commentService.createComment(data).subscribe({
|
|
551
519
|
next: (res) => {
|
|
552
|
-
this.comments = this.comments ? this.comments : [];
|
|
553
520
|
this.comments.unshift(res);
|
|
554
521
|
this.commentService.onCommentLoading.emit(false);
|
|
555
522
|
this.commentService.onComment.emit(true);
|
|
@@ -559,19 +526,13 @@ class CommentsComponent {
|
|
|
559
526
|
},
|
|
560
527
|
});
|
|
561
528
|
}
|
|
562
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
563
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
529
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: CommentsComponent, isStandalone: true, selector: "rolatech-comments", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\" id=\"comment\">\n <rolatech-comments-header (comment)=\"onComment($event)\" [total]=\"total\"></rolatech-comments-header>\n @for (item of comments; track $index) {\n <rolatech-comment-item [item]=\"item\"></rolatech-comment-item>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "component", type: CommentItemComponent, selector: "rolatech-comment-item", inputs: ["item"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: CommentsHeaderComponent, selector: "rolatech-comments-header", inputs: ["placeholder", "total"], outputs: ["totalChange", "comment"] }] }); }
|
|
564
531
|
}
|
|
565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentsComponent, decorators: [{
|
|
566
533
|
type: Component,
|
|
567
|
-
args: [{ selector: 'rolatech-comments', standalone: true, imports: [AngularCommonModule, CommentItemComponent, MatButtonModule, CommentsHeaderComponent], template: "<div class=\"flex flex-col gap-3\" id=\"comment\">\n <rolatech-comments-header (comment)=\"onComment($event)\" [total]=\"total\"></rolatech-comments-header>\n @for (item of comments; track $index) {\n <rolatech-comment-item [
|
|
568
|
-
}]
|
|
569
|
-
type: Input
|
|
570
|
-
}], itemId: [{
|
|
571
|
-
type: Input
|
|
572
|
-
}], total: [{
|
|
573
|
-
type: Input
|
|
574
|
-
}] } });
|
|
534
|
+
args: [{ selector: 'rolatech-comments', standalone: true, imports: [AngularCommonModule, CommentItemComponent, MatButtonModule, CommentsHeaderComponent], template: "<div class=\"flex flex-col gap-3\" id=\"comment\">\n <rolatech-comments-header (comment)=\"onComment($event)\" [total]=\"total\"></rolatech-comments-header>\n @for (item of comments; track $index) {\n <rolatech-comment-item [item]=\"item\"></rolatech-comment-item>\n }\n</div>\n" }]
|
|
535
|
+
}] });
|
|
575
536
|
|
|
576
537
|
/**
|
|
577
538
|
* Generated bundle index. Do not edit.
|