feat(grid): expose editorOptions for the default editors and improve built-in editing for date/time cols (input formats) #14465

ddaribo · 2024-07-03T08:17:02Z

Related to #14009 and #14010

Additional information (check all that apply):

Checklist:

All relevant tags have been applied to this PR
This PR includes unit tests covering all the new code (test guidelines)
This PR includes API docs for newly added methods/properties (api docs guidelines)
This PR includes feature/README.MD updates for the feature docs
This PR includes general feature table updates in the root README.MD
This PR includes CHANGELOG.MD updates for newly added functionality
This PR contains breaking changes
This PR includes ng update migrations for the breaking changes (migrations guidelines)
This PR includes behavioral changes and the feature specification has been updated with them - compare revisions
TODO: refactor the column datat types spec after comments, update editors spec

…ithub.com/IgniteUI/igniteui-angular into bpachilova/grid-editor-options-feat-14009

…d FieldType

…missing

…lter inputs

…ime types

…actor logic

…before

damyanpetev · 2024-10-03T15:13:32Z

projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts

+        if (value) {
+            this._inputFormat = value;
+        }


Hm, I think the check can be omitted - if the option can be falsy (and is by default) and used to behave that way too, it should be able to accept such value to revert to an initial state. Same goes for displayFormat

projects/igniteui-angular/src/lib/date-common/util/date-time.util.ts

projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts

projects/igniteui-angular/src/lib/date-common/util/date-time.util.ts

damyanpetev · 2024-10-03T16:45:12Z

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

+        if (value) {
+            this._inputFormat = value;
+            if (this.hasProjectedInputs) {
+                this.updateInputFormat();
+            }
+        }


Same logic with the picker base - the old functionality around updateInputFormat didn't care if there was a value or not.
Also you could use super.inputFormat to avoid rewriting the same get/set logic, IIRC it should work with our compile options. It's already in the state directive.

Same could go for the displayFormat, assuming the override is for documentation snippet purposes?

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

damyanpetev · 2024-10-03T16:50:39Z

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -500,8 +512,9 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
    /** @hidden */
    protected override setPlaceholder(_value: string): void { }

-    private updateDefaultFormat(): void {
-        this._defaultInputFormat = DateTimeUtil.getDefaultInputFormat(this.locale);
+    private updateDefaultFormat(dataType: DataType = DataType.DateTime): void {


Um wouldn't this make the editor default to date-time format if not specified, where it used to default to date-only? Don't think that'd be expected and the param isn't used, so just leave it to the old default in getDefaultInputFormat

Right, I changed this, but since this is related to the default format for the dateTime column in the grid, thought before trying to come up with anything, it would be better to discuss how it should be addressed, after this change and according to the new implementation. Currently some tests will be failing.
So far, the input format was set to a default format property (ref) defined on the FieldType interface (ref). So it is hardcoded and also includes time parts.

So, if we'd like that to remain the same, I guess it should be additionally handled for the dateTime column?

To give some more context, the input format will not be inferred from the displayFormat in this case, as the default display format for dateTime col (medium) contains non-numeric parts (ref here and here). So, it will resolve to the default one for the dateTimeEditorDirective, which will be date-only.

Okay, was going to ask how the columns even manage the difference between date/date-time because either default on the editor won't work for both. That medium format is unfortunate, but I guess it's the only reasonable option w/ time included :/
Regardless, changing the behavior of another component to suit the grid usage probably not the way to go. Would've also been nice if the spec actually specified the default inputFormat behavior rather than a remark on the API doc. Which reminds me multiple specs are also likely due an update once we're done moving around changes.

damyanpetev · 2024-10-03T16:59:33Z

CHANGELOG.md

@@ -28,6 +28,20 @@ For Firefox users, we provide limited scrollbar styling options through the foll
 - `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
 - `--sb-track-bg-color`: Sets the background color of the scrollbar track.

+#### Column editor options
+- `ColumnType`, `IgxColumn`


@ddaribo I'd still describe the auto localized input format and infer from the display(pipe) format as a separate (first) point. That could even be more impactful for more people than the new option which is an override if the new functionality doesn't produce quite what you'd like :)

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

…e both set

damyanpetev · 2024-10-04T10:36:01Z

projects/igniteui-angular/src/lib/grids/grid/column.spec.ts

+            let input = firstCell.nativeElement.querySelector('.igx-input-group__input');
+            expect((input as any).value).toEqual('01-10-2015 11:37 AM');


Since you started cleaning up the hardcoded selector elsewhere, might as well continue to query By.directive(IgxDateTimeEditorDirective) in all tests. Or make the selector a constant.
Also judging by the other tests at this point the editor isn't focused yet, right? So checking the the value will give you the display instead of checking the input format. IIRC, I think you need to wait for a rAF for the focus directive to kick in (i.e. tick(16)), though you could as well just check the intputFormat prop on the editor to confirm the column passed the correct options and the rest in theory is already covered by the editor tests.

… templates

feat(date-time-util): logic to identify numeric formats for editing

77a8696

ddaribo added the date-time-utils label Jul 3, 2024

ddaribo and others added 3 commits July 3, 2024 11:17

Merge branch 'master' into bpachilova/grid-editor-options-feat-14009

705de49

chore(date-time-util): formatting fixes

334cba2

Merge branch 'bpachilova/grid-editor-options-feat-14009' of https://g…

3648659

…ithub.com/IgniteUI/igniteui-angular into bpachilova/grid-editor-options-feat-14009

ddaribo requested review from ChronosSF and rkaraivanov July 3, 2024 08:37

ddaribo and others added 10 commits July 12, 2024 15:42

Merge branch 'master' into bpachilova/grid-editor-options-feat-14009

e24c974

fix(esf-styles): small margin fix for time picker

82c1fd3

feat(grid-interface): add editorOptions property on the ColumnType an…

602d25d

…d FieldType

feat(grid-column): get/set editorOptions and dateTimeFormat

282c896

feat(grid-cells): use editorOptions.dateTimeFormat; add locale where …

ca0f4f5

…missing

feat(grid-filters): use editorOptions.dateTimeFormat and locale on fi…

78e76c1

…lter inputs

test(grid-column-and-filtering): editors input formats

6c8e88e

chore(grid-cells): delete leftover inputFormat bindings

913a7cd

chore(column-test): fix time col format test check

fb063af

Merge branch 'master' into bpachilova/grid-editor-options-feat-14009

d5264e1

ddaribo changed the title ~~feat(date-time-util): logic to identify numeric formats for editing~~ feat(grid): expose editorOptions for the default editors and improve built-in editing for date/time cols (input formats) Jul 15, 2024

ddaribo added the grid label Jul 15, 2024

ddaribo and others added 3 commits July 15, 2024 10:23

Merge branch 'master' into bpachilova/grid-editor-options-feat-14009

dcd9517

feat(date-time-util): default locale-based format for time and date-t…

017fdfb

…ime types

feat(date-time-editors): handle default inputFormat based on locale

4c0b4fa

ddaribo force-pushed the bpachilova/grid-editor-options-feat-14009 branch from e8ca056 to 4c0b4fa Compare July 17, 2024 14:37

ddaribo added 5 commits July 19, 2024 08:40

feat(date-time-util): localize predefined formats used for input; ref…

cac8366

…actor logic

feat(date-range): handle inputFormat when locale is changed

6cee547

feat(dte-dir,pickers): handle locale change and display/input formats

360bc67

refactor(column): do not handle format transformations here

26708b2

refactor(qb): editorOptions.defaultDateTimeFormat setting

8e1196b

ddaribo force-pushed the bpachilova/grid-editor-options-feat-14009 branch 2 times, most recently from 8268f79 to b06fe16 Compare July 19, 2024 07:20

ddaribo added 3 commits October 1, 2024 16:59

chore(grid-tests): adjust tests to focus the target editor in edit mode

90ab1ed

chore(dater-range-picker-test): use variable to check expectation as …

ce5b19e

…before

chore(changelog): edit features description

72123ac

ddaribo dismissed onlyexeption’s stale review via 72123ac October 1, 2024 14:35

ddaribo and others added 5 commits October 1, 2024 17:39

Merge branch 'master' into bpachilova/grid-editor-options-feat-14009

e676e81

chore(gird-filtering-tests): fix input checks

ad76d3f

chore(grid-filtering-tests): edit input and display format props check

fe9d959

chore(query-builder): clear redundant logic after changes

2bb44ad

Merge branch 'master' into bpachilova/grid-editor-options-feat-14009

a7ffbb5

ddaribo requested a review from damyanpetev October 3, 2024 10:44

damyanpetev reviewed Oct 3, 2024

View reviewed changes

damyanpetev reviewed Oct 4, 2024

View reviewed changes

projects/igniteui-angular/src/lib/grids/columns/column.component.ts Outdated Show resolved Hide resolved

ddaribo added 8 commits October 4, 2024 12:27

fix(dte-dir): upd display value for locale wh input+display format ar…

e675433

…e both set

chore(tests): address comments

5ddf08a

chore(date-time.util): address comments

9dce296

fix(column): do not trigger grid pipes on editorOptions set

989bde0

chore(picker-base): address comments - allow falsy value as input format

daed5c0

chore(date-range): address comments

567df5b

chore(dte-dir): comment - allow falsy format, default is date format

9b78357

chore(changelog): edit description

7df2a6c

damyanpetev reviewed Oct 4, 2024

View reviewed changes

damyanpetev added the squash-merge Merge PR with "Squash and Merge" option label Oct 4, 2024

ddaribo and others added 5 commits October 4, 2024 15:08

chore(picker, date-range): refactor per comments

625b9b7

chore(column.spec): refactor tests related to focusing the cell editor

870a5b2

feat(date-time-editor.directive): add defaultInputFormatType property

bbdc60b

feat(*): set defaultInputFormatType on dateTimeEditor in grid editors…

7ace78c

… templates

Merge branch 'master' into bpachilova/grid-editor-options-feat-14009

ec9d6fb

ddaribo requested a review from damyanpetev October 7, 2024 12:55

ChronosSF requested review from ChronosSF and onlyexeption October 8, 2024 08:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(grid): expose editorOptions for the default editors and improve built-in editing for date/time cols (input formats) #14465

feat(grid): expose editorOptions for the default editors and improve built-in editing for date/time cols (input formats) #14465

ddaribo commented Jul 3, 2024 •

edited

Loading

damyanpetev Oct 3, 2024

damyanpetev Oct 3, 2024

damyanpetev Oct 3, 2024

damyanpetev Oct 3, 2024

ddaribo Oct 4, 2024

damyanpetev Oct 4, 2024

damyanpetev Oct 3, 2024 •

edited

Loading

damyanpetev Oct 4, 2024

		let input = firstCell.nativeElement.querySelector('.igx-input-group__input');
		expect((input as any).value).toEqual('01-10-2015 11:37 AM');

feat(grid): expose editorOptions for the default editors and improve built-in editing for date/time cols (input formats) #14465

Are you sure you want to change the base?

feat(grid): expose editorOptions for the default editors and improve built-in editing for date/time cols (input formats) #14465

Conversation

ddaribo commented Jul 3, 2024 • edited Loading

Additional information (check all that apply):

Checklist:

damyanpetev Oct 3, 2024

Choose a reason for hiding this comment

damyanpetev Oct 3, 2024

Choose a reason for hiding this comment

damyanpetev Oct 3, 2024

Choose a reason for hiding this comment

damyanpetev Oct 3, 2024

Choose a reason for hiding this comment

ddaribo Oct 4, 2024

Choose a reason for hiding this comment

damyanpetev Oct 4, 2024

Choose a reason for hiding this comment

damyanpetev Oct 3, 2024 • edited Loading

Choose a reason for hiding this comment

damyanpetev Oct 4, 2024

Choose a reason for hiding this comment

ddaribo commented Jul 3, 2024 •

edited

Loading

damyanpetev Oct 3, 2024 •

edited

Loading