From 204c8e2a7ebd251345a2f272dd3e319d92f30b83 Mon Sep 17 00:00:00 2001
From: Juarez Filho <juarezpaf@gmail.com>
Date: Sun, 6 May 2018 04:33:22 +0100
Subject: [PATCH] fix(challenge): update title and description

---
 .../notes/components/note/note.component.html | 29 +++++++++--
 .../notes/components/note/note.component.ts   | 16 ++++++
 src/styles.scss                               | 49 +++++++++++++++++--
 3 files changed, 84 insertions(+), 10 deletions(-)

diff --git a/src/app/notes/components/note/note.component.html b/src/app/notes/components/note/note.component.html
index 6280386..972f64c 100644
--- a/src/app/notes/components/note/note.component.html
+++ b/src/app/notes/components/note/note.component.html
@@ -8,15 +8,34 @@
       <mat-card-title>
         <button mat-icon-button type="button" (click)="navigateToPreviousPage() " class="btn-back">
           <mat-icon aria-label="An icon-button with a arrow icon">keyboard_arrow_left</mat-icon>
-        </button> 
-        {{note.title}}
+        </button>
+
+        <textarea 
+          matInput 
+          [value]="note.title"
+          matTextareaAutosize 
+          matAutosizeMinRows="1"
+          matAutosizeMaxRows="2"
+          placeholder="Title"
+          (blur)="updateNoteTitle($event)"></textarea>
       </mat-card-title>
     </mat-card-header>
 
     <mat-card-content>
-      <p *ngIf="note.description">
-        <span>{{note.description}}</span>
-      </p>
+      <div class="note-field">
+        <mat-form-field
+          floatLabel="never"
+          color="accent">
+          <textarea matInput 
+                    placeholder="Add note..." 
+                    matTextareaAutosize 
+                    matAutosizeMinRows="2"
+                    matAutosizeMaxRows="5"
+                    [value]="note.description || null"
+                    (blur)="updateNoteDescription($event)"></textarea>
+        </mat-form-field>
+      </div>
+
       <span *ngIf="note.dueDate" class="note-metadata note-duedate">
         <mat-icon>flag</mat-icon> {{note.dueDate | date}}
 
diff --git a/src/app/notes/components/note/note.component.ts b/src/app/notes/components/note/note.component.ts
index 44e9eaf..0babd5e 100644
--- a/src/app/notes/components/note/note.component.ts
+++ b/src/app/notes/components/note/note.component.ts
@@ -65,4 +65,20 @@ export class NoteComponent implements OnInit {
       dueDate: event.value
     });
   }
+
+  updateNoteDescription(e) {
+    if (e.target.value.trim().length) {
+      this.noteDoc.update({
+        description: e.target.value
+      });
+    }
+  }
+
+  updateNoteTitle(e) {
+    if (e.target.value.trim().length) {
+      this.noteDoc.update({
+        title: e.target.value
+      });
+    }
+  }
 }
diff --git a/src/styles.scss b/src/styles.scss
index cadd1b4..ac41593 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -73,6 +73,20 @@ body {
         color: #FFF;
       }
     }
+
+    .mat-card {
+      .mat-card-header-text {
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    @media screen and (max-width: $break-small) {
+      .mat-card-avatar {
+        height: 30px;
+        width: 30px;
+      }
+    }
   }
 
   app-note {
@@ -96,6 +110,36 @@ body {
     }
   }
 
+  .note-field {
+    .mat-form-field {
+      display: block;
+      font-size: 16px;
+  
+      .mat-form-field-wrapper {
+        padding: 16px;
+  
+        .mat-form-field-infix {
+          border: 0 none;
+          margin: 0;
+          padding: 0;
+        }
+      }
+  
+      .mat-form-field-underline {
+        display: none;
+      }
+
+      @media screen and (max-width: $break-small) {
+        font-size: 12px;
+
+        .mat-form-field-wrapper {
+          padding-left: 12px;
+          padding-right: 12px;
+        }
+      }
+    }
+  }
+
   .mat-card {
     max-width: 80%;
     margin: 2em auto;
@@ -144,11 +188,6 @@ body {
       background-color: rgba(0,0,0,.03);
       padding: 24px 8px;
       
-      .mat-card-header-text {
-        align-items: center;
-        display: flex;
-      }
-      
       .mat-card-title {
         color: rgba(0,0,0,.54);
         font-size: 20px;