fix: print preview wasnt calculating page bottom correctly (#1028)

Calculation of the "page" bottom was incorrect. Correct calculation code pulled into a separate function and tests added.
dhis2 · Aug 31, 2020 · 505ad07 · 505ad07
1 parent 5e899a4
commit 505ad07
Show file tree

Hide file tree

Showing 5 changed files with 365 additions and 55 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,11 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-08-26T05:58:25.332Z\n"
-"PO-Revision-Date: 2020-08-26T05:58:25.332Z\n"
+"POT-Creation-Date: 2020-08-31T08:37:42.542Z\n"
+"PO-Revision-Date: 2020-08-31T08:37:42.542Z\n"
+
+msgid "Untitled dashboard"
+msgstr ""
 
 msgid "Cancel"
 msgstr ""
@@ -177,9 +180,6 @@ msgstr ""
 msgid "Dashboard title"
 msgstr ""
 
-msgid "Untitled dashboard"
-msgstr ""
-
 msgid "Dashboard description"
 msgstr ""
 

diff --git a/src/components/ItemGrid/PrintLayoutItemGrid.js b/src/components/ItemGrid/PrintLayoutItemGrid.js
@@ -4,34 +4,36 @@ import PropTypes from 'prop-types'
 import i18n from '@dhis2/d2-i18n'
 import ReactGridLayout from 'react-grid-layout'
 import { Layer, CenteredContent, CircularLoader } from '@dhis2/ui'
-import sortBy from 'lodash/sortBy'
 
 import { Item } from '../Item/Item'
+import NoContentMessage from '../../widgets/NoContentMessage'
 
 import { acUpdatePrintDashboardLayout } from '../../actions/printDashboard'
+import { sGetSelectedIsLoading } from '../../reducers/selected'
+import {
+    sGetPrintDashboardRoot,
+    sGetPrintDashboardItems,
+} from '../../reducers/printDashboard'
+
 import {
     GRID_ROW_HEIGHT,
     GRID_COMPACT_TYPE,
     MARGIN,
     getGridColumns,
     hasShape,
 } from './gridUtil'
-import { orArray } from '../../modules/util'
-import { a4LandscapeWidthPx } from '../../modules/printUtils'
-import { PRINT_LAYOUT } from '../Dashboard/dashboardModes'
-import { itemTypeMap, PAGEBREAK } from '../../modules/itemTypes'
+import {
+    a4LandscapeWidthPx,
+    getDomGridItemsSortedByYPos,
+} from '../../modules/printUtils'
 
-import NoContentMessage from '../../widgets/NoContentMessage'
+import { PRINT_LAYOUT } from '../Dashboard/dashboardModes'
+import { PAGEBREAK } from '../../modules/itemTypes'
 
 import 'react-grid-layout/css/styles.css'
 import 'react-resizable/css/styles.css'
 
 import './ItemGrid.css'
-import { sGetSelectedIsLoading } from '../../reducers/selected'
-import {
-    sGetPrintDashboardRoot,
-    sGetPrintDashboardItems,
-} from '../../reducers/printDashboard'
 
 // this is set in the .dashboard-item-content css
 export const ITEM_CONTENT_PADDING_BOTTOM = 4
@@ -53,53 +55,27 @@ export class PrintLayoutItemGrid extends Component {
     getItemComponents = items => items.map(item => this.getItemComponent(item))
 
     hideExtraPageBreaks() {
-        const elements = Array.from(
-            document.querySelectorAll('.react-grid-item')
+        const sortedElements = getDomGridItemsSortedByYPos(
+            Array.from(document.querySelectorAll('.react-grid-item'))
         )
 
-        const types = Object.keys(itemTypeMap)
-        const items = elements.map(el => {
-            const classNames = el.className.split(' ')
-
-            const type = classNames.find(
-                className => types.indexOf(className) > -1
-            )
-
-            const rect = el.getBoundingClientRect()
-
-            return {
-                type,
-                el,
-                y: rect.y,
-                h: rect.height,
-            }
-        })
-        const sortedItems = sortBy(items, ['y'])
-
         let pageBreakBottom = 0
         let lastItemBottom = 0
         let foundNonPageBreak = false
 
-        for (let i = sortedItems.length - 1; i >= 0; --i) {
-            const item = sortedItems[i]
+        for (let i = sortedElements.length - 1; i >= 0; --i) {
+            const item = sortedElements[i]
             if (item.type === PAGEBREAK) {
                 if (!foundNonPageBreak) {
                     item.el.classList.add('removed')
                 } else {
-                    const y = item.el.style.transform
-                        ? item.el.style.transform.split(' ')[1].slice(0, -3)
-                        : item.y
-
-                    pageBreakBottom = parseInt(y) + parseInt(item.h)
+                    pageBreakBottom = item.bottomY
                     break
                 }
             } else {
                 foundNonPageBreak = true
-                const y = item.el.style.transform
-                    ? item.el.style.transform.split(' ')[1].slice(0, -3)
-                    : item.y
 
-                const thisItemBottom = parseInt(y) + parseInt(item.h)
+                const thisItemBottom = item.bottomY
                 if (thisItemBottom > lastItemBottom) {
                     lastItemBottom = thisItemBottom
                 }
@@ -192,9 +168,7 @@ const mapStateToProps = state => {
 
     return {
         isLoading: sGetSelectedIsLoading(state) || !selectedDashboard,
-        dashboardItems: orArray(sGetPrintDashboardItems(state)).filter(
-            hasShape
-        ),
+        dashboardItems: sGetPrintDashboardItems(state).filter(hasShape),
     }
 }