feature/improvements-datepicker (#3798)

* Non-required + validation messages * Cont improvements * braces
Altinn · Mar 3, 2020 · 21ca039 · 21ca039
1 parent 3a64bcc
commit 21ca039
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 16 deletions.
diff --git a/...ppFrontend/react/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx b/...ppFrontend/react/altinn-app-frontend/src/components/base/CheckboxesContainerComponent.tsx
@@ -124,7 +124,7 @@ export const CheckboxContainerComponent = (props: ICheckboxContainerProps) => {
 
   return(
     <FormControl>
-      <FormGroup row={checkBoxesIsRow}>
+      <FormGroup row={checkBoxesIsRow} id={props.id}>
         {props.options.map((option, index) => (
           <React.Fragment key={index}>
             <FormControlLabel

diff --git a/...nn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DatepickerComponent.tsx b/...nn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/DatepickerComponent.tsx
@@ -5,7 +5,7 @@ import '../../styles/shared.css';
 import { Grid, useMediaQuery, useTheme, Icon, makeStyles } from '@material-ui/core';
 import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import MomentUtils from '@date-io/moment';
-import { getLanguageFromKey } from 'altinn-shared/utils';
+import { getLanguageFromKey, getParsedLanguageFromKey } from 'altinn-shared/utils';
 import { AltinnAppTheme } from 'altinn-shared/theme';
 import { Moment } from 'moment';
 import { renderValidationMessagesForComponent } from '../../utils/render';
@@ -77,6 +77,7 @@ function DatepickerComponent(props: IDatePickerProps) {
   const [validDate, setValidDate] = React.useState<boolean>(true);
   const minDate = props.minDate ? props.minDate : "1900-01-01T12:00:00.000Z";
   const maxDate = props.maxDate ? props.maxDate : "2100-01-01T12:00:00.000Z";
+  const format = props.format ? props.format : 'DD/MM/YYYY';
 
   let locale = window.navigator?.language || (window.navigator as any)?.userLanguage || "nb-NO";
   moment.locale(locale);
@@ -106,7 +107,7 @@ function DatepickerComponent(props: IDatePickerProps) {
     } else if (date && date.isAfter(maxDate)) {
       validations.errors.push(getLanguageFromKey('date_picker.max_date_exeeded', props.language));
     } else {
-      validations.errors.push(getLanguageFromKey('date_picker.invalid_date_message', props.language));
+      validations.errors.push(getParsedLanguageFromKey('date_picker.invalid_date_message', props.language, [format]));
     }
     return validations;
   }
@@ -125,7 +126,10 @@ function DatepickerComponent(props: IDatePickerProps) {
   }
 
   const isValidDate = (date: moment.Moment): boolean => {
-    return date && date.isValid() && date.isAfter(minDate) && date.isBefore(maxDate);
+    if (date == null) {
+      return true;
+    }
+    else return date && date.isValid() && date.isAfter(minDate) && date.isBefore(maxDate);
   }
 
   const handleOnBlur = () => {
@@ -137,7 +141,7 @@ function DatepickerComponent(props: IDatePickerProps) {
       }
     } else {
       setValidDate(true);
-      props.handleDataChange(date.toISOString());
+      props.handleDataChange(date ? date.toISOString() : '');
     }
   }
 
@@ -153,14 +157,15 @@ function DatepickerComponent(props: IDatePickerProps) {
               readOnly={props.readOnly}
               required={props.required}
               variant={inline ? 'inline' : 'dialog'}
-              format={props.format ? props.format : 'DD/MM/YYYY'}
+              format={format}
               margin="normal"
-              id={"altinn-date-picker-" + props.id}
+              id={props.id}
               value={date}
               placeholder={props.format}
-              key={"altinn-date-picker-" + props.id}
+              key={props.id}
               onChange={handleDataChangeWrapper}
               onBlur={handleOnBlur}
+              autoOk={true}
               invalidDateMessage={''} // all validation messages intentionally left empty
               maxDateMessage={''}
               minDateMessage={''}
@@ -182,7 +187,12 @@ function DatepickerComponent(props: IDatePickerProps) {
                   root: classes.formHelperText
                 }
               }}
-              keyboardIcon={<Icon className={classes.icon + ' ai ai-date'}/>}
+              keyboardIcon={
+                <Icon
+                  aria-label={getLanguageFromKey('date_picker.aria_label_icon', props.language)}
+                  className={classes.icon + ' ai ai-date'}
+                />
+              }
               className={classes.datepicker}
             />
           </Grid>

diff --git a/...nn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/FileUploadComponent.tsx b/...nn.Apps/AppFrontend/react/altinn-app-frontend/src/components/base/FileUploadComponent.tsx
@@ -104,7 +104,7 @@ export function FileUploadComponent(props: IFileUploadProvidedProps) {
     const fileType = props.id; // component id used as filetype identifier for now, see issue #1364
     const validations: string[] = [];
     const totalAttachments = acceptedFiles.length + rejectedFiles.length + attachments.length;
-    
+
     if (totalAttachments > props.maxNumberOfAttachments) {
       // if the user adds more attachments than max, all should be ignored
       validations.push(
@@ -163,7 +163,7 @@ export function FileUploadComponent(props: IFileUploadProvidedProps) {
       return null;
     }
     return (
-      <div id={'altinn-file-list-' + props.id}>
+      <div id={props.id}>
         <table className={'file-upload-table'}>
           <thead>
             <tr className={'blue-underline'} id={'altinn-file-list-row-header'}>
@@ -361,4 +361,4 @@ export function FileUploadComponent(props: IFileUploadProvidedProps) {
 
       </div>
     );
-}
+}
diff --git a/...Frontend/react/altinn-app-frontend/src/components/base/RadioButtonsContainerComponent.tsx b/...Frontend/react/altinn-app-frontend/src/components/base/RadioButtonsContainerComponent.tsx
@@ -110,6 +110,7 @@ export const RadioButtonContainerComponent = (props: IRadioButtonsContainerProps
         value={selected}
         onChange={onDataChange}
         row={radioGroupIsRow}
+        id={props.id}
       >
         {props.options.map((option: any, index: number) => (
           <React.Fragment key={index}>

diff --git a/...inn.Apps/AppFrontend/react/altinn-app-frontend/src/shared/resources/language/languages.ts b/...inn.Apps/AppFrontend/react/altinn-app-frontend/src/shared/resources/language/languages.ts
@@ -296,12 +296,13 @@ export const nb = () => (
       pattern: 'Feil format eller verdi',
     },
     date_picker: {
-      invalid_date_message: 'Ugyldig datoformat',
+      invalid_date_message: 'Ugyldig datoformat. Bruk formatet {1}.',
       cancel_label: 'Avbryt',
       clear_label: 'Tøm',
       today_label: 'I dag',
       min_date_exeeded: 'Dato valgt er før tidligste dato tillat',
-      max_date_exeeded: 'Dato valgt er etter seneste dato tillat'
+      max_date_exeeded: 'Dato valgt er etter seneste dato tillat',
+      aria_label_icon: 'Åpne datovelger'
     }
   }
 );
diff --git a/src/studio/src/designer/backend/Languages/ini/en.ini b/src/studio/src/designer/backend/Languages/ini/en.ini
@@ -74,12 +74,13 @@ service_saved_name_description = Used (with owner) as an unique identifier for t
 sorte_services = Sort
 
 [date_picker]
-invalid_date_message = Invalid date format
+invalid_date_message = Invalid date format. Use the format {1}.
 cancel_label = Cancel
 clear_label = Clear
 today_label = Today
 max_date_exeeded = Date should not be after maximal date
 min_date_exeeded = Date should not be before minimal date
+aria_label_icon = Open date picker
 
 [administration]
 administration = About

diff --git a/src/studio/src/designer/backend/Languages/ini/nb.ini b/src/studio/src/designer/backend/Languages/ini/nb.ini
@@ -74,12 +74,13 @@ service_saved_name_description = Unik identifikator for appen. Brukes som navn p
 sorte_services = Sorter
 
 [date_picker]
-invalid_date_message = Ugyldig datoformat
+invalid_date_message = Ugyldig datoformat. Bruk formatet {1}.
 cancel_label = Avbryt
 clear_label = Tøm
 today_label = I dag
 min_date_exeeded = Dato valgt er før tidligste dato tillat
 max_date_exeeded = Dato valgt er etter seneste dato tillat
+aria_label_icon = Åpne datovelger
 
 [administration]
 administration = Om appen