Add button to show task addition pane.

angular.json

@@ -31,6 +31,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -99,6 +100,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
             "scripts": []

package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "~12.2.0",
+        "@angular/cdk": "^12.2.10",
         "@angular/common": "~12.2.0",
         "@angular/compiler": "~12.2.0",
         "@angular/core": "~12.2.0",
         "@angular/forms": "~12.2.0",
+        "@angular/material": "^12.2.10",
         "@angular/platform-browser": "~12.2.0",
         "@angular/platform-browser-dynamic": "~12.2.0",
         "@angular/router": "~12.2.0",
@@ -290,6 +292,28 @@
         "@angular/core": "12.2.10"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "12.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.10.tgz",
+      "integrity": "sha512-jF/tyZXcAS0i11aH8061lMf/ofKs8U52smm/q7k5llTj/NvMZl4s6o3SmdYYE/ByljvCzObz+2j3TzJS/ioDFg==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^12.0.0 || ^13.0.0-0",
+        "@angular/core": "^12.0.0 || ^13.0.0-0",
+        "rxjs": "^6.5.3 || ^7.0.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "12.2.10",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.10.tgz",
@@ -428,6 +452,22 @@
         "rxjs": "^6.5.3 || ^7.0.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "12.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.10.tgz",
+      "integrity": "sha512-iC0EA8ogpn/KJ+kr3TEfQJLYPAtrguMr21KAGwtKOOLng1HiEhH6qEqlc0PPYUUQ06i+8nJr/WWfL0ORKXh3fg==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^12.0.0 || ^13.0.0-0",
+        "@angular/cdk": "12.2.10",
+        "@angular/common": "^12.0.0 || ^13.0.0-0",
+        "@angular/core": "^12.0.0 || ^13.0.0-0",
+        "@angular/forms": "^12.0.0 || ^13.0.0-0",
+        "rxjs": "^6.5.3 || ^7.0.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "12.2.10",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.10.tgz",
@@ -16235,6 +16275,23 @@
         "tslib": "^2.2.0"
       }
     },
+    "@angular/cdk": {
+      "version": "12.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.10.tgz",
+      "integrity": "sha512-jF/tyZXcAS0i11aH8061lMf/ofKs8U52smm/q7k5llTj/NvMZl4s6o3SmdYYE/ByljvCzObz+2j3TzJS/ioDFg==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.2.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "12.2.10",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.2.10.tgz",
@@ -16324,6 +16381,14 @@
         "tslib": "^2.2.0"
       }
     },
+    "@angular/material": {
+      "version": "12.2.10",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.10.tgz",
+      "integrity": "sha512-iC0EA8ogpn/KJ+kr3TEfQJLYPAtrguMr21KAGwtKOOLng1HiEhH6qEqlc0PPYUUQ06i+8nJr/WWfL0ORKXh3fg==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "12.2.10",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.10.tgz",

package.json

@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~12.2.0",
+    "@angular/cdk": "^12.2.10",
     "@angular/common": "~12.2.0",
     "@angular/compiler": "~12.2.0",
     "@angular/core": "~12.2.0",
     "@angular/forms": "~12.2.0",
+    "@angular/material": "^12.2.10",
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
@@ -37,4 +39,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.3.5"
   }
-}
+}

src/app/add-task/add-task.component.html

@@ -1 +1,3 @@
-<p>add-task works!</p>
+<div>
+    <mat-icon>add</mat-icon>
+</div>

src/app/app.module.ts

@@ -6,6 +6,8 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MainPageComponent } from './main-page/main-page.component';
 import { AddTaskComponent } from './add-task/add-task.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatIconModule} from '@angular/material/icon'; 
 
 @NgModule({
   declarations: [
@@ -15,11 +17,12 @@ import { AddTaskComponent } from './add-task/add-task.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatIconModule
   ],
   providers: [
     CookieService,
-    
   ],
   bootstrap: [AppComponent]
 })

src/app/main-page/main-page.component.html

@@ -1,7 +1,12 @@
-<div>
+<div class="component">
     <h1>Todo List</h1>
     <div *ngFor="let task of tasks" [title]="task.creationDate">
         <h1>{{ task.title }}</h1>
         <p>{{ task.description }}</p>
     </div>
+    <div id="add-task-btn" *ngIf="!isAddingATask" (click)="startTaskAddition()">
+        <mat-icon>add</mat-icon>
+        <span>Ajouter une nouvelle tâche...</span>
+    </div>
+    <app-add-task *ngIf="isAddingATask"></app-add-task>
 </div>

src/app/main-page/main-page.component.scss

@@ -0,0 +1,21 @@
+.component {
+    #add-task-btn {
+        border-radius: 3px;
+        border-width: 1px;
+        border-color: #AAAAAA;
+        border-style: solid;
+        background-color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        padding: 10px 20px;
+        cursor: pointer;
+
+        mat-icon {
+            margin: 0 10px;
+        }
+
+        span {
+            color: #AAAAAA;
+        }
+    }
+}

src/app/main-page/main-page.component.ts

@@ -9,6 +9,7 @@ import { TaskService } from '../core/service/task.service';
 })
 export class MainPageComponent implements OnInit {
   tasks: Task[] = [];
+  isAddingATask = false;
 
   constructor(
     private _taskService: TaskService
@@ -18,4 +19,7 @@ export class MainPageComponent implements OnInit {
     this._taskService.tasks.subscribe(tasks => this.tasks = tasks);
   }
 
+  startTaskAddition(): void {
+    this.isAddingATask = true;
+  }
 }

src/index.html

@@ -6,8 +6,11 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

src/styles.scss

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }