fix(service-portal): petitions - export list

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,31 @@ export class EndorsementListService {
       .text('Upplýsingar um undirskriftalista', 60, currentYPosition, {
         align: 'left',
       })
+    currentYPosition = doc.y + 20
+
+    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'),
+        60,
+        currentYPosition,
+        { align: 'left' },
+      )
+    currentYPosition = doc.y + 15
 
     doc
       .font('Bold')
@@ -373,6 +392,7 @@ export class EndorsementListService {
         align: 'left',
       })
     currentYPosition = doc.y + 5
+
     doc
       .font('Regular')
       .fontSize(12)
@@ -387,6 +407,7 @@ export class EndorsementListService {
       .fontSize(12)
       .text('Um undirskriftalista: ', 60, currentYPosition, { align: 'left' })
     currentYPosition = doc.y + 5
+
     doc
       .font('Regular')
       .fontSize(12)
@@ -398,8 +419,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 +437,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 +452,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 +466,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 +529,7 @@ export class EndorsementListService {
     })
 
     // Add footer image at the bottom of the page
-    const footerY = doc.page.height - 80
+    const footerY = doc.page.height - 60
     doc.image(footerImagePath, 60, footerY, { width: 120 })
 
     doc.end()

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<React.PropsWithChildren<Props>> = ({
-  petition,
   petitionId,
   dropdownItems = [],
 }) => {
   useNamespaces('sp.petitions')
   const { formatMessage } = useLocale()
 
-  const [canGetAllEndorsements, setCanGetAllEndorsements] = useState(false)
-  const { allEndorsements } = useGetAllPetitionEndorsements(
-    petitionId,
-    canGetAllEndorsements,
-  )
-
-  const [instance, updateInstance] = usePDF({
-    document: (
-      <MyPdfDocument petition={petition} petitionSigners={allEndorsements} />
-    ),
+  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 (
     <Box display="flex">
@@ -77,58 +79,73 @@ const DropdownExport: FC<React.PropsWithChildren<Props>> = ({
           {formatMessage(m.copyLinkToList)}
         </Button>
       </Box>
-      <FocusableBox onClick={() => setCanGetAllEndorsements(true)}>
-        <DropdownMenu
-          icon="ellipsisVertical"
-          iconType="outline"
-          menuLabel={formatMessage(m.downloadPetitions)}
-          items={[
-            {
-              title: formatMessage(m.downloadPetitions),
-              render: () => {
-                return (
-                  <button
-                    key="copyLinkDesktop"
-                    className={cn(styles.hideOnDesktop)}
-                    onClick={() => {
-                      const copied = copyToClipboard(baseUrl + petitionId)
-                      if (!copied) {
-                        return toast.error(
-                          formatMessage(m.copyLinkError.defaultMessage),
-                        )
-                      }
-                      toast.success(
-                        formatMessage(m.copyLinkSuccess.defaultMessage),
+      <DropdownMenu
+        icon="ellipsisVertical"
+        iconType="outline"
+        menuLabel={formatMessage(m.downloadPetitions)}
+        items={[
+          {
+            title: formatMessage(m.downloadPetitions),
+            render: () => {
+              return (
+                <button
+                  key="copyLinkDesktop"
+                  className={styles.hideOnDesktop}
+                  onClick={() => {
+                    const copied = copyToClipboard(baseUrl + petitionId)
+                    if (!copied) {
+                      return toast.error(
+                        formatMessage(m.copyLinkError.defaultMessage),
                       )
-                    }}
-                  >
-                    {formatMessage(m.linkToList)}
-                  </button>
-                )
-              },
+                    }
+                    toast.success(
+                      formatMessage(m.copyLinkSuccess.defaultMessage),
+                    )
+                  }}
+                >
+                  {formatMessage(m.linkToList)}
+                </button>
+              )
             },
-            {
-              title: formatMessage(m.asPdf),
-              render: () => (
-                <a
-                  key={petitionId}
-                  href={instance.url ?? ''}
-                  download={'Undirskriftalisti.pdf'}
+          },
+          {
+            title: formatMessage(m.asPdf),
+            render: () =>
+              loadingPdf ? (
+                <Box marginY={3} display="flex" justifyContent="center">
+                  <LoadingDots />
+                </Box>
+              ) : (
+                <Box
                   className={styles.menuItem}
+                  cursor="pointer"
+                  onClick={() => exportPdf()}
                 >
                   {formatMessage(m.asPdf)}
-                </a>
+                </Box>
               ),
-            },
-            {
-              onClick: () => getCSV(allEndorsements),
-              title: formatMessage(m.asCsv),
-            },
-            ...dropdownItems,
-          ]}
-          title={formatMessage(m.downloadPetitions)}
-        />
-      </FocusableBox>
+          },
+          {
+            title: formatMessage(m.asCsv),
+            render: () =>
+              loadingCsv ? (
+                <Box marginY={3} display="flex" justifyContent="center">
+                  <LoadingDots />
+                </Box>
+              ) : (
+                <Box
+                  className={styles.menuItem}
+                  cursor="pointer"
+                  onClick={() => exportCsv()}
+                >
+                  {formatMessage(m.asCsv)}
+                </Box>
+              ),
+          },
+          ...dropdownItems,
+        ]}
+        title={formatMessage(m.downloadPetitions)}
+      />
     </Box>
   )
 }

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',

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
     }
   }
 `