From 357142b7634b9fadb34dd287008fc6979eca0ac9 Mon Sep 17 00:00:00 2001 From: albina Date: Wed, 13 Nov 2024 13:39:04 +0000 Subject: [PATCH 1/8] fix(service-portal): petitions - export list --- .../PetitionsTable/ExportPetition/index.tsx | 156 ++++++++++-------- .../src/screens/PetitionsTable/styles.css.ts | 1 + .../petitions/src/screens/queries.ts | 24 +-- 3 files changed, 92 insertions(+), 89 deletions(-) diff --git a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx index 7660415c2269..b093180c8032 100644 --- a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx +++ b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx @@ -1,21 +1,18 @@ -import { FC, ReactElement, useEffect, useState } from 'react' +import { FC, ReactElement} from 'react' import { Box, DropdownMenu, Button, - FocusableBox, + LoadingDots, } from '@island.is/island-ui/core' import { useLocale, useNamespaces } from '@island.is/localization' import * as styles from '../styles.css' import { m } from '../../../lib/messages' import copyToClipboard from 'copy-to-clipboard' import { toast } from 'react-toastify' -import { usePDF } from '@react-pdf/renderer' -import MyPdfDocument from './DownloadPdf' import { EndorsementList } from '@island.is/api/schema' -import cn from 'classnames' -import { useGetAllPetitionEndorsements } from '../../hooks' -import { getCSV } from './downloadCSV' +import { useMutation } from '@apollo/client' +import { ExportList } from '../../queries' interface Props { petition?: EndorsementList @@ -35,30 +32,35 @@ interface Props { const baseUrl = `${document.location.origin}/undirskriftalistar/` const DropdownExport: FC> = ({ - petition, petitionId, dropdownItems = [], }) => { useNamespaces('sp.petitions') const { formatMessage } = useLocale() - const [canGetAllEndorsements, setCanGetAllEndorsements] = useState(false) - const { allEndorsements } = useGetAllPetitionEndorsements( - petitionId, - canGetAllEndorsements, - ) - - const [instance, updateInstance] = usePDF({ - document: ( - - ), + const [exportPdf, { loading: loadingPdf }] = useMutation(ExportList, { + variables: { + input: { + listId: petitionId, + fileType: 'pdf', + }, + }, + onCompleted: (data) => { + window.open(data.endorsementSystemExportList.url, '_blank') + }, }) - useEffect(() => { - if (allEndorsements.data?.length > 0) { - updateInstance() - } - }, [allEndorsements]) + const [exportCsv, { loading: loadingCsv }] = useMutation(ExportList, { + variables: { + input: { + listId: petitionId, + fileType: 'csv', + }, + }, + onCompleted: (data) => { + window.open(data.endorsementSystemExportList.url, '_blank') + }, + }) return ( @@ -77,58 +79,74 @@ const DropdownExport: FC> = ({ {formatMessage(m.copyLinkToList)} - setCanGetAllEndorsements(true)}> - { - return ( - - ) - }, + } + toast.success( + formatMessage(m.copyLinkSuccess.defaultMessage), + ) + }} + > + {formatMessage(m.linkToList)} + + ) }, - { - title: formatMessage(m.asPdf), - render: () => ( - + loadingPdf ? ( + + + + ) : ( + exportPdf()} > {formatMessage(m.asPdf)} - + ), - }, - { - onClick: () => getCSV(allEndorsements), - title: formatMessage(m.asCsv), - }, - ...dropdownItems, - ]} - title={formatMessage(m.downloadPetitions)} - /> - + }, + { + title: formatMessage(m.asCsv), + onClick: () => exportCsv(), + render: () => + loadingCsv ? ( + + + + ) : ( + exportCsv()} + > + {formatMessage(m.asCsv)} + + ), + }, + ...dropdownItems, + ]} + title={formatMessage(m.downloadPetitions)} + /> ) } diff --git a/libs/service-portal/petitions/src/screens/PetitionsTable/styles.css.ts b/libs/service-portal/petitions/src/screens/PetitionsTable/styles.css.ts index d8b81588db75..193eddcc363d 100644 --- a/libs/service-portal/petitions/src/screens/PetitionsTable/styles.css.ts +++ b/libs/service-portal/petitions/src/screens/PetitionsTable/styles.css.ts @@ -3,6 +3,7 @@ import { style } from '@vanilla-extract/css' export const menuItem = style({ paddingTop: '16px', + paddingBottom: '16px', display: 'flex', justifyContent: 'center', transition: 'color .2s', diff --git a/libs/service-portal/petitions/src/screens/queries.ts b/libs/service-portal/petitions/src/screens/queries.ts index f44d11b04366..24ec653532a6 100644 --- a/libs/service-portal/petitions/src/screens/queries.ts +++ b/libs/service-portal/petitions/src/screens/queries.ts @@ -171,26 +171,10 @@ export const OpenList = gql` } ` -export const LockList = gql` - mutation Mutants($input: FindEndorsementListInput!) { - endorsementSystemLockEndorsementList(input: $input) { - id - } - } -` - -export const UnlockList = gql` - mutation Mutants($input: FindEndorsementListInput!) { - endorsementSystemUnlockEndorsementList(input: $input) { - id - } - } -` - -export const UpdateList = gql` - mutation Mutants($input: UpdateEndorsementListInput!) { - endorsementSystemUpdateEndorsementList(input: $input) { - id +export const ExportList = gql` + mutation Mutants($input: ExportEndorsementListInput!) { + endorsementSystemExportList(input: $input) { + url } } ` From da0ee5a7688983a8f5753fa8fdaaf8d85f80bdbc Mon Sep 17 00:00:00 2001 From: andes-it Date: Wed, 13 Nov 2024 13:46:54 +0000 Subject: [PATCH 2/8] chore: nx format:write update dirty files --- .../src/screens/PetitionsTable/ExportPetition/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx index b093180c8032..c3afeafcfcaf 100644 --- a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx +++ b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx @@ -1,4 +1,4 @@ -import { FC, ReactElement} from 'react' +import { FC, ReactElement } from 'react' import { Box, DropdownMenu, From c3a0b36a38c0e67be796d0f47610d5b31605828a Mon Sep 17 00:00:00 2001 From: albina Date: Wed, 13 Nov 2024 14:09:53 +0000 Subject: [PATCH 3/8] tweaks --- .../endorsementList.service.ts | 45 ++++++++++++++----- .../PetitionsTable/ExportPetition/index.tsx | 2 +- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts b/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts index 610dd873837e..346f1b1a3123 100644 --- a/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts +++ b/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts @@ -29,6 +29,8 @@ import csvStringify from 'csv-stringify/lib/sync' import { S3Service } from '@island.is/nest/aws' import { EndorsementListExportUrlResponse } from './dto/endorsementListExportUrl.response.dto' import * as path from 'path' +import * as nationalId from 'kennitala' +import format from 'date-fns/format' interface CreateInput extends EndorsementListDto { owner: string @@ -346,9 +348,9 @@ export class EndorsementListService { // Add header image const headerImageHeight = 40 - doc.image(headerImagePath, 60, 40, { width: 120 }) + doc.image(headerImagePath, 52, 40, { width: 120 }) - let currentYPosition = 40 + headerImageHeight + 20 + let currentYPosition = 40 + headerImageHeight + 30 // Title and petition details doc @@ -357,14 +359,26 @@ export class EndorsementListService { .text('Upplýsingar um undirskriftalista', 60, currentYPosition, { align: 'left', }) + currentYPosition = doc.y + 30 + + doc + .font('Bold') .fontSize(12) .text( - 'Þetta skjal var framkallað sjálfvirkt þann: ' + - new Date().toLocaleDateString(locale) + - ' klukkan ' + - new Date().toLocaleTimeString(locale), + 'Þetta skjal var framkallað sjálfvirkt þann: ', + 60, + currentYPosition, + { + align: 'left', + }, ) - currentYPosition = doc.y + 20 // Adjust vertical space + currentYPosition = doc.y + 5 + + doc + .font('Regular') + .fontSize(12) + .text(format(new Date(), 'dd.MM.yyyy HH:mm')) + currentYPosition = doc.y + 20 doc .font('Bold') @@ -373,6 +387,7 @@ export class EndorsementListService { align: 'left', }) currentYPosition = doc.y + 5 + doc .font('Regular') .fontSize(12) @@ -387,6 +402,7 @@ export class EndorsementListService { .fontSize(12) .text('Um undirskriftalista: ', 60, currentYPosition, { align: 'left' }) currentYPosition = doc.y + 5 + doc .font('Regular') .fontSize(12) @@ -398,8 +414,9 @@ export class EndorsementListService { doc .font('Bold') .fontSize(12) - .text('Opin til: ', 60, currentYPosition, { align: 'left' }) + .text('Opinn til: ', 60, currentYPosition, { align: 'left' }) currentYPosition = doc.y + 5 + doc .font('Regular') .fontSize(12) @@ -415,8 +432,8 @@ export class EndorsementListService { .font('Bold') .fontSize(12) .text('Fjöldi undirskrifta: ', 60, currentYPosition, { align: 'left' }) - currentYPosition = doc.y + 5 + doc .font('Regular') .fontSize(12) @@ -430,6 +447,7 @@ export class EndorsementListService { .fontSize(12) .text('Ábyrgðarmaður: ', 60, currentYPosition, { align: 'left' }) currentYPosition = doc.y + 5 + doc .font('Regular') .fontSize(12) @@ -443,11 +461,14 @@ export class EndorsementListService { align: 'left', }) currentYPosition = doc.y + 5 + doc .font('Regular') .fontSize(12) - .text(endorsementList.owner, 60, currentYPosition, { align: 'left' }) - currentYPosition = doc.y + 30 + .text(nationalId.format(endorsementList.owner), 60, currentYPosition, { + align: 'left', + }) + currentYPosition = doc.y + 50 const dateX = 60 // Column X position for 'Dags. skráð' const nameX = 160 // Column X position for 'Nafn' @@ -503,7 +524,7 @@ export class EndorsementListService { }) // Add footer image at the bottom of the page - const footerY = doc.page.height - 80 + const footerY = doc.page.height - 65 doc.image(footerImagePath, 60, footerY, { width: 120 }) doc.end() diff --git a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx index b093180c8032..c3afeafcfcaf 100644 --- a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx +++ b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx @@ -1,4 +1,4 @@ -import { FC, ReactElement} from 'react' +import { FC, ReactElement } from 'react' import { Box, DropdownMenu, From 0754d41542942dd6b648ac5a0b2e0884885da000 Mon Sep 17 00:00:00 2001 From: albina Date: Wed, 13 Nov 2024 14:12:58 +0000 Subject: [PATCH 4/8] final tweak --- .../app/modules/endorsementList/endorsementList.service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts b/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts index 346f1b1a3123..f2683c7cb79b 100644 --- a/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts +++ b/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts @@ -359,7 +359,7 @@ export class EndorsementListService { .text('Upplýsingar um undirskriftalista', 60, currentYPosition, { align: 'left', }) - currentYPosition = doc.y + 30 + currentYPosition = doc.y + 20 doc .font('Bold') @@ -524,7 +524,7 @@ export class EndorsementListService { }) // Add footer image at the bottom of the page - const footerY = doc.page.height - 65 + const footerY = doc.page.height - 60 doc.image(footerImagePath, 60, footerY, { width: 120 }) doc.end() From ced2079ed77580d081eb98f395a19b5638d2b1c4 Mon Sep 17 00:00:00 2001 From: albina Date: Wed, 13 Nov 2024 14:14:24 +0000 Subject: [PATCH 5/8] aaand clean --- .../src/screens/PetitionsTable/ExportPetition/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx index c3afeafcfcaf..647e06df74fc 100644 --- a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx +++ b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx @@ -127,7 +127,6 @@ const DropdownExport: FC> = ({ }, { title: formatMessage(m.asCsv), - onClick: () => exportCsv(), render: () => loadingCsv ? ( From 5ea9331f8ae943f0283e17a1270ea2326b0ab3d5 Mon Sep 17 00:00:00 2001 From: albina Date: Wed, 13 Nov 2024 14:22:47 +0000 Subject: [PATCH 6/8] tiny --- .../modules/endorsementList/endorsementList.service.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts b/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts index f2683c7cb79b..aacee27f535f 100644 --- a/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts +++ b/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts @@ -377,8 +377,13 @@ export class EndorsementListService { doc .font('Regular') .fontSize(12) - .text(format(new Date(), 'dd.MM.yyyy HH:mm')) - currentYPosition = doc.y + 20 + .text( + format(new Date(), 'dd.MM.yyyy HH:mm'), + 60, + currentYPosition, + { align: 'left' }, + ) + currentYPosition = doc.y + 15 doc .font('Bold') From e60eaa9af8b9ab6cc62ea9451f530434e44bf12a Mon Sep 17 00:00:00 2001 From: albina Date: Wed, 13 Nov 2024 14:29:55 +0000 Subject: [PATCH 7/8] one more clean up --- .../ExportPetition/DownloadPdf/index.tsx | 169 ------------------ .../ExportPetition/downloadCSV.ts | 37 ---- .../PetitionsTable/ExportPetition/index.tsx | 2 +- 3 files changed, 1 insertion(+), 207 deletions(-) delete mode 100644 libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/DownloadPdf/index.tsx delete mode 100644 libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/downloadCSV.ts diff --git a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/DownloadPdf/index.tsx b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/DownloadPdf/index.tsx deleted file mode 100644 index 5fd7b36afc15..000000000000 --- a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/DownloadPdf/index.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { - Page, - Text, - Document, - Image, - View, - Font, - StyleSheet, -} from '@react-pdf/renderer' -import { formatDate } from '../../../../lib/utils' -import { - Endorsement, - EndorsementList, - PaginatedEndorsementResponse, -} from '@island.is/api/schema' -import { dark200 } from '@island.is/island-ui/theme' -import { format as formatNationalId } from 'kennitala' - -const MyPdfDocument = (data: { - petition?: EndorsementList - petitionSigners: PaginatedEndorsementResponse -}) => { - const { petition, petitionSigners } = data - - return ( - - - {/* Header */} - - - {/* Body */} - - Upplýsingar um undirskriftalista - Heiti undirskriftalista - {petition?.title} - Um undirskriftalista - {petition?.description} - - - Opinn til: - {formatDate(petition?.closedDate)} - - - Fjöldi undirskrifta: - {petitionSigners?.totalCount} - - - - - Ábyrgðarmaður: - {petition?.ownerName} - - - Kennitala ábyrgðarmanns: - {formatNationalId(petition?.owner as string)} - - - - - - Dags. skráð - Nafn - Sveitarfélag - - - {petitionSigners?.data?.map((sign: Endorsement) => { - return ( - - - {formatDate(sign.created)} - - - {sign.meta.fullName ? sign.meta.fullName : ''} - - - {sign.meta.locality ? sign.meta.locality : ''} - - - ) - })} - - - - {/* Footer */} - - - - ) -} - -export const pdfStyles = StyleSheet.create({ - body: { - paddingVertical: 40, - paddingBottom: 70, - paddingHorizontal: 60, - fontFamily: 'IBM Plex Sans', - fontSize: 10, - }, - title: { - fontSize: 24, - }, - header: { - fontSize: 14, - fontWeight: 600, - marginTop: 20, - marginBottom: 5, - }, - tableHeaderDate: { - fontWeight: 600, - marginBottom: 5, - width: '17%', - }, - tableHeader: { - fontWeight: 600, - marginBottom: 5, - width: '33%', - }, - row: { - flexDirection: 'row', - }, - widthHalf: { - width: '50%', - }, - listInfo: { - paddingBottom: 30, - }, - tableView: { - paddingTop: 20, - borderTop: `0.5px solid ${dark200}`, - }, - tableRow: { - flexDirection: 'row', - marginVertical: 5, - }, - image: { - width: 120, - marginBottom: 20, - marginLeft: -9, - }, - footerImage: { - position: 'absolute', - left: 60, - bottom: 40, - width: 120, - }, -}) - -Font.register({ - family: 'IBM Plex Sans', - fonts: [ - { - src: './assets/fonts/ibm-plex-sans-v7-latin-regular.ttf', - }, - { - src: './assets/fonts/ibm-plex-sans-v7-latin-600.ttf', - fontWeight: 600, - }, - ], -}) - -export default MyPdfDocument diff --git a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/downloadCSV.ts b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/downloadCSV.ts deleted file mode 100644 index 04c4184a6658..000000000000 --- a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/downloadCSV.ts +++ /dev/null @@ -1,37 +0,0 @@ -import CSVStringify from 'csv-stringify' -import { - PaginatedEndorsementResponse, - Endorsement, -} from '@island.is/api/schema' -import { formatDate } from '../../../lib/utils' - -export const getCSV = async (signers: PaginatedEndorsementResponse) => { - const dataArray = signers.data?.map((item: Endorsement) => [ - formatDate(item.created) ?? '', - item.meta.fullName ?? '', - item.meta.locality ?? '', - ]) - - await downloadCSV( - 'Undirskriftalisti', - ['Dagsetning', 'Nafn', 'Sveitarfélag'], - dataArray, - ) -} - -export const downloadCSV = async ( - name: string, - header: string[], - data: Array>, -) => { - const csvData = [header, ...data] - CSVStringify(csvData, (err, output) => { - const encodedUri = encodeURI(`data:text/csv;charset=utf-8,${output}`) - const link = document.createElement('a') - link.setAttribute('href', encodedUri) - link.setAttribute('download', name) - document.body.appendChild(link) - - link.click() - }) -} diff --git a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx index 647e06df74fc..f8b85267e442 100644 --- a/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx +++ b/libs/service-portal/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx @@ -58,7 +58,7 @@ const DropdownExport: FC> = ({ }, }, onCompleted: (data) => { - window.open(data.endorsementSystemExportList.url, '_blank') + window.location.href = data.endorsementSystemExportList.url }, }) From a6c017ec272ec06dd125c7e933850bc3a430a245 Mon Sep 17 00:00:00 2001 From: andes-it Date: Wed, 13 Nov 2024 15:00:42 +0000 Subject: [PATCH 8/8] chore: nx format:write update dirty files --- .../modules/endorsementList/endorsementList.service.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts b/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts index aacee27f535f..e0ba4c94b8e6 100644 --- a/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts +++ b/apps/services/endorsements/api/src/app/modules/endorsementList/endorsementList.service.ts @@ -377,12 +377,9 @@ export class EndorsementListService { doc .font('Regular') .fontSize(12) - .text( - format(new Date(), 'dd.MM.yyyy HH:mm'), - 60, - currentYPosition, - { align: 'left' }, - ) + .text(format(new Date(), 'dd.MM.yyyy HH:mm'), 60, currentYPosition, { + align: 'left', + }) currentYPosition = doc.y + 15 doc