fix: Styling of loading dialog & Add date/time report name

digidem · Sep 15, 2020 · ade5753 · ade5753
1 parent b5191eb
commit ade5753
Showing 1 changed file with 32 additions and 8 deletions.
diff --git a/src/renderer/components/MapFilter/ReportView/PrintButton.js b/src/renderer/components/MapFilter/ReportView/PrintButton.js
@@ -1,13 +1,14 @@
 // @flow
 import React, { useMemo } from 'react'
 import PrintIcon from '@material-ui/icons/Print'
+import { makeStyles } from '@material-ui/core/styles'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { BlobProvider } from '@react-pdf/renderer'
-import { defineMessages, FormattedMessage } from 'react-intl'
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl'
 import type { Observation } from 'mapeo-schema'
 
 import Loading from '../../Loading'
@@ -20,15 +21,17 @@ const LARGE_REPORT_LENGTH = 50
 
 const messages = defineMessages({
   // Title of print settings dialog
-  dialogTitle: 'Save Report as PDF',
+  dialogTitle: 'Saving Report',
   // Title of the PDF document
   title: 'Title',
   // Button label to close print settings dialog
   close: 'Cancel',
   // Button label to save a report
   print: 'Save',
   // Loading message when report is very long.
-  printLoading: 'Your report is more than 50 pages long, this may take several minutes to prepare.'
+  printLoading: 'Note: This report is more than 50 pages long. It may take several minutes to prepare.',
+  // The title of the report on the filesystem
+  reportName: 'Report'
 })
 
 type Props = {
@@ -98,6 +101,8 @@ class PrintButton extends React.Component<Props, State> {
 // which is passed to PDFReport to actually create the PDF.
 
 const SavePDFLoadingDialog = ({ closeDialog, renderer, observations }) => {
+  const cx = useStyles()
+  const { formatMessage : t } = useIntl()
   const pdf = useMemo(() => {
     return (
       <PDFReport
@@ -113,7 +118,12 @@ const SavePDFLoadingDialog = ({ closeDialog, renderer, observations }) => {
 
   const finishedLoading = (url) => {
     const link = document.createElement('a')
-    link.setAttribute('download', 'report.pdf')
+    const now = new Date();
+    const offsetMs = now.getTimezoneOffset() * 60 * 1000;
+    const dateLocal = new Date(now.getTime() - offsetMs);
+    const str = dateLocal.toISOString().slice(0, 19).replace(/-/g, "/").replace("T", "-");
+
+    link.setAttribute('download', `${t(messages.reportName)}-${str}.pdf`)
     link.href = url
     // $FlowFixMe - these are always non-null
     document.body.appendChild(link)
@@ -133,12 +143,16 @@ const SavePDFLoadingDialog = ({ closeDialog, renderer, observations }) => {
         </DialogTitle>
         <DialogContent>
         { loading
-          ? <>
+          ? <div className={cx.loadingBox}>
+              <Loading />
               { observations.length > LARGE_REPORT_LENGTH
-                ? <FormattedMessage {...messages.printLoading} />
+                ? <div className={cx.loadingMessage}>
+                    <FormattedMessage
+                      {...messages.printLoading}
+                    />
+                  </div>
                 : null }
-              <Loading />
-            </>
+            </div>
           : null
         }
         </DialogContent>
@@ -153,3 +167,13 @@ const SavePDFLoadingDialog = ({ closeDialog, renderer, observations }) => {
 }
 
 export default PrintButton
+
+const useStyles = makeStyles(theme => ({
+  loadingBox: {
+    padding: '50px'
+  },
+  loadingMessage: {
+    paddingTop: '30px',
+    fontStyle: 'italic'
+  }
+}))