From d9eb1d6b055132fcc0fc127f8b78b844574a385d Mon Sep 17 00:00:00 2001
From: Stef Winterswijk <stef_winterswijk@hotmail.com>
Date: Mon, 14 Oct 2024 15:11:04 +0200
Subject: [PATCH] Add Modal for reports

---
 .../PublicationPackageReportUploadModal.tsx   | 23 +++++++++++++++++++
 .../index.ts                                  |  1 +
 .../Modals/PublicationModals/index.ts         |  2 ++
 src/components/Modals/types.ts                |  4 ++++
 .../components/Package.tsx                    | 19 +++++++++++----
 .../ModuleDetail/components/TabDecisions.tsx  |  2 ++
 src/utils/handleError.ts                      | 12 ++++++----
 7 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/PublicationPackageReportUploadModal.tsx
 create mode 100644 src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/index.ts

diff --git a/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/PublicationPackageReportUploadModal.tsx b/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/PublicationPackageReportUploadModal.tsx
new file mode 100644
index 00000000..ab4c012f
--- /dev/null
+++ b/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/PublicationPackageReportUploadModal.tsx
@@ -0,0 +1,23 @@
+import { FormikFileUpload } from '@pzh-ui/components'
+import { Form, Formik } from 'formik'
+
+import Modal from '@/components/Modal'
+
+const PublicationPackageReportUploadModal = () => {
+    const handleSubmit = () => {}
+
+    return (
+        <Modal
+            id="publicationPackageReportUpload"
+            title="Upload rapporten"
+            size="xl">
+            <Formik initialValues={{}} onSubmit={handleSubmit}>
+                <Form>
+                    <FormikFileUpload name="uploaded_files" />
+                </Form>
+            </Formik>
+        </Modal>
+    )
+}
+
+export default PublicationPackageReportUploadModal
diff --git a/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/index.ts b/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/index.ts
new file mode 100644
index 00000000..1152c97f
--- /dev/null
+++ b/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/index.ts
@@ -0,0 +1 @@
+export { default } from './PublicationPackageReportUploadModal'
diff --git a/src/components/Modals/PublicationModals/index.ts b/src/components/Modals/PublicationModals/index.ts
index 7d2b4e69..08b59599 100644
--- a/src/components/Modals/PublicationModals/index.ts
+++ b/src/components/Modals/PublicationModals/index.ts
@@ -1,9 +1,11 @@
 import PublicationAnnouncementUpdateModal from './PublicationAnnouncementUpdateModal'
 import PublicationEditModal from './PublicationEditModal'
+import PublicationPackageReportUploadModal from './PublicationPackageReportUploadModal'
 import PublicationVersionEditModal from './PublicationVersionEditModal'
 
 export {
     PublicationAnnouncementUpdateModal,
     PublicationEditModal,
+    PublicationPackageReportUploadModal,
     PublicationVersionEditModal,
 }
diff --git a/src/components/Modals/types.ts b/src/components/Modals/types.ts
index f21ed67e..27a4bb1a 100644
--- a/src/components/Modals/types.ts
+++ b/src/components/Modals/types.ts
@@ -42,6 +42,7 @@ export type ModalType =
     | 'publicationVersionAbort'
     | 'publicationAnnouncementPackages'
     | 'publicationAnnouncementUpdate'
+    | 'publicationPackageReportUpload'
 
 export interface ModalStateMap {
     moduleEditObject: {
@@ -81,4 +82,7 @@ export interface ModalStateMap {
     publicationAnnouncementUpdate: {
         announcementUuid: string
     }
+    publicationPackageReportUpload: {
+        packageUUID: string
+    }
 }
diff --git a/src/components/Publications/PublicationPackages/components/Package.tsx b/src/components/Publications/PublicationPackages/components/Package.tsx
index fe304d7b..b0d6b463 100644
--- a/src/components/Publications/PublicationPackages/components/Package.tsx
+++ b/src/components/Publications/PublicationPackages/components/Package.tsx
@@ -6,9 +6,9 @@ import {
     EyeLight,
 } from '@pzh-ui/icons'
 import { useMemo } from 'react'
-import { Link } from 'react-router-dom'
 
 import { PublicationPackage } from '@/api/fetchers.schemas'
+import useModalStore from '@/store/modalStore'
 
 import { useActions } from './actions'
 import { getIndicatorClass } from './utils'
@@ -30,6 +30,8 @@ const Package = ({
     versionUUID,
     canPublicate,
 }: PackageProps) => {
+    const setActiveModal = useModalStore(state => state.setActiveModal)
+
     const { downloadPackage } = useActions({
         publicationUUID,
         versionUUID,
@@ -108,20 +110,27 @@ const Package = ({
                     <div>
                         <Text size="s">Gedownload op {downloadDate}</Text>
                         {!isLocked && canPublicate && (
-                            <Link
-                                to="/"
-                                className="group/upload flex items-center gap-2">
+                            <Button
+                                variant="default"
+                                className="group/upload flex items-center gap-2"
+                                onPress={() =>
+                                    setActiveModal(
+                                        'publicationPackageReportUpload',
+                                        { packageUUID: UUID }
+                                    )
+                                }>
                                 <Text
                                     size="s"
                                     className="leading-none underline group-hover/upload:no-underline"
                                     color="text-pzh-green-500">
                                     Upload rapporten
                                 </Text>
+
                                 <ArrowUpRightFromSquareLight
                                     size={14}
                                     className="-mt-0.5 text-pzh-green-500"
                                 />
-                            </Link>
+                            </Button>
                         )}
                     </div>
                     {canPublicate && (
diff --git a/src/pages/protected/Modules/ModuleDetail/components/TabDecisions.tsx b/src/pages/protected/Modules/ModuleDetail/components/TabDecisions.tsx
index e36e5eb9..eddc2b3d 100644
--- a/src/pages/protected/Modules/ModuleDetail/components/TabDecisions.tsx
+++ b/src/pages/protected/Modules/ModuleDetail/components/TabDecisions.tsx
@@ -21,6 +21,7 @@ import { LoaderSpinner } from '@/components/Loader'
 import {
     PublicationAnnouncementUpdateModal,
     PublicationEditModal,
+    PublicationPackageReportUploadModal,
     PublicationVersionEditModal,
 } from '@/components/Modals/PublicationModals'
 import PublicationFolder from '@/components/Publications/PublicationFolder'
@@ -38,6 +39,7 @@ const TabDecisions = () => (
         <PublicationEditModal />
         <PublicationVersionEditModal />
         <PublicationAnnouncementUpdateModal />
+        <PublicationPackageReportUploadModal />
     </>
 )
 
diff --git a/src/utils/handleError.ts b/src/utils/handleError.ts
index 81c90f7f..927bfc5b 100644
--- a/src/utils/handleError.ts
+++ b/src/utils/handleError.ts
@@ -11,10 +11,14 @@ const ERRORS: { [key: string]: string } = {
 }
 
 const handleError = <T>(err: Error, helpers: FormikHelpers<T>) => {
-    err.data?.detail?.forEach(item => {
-        helpers.setFieldError(item.loc.join('.'), ERRORS[item.msg] || item.msg)
-        helpers.setFieldTouched(item.loc.join('.'), true)
-    })
+    Array.isArray(err.data?.detail) &&
+        err.data?.detail?.forEach(item => {
+            helpers.setFieldError(
+                item.loc.join('.'),
+                ERRORS[item.msg] || item.msg
+            )
+            helpers.setFieldTouched(item.loc.join('.'), true)
+        })
 
     helpers.setSubmitting(false)
 }