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

Table allows configuration of datetime column type #1014

Closed
8 tasks done
nate-ni opened this issue Jan 30, 2023 · 0 comments
Closed
8 tasks done

Table allows configuration of datetime column type #1014

nate-ni opened this issue Jan 30, 2023 · 0 comments
Assignees
@m-akinc
Labels
enhancement New feature or request
Milestone
Table Milestone 5

Comments

@nate-ni
Copy link
Contributor

nate-ni commented Jan 30, 2023 •
edited by m-akinc
Loading

😯 Problem to Solve

There is a need to provide a date (and/or time) column type. Initially, only date may be needed.
Having a column for this type provides support for sorting, grouping and filtering. It will also be able to integrate locale specific formatting to support i18n and l10n.

Scope

In

Displaying the date to the user in a locale correct format for numeric displays
Providing display format options (long year, short year, etc.)
Sorting of column works as expected

Out

Open Questions

  • Do we need to support time display in the initial version?
    • Probably
  • Do we provide numeric (01/01/2023) AND text (January 01, 2023) versions of formatting?
    • How does that work along with locale specific formatting?
  • Will we need a 3rd party library for formatting? (date-fns, moment, luxon, etc.??). If so which one?
  • What type(s) of input do we accept for this column type (Date object, timecode seconds, timecode ms.?)
  • Which width modes should the column support? Both fixed pixel width and fractional width?

Prior Art

Example of date being used

image

Image

📋 Tasks
Beta Give feedback
@nate-ni nate-ni added enhancement New feature or request triage New issue that needs to be reviewed labels Jan 30, 2023
@nate-ni nate-ni added this to the Table Milestone 2 milestone Jan 30, 2023
@nate-ni nate-ni mentioned this issue Jan 31, 2023
Closed
1 task
@jattasNI jattasNI removed the triage New issue that needs to be reviewed label Jan 31, 2023
@nate-ni nate-ni mentioned this issue Feb 1, 2023
Closed
@nate-ni nate-ni removed the June label Feb 14, 2023
@jattasNI jattasNI mentioned this issue Mar 1, 2023
Closed
@jattasNI jattasNI mentioned this issue May 23, 2023
Merged
1 task
jattasNI added a commit that referenced this issue Jun 15, 2023
@jattasNI
HLD: API for number-text and date-text table columns (#1268)
838f14b 
# Pull Request

## 🤨 Rationale

Need APIs for #1011 and #1014. Builds on #1224.

## 👩‍💻 Implementation

Updates to existing HLD. Philosophy is to rely on the browser's `Intl`
formatting APIs when possible and to provide modes with opinionanted
configuration and with custom configuration.


## 🧪 Testing

N/A

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [X] I have updated the project documentation to reflect my changes or
determined no changes are needed.
@m-akinc m-akinc mentioned this issue Jul 19, 2023
Merged
1 task
@m-akinc m-akinc self-assigned this Jul 19, 2023
m-akinc added a commit that referenced this issue Jul 24, 2023
@m-akinc @jattasNI
Initial version of date column (#1363)
44e7d0d 
## 🤨 Rationale

Part of #1014 

## 👩‍💻 Implementation

This is the first, basic version of the column. It does not support any
configuration. It always formats the datetime in the way that will
become the default when we later add format configuration. The column
derives from `TableColumnTextBase`.
- component defined
- initial Storybook stories/documentation created
- unit tests written

## 🧪 Testing

Tested in Storybook and created unit tests.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: Jesse Attas <[email protected]>
@m-akinc m-akinc mentioned this issue Jul 24, 2023
Merged
1 task
m-akinc added a commit that referenced this issue Aug 1, 2023
@m-akinc
Add formatting API to date column (#1381)
0073be1 
## 🤨 Rationale

Part of #1014
Adding ability to customize formatting of dates/times.

## 👩‍💻 Implementation

- add `format` attribute and nineteen other custom formatting
configuration attributes
- add unit tests
- update Storybook story

## 🧪 Testing

Unit tests pass, and tested manually in Storybook.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
This was referenced Aug 1, 2023
Merged
Merged
@m-akinc m-akinc mentioned this issue Aug 14, 2023
Merged
1 task
m-akinc added a commit that referenced this issue Aug 16, 2023
@m-akinc @mollykreis
Angular integration for date-text table column (#1417)
d2ca08c 
## 🤨 Rationale

Part of #1014

## 👩‍💻 Implementation

nimble-angular
- directive for date-text column
- tests
- added column to example
- added `checkValidity()` and `validity` to
`NimbleTableColumnBaseDirective`. These must have been previously
overlooked.
- fixed two text column tests that were accidentally testing the table
instead

nimble-components
- The date-text column's `customHour12` property needs to have three
possible states: `true`, `false`, or `undefined`. It was being declared
as a boolen-mode attribute, though, which was preventing it from being
set to `undefined` (it would be translated to `false`). I now instead
configure a custom `optionalBooleanConverter` to handle conversion of
values to/from the view.

## 🧪 Testing

Wrote tests and they pass.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: mollykreis <[email protected]>
m-akinc added a commit that referenced this issue Aug 21, 2023
@m-akinc
Blazor support for date-text column (#1430)
0ab6b4f 
## 🤨 Rationale

Part of #1014 

## 👩‍💻 Implementation

Added Blazor integration for the nimble-table-column-date-text element.
Included tests and added date-text column to example app.

## 🧪 Testing

Tests pass and column works in example app.

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
m-akinc added a commit that referenced this issue Sep 1, 2023
@m-akinc @mollykreis @jattasNI
Add locale support to theme provider and use in date-text column (#1410)
5e462b1 
## 🤨 Rationale

Fixes #1293
Part of #1014 
Adding design token ("lang") for locale and honoring that token's value
when formatting dates in the date-text column.

## 👩‍💻 Implementation

- introduced "lang" design token with dynamic default that uses the
page's `lang` property, if valid, otherwise uses "en-US"
- new `DocumentElementLang` singleton watches page element's `lang`
property
- added `lang` property to theme provider which sets design token value
- using design token value when creating formatter used by date-text
column
- added new validation flag to theme provider that is set when the
locale is malformed
- setting 'en-US' locale for all date-text unit tests (which they were
already assuming)
- added unit tests

## 🧪 Testing

Unit tests pass (even when system locale is something other than 'en').

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

---------

Co-authored-by: mollykreis <[email protected]>
Co-authored-by: Jesse Attas <[email protected]>
@m-akinc m-akinc closed this as completed Sep 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@m-akinc m-akinc

Labels
enhancement New feature or request
Projects
Nimble Design System Priorities
Status: Done
Milestone
Table Milestone 5
Development

No branches or pull requests
4 participants
@fredvisser @m-akinc @jattasNI @nate-ni