@rolatech/angular-comment 17.1.0 → 17.2.1
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 +8 -8
- package/fesm2022/rolatech-angular-comment.mjs +75 -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 +3 -3
- 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';
|
|
@@ -209,10 +209,10 @@ class CommentService extends BaseService {
|
|
|
209
209
|
withCredentials: true,
|
|
210
210
|
});
|
|
211
211
|
}
|
|
212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
213
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.
|
|
212
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
213
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentService, providedIn: 'root' }); }
|
|
214
214
|
}
|
|
215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentService, decorators: [{
|
|
216
216
|
type: Injectable,
|
|
217
217
|
args: [{ providedIn: 'root' }]
|
|
218
218
|
}] });
|
|
@@ -220,10 +220,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
220
220
|
class CommentActionComponent {
|
|
221
221
|
constructor() {
|
|
222
222
|
this.commentService = inject(CommentService);
|
|
223
|
-
this.placeholder = '请输入回复内容';
|
|
224
|
-
this.
|
|
225
|
-
this.
|
|
226
|
-
this.
|
|
223
|
+
this.placeholder = input('请输入回复内容');
|
|
224
|
+
this.data = input.required();
|
|
225
|
+
this.reply = output();
|
|
226
|
+
this.thumbsUp = output();
|
|
227
|
+
this.thumbsDown = output();
|
|
227
228
|
this.show = false;
|
|
228
229
|
this.content = '';
|
|
229
230
|
this.loading = false;
|
|
@@ -235,12 +236,10 @@ class CommentActionComponent {
|
|
|
235
236
|
onReply() {
|
|
236
237
|
this.loading = true;
|
|
237
238
|
this.reply.emit(this.content);
|
|
238
|
-
this.commentService.onCommentLoading.subscribe({
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
this.content = '';
|
|
243
|
-
},
|
|
239
|
+
this.commentService.onCommentLoading.subscribe((res) => {
|
|
240
|
+
this.loading = res;
|
|
241
|
+
this.show = false;
|
|
242
|
+
this.content = '';
|
|
244
243
|
});
|
|
245
244
|
}
|
|
246
245
|
onThumbsUp() {
|
|
@@ -249,37 +248,31 @@ class CommentActionComponent {
|
|
|
249
248
|
onThumbsDown() {
|
|
250
249
|
this.thumbsDown.emit();
|
|
251
250
|
}
|
|
252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
252
|
+
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
253
|
}
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentActionComponent, decorators: [{
|
|
256
255
|
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
|
-
}] } });
|
|
256
|
+
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"] }]
|
|
257
|
+
}] });
|
|
269
258
|
|
|
270
259
|
class ReplyItemComponent {
|
|
271
260
|
constructor() {
|
|
272
261
|
this.commentService = inject(CommentService);
|
|
273
|
-
this.commentId =
|
|
274
|
-
this.
|
|
262
|
+
this.commentId = input.required();
|
|
263
|
+
this.item = input.required();
|
|
264
|
+
this.replied = output();
|
|
275
265
|
this.show = false;
|
|
266
|
+
effect(() => {
|
|
267
|
+
this.reply = this.item();
|
|
268
|
+
});
|
|
276
269
|
}
|
|
277
270
|
onReply(content) {
|
|
278
271
|
const data = {
|
|
279
272
|
replyId: this.reply.id,
|
|
280
273
|
content,
|
|
281
274
|
};
|
|
282
|
-
this.commentService.reply(this.commentId, data).subscribe({
|
|
275
|
+
this.commentService.reply(this.commentId(), data).subscribe({
|
|
283
276
|
next: (res) => {
|
|
284
277
|
this.commentService.onCommentLoading.emit(false);
|
|
285
278
|
this.replied.emit(res);
|
|
@@ -310,28 +303,22 @@ class ReplyItemComponent {
|
|
|
310
303
|
},
|
|
311
304
|
});
|
|
312
305
|
}
|
|
313
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
314
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
306
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ReplyItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
307
|
+
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
308
|
}
|
|
316
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ReplyItemComponent, decorators: [{
|
|
317
310
|
type: Component,
|
|
318
311
|
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
|
-
}] } });
|
|
312
|
+
}], ctorParameters: () => [] });
|
|
326
313
|
|
|
327
314
|
class CommentRepliesComponent {
|
|
328
315
|
constructor() {
|
|
329
316
|
this.commentService = inject(CommentService);
|
|
330
|
-
this.total = 0;
|
|
331
|
-
this.replies = [];
|
|
332
|
-
this.commentId =
|
|
333
|
-
this.replied =
|
|
334
|
-
this.fetch =
|
|
317
|
+
this.total = model(0);
|
|
318
|
+
this.replies = model([]);
|
|
319
|
+
this.commentId = input.required();
|
|
320
|
+
this.replied = output();
|
|
321
|
+
this.fetch = output();
|
|
335
322
|
this.expand = false;
|
|
336
323
|
this.loading = false;
|
|
337
324
|
this.fetched = false;
|
|
@@ -340,37 +327,30 @@ class CommentRepliesComponent {
|
|
|
340
327
|
this.expand = !this.expand;
|
|
341
328
|
if (!this.fetched) {
|
|
342
329
|
this.fetched = true;
|
|
343
|
-
this.fetch.emit(this.commentId);
|
|
330
|
+
this.fetch.emit(this.commentId());
|
|
344
331
|
}
|
|
345
332
|
}
|
|
346
333
|
onItemReplied(reply) {
|
|
347
|
-
this.total
|
|
348
|
-
this.replies.push(reply);
|
|
334
|
+
this.total.set(this.total() + 1);
|
|
335
|
+
this.replies().push(reply);
|
|
349
336
|
}
|
|
350
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
337
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentRepliesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
338
|
+
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
339
|
}
|
|
353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentRepliesComponent, decorators: [{
|
|
354
341
|
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
|
-
}] } });
|
|
342
|
+
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" }]
|
|
343
|
+
}] });
|
|
367
344
|
|
|
368
345
|
class CommentItemComponent {
|
|
369
346
|
constructor() {
|
|
370
347
|
this.commentService = inject(CommentService);
|
|
348
|
+
this.item = input.required();
|
|
371
349
|
this.show = false;
|
|
372
350
|
this.loading = false;
|
|
373
|
-
|
|
351
|
+
effect(() => {
|
|
352
|
+
this.comment = this.item();
|
|
353
|
+
});
|
|
374
354
|
}
|
|
375
355
|
ngOnInit() {
|
|
376
356
|
// this.countRepliesByCommentId(this.comment.id!);
|
|
@@ -435,10 +415,10 @@ class CommentItemComponent {
|
|
|
435
415
|
},
|
|
436
416
|
});
|
|
437
417
|
}
|
|
438
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
439
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
418
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
419
|
+
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
420
|
}
|
|
441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentItemComponent, decorators: [{
|
|
442
422
|
type: Component,
|
|
443
423
|
args: [{ selector: 'rolatech-comment-item', standalone: true, imports: [
|
|
444
424
|
CommonModule,
|
|
@@ -452,26 +432,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
452
432
|
TimePipe,
|
|
453
433
|
MatMenuModule,
|
|
454
434
|
], 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
|
-
}] } });
|
|
435
|
+
}], ctorParameters: () => [] });
|
|
458
436
|
|
|
459
437
|
class CommentsHeaderComponent {
|
|
460
438
|
constructor() {
|
|
461
439
|
this.commentService = inject(CommentService);
|
|
462
|
-
this.
|
|
463
|
-
this.
|
|
464
|
-
this.
|
|
465
|
-
this.comment = new EventEmitter();
|
|
440
|
+
this.placeholder = input('请输入评论内容');
|
|
441
|
+
this.total = model(0);
|
|
442
|
+
this.comment = output();
|
|
466
443
|
this.content = '';
|
|
467
444
|
this.show = false;
|
|
468
445
|
this.loading = false;
|
|
469
446
|
}
|
|
470
447
|
ngOnInit() {
|
|
471
|
-
this.commentService.onComment.subscribe({
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
},
|
|
448
|
+
this.commentService.onComment.subscribe((res) => {
|
|
449
|
+
// this.total++;
|
|
450
|
+
this.total.set(this.total() + 1);
|
|
475
451
|
});
|
|
476
452
|
}
|
|
477
453
|
onFocus(event) {
|
|
@@ -484,20 +460,18 @@ class CommentsHeaderComponent {
|
|
|
484
460
|
onComment() {
|
|
485
461
|
this.loading = true;
|
|
486
462
|
this.comment.emit(this.content);
|
|
487
|
-
this.commentService.onCommentLoading.subscribe({
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
this.content = '';
|
|
492
|
-
},
|
|
463
|
+
this.commentService.onCommentLoading.subscribe((res) => {
|
|
464
|
+
this.loading = res;
|
|
465
|
+
this.show = false;
|
|
466
|
+
this.content = '';
|
|
493
467
|
});
|
|
494
468
|
}
|
|
495
469
|
fetchByComments() { }
|
|
496
470
|
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.
|
|
471
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentsHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
472
|
+
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
473
|
}
|
|
500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentsHeaderComponent, decorators: [{
|
|
501
475
|
type: Component,
|
|
502
476
|
args: [{ selector: 'rolatech-comments-header', standalone: true, imports: [
|
|
503
477
|
AngularCommonModule,
|
|
@@ -509,23 +483,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImpor
|
|
|
509
483
|
MatInputModule,
|
|
510
484
|
CommentActionComponent,
|
|
511
485
|
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
|
-
}] } });
|
|
486
|
+
], 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"] }]
|
|
487
|
+
}] });
|
|
522
488
|
|
|
523
489
|
class CommentsComponent {
|
|
524
490
|
constructor() {
|
|
525
491
|
this.commentService = inject(CommentService);
|
|
526
492
|
this.authUserService = inject(AuthUserService);
|
|
493
|
+
this.itemId = input.required();
|
|
527
494
|
this.comments = [];
|
|
528
|
-
this.itemId = '';
|
|
529
495
|
this.total = 0;
|
|
530
496
|
this.show = false;
|
|
531
497
|
this.content = '';
|
|
@@ -544,12 +510,11 @@ class CommentsComponent {
|
|
|
544
510
|
}
|
|
545
511
|
onComment(content) {
|
|
546
512
|
const data = {
|
|
547
|
-
itemId: this.itemId,
|
|
513
|
+
itemId: this.itemId(),
|
|
548
514
|
content,
|
|
549
515
|
};
|
|
550
516
|
this.commentService.createComment(data).subscribe({
|
|
551
517
|
next: (res) => {
|
|
552
|
-
this.comments = this.comments ? this.comments : [];
|
|
553
518
|
this.comments.unshift(res);
|
|
554
519
|
this.commentService.onCommentLoading.emit(false);
|
|
555
520
|
this.commentService.onComment.emit(true);
|
|
@@ -559,19 +524,13 @@ class CommentsComponent {
|
|
|
559
524
|
},
|
|
560
525
|
});
|
|
561
526
|
}
|
|
562
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
563
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.
|
|
527
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
528
|
+
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
529
|
}
|
|
565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
530
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: CommentsComponent, decorators: [{
|
|
566
531
|
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
|
-
}] } });
|
|
532
|
+
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" }]
|
|
533
|
+
}] });
|
|
575
534
|
|
|
576
535
|
/**
|
|
577
536
|
* Generated bundle index. Do not edit.
|