[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

jatin2008 · 2023-07-11T08:37:09Z

Please check if the PR fulfills these requirements

The commit message follows our guidelines

Tests for the changes have been added (for bug fixes / features)

Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x")

Bugfix

Feature

Code style update (formatting, local variables)

Refactoring (no functional changes, no api changes)

Build related changes

Documentation

Other... Please describe:

What is the current behaviour? (You can also link to an open issue here)
old mat-datetimePicker component is being used in the UI

What is the new behaviour?
Added new date-timepicker component and removed old mat-datetimePicker component

Does this PR introduce a breaking change? (check one with "x")

Yes

No

If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

Other information:
Jira id - https://alfresco.atlassian.net/browse/ACS-5557

Images for new datetime-picker

DenysVuika · 2023-07-17T16:34:24Z

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -194,6 +193,7 @@ describe('CardViewDateItemComponent', () => {
        const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
        component.editable = true;
        component.property.editable = true;
+        component.property.value = moment('Jul 10 2017', 'MMM DD YYYY').endOf('day').toDate();


can this be date-fns ?

yess converted to date-fns

DenysVuika · 2023-07-17T16:35:18Z

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -355,23 +355,4 @@ describe('CardViewDateItemComponent', () => {
        expect(valueChips[1].nativeElement.innerText.trim()).toBe('Jul 11, 2017');
        expect(valueChips[2].nativeElement.innerText.trim()).toBe('Jul 12, 2017');
    });
-
-    it('should render chips for multivalue datetimes when chips are enabled', async () => {


why this test is removed? do you plan adding a replacement?

hi @DenysVuika I added this test case back again, earlier it was removed as I changed the datetime format to 'MMM d, y' so two test cases might went duplicate that was the reason of removing this.

DenysVuika · 2023-07-18T14:59:05Z

lib/core/src/lib/card-view/models/card-view-datetimeitem.model.ts

@@ -22,7 +22,7 @@ import { CardViewDateItemProperties } from '../interfaces/card-view.interfaces';

 export class CardViewDatetimeItemModel extends CardViewDateItemModel implements CardViewItem, DynamicComponentModel {
    type: string = 'datetime';
-    format: string = 'MMM d, y, H:mm';
+    format: string = 'MMM d, y';


the model file is called "datetime" model, and the "type" is called "datetime", so you can't drop the time from here

i have again implemented tim here

nikita-web-ua · 2023-07-24T07:51:58Z

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -314,25 +333,9 @@ describe('CardViewDateItemComponent', () => {
        });
    });

-    it('should be possible update a date-time', async () => {


Why did you delete this test?

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.

Because we have 2 cases here now one with properties.cm:from and other without properties.cm:from

AleksanderSklorz · 2023-07-25T13:44:10Z

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

+        return expectedDate;
+    };
+
+    //we will enable this test when will change from moment to date-fns throughout the application


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?

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?

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

I agree with you @MichalKinas

Agreed with @MichalKinas
@jatin2008 @rbahirsheth what do you think ?

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.

AleksanderSklorz · 2023-07-25T13:46:28Z

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

        super();
-        this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
+        // need to change this to app.config when will change from moment to date-fns throughout the application


Do we have jira for this comment? We can forget about that without jira

MateuszHY · 2023-07-25T13:46:43Z

@jatin2008 @rbahirsheth did you check accessibility after changes introduced here?
Plus ... any additional tests needed here?

AleksanderSklorz · 2023-07-25T13:47:29Z

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

@@ -154,4 +152,8 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
    update() {
        this.cardViewUpdateService.update({ ...this.property } as CardViewDateItemModel, this.property.value);
    }
+
+    getDateValue(newDateValue): Date {


missing type for newDateValue

we are calling our method from onDateChanged() & this method is triggering on the date change from UI. This method accepts the $event object & does not use type in this method too. We can use MatDatepickerInputEvent<any, any> type here. Is it fine?

If function takes $event as parameter then type of parameter should be type of $event. You can check $event type very easily. For example:

here you have dateChange event so you can check what it emits:

You see that it emits MatDatepickerInputEvent<D, S> so please use that type in every function.

Also please check if we really need to use <any, any> or maybe we can use better types in <>

hi @AleksanderSklorz added type here as MatDatepickerInputEvent<any, any> for $event, also checked and found any as the best supported type here.

@jatin2008 based on what information you think that any is the best supported type? That's not true, please go through the documentation https://material.angular.io/components/datepicker/overview especially the section with change event to check what type should be used here

Btw any is against strongly typed TypeScript code, it's basically antipattern that we should avoid as much as we can, so please update your knowledge about best practices for TS

jatin2008 · 2023-07-26T06:55:48Z

@jatin2008 @rbahirsheth did you check accessibility after changes introduced here? Plus ... any additional tests needed here?

hi @MateuszHY we have checked and not found any accessibility issue in the new datepicker component added and also added a new test case for the changes we made.

…cedComponent. Added config for using the new components

… search query on submit. Added optional property to disable update on submit button click for widget-composite.

…chFilterTabbedComponent

…ponent and SearchFilterTabbedComponent to SearchDateRangeAdvancedTabbedComponent. Updated test cases accordingly

… 'Between' options use the start date to end date query format

…ng some numbers in the 'In the last' input field would clear out the field

…s for e2e test cases

…ponent

…epicker calendar now.

…ified test cases for the component.

sonarqubecloud · 2023-07-27T06:04:35Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
1.7% Duplication

DenysVuika · 2023-10-10T14:33:44Z

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

                private clipboardService: ClipboardService,
-                private translateService: TranslationService) {
+                private translateService: TranslationService,
+                @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {


never ever do this, this is a singleton access to all the date time formats, changing it will change all components

DenysVuika · 2023-10-10T14:34:10Z

closing as abandoned and of poor quality

jatin2008 requested a review from rbahirsheth July 11, 2023 08:37

arditdomi added the next version ➡️ label Jul 11, 2023

jatin2008 changed the title ~~[ACS-5557] mat-datepicker component added and removed old mat-datetimepicker component from UI~~ [ACS-5556] [ACS-5557] mat-datepicker component added and removed old mat-datetimepicker component from UI Jul 11, 2023

arditdomi removed the next version ➡️ label Jul 12, 2023

jatin2008 changed the title ~~[ACS-5556] [ACS-5557] mat-datepicker component added and removed old mat-datetimepicker component from UI~~ [ACS-5556] [ACS-5557] [ACS-5558] [ACS-5559] [ACS-5602] [ACS-5603] mat-datepicker component added and removed old mat-datetimepicker component from UI Jul 12, 2023

DenysVuika reviewed Jul 17, 2023

View reviewed changes

DenysVuika reviewed Jul 18, 2023

View reviewed changes

jatin2008 force-pushed the dev-jatin-ACS-5557 branch 3 times, most recently from ae00544 to 53a4d32 Compare July 21, 2023 10:50

jatin2008 marked this pull request as ready for review July 21, 2023 11:41

jatin2008 requested review from eromano and popovicsandras as code owners July 21, 2023 11:41

jatin2008 requested a review from DenysVuika July 21, 2023 11:41

eromano force-pushed the develop branch from 94a90c4 to 049fb16 Compare July 24, 2023 07:30

nikita-web-ua reviewed Jul 24, 2023

View reviewed changes

jatin2008 force-pushed the dev-jatin-ACS-5557 branch from 82d3488 to 0df3e02 Compare July 24, 2023 09:08

jatin2008 requested a review from nikita-web-ua July 24, 2023 09:24

rbahirsheth approved these changes Jul 24, 2023

View reviewed changes

AleksanderSklorz reviewed Jul 25, 2023

View reviewed changes

MichalKinas added do not merge 🙅🏻‍♂️ A/N BDU labels Jul 26, 2023

swapnil-verma-gl added 3 commits July 27, 2023 11:14

[ACS-4985] Added SearchFilterTabbedComponent and SearchDateRangeAdvan…

f8455a5

…cedComponent. Added config for using the new components

[ACS-4985] Using widget-composite component now correctly updates the…

df1801d

… search query on submit. Added optional property to disable update on submit button click for widget-composite.

[ACS-4985] Added compatibility of all search filters/facets with Sear…

0bb2e00

…chFilterTabbedComponent

swapnil-verma-gl and others added 25 commits July 27, 2023 11:14

[ACS-4985] Removed unused code from base-query-builder.service.ts

05f2524

[ACS-4985] Resolved PR review comments

b16fd58

[ACS-4985] Transferred business logic from SearchDateRangeAdvancedCom…

884568e

…ponent and SearchFilterTabbedComponent to SearchDateRangeAdvancedTabbedComponent. Updated test cases accordingly

[ACS-4985] Updated test cases for SearchDateRangeAdvancedTabbedComponent

33575c5

[ACS-4985] Added borders to inputs

f937cbf

[ACS-4985] Fixed code smell in regex

f62f74b

[ACS-4985] Resolved lint issues

c4aaa8f

[ACS-4985] Updated query generation logic. Now both 'In the last' and…

d4de517

… 'Between' options use the start date to end date query format

[ACS-4985] Added missing null check when generating query

fd2ee24

[ACS-4985] Resolved issue where typing a special character after addi…

fb9c13a

…ng some numbers in the 'In the last' input field would clear out the field

[ACS-4985] Added documentation to versionIndex.md and README.md

456b9d0

[ACS-4985] Moved new components to v6.2.0 in versionIndex.md

3a95445

[ACS-4985] Resolved e2e test failures

8dd9ff5

Testing global install of webdriver-manager for e2e webdriver fix

354b5a4

[ACS-4985] Revert test fix for e2e execution. Updated search.config.t…

b08093a

…s for e2e test cases

mat-datepicker component added and removed old mat-datetimepicker com…

aa7daae

…ponent

endof('day') addition when no time is present as we are using new dat…

7a66328

…epicker calendar now.

modification of test cases as per endof the day changes in new code

14c339e

default date format setting changes as we now using new calendar

fa783e2

date-fns implementation in card-view-datetime component and added/mod…

dcbe39a

…ified test cases for the component.

minimized duplications for code redundancy in test cases

8f74b8a

review changes addressed

388b2ab

review comments addressed

5f0086c

duplicate code removed after rebasing my branch

22153a1

added type MatDatepickerInputEvent for parameter $event

ef0b2ae

jatin2008 force-pushed the dev-jatin-ACS-5557 branch from 75429b2 to ef0b2ae Compare July 27, 2023 05:47

DenysVuika reviewed Oct 10, 2023

View reviewed changes

DenysVuika closed this Oct 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[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

[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

jatin2008 commented Jul 11, 2023 •

edited

Loading

DenysVuika Jul 17, 2023

jatin2008 Jul 20, 2023

DenysVuika Jul 17, 2023

jatin2008 Jul 25, 2023

DenysVuika Jul 18, 2023

jatin2008 Jul 20, 2023

nikita-web-ua Jul 24, 2023

jatin2008 Jul 24, 2023

jatin2008 Jul 24, 2023

AleksanderSklorz Jul 25, 2023

jatin2008 Jul 26, 2023 •

edited

Loading

MichalKinas Jul 26, 2023

AleksanderSklorz Jul 26, 2023

MateuszHY Jul 26, 2023

rbahirsheth Jul 27, 2023

AleksanderSklorz Jul 25, 2023

MateuszHY commented Jul 25, 2023

AleksanderSklorz Jul 25, 2023

jatin2008 Jul 26, 2023

AleksanderSklorz Jul 26, 2023

jatin2008 Jul 27, 2023

MichalKinas Jul 27, 2023

MichalKinas Jul 27, 2023

jatin2008 commented Jul 26, 2023

sonarqubecloud bot commented Jul 27, 2023

DenysVuika Oct 10, 2023

DenysVuika commented Oct 10, 2023

[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

[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

Conversation

jatin2008 commented Jul 11, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jatin2008 Jul 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MateuszHY commented Jul 25, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jatin2008 commented Jul 26, 2023

sonarqubecloud bot commented Jul 27, 2023

Choose a reason for hiding this comment

DenysVuika commented Oct 10, 2023

jatin2008 commented Jul 11, 2023 •

edited

Loading

jatin2008 Jul 26, 2023 •

edited

Loading