Feature/131 add date input components #265

BeneRichi · 2023-01-10T16:43:08Z

Pull request

I added two existing datepicker components from an other project into the boilerplate template. All necessary styles, helpers and dependencies have been installed to make those components work.

Ticket

131

Browser testing

- link

Checklist

I merged the current development branch (before testing)
[] Added JSDoc and styleguide demo
Tested all links in project relevant browsers
Tested all links in different screen sizes
Did run automated tests and linters
Did assign ticket
Double checked target branch

Review/Test checklist

Did review code and documentation
Tested all links in project relevant browsers
Tested all links in different screen sizes
Did check accessibility (Wave, only errors)
Re-assign ticket to developer

…webpack config

patric-eberle · 2023-01-12T13:45:29Z

@BeneRichi should this one be reviewed or is it still work in progress?

BeneRichi · 2023-01-12T14:33:02Z

@patric-eberle This should be reviewed.

patric-eberle

Browser review

Todo:

Please add the missing translations listed in the console when using the date picker on http://localhost:9090/styleguide/sandbox/forms
Please also add a demo for a range datepicker (by adding the range attribute to the c-date-picker element.
Calendar layout: please stretch or center the calendar in the available space.
There are exceptions in the console about missing method. Please make sure you always test with open console and do a final browser testing (with open console) before requesting a Code Review.

The rest looks good. Great work 🎉

src/components/c-date-picker.vue

patric-eberle · 2023-01-19T07:32:40Z

src/components/c-date-picker.vue

+
+<script>
+  import Pikaday from 'pikaday';
+  import eDate from '@/components/e-date';


todo: we'll have to move the e-date component to the elements folder, once that branch was merged.

src/components/c-date-picker.vue

src/components/e-date.vue

patric-eberle · 2023-01-19T08:35:40Z

src/setup/scss/_extends.scss

@@ -0,0 +1,2 @@
+@forward 'extends/button-reset';


note: in Vue 3 these extends can be removed, since we complete reset all browser styles there by default.

src/styleguide/routes/forms.vue

src/components/e-date.vue

…<cDatePicker /> - rename form data properties to startDate and endDate and make them equal with today's date as default

…d height of an e-icons with the size attribute - separate nested if statements to simplify readability - rewrite comments

…" to be used inside the options object in the new VueI18n instance - call i18n.setDateTimeFormat() after fetching current page locale

…t in "const dateTimeFormats" to be used inside the options object in the new VueI18n instance - call i18n.setDateTimeFormat() after fetching current page locale

patric-eberle

Browser review

The single date field demo is not working anymore, because its value property form.date was removed.
The calendar allows keyboard navigation (arrow keys) but as soon as you hit the right arrow key, the value gets submitted. Can this fixed, so that only enter submits the value? (Maybe this bug is also related to the duplicated event binding I mentioned in the code.
The label text is always red. Can you please change the default color to a grayscale color? THX.

src/components/c-date-picker.vue

src/components/e-date.vue

src/setup/scss/variables/_color.scss

src/styleguide/routes/forms.vue

…fter code block - removed duplicated keypress event - changed background color of date fields from color-grayscale-800 to 600 - changed color of date input field's labels - removed color shade 800 from _color.scss - move static attribute without value after static one with value - add form.date value property to make it a directive - changed input field width Signed-off-by: BeneRichi <[email protected]>

…color-grayscale--700 from _color.scss to reduce color classes Signed-off-by: BeneRichi <[email protected]>

BeneRichi · 2023-02-01T14:45:51Z

"The calendar allows keyboard navigation (arrow keys) but as soon as you hit the right arrow key, the value gets submitted. Can this fixed, so that only enter submits the value? (Maybe this bug is also related to the duplicated event binding I mentioned in the code."

@patric-eberle We have tested this again in IV and unfortunately it works the same way. Probably the calendar functionality has been extended. We need to take a close look together. Commit in IV: fde331dcb7f07e0d8cec8abbe90409a9264b9ee7

…component

BeneRichi added 7 commits January 10, 2023 13:05

131 Install pikaday - Enable dayjs plugin - ignore moment warning in …

ddabdc1

…webpack config

#131 Add existing components + scss and helper files

6b2a16c

#131 Add translation strings for date picker labels

2e42016

#131 Remove rem method from margin style

6924d63

#131 Use pikaday dependency styles and add rem function file

95213ad

#131 Add danger color state for theme(s)

46109af

#131 Add date-picker components to test them with v-model

c44f26e

BeneRichi assigned patric-eberle Jan 10, 2023

patric-eberle self-requested a review January 18, 2023 16:25

patric-eberle suggested changes Jan 19, 2023

View reviewed changes

patric-eberle assigned BeneRichi and unassigned patric-eberle Jan 19, 2023

BeneRichi added 7 commits January 20, 2023 11:11

#131 Add translations for c-date-picker labels inside the calendar

a646146

#131 Add new grayscale--800 shade to match the pickaday dependency style

f02bb4a

#131 Add range attribute, dynamic :start.sync and :end.sync props on …

4494ecf

…<cDatePicker /> - rename form data properties to startDate and endDate and make them equal with today's date as default

#131 Removed rem() function on both components - declare the width an…

dbe76e9

…d height of an e-icons with the size attribute - separate nested if statements to simplify readability - rewrite comments

#131 Defined "month" template and stored it in "const dateTimeFormats…

1f3f7f1

…" to be used inside the options object in the new VueI18n instance - call i18n.setDateTimeFormat() after fetching current page locale

#131 Defined "month, weekday and weekdayNarrow" template and stored i…

7776793

…t in "const dateTimeFormats" to be used inside the options object in the new VueI18n instance - call i18n.setDateTimeFormat() after fetching current page locale

#131 Removed spacing to resolve ESlint warning

43f10f4

patric-eberle suggested changes Jan 24, 2023

View reviewed changes

BeneRichi added 2 commits January 30, 2023 18:18

#131 Change $color-grayscale--700 to $color-grayscale--600 - remove $…

c72db4f

…color-grayscale--700 from _color.scss to reduce color classes Signed-off-by: BeneRichi <[email protected]>

BeneRichi assigned patric-eberle and unassigned BeneRichi Feb 1, 2023

#131 removes keyboard support for c-date-picker, since it breaks the …

4e8a009

…component

patric-eberle approved these changes Feb 3, 2023

View reviewed changes

patric-eberle merged commit 99c87cf into vue-2 Feb 3, 2023

patric-eberle deleted the feature/131_add_date_input_components branch February 3, 2023 15:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/131 add date input components #265

Feature/131 add date input components #265

Uh oh!

BeneRichi commented Jan 10, 2023 •

edited by patric-eberle

Loading

Uh oh!

patric-eberle commented Jan 12, 2023

Uh oh!

BeneRichi commented Jan 12, 2023

Uh oh!

patric-eberle left a comment •

edited by BeneRichi

Loading

Uh oh!

Uh oh!

patric-eberle Jan 19, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

patric-eberle Jan 19, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

patric-eberle left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

BeneRichi commented Feb 1, 2023

Uh oh!

Uh oh!

Feature/131 add date input components #265

Feature/131 add date input components #265

Uh oh!

Conversation

BeneRichi commented Jan 10, 2023 • edited by patric-eberle Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request

Ticket

Browser testing

Checklist

Review/Test checklist

Uh oh!

patric-eberle commented Jan 12, 2023

Uh oh!

BeneRichi commented Jan 12, 2023

Uh oh!

patric-eberle left a comment • edited by BeneRichi Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patric-eberle Jan 19, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

patric-eberle Jan 19, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

patric-eberle left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

BeneRichi commented Feb 1, 2023

Uh oh!

Uh oh!

BeneRichi commented Jan 10, 2023 •

edited by patric-eberle

Loading

patric-eberle left a comment •

edited by BeneRichi

Loading

patric-eberle left a comment •

edited

Loading