评论管理

index/src/app/class/Comment.ts

@@ -4,6 +4,7 @@ export class Comment {
     authorAvatarImgUrl?: string;
     content: string;
     articleID: number;
+    articleTitle: string;
     date?: string;
     responseId: string;
     pid: number;

index/src/app/view/admin/admin-comment/admin-comment.component.html

@@ -1 +1,40 @@
-<p>admin-comment works!</p>
+<div class="inner-content">
+    <nz-card nzTitle="评论管理" nzSize="small">
+        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="pageIndex"
+                  [nzPageSize]="pageSize" [nzLoading]="loading"
+                  (nzPageIndexChange)="getComment()" nzFrontPagination="false">
+            <thead>
+            <th>文章标题</th>
+            <th>评论内容</th>
+            <th>评论日期</th>
+            <th>操作</th>
+            </thead>
+            <tbody>
+            <tr *ngFor="let data of pageList.list">
+                <td nz-typography nzEllipsis="true" [nzTooltipTitle]="data.articleTitle" nzTooltipPlacement="right"
+                    nz-tooltip>{{data.articleTitle}}</td>
+                <td nz-typography nzEllipsis="true" [nzTooltipTitle]="data.content" nzTooltipPlacement="right"
+                    nz-tooltip style="min-width: 100px;max-width: 400px">
+                    <span *ngIf="!editInfo.editFocus||data.id!==editInfo.id">{{data.content}}</span>
+                    <nz-input-group *ngIf="editInfo.editFocus&&data.id===editInfo.id"
+                                    [nzPrefix]="tagIcon" style="width: 50%" (blur)="editInfo.editFocus=false">
+                        <input type="text" nz-input [(ngModel)]="editInfo.content.content" nzSize="small"
+                               [autofocus]="editInfo.editFocus&&data.id===editInfo.id"
+                               (keyup.enter)="edit()">
+                        <button nz-button (click)="edit()" nzSize="small">更新</button>
+                        <button nz-button (click)="editInfo.editFocus=false" nzSize="small">取消</button>
+                    </nz-input-group>
+                </td>
+                <td>{{data.date}}</td>
+                <td>
+                    <a (click)="editFocus(data)" class="edit-opr">编辑</a>
+                    <nz-divider nzType="vertical"></nz-divider>
+                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这篇文章吗?" nzOkText="删除" nzCancelText="点错了"
+                       (nzOnConfirm)="deleteComment(data.id)" class="del-opr">删除</a>
+                </td>
+            </tr>
+            </tbody>
+        </nz-table>
+    </nz-card>
+</div>
+<ng-template #tagIcon><i nz-icon nzType="message" nzTheme="outline"></i></ng-template>

index/src/app/view/admin/admin-comment/admin-comment.component.less

@@ -0,0 +1,3 @@
+td {
+  max-width: 300px;
+}

index/src/app/view/admin/admin-comment/admin-comment.component.ts

@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {NzMessageService} from 'ng-zorro-antd';
+import {ApiService} from '../../../api/api.service';
+import {PageList} from '../../../class/HttpReqAndResp';
+import {Comment, CommentReq} from '../../../class/Comment';
 
 @Component({
     selector: 'app-admin-comment',
@@ -7,9 +11,67 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AdminCommentComponent implements OnInit {
 
-  constructor() { }
-
-  ngOnInit(): void {
+    constructor(private apiService: ApiService, private  messageService: NzMessageService) {
     }
 
+    loading: boolean = true;
+    pageIndex: number = 1;
+    pageSize: number = 10;
+    pageList: PageList<Comment> = new PageList<Comment>();
+    editInfo = {
+        id: null,
+        content: new CommentReq(true),
+        editFocus: false,
+    }
+
+    ngOnInit(): void {
+        this.getComment();
+    }
+
+    getComment = () => this.apiService.getCommentByTypeForAdmin(true, this.pageIndex, this.pageSize).subscribe({
+        next: data => this.pageList = data.result,
+        complete: () => this.loading = false,
+        error: err => this.loading = false
+    })
+
+    deleteComment(id: number) {
+        this.loading = true;
+        this.apiService.deleteComment(id).subscribe({
+            next: () => {
+                this.messageService.success('删除评论成功');
+                this.getComment();
+            },
+            error: err => {
+                this.loading = false;
+                this.messageService.success(err.msg);
+            },
+            complete: () => this.loading = false
+        })
+    }
+
+    edit() {
+        this.editInfo.editFocus = false;
+        this.loading = true;
+        this.apiService.updateComment(this.editInfo.content).subscribe({
+            next: data => {
+                this.messageService.success('更新评论成功');
+                this.getComment();
+            },
+            error: err => {
+                this.loading = false;
+                this.messageService.success(err.msg);
+            },
+            complete: () => this.loading = false
+        })
+    }
+
+    editFocus(data: Comment) {
+        this.editInfo.id = data.id;
+        this.editInfo.content.content = data.content;
+        this.editInfo.content.id = data.id;
+        this.editInfo.content.articleID = data.articleID;
+        this.editInfo.content.pid = data.pid;
+        this.editInfo.content.responseId = data.responseId;
+        this.editInfo.editFocus = true;
+    }
 }

index/src/app/view/admin/admin-comment/admin-comment.module.ts

@@ -2,6 +2,16 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminCommentComponent} from './admin-comment.component';
+import {
+    NzButtonModule,
+    NzCardModule,
+    NzDividerModule, NzIconModule, NzInputModule,
+    NzPopconfirmModule,
+    NzTableModule,
+    NzToolTipModule,
+    NzTypographyModule
+} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -10,7 +20,17 @@ import {AdminCommentComponent} from './admin-comment.component';
     ],
     imports: [
         CommonModule,
-        RouterModule.forChild([{path: '', component: AdminCommentComponent}])
+        RouterModule.forChild([{path: '', component: AdminCommentComponent}]),
+        NzCardModule,
+        NzTableModule,
+        NzDividerModule,
+        NzPopconfirmModule,
+        NzTypographyModule,
+        NzToolTipModule,
+        NzInputModule,
+        FormsModule,
+        NzIconModule,
+        NzButtonModule
     ]
 })
 export class AdminCommentModule {

index/src/app/view/admin/auth.guard.ts

@@ -10,7 +10,7 @@ import {GlobalUserService} from '../../services/global-user.service';
 export class AuthGuard implements CanActivate {
 
     constructor(private userService: GlobalUserService, private router: Router) {
-        this.userService.refreshUserInfo();
+        // this.userService.refreshUserInfo();
     }
 
     userInfo: User;