Merge branch 'main' into j-s/civil-claimant-assigned-notifications

libs/portals/admin/petition/src/components/ExportList/exportList.graphql

@@ -0,0 +1,5 @@
+mutation ExportList($input: ExportEndorsementListInput!) {
+  endorsementSystemExportList(input: $input) {
+    url
+  }
+}

libs/portals/admin/petition/src/components/ExportList/index.tsx

@@ -1,20 +1,11 @@
 import { FC, ReactElement } from 'react'
-import { Box, DropdownMenu } from '@island.is/island-ui/core'
+import { Box, DropdownMenu, LoadingDots } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
 import * as styles from './styles.css'
 import { m } from '../../lib/messages'
-import {
-  EndorsementList,
-  PaginatedEndorsementResponse,
-} from '@island.is/api/schema'
-import MyPdfDocument from './MyPdfDocument'
-import { usePDF } from '@react-pdf/renderer'
-
+import { useExportListMutation } from './exportList.generated'
 interface Props {
-  petition: EndorsementList
-  petitionSigners: PaginatedEndorsementResponse
   petitionId: string
-  onGetCSV: () => void
   dropdownItems?: {
     href?: string
     onClick?: () => void
@@ -28,43 +19,75 @@ interface Props {
 }
 
 export const ExportList: FC<React.PropsWithChildren<Props>> = ({
-  petition,
-  petitionSigners,
   petitionId,
-  onGetCSV,
   dropdownItems = [],
 }) => {
   const { formatMessage } = useLocale()
 
-  const [document] = usePDF({
-    document: (
-      <MyPdfDocument petition={petition} petitionSigners={petitionSigners} />
-    ),
+  const [exportListPdf, { loading: loadingPdf }] = useExportListMutation({
+    variables: {
+      input: {
+        listId: petitionId,
+        fileType: 'pdf',
+      },
+    },
+    onCompleted: (data) => {
+      window.open(data.endorsementSystemExportList.url, '_blank')
+    },
+  })
+
+  const [exportListCsv, { loading: loadingCsv }] = useExportListMutation({
+    variables: {
+      input: {
+        listId: petitionId,
+        fileType: 'csv',
+      },
+    },
+    onCompleted: (data) => {
+      window.open(data.endorsementSystemExportList.url, '_blank')
+    },
   })
 
   return (
     <Box className={styles.buttonWrapper}>
       <DropdownMenu
-        icon="download"
+        icon="ellipsisVertical"
         iconType="outline"
         menuLabel={formatMessage(m.downloadPetitions)}
         items={[
           {
             title: formatMessage(m.asPdf),
-            render: () => (
-              <a
-                key={petitionId}
-                href={document.url ?? ''}
-                download={'Undirskriftalisti.pdf'}
-                className={styles.menuItem}
-              >
-                {formatMessage(m.asPdf)}
-              </a>
-            ),
+            render: () =>
+              loadingPdf ? (
+                <Box marginY={3} display="flex" justifyContent="center">
+                  <LoadingDots />
+                </Box>
+              ) : (
+                <Box
+                  className={styles.menuItem}
+                  cursor="pointer"
+                  onClick={() => exportListPdf()}
+                >
+                  {formatMessage(m.asPdf)}
+                </Box>
+              ),
           },
           {
-            onClick: () => onGetCSV(),
             title: formatMessage(m.asCsv),
+            render: () =>
+              loadingCsv ? (
+                <Box marginY={3} display="flex" justifyContent="center">
+                  <LoadingDots />
+                </Box>
+              ) : (
+                <Box
+                  className={styles.menuItem}
+                  cursor="pointer"
+                  onClick={() => exportListCsv()}
+                >
+                  {formatMessage(m.asCsv)}
+                </Box>
+              ),
           },
           ...dropdownItems,
         ]}

libs/portals/admin/petition/src/components/ExportList/styles.css.ts

@@ -7,6 +7,7 @@ export const buttonWrapper = style({
 
 export const menuItem = style({
   paddingTop: '16px',
+  paddingBottom: '16px',
   display: 'flex',
   justifyContent: 'center',
   transition: 'color .2s',
@@ -18,4 +19,9 @@ export const menuItem = style({
       color: theme.color.blue400,
     },
   },
+  '@media': {
+    [`screen and (max-width: ${theme.breakpoints.sm}px)`]: {
+      fontSize: 12,
+    },
+  },
 })

libs/portals/admin/petition/src/components/ListSignersTable/index.tsx

@@ -15,7 +15,6 @@ import {
   EndorsementList,
   PaginatedEndorsementResponse,
 } from '@island.is/api/schema'
-import { getCSV } from '../ExportList/downloadCSV'
 
 const ListSignersTable = (data: {
   listId: string
@@ -44,12 +43,7 @@ const ListSignersTable = (data: {
     <Box marginTop={12}>
       <Box display="flex" justifyContent="spaceBetween" marginBottom={3}>
         <Text variant="h3">{formatMessage(m.petitionsOverview)}</Text>
-        <ExportList
-          petition={data.petition}
-          petitionSigners={data.petitionSigners}
-          petitionId={data.listId}
-          onGetCSV={() => getCSV(data.petitionSigners, 'Undirskriftalisti')}
-        />
+        <ExportList petitionId={data.listId} />
       </Box>
       <Stack space={3}>
         <T.Table>

libs/portals/my-pages/petitions/src/screens/PetitionsTable/ExportPetition/index.tsx

@@ -10,12 +10,10 @@ import * as styles from '../styles.css'
 import { m } from '../../../lib/messages'
 import copyToClipboard from 'copy-to-clipboard'
 import { toast } from 'react-toastify'
-import { EndorsementList } from '@island.is/api/schema'
 import { useMutation } from '@apollo/client'
 import { ExportList } from '../../queries'
 
 interface Props {
-  petition?: EndorsementList
   petitionId: string
   dropdownItems?: {
     href?: string

libs/portals/my-pages/petitions/src/screens/PetitionsTable/index.tsx

@@ -37,11 +37,7 @@ const PetitionsTable = (data: {
     <Box>
       <Box display="flex" justifyContent="spaceBetween" marginBottom={2}>
         <Text variant="h3">{formatMessage(m.petitionsOverview)}</Text>
-        <Box>
-          {data.canEdit && (
-            <DropdownExport petition={data.petition} petitionId={data.listId} />
-          )}
-        </Box>
+        <Box>{data.canEdit && <DropdownExport petitionId={data.listId} />}</Box>
       </Box>
       <Stack space={3}>
         <T.Table>