Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(cat-voices): Date & Time input widget #1224

Merged
merged 20 commits into from
Nov 29, 2024
Merged

feat(cat-voices): Date & Time input widget #1224

merged 20 commits into from
Nov 29, 2024

Conversation

LynxLynxx
Copy link
Contributor

@LynxLynxx LynxLynxx commented Nov 18, 2024 •
edited
Loading

Description

This is a new component that uses two standard text-fields bonded together to provide a date/time selection widgets to setup the most important campaign dates.

Related Issue(s)

Resolves #1181

Description of Changes

Adding new widget with controllers to select date and time.

Nagranie.z.ekranu.2024-11-18.o.14.32.23.mov

Requirements

Manual input requirements / date

  • Text field behaviour is the same as text-fields.
  • manual input validation follows dd/mm/yyyy
  • During input show: Format: "dd/mm/yyyy" in red
  • Dates cannot be saved when validation does not resolve.

Manual input requirements / time

  • Text field behaviour is the same as text-fields.
  • manual input validation follows 00:00 (1-00, 24h / 1-00m, 60min)
  • During input show: Format: "00:00" in red
  • Time cannot be saved when validation does not resolve.

Widget guided select date

  • Pressing date icon, opens date select widget
  • Data range is today + 1yr
  • If user cancels out of widget, current date is set.
  • clear, set date to current date
  • month <> jumps one month back/forth
  • year dropdown shows years, current date + 1yr
  • On 'OK' date is filled in the text-field

Widget guided select time

  • Pressing time icon, opens time select widget
  • Show time with increments of 30min,
  • Show 9 timeslots + scroll
  • On select time is filled in the text-field

Screenshots

If applicable, add screenshots to help explain your changes.

Please confirm the following checks

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream module

@LynxLynxx LynxLynxx added do not merge yet PR is not ready to be merged yet comment me Request for comments ux/ui UX/UI related issues labels Nov 18, 2024
@LynxLynxx LynxLynxx self-assigned this Nov 18, 2024
@LynxLynxx LynxLynxx requested a review from minikin as a code owner November 18, 2024 10:52
@LynxLynxx LynxLynxx added review me PR is ready for review and removed do not merge yet PR is not ready to be merged yet comment me Request for comments labels Nov 18, 2024
@LynxLynxx LynxLynxx changed the base branch from main to mve3 November 18, 2024 13:42
@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 29/29}$ | ${\color{red}Fail: 0/29}$ |

@damian-molinski damian-molinski added the dart Pull requests that update Dart code label Nov 18, 2024
damian-molinski
damian-molinski requested changes Nov 19, 2024
View reviewed changes
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/voices_time_picker.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/voices_time_picker.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/voices_time_picker.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/voices_time_picker.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/voices_time_picker.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/date_picker_controller.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/date_picker_controller.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/date_picker_controller.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/voices_date_picker_field.dart Outdated Show resolved Hide resolved
catalyst_voices/apps/voices/lib/widgets/text_field/date_picker/voices_date_picker_field.dart Outdated Show resolved Hide resolved
@damian-molinski
Copy link
Contributor

One more thing, make sure to you can jump focus from one text field to next with tab, probably exclude calendar/clock from focus or implement focus travel

@LynxLynxx
feat: refactor date and time pickers to use DateTime for better consi…
84bc0ee 
…stency and state management across the application
@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 343/343}$ | ${\color{red}Fail: 0/343}$ |

@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 343/343}$ | ${\color{red}Fail: 0/343}$ |

@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 346/346}$ | ${\color{red}Fail: 0/346}$ |

@damian-molinski
refactor: date time text field (#1293)
7fcb3af 
* refactor: date time text field

* fix: doc reference
@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 346/346}$ | ${\color{red}Fail: 0/346}$ |

@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 346/346}$ | ${\color{red}Fail: 0/346}$ |

damian-molinski
damian-molinski previously approved these changes Nov 29, 2024
View reviewed changes
Copy link
Contributor

@damian-molinski damian-molinski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 346/346}$ | ${\color{red}Fail: 0/346}$ |

@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 346/346}$ | ${\color{red}Fail: 0/346}$ |

@github-actions GitHub Actions
Copy link
Contributor

✅ Test Report | ${\color{lightgreen}Pass: 346/346}$ | ${\color{red}Fail: 0/346}$ |

@LynxLynxx LynxLynxx merged commit 82ffa5a into mve3 Nov 29, 2024
38 checks passed
@LynxLynxx LynxLynxx deleted the feature/1181-date-time-widget branch November 29, 2024 14:55
LynxLynxx added a commit that referenced this pull request Dec 4, 2024
@LynxLynxx @dtscalac @damian-molinski
feat(cat-voices): Date & Time input widget (#1224)
2255065 
* feat: ui widget for date picker commponent

* feat: custom controller for date picker widget

* feat: adding validation to textfields

* feat: enhance date picker with improved validation and error handling messages

* feat: improve overlay management in date picker and enhance scroll controller handling in text fields

* fix: overlay switch between date and time

* chore: remove cached gitignore files

* fix: update OK button text in VoicesCalendarDatePicker for localization consistency

* feat: refactor date and time pickers to use DateTime for better consistency and state management across the application

* feat: implement new date and time picker modules with validation and controllers for better UI interaction

* fix: static-analytics

* refactor: date time text field (#1293)

* refactor: date time text field

* fix: doc reference

* feat: add date/time input formatting to date and time fields

* fix: late final in voices_date_field.dart

* fix: late final in voices_time_field.dart

* fix: formatting

---------

Co-authored-by: Dominik Toton <[email protected]>
Co-authored-by: Damian Moliński <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@damian-molinski damian-molinski damian-molinski approved these changes

@minikin minikin Awaiting requested review from minikin minikin is a code owner

@dtscalac dtscalac Awaiting requested review from dtscalac

Assignees

@LynxLynxx LynxLynxx

Labels
dart Pull requests that update Dart code review me PR is ready for review ux/ui UX/UI related issues
Projects
Catalyst
Archived in project
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

🛠️ [TASK] : Date & Time input
3 participants
@LynxLynxx @damian-molinski @dtscalac