Merge pull request #5993 from espoon-voltti/draft-income-statements

Tuloilmoituksen voi tallentaa luonnoksena

frontend/src/citizen-frontend/generated/api-clients/incomestatement.ts

@@ -25,12 +25,17 @@ import { uri } from 'lib-common/uri'
 export async function createChildIncomeStatement(
   request: {
     childId: UUID,
+    draft?: boolean | null,
     body: IncomeStatementBody
   }
 ): Promise<void> {
+  const params = createUrlSearchParams(
+    ['draft', request.draft?.toString()]
+  )
   const { data: json } = await client.request<JsonOf<void>>({
     url: uri`/citizen/income-statements/child/${request.childId}`.toString(),
     method: 'POST',
+    params,
     data: request.body satisfies JsonCompatible<IncomeStatementBody>
   })
   return json
@@ -42,12 +47,17 @@ export async function createChildIncomeStatement(
 */
 export async function createIncomeStatement(
   request: {
+    draft?: boolean | null,
     body: IncomeStatementBody
   }
 ): Promise<void> {
+  const params = createUrlSearchParams(
+    ['draft', request.draft?.toString()]
+  )
   const { data: json } = await client.request<JsonOf<void>>({
     url: uri`/citizen/income-statements`.toString(),
     method: 'POST',
+    params,
     data: request.body satisfies JsonCompatible<IncomeStatementBody>
   })
   return json
@@ -208,12 +218,17 @@ export async function updateChildIncomeStatement(
   request: {
     childId: UUID,
     incomeStatementId: UUID,
+    draft?: boolean | null,
     body: IncomeStatementBody
   }
 ): Promise<void> {
+  const params = createUrlSearchParams(
+    ['draft', request.draft?.toString()]
+  )
   const { data: json } = await client.request<JsonOf<void>>({
     url: uri`/citizen/income-statements/child/${request.childId}/${request.incomeStatementId}`.toString(),
     method: 'PUT',
+    params,
     data: request.body satisfies JsonCompatible<IncomeStatementBody>
   })
   return json
@@ -226,12 +241,17 @@ export async function updateChildIncomeStatement(
 export async function updateIncomeStatement(
   request: {
     incomeStatementId: UUID,
+    draft?: boolean | null,
     body: IncomeStatementBody
   }
 ): Promise<void> {
+  const params = createUrlSearchParams(
+    ['draft', request.draft?.toString()]
+  )
   const { data: json } = await client.request<JsonOf<void>>({
     url: uri`/citizen/income-statements/${request.incomeStatementId}`.toString(),
     method: 'PUT',
+    params,
     data: request.body satisfies JsonCompatible<IncomeStatementBody>
   })
   return json

frontend/src/citizen-frontend/income-statements/ChildIncomeStatementEditor.tsx

@@ -2,10 +2,11 @@
 //
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { combine, Loading, Result } from 'lib-common/api'
+import { IncomeStatementStatus } from 'lib-common/generated/api-types/incomestatement'
 import LocalDate from 'lib-common/local-date'
 import {
   constantQuery,
@@ -32,6 +33,7 @@ import { emptyIncomeStatementForm } from './types/form'
 
 interface EditorState {
   id: string | undefined
+  status: IncomeStatementStatus
   startDates: LocalDate[]
   formData: Form.IncomeStatementForm
 }
@@ -52,6 +54,7 @@ function useInitialEditorState(
   return combine(incomeStatement, startDates).map(
     ([incomeStatement, startDates]) => ({
       id,
+      status: incomeStatement?.status ?? 'DRAFT',
       startDates,
       formData:
         incomeStatement === null
@@ -106,42 +109,56 @@ export default React.memo(function ChildIncomeStatementEditor() {
     updateChildIncomeStatementMutation
   )
 
-  return renderResult(state, (state) => {
-    const { id, formData, startDates } = state
-
-    const save = () => {
-      const validatedData = formData ? fromBody('child', formData) : undefined
-      if (validatedData) {
-        if (id) {
-          return updateChildIncomeStatement({
-            childId,
-            incomeStatementId: id,
-            body: validatedData
-          })
+  const draftBody = useMemo(
+    () => state.map((state) => fromBody('child', state.formData, true)),
+    [state]
+  )
+
+  const validatedBody = useMemo(
+    () => state.map((state) => fromBody('child', state.formData, false)),
+    [state]
+  )
+
+  return renderResult(
+    combine(state, draftBody, validatedBody),
+    ([{ status, formData, startDates }, draftBody, validatedBody]) => {
+      const save = (draft: boolean) => {
+        const body = draft ? draftBody : validatedBody
+        if (body) {
+          if (incomeStatementId) {
+            return updateChildIncomeStatement({
+              childId,
+              incomeStatementId,
+              body,
+              draft
+            })
+          } else {
+            return createChildIncomeStatement({ childId, body, draft })
+          }
         } else {
-          return createChildIncomeStatement({ childId, body: validatedData })
+          setShowFormErrors(true)
+          if (form.current) form.current.scrollToErrors()
+          return
         }
-      } else {
-        setShowFormErrors(true)
-        if (form.current) form.current.scrollToErrors()
-        return
       }
-    }
 
-    return (
-      <Main>
-        <ChildIncomeStatementForm
-          incomeStatementId={id}
-          formData={formData}
-          showFormErrors={showFormErrors}
-          otherStartDates={startDates}
-          onChange={updateFormData}
-          onSave={save}
-          onSuccess={navigateToList}
-          onCancel={navigateToList}
-          ref={form}
-        />
-      </Main>
-    )
-  })
+      return (
+        <Main>
+          <ChildIncomeStatementForm
+            incomeStatementId={incomeStatementId}
+            status={status}
+            formData={formData}
+            showFormErrors={showFormErrors}
+            otherStartDates={startDates}
+            draftSaveEnabled={draftBody !== null}
+            onChange={updateFormData}
+            onSave={save}
+            onSuccess={navigateToList}
+            onCancel={navigateToList}
+            ref={form}
+          />
+        </Main>
+      )
+    }
+  )
 })

frontend/src/citizen-frontend/income-statements/ChildIncomeStatementForm.tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components'
 
 import { Result } from 'lib-common/api'
 import { Attachment } from 'lib-common/api-types/attachment'
+import { IncomeStatementStatus } from 'lib-common/generated/api-types/incomestatement'
 import LocalDate from 'lib-common/local-date'
 import { UUID } from 'lib-common/types'
 import { scrollToRef } from 'lib-common/utils/scrolling'
@@ -40,11 +41,13 @@ import * as Form from './types/form'
 
 interface Props {
   incomeStatementId: UUID | undefined
+  status: IncomeStatementStatus
   formData: Form.IncomeStatementForm
   showFormErrors: boolean
   otherStartDates: LocalDate[]
+  draftSaveEnabled: boolean
   onChange: SetStateCallback<Form.IncomeStatementForm>
-  onSave: () => Promise<Result<unknown>> | undefined
+  onSave: (draft: boolean) => Promise<Result<unknown>> | undefined
   onSuccess: () => void
   onCancel: () => void
 }
@@ -215,9 +218,11 @@ export default React.memo(
   React.forwardRef(function ChildIncomeStatementForm(
     {
       incomeStatementId,
+      status,
       formData,
       showFormErrors,
       otherStartDates,
+      draftSaveEnabled,
       onChange,
       onSave,
       onSuccess,
@@ -256,7 +261,7 @@ export default React.memo(
       }
     }))
 
-    const saveButtonEnabled = formData.attachments.length > 0 && formData.assure
+    const sendButtonEnabled = formData.attachments.length > 0 && formData.assure
 
     return (
       <>
@@ -300,11 +305,19 @@ export default React.memo(
             </AssureCheckbox>
             <FixedSpaceRow>
               <LegacyButton text={t.common.cancel} onClick={onCancel} />
+              {status === 'DRAFT' && draftSaveEnabled && (
+                <AsyncButton
+                  text={t.income.saveAsDraft}
+                  onClick={() => onSave(true)}
+                  onSuccess={onSuccess}
+                  data-qa="save-draft-btn"
+                />
+              )}
               <AsyncButton
-                text={t.common.save}
+                text={status === 'DRAFT' ? t.income.send : t.income.updateSent}
                 primary
-                onClick={onSave}
-                disabled={!saveButtonEnabled}
+                onClick={() => onSave(false)}
+                disabled={!sendButtonEnabled}
                 onSuccess={onSuccess}
                 data-qa="save-btn"
               />

frontend/src/citizen-frontend/income-statements/ChildIncomeStatementView.tsx

@@ -55,7 +55,7 @@ export default React.memo(function ChildIncomeStatementView() {
         <ContentArea opaque>
           <FixedSpaceRow spacing="L">
             <H1>{t.income.view.title}</H1>
-            {!incomeStatement.handled && (
+            {incomeStatement.status !== 'HANDLED' && (
               <EditButtonContainer>
                 <ResponsiveInlineButton
                   text={t.common.edit}

frontend/src/citizen-frontend/income-statements/ChildrenIncomeStatements.tsx

@@ -79,6 +79,7 @@ const ChildIncomeStatementsTable = React.memo(
                   <Tr>
                     <Th>{t.income.table.incomeStatementForm}</Th>
                     <Th>{t.income.table.createdAt}</Th>
+                    <Th>{t.income.table.sentAt}</Th>
                     <Th />
                   </Tr>
                 </Thead>
@@ -93,10 +94,15 @@ const ChildIncomeStatementsTable = React.memo(
                           {item.startDate.format()} - {item.endDate?.format()}
                         </Link>
                       </Td>
-                      <Td>{item.created.toLocalDate().format()}</Td>
+                      <Td>{item.createdAt.toLocalDate().format()}</Td>
+                      <Td>
+                        {item.sentAt
+                          ? item.sentAt.toLocalDate().format()
+                          : t.income.table.notSent}
+                      </Td>
                       <Td>
                         <Buttons>
-                          {item.handled ? (
+                          {item.status === 'HANDLED' ? (
                             <Dimmed>{t.income.table.handled}</Dimmed>
                           ) : (
                             <>

frontend/src/citizen-frontend/income-statements/IncomeStatementComponents.tsx

@@ -52,7 +52,8 @@ export const ActionContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding: ${defaultMargins.m} 0;
+  padding: ${defaultMargins.s} 0;
+  background-color: ${(p) => p.theme.colors.grayscale.g0};
 
   > * {
     margin: 0 ${defaultMargins.m};