[Dataverse] Additional filters - Datepicker filter

[ChaimaaZaoui]

Feature: [Dataverse] Additional filters - Datepicker filter

As an end-user of the portal on the .../dataversepage, I want to filter the dataverse by temporal coverage So that only items in a specific time period are shown

Acceptance criteria

Scenario 1 : Filter type : Datepicker

Given that I am an end-user navigating the portal And I am using a desktop device, When I am on the .../dataverse page, And I want to filter by date, Then the following fields are displayed:

• From Datepicker
• To Datepicker

By default, no date is selected, and the datepicker displays the format DD/MM/YY.

Additionally, I expect the datepicker to have the following advanced functionalities:

• There are no select or remove buttons.
• Clicking on the datepicker opens the calendar.
• Upon clicking on a date, that date is selected, and the calendar closes.

Advanced Functionalities: If a date is already selected:

• Clicking on a new date selects the new date and closes the calendar.
• Clicking on the same date deselects the date and automatically closes the input.

Furthermore, when I click on the datepicker, the calendar should be focused on today's date, both for the start and finish date.

The date range for the datepicker is as follows:

• Past Years: 100 years
• Future Years: 20 years

Select and Option dropdown won't be customized due to browser limitations. (@0xLodz )

Scenario 2 : Internationalisation

ENG

From... To...

Mo Tu We Th Fr Sa Su

FR

De... A...

Lu Ma Me Je Ve Sa Di

DE

Von... Bis...

Mo Di Mi Do Fr Sa So

Resources

Mockups

Mock-ups are available on Figma Dev FIle, Page "Version 2 - FOR LATER"

Environment

• staging URL: https://app.staging.okp4.network/

Additional informations

None.

┆Issue is synchronized with this Wrike task by Unito

[ChaimaaZaoui]

DOR

• [x] title, description, and value statement
• [x] acceptance criteria (scenarios)
• [x] mockups (all devices and themes)
• [x] labels added
• [x] US presented to DEV team (refinement)
• [x] attached to an epic
• [x] estimation (planning poker)
• [x] external dependencies if applicable

[ChaimaaZaoui]

@fredericvilcot @lolottetheclash please work on the technical definition to present it to the team in the upcoming Planning poker (04/05)

[lolottetheclash]

Since this component is intended to integrate our design system, it will be built from scratch.

[ChaimaaZaoui]

Hey team! Please add your planning poker estimate with Zenhub @0xLodz @lolottetheclash @AnjaMis @ErikssonJoakim

[ChaimaaZaoui]

No library will be used for the UI, however for date management, a library could be used to be confirmed with @fredericvilcot

[loiclaudet]

Proposal to use React DayPicker Library

Hi team! I wanted to propose a solution that I think could save us a significant amount of development time and resources. While I understand and respect the decision to limit the use of UI library for our project, I believe it would be beneficial to make an exception for the date picker component. During my research I have found a library called React DayPicker, that could be a perfect fit for our needs.

Here are a few reasons why I think React DayPicker would be a great solution:

Saves time and resources

Building a date picker from scratch is a complex task. It involves handling user input, managing state, and ensuring cross-browser compatibility, etc. React DayPicker has already solved these problems. By using it, we could significantly reduce the amount of time and effort required to build the date picker.

Flexibility and customizability

React DayPicker is flexible and customizable. It allows to create a date picker that fits our needs and our design. We can choose which features to include and how the date picker should look and feel, which was initially one of our main concern.

Maintained and well documented

React DayPicker is actively maintained and has comprehensive documentation. This means that we can expect regular updates and improvements, and it would be easy for us to learn how to use it and integrate it into the project.

Broad adoption and positive reviews

The library is widely used and has received positive feedback from the developer community. It is used in the Date Range Picker for shadcn/ui components

Facilitates date management

It has features for managing date ranges, which is what we need. It can handle the complexity of date management with date-fns, which is, as luxon, a lightweight alternative to moment.

I believe React DayPicker could be a great solution for the date picker. I understand that using a library is a significant decision, and I would be more than happy to discuss this proposal further.

[fredericvilcot]

@0xLodz

Thanks for your analysis.

To build this component, we need a modal version that can interact with two inputs fields. (see mockup - From / To)

As far as I see this library provides either a single modal component either a range selection without modal component, that seems to not fit our needs.

Furthermore, I will add 2 points:

• the code snippets provided by the library look a bit messy to me..
• the technical requirement for this issue was to build it from scratch to be compliant with our future design system which will come soon

So, tell me what do you think about implementing it from scratch in terms of deadlines and complexity, thx

[loiclaudet]

@fredericvilcot

Thank you for your thoughtful feedback. I understand your concerns and I agree that it's crucial that any solution we adopt fits our specific needs and aligns with our future design system.

However, I believe that using a library can still be valuable, even considering the points you have raised.

While the React Day Picker may not provide a modal solution for the range selection, it does not restrict us from creating one. We can create a modal component that wraps around the date picker. The date picker itself is responsible for selecting and managing dates, while the modal component is responsible for the user interaction. Please look at the Date Range Picker in this exemple.

The provided code snippets doesn't look messy to me. However I agree that the library code quality must respect our standards. If not, I understand that we need to build it from scratch. Since React DayPicker is customizable, we can style it to match our future design system.

In terms of implementing the date picker from scratch, it's certainly possible, but I believe it will be a complex and time-consuming task. It could take several weeks to build and test a robust, feature-complete date picker. On the other hand, using React DayPicker (or a similar solution), we could have a working date picker in a much shorter time, which would allow us to focus on other parts of the project.

We can create a POC using this library with a custom modal component, if that would help to illustrate my points. Please let me know what you think.

[loiclaudet]

Technical Specification

Overview

The goal of this issue is to create a Calendar component for our design system. The component will be based on the React DayPicker library and will be displayed using the Popover component from Radix UI. The Calendar component will have several variations as illustrated in the provided design:

Technical Details

Libraries: React DayPicker and Radix UI

React DayPicker is a date picker library for React.js. It is well-documented, actively maintained, and facilitates date management, especially for managing date ranges. More details can be found in this comment.

Radix UI provides a Popover component that we will use to display the datepicker. The Popover component is a lightweight, customizable, and accessible component that is perfect for our needs.

Implementation

The Calendar component will be integrated into our design system. It will allow users to select a date or a date range depending on the variation used.

The variations of the Calendar component include:

• Date Selection: A simple date picker for selecting a single date.
• Date Range: A date picker for selecting a range of dates.
• Date Range Double View: A date picker for selecting a range of dates, with a double view for easier selection of a wide range.

In the context of dataverse filters, the calendar displayed is the Date Range Double View variation, shown and hidden as a popover after clicking on the From / To input buttons.

The component might be dynamically imported using React lazy and suspense API, since it doesn't represent critical content on page load.

Ontology query update

• update the WHERE condition of the ontology query, by filtering on the selected date or date range.
• update the dataverse domain by adding a filter by date or date range

[loiclaudet]

@ChaimaaZaoui could you please confirm the behavior of these buttons? "When a user clicks on any of them, the Calendar in it's Date Range Double View variation is displayed above them, as a popover". Is this scenario correct? Thanks

[MdechampG]

@0xLodz , as seen with @SpicySalm0n it's exactly that.

[lolottetheclash]

@0xLodz thanks for this tech spec, it seems good for me 👍

[loiclaudet]

@MdechampG do we need to handle calendar display on mobile? If yes, do we have associated mockups? Thanks

[SpicySalm0n]

@0xLodz I think that a specific display is needed for the mobile version but no mockup has been made but I am thinking, for example, of splitting the date selection into two parts in order to display only one calendar at a time (start and end)

[loiclaudet]

@SpicySalm0n it sounds good, thanks for the details! Is it possible to make a proposal for the calendar mobile display? Thank you

[SpicySalm0n]

@0xLodz Yes here is the display:

I put it on the DEV file since it has been validated

[ChaimaaZaoui]

For the date picker, date range design will be handled later; A button to "remove date" will also be needed on desktop; the date range will be Past Years: 100 years ; Future Years: 20 years; Days in the calenders must also be translated

[ChaimaaZaoui]

@0xLodz & @lolottetheclash the US is fully updated

[lolottetheclash]

@ChaimaaZaoui are you sure about this: "By default, no date is selected, and the datepicker displays the format DD/MM/YY." ? We've designed the display to be dynamic according to the user's chosen language, ok for you?

[loiclaudet]

@ChaimaaZaoui here are the displayed placeholders for existing languages:

• french: DD/MM/YY
• english: MM/DD/YY
• german: DD.MM.YY

[ChaimaaZaoui]

@lolottetheclash & @0xLodz that's fine for me in terms of language adaptation.

[ChaimaaZaoui]

Tested, All scenarios are OK