604: Withdraw application

administration/src/Router.tsx

@@ -17,6 +17,7 @@ import ForgotPasswordController from './components/auth/ForgotPasswordController
 import ManageUsersController from './components/users/ManageUsersController'
 import ApplyController from './application/components/ApplyController'
 import DataPrivacyPolicy from './components/DataPrivacyPolicy'
+import ApplicationUserOverviewController from './components/applications/ApplicationUserOverviewController'
 
 const Main = styled.div`
   flex-grow: 1;
@@ -34,7 +35,12 @@ const Router = () => {
       { path: '/forgot-password', element: <ForgotPasswordController /> },
       { path: '/reset-password/:passwordResetKey', element: <ResetPasswordController /> },
       { path: '/data-privacy-policy', element: <DataPrivacyPolicy /> },
-      projectConfig.applicationFeatureEnabled ? { path: '/beantragen', element: <ApplyController /> } : null,
+      ...(projectConfig.applicationFeatureEnabled
+        ? [
+            { path: '/beantragen', element: <ApplyController /> },
+            { path: '/antrag-einsehen/:accessKey', element: <ApplicationUserOverviewController /> },
+          ]
+        : []),
       {
         path: '*',
         element: !isLoggedIn ? (

administration/src/components/applications/ApplicationAction.tsx

@@ -0,0 +1,47 @@
+import { Alert, Button } from '@blueprintjs/core'
+import React, { ReactElement, useState } from 'react'
+
+type ApplicationActionProps = {
+  confirmAction: () => void
+  loading: boolean
+  cancelButtonText: string
+  confirmButtonText: string
+  buttonLabel: string
+  dialogText: string
+}
+
+const ApplicationAction = ({
+  confirmAction,
+  loading,
+  buttonLabel,
+  confirmButtonText,
+  cancelButtonText,
+  dialogText,
+}: ApplicationActionProps): ReactElement => {
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false)
+
+  const onConfirm = () => {
+    confirmAction()
+    setDialogOpen(false)
+  }
+  return (
+    <>
+      <Button onClick={() => setDialogOpen(true)} intent='danger' icon='trash'>
+        {buttonLabel}
+      </Button>
+      <Alert
+        cancelButtonText={cancelButtonText}
+        confirmButtonText={confirmButtonText}
+        icon='trash'
+        intent='danger'
+        isOpen={dialogOpen}
+        loading={loading}
+        onCancel={() => setDialogOpen(false)}
+        onConfirm={onConfirm}>
+        <p>{dialogText}</p>
+      </Alert>
+    </>
+  )
+}
+
+export default ApplicationAction

administration/src/components/applications/ApplicationUserOverviewController.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import { NonIdealState, Spinner } from '@blueprintjs/core'
+
+import { useGetApplicationByUserAccessKeyQuery } from '../../generated/graphql'
+import ErrorHandler from '../../ErrorHandler'
+import { useParams } from 'react-router-dom'
+import styled from 'styled-components'
+import { ApplicationViewComponent } from './ApplicationsOverview'
+import { useAppToaster } from '../AppToaster'
+
+const NotFound = styled(NonIdealState)`
+  margin: auto;
+`
+
+const CenteredMessage = styled(NonIdealState)`
+  margin: auto;
+`
+
+const ApplicationUserOverviewController = (props: { providedKey: string }) => {
+  const [withdrawed, setWithdrawed] = useState<boolean>(false)
+  const appToaster = useAppToaster()
+  const { loading, error, data, refetch } = useGetApplicationByUserAccessKeyQuery({
+    variables: { accessKey: props.providedKey },
+    onError: error => {
+      console.error(error)
+      appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
+    },
+  })
+
+  if (loading) return <Spinner />
+  else if (error || !data) return <ErrorHandler refetch={refetch} />
+  if (data.application.withdrawalDate) return <CenteredMessage title='Ihr Antrag wurde bereits zurückgezogen' />
+  if (withdrawed) return <CenteredMessage title='Ihr Antrag wurde zurückgezogen' />
+  else {
+    return (
+      <ApplicationViewComponent
+        application={data.application}
+        gotConfirmed={() => setWithdrawed(true)}
+        actionType={'withdraw'}
+      />
+    )
+  }
+}
+
+const ApplicationUserController = () => {
+  const { accessKey } = useParams()
+
+  if (!accessKey) {
+    return <NotFound title='Nicht gefunden' description='Diese Seite konnte nicht gefunden werden.' />
+  } else {
+    return <ApplicationUserOverviewController providedKey={accessKey} />
+  }
+}
+
+export default ApplicationUserController

administration/src/components/applications/ApplicationsOverview.tsx

@@ -1,27 +1,35 @@
-import { Alert, Button, Card, Divider, H4, IResizeEntry, NonIdealState, ResizeSensor } from '@blueprintjs/core'
+import { Button, Card, Divider, H4, IResizeEntry, NonIdealState, ResizeSensor } from '@blueprintjs/core'
 import { format } from 'date-fns'
 import React, { FunctionComponent, useContext, useState } from 'react'
 import styled from 'styled-components'
 import JsonFieldView, { GeneralJsonField } from './JsonFieldView'
 import { useAppToaster } from '../AppToaster'
 import FlipMove from 'react-flip-move'
-import { GetApplicationsQuery, useDeleteApplicationMutation } from '../../generated/graphql'
+import {
+  GetApplicationsQuery,
+  useDeleteApplicationMutation,
+  useWithdrawApplicationMutation,
+} from '../../generated/graphql'
 import { ProjectConfigContext } from '../../project-configs/ProjectConfigContext'
 import VerificationsView, { VerificationsQuickIndicator } from './VerificationsView'
+import ApplicationAction from './ApplicationAction'
+import { useParams } from 'react-router-dom'
 
-type Application = GetApplicationsQuery['applications'][number]
+export type Application = GetApplicationsQuery['applications'][number]
+export type ActionType = 'delete' | 'withdraw'
 
 const CARD_PADDING = 20
 const COLLAPSED_HEIGHT = 250
 
-const ApplicationViewCard = styled(Card)<{ $collapsed: boolean; $contentHeight: number }>`
+const ApplicationViewCard = styled(Card)<{ $collapsed: boolean; $contentHeight: number; $centered: boolean }>`
   transition: height 0.2s;
   height: ${props => (props.$collapsed ? COLLAPSED_HEIGHT : props.$contentHeight + 2 * CARD_PADDING)}px;
   width: 600px;
   overflow: hidden;
   margin: 10px;
   padding: 0;
   position: relative;
+  ${props => props.$centered && 'align-self: center;'}
 `
 
 const ExpandContainer = styled.div<{ $collapsed: boolean }>`
@@ -40,40 +48,69 @@ const ExpandContainer = styled.div<{ $collapsed: boolean }>`
   pointer-events: ${props => (props.$collapsed ? 'all' : 'none')};
 `
 
-const ApplicationView: FunctionComponent<{ application: Application; gotDeleted: () => void }> = ({
-  application,
-  gotDeleted,
-}) => {
+const ApplicationView: FunctionComponent<{
+  application: Application
+  gotConfirmed: () => void
+  actionType: ActionType
+}> = ({ application, gotConfirmed, actionType }) => {
   const { createdDate: createdDateString, jsonValue, id } = application
+  const { accessKey } = useParams()
   const createdDate = new Date(createdDateString)
   const jsonField: GeneralJsonField = JSON.parse(jsonValue)
   const config = useContext(ProjectConfigContext)
   const baseUrl = `${process.env.REACT_APP_API_BASE_URL}/application/${config.projectId}/${id}`
   const [collapsed, setCollapsed] = useState(false)
   const [height, setHeight] = useState(0)
   const appToaster = useAppToaster()
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
   const [deleteApplication, { loading }] = useDeleteApplicationMutation({
     onError: error => {
       console.error(error)
       appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
     },
     onCompleted: ({ deleted }: { deleted: boolean }) => {
-      if (deleted) gotDeleted()
+      if (deleted) gotConfirmed()
       else {
         console.error('Delete operation returned false.')
         appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
       }
     },
   })
 
+  const [withdrawApplication, { loading: withdrawalLoading }] = useWithdrawApplicationMutation({
+    onError: error => {
+      console.error(error)
+      appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
+    },
+    onCompleted: ({ withdrawed }: { withdrawed: boolean }) => {
+      if (withdrawed) gotConfirmed()
+      else {
+        console.error('Witdraw operation returned false.')
+        appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
+      }
+    },
+  })
+
+  const submitWithdrawal = () => {
+    if (accessKey) {
+      withdrawApplication({
+        variables: {
+          accessKey: accessKey,
+        },
+      })
+    }
+  }
+
   const handleResize = (entries: IResizeEntry[]) => {
     setHeight(entries[0].contentRect.height)
     if (height === 0 && entries[0].contentRect.height > COLLAPSED_HEIGHT) setCollapsed(true)
   }
 
   return (
-    <ApplicationViewCard elevation={2} $collapsed={collapsed} $contentHeight={height}>
+    <ApplicationViewCard
+      elevation={2}
+      $collapsed={collapsed}
+      $contentHeight={height}
+      $centered={actionType === 'withdraw'}>
       <ExpandContainer onClick={() => setCollapsed(false)} $collapsed={collapsed}>
         <Button icon='caret-down'>Mehr anzeigen</Button>
       </ExpandContainer>
@@ -89,6 +126,9 @@ const ApplicationView: FunctionComponent<{ application: Application; gotDeleted:
             <H4>Antrag vom {format(createdDate, 'dd.MM.yyyy, HH:mm')}</H4>
             <VerificationsQuickIndicator verifications={application.verifications} />
           </div>
+          {actionType === 'delete' && application.withdrawalDate && (
+            <div style={{ marginBottom: '16px', color: 'red' }}>Antrag wurde zurückgezogen.</div>
+          )}
           <JsonFieldView jsonField={jsonField} baseUrl={baseUrl} key={0} hierarchyIndex={0} />
           <Divider style={{ margin: '24px 0px' }} />
           <VerificationsView verifications={application.verifications} />
@@ -104,20 +144,26 @@ const ApplicationView: FunctionComponent<{ application: Application; gotDeleted:
                 Weniger anzeigen
               </Button>
             ) : null}
-            <Button onClick={() => setDeleteDialogOpen(true)} intent='danger' icon='trash'>
-              Antrag löschen
-            </Button>
-            <Alert
-              cancelButtonText='Abbrechen'
-              confirmButtonText='Antrag löschen'
-              icon='trash'
-              intent='danger'
-              isOpen={deleteDialogOpen}
-              loading={loading}
-              onCancel={() => setDeleteDialogOpen(false)}
-              onConfirm={() => deleteApplication({ variables: { applicationId: application.id } })}>
-              <p>Möchten Sie den Antrag unwiderruflich löschen?</p>
-            </Alert>
+            {actionType === 'delete' && (
+              <ApplicationAction
+                confirmAction={() => deleteApplication({ variables: { applicationId: application.id } })}
+                loading={loading}
+                cancelButtonText='Abbrechen'
+                confirmButtonText='Antrag löschen'
+                buttonLabel='Antrag löschen'
+                dialogText='Möchten Sie den Antrag unwiderruflich löschen?'
+              />
+            )}
+            {actionType === 'withdraw' && !application.withdrawalDate && (
+              <ApplicationAction
+                confirmAction={submitWithdrawal}
+                loading={withdrawalLoading}
+                cancelButtonText='Abbrechen'
+                confirmButtonText='Antrag zurückziehen'
+                buttonLabel='Antrag zurückziehen'
+                dialogText='Möchten Sie den Antrag zurückziehen?'
+              />
+            )}
           </div>
         </div>
       </ResizeSensor>
@@ -126,7 +172,11 @@ const ApplicationView: FunctionComponent<{ application: Application; gotDeleted:
 }
 
 // Necessary for FlipMove, as it cannot handle functional components
-class ApplicationViewComponent extends React.Component<{ application: Application; gotDeleted: () => void }> {
+export class ApplicationViewComponent extends React.Component<{
+  application: Application
+  gotConfirmed: () => void
+  actionType: ActionType
+}> {
   render() {
     return <ApplicationView {...this.props} />
   }
@@ -140,9 +190,10 @@ const ApplicationsOverview = (props: { applications: Application[] }) => {
     <FlipMove style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
       {updatedApplications.map(application => (
         <ApplicationViewComponent
+          actionType={'delete'}
           key={application.id}
           application={application}
-          gotDeleted={() => setUpdatedApplications(updatedApplications.filter(a => a !== application))}
+          gotConfirmed={() => setUpdatedApplications(updatedApplications.filter(a => a !== application))}
         />
       ))}
       {updatedApplications.length === 0 ? (

administration/src/graphql/applications/getApplication.graphql

@@ -0,0 +1,14 @@
+query getApplicationByUserAccessKey($accessKey: String!) {
+  application: getApplicationByUserAccessKey(accessKey: $accessKey) {
+    id
+    createdDate
+    jsonValue
+    withdrawalDate
+    verifications {
+      contactEmailAddress
+      organizationName
+      verifiedDate
+      rejectedDate
+    }
+  }
+}

administration/src/graphql/applications/getApplications.graphql

@@ -3,6 +3,7 @@ query getApplications($regionId: Int!) {
     id
     createdDate
     jsonValue
+    withdrawalDate
     verifications {
       contactEmailAddress
       organizationName

administration/src/graphql/applications/withdrawApplication.graphql

@@ -0,0 +1,3 @@
+mutation withdrawApplication($accessKey: String!) {
+  withdrawed: withdrawApplication(accessKey: $accessKey)
+}

backend/src/main/kotlin/app/ehrenamtskarte/backend/application/database/Schema.kt

@@ -14,6 +14,8 @@ object Applications : IntIdTable() {
     val regionId = reference("regionId", Regions)
     val jsonValue = text("jsonValue")
     val createdDate = datetime("createdDate").defaultExpression(CurrentDateTime)
+    val accessKey = varchar("accessKey", 100).uniqueIndex()
+    val withdrawalDate = datetime("withdrawalDate").nullable()
 }
 
 class ApplicationEntity(id: EntityID<Int>) : IntEntity(id) {
@@ -24,6 +26,8 @@ class ApplicationEntity(id: EntityID<Int>) : IntEntity(id) {
     var regionId by Applications.regionId
     var jsonValue by Applications.jsonValue
     var createdDate by Applications.createdDate
+    var accessKey by Applications.accessKey
+    var withdrawalDate by Applications.withdrawalDate
 }
 
 object ApplicationVerifications : IntIdTable() {