AAE-4241 Populate date and datetime widget on retrieve metadata

Alfresco · Dec 3, 2020 · c32d91e · c32d91e
1 parent ab7544a
commit c32d91e
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 9 deletions.
diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.html b/lib/core/form/components/widgets/date-time/date-time.widget.html
@@ -5,7 +5,7 @@
         <input matInput
                [matDatetimepicker]="datetimePicker"
                [id]="field.id"
-               [(ngModel)]="displayDate"
+               [value]="displayDate"
                [required]="isRequired()"
                [disabled]="field.readOnly"
                [min]="minDate"

diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts b/lib/core/form/components/widgets/date-time/date-time.widget.spec.ts
@@ -184,5 +184,31 @@ describe('DateTimeWidgetComponent', () => {
 
             expect(tooltip).toEqual(widget.field.tooltip);
         }));
+
+        it('should display always the json value', () => {
+            widget.field = new FormFieldModel(new FormModel(), {
+                id: 'date-field-id',
+                name: 'date-name',
+                value: '12-30-9999 10:30 AM',
+                dateDisplayFormat: 'MM-DD-YYYY HH:mm A',
+                type: 'datetime',
+                readOnly: 'false'
+            });
+            fixture.detectChanges();
+            fixture.whenStable()
+                .then(() => {
+                    fixture.detectChanges();
+                    expect(element.querySelector('#date-field-id')).toBeDefined();
+                    expect(element.querySelector('#date-field-id')).not.toBeNull();
+                    const dateElement: any = element.querySelector('#date-field-id');
+                    expect(dateElement.value).toContain('12-30-9999 10:30 AM');
+                    widget.field.value = '03-02-2020 12:00 AM';
+                    fixture.detectChanges();
+                    fixture.whenStable()
+                        .then(() => {
+                            expect(dateElement.value).toContain('03-02-2020 12:00 AM');
+                        });
+                });
+        });
     });
 });
diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.ts b/lib/core/form/components/widgets/date-time/date-time.widget.ts
@@ -47,7 +47,13 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
 
     minDate: Moment;
     maxDate: Moment;
-    displayDate: Moment;
+
+    get displayDate(): Moment {
+        return moment(this.field.value, this.field.dateDisplayFormat)
+            .add(
+                moment(this.field.value, this.field.dateDisplayFormat).utcOffset(),
+                'minutes');
+    }
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -75,10 +81,6 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
                 this.maxDate = moment(this.field.maxValue, 'YYYY-MM-DDTHH:mm:ssZ');
             }
         }
-        this.displayDate = moment(this.field.value, this.field.dateDisplayFormat)
-            .add(
-                moment(this.field.value, this.field.dateDisplayFormat).utcOffset(),
-                'minutes');
     }
 
     ngOnDestroy() {

diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
@@ -4,7 +4,7 @@
         <input matInput
                [id]="field.id"
                [matDatepicker]="datePicker"
-               [(ngModel)]="displayDate"
+               [value]="displayDate"
                [required]="isRequired()"
                [disabled]="field.readOnly"
                [min]="minDate"

diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts
@@ -196,4 +196,32 @@ describe('DateWidgetComponent', () => {
             expect(tooltip).toEqual(widget.field.tooltip);
         }));
     });
+
+    it('should display always the json value', () => {
+        widget.field = new FormFieldModel(new FormModel(), {
+            id: 'date-field-id',
+            name: 'date-name',
+            value:  '12-30-9999',
+            type: 'date',
+            readOnly: 'false'
+        });
+        widget.field.isVisible = true;
+        widget.field.dateDisplayFormat = 'MM-DD-YYYY';
+        widget.ngOnInit();
+        fixture.detectChanges();
+        fixture.whenStable()
+            .then(() => {
+                expect(element.querySelector('#date-field-id')).toBeDefined();
+                expect(element.querySelector('#date-field-id')).not.toBeNull();
+                const dateElement: any = element.querySelector('#date-field-id');
+                expect(dateElement.value).toContain('12-30-9999');
+
+                widget.field.value = '03-02-2020';
+                fixture.detectChanges();
+                fixture.whenStable()
+                    .then(() => {
+                        expect(dateElement.value).toContain('03-02-2020');
+                    });
+            });
+    });
 });
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts
@@ -53,7 +53,10 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
 
     minDate: Moment;
     maxDate: Moment;
-    displayDate: Moment;
+
+    get displayDate(): Moment {
+        return moment(this.field.value, this.field.dateDisplayFormat);
+    }
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -81,7 +84,6 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
                 this.maxDate = moment(this.field.maxValue, this.DATE_FORMAT_CLOUD);
             }
         }
-        this.displayDate = moment(this.field.value, this.field.dateDisplayFormat);
     }
 
     ngOnDestroy() {