fix: add info in print preview about items that were shortened to fit on page [DHIS2-9423]

i18n/en.pot

@@ -5,8 +5,8 @@ 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-31T08:37:42.542Z\n"
-"PO-Revision-Date: 2020-08-31T08:37:42.542Z\n"
+"POT-Creation-Date: 2020-09-08T06:57:57.672Z\n"
+"PO-Revision-Date: 2020-09-08T06:57:57.672Z\n"
 
 msgid "Untitled dashboard"
 msgstr ""
@@ -102,6 +102,9 @@ msgstr ""
 msgid "Delete item"
 msgstr ""
 
+msgid "This item has been shortened to fit on one page"
+msgstr ""
+
 msgid "Messages"
 msgstr ""
 

src/components/Dashboard/PrintLayoutDashboard.js

@@ -96,6 +96,7 @@ export class PrintLayoutDashboard extends Component {
             // page (react-grid-layout units)
             this.props.items.forEach(item => {
                 if (item.h > MAX_ITEM_GRID_HEIGHT) {
+                    item.shortened = true
                     this.props.updateDashboardItem(
                         Object.assign({}, item, { h: MAX_ITEM_GRID_HEIGHT })
                     )

src/components/Item/AppItem/Item.js

@@ -48,6 +48,7 @@ const AppItem = ({ dashboardMode, item, itemFilters }, context) => {
                 title={appDetails.name}
                 itemId={item.id}
                 dashboardMode={dashboardMode}
+                isShortened={item.shortened}
             />
             <Line />
             <iframe

src/components/Item/ItemHeader/ItemHeader.js

@@ -4,21 +4,26 @@ import { connect } from 'react-redux'
 
 import ViewItemActions from './ViewItemActions'
 import EditItemActions from './EditItemActions'
-import { VIEW, EDIT } from '../../Dashboard/dashboardModes'
+import PrintItemInfo from './PrintItemInfo'
+
+import { VIEW, EDIT, PRINT_LAYOUT } from '../../Dashboard/dashboardModes'
 
 import classes from './styles/ItemHeader.module.css'
 
-const itemActionsMap = {
-    [VIEW]: ViewItemActions,
-    [EDIT]: EditItemActions,
+const getItemActionsMap = isShortened => {
+    return {
+        [VIEW]: ViewItemActions,
+        [EDIT]: EditItemActions,
+        [PRINT_LAYOUT]: isShortened ? PrintItemInfo : null,
+    }
 }
 
 // This is the margin-top + margin-bottom defined in the css file
 export const HEADER_MARGIN_HEIGHT = 12
 
 const ItemHeader = React.forwardRef(
-    ({ dashboardMode, title, ...rest }, ref) => {
-        const Actions = itemActionsMap[dashboardMode]
+    ({ dashboardMode, title, isShortened, ...rest }, ref) => {
+        const Actions = getItemActionsMap(isShortened)[dashboardMode]
         return (
             <div className={classes.itemHeaderWrap} ref={ref}>
                 <p className={classes.itemTitle}>{title}</p>
@@ -32,6 +37,7 @@ ItemHeader.displayName = 'ItemHeader'
 
 ItemHeader.propTypes = {
     dashboardMode: PropTypes.string,
+    isShortened: PropTypes.bool,
     title: PropTypes.string,
 }
 

src/components/Item/ItemHeader/PrintItemInfo.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Tooltip } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+
+import InfoIcon from '../../../icons/Info'
+
+import classes from './styles/PrintItemInfo.module.css'
+
+const PrintWarning = () => (
+    <div className={classes.warning}>
+        <Tooltip
+            content={i18n.t('This item has been shortened to fit on one page')}
+            placement="bottom"
+        >
+            <InfoIcon />
+        </Tooltip>
+    </div>
+)
+
+export default PrintWarning

src/components/Item/ItemHeader/styles/PrintItemInfo.module.css

@@ -0,0 +1,12 @@
+.warning {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    visibility: visible;
+}
+
+@media print {
+    .warning {
+        display: none;
+    }
+}

src/components/Item/ListItem/Item.js

@@ -56,6 +56,7 @@ const ListItem = (props, context) => {
                 title={getItemTitle(item)}
                 itemId={item.id}
                 dashboardMode={dashboardMode}
+                isShortened={item.shortened}
             />
             <Line />
             <div className="dashboard-item-content">

src/components/Item/MessagesItem/Item.js

@@ -114,6 +114,7 @@ class MessagesItem extends Component {
                     title={i18n.t('Messages')}
                     itemId={this.props.item.id}
                     dashboardMode={this.props.dashboardMode}
+                    isShortened={this.props.item.shortened}
                 />
                 <Line />
                 {this.props.messages.length > 0 && (

src/components/Item/NotSupportedItem/Item.js

@@ -12,6 +12,7 @@ const NotSupportedItem = props => (
             })}
             itemId={props.item.id}
             dashboardMode={props.dashboardMode}
+            isShortened={props.item.shortened}
         />
         <div
             style={{

src/components/Item/SpacerItem/Item.js

@@ -19,6 +19,7 @@ const SpacerItem = props => {
                 title={i18n.t('Spacer')}
                 itemId={props.item.id}
                 dashboardMode={props.dashboardMode}
+                isShortened={props.item.shortened}
             />
             <p style={style}>
                 {i18n.t(

src/components/Item/TextItem/Item.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 
 import Input from '@material-ui/core/Input'
 import ItemHeader from '../ItemHeader/ItemHeader'
+import PrintItemInfo from '../ItemHeader/PrintItemInfo'
 import Line from '../../../widgets/Line'
 import {
     Parser as RichTextParser,
@@ -18,7 +19,7 @@ import {
     sGetIsPrinting,
     sGetPrintDashboardItems,
 } from '../../../reducers/printDashboard'
-import { isEditMode } from '../../Dashboard/dashboardModes'
+import { isEditMode, PRINT_LAYOUT } from '../../Dashboard/dashboardModes'
 
 const style = {
     textDiv: {
@@ -86,7 +87,28 @@ const TextItem = props => {
         )
     }
 
-    return <>{isEditMode(dashboardMode) ? editItem() : viewItem()}</>
+    const printItem = () => {
+        const textDivStyle = Object.assign({}, style.textField, style.textDiv)
+        return (
+            <>
+                {props.item.shortened ? <PrintItemInfo /> : null}
+                <div className="dashboard-item-content" style={style.container}>
+                    <RichTextParser style={textDivStyle}>{text}</RichTextParser>
+                </div>
+            </>
+        )
+    }
+
+    let textItem
+    if (isEditMode(dashboardMode)) {
+        textItem = editItem
+    } else if (dashboardMode === PRINT_LAYOUT) {
+        textItem = printItem
+    } else {
+        textItem = viewItem
+    }
+
+    return <>{textItem()}</>
 }
 
 const mapStateToProps = (state, ownProps) => {

src/components/Item/VisualizationItem/Item.js

@@ -304,6 +304,7 @@ export class Item extends Component {
                     actionButtons={actionButtons}
                     ref={this.headerRef}
                     dashboardMode={dashboardMode}
+                    isShortened={item.shortened}
                 />
                 <FatalErrorBoundary>
                     <div

src/components/ItemGrid/PrintLayoutItemGrid.js

@@ -65,6 +65,7 @@ export class PrintLayoutItemGrid extends Component {
         const itemClassNames = cx('print', 'layout', `${item.type}`, {
             'first-page-break':
                 this.props.isEditing && this.isFirstPageBreak(item),
+            shortened: !!item.shortened,
         })
 
         return (

src/icons/Info.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { colors } from '@dhis2/ui'
+
+const WarningIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        fill={colors.grey600}
+    >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
+    </svg>
+)
+
+export default WarningIcon

src/modules/printUtils.js

@@ -7,7 +7,7 @@ import { itemTypeMap } from './itemTypes'
 // const a4LandscapeHeightPx = 794
 export const a4LandscapeWidthPx = 1102
 
-export const MAX_ITEM_GRID_HEIGHT = 33
+export const MAX_ITEM_GRID_HEIGHT = 34
 
 export const getTransformYPx = elStyle => {
     if (!elStyle || !elStyle.transform) {