From: Bill Erickson <berickxx@gmail.com>
Date: Sun, 26 May 2019 18:02:44 +0000 (-0700)
Subject: LP1822414 Ang date select readOnly & fixes
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=c21dcc67d0122cb1f8a811a1962b46c57f69f67c;p=evergreen%2Fequinox.git
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 41425339a3..0ff48314c1 100644
--- 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 077058a6e8..d877300677 100644
--- 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 5db749af35..ad0c0b77a3 100644
--- 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 4ff0950751..a4af3368ba 100644
--- 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 d2d4ead1d9..d3410b6d05 100644
--- 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 => {