From 8e960442dc2d7f0e98722ece2a9a0eb553fb542e Mon Sep 17 00:00:00 2001 From: Stef Winterswijk Date: Tue, 15 Oct 2024 15:19:38 +0200 Subject: [PATCH] Update Publication reports functionality --- package.json | 2 +- .../PublicationAnnouncementUpdateModal.tsx | 5 + .../PublicationPackageReportUploadModal.tsx | 171 +++++++++++++++++- src/components/Modals/types.ts | 4 + .../PublicationPackages.tsx | 2 + .../components/Package.tsx | 13 +- .../components/PackageCreate.tsx | 5 +- .../components/Packages.tsx | 13 ++ .../PublicationPackages/components/actions.ts | 89 +++++++-- yarn.lock | 10 +- 10 files changed, 288 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index adf94ca5..4cbcc7d5 100644 --- a/package.json +++ b/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", diff --git a/src/components/Modals/PublicationModals/PublicationAnnouncementUpdateModal/PublicationAnnouncementUpdateModal.tsx b/src/components/Modals/PublicationModals/PublicationAnnouncementUpdateModal/PublicationAnnouncementUpdateModal.tsx index e6039c41..505cd8cc 100644 --- a/src/components/Modals/PublicationModals/PublicationAnnouncementUpdateModal/PublicationAnnouncementUpdateModal.tsx +++ b/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, diff --git a/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/PublicationPackageReportUploadModal.tsx b/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/PublicationPackageReportUploadModal.tsx index ab4c012f..996657fe 100644 --- a/src/components/Modals/PublicationModals/PublicationPackageReportUploadModal/PublicationPackageReportUploadModal.tsx +++ b/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 ( - -
- - + + {props => } +
+ +
) } +const InnerForm = ({ + values, + setFieldValue, + isSubmitting, +}: FormikProps) => { + 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 ( +
+ + {!!values.uploaded_files.length && ( +
+ + Geselecteerde bestanden + +
    + {values.uploaded_files.map((file, index) => ( +
  • +
    + + {file.path} + +
    + + {formatBytes(file.size)} + + +
    +
    +
  • + ))} +
+ +
+ )} + + ) +} + export default PublicationPackageReportUploadModal diff --git a/src/components/Modals/types.ts b/src/components/Modals/types.ts index 27a4bb1a..d72f20ab 100644 --- a/src/components/Modals/types.ts +++ b/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 } } diff --git a/src/components/Publications/PublicationPackages/PublicationPackages.tsx b/src/components/Publications/PublicationPackages/PublicationPackages.tsx index 024745f4..1493fbc4 100644 --- a/src/components/Publications/PublicationPackages/PublicationPackages.tsx +++ b/src/components/Publications/PublicationPackages/PublicationPackages.tsx @@ -76,6 +76,7 @@ const PublicationPackages = ({ {environment?.Can_Validate && ( { 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, + } ) }> ['createPackage'] + announcementUUID?: string inline?: boolean packageType: PackageType isLocked?: boolean @@ -15,6 +16,7 @@ interface PackageCreateProps { const PackageCreate = ({ createPackage, + announcementUUID, inline, packageType, isLocked, @@ -22,8 +24,9 @@ const PackageCreate = ({ const { versionUUID } = useParams() const handleAction = () => - createPackage.mutate({ + createPackage.mutateAsync({ versionUuid: String(versionUUID), + announcementUuid: String(announcementUUID), data: { Package_Type: packageType }, }) diff --git a/src/components/Publications/PublicationPackages/components/Packages.tsx b/src/components/Publications/PublicationPackages/components/Packages.tsx index 0a86e0e7..36f7df48 100644 --- a/src/components/Publications/PublicationPackages/components/Packages.tsx +++ b/src/components/Publications/PublicationPackages/components/Packages.tsx @@ -7,6 +7,7 @@ import { } from '@/api/fetchers' import { PackageType, + PublicationAnnouncementShort, PublicationPackage, PublicationShort, PublicationVersion, @@ -15,6 +16,7 @@ import { import { LoaderCard } from '@/components/Loader' import useModalStore from '@/store/modalStore' +import { PublicationType } from '../../types' import { useActions } from './actions' import Package from './Package' import PackageCreate from './PackageCreate' @@ -29,9 +31,11 @@ const config = { } interface PackagesProps { + publicationType: PublicationType data?: PublicationPackage[] isFetching?: boolean version: PublicationVersion + announcement?: PublicationAnnouncementShort publication?: PublicationShort packageType: PackageType validPublicationPackage?: PublicationPackage @@ -41,9 +45,11 @@ interface PackagesProps { } const Packages = ({ + publicationType, data, isFetching, version, + announcement, publication, packageType, customLabel, @@ -53,7 +59,9 @@ const Packages = ({ const setActiveModal = useModalStore(state => state.setActiveModal) const { createPackage } = useActions({ + publicationType, versionUUID: version.UUID, + announcementUUID: announcement?.UUID, publicationUUID: String(publication?.UUID), }) @@ -82,6 +90,7 @@ const Packages = ({ ) : !!!data?.length ? ( @@ -90,9 +99,11 @@ const Packages = ({ {data.map(item => ( @@ -100,6 +111,7 @@ const Packages = ({ {!version.Is_Locked && ( @@ -247,6 +259,7 @@ export const AnnouncementPackages = ({ data={data} isFetching={isFetching} version={version} + announcement={announcement} packageType={packageType} isLocked={!!validPublicationPackage && !!validAnnouncementPackage} {...rest} diff --git a/src/components/Publications/PublicationPackages/components/actions.ts b/src/components/Publications/PublicationPackages/components/actions.ts index 6dde1bf5..a76eb127 100644 --- a/src/components/Publications/PublicationPackages/components/actions.ts +++ b/src/components/Publications/PublicationPackages/components/actions.ts @@ -4,33 +4,58 @@ import { AxiosError } from 'axios' import { getPublicationActPackagesActPackageUuidDownloadGetQueryKey, getPublicationActPackagesGetQueryKey, + getPublicationAnnouncementPackagesAnnouncementPackageUuidDownloadGetQueryKey, + getPublicationAnnouncementPackagesGetQueryKey, getPublicationsPublicationUuidVersionsGetQueryKey, + usePublicationActPackagesActPackageUuidReportPost, + usePublicationAnnouncementPackagesAnnouncementPackageUuidReportPost, + usePublicationAnnouncementsAnnouncementUuidPackagesPost, usePublicationVersionsVersionUuidPackagesPost, } from '@/api/fetchers' import { HTTPValidationError } from '@/api/fetchers.schemas' import { downloadFile } from '@/utils/file' +import { PublicationType } from '../../types' + interface ActionsProps { + publicationType: PublicationType versionUUID?: string + announcementUUID?: string publicationUUID: string packageUUID?: string } export const useActions = ({ + publicationType, versionUUID, + announcementUUID, publicationUUID, packageUUID, }: ActionsProps) => { const queryClient = useQueryClient() - const createPackage = usePublicationVersionsVersionUuidPackagesPost({ + const createPackage = ( + publicationType === 'act' + ? usePublicationVersionsVersionUuidPackagesPost + : usePublicationAnnouncementsAnnouncementUuidPackagesPost + )({ mutation: { onSuccess: () => { - queryClient.invalidateQueries({ - queryKey: getPublicationActPackagesGetQueryKey({ - version_uuid: versionUUID, - }), - }) + if (publicationType === 'act') { + queryClient.invalidateQueries({ + queryKey: getPublicationActPackagesGetQueryKey({ + version_uuid: versionUUID, + }), + }) + } else { + queryClient.invalidateQueries({ + queryKey: getPublicationAnnouncementPackagesGetQueryKey( + { + announcement_uuid: announcementUUID, + } + ), + }) + } queryClient.invalidateQueries({ queryKey: getPublicationsPublicationUuidVersionsGetQueryKey( @@ -59,18 +84,60 @@ export const useActions = ({ queryKey: ['downloadPackage', packageUUID, versionUUID], queryFn: async () => downloadFile( - getPublicationActPackagesActPackageUuidDownloadGetQueryKey( + (publicationType === 'act' + ? getPublicationActPackagesActPackageUuidDownloadGetQueryKey + : getPublicationAnnouncementPackagesAnnouncementPackageUuidDownloadGetQueryKey)( String(packageUUID) )[0] ).finally(() => queryClient.invalidateQueries({ - queryKey: getPublicationActPackagesGetQueryKey({ - version_uuid: versionUUID, - }), + queryKey: + publicationType === 'act' + ? getPublicationActPackagesGetQueryKey({ + version_uuid: versionUUID, + }) + : getPublicationAnnouncementPackagesGetQueryKey({ + announcement_uuid: announcementUUID, + }), }) ), enabled: false, }) - return { createPackage, downloadPackage } + const uploadReports = ( + publicationType === 'act' + ? usePublicationActPackagesActPackageUuidReportPost + : usePublicationAnnouncementPackagesAnnouncementPackageUuidReportPost + )({ + mutation: { + onSuccess: data => { + if (publicationType === 'act') { + queryClient.invalidateQueries({ + queryKey: getPublicationActPackagesGetQueryKey({ + version_uuid: versionUUID, + }), + }) + } else { + queryClient.invalidateQueries({ + queryKey: getPublicationAnnouncementPackagesGetQueryKey( + { + announcement_uuid: announcementUUID, + } + ), + }) + } + + if (data.Status === 'valid') { + queryClient.invalidateQueries({ + queryKey: + getPublicationsPublicationUuidVersionsGetQueryKey( + publicationUUID + ), + }) + } + }, + }, + }) + + return { createPackage, downloadPackage, uploadReports } } diff --git a/yarn.lock b/yarn.lock index c14f46ce..244ae04f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3140,9 +3140,9 @@ __metadata: languageName: node linkType: hard -"@pzh-ui/components@npm:^0.0.570": - version: 0.0.570 - resolution: "@pzh-ui/components@npm:0.0.570" +"@pzh-ui/components@npm:^0.0.575": + version: 0.0.575 + resolution: "@pzh-ui/components@npm:0.0.575" dependencies: "@floating-ui/react": "npm:^0.24.8" "@headlessui/react": "npm:^1.5.0" @@ -3194,7 +3194,7 @@ __metadata: react-stately: "npm:^3.30.1" react-toastify: "npm:^9.1.2" tailwind-merge: "npm:^2.2.2" - checksum: a25fb1f3fc67e4cbd64a90632756982ad22034349c3d60149019876d6abf329715d87d986378a8169f3ab6eb612d1ed3684ad7a4ea76ce6f89d8831ccf11a855 + checksum: 45f84cd35aa8085fa6868c089af32650bf14b2cbff9520d162168ff226c2c54afd39f9e6fc67ef2d1361eab3932802264ca9f3260b6b6f7cdbb547d2c14092e8 languageName: node linkType: hard @@ -13436,7 +13436,7 @@ __metadata: "@axe-core/react": "npm:^4.10.0" "@faker-js/faker": "npm:^8.3.1" "@headlessui/react": "npm:^1.7.17" - "@pzh-ui/components": "npm:^0.0.570" + "@pzh-ui/components": "npm:^0.0.575" "@pzh-ui/config": "npm:^0.0.70" "@pzh-ui/css": "npm:^0.0.100" "@pzh-ui/icons": "npm:^0.0.69"