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.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

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 7e65f76..6524606 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,23 +1,29 @@
 
-<div class="input-group">
-  <input
-    class="form-control"
-    ngbDatepicker
-    #datePicker="ngbDatepicker"
-    [attr.id]="domId.length ? domId : null"
-    placeholder="yyyy-mm-dd"
-    class="form-control"
-    name="{{fieldName}}"
-    [disabled]="_disabled"
-    [required]="required"
-    [(ngModel)]="current"
-    (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">
+    <input
+      class="form-control"
+      type="text"
+      ngbDatepicker
+      #datePicker="ngbDatepicker"
+      [attr.id]="domId.length ? domId : null"
+      placeholder="yyyy-mm-dd"
+      class="form-control"
+      name="{{fieldName}}"
+      [disabled]="disabled"
+      [required]="required"
+      [(ngModel)]="current"
+      (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 6256290..02d30e2 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
@@ -9,7 +9,9 @@ import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'eg-date-select',
-  templateUrl: './date-select.component.html'
+  templateUrl: './date-select.component.html',
+  /* prevent the calendar mat icon from expanding the button */
+  styles: ['.material-icons {font-size: 15px}']
 })
 export class DateSelectComponent implements OnInit {
 
@@ -19,11 +21,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 1b0935f..aac6b08 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
@@ -43,6 +43,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 54cd87d..f90b6ad 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
@@ -154,3 +154,12 @@
 <h4>PCRUD auto flesh and FormatService detection</h4>
 <div *ngIf="aMetarecord">Fingerprint: {{aMetarecord}}</div>
 
+<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 543e3cb..a15b854 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
@@ -33,6 +33,9 @@ export class SandboxComponent implements OnInit {
     @ViewChild('fmRecordEditor')
     private fmRecordEditor: FmRecordEditorComponent;
 
+    @ViewChild('bresvEditor')
+    private bresvEditor: FmRecordEditorComponent;
+
     // @ViewChild('helloStr') private helloStr: StringComponent;
 
     gridDataSource: GridDataSource = new GridDataSource();
@@ -134,6 +137,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;
     }
 
     openEditor() {