Create initial out-of-office form

Author: terolaakso

frontend/src/employee-frontend/components/out-of-office/OutOfOfficeEditor.tsx

@@ -0,0 +1,62 @@
+import React, { Fragment } from 'react'
+
+import { useTranslation } from 'employee-frontend/state/i18n'
+import { Result } from 'lib-common/api'
+import { localDateRange } from 'lib-common/form/fields'
+import { object, required } from 'lib-common/form/form'
+import { useForm, useFormFields } from 'lib-common/form/hooks'
+import { StateOf } from 'lib-common/form/types'
+import { AsyncButton } from 'lib-components/atoms/buttons/AsyncButton'
+import { Button } from 'lib-components/atoms/buttons/Button'
+import ButtonContainer from 'lib-components/layout/ButtonContainer'
+import { DateRangePickerF } from 'lib-components/molecules/date-picker/DateRangePicker'
+import { Gap } from 'lib-components/white-space'
+
+const outOfOfficeForm = object({ period: required(localDateRange()) })
+
+function initialFormState(): StateOf<typeof outOfOfficeForm> {
+  return { period: localDateRange.empty() }
+}
+
+export interface OutOfOfficeEditorProps {
+  onCancel: () => void
+}
+
+export default React.memo(function OutOfOfficeEditor({
+  onCancel
+}: OutOfOfficeEditorProps) {
+  const { i18n, lang } = useTranslation()
+
+  const form = useForm(outOfOfficeForm, initialFormState, {
+    ...i18n.validationErrors,
+    ...i18n.components.datePicker.validationErrors
+  })
+
+  const { period } = useFormFields(form)
+
+  return (
+    <Fragment>
+      <DateRangePickerF bind={period} locale={lang} hideErrorsBeforeTouched />
+      <Gap size="X4L" />
+      <ButtonContainer>
+        <AsyncButton
+          text={i18n.common.save}
+          primary
+          disabled={!form.isValid()}
+          onClick={function (): void | Promise<Result<unknown>> {
+            throw new Error('Function not implemented.')
+          }}
+          onSuccess={function (): void {
+            throw new Error('Function not implemented.')
+          }}
+        />
+        <Gap size="xs" horizontal />
+        <Button
+          text={i18n.common.cancel}
+          appearance="inline"
+          onClick={onCancel}
+        />
+      </ButtonContainer>
+    </Fragment>
+  )
+})

frontend/src/employee-frontend/components/out-of-office/OutOfOfficePage.tsx

@@ -1,13 +1,16 @@
-import React from 'react'
+import React, { Fragment, useState } from 'react'
 
 import { useTranslation } from 'employee-frontend/state/i18n'
 import { Button } from 'lib-components/atoms/buttons/Button'
 import Container, { ContentArea } from 'lib-components/layout/Container'
 import { H1, Label, P } from 'lib-components/typography'
 import { Gap } from 'lib-components/white-space'
 
+import OutOfOfficeEditor from './OutOfOfficeEditor'
+
 export default React.memo(function OutOfOfficePage() {
   const { i18n } = useTranslation()
+  const [isEditing, setIsEditing] = useState(false)
 
   return (
     <Container>
@@ -16,8 +19,20 @@ export default React.memo(function OutOfOfficePage() {
         <P>{i18n.outOfOffice.description}</P>
         <Gap size="m" />
         <Label>{i18n.outOfOffice.header}</Label>
-        <P>{i18n.outOfOffice.noFutureOutOfOffice}</P>
-        <Button text={i18n.outOfOffice.addOutOfOffice} primary />
+        <Gap size="s" />
+        {isEditing ? (
+          <OutOfOfficeEditor onCancel={() => setIsEditing(false)} />
+        ) : (
+          <Fragment>
+            <div>{i18n.outOfOffice.noFutureOutOfOffice}</div>
+            <Gap size="m" />
+            <Button
+              text={i18n.outOfOffice.addOutOfOffice}
+              primary
+              onClick={() => setIsEditing(true)}
+            />
+          </Fragment>
+        )}
       </ContentArea>
     </Container>
   )