From 060e78389c9ad5393b2bb526b42a4e34844ef0d6 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Mon, 14 Sep 2020 08:38:50 +0200 Subject: [PATCH 1/8] fix: use hooks to exert finer control on setting dashboard --- src/components/Dashboard/Dashboard.js | 139 +++++++++++++------------- 1 file changed, 70 insertions(+), 69 deletions(-) diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index b78c1b44a..91f0fef0d 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React, { useEffect } from 'react' import { connect } from 'react-redux' import PropTypes from 'prop-types' import isEmpty from 'lodash/isEmpty' @@ -34,6 +34,15 @@ import { isPrintMode, } from './dashboardModes' +const setHeaderbarVisibility = mode => { + const header = document.getElementsByTagName('header')[0] + if (isPrintMode(mode)) { + header.classList.add('hidden') + } else { + header.classList.remove('hidden') + } +} + const dashboardMap = { [VIEW]: , [EDIT]: , @@ -42,101 +51,93 @@ const dashboardMap = { [PRINT_LAYOUT]: , } -export class Dashboard extends Component { - setDashboard = () => { - if (this.props.dashboardsLoaded) { - const id = this.props.match.params.dashboardId || null || null - - this.props.selectDashboard(id) - - this.setHeaderbarVisibility() - } - } - - setHeaderbarVisibility = () => { - const header = document.getElementsByTagName('header')[0] - if (isPrintMode(this.props.mode)) { - header.classList.add('hidden') - } else { - header.classList.remove('hidden') +export const Dashboard = ({ + id, + mode, + dashboardsLoaded, + dashboardsIsEmpty, + routeId, + selectDashboard, + setWindowHeight, +}) => { + useEffect(() => { + setHeaderbarVisibility(mode) + }, [mode]) + + useEffect(() => { + if (dashboardsLoaded && !dashboardsIsEmpty) { + selectDashboard(routeId) } - } + }, [dashboardsLoaded, dashboardsIsEmpty, routeId, mode]) - componentDidMount() { + useEffect(() => { + // TODO does this need to be cleared? window.onresize = debounce( - () => this.props.setWindowHeight(window.innerHeight), + () => setWindowHeight(window.innerHeight), 300 ) - this.setDashboard() + }, []) + + if (!dashboardsLoaded || id === null) { + return ( + + + + + + ) } - componentDidUpdate() { - this.setDashboard() + if (mode === NEW) { + return dashboardMap[mode] } - render() { - const { id, mode, dashboardsLoaded, dashboardsIsEmpty } = this.props - - if (!dashboardsLoaded || id === null) { - return ( - - - - - - ) - } - - if (mode === NEW) { - return dashboardMap[mode] - } - - if (dashboardsIsEmpty) { - return ( - <> - - - - - ) - } - - if (id === NON_EXISTING_DASHBOARD_ID) { - return ( - <> - - - - - ) - } + if (dashboardsIsEmpty) { + return ( + <> + + + + + ) + } - return dashboardMap[mode] + if (id === NON_EXISTING_DASHBOARD_ID) { + return ( + <> + + + + + ) } + + return dashboardMap[mode] } Dashboard.propTypes = { dashboardsIsEmpty: PropTypes.bool, dashboardsLoaded: PropTypes.bool, id: PropTypes.string, - match: PropTypes.object, mode: PropTypes.string, + routeId: PropTypes.string, selectDashboard: PropTypes.func, setWindowHeight: PropTypes.func, } -const mapStateToProps = state => { +const mapStateToProps = (state, ownProps) => { const dashboards = sGetAllDashboards(state) return { dashboardsIsEmpty: isEmpty(dashboards), dashboardsLoaded: !sDashboardsIsFetching(state), id: sGetSelectedId(state), + routeId: ownProps.match.params.dashboardId || null, } } From d9bdc1350aae3a8b454e373e43c1300ecbfd48c9 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 15 Sep 2020 09:17:19 +0200 Subject: [PATCH 2/8] fix: removeEventListener --- src/components/Dashboard/Dashboard.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index 91f0fef0d..51b320552 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -71,11 +71,14 @@ export const Dashboard = ({ }, [dashboardsLoaded, dashboardsIsEmpty, routeId, mode]) useEffect(() => { - // TODO does this need to be cleared? - window.onresize = debounce( + const onResize = debounce( () => setWindowHeight(window.innerHeight), 300 ) + window.addEventListener('resize', onResize) + return () => { + window.removeEventListener('resize', onResize) + } }, []) if (!dashboardsLoaded || id === null) { From 81abcfb80496500440a636fc70edef197f3369b6 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 15 Sep 2020 10:36:03 +0200 Subject: [PATCH 3/8] fix: fix the redux mutation --- src/components/Dashboard/Dashboard.js | 2 +- src/components/Dashboard/PrintDashboard.js | 23 ++++++++++++++++++++- src/components/ItemGrid/PrintItemGrid.js | 24 +++++----------------- src/modules/printUtils.js | 3 +++ 4 files changed, 31 insertions(+), 21 deletions(-) diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index 51b320552..15048785d 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -68,7 +68,7 @@ export const Dashboard = ({ if (dashboardsLoaded && !dashboardsIsEmpty) { selectDashboard(routeId) } - }, [dashboardsLoaded, dashboardsIsEmpty, routeId, mode]) + }, [dashboardsLoaded, dashboardsIsEmpty, routeId]) useEffect(() => { const onResize = debounce( diff --git a/src/components/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js index bf981f954..9c119455c 100644 --- a/src/components/Dashboard/PrintDashboard.js +++ b/src/components/Dashboard/PrintDashboard.js @@ -10,6 +10,7 @@ import { acSetPrintDashboard, acAddPrintDashboardItem, acRemovePrintDashboardItem, + acUpdatePrintDashboardItem, } from '../../actions/printDashboard' import { sGetSelectedId } from '../../reducers/selected' import { sGetWindowHeight } from '../../reducers/windowHeight' @@ -18,7 +19,12 @@ import { sGetDashboardItems, } from '../../reducers/dashboards' import { PAGEBREAK, PRINT_TITLE_PAGE, SPACER } from '../../modules/itemTypes' -import { a4LandscapeWidthPx } from '../../modules/printUtils' +import { + a4LandscapeWidthPx, + MAX_ITEM_GRID_HEIGHT_OIPP, + MAX_ITEM_GRID_WIDTH, + PAGEBREAK_GRID_HEIGHT_OIPP, +} from '../../modules/printUtils' import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar' import classes from './styles/PrintDashboard.module.css' @@ -64,6 +70,19 @@ export class PrintDashboard extends Component { } this.props.addDashboardItem({ type: PRINT_TITLE_PAGE }) + + // Resize to the full page size + this.props.items.forEach(item => { + const w = MAX_ITEM_GRID_WIDTH + const h = + item.type === PAGEBREAK + ? PAGEBREAK_GRID_HEIGHT_OIPP + : MAX_ITEM_GRID_HEIGHT_OIPP + + this.props.updateDashboardItem( + Object.assign({}, item, { w, h }) + ) + }) } } @@ -103,6 +122,7 @@ PrintDashboard.propTypes = { items: PropTypes.array, removeDashboardItem: PropTypes.func, setPrintDashboard: PropTypes.func, + updateDashboardItem: PropTypes.func, windowHeight: PropTypes.number, } @@ -122,4 +142,5 @@ export default connect(mapStateToProps, { setPrintDashboard: acSetPrintDashboard, addDashboardItem: acAddPrintDashboardItem, removeDashboardItem: acRemovePrintDashboardItem, + updateDashboardItem: acUpdatePrintDashboardItem, })(PrintDashboard) diff --git a/src/components/ItemGrid/PrintItemGrid.js b/src/components/ItemGrid/PrintItemGrid.js index 6a9578ac0..0aef69c75 100644 --- a/src/components/ItemGrid/PrintItemGrid.js +++ b/src/components/ItemGrid/PrintItemGrid.js @@ -24,31 +24,17 @@ import { } from './gridUtil' import { a4LandscapeWidthPx } from '../../modules/printUtils' import { orArray } from '../../modules/util' -import { PAGEBREAK } from '../../modules/itemTypes' import 'react-grid-layout/css/styles.css' import './ItemGrid.css' export class PrintItemGrid extends Component { - getItemComponent = item => { - const itemClassNames = [item.type, 'print', 'oipp'].join(' ') - - // TODO: this mutates the redux store - item.w = 56 - - if (item.type === PAGEBREAK) { - item.h = 3 - } else { - item.h = 35 - } - - return ( -
- -
- ) - } + getItemComponent = item => ( +
+ +
+ ) getItemComponents = items => items.map(item => this.getItemComponent(item)) diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js index c09e94e7d..cb878367c 100644 --- a/src/modules/printUtils.js +++ b/src/modules/printUtils.js @@ -8,6 +8,9 @@ import { itemTypeMap } from './itemTypes' export const a4LandscapeWidthPx = 1102 export const MAX_ITEM_GRID_HEIGHT = 34 +export const MAX_ITEM_GRID_HEIGHT_OIPP = 35 +export const MAX_ITEM_GRID_WIDTH = 56 +export const PAGEBREAK_GRID_HEIGHT_OIPP = 3 export const getTransformYPx = elStyle => { if (!elStyle || !elStyle.transform) { From d8ab02d26be3c3a6ff1887aa559c436f84ac9bb3 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 15 Sep 2020 10:48:57 +0200 Subject: [PATCH 4/8] fix: use classnames --- src/components/ItemGrid/PrintItemGrid.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ItemGrid/PrintItemGrid.js b/src/components/ItemGrid/PrintItemGrid.js index 0aef69c75..5158cde1e 100644 --- a/src/components/ItemGrid/PrintItemGrid.js +++ b/src/components/ItemGrid/PrintItemGrid.js @@ -4,6 +4,7 @@ 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 cx from 'classnames' import { Item } from '../Item/Item' import NoContentMessage from '../../widgets/NoContentMessage' @@ -31,7 +32,7 @@ import './ItemGrid.css' export class PrintItemGrid extends Component { getItemComponent = item => ( -
+
) From 824bb99b3f832044e6a72764bb9b8fb589fe30f9 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 15 Sep 2020 12:07:26 +0200 Subject: [PATCH 5/8] fix: issue with oipp print title page size --- src/actions/printDashboard.js | 2 +- src/components/Dashboard/PrintDashboard.js | 29 +++++++++---------- .../Dashboard/PrintLayoutDashboard.js | 5 +++- src/components/ItemGrid/gridUtil.js | 9 +++--- src/modules/printUtils.js | 3 +- 5 files changed, 26 insertions(+), 22 deletions(-) diff --git a/src/actions/printDashboard.js b/src/actions/printDashboard.js index 06fae0cb9..e3c7cb8df 100644 --- a/src/actions/printDashboard.js +++ b/src/actions/printDashboard.js @@ -52,7 +52,7 @@ export const acAddPrintDashboardItem = item => { const yPos = item.yPos || 0 shape = getPageBreakItemShape(yPos, item.isStatic) } else { - shape = getPrintTitlePageItemShape() + shape = getPrintTitlePageItemShape(item.isOipp) } return { diff --git a/src/components/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js index 9c119455c..c6fff4085 100644 --- a/src/components/Dashboard/PrintDashboard.js +++ b/src/components/Dashboard/PrintDashboard.js @@ -22,8 +22,7 @@ import { PAGEBREAK, PRINT_TITLE_PAGE, SPACER } from '../../modules/itemTypes' import { a4LandscapeWidthPx, MAX_ITEM_GRID_HEIGHT_OIPP, - MAX_ITEM_GRID_WIDTH, - PAGEBREAK_GRID_HEIGHT_OIPP, + MAX_ITEM_GRID_WIDTH_OIPP, } from '../../modules/printUtils' import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar' @@ -55,6 +54,16 @@ export class PrintDashboard extends Component { } }) + // Resize the items to the full page size + this.props.items.forEach(item => { + this.props.updateDashboardItem( + Object.assign({}, item, { + w: MAX_ITEM_GRID_WIDTH_OIPP, + h: MAX_ITEM_GRID_HEIGHT_OIPP, + }) + ) + }) + // insert page breaks into the document flow to create the "pages" // when previewing the print for ( @@ -69,19 +78,9 @@ export class PrintDashboard extends Component { }) } - this.props.addDashboardItem({ type: PRINT_TITLE_PAGE }) - - // Resize to the full page size - this.props.items.forEach(item => { - const w = MAX_ITEM_GRID_WIDTH - const h = - item.type === PAGEBREAK - ? PAGEBREAK_GRID_HEIGHT_OIPP - : MAX_ITEM_GRID_HEIGHT_OIPP - - this.props.updateDashboardItem( - Object.assign({}, item, { w, h }) - ) + this.props.addDashboardItem({ + type: PRINT_TITLE_PAGE, + isOipp: true, }) } } diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index d5cfba726..a946973b1 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -106,7 +106,10 @@ export class PrintLayoutDashboard extends Component { addPageBreaks(this.props) - this.props.addDashboardItem({ type: PRINT_TITLE_PAGE }) + this.props.addDashboardItem({ + type: PRINT_TITLE_PAGE, + isOipp: false, + }) } } diff --git a/src/components/ItemGrid/gridUtil.js b/src/components/ItemGrid/gridUtil.js index 953244b9b..ef11f6c9f 100644 --- a/src/components/ItemGrid/gridUtil.js +++ b/src/components/ItemGrid/gridUtil.js @@ -17,6 +17,7 @@ export const NEW_ITEM_SHAPE = { x: 0, y: 0, w: 20, h: 29 } const NUMBER_OF_ITEM_COLS = 2 const GRID_COLUMNS = 60 +const MAX_ITEM_GRID_WIDTH = GRID_COLUMNS - 1 export const getGridColumns = () => { switch (GRID_LAYOUT) { @@ -50,7 +51,7 @@ export const getShape = i => { const col = i % NUMBER_OF_ITEM_COLS const row = Math.floor(i / NUMBER_OF_ITEM_COLS) - const itemWidth = Math.floor((GRID_COLUMNS - 1) / NUMBER_OF_ITEM_COLS) + const itemWidth = Math.floor(MAX_ITEM_GRID_WIDTH / NUMBER_OF_ITEM_COLS) const itemHeight = GRID_ROW_HEIGHT * 2 return { @@ -72,18 +73,18 @@ export const getPageBreakItemShape = (yPos, isStatic = true) => { return { x: 0, y: yPos, - w: GRID_COLUMNS - 1, + w: MAX_ITEM_GRID_WIDTH, h: 5, static: !!isStatic, minH: 1, } } -export const getPrintTitlePageItemShape = () => { +export const getPrintTitlePageItemShape = isOipp => { return { x: 0, y: 0, - w: GRID_COLUMNS - 1, + w: isOipp ? GRID_COLUMNS - 4 : MAX_ITEM_GRID_WIDTH, h: MAX_ITEM_GRID_HEIGHT, static: true, minH: 1, diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js index cb878367c..ba701a840 100644 --- a/src/modules/printUtils.js +++ b/src/modules/printUtils.js @@ -1,6 +1,7 @@ import sortBy from 'lodash/sortBy' import { orArray } from './util' import { itemTypeMap } from './itemTypes' + // for A4 landscape (297x210mm) // 794 px = (21cm / 2.54) * 96 pixels/inch // 1122 px = 29.7 /2.54 * 96 pixels/inch @@ -9,7 +10,7 @@ export const a4LandscapeWidthPx = 1102 export const MAX_ITEM_GRID_HEIGHT = 34 export const MAX_ITEM_GRID_HEIGHT_OIPP = 35 -export const MAX_ITEM_GRID_WIDTH = 56 +export const MAX_ITEM_GRID_WIDTH_OIPP = 56 export const PAGEBREAK_GRID_HEIGHT_OIPP = 3 export const getTransformYPx = elStyle => { From 207036848417adaf406a0267405fbc054585009b Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 15 Sep 2020 12:10:55 +0200 Subject: [PATCH 6/8] fix: remove unused constant --- src/modules/printUtils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js index ba701a840..3e10b541e 100644 --- a/src/modules/printUtils.js +++ b/src/modules/printUtils.js @@ -11,7 +11,6 @@ export const a4LandscapeWidthPx = 1102 export const MAX_ITEM_GRID_HEIGHT = 34 export const MAX_ITEM_GRID_HEIGHT_OIPP = 35 export const MAX_ITEM_GRID_WIDTH_OIPP = 56 -export const PAGEBREAK_GRID_HEIGHT_OIPP = 3 export const getTransformYPx = elStyle => { if (!elStyle || !elStyle.transform) { From d80375f28379a89e0b5829a93fffdaab05120311 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 15 Sep 2020 12:21:25 +0200 Subject: [PATCH 7/8] fix: move constants to same file --- src/components/Dashboard/PrintActionsBar.js | 2 +- src/components/Dashboard/PrintDashboard.js | 2 +- src/components/Dashboard/PrintInfo.js | 2 +- src/components/Dashboard/PrintLayoutDashboard.js | 5 +---- src/components/ItemGrid/PrintItemGrid.js | 2 +- src/components/ItemGrid/PrintLayoutItemGrid.js | 2 +- src/components/ItemGrid/gridUtil.js | 14 +++++++++++--- src/modules/printUtils.js | 10 ---------- 8 files changed, 17 insertions(+), 22 deletions(-) diff --git a/src/components/Dashboard/PrintActionsBar.js b/src/components/Dashboard/PrintActionsBar.js index 81e015e53..3fb14ecc3 100644 --- a/src/components/Dashboard/PrintActionsBar.js +++ b/src/components/Dashboard/PrintActionsBar.js @@ -4,7 +4,7 @@ import i18n from '@dhis2/d2-i18n' import { Button } from '@dhis2/ui' import { Link } from 'react-router-dom' import LessHorizontalIcon from '../../icons/LessHorizontal' -import { a4LandscapeWidthPx } from '../../modules/printUtils' +import { a4LandscapeWidthPx } from '../ItemGrid/gridUtil' import classes from './styles/PrintActionsBar.module.css' diff --git a/src/components/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js index c6fff4085..8f9189557 100644 --- a/src/components/Dashboard/PrintDashboard.js +++ b/src/components/Dashboard/PrintDashboard.js @@ -23,7 +23,7 @@ import { a4LandscapeWidthPx, MAX_ITEM_GRID_HEIGHT_OIPP, MAX_ITEM_GRID_WIDTH_OIPP, -} from '../../modules/printUtils' +} from '../ItemGrid/gridUtil' import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar' import classes from './styles/PrintDashboard.module.css' diff --git a/src/components/Dashboard/PrintInfo.js b/src/components/Dashboard/PrintInfo.js index f693913a4..ada6f8582 100644 --- a/src/components/Dashboard/PrintInfo.js +++ b/src/components/Dashboard/PrintInfo.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import i18n from '@dhis2/d2-i18n' -import { a4LandscapeWidthPx } from '../../modules/printUtils' +import { a4LandscapeWidthPx } from '../ItemGrid/gridUtil' import classes from './styles/PrintInfo.module.css' diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index a946973b1..ce1d6cb30 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -23,10 +23,7 @@ import { sGetDashboardItems, } from '../../reducers/dashboards' import { PAGEBREAK, PRINT_TITLE_PAGE } from '../../modules/itemTypes' -import { - a4LandscapeWidthPx, - MAX_ITEM_GRID_HEIGHT, -} from '../../modules/printUtils' +import { a4LandscapeWidthPx, MAX_ITEM_GRID_HEIGHT } from '../ItemGrid/gridUtil' import { getControlBarHeight, HEADERBAR_HEIGHT, diff --git a/src/components/ItemGrid/PrintItemGrid.js b/src/components/ItemGrid/PrintItemGrid.js index 5158cde1e..8d8472d0d 100644 --- a/src/components/ItemGrid/PrintItemGrid.js +++ b/src/components/ItemGrid/PrintItemGrid.js @@ -22,8 +22,8 @@ import { MARGIN, getGridColumns, hasShape, + a4LandscapeWidthPx, } from './gridUtil' -import { a4LandscapeWidthPx } from '../../modules/printUtils' import { orArray } from '../../modules/util' import 'react-grid-layout/css/styles.css' diff --git a/src/components/ItemGrid/PrintLayoutItemGrid.js b/src/components/ItemGrid/PrintLayoutItemGrid.js index d7bfbdf3c..5821a478e 100644 --- a/src/components/ItemGrid/PrintLayoutItemGrid.js +++ b/src/components/ItemGrid/PrintLayoutItemGrid.js @@ -24,9 +24,9 @@ import { MARGIN, getGridColumns, hasShape, + a4LandscapeWidthPx, } from './gridUtil' import { - a4LandscapeWidthPx, getDomGridItemsSortedByYPos, getTransformYPx, } from '../../modules/printUtils' diff --git a/src/components/ItemGrid/gridUtil.js b/src/components/ItemGrid/gridUtil.js index ef11f6c9f..4961fbbb7 100644 --- a/src/components/ItemGrid/gridUtil.js +++ b/src/components/ItemGrid/gridUtil.js @@ -1,10 +1,8 @@ import isFunction from 'd2-utilizr/lib/isFunction' import { orObject } from '../../modules/util' -import { MAX_ITEM_GRID_HEIGHT } from '../../modules/printUtils' // Dimensions for the react-grid-layout - export const GRID_COMPACT_TYPE = 'vertical' // vertical | horizonal | null export const GRID_ROW_HEIGHT = 10 const GRID_COLUMN_WIDTH_PX = 20 @@ -19,6 +17,16 @@ const NUMBER_OF_ITEM_COLS = 2 const GRID_COLUMNS = 60 const MAX_ITEM_GRID_WIDTH = GRID_COLUMNS - 1 +export const MAX_ITEM_GRID_HEIGHT = 34 +export const MAX_ITEM_GRID_HEIGHT_OIPP = 35 +export const MAX_ITEM_GRID_WIDTH_OIPP = 56 + +// for A4 landscape (297x210mm) +// 794 px = (21cm / 2.54) * 96 pixels/inch +// 1122 px = 29.7 /2.54 * 96 pixels/inch +// const a4LandscapeHeightPx = 794 +export const a4LandscapeWidthPx = 1102 + export const getGridColumns = () => { switch (GRID_LAYOUT) { case 'FLEXIBLE': @@ -84,7 +92,7 @@ export const getPrintTitlePageItemShape = isOipp => { return { x: 0, y: 0, - w: isOipp ? GRID_COLUMNS - 4 : MAX_ITEM_GRID_WIDTH, + w: isOipp ? MAX_ITEM_GRID_WIDTH_OIPP : MAX_ITEM_GRID_WIDTH, h: MAX_ITEM_GRID_HEIGHT, static: true, minH: 1, diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js index 3e10b541e..61420c187 100644 --- a/src/modules/printUtils.js +++ b/src/modules/printUtils.js @@ -2,16 +2,6 @@ import sortBy from 'lodash/sortBy' import { orArray } from './util' import { itemTypeMap } from './itemTypes' -// for A4 landscape (297x210mm) -// 794 px = (21cm / 2.54) * 96 pixels/inch -// 1122 px = 29.7 /2.54 * 96 pixels/inch -// const a4LandscapeHeightPx = 794 -export const a4LandscapeWidthPx = 1102 - -export const MAX_ITEM_GRID_HEIGHT = 34 -export const MAX_ITEM_GRID_HEIGHT_OIPP = 35 -export const MAX_ITEM_GRID_WIDTH_OIPP = 56 - export const getTransformYPx = elStyle => { if (!elStyle || !elStyle.transform) { return null From 38b5989ae2f1e6dc748498633c8d3d80c4f90782 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 15 Sep 2020 13:22:53 +0200 Subject: [PATCH 8/8] fix: proptype, better var name and ensure prop defined --- src/actions/printDashboard.js | 2 +- src/components/Dashboard/Dashboard.js | 3 ++- src/components/Dashboard/PrintDashboard.js | 2 +- src/components/Dashboard/PrintLayoutDashboard.js | 2 +- src/components/ItemGrid/gridUtil.js | 4 ++-- 5 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/actions/printDashboard.js b/src/actions/printDashboard.js index e3c7cb8df..f08c336c8 100644 --- a/src/actions/printDashboard.js +++ b/src/actions/printDashboard.js @@ -52,7 +52,7 @@ export const acAddPrintDashboardItem = item => { const yPos = item.yPos || 0 shape = getPageBreakItemShape(yPos, item.isStatic) } else { - shape = getPrintTitlePageItemShape(item.isOipp) + shape = getPrintTitlePageItemShape(item.isOneItemPerPage) } return { diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js index 15048785d..0970e0b3e 100644 --- a/src/components/Dashboard/Dashboard.js +++ b/src/components/Dashboard/Dashboard.js @@ -128,6 +128,7 @@ Dashboard.propTypes = { dashboardsIsEmpty: PropTypes.bool, dashboardsLoaded: PropTypes.bool, id: PropTypes.string, + match: PropTypes.object, // provided by the react-router-dom mode: PropTypes.string, routeId: PropTypes.string, selectDashboard: PropTypes.func, @@ -140,7 +141,7 @@ const mapStateToProps = (state, ownProps) => { dashboardsIsEmpty: isEmpty(dashboards), dashboardsLoaded: !sDashboardsIsFetching(state), id: sGetSelectedId(state), - routeId: ownProps.match.params.dashboardId || null, + routeId: ownProps.match?.params?.dashboardId || null, } } diff --git a/src/components/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js index 8f9189557..2ca0a675b 100644 --- a/src/components/Dashboard/PrintDashboard.js +++ b/src/components/Dashboard/PrintDashboard.js @@ -80,7 +80,7 @@ export class PrintDashboard extends Component { this.props.addDashboardItem({ type: PRINT_TITLE_PAGE, - isOipp: true, + isOneItemPerPage: true, }) } } diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js index ce1d6cb30..3c89dcd42 100644 --- a/src/components/Dashboard/PrintLayoutDashboard.js +++ b/src/components/Dashboard/PrintLayoutDashboard.js @@ -105,7 +105,7 @@ export class PrintLayoutDashboard extends Component { this.props.addDashboardItem({ type: PRINT_TITLE_PAGE, - isOipp: false, + isOneItemPerPage: false, }) } } diff --git a/src/components/ItemGrid/gridUtil.js b/src/components/ItemGrid/gridUtil.js index 4961fbbb7..e641bccc8 100644 --- a/src/components/ItemGrid/gridUtil.js +++ b/src/components/ItemGrid/gridUtil.js @@ -88,11 +88,11 @@ export const getPageBreakItemShape = (yPos, isStatic = true) => { } } -export const getPrintTitlePageItemShape = isOipp => { +export const getPrintTitlePageItemShape = isOneItemPerPage => { return { x: 0, y: 0, - w: isOipp ? MAX_ITEM_GRID_WIDTH_OIPP : MAX_ITEM_GRID_WIDTH, + w: isOneItemPerPage ? MAX_ITEM_GRID_WIDTH_OIPP : MAX_ITEM_GRID_WIDTH, h: MAX_ITEM_GRID_HEIGHT, static: true, minH: 1,