🚧 继续写待办清单模块

src/app/todo/project-editing-dialog/project-editing-dialog.component.html

@@ -1,8 +1,15 @@
-<h2 mat-dialog-title>添加清单</h2>
+<!-- 弹窗标题 -->
+@if (isNew) {
+    <h2 mat-dialog-title>添加清单</h2>
+} @else {
+    <h2 mat-dialog-title>编辑清单</h2>
+}
+
 <mat-dialog-content class="mat-typography">
     <mat-form-field appearance="outline">
         <mat-label>名称</mat-label>
         <input matInput [(ngModel)]="name" placeholder="请输入清单名称" />
+        <mat-hint align="start">请输入清单名称，最多10字</mat-hint>
     </mat-form-field>
     <mat-dialog-actions align="end">
         <button mat-button mat-dialog-close>取消</button>

src/app/todo/project-editing-dialog/project-editing-dialog.component.ts

@@ -5,6 +5,8 @@ import {MatButtonModule} from '@angular/material/button'
 import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog'
 import {MatFormFieldModule} from '@angular/material/form-field'
 import {MatInputModule} from '@angular/material/input'
+import {ProjectEditingDialogInputData} from './project-editing-dialog.model'
+import {TodoService} from '../todo-home/todo.service'
 
 @Component({
   selector: 'app-project-editing-dialog',
@@ -16,13 +18,20 @@ import {MatInputModule} from '@angular/material/input'
 export class ProjectEditingDialogComponent {
   constructor(
     public dialogRef: MatDialogRef<ProjectEditingDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+    @Inject(MAT_DIALOG_DATA) public data: ProjectEditingDialogInputData,
+    private todoService: TodoService
+  ) {
+    this.isNew = !data.id
+    this.name = data.name
+  }
+
+  /** 是否是“新建” */
+  isNew: boolean = true
 
   /** 清单名称 */
   name: string = ''
 
   confirm() {
-    console.log(`点击了「确定」, name=${this.name}`)
+    this.todoService.addProject(this.name).subscribe((data) => console.log(data))
   }
 }

src/app/todo/project-editing-dialog/project-editing-dialog.model.ts

@@ -0,0 +1,7 @@
+/** 打开弹窗时，传递的数据 */
+export interface ProjectEditingDialogInputData {
+  /** 项目 ID */
+  id: number
+  /** 项目名称 */
+  name: string
+}

src/app/todo/todo-home/todo-home.component.ts

@@ -3,9 +3,9 @@ import {Component, OnInit} from '@angular/core'
 import {MatButtonModule} from '@angular/material/button'
 import {MatDialog, MatDialogModule} from '@angular/material/dialog'
 import {MatIconModule} from '@angular/material/icon'
+import {ProjectEditingDialogComponent} from '../project-editing-dialog/project-editing-dialog.component'
 import {Project, Tag} from './todo.model'
 import {TodoService} from './todo.service'
-import {ProjectEditingDialogComponent} from '../project-editing-dialog/project-editing-dialog.component'
 
 @Component({
   selector: 'app-todo-home',
@@ -36,7 +36,7 @@ export class TodoHomeComponent implements OnInit {
   /** 打开项目编辑弹窗 */
   openProjectEditingDialog() {
     const dialogRef = this.dialog.open(ProjectEditingDialogComponent, {
-      data: {name: 'mark', id: 111},
+      data: {},
     })
 
     dialogRef.afterClosed().subscribe((data) => console.log(data))

src/app/todo/todo-home/todo.service.ts

@@ -1,10 +1,19 @@
+import {HttpClient} from '@angular/common/http'
 import {Injectable} from '@angular/core'
-import {Project, Tag} from './todo.model'
 import {of} from 'rxjs'
+import {Project, Tag} from './todo.model'
 
 @Injectable({providedIn: 'root'})
 export class TodoService {
-  constructor() {}
+  constructor(private http: HttpClient) {}
+
+  /**
+   * 添加待办清单
+   * @param name 清单名称
+   */
+  addProject(name: string) {
+    return this.http.post('/todo/project', {name})
+  }
 
   getProjectList() {
     const list: Project[] = [