Merge pull request #290 from AmbireTech/print-fix

Print fix
AmbireTech · Sep 10, 2024 · c69c3bd · c69c3bd
2 parents 352d06b + 496f8b2
commit c69c3bd
Show file tree

Hide file tree

Showing 7 changed files with 242 additions and 339 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -29,11 +29,8 @@ function GlobalStyles() {
     <Global
       styles={(theme: MantineTheme) => ({
         [theme.other.media.print]: {
-          body: {
-            visibility: 'hidden'
-          },
-          'body #printable': {
-            visibility: 'visible'
+          '#root': {
+            display: 'none'
           }
         }
       })}

diff --git a/src/components/AdminPanel/AdminAnalytics.tsx b/src/components/AdminPanel/AdminAnalytics.tsx
@@ -1,15 +1,5 @@
 import { useEffect, useState, useMemo, useCallback } from 'react'
-import {
-  Select,
-  Flex,
-  Box,
-  Text,
-  Badge,
-  ActionIcon,
-  Stack,
-  Group,
-  LoadingOverlay
-} from '@mantine/core'
+import { Select, Box, Text, Badge, ActionIcon, Stack, Group, LoadingOverlay } from '@mantine/core'
 import { AnalyticsPeriod, Timeframe, AnalyticsType, SSPs } from 'types'
 import useCampaignAnalytics from 'hooks/useCampaignAnalytics'
 import CustomTable from 'components/common/CustomTable'
@@ -222,17 +212,17 @@ const AdminAnalytics = () => {
   }, [handlePreview])
 
   return (
-    <>
-      <Text size="sm">
+    <Stack gap="xs">
+      <Text size="sm" inline>
         * This analytics are for the actual user campaign, representing placed impressions, clicks,
         etc. (NOT the stats form received requests form the SSPs)
       </Text>
-      <Text size="sm" mb="md" c="info">
+      <Text size="sm" mb="md" c="info" inline>
         * Amounts include AdEx validator fees 7% (total amounts paid by the users). For amounts
         payed to ssp divide by 1.07 (for records after 22.06.24)
       </Text>
 
-      <Flex direction="row" align="start" justify="left" gap="xl" mb="md">
+      <Group align="start" justify="left" gap="xs">
         <Select
           label="Type"
           value={analType}
@@ -270,7 +260,7 @@ const AdminAnalytics = () => {
           withSeconds
           size="md"
         />
-      </Flex>
+      </Group>
 
       <Stack>
         <Group align="center" justify="left" gap="xs" pos="relative">
@@ -331,7 +321,7 @@ const AdminAnalytics = () => {
           actions={analType === 'campaignId' ? actions : undefined}
         />
       </Stack>
-    </>
+    </Stack>
   )
 }
 

diff --git a/src/components/Billing/AccountStatements.tsx b/src/components/Billing/AccountStatements.tsx
@@ -1,5 +1,4 @@
 import { useMemo, useCallback, useState, SetStateAction } from 'react'
-import { Title } from '@mantine/core'
 import CustomTable from 'components/common/CustomTable'
 import { useDisclosure } from '@mantine/hooks'
 import useAccount from 'hooks/useAccount'
@@ -29,6 +28,7 @@ const getTokenIndex = (token: OperationEntry['token']): string =>
 const Statements = () => {
   const [opened, { open, close }] = useDisclosure(false)
   const {
+    isLoading,
     adexAccount: { address, billingDetails, fundsDeposited, fundsOnCampaigns, refundsFromCampaigns }
   } = useAccount()
 
@@ -135,10 +135,6 @@ const Statements = () => {
     ]
   }, [onPreview])
 
-  if (!statements) {
-    return <Title order={4}>No AccountStatements found.</Title>
-  }
-
   return (
     <>
       <BillingDetailsModal title="Statement" loading={!statement} opened={opened} close={close}>
@@ -150,7 +146,13 @@ const Statements = () => {
           />
         )}
       </BillingDetailsModal>
-      <CustomTable headings={columnTitles} elements={elements} actions={actions} shadow="xs" />
+      <CustomTable
+        headings={columnTitles}
+        elements={elements}
+        actions={actions}
+        shadow="xs"
+        loading={isLoading}
+      />
     </>
   )
 }

diff --git a/src/components/Billing/BillingDetailsModal.tsx b/src/components/Billing/BillingDetailsModal.tsx
@@ -1,5 +1,16 @@
 import { PropsWithChildren } from 'react'
-import { Button, Flex, Group, Loader, MantineTheme, Modal, getPrimaryShade } from '@mantine/core'
+import {
+  Button,
+  Center,
+  Group,
+  Loader,
+  MantineTheme,
+  Modal,
+  getPrimaryShade,
+  ScrollArea,
+  Portal,
+  Box
+} from '@mantine/core'
 import { createStyles } from '@mantine/emotion'
 import { useColorScheme } from '@mantine/hooks'
 
@@ -32,16 +43,16 @@ const useStyles = createStyles((theme: MantineTheme) => {
     close: {
       color: theme.colors.mainText[primaryShade]
     },
+    printableModal: {
+      [theme.other.media.print]: {
+        display: 'none'
+      }
+    },
     printable: {
+      display: 'none',
       [theme.other.media.print]: {
-        // NOTE: it's not fixed/absolute to body but modal.inner
-        overflow: 'visible',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        bottom: 0,
-        width: '100%'
-        // padding: theme.spacing.xl
+        // border: '1px solid yellow',
+        display: 'block'
       }
     }
   }
@@ -50,40 +61,49 @@ const useStyles = createStyles((theme: MantineTheme) => {
 export const BillingDetailsModal = ({ children, loading, title, opened, close }: DetailsProps) => {
   const { classes } = useStyles()
   return (
-    <Modal
-      title={title}
-      size="xl"
-      opened={opened}
-      onClose={close}
-      centered
-      radius="sm"
-      classNames={{
-        header: classes.header,
-        title: classes.title,
-        close: classes.close
-      }}
-    >
-      <div>
+    <>
+      <Modal
+        className={classes.printableModal}
+        title={
+          <Group>
+            <Button
+              mt="md"
+              mb="md"
+              onClick={async () => {
+                window.print()
+              }}
+            >
+              Print
+            </Button>
+            {title}
+          </Group>
+        }
+        size="xl"
+        opened={opened}
+        onClose={close}
+        centered
+        radius="sm"
+        padding="md"
+        classNames={{
+          header: classes.header,
+          title: classes.title,
+          close: classes.close
+        }}
+        scrollAreaComponent={ScrollArea.Autosize}
+      >
         {loading ? (
-          <Flex justify="center" align="center" h="60vh">
+          <Center h="100%">
             <Loader size="xl" />
-          </Flex>
+          </Center>
         ) : (
-          <>
-            <Group justify="right">
-              <Button mt="md" mb="md" onClick={() => window.print()}>
-                Print
-              </Button>
-            </Group>
-
-            <div className={classes.wrapper}>
-              <div id="printable" className={classes.printable}>
-                {children}
-              </div>
-            </div>
-          </>
+          <Box p="sm"> {children}</Box>
         )}
-      </div>
-    </Modal>
+      </Modal>
+      <Portal>
+        <Box id="printable" className={classes.printable}>
+          {children}
+        </Box>
+      </Portal>
+    </>
   )
 }