From 450a96d2de4eaca89727e32a386b9fee46be29b1 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sun, 7 Apr 2024 13:14:32 +0200
Subject: [PATCH] validate date input

---
 .../add-task/add-task.component.html          | 259 ++++++++++--------
 .../add-task/add-task.component.scss          |  53 ++++
 .../components/add-task/add-task.component.ts |  37 ++-
 3 files changed, 234 insertions(+), 115 deletions(-)

diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html
index b2d9504..f32c12e 100644
--- a/src/app/components/add-task/add-task.component.html
+++ b/src/app/components/add-task/add-task.component.html
@@ -7,125 +7,158 @@
     (ngSubmit)="onSubmit(taskForm)"
     #taskForm="ngForm"
     onsubmit="return false"
-    class="content"
   >
-    <div class="left-side">
-      <div class="title">
-        <p>Title<span class="red-dot">*</span></p>
-        <input
-          type="text"
-          id="title"
-          name="title"
-          #title="ngModel"
-          (input)="saveTaskData()"
-          placeholder="{{ taskData.title }}"
-          [(ngModel)]="taskData.title"
-          autocomplete="off"
-          required
-        />
-        <div class="error-msg">
-          @if (!title.valid && title.touched) {
-          <p>You must enter a title.</p>
-          }
+    <div class="content">
+      <div class="left-side">
+        <div class="title">
+          <p>Title<span class="red-dot">*</span></p>
+          <input
+            type="text"
+            id="title"
+            name="title"
+            #title="ngModel"
+            (input)="saveTaskData()"
+            placeholder="{{
+              taskData.title ? taskData.title : 'Enter a title'
+            }}"
+            [(ngModel)]="taskData.title"
+            autocomplete="off"
+            required
+          />
+          <div class="error-msg">
+            @if (!title.valid && title.touched) {
+            <p>You must enter a title.</p>
+            }
+          </div>
+        </div>
+        <div class="description">
+          <p>Description<span class="red-dot">*</span></p>
+          <textarea
+            id="description"
+            rows="6"
+            name="description"
+            #description="ngModel"
+            minlength="10"
+            (input)="saveTaskData()"
+            placeholder="{{
+              taskData.description
+                ? taskData.description
+                : 'Enter a description'
+            }}"
+            [(ngModel)]="taskData.description"
+            autocomplete="off"
+            required
+          ></textarea>
+          <div class="error-msg">
+            @if (!description.valid && description.touched) {
+            <p>You must enter a description. (min. 10 letters)</p>
+            }
+          </div>
         </div>
       </div>
-      <div class="description">
-        <p>Description<span class="red-dot">*</span></p>
-        <textarea
-          id="description"
-          rows="6"
-          name="description"
-          #description="ngModel"
-          minlength="10"
-          (input)="saveTaskData()"
-          placeholder="{{ taskData.description }}"
-          [(ngModel)]="taskData.description"
-          autocomplete="off"
-          required
-        ></textarea>
-        <div class="error-msg">
-          @if (!description.valid && description.touched) {
-          <p>You must enter a description. (min. 10 letters)</p>
-          }
+      <div class="middle-spacer"><div class="line"></div></div>
+      <div class="right-side">
+        <div class="date">
+          <p>Due date<span class="red-dot">*</span></p>
+          <input
+            type="date"
+            id="date"
+            name="date"
+            #date="ngModel"
+            (input)="checkDateInput()"
+            placeholder="{{ taskData.date }}"
+            [(ngModel)]="taskData.date"
+            autocomplete="off"
+            required
+          />
+          <div class="error-msg">
+            @if (!date.valid && date.touched) {
+            <p>You must enter a date.</p>
+            } @if (dateInPast && date.valid) {
+            <p>The date must be in the future</p>
+            }
+          </div>
+        </div>
+        <div class="priority">
+          <p>Prio<span class="red-dot">*</span></p>
+          <div class="btns">
+            <button
+              type="button"
+              class="btn"
+              [ngClass]="{
+                'btn-active': taskData.priority == 'urgent'
+              }"
+              [ngStyle]="{
+                'background-color':
+                  taskData.priority == 'urgent' ? 'red' : 'white'
+              }"
+              (click)="tooglePriority('urgent')"
+            >
+              <div class="btn-text">
+                <span>Urgent</span>
+                <img src="./../../../assets/img/urgent.svg" alt="" />
+              </div>
+            </button>
+            <button
+              type="button"
+              class="btn"
+              [ngClass]="{
+                'btn-active': taskData.priority == 'medium'
+              }"
+              [ngStyle]="{
+                'background-color':
+                  taskData.priority == 'medium' ? 'orange' : 'white'
+              }"
+              (click)="tooglePriority('medium')"
+            >
+              <div class="btn-text">
+                <span>Medium</span>
+                <img src="./../../../assets/img/medium.svg" alt="" />
+              </div>
+            </button>
+            <button
+              type="button"
+              class="btn"
+              [ngClass]="{
+                'btn-active': taskData.priority == 'low'
+              }"
+              [ngStyle]="{
+                'background-color':
+                  taskData.priority == 'low' ? 'green' : 'white'
+              }"
+              (click)="tooglePriority('low')"
+            >
+              <div class="btn-text">
+                <span>Low</span>
+                <img src="./../../../assets/img/low.svg" alt="" />
+              </div>
+            </button>
+          </div>
         </div>
       </div>
     </div>
-    <div class="middle-spacer"><div class="line"></div></div>
-    <div class="right-side">
-      <div class="date">
-        <p>Due date<span class="red-dot">*</span></p>
-        <input
-          type="date"
-          id="date"
-          name="date"
-          #date="ngModel"
-          (input)="saveTaskData()"
-          placeholder="{{ taskData.date }}"
-          [(ngModel)]="taskData.date"
-          autocomplete="off"
-          required
-        />
-        <div class="error-msg">
-          @if (!date.valid && date.touched) {
-          <p>You must enter a date.</p>
-          }
-        </div>
-      </div>
-      <div class="priority">
-        <p>Prio<span class="red-dot">*</span></p>
-        <div class="btns">
-          <button
-            type="button"
-            class="btn"
-            [ngClass]="{
-              'btn-active': taskData.priority == 'urgent'
-            }"
-            [ngStyle]="{
-              'background-color':
-                taskData.priority == 'urgent' ? 'red' : 'white'
-            }"
-            (click)="tooglePriority('urgent')"
-          >
-            <div class="btn-text">
-              <span>Urgent</span>
-              <img src="./../../../assets/img/urgent.svg" alt="" />
-            </div>
-          </button>
-          <button
-            type="button"
-            class="btn"
-            [ngClass]="{
-              'btn-active': taskData.priority == 'medium'
-            }"
-            [ngStyle]="{
-              'background-color':
-                taskData.priority == 'medium' ? 'orange' : 'white'
-            }"
-            (click)="tooglePriority('medium')"
-          >
-            <div class="btn-text">
-              <span>Medium</span>
-              <img src="./../../../assets/img/medium.svg" alt="" />
-            </div>
-          </button>
-          <button
-            type="button"
-            class="btn"
-            [ngClass]="{
-              'btn-active': taskData.priority == 'low'
-            }"
-            [ngStyle]="{
-              'background-color': taskData.priority == 'low' ? 'green' : 'white'
-            }"
-            (click)="tooglePriority('low')"
-          >
-            <div class="btn-text">
-              <span>Low</span>
-              <img src="./../../../assets/img/low.svg" alt="" />
-            </div>
-          </button>
-        </div>
-      </div>
+    <div class="form-buttons">
+      <input
+        class="btn-clear"
+        type="button"
+        value="Clear"
+        (click)="removeTaskData()"
+      />
+      <input
+        class="btn-submit"
+        type="submit"
+        value="Create Task"
+        [disabled]="
+          title.invalid ||
+          !taskData.title ||
+          description.invalid ||
+          !taskData.description ||
+          date.invalid ||
+          !taskData.date ||
+          !taskData.priority ||
+          dateInPast
+        "
+      />
     </div>
   </form>
 </section>
diff --git a/src/app/components/add-task/add-task.component.scss b/src/app/components/add-task/add-task.component.scss
index f87eefe..ea449b2 100644
--- a/src/app/components/add-task/add-task.component.scss
+++ b/src/app/components/add-task/add-task.component.scss
@@ -111,3 +111,56 @@ p {
 .btn:hover {
   box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
 }
+
+/*------------- SUBMIT BUTTON -------------*/
+
+.form-buttons {
+  display: flex;
+  justify-content: end;
+}
+
+.btn-submit {
+  width: 183px;
+  height: 56px;
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--black) !important;
+  background-color: var(--light-gray);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  &:hover:not(:disabled) {
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+    background-color: var(--light-blue) !important;
+    border: 1px solid var(--light-blue) !important;
+    cursor: pointer;
+  }
+  &:not(:disabled) {
+    background-color: var(--very-dark-blue) !important;
+    color: var(--white);
+  }
+  &:hover {
+    cursor: default;
+  }
+}
+
+.btn-clear {
+  width: 110px;
+  height: 56px;
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  color: var(--black);
+  background-color: var(--white);
+  border: 1px solid var(--black);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    color: var(--light-blue);
+    border-color: var(--light-bluek);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}
diff --git a/src/app/components/add-task/add-task.component.ts b/src/app/components/add-task/add-task.component.ts
index 0bb9d09..586c70a 100644
--- a/src/app/components/add-task/add-task.component.ts
+++ b/src/app/components/add-task/add-task.component.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { FormsModule, NgForm } from '@angular/forms';
+import { Component, ViewChild } from '@angular/core';
+import { FormsModule, NgForm, NgModel } from '@angular/forms';
 
 @Component({
   selector: 'app-add-task',
@@ -10,7 +10,11 @@ import { FormsModule, NgForm } from '@angular/forms';
   styleUrl: './add-task.component.scss',
 })
 export class AddTaskComponent {
+  @ViewChild('title', { static: true }) titleField!: NgModel;
+  @ViewChild('description', { static: true }) descriptionField!: NgModel;
+
   currentDate: string = new Date().toISOString().split('T')[0];
+  dateInPast: boolean = false;
 
   taskData = {
     title: '',
@@ -26,6 +30,17 @@ export class AddTaskComponent {
     }
   }
 
+  checkDateInput() {
+    const currentDateForm = this.taskData.date.replaceAll('-', '');
+    const currentDate = new Date()
+      .toISOString()
+      .split('T')[0]
+      .replaceAll('-', '');
+    currentDateForm < currentDate
+      ? (this.dateInPast = true)
+      : (this.dateInPast = false);
+  }
+
   tooglePriority(prio: string) {
     this.taskData.priority !== prio
       ? (this.taskData.priority = prio)
@@ -37,9 +52,27 @@ export class AddTaskComponent {
     localStorage.setItem('taskData', JSON.stringify(this.taskData));
   }
 
+  removeTaskData() {
+    localStorage.removeItem('taskData');
+    this.untouchedFormFields();
+    this.clearFormData();
+  }
+
+  untouchedFormFields() {
+    this.titleField.control.markAsUntouched();
+    this.descriptionField.control.markAsUntouched();
+  }
+
+  clearFormData() {
+    this.taskData.title = '';
+    this.taskData.description = '';
+    this.taskData.date = this.currentDate;
+  }
+
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
       console.log('Send completed');
+      this.removeTaskData();
     }
   }
 }