From f6aa08a3a7a338ef350def0e5989580569d4af10 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Mon, 22 Apr 2024 09:13:41 +0200
Subject: [PATCH] added description textarea

---
 .../task-edit-overlay.component.html          | 29 ++++++++++++++++++-
 .../task-edit-overlay.component.scss          |  6 ++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html
index 360abbe..42490f6 100644
--- a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html
+++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.html
@@ -9,7 +9,7 @@
     onsubmit="return false"
   >
     <div class="content">
-      <div class="title">
+      <div class="title headline">
         <p>Title<span class="red-dot">*</span></p>
         <input
           type="text"
@@ -17,6 +17,9 @@
           name="title"
           #title="ngModel"
           (input)="saveTaskData()"
+          placeholder="{{
+            taskDataEdit.title ? taskDataEdit.title : 'Enter a description'
+          }}"
           [(ngModel)]="taskDataEdit.title"
           autocomplete="off"
           required
@@ -27,6 +30,30 @@
           }
         </div>
       </div>
+      <div class="description headline">
+        <p>Description<span class="red-dot">*</span></p>
+        <textarea
+          id="description"
+          rows="5"
+          name="description"
+          #description="ngModel"
+          minlength="10"
+          (input)="saveTaskData()"
+          placeholder="{{
+            taskDataEdit.description
+              ? taskDataEdit.description
+              : 'Enter a description'
+          }}"
+          [(ngModel)]="taskDataEdit.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>
   </form>
 </section>
diff --git a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
index c8388e2..5bff254 100644
--- a/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
+++ b/src/app/shared/components/overlay/task-edit-overlay/task-edit-overlay.component.scss
@@ -41,6 +41,12 @@ select:valid {
   border: 1px solid black;
 }
 
+.headline {
+  p {
+    color: var(--very-dark-gray);
+  }
+}
+
 p {
   font-size: 20px;
   font-weight: 400;