Add date filter #747
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 |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React, { FormEvent, useState } from 'react'; | ||
| import { DateTime } from 'luxon'; | ||
|
|
||
| import { DatePicker, InputGroup, ToolbarFilter } from '@patternfly/react-core'; | ||
|
|
||
| import { FilterTypeProps } from './types'; | ||
|
|
||
| /** | ||
| * This Filter type enables selecting a single date (a day). | ||
| * | ||
| * **FilterTypeProps are interpreted as follows**:<br> | ||
| * 1) selectedFilters - dates in YYYY-MM-DD format (ISO date format).<br> | ||
| * 2) onFilterUpdate - accepts the list of dates.<br> | ||
| * | ||
| * [<img src="static/media/src/components-stories/assets/github-logo.svg"><i class="fi fi-brands-github"> | ||
| * <font color="green">View component source on GitHub</font>](https://github.com/kubev2v/forklift-console-plugin/blob/main/packages/common/src/components/Filter/DateFilter.tsx) | ||
| */ | ||
| export const DateFilter = ({ | ||
| selectedFilters = [], | ||
| onFilterUpdate, | ||
| title, | ||
| filterId, | ||
| placeholderLabel, | ||
| showFilter = true, | ||
| }: FilterTypeProps) => { | ||
| const validFilters = | ||
| selectedFilters | ||
| ?.map((str) => DateTime.fromISO(str)) | ||
| ?.filter((dt: DateTime) => dt.isValid) | ||
| ?.map((dt: DateTime) => dt.toISODate()) ?? []; | ||
|
|
||
| // internal state - stored as ISO date string (no time) | ||
| const [date, setDate] = useState(DateTime.now().toISODate()); | ||
|
|
||
| const clearSingleDate = (option) => { | ||
| onFilterUpdate([...validFilters.filter((d) => d !== option)]); | ||
| }; | ||
|
|
||
| const onDateChange = (even: FormEvent<HTMLInputElement>, value: string) => { | ||
| // require full format "YYYY-MM-DD" although partial date is also accepted | ||
| // i.e. YYYY-MM gets parsed as YYYY-MM-01 and results in auto completing the date | ||
| // unfortunately due to auto-complete user cannot delete the date char after char | ||
| if (value?.length === 10 && DateTime.fromISO(value).isValid) { | ||
| const targetDate = DateTime.fromISO(value).toISODate(); | ||
| setDate(targetDate); | ||
| onFilterUpdate([...validFilters.filter((d) => d !== targetDate), targetDate]); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <ToolbarFilter | ||
| key={filterId} | ||
| chips={validFilters} | ||
| deleteChip={(category, option) => clearSingleDate(option)} | ||
| deleteChipGroup={() => onFilterUpdate([])} | ||
| categoryName={title} | ||
| showToolbarItem={showFilter} | ||
| > | ||
| <InputGroup> | ||
| <DatePicker | ||
| value={DateTime.fromISO(date).toISODate()} | ||
| dateFormat={(date) => DateTime.fromJSDate(date).toISODate()} | ||
| dateParse={(str) => DateTime.fromISO(str).toJSDate()} | ||
| onChange={onDateChange} | ||
| aria-label={title} | ||
| placeholder={placeholderLabel} | ||
| invalidFormatText={placeholderLabel} | ||
| // default value ("parent") creates collision with sticky table header | ||
| appendTo={document.body} | ||
| /> | ||
| </InputGroup> | ||
| </ToolbarFilter> | ||
| ); | ||
| }; |
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
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
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 |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { DateTime } from 'luxon'; | ||
|
|
||
| /** | ||
| * Converts a given ISO date string in a known format and timezone to a UTC ISO string. | ||
| * | ||
| * @param {string} isoDateString - The ISO date string in a known format and timezone. | ||
| * @returns {string} The equivalent UTC ISO string if date is valid or undefined otherwise. | ||
| */ | ||
| export function convertToUTC(isoDateString: string): string | undefined { | ||
| const date = DateTime.fromISO(isoDateString); | ||
| return date.isValid ? date.toUTC().toISO() : undefined; | ||
| } |
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
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
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
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
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
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
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.
p.s.
the next task is
from .. toit makes sense to use '>=' overhasSameusing
>=as the added benefit of using standards, JSDateis standard whileluxonis implementing none standard date formatsThere 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.
Date range filter will use a different matcher but I do plan to use
luxonthere as well.IMHO this is the standard approach.
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.
that is actually a "task completion definition", i explicitly requested to implement the filter without using external libraries, unless it's very hard to implement using vanilla type script, I explained that I would like to remove the requirement if possible.
the rule of thumb was that if implementing the filter will take a lot of code more using vanilla type script, then it is ok to use a library. In this case it's possible to create a method that can be reusable between all the date-time watchers and will actually use less lines of code and be more readable when using vanilla typescript, see examples above, please drop the requirement on the external library in this case.
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.
The code you proposed is interesting but cannot compete with an established library in terms of reliability and readability. I understand there are some other benefits of this approach. Let us discuss this later on.
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.
hmm, Date is a library that is part of the core of java script, it's reliable and readable ( depending on the writer :-) )
Discussion is always appreciated, for this PR, please don't use the library.
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.
OK. Let's put in on hold until we clear this issue.