Update Publication reports functionality

package.json

@@ -6,7 +6,7 @@
     "type": "module",
     "dependencies": {
         "@headlessui/react": "^1.7.17",
-        "@pzh-ui/components": "^0.0.570",
+        "@pzh-ui/components": "^0.0.575",
         "@pzh-ui/config": "^0.0.70",
         "@pzh-ui/css": "^0.0.100",
         "@pzh-ui/icons": "^0.0.69",

src/components/Modals/PublicationModals/PublicationAnnouncementUpdateModal/PublicationAnnouncementUpdateModal.tsx

@@ -50,6 +50,11 @@ const PublicationAnnouncementUpdateModal = () => {
     )
 
     const handleSubmit = (payload: PublicationAnnouncementEdit) => {
+        if (payload.Announcement_Date && payload.Procedural) {
+            payload.Procedural.Procedural_Announcement_Date =
+                payload.Announcement_Date
+        }
+
         mutate({
             announcementUuid: modalState?.announcementUuid,
             data: payload,

src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/PublicationPackageReportUploadModal.tsx

@@ -1,23 +1,180 @@
-import { FormikFileUpload } from '@pzh-ui/components'
-import { Form, Formik } from 'formik'
+import {
+    Button,
+    File,
+    formatBytes,
+    FormikFileUpload,
+    Text,
+} from '@pzh-ui/components'
+import { TrashCan } from '@pzh-ui/icons'
+import { Form, Formik, FormikHelpers, FormikProps } from 'formik'
+import { useMemo } from 'react'
 
+import {
+    usePublicationActReportsGet,
+    usePublicationAnnouncementReportsGet,
+} from '@/api/fetchers'
+import { LoaderSpinner } from '@/components/Loader'
 import Modal from '@/components/Modal'
+import { useActions } from '@/components/Publications/PublicationPackages/components/actions'
+import useModalStore from '@/store/modalStore'
+
+import { ModalStateMap } from '../../types'
 
 const PublicationPackageReportUploadModal = () => {
-    const handleSubmit = () => {}
+    const setActiveModal = useModalStore(state => state.setActiveModal)
+    const modalState = useModalStore(
+        state => state.modalStates['publicationPackageReportUpload']
+    ) as ModalStateMap['publicationPackageReportUpload']
+
+    const { uploadReports } = useActions(modalState || {})
+
+    const handleSubmit = (
+        payload: { uploaded_files: File[] },
+        helpers: FormikHelpers<{ uploaded_files: never[] }>
+    ) => {
+        uploadReports
+            .mutateAsync({
+                actPackageUuid: modalState.packageUUID,
+                announcementPackageUuid: modalState.packageUUID,
+                data: payload,
+            })
+            .then(() => {
+                helpers.setSubmitting(false)
+            })
+    }
 
     return (
         <Modal
             id="publicationPackageReportUpload"
             title="Upload rapporten"
             size="xl">
-            <Formik initialValues={{}} onSubmit={handleSubmit}>
-                <Form>
-                    <FormikFileUpload name="uploaded_files" />
-                </Form>
+            <Formik
+                initialValues={{
+                    uploaded_files: [],
+                }}
+                onSubmit={handleSubmit}>
+                {props => <InnerForm {...props} />}
             </Formik>
+            <div className="mt-12 flex justify-end">
+                <Button onPress={() => setActiveModal(null)}>Sluiten</Button>
+            </div>
         </Modal>
     )
 }
 
+const InnerForm = <TData extends { uploaded_files: File[] }>({
+    values,
+    setFieldValue,
+    isSubmitting,
+}: FormikProps<TData>) => {
+    const modalState = useModalStore(
+        state => state.modalStates['publicationPackageReportUpload']
+    ) as ModalStateMap['publicationPackageReportUpload']
+
+    const { data: actReports } = usePublicationActReportsGet(
+        {
+            act_package_uuid: modalState.packageUUID,
+        },
+        {
+            query: {
+                enabled: modalState.publicationType === 'act',
+            },
+        }
+    )
+
+    const { data: announcementReports } = usePublicationAnnouncementReportsGet(
+        {
+            announcement_package_uuid: modalState.packageUUID,
+        },
+        {
+            query: {
+                enabled: modalState.publicationType === 'announcement',
+            },
+        }
+    )
+
+    const reports =
+        modalState.publicationType === 'act' ? actReports : announcementReports
+
+    console.log(reports)
+
+    const removeFile = (file: File) => () => {
+        const newFiles = [...values.uploaded_files]
+        newFiles.splice(newFiles.indexOf(file), 1)
+
+        setFieldValue('uploaded_files', newFiles)
+    }
+
+    const count = useMemo(
+        () => values.uploaded_files.length,
+        [values.uploaded_files]
+    )
+
+    return (
+        <Form>
+            <FormikFileUpload
+                name="uploaded_files"
+                hideDescription
+                hideIcon
+                hideSelectedFiles
+                className="py-24"
+                accept={{ '*': [] }}
+            />
+            {!!values.uploaded_files.length && (
+                <div className="mt-6 rounded border border-pzh-gray-300 p-4">
+                    <Text bold color="text-pzh-blue-500 mb-2">
+                        Geselecteerde bestanden
+                    </Text>
+                    <ul className="flex flex-col gap-2">
+                        {values.uploaded_files.map((file, index) => (
+                            <li
+                                key={file.path || `file-${index}`}
+                                className="pzh-form-input overflow-hidden border-pzh-gray-200">
+                                <div className="flex items-center justify-between gap-2 px-4">
+                                    <Text
+                                        bold
+                                        color="text-pzh-blue-500"
+                                        className="truncate">
+                                        {file.path}
+                                    </Text>
+                                    <div className="flex items-center">
+                                        <Text
+                                            as="span"
+                                            size="s"
+                                            color="text-pzh-gray-600"
+                                            className="whitespace-nowrap">
+                                            {formatBytes(file.size)}
+                                        </Text>
+                                        <Button
+                                            variant="default"
+                                            onPress={removeFile(file)}
+                                            aria-label="Verwijderen">
+                                            {!isSubmitting ? (
+                                                <TrashCan
+                                                    size={16}
+                                                    className="-mt-[2px] ml-4 text-pzh-red-500"
+                                                />
+                                            ) : (
+                                                <LoaderSpinner className="-mt-[2px] ml-4 text-pzh-blue-500" />
+                                            )}
+                                        </Button>
+                                    </div>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                    <Button
+                        type="submit"
+                        variant="cta"
+                        className="mt-4"
+                        isDisabled={isSubmitting}
+                        isLoading={isSubmitting}>
+                        {count} {count > 1 ? 'Bestanden' : 'Bestand'} uploaden
+                    </Button>
+                </div>
+            )}
+        </Form>
+    )
+}
+
 export default PublicationPackageReportUploadModal

src/components/Modals/types.ts

@@ -9,6 +9,8 @@ import {
 } from '@/api/fetchers.schemas'
 import { Error } from '@/utils/handleError'
 
+import { PublicationType } from '../Publications/types'
+
 export type ModalType =
     | 'regulationAdd'
     | 'regulationDelete'
@@ -83,6 +85,8 @@ export interface ModalStateMap {
         announcementUuid: string
     }
     publicationPackageReportUpload: {
+        publicationType: PublicationType
+        publicationUUID: string
         packageUUID: string
     }
 }

src/components/Publications/PublicationPackages/PublicationPackages.tsx

@@ -76,6 +76,7 @@ const PublicationPackages = ({
                 {environment?.Can_Validate && (
                     <Packages
                         version={version}
+                        publicationType={publicationType}
                         packageType="validation"
                         customLabel={
                             !environment.Can_Publicate
@@ -89,6 +90,7 @@ const PublicationPackages = ({
                 {environment?.Can_Publicate && (
                     <Packages
                         version={version}
+                        publicationType={publicationType}
                         packageType="publication"
                         canPublicate={environment.Can_Publicate}
                         {...rest}

src/components/Publications/PublicationPackages/components/Package.tsx

@@ -10,31 +10,38 @@ import { useMemo } from 'react'
 import { PublicationPackage } from '@/api/fetchers.schemas'
 import useModalStore from '@/store/modalStore'
 
+import { PublicationType } from '../../types'
 import { useActions } from './actions'
 import { getIndicatorClass } from './utils'
 
 interface PackageProps extends PublicationPackage {
+    publicationType: PublicationType
     publicationUUID: string
     versionUUID: string
+    announcementUUID?: string
     isLocked?: boolean
     canPublicate?: boolean
 }
 
 const Package = ({
+    publicationType,
     UUID,
     Created_Date,
     Zip,
     Report_Status,
     isLocked,
     publicationUUID,
     versionUUID,
+    announcementUUID,
     canPublicate,
 }: PackageProps) => {
     const setActiveModal = useModalStore(state => state.setActiveModal)
 
     const { downloadPackage } = useActions({
+        publicationType,
         publicationUUID,
         versionUUID,
+        announcementUUID,
         packageUUID: UUID,
     })
 
@@ -116,7 +123,11 @@ const Package = ({
                                 onPress={() =>
                                     setActiveModal(
                                         'publicationPackageReportUpload',
-                                        { packageUUID: UUID }
+                                        {
+                                            packageUUID: UUID,
+                                            publicationType,
+                                            publicationUUID,
+                                        }
                                     )
                                 }>
                                 <Text

src/components/Publications/PublicationPackages/components/PackageCreate.tsx

@@ -8,22 +8,25 @@ import { useActions } from './actions'
 
 interface PackageCreateProps {
     createPackage: ReturnType<typeof useActions>['createPackage']
+    announcementUUID?: string
     inline?: boolean
     packageType: PackageType
     isLocked?: boolean
 }
 
 const PackageCreate = ({
     createPackage,
+    announcementUUID,
     inline,
     packageType,
     isLocked,
 }: PackageCreateProps) => {
     const { versionUUID } = useParams()
 
     const handleAction = () =>
-        createPackage.mutate({
+        createPackage.mutateAsync({
             versionUuid: String(versionUUID),
+            announcementUuid: String(announcementUUID),
             data: { Package_Type: packageType },
         })