From 4c3d1b30ebdca6bee83afd888e412d16f380187f Mon Sep 17 00:00:00 2001
From: Tobias Schweizer <tobiasschweizer@users.noreply.github.com>
Date: Thu, 10 Jun 2021 15:12:54 +0200
Subject: [PATCH] feat(viewer): improve style of date input (DSP-1724) (#301)

* feat(viewer): show start and end date side by side

* feat(viewer): improve style of error message

* feat(viewer): adjust width of column in grid for date input
---
 .../date-edit/date-edit.component.html             | 14 ++++++++------
 .../date-edit/date-edit.component.scss             |  4 ++++
 .../date-input-text/date-input-text.component.html | 10 +++++-----
 .../date-input-text/date-input-text.component.scss |  2 +-
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.html b/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.html
index 21335226..6cc40407 100644
--- a/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.html
+++ b/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.html
@@ -11,12 +11,14 @@
         <mat-label>Year</mat-label>
         <input class="year" matInput placeholder="Year" type="number" [formControlName]="'year'" min="1"
                (input)="_handleInput()">
-        <mat-error *ngIf="yearControl.hasError('required')">
-            <span class="custom-error-message">A year is <strong>required</strong>.</span>
-        </mat-error>
-        <mat-error *ngIf="yearControl.hasError('min')">
-            <span class="custom-error-message">A valid year is greater than 0.</span>
-        </mat-error>
+        <div class="date-form-error">
+            <mat-error *ngIf="yearControl.hasError('required')">
+                <span class="custom-error-message">A year is <strong>required</strong>.</span>
+            </mat-error>
+            <mat-error *ngIf="yearControl.hasError('min')">
+                <span class="custom-error-message">A valid year is greater than 0.</span>
+            </mat-error>
+        </div>
     </mat-form-field>
     <mat-form-field>
         <mat-label>Month</mat-label>
diff --git a/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.scss b/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.scss
index e37a2d01..89a97854 100644
--- a/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.scss
+++ b/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-edit/date-edit.component.scss
@@ -3,3 +3,7 @@
 .era-radio {
   margin-bottom: 15px;
 }
+
+.date-form-error {
+  margin-top: -16px;
+}
diff --git a/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.html b/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.html
index cf85a74d..4ec3c506 100644
--- a/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.html
+++ b/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.html
@@ -21,20 +21,20 @@
     <div class="date-form-grid">
         <div class="date-form-field">
             <mat-form-field>
+                <mat-label *ngIf="isPeriodControl.value">Start</mat-label>
                 <dsp-date-edit class="start-date" [formControlName]="'startDate'" [calendar]="calendarControl.value" [valueRequiredValidator]="valueRequiredValidator"></dsp-date-edit>
             </mat-form-field>
         </div>
-    </div>
 
-    <span *ngIf="isPeriodControl.value">
-        <div class="date-form-grid">
+        <span *ngIf="isPeriodControl.value">
             <div class="date-form-field">
                 <mat-form-field>
+                    <mat-label>End</mat-label>
                     <dsp-date-edit class="end-date" [formControlName]="'endDate'" [calendar]="calendarControl.value" [valueRequiredValidator]="valueRequiredValidator"></dsp-date-edit>
                 </mat-form-field>
             </div>
-        </div>
-    </span>
+        </span>
+    </div>
 
     <div class="date-form-error">
         <mat-error *ngIf="startDate.hasError('required')">
diff --git a/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.scss b/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.scss
index fcf763b6..892afb43 100644
--- a/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.scss
+++ b/projects/dsp-ui/src/lib/viewer/values/date-value/date-input-text/date-input-text.component.scss
@@ -7,7 +7,7 @@
 
 .date-form-grid {
   display: grid;
-  grid-template-columns: 49% 49%;
+  grid-template-columns: 30% 30%;
   grid-template-rows: auto;
   column-gap: 12px;
 }