[ACS-5556] [ACS-5557] [ACS-5558] [ACS-5559] [ACS-5602] [ACS-5603] mat-datepicker component added and removed old mat-datetimepicker component from UI #8749
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,113 @@ | ||
| <label | ||
| class="adf-property-label" | ||
| [attr.data-automation-id]="'card-dateitem-label-' + property.key" | ||
| *ngIf="showProperty() || isEditable()" | ||
| [attr.for]="'card-view-dateitem-' + property.key"> | ||
| {{ property.label | translate }} | ||
| </label> | ||
| <div class="adf-property-value adf-property-value-padding-top"> | ||
| <span | ||
| *ngIf="!isEditable() && !property.multivalued" | ||
| [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> | ||
| <span | ||
| *ngIf="showProperty()" | ||
| [attr.data-automation-id]="'card-dateitem-' + property.key" | ||
| (dblclick)="copyToClipboard(property.displayValue)" | ||
| matTooltipShowDelay="1000" | ||
| [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"> | ||
| {{ property.displayValue}} | ||
| </span> | ||
| </span> | ||
| <div *ngIf="isEditable() && !property.multivalued" class="adf-dateitem-editable"> | ||
| <div class="adf-dateitem-editable-controls"> | ||
| <span | ||
| class="adf-datepicker-toggle" | ||
| [attr.data-automation-id]="'datepicker-label-toggle-' + property.key" | ||
| (click)="showDatePicker()"> | ||
| <span | ||
| *ngIf="showProperty(); else elseEmptyValueBlock" | ||
| [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> | ||
| {{ property.displayValue }} | ||
| </span> | ||
| </span> | ||
|
|
||
| <mat-icon | ||
| *ngIf="showClearAction()" | ||
| class="adf-date-reset-icon" | ||
| (click)="onDateClear()" | ||
| [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate" | ||
| [attr.data-automation-id]="'datepicker-date-clear-' + property.key"> | ||
| clear | ||
| </mat-icon> | ||
|
|
||
| <mat-datepicker-toggle | ||
| [attr.tabindex]="-1" | ||
| [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" | ||
| [attr.data-automation-id]="'datepickertoggle-' + property.key" | ||
| [for]="datePicker"> | ||
| </mat-datepicker-toggle> | ||
| </div> | ||
|
|
||
| <input | ||
| class="adf-invisible-date-input" | ||
| [attr.tabIndex]="-1" | ||
| [matDatepicker]="datePicker" | ||
| [value]="valueDate" | ||
| (dateChange)="onDateChanged($event)" | ||
| [attr.id]="'card-view-dateitem-' + property.key"> | ||
|
|
||
| <mat-datepicker | ||
| #datePicker | ||
| [attr.data-automation-id]="'datepicker-' + property.key" | ||
| [startAt]="valueDate"> | ||
| </mat-datepicker> | ||
| </div> | ||
| <ng-template #elseEmptyValueBlock> | ||
| {{ property.default | translate }} | ||
| </ng-template> | ||
|
|
||
| <div | ||
| *ngIf="property.multivalued" | ||
| class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable"> | ||
| <mat-chip-list #chipList class="adf-textitem-chip-list"> | ||
| <mat-chip | ||
| *ngFor="let propertyValue of property.displayValue; let idx = index" | ||
| [removable]="isEditable()" | ||
| (removed)="removeValueFromList(idx)"> | ||
| {{ propertyValue }} | ||
| <mat-icon | ||
| *ngIf="isEditable()" | ||
| matChipRemove> | ||
| cancel | ||
| </mat-icon> | ||
| </mat-chip> | ||
| </mat-chip-list> | ||
|
|
||
| <mat-form-field | ||
| *ngIf="isEditable()" | ||
| class="adf-property-field adf-dateitem-editable-controls" | ||
| [floatLabel]="'never'" | ||
| (click)="showDatePicker()"> | ||
| <input | ||
| matInput | ||
| class="adf-invisible-date-input" | ||
| [attr.tabIndex]="-1" | ||
| [matDatepicker]="datePicker" | ||
| (dateChange)="addDateToList($event)" | ||
| [attr.id]="'card-view-dateitem-' + property.key"> | ||
| <mat-datepicker-toggle | ||
| [attr.tabindex]="-1" | ||
| matSuffix | ||
| [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" | ||
| [attr.data-automation-id]="'datepickertoggle-' + property.key" | ||
| [for]="datePicker"> | ||
| </mat-datepicker-toggle> | ||
|
|
||
| <mat-datepicker | ||
| #datePicker | ||
| [attr.data-automation-id]="'datepicker-' + property.key" | ||
| [startAt]="valueDate"> | ||
| </mat-datepicker> | ||
| </mat-form-field> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,15 +17,15 @@ | |
|
|
||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
| import { CardViewDateItemModel } from '../../models/card-view-dateitem.model'; | ||
| import { CardViewUpdateService } from '../../services/card-view-update.service'; | ||
| import { CardViewDateItemComponent } from './card-view-dateitem.component'; | ||
| import { CoreTestingModule } from '../../../testing/core.testing.module'; | ||
| import { ClipboardService } from '../../../clipboard/clipboard.service'; | ||
| import { TranslateModule } from '@ngx-translate/core'; | ||
| import { AppConfigService } from '@alfresco/adf-core'; | ||
| import { endOfDay, startOfDay } from 'date-fns'; | ||
| import { CardViewDatetimeItemModel } from '../../models/card-view-datetimeitem.model'; | ||
|
|
||
| describe('CardViewDateItemComponent', () => { | ||
|
|
||
|
|
@@ -61,7 +61,25 @@ describe('CardViewDateItemComponent', () => { | |
|
|
||
| afterEach(() => fixture.destroy()); | ||
|
|
||
| const updateDateTime = (key: string): Date => { | ||
| component.property.key = key; | ||
| component.dateFormat = 'M/d/yy, h:mm a'; | ||
| component.property.value = new Date('Jul 10 2017 00:01:00'); | ||
| const expectedDate = new Date('Jul 10 2018'); | ||
| fixture.detectChanges(); | ||
|
|
||
| const element = fixture.debugElement.nativeElement.querySelector(`span[data-automation-id="card-date-value-${key}"]`); | ||
| expect(element).toBeDefined(); | ||
| expect(element.innerText).toEqual('Jul 10, 2017'); | ||
| component.onDateChanged({ value: expectedDate }); | ||
|
|
||
| fixture.detectChanges(); | ||
| return expectedDate; | ||
| }; | ||
|
|
||
| //we will enable this test when will change from moment to date-fns throughout the application | ||
| // eslint-disable-next-line ban/ban | ||
| xit('should pick date format from appConfigService', () => { | ||
| expect(component.dateFormat).toEqual('shortDate'); | ||
| }); | ||
|
|
||
|
|
@@ -192,15 +210,16 @@ describe('CardViewDateItemComponent', () => { | |
| const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next'); | ||
| component.editable = true; | ||
| component.property.editable = true; | ||
| component.property.value = endOfDay(new Date('Jul 10 2017')); | ||
| const expectedDate = new Date('Jul 10 2017'); | ||
| fixture.detectChanges(); | ||
| const property = { ...component.property }; | ||
|
|
||
| component.onDateChanged({ value: expectedDate }); | ||
| expect(itemUpdatedSpy).toHaveBeenCalledWith({ | ||
| target: property, | ||
| changed: { | ||
| dateKey: endOfDay(expectedDate) | ||
| } | ||
| }); | ||
| }); | ||
|
|
@@ -209,13 +228,13 @@ describe('CardViewDateItemComponent', () => { | |
| component.editable = true; | ||
| component.property.editable = true; | ||
| component.property.value = null; | ||
| const expectedDate = new Date('Jul 10 2017'); | ||
| fixture.detectChanges(); | ||
|
|
||
| component.onDateChanged({ value: expectedDate }); | ||
|
|
||
| await fixture.whenStable(); | ||
| expect(component.property.value).toEqual(endOfDay(expectedDate)); | ||
| }); | ||
|
|
||
| it('should copy value to clipboard on double click', () => { | ||
|
|
@@ -314,25 +333,9 @@ describe('CardViewDateItemComponent', () => { | |
| }); | ||
| }); | ||
|
|
||
|
There was a problem hiding this comment. Why did you delete this test? There was a problem hiding this comment. hi @nikita-web-ua i have not deleted this test, just modified it's name and added it's functionality in updateDateTIme() function to avoid duplication of code. There was a problem hiding this comment. Because we have 2 cases here now one with |
||
| it('should set date as end of the day when proprty is not `properties.cm:from`', async () => { | ||
| const expectedDate = updateDateTime('fake-key'); | ||
| expect(component.property.value).toEqual(endOfDay(expectedDate)); | ||
| }); | ||
|
|
||
| it('should render chips for multivalue dates when chips are enabled', async () => { | ||
|
|
@@ -372,4 +375,9 @@ describe('CardViewDateItemComponent', () => { | |
| expect(valueChips[1].nativeElement.innerText.trim()).toBe('Jul 11, 2017, 0:01'); | ||
| expect(valueChips[2].nativeElement.innerText.trim()).toBe('Jul 12, 2017, 0:01'); | ||
| }); | ||
|
|
||
| it('should set date as start of the day when proprty is `properties.cm:from`', async () => { | ||
| const expectedDate = updateDateTime('properties.cm:from'); | ||
| expect(component.property.value).toEqual(startOfDay(expectedDate)); | ||
| }); | ||
| }); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm wondering if we should raise jira for that or maybe correct it for now based on actual functionality instead of disabling that so then when functionality will be corrected then test can be corrected too. @MichalKinas what do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can keep this test case with xit as of now. We will create a new Jira ticket to address this test case. Once we replace moment.js in whole application with date-fns we will adress the jira ticket. What do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it would be best not to create a partial PR for such a change. I believe the best approach would be to go through the whole ADF and replace it everywhere and then adjust all affected tests at once instead of disabling some of them. This approach makes it easier to miss something during testing phase, during unit test and e2e fixes and most importantly such a change shouldn't be merged partially as it may be released without being complete. cc @AleksanderSklorz @MateuszHY
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree with you @MichalKinas
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed with @MichalKinas
@jatin2008 @rbahirsheth what do you think ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi, @MichalKinas I do agree with you. We found some occurrences in the codebase but we could not find out the UI. We will analyze it. But, This PR is also part of the calendar replacement.