From def47c95b2cdd1b338e988292b6ed1e12323273d Mon Sep 17 00:00:00 2001
From: Tobias Schweizer <t.schweizer@unibas.ch>
Date: Mon, 6 Apr 2020 17:26:12 +0200
Subject: [PATCH] feature (value): adapt date to common value comp. structure

---
 .../display-edit/display-edit.component.ts      |  5 ++---
 .../date-input/date-input.component.html        |  4 ++--
 .../date-input/date-input.component.scss        | 14 ++++++++++++++
 .../values/date-value/date-value.component.html | 17 ++++++++++++++---
 .../values/date-value/date-value.component.scss | 11 +++++++++++
 5 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts b/projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts
index a0d756f97..aca670226 100644
--- a/projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts
+++ b/projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts
@@ -40,7 +40,7 @@ export class DisplayEditComponent implements OnInit {
   editModeActive = false;
 
   shouldShowCommentToggle: boolean;
-  
+
   // type of given displayValue
   // or knora-api-js-lib class representing the value
   valueTypeOrClass: string;
@@ -135,7 +135,7 @@ export class DisplayEditComponent implements OnInit {
   checkCommentToggleVisibility() {
     this.shouldShowCommentToggle = (this.mode === 'read' && this.displayValue.valueHasComment !== '' && this.displayValue.valueHasComment !== undefined);
   }
-  
+
   /**
    * Given a value, determines the type or class representing it.
    *
@@ -174,7 +174,6 @@ export class DisplayEditComponent implements OnInit {
   isReadOnly(valueTypeOrClass: string): boolean {
     return valueTypeOrClass === this.readTextValueAsHtml ||
            valueTypeOrClass === this.readTextValueAsXml  ||
-           valueTypeOrClass === this.constants.DateValue ||
            valueTypeOrClass === this.constants.GeomValue ||
            valueTypeOrClass === this.constants.GeonameValue;
   }
diff --git a/projects/knora-ui/src/lib/viewer/values/date-value/date-input/date-input.component.html b/projects/knora-ui/src/lib/viewer/values/date-value/date-input/date-input.component.html
index 92a975bbe..d9d9755e5 100644
--- a/projects/knora-ui/src/lib/viewer/values/date-value/date-input/date-input.component.html
+++ b/projects/knora-ui/src/lib/viewer/values/date-value/date-input/date-input.component.html
@@ -1,5 +1,5 @@
 <div [formGroup]="form" class="interval-input-container">
-  <mat-form-field class="start">
+  <mat-form-field class="start child-input-component">
     <span class="calendar">{{startDateControl.value?.calendarName}}</span>
     <kui-jdn-datepicker [activeCalendar]="startDateControl.value?.calendarName">
       <input matInput [matDatepicker]="picker1" [formControlName]="'dateStart'" (dateChange)="_handleInput()" readonly>
@@ -8,7 +8,7 @@
     </kui-jdn-datepicker>
   </mat-form-field>
   <mat-checkbox *ngIf="!readonly" [formControlName]="'isPeriod'" (change)="_handleInput()"></mat-checkbox>
-  <mat-form-field *ngIf="isPeriodControl.value" class="end">
+  <mat-form-field *ngIf="isPeriodControl.value" class="end child-input-component">
     <span class="calendar">{{endDateControl.value?.calendarName}}</span>
     <kui-jdn-datepicker [activeCalendar]="endDateControl.value?.calendarName">
       <input matInput [matDatepicker]="picker2" [formControlName]="'dateEnd'" (dateChange)="_handleInput()" readonly>
diff --git a/projects/knora-ui/src/lib/viewer/values/date-value/date-input/date-input.component.scss b/projects/knora-ui/src/lib/viewer/values/date-value/date-input/date-input.component.scss
index e69de29bb..671f9859c 100644
--- a/projects/knora-ui/src/lib/viewer/values/date-value/date-input/date-input.component.scss
+++ b/projects/knora-ui/src/lib/viewer/values/date-value/date-input/date-input.component.scss
@@ -0,0 +1,14 @@
+/**
+ * CSS changed here must also be changed in each child component of a wrapped component
+ * time-input.component.scss, interval-input.component.scss, etc.
+ */
+
+.child-input-component {
+  display: inline-block;
+  vertical-align: bottom;
+  width: 49%;
+}
+
+.child-input-component:nth-child(2) {
+  padding-left: 2%;
+}
diff --git a/projects/knora-ui/src/lib/viewer/values/date-value/date-value.component.html b/projects/knora-ui/src/lib/viewer/values/date-value/date-value.component.html
index 3abce152d..7c376b12e 100644
--- a/projects/knora-ui/src/lib/viewer/values/date-value/date-value.component.html
+++ b/projects/knora-ui/src/lib/viewer/values/date-value/date-value.component.html
@@ -1,9 +1,20 @@
 <span [formGroup]="form">
-    <mat-form-field class="large-field">
+    <mat-form-field class="large-field child-value-component" floatLabel="never">
       <kui-date-input #dateInput [formControlName]="'dateValue'" class="value" placeholder="Date value" [readonly]="mode === 'read'" [errorStateMatcher]="matcher"></kui-date-input>
     </mat-form-field>
     <br>
-    <mat-form-field class="large-field">
-        <input matInput [formControlName]="'comment'" class="comment" placeholder="Comment" type="text" [readonly]="mode === 'read'">
+    <mat-form-field class="large-field value-component-comment" *ngIf="shouldShowComment">
+        <textarea matInput
+                  cdkTextareaAutosize
+                  #autosize="cdkTextareaAutosize"
+                  cdkAutosizeMinRows="1"
+                  cdkAutosizeMaxRows="6"
+                  [formControlName]="'comment'"
+                  class="comment"
+                  placeholder="Comment"
+                  type="text"
+                  [readonly]="mode === 'read'"
+                  spellcheck="false">
+        </textarea>
     </mat-form-field>
 </span>
diff --git a/projects/knora-ui/src/lib/viewer/values/date-value/date-value.component.scss b/projects/knora-ui/src/lib/viewer/values/date-value/date-value.component.scss
index e69de29bb..36fb61ae9 100644
--- a/projects/knora-ui/src/lib/viewer/values/date-value/date-value.component.scss
+++ b/projects/knora-ui/src/lib/viewer/values/date-value/date-value.component.scss
@@ -0,0 +1,11 @@
+:host ::ng-deep .child-value-component {
+  .mat-form-field-underline {
+    display: none;
+  }
+  .mat-form-field-infix{
+    border-top: 0.2em solid transparent !important;
+    .mat-form-field-underline{
+      display: block;
+    }
+  }
+}