fix: missing readonly states

- entry-list-select
- datetime

Author: felixroos

packages/calendar/src/lib/calendar/calendar.component.html

@@ -51,6 +51,6 @@
       </li>
     </ul>
     <ec-month [disableDragStart]="disableDragStart" [disableDragEnd]="disableDragEnd" (spanChanged)="spanChanged.emit($event)"
-      [timespan]="timespan" [heatmap]="heatmap" [date]="date" (dayClicked)="select($event)" #grid></ec-month>
+      [timespan]="timespan" [disabled]="disabled" [heatmap]="heatmap" [date]="date" (dayClicked)="select($event)" #grid></ec-month>
   </div>
 </div>

packages/calendar/src/lib/calendar/calendar.component.ts

@@ -34,6 +34,8 @@ export class CalendarComponent extends MonthComponent implements ControlValueAcc
   public weekdays: string[];
   /** The input's placeholder */
   @Input() placeholder = '';
+  /** If true, the date cannot be changed */
+  @Input() disabled;
   /** If true, the time will not be displayed nor will be editable. */
   @Input() disableTime: boolean;
   /** Allowed date input patterns. The first one will be standard. */
@@ -45,9 +47,8 @@ export class CalendarComponent extends MonthComponent implements ControlValueAcc
   constructor(
     @Inject('moment.format.date') public defaultDateFormat,
     @Inject('moment.format.time') public defaultTimeFormat,
-    @Inject('moment.format.month') protected defaultMonthFormat,
-  ) /* public symbol: SymbolService */
-  {
+    @Inject('moment.format.month') protected defaultMonthFormat /* public symbol: SymbolService */,
+  ) {
     /* super(symbol); */
     super(defaultMonthFormat);
     // pattern localization
@@ -76,6 +77,10 @@ export class CalendarComponent extends MonthComponent implements ControlValueAcc
 
   /** Updates the value with the given moment and propagates the change. */
   select(selected) {
+    if (this.disabled) {
+      console.warn('cannot select date: calendar is set to disabled=true');
+      return;
+    }
     if (this.value && selected.hour() === 0 && selected.minute() === 0) {
       const previous = moment(this.value, this.patterns, true);
       selected.hour(previous.hour());
@@ -132,4 +137,8 @@ export class CalendarComponent extends MonthComponent implements ControlValueAcc
 
   /** registerOnTouched implementation of ControlValueAccessor */
   registerOnTouched() {}
+
+  setDisabledState(isDisabled) {
+    this.disabled = isDisabled;
+  }
 }

packages/calendar/src/lib/calendar/month.component.ts

@@ -1,12 +1,4 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  Inject
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, Inject } from '@angular/core';
 /* import { SymbolService } from '../../symbol/symbol.service'; */
 import moment from 'moment-es6';
 import { debounceTime } from 'rxjs/operators';
@@ -39,7 +31,7 @@ export interface Day {
 /** Displays the days of a month in a calendarish table. */
 @Component({
   selector: 'ec-month',
-  templateUrl: 'month.component.html'
+  templateUrl: 'month.component.html',
 })
 export class MonthComponent implements OnInit, OnChanges {
   dragged: any;
@@ -59,6 +51,8 @@ export class MonthComponent implements OnInit, OnChanges {
   @Input() disableDragStart = false;
   /** If true, the timespan end cannot be dragged */
   @Input() disableDragEnd = false;
+  /** If true, nothing can be changed */
+  @Input() disabled;
   /** The current month as string */
   public formatted: string;
   /** The cells containing the days */
@@ -80,18 +74,15 @@ export class MonthComponent implements OnInit, OnChanges {
     this.drag
       .asObservable()
       .pipe(debounceTime(100))
-      .subscribe(day => this.dropDay(day));
+      .subscribe((day) => this.dropDay(day));
     this.changeSpan
       .asObservable()
       .pipe(debounceTime(800))
-      .subscribe(timespan => this.spanChanged.emit(this.timespan));
+      .subscribe((timespan) => this.spanChanged.emit(this.timespan));
   }
 
   dropDay(day: Day) {
-    if (
-      !this.dragged ||
-      ((day.first && this.dragged.first) || (day.last && this.dragged.last))
-    ) {
+    if (!this.dragged || ((day.first && this.dragged.first) || (day.last && this.dragged.last))) {
       return;
     }
     const newTimespan = [].concat(this.timespan);
@@ -113,10 +104,7 @@ export class MonthComponent implements OnInit, OnChanges {
   }
 
   dragStart(day, e) {
-    if (
-      (this.disableDragStart && day.first) ||
-      (this.disableDragEnd && day.last)
-    ) {
+    if ((this.disableDragStart && day.first) || (this.disableDragEnd && day.last)) {
       return;
     }
     this.dragged = day;
@@ -196,38 +184,37 @@ export class MonthComponent implements OnInit, OnChanges {
         return {
           index,
           date,
-          type:
-            date.format('MM YYYY') === day.format('MM YYYY')
-              ? 'current'
-              : 'other',
-          active:
-            this.timespan &&
-            date.isBetween(this.timespan[0], this.timespan[1], 'days', '[]'),
+          type: date.format('MM YYYY') === day.format('MM YYYY') ? 'current' : 'other',
+          active: this.timespan && date.isBetween(this.timespan[0], this.timespan[1], 'days', '[]'),
           first: isStart,
           last: isEnd,
-          draggable:
-            (!this.disableDragStart && isStart) ||
-            (!this.disableDragEnd && isEnd),
+          draggable: (!this.disableDragStart && isStart) || (!this.disableDragEnd && isEnd),
           color: this.getDayColor(date),
           heat: this.getDayHeat(date),
           format: date.format('DD'),
           today:
             moment()
               .startOf('day')
-              .diff(date, 'days') === 0
+              .diff(date, 'days') === 0,
         };
       });
   }
 
   /** Sets the calendars viewed date to the given moment's month. Renders always 42 cells to keep the layout consistent. */
   setDate(date: moment.Moment = this.selected || this.date || moment()) {
+    if (this.disabled) {
+      return;
+    }
     this.date = date.clone();
     this.formatted = date.format(this.monthFormat);
     this.cells = this.getMonth(date.clone(), 'current');
   }
 
   /** Selects the day of the given moment. */
   selectDay(_moment: moment.Moment, emit = true): void {
+    if (this.disabled) {
+      return;
+    }
     this.setDate(_moment);
     this.selected = _moment;
     if (emit) {
@@ -253,12 +240,7 @@ export class MonthComponent implements OnInit, OnChanges {
       return true;
     }
     const newDate = this.date.clone().add(value, span);
-    return newDate.isBetween(
-      this.timespan[0],
-      this.timespan[1],
-      'months',
-      '[]'
-    );
+    return newDate.isBetween(this.timespan[0], this.timespan[1], 'months', '[]');
   }
 
   /** Updates the viewed date to reflect the given relative changes. */

packages/data/src/lib/entry-list-select/entry-list-select.component.html

@@ -2,9 +2,9 @@
 <ec-list [config]="selectionConfig" [items]="items" (columnClicked)="entryPop.edit($event.getBody())" #selectionList></ec-list>
 <ec-entry-pop [model]="model" #entryPop (submitted)="formSubmitted($event)" (deleted)="removeItem($event)"></ec-entry-pop>
 
-<a class="btn btn_clear" (click)="entryPop.create()" *ngIf="model">
+<a class="btn btn_clear" (click)="entryPop.create()" *ngIf="!disabled&&model">
     <ec-icon name="add"></ec-icon>
 </a>
-<a class="btn btn_clear" (click)="entryListPop.show()">
+<a class="btn btn_clear" (click)="entryListPop.show()" *ngIf="!disabled">
     <ec-icon name="find"></ec-icon>
 </a>

packages/data/src/lib/entry-list-select/entry-list-select.component.ts

@@ -70,42 +70,44 @@ export class EntryListSelectComponent extends InputComponent implements ControlV
     if (this.field && !this.model) {
       this.model = this.field.relation;
     }
-    if (this.model) {
-      this.modelConfig.generateConfig(this.model, (this.listConfig || {}).fields).then((config) => {
-        this.listConfig = config;
-        this.selectionConfig = Object.assign({}, this.listConfig, {
-          disableHeader: false,
-          defaultFilter: false,
-          hidePagination: true,
-          fields: Object.assign(
-            {},
-            this.listConfig.fields,
-            {
-              _modified: Object.assign({}, config.fields._modified, { hideInList: true }),
-            },
-            {
-              button: {
-                label: this.symbol.resolve('entry.select.remove'),
-                form: false,
-                resolve: () => ' ',
-                view: 'link',
-                class: 'btn btn_clear',
-                icon: 'close-x',
-                action: (item, property) => {
-                  this.selection.remove(item);
-                },
+    if (!this.model) {
+      return;
+    }
+    this.modelConfig.generateConfig(this.model, (this.listConfig || {}).fields).then((config) => {
+      this.listConfig = config;
+      this.selectionConfig = Object.assign({}, this.listConfig, {
+        disableHeader: false,
+        defaultFilter: false,
+        hidePagination: true,
+        fields: Object.assign(
+          {},
+          this.listConfig.fields,
+          {
+            _modified: Object.assign({}, config.fields._modified, { hideInList: true }),
+          },
+          {
+            button: {
+              label: this.symbol.resolve('entry.select.remove'),
+              form: false,
+              resolve: () => ' ',
+              view: 'link',
+              class: 'btn btn_clear',
+              icon: 'close-x',
+              action: (item, property) => {
+                this.selection.remove(item);
               },
+              hideInList: this.disabled,
             },
-          ),
-        });
-        Object.keys(this.selectionConfig.fields).forEach((key) => {
-          if (this.selectionConfig.fields[key].type !== 'text') {
-            this.selectionConfig.fields[key].filterable = false;
-          }
-        });
-        this.initSelection();
+          },
+        ),
       });
-    }
+      Object.keys(this.selectionConfig.fields).forEach((key) => {
+        if (this.selectionConfig.fields[key].type !== 'text') {
+          this.selectionConfig.fields[key].filterable = false;
+        }
+      });
+      this.initSelection();
+    });
   }
 
   /** Initializes the selection with listConfig. Propagates change */

packages/data/src/lib/entry-select/entry-select.component.html

@@ -49,7 +49,7 @@
     <a (click)="editItem(selection?.display[0],$event)" class="btn btn_clear" *ngIf="solo&&!config?.disableCreatePop&&hasMethod('put')&&!selection?.isEmpty()">
       <ec-icon name="pencil"></ec-icon>
     </a>
-    <a (click)="entryPop.create()" class="btn btn_clear" *ngIf="!config?.disableCreatePop&&hasMethod('post')&&(!solo||selection?.isEmpty())">
+    <a (click)="entryPop.create()" class="btn btn_clear" *ngIf="!disabled&&!config?.disableCreatePop&&hasMethod('post')&&(!solo||selection?.isEmpty())">
       <ec-icon name="add"></ec-icon>
     </a>
     <a (click)="entryListPop.show($event)" class="btn btn_clear" *ngIf="!config?.disableListPop&&hasMethod('get')&&!disabled">

packages/data/src/lib/resource-select/resource-select.component.html

@@ -37,7 +37,7 @@
       *ngIf="solo&&hasMethod('put')&&!selection?.isEmpty()">
       <ec-icon name="pencil"></ec-icon>
     </a>
-    <a (click)="resourcePop.create()" class="btn btn_clear" *ngIf="!config?.disableCreatePop&&hasMethod('post')">
+    <a (click)="resourcePop.create()" class="btn btn_clear" *ngIf="!disabled&&!config?.disableCreatePop&&hasMethod('post')">
       <ec-icon name="add"></ec-icon>
     </a>
     <a (click)="resourceListPop.show($event)" class="btn btn_clear" *ngIf="!config?.disableListPop&&hasMethod('get')&&!disabled">

packages/ui/src/lib/form/datetime/datetime.component.html

@@ -1,7 +1,7 @@
 <div class="ec-datetime-picker">
     <div class="input-group">
         <input class="input" [value]="calendar.inputValue" (input)="calendar.input($event.target.value)"
-            (focus)="calendarPop.show()" (blur)="calendarPop.hide()" [placeholder]="placeholder">
+            (focus)="calendarPop.show()" (blur)="calendarPop.hide()" [placeholder]="placeholder" [disabled]="disabled">
         <div class="input-group__addon">
             <a (click)="calendarPop.toggle()">
                 <ec-icon name="calendar"></ec-icon>

packages/ui/src/lib/form/datetime/datetime.component.ts

@@ -32,6 +32,8 @@ export class DatetimeComponent implements ControlValueAccessor {
   @Input() disableTime: boolean;
   /** The input's placeholder */
   @Input() placeholder = '';
+  /** If true, the time cannot be changed */
+  disabled: boolean;
 
   /** Selects the given Date when the model changes. */
   writeValue(value: Date) {
@@ -48,4 +50,8 @@ export class DatetimeComponent implements ControlValueAccessor {
 
   /** registerOnTouched implementation of ControlValueAccessor */
   registerOnTouched() {}
+
+  setDisabledState(isDisabled) {
+    this.disabled = isDisabled;
+  }
 }

packages/ui/src/lib/io/input/input.component.ts

@@ -30,6 +30,8 @@ import { debounceTime } from 'rxjs/operators';
 export class InputComponent extends DynamicSlotComponent implements ControlValueAccessor, OnChanges {
   /** The belonging form group */
   @Input() group: FormGroup;
+  /** If true, the input is readonly. Is set by ControlValueAccessor#setDisabled */
+  disabled: FormGroup;
   /** The belonging form control. This is not required if you pass in a field and group. */
   @Input() control: AbstractControl;
   /** The changed ouput emits whenever the form control of the input changes. */
@@ -143,4 +145,8 @@ export class InputComponent extends DynamicSlotComponent implements ControlValue
   }
 
   registerOnTouched() {}
+
+  setDisabledState(isDisabled) {
+    this.disabled = isDisabled;
+  }
 }