From 5d5cbf297506c6acfc3022e1d50ad3bb7a338061 Mon Sep 17 00:00:00 2001
From: Muhammad Asad <muhammad.al.asad@contour-software.com>
Date: Fri, 4 Mar 2022 09:18:57 +0500
Subject: [PATCH] makes a form

---
 package-lock.json                      |  5 ++-
 src/app/app.component.html             | 10 +++++
 src/app/app.module.ts                  |  2 +
 src/app/common/models/course.ts        |  8 ++++
 src/app/courses/courses.component.html | 61 ++++++++++++++++++++++++--
 src/app/courses/courses.component.ts   | 37 +++++++++++++++-
 src/app/home/home.component.html       | 13 ++++++
 src/app/home/home.component.ts         |  6 ++-
 8 files changed, 136 insertions(+), 6 deletions(-)
 create mode 100644 src/app/common/models/course.ts

diff --git a/package-lock.json b/package-lock.json
index 8fa252e..63c0bed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "angular13-fundamentals-workshop",
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "~13.0.0",
@@ -15824,7 +15825,9 @@
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
-      "requires": {}
+      "requires": {
+        "ajv": "^8.0.0"
+      }
     },
     "ansi-align": {
       "version": "3.0.1",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 028469b..9d88249 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -19,6 +19,16 @@
 <mat-sidenav-container>
   <mat-sidenav #sidenav mode="side" opened class="app-sidenav">
     <!-- Sidenav Menu -->
+    <nav>
+      <a mat-button class="nav-link" *ngFor="let link of links " [routerLink]="link.path" 
+      routerLinkActive="active">
+        <mat-icon>
+          {{link.icon}}
+        </mat-icon>
+        {{link.title}}
+
+      </a>
+    </nav>
   </mat-sidenav>
 
   <div class="container">
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d2c7873..5ee0b77 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,10 +8,12 @@ import { AppComponent } from './app.component';
 import { MaterialModule } from './material.module';
 import { HomeComponent } from './home/home.component';
 import { CoursesComponent } from './courses/courses.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   imports: [
     BrowserModule,
+    FormsModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     MaterialModule,
diff --git a/src/app/common/models/course.ts b/src/app/common/models/course.ts
new file mode 100644
index 0000000..0b9fbb9
--- /dev/null
+++ b/src/app/common/models/course.ts
@@ -0,0 +1,8 @@
+export interface Course {
+    id: string,
+    title: string,
+    description: string,
+    percentComplete:number,
+    favourite: boolean
+
+}
diff --git a/src/app/courses/courses.component.html b/src/app/courses/courses.component.html
index 808c586..8d1798c 100644
--- a/src/app/courses/courses.component.html
+++ b/src/app/courses/courses.component.html
@@ -7,9 +7,22 @@
             </mat-card-title>
         </mat-card-header>
         <mat-card-content>
+          <mat-list>
+              <mat-list-item *ngFor="let course of courses" (click)="selectCourse(course)">
+                  <h3 matLine>{{course.title}} </h3>
+                  <p matLine>
+                      {{course.description}}
+                  </p>
+                  <button mat-icon-button color="warn" (click)="deleteCourse(course.id); $event.stopImmediatePropagation()">
+                      <mat-icon>delete</mat-icon>
+                  </button>
 
+              </mat-list-item>
+          </mat-list>
             <!-- COURSES LIST -->
 
+            
+            
         </mat-card-content>
         </mat-card>
     </div>
@@ -18,19 +31,61 @@
         <mat-card>
             <mat-card-header>
                 <mat-card-title>
-                    Select Course
+                    <span *ngIf="selectedCourse?.id; else elseBlock">
+                        {{originalTitle | titlecase}}
+                    </span>
+                    <ng-template #elseBlock> Select a course</ng-template>
                 </mat-card-title>
             </mat-card-header>
-            <mat-card-content>
-            
+            <form #form="ngForm" (submit)="saveCourse(selectedCourse)">
+            <mat-card-content> 
+                <mat-form-field class="full-width">
+                    <input matInput placeholder="Title" [(ngModel)]=" selectedCourse.title " 
+                    required 
+                    type="text"
+                    name="title"
+                    >
+                </mat-form-field>
+                <mat-form-field class="full-width">
+                    <textarea matInput placeholder="Description" [(ngModel)]=" selectedCourse.description " 
+                    required 
+                    type="text"
+                    name="Description"
+                    >
+                </textarea>
+                </mat-form-field>
             <!-- COURSE FORM -->
+                <section class="full-width">
+                    <h4>
+                        {{selectedCourse.percentComplete}}% Complete
+                    </h4>
+                    <mat-slider class="full-width"
+                    min="0"
+                    max="100"
+                    thumbLabel
+                    name="percentComplete"
+                    [(ngModel)]=" selectedCourse.percentComplete">
+
+                    </mat-slider>
 
+                </section>
+                <section>
+                    <mat-checkbox [(ngModel)]=" selectedCourse.favourite" name="favourite">
+                        Favourite
+                    </mat-checkbox>
+                </section>
             </mat-card-content>
             <mat-card-actions>
 
             <!-- COURSE ACTIONS -->
+            <button type="submit" [disabled]="form.invalid" mat-button color="primary">Save</button>
+            <button type="button" mat-button (click)="reset()">Cancel</button>
 
             </mat-card-actions>
+        </form>
+        <hr>
+        <pre> {{form.value | json}}</pre>
+        <pre> {{form.valid | json}}</pre>
         </mat-card>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/courses/courses.component.ts b/src/app/courses/courses.component.ts
index 66ceeea..81482a0 100644
--- a/src/app/courses/courses.component.ts
+++ b/src/app/courses/courses.component.ts
@@ -1,4 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { Course } from '../common/models/course';
+const emptyCourse: Course ={
+  id:null,
+  title: '',
+  description: '',
+  percentComplete: 26,
+  favourite: false
+}
 
 @Component({
   selector: 'app-courses',
@@ -6,19 +14,46 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./courses.component.scss']
 })
 export class CoursesComponent implements OnInit {
+
   courses = [
+
+    // 1. render courses in a list
+    // 2. seoect a course
+    // 3. render a selected course
     {
       id: 1,
       title: 'Angular 13 Fundamentals',
       description: 'Learn the fundamentals of Angular 13',
       percentComplete: 26,
       favorite: true
+    },
+    {
+      id: 2,
+      title: 'Js Course',
+      description: 'Learn the fundamentals JS',
+      percentComplete: 76,
+      favorite: true
     }
   ];
+   selectedCourse = emptyCourse;
+   originalTitle='';
 
   constructor() { }
 
   ngOnInit(): void {
   }
-
+  selectCourse(course){
+    // ...course is the soluton of shared mutable
+    this.selectedCourse = {...course};
+    this.originalTitle= course.title;
+  }
+  deleteCourse(courseId){
+    console.log('Delete Course', courseId);
+  }
+  saveCourse(course){
+    console.log('save Course',course);
+  }
+  reset(){
+    this.selectCourse({...emptyCourse});
+  }
 }
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index f426908..ce8c75e 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -4,5 +4,18 @@
   </mat-card-header>
   <mat-card-content>
     <!-- LESSON LIST -->
+   
+      <mat-list>
+          <mat-list-item *ngFor="let lesson of courseLessons" (click)="selectLesson(lesson)">
+            
+             
+                  {{lesson.title}}
+              
+              
+
+          </mat-list-item>
+      </mat-list>
+      <hr>
+      <pre> {{selectedLesson.title}}</pre>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 8685181..749fd3a 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -16,8 +16,12 @@ export class HomeComponent implements OnInit {
     { title: 'Angular Routing' },
     { title: 'Unit Testing Fundamentals' },
   ];
-
+    selectedLesson:any;
   constructor() {}
 
   ngOnInit() {}
+
+  selectLesson(lesson){
+    this.selectedLesson = lesson; 
+  }
 }