Merge pull request #1004 from digitalfabrik/1003-datepicker-shows-wro…

…ng-date 1003: Datepicker shows wrong date
digitalfabrik · Jun 3, 2023 · 6051edb · 6051edb
2 parents 4e79de9 + 9fd7534
commit 6051edb
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 74 deletions.
diff --git a/administration/package-lock.json b/administration/package-lock.json
diff --git a/administration/package.json b/administration/package.json
@@ -5,7 +5,6 @@
   "dependencies": {
     "@apollo/client": "^3.7.9",
     "@blueprintjs/core": "^4.16.3",
-    "@blueprintjs/datetime": "^4.3.12",
     "@blueprintjs/popover2": "^1.13.3",
     "@blueprintjs/select": "^4.9.3",
     "@blueprintjs/table": "^4.9.3",

diff --git a/administration/src/bp-modules/cards/AddCardForm.tsx b/administration/src/bp-modules/cards/AddCardForm.tsx
@@ -1,7 +1,6 @@
 import { Button, Card, FormGroup, InputGroup, Intent } from '@blueprintjs/core'
-import { DateInput } from '@blueprintjs/datetime'
-import '@blueprintjs/datetime/lib/css/blueprint-datetime.css'
-import { add } from 'date-fns'
+import { TextField } from '@mui/material'
+import { add, format, isAfter, isBefore } from 'date-fns'
 import React, { ChangeEvent } from 'react'
 import styled from 'styled-components'
 
@@ -33,6 +32,10 @@ const ExtensionForm = ({ extension, onUpdate }: ExtensionFormProps) => {
   })
 }
 
+const maxCardValidity = 99
+const hasCardExpirationError = (expirationDate: Date): boolean =>
+  isBefore(expirationDate, Date.now()) || isAfter(expirationDate, add(Date.now(), { years: maxCardValidity }))
+
 const CreateCardForm = ({ cardBlueprint, onRemove, onUpdate }: CreateCardsFormProps) => {
   return (
     <Card>
@@ -53,19 +56,29 @@ const CreateCardForm = ({ cardBlueprint, onRemove, onUpdate }: CreateCardsFormPr
         />
       </FormGroup>
       <FormGroup label='Ablaufdatum'>
-        <DateInput
-          placeholder='Ablaufdatum'
+        <TextField
+          fullWidth
           disabled={cardBlueprint.hasInfiniteLifetime()}
-          value={cardBlueprint.expirationDate}
-          parseDate={str => new Date(str)}
-          onChange={value => {
-            cardBlueprint.expirationDate = value
-            onUpdate()
+          type='date'
+          required
+          size='small'
+          error={cardBlueprint.expirationDate ? hasCardExpirationError(cardBlueprint.expirationDate) : true}
+          value={cardBlueprint.expirationDate ? format(cardBlueprint.expirationDate, 'yyyy-MM-dd') : null}
+          sx={{ '& input[value=""]:not(:focus)': { color: 'transparent' }, '& fieldset': { borderRadius: 0 } }}
+          inputProps={{
+            style: { fontSize: 14, padding: '6px 10px' },
+            min: format(new Date(), 'yyyy-MM-dd'),
+            max: format(add(Date.now(), { years: maxCardValidity }), 'yyyy-MM-dd'),
+          }}
+          onChange={e => {
+            if (e.target.value !== null) {
+              const millis = Date.parse(e.target.value)
+              if (!isNaN(millis)) {
+                cardBlueprint.expirationDate = new Date(millis)
+                onUpdate()
+              }
+            }
           }}
-          formatDate={date => date.toLocaleDateString()}
-          maxDate={add(Date.now(), { years: 99 })}
-          minDate={new Date()}
-          fill={true}
         />
       </FormGroup>
       {cardBlueprint.extensions.map((ext, i) => (

diff --git a/administration/src/cards/CardBlueprint.ts b/administration/src/cards/CardBlueprint.ts
@@ -102,7 +102,9 @@ export class CardBlueprint implements JSONCardBlueprint {
     return new CardInfo({
       fullName: this.fullName,
       expirationDay:
-        expirationDate !== null && !this.hasInfiniteLifetime() ? dateToDaysSinceEpoch(expirationDate) : undefined,
+        expirationDate !== null && expirationDate.getTime() > 0 && !this.hasInfiniteLifetime()
+          ? dateToDaysSinceEpoch(expirationDate)
+          : undefined,
       extensions: new CardExtensions(extensionsMessage),
     })
   }

diff --git a/administration/src/cards/extensions/BirthdayExtension.tsx b/administration/src/cards/extensions/BirthdayExtension.tsx
@@ -1,7 +1,7 @@
 import { FormGroup } from '@blueprintjs/core'
-import { DateInput } from '@blueprintjs/datetime'
 import { PartialMessage } from '@bufbuild/protobuf'
-import { format, isValid, parse, sub } from 'date-fns'
+import { TextField } from '@mui/material'
+import { format, isAfter, isBefore, isValid, parse } from 'date-fns'
 
 import { CardExtensions } from '../../generated/card_pb'
 import { dateToDaysSinceEpoch, daysSinceEpochToDate } from '../validityPeriod'
@@ -10,34 +10,49 @@ import { Extension } from './extensions'
 type BirthdayState = { birthday: number }
 
 const initialBirthdayDate = dateToDaysSinceEpoch(new Date('1980-01-01T00:00+00:00'))
-
+const dateFormat = 'yyyy-MM-dd'
+const minBirthday = '1900-01-01'
 class BirthdayExtension extends Extension<BirthdayState, null> {
   public readonly name = BirthdayExtension.name
 
   setInitialState() {
     this.state = { birthday: initialBirthdayDate }
   }
+  hasValidBirthdayDate(birthday?: number): boolean {
+    if (!birthday) {
+      return true
+    }
+    return (
+      isBefore(daysSinceEpochToDate(birthday), new Date(minBirthday)) ||
+      isAfter(daysSinceEpochToDate(birthday), new Date())
+    )
+  }
 
   createForm(onUpdate: () => void) {
     return (
       <FormGroup label='Geburtsdatum'>
-        <DateInput
-          placeholder='Geburtsdatum'
-          value={daysSinceEpochToDate(this.state?.birthday ?? initialBirthdayDate)}
-          parseDate={value => {
-            const millis = Date.parse(value)
-            return isNaN(millis) ? false : new Date(millis)
+        <TextField
+          fullWidth
+          type='date'
+          required
+          size='small'
+          error={!this.isValid()}
+          value={format(daysSinceEpochToDate(this.state?.birthday ?? initialBirthdayDate), dateFormat)}
+          sx={{ '& input[value=""]:not(:focus)': { color: 'transparent' }, '& fieldset': { borderRadius: 0 } }}
+          inputProps={{
+            max: format(new Date(), dateFormat),
+            min: minBirthday,
+            style: { fontSize: 14, padding: '6px 10px' },
           }}
-          onChange={value => {
-            if (value !== null) {
-              this.state = { birthday: dateToDaysSinceEpoch(value) }
-              onUpdate()
+          onChange={e => {
+            if (e.target.value !== null) {
+              const millis = Date.parse(e.target.value)
+              if (!isNaN(millis)) {
+                this.state = { birthday: dateToDaysSinceEpoch(new Date(e.target.value)) }
+                onUpdate()
+              }
             }
           }}
-          formatDate={date => date.toLocaleDateString()}
-          minDate={sub(Date.now(), { years: 150 })}
-          maxDate={new Date()}
-          fill={true}
         />
       </FormGroup>
     )
@@ -54,7 +69,7 @@ class BirthdayExtension extends Extension<BirthdayState, null> {
   }
 
   isValid() {
-    return this.state !== null
+    return this.state !== null && !this.hasValidBirthdayDate(this.state.birthday)
   }
 
   fromString(value: string) {