LP1822414 Ang date select readOnly & fixes

Adds an @Input() readOnly field to eg-date-select.  When set, the date
value will be displayed as plain text - no widget.

Teach the eg-fm-editor to pass the readOnly flag to the eg-date-select.

Includes sandbox example.

Fixes a display issue where the date select calendar button was bigger
than the paired input group adding text input, because the material
icon was too big.

2019-07-31 rebasing note: the style added in the original patch was
moved to data-select.component.css.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>

diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
index 4142533..0ff4831 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
@@ -1,25 +1,29 @@
-
-<div class="input-group eg-date-select form-validated">
-  <input 
-    class="form-control"
-    ngbDatepicker
-    #datePicker="ngbDatepicker"
-    [attr.id]="domId.length ? domId : null"
-    placeholder="yyyy-mm-dd"
-    class="form-control"
-    container="body"
-    name="{{fieldName}}"
-    [disabled]="_disabled"
-    [required]="required"
-    [(ngModel)]="current"
-    (keyup.enter)="onDateEnter()"
-    (dateSelect)="onDateSelect($event)"/>
-  <div class="input-group-append">
-    <button class="btn btn-outline-secondary" [disabled]="_disabled"
-      (click)="datePicker.toggle()" type="button">
-      <span title="Select Date" i18n-title
-        class="material-icons mat-icon-in-button">calendar_today</span>
-    </button>
+<ng-container *ngIf="readOnly">
+  {{initialDate | formatValue:'timestamp'}}
+</ng-container>
+<ng-container *ngIf="!readOnly">
+  <div class="input-group eg-date-select form-validated">
+    <input 
+      class="form-control"
+      type="text"
+      ngbDatepicker
+      #datePicker="ngbDatepicker"
+      [attr.id]="domId.length ? domId : null"
+      placeholder="yyyy-mm-dd"
+      class="form-control"
+      container="body"
+      name="{{fieldName}}"
+      [disabled]="disabled"
+      [required]="required"
+      [(ngModel)]="current"
+      (keyup.enter)="onDateEnter()"
+      (dateSelect)="onDateSelect($event)"/>
+    <div class="input-group-append">
+      <button class="btn btn-outline-secondary" [disabled]="disabled"
+        (click)="datePicker.toggle()" type="button">
+        <span title="Select Date" i18n-title
+          class="material-icons mat-icon-in-button">calendar_today</span>
+      </button>
+    </div>
   </div>
-</div>
-
+</ng-container>

diff --git a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
index 077058a..d877300 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts
@@ -20,11 +20,8 @@ export class DateSelectComponent implements OnInit {
     @Input() required: boolean;
     @Input() fieldName: string;
     @Input() domId = '';
-
-    _disabled: boolean;
-    @Input() set disabled(d: boolean) {
-        this._disabled = d;
-    }
+    @Input() disabled: boolean;
+    @Input() readOnly: boolean;
 
     current: NgbDateStruct;
 

diff --git a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
index 5db749a..ad0c0b7 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
+++ b/Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
@@ -48,6 +48,7 @@
             <ng-container *ngSwitchCase="'timestamp'">
               <eg-date-select
                 domId="{{idPrefix}}-{{field.name}}"
+                [readOnly]="field.readOnly"
                 (onChangeAsIso)="record[field.name]($event)"
                 initialIso="{{record[field.name]()}}">
               </eg-date-select>

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index 4ff0950..a4af336 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -249,3 +249,11 @@
 <ng-template #confirmMsg>
   <span i18n>Are you sure you want to confirm {numThings, plural, =1 {this thing} other {these {{numThings}} things}}?</span>
 </ng-template>
+
+<eg-fm-record-editor #bresvEditor
+  idlClass="bresv"
+  readonlyFields="cancel_time">
+</eg-fm-record-editor>
+<button class="btn btn-info" (click)="bresvEditor.open({})">
+  Test Readonly Date
+</button>

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index d2d4ead..d3410b6 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -40,6 +40,10 @@ export class SandboxComponent implements OnInit {
 
     public numThings = 0;
 
+    @ViewChild('bresvEditor')
+    private bresvEditor: FmRecordEditorComponent;
+
+
     // @ViewChild('helloStr') private helloStr: StringComponent;
 
     gridDataSource: GridDataSource = new GridDataSource();
@@ -166,6 +170,11 @@ export class SandboxComponent implements OnInit {
                 idlField: 'metarecord'
             });
         });
+
+        const b = this.idl.create('bresv');
+        b.cancel_time('2019-03-25T11:07:59-0400');
+        this.bresvEditor.mode = 'create';
+        this.bresvEditor.record = b;
     }
 
     sbChannelHandler = msg => {