feat: print dashboard [DHIS2-7045]

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-06-10T01:32:16.274Z\n"
-"PO-Revision-Date: 2020-06-10T01:32:16.274Z\n"
+"POT-Creation-Date: 2020-08-25T05:26:00.043Z\n"
+"PO-Revision-Date: 2020-08-25T05:26:00.043Z\n"
 
 msgid "Cancel"
 msgstr ""
@@ -23,10 +23,10 @@ msgid ""
 "this dashboard?"
 msgstr ""
 
-msgid "Exit without saving"
+msgid "Exit Print preview"
 msgstr ""
 
-msgid "Go to dashboards"
+msgid "Print preview"
 msgstr ""
 
 msgid "Save changes"
@@ -35,6 +35,12 @@ msgstr ""
 msgid "Translate"
 msgstr ""
 
+msgid "Exit without saving"
+msgstr ""
+
+msgid "Go to dashboards"
+msgstr ""
+
 msgid "Search for a dashboard"
 msgstr ""
 
@@ -44,13 +50,42 @@ msgstr ""
 msgid "Show less"
 msgstr ""
 
+msgid "No dashboards found. Use the + button to create a new dashboard."
+msgstr ""
+
+msgid "Requested dashboard not found"
+msgstr ""
+
 msgid "No access"
 msgstr ""
 
-msgid "No dashboards found. Use the + button to create a new dashboard."
+msgid "Exit print preview"
 msgstr ""
 
-msgid "Requested dashboard not found"
+msgid "Print"
+msgstr ""
+
+msgid "The pages below are a preview of how the dashboard layout will be printed."
+msgstr ""
+
+msgid ""
+"The pages below are a preview of how each dashboard item will be printed on "
+"a separate page."
+msgstr ""
+
+msgid ""
+"Use the default printer settings for best results and check that all "
+"dashboard items have finished loading before printing. This text will not "
+"be printed."
+msgstr ""
+
+msgid "dashboard layout"
+msgstr ""
+
+msgid "one item per page"
+msgstr ""
+
+msgid "Print Preview"
 msgstr ""
 
 msgid "{{count}} selected"
@@ -73,6 +108,9 @@ msgstr ""
 msgid "Item type \"{{type}}\" not supported"
 msgstr ""
 
+msgid "Filters applied"
+msgstr ""
+
 msgid "Spacer"
 msgstr ""
 
@@ -142,7 +180,16 @@ msgstr ""
 msgid "Dashboard description"
 msgstr ""
 
-msgid "No description"
+msgid "Hide description"
+msgstr ""
+
+msgid "Show description"
+msgstr ""
+
+msgid "Unstar dashboard"
+msgstr ""
+
+msgid "Star dashboard"
 msgstr ""
 
 msgid "Edit"
@@ -151,6 +198,18 @@ msgstr ""
 msgid "Share"
 msgstr ""
 
+msgid "More"
+msgstr ""
+
+msgid "Dashboard layout"
+msgstr ""
+
+msgid "One item per page"
+msgstr ""
+
+msgid "No description"
+msgstr ""
+
 msgid "Visualizations"
 msgstr ""
 

package.json

@@ -26,7 +26,7 @@
         "moment": "^2.27.0",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
-        "react-grid-layout": "^0.18.3",
+        "react-grid-layout": "^1.0.0",
         "react-redux": "^7.2.1",
         "react-router-dom": "^5.2.0",
         "redux": "^4.0.5",

src/actions/dashboards.js

@@ -10,6 +10,7 @@ import {
     sGetDashboardById,
     sGetDashboardsSortedByStarred,
 } from '../reducers/dashboards'
+import { NON_EXISTING_DASHBOARD_ID } from '../reducers/selected'
 import { sGetUserUsername } from '../reducers/user'
 import { tSetSelectedDashboardById, acSetSelectedId } from './selected'
 import { acClearEditDashboard } from './editDashboard'
@@ -81,7 +82,7 @@ export const tSelectDashboard = id => async (dispatch, getState) => {
         if (dashboardToSelect) {
             dispatch(tSetSelectedDashboardById(dashboardToSelect.id))
         } else {
-            dispatch(acSetSelectedId())
+            dispatch(acSetSelectedId(NON_EXISTING_DASHBOARD_ID))
         }
     } catch (err) {
         return onError(err)

src/actions/editDashboard.js

@@ -10,15 +10,19 @@ import {
     ADD_DASHBOARD_ITEM,
     UPDATE_DASHBOARD_ITEM,
     REMOVE_DASHBOARD_ITEM,
+    SET_PRINT_PREVIEW_VIEW,
+    CLEAR_PRINT_PREVIEW_VIEW,
 } from '../reducers/editDashboard'
 import { sGetEditDashboardRoot } from '../reducers/editDashboard'
 import { updateDashboard, postDashboard } from '../api/editDashboard'
 import { tSetSelectedDashboardById } from '../actions/selected'
 import {
     NEW_ITEM_SHAPE,
     getGridItemProperties,
+    getPageBreakItemShape,
+    getPrintTitlePageItemShape,
 } from '../components/ItemGrid/gridUtil'
-import { itemTypeMap } from '../modules/itemTypes'
+import { itemTypeMap, PAGEBREAK, PRINT_TITLE_PAGE } from '../modules/itemTypes'
 import { convertUiItemsToBackend } from '../modules/uiBackendItemConverter'
 
 const onError = error => {
@@ -48,6 +52,14 @@ export const acClearEditDashboard = () => ({
     type: RECEIVED_NOT_EDITING,
 })
 
+export const acSetPrintPreviewView = () => ({
+    type: SET_PRINT_PREVIEW_VIEW,
+})
+
+export const acClearPrintPreviewView = () => ({
+    type: CLEAR_PRINT_PREVIEW_VIEW,
+})
+
 export const acSetDashboardTitle = value => ({
     type: RECEIVED_TITLE,
     value,
@@ -71,14 +83,26 @@ export const acAddDashboardItem = item => {
     const id = generateUid()
     const gridItemProperties = getGridItemProperties(id)
 
+    let shape
+    if (type === PAGEBREAK) {
+        const yPos = item.yPos || 0
+        shape = getPageBreakItemShape(yPos, item.isStatic)
+    } else if (type === PRINT_TITLE_PAGE) {
+        shape = getPrintTitlePageItemShape()
+    } else {
+        shape = NEW_ITEM_SHAPE
+    }
+
     return {
         type: ADD_DASHBOARD_ITEM,
         value: {
             id,
             type,
+            position: item.position || null,
             [itemPropName]: item.content,
             ...NEW_ITEM_SHAPE,
             ...gridItemProperties,
+            ...shape,
         },
     }
 }

src/actions/printDashboard.js

@@ -0,0 +1,80 @@
+import { generateUid } from 'd2/uid'
+
+import {
+    SET_PRINT_DASHBOARD,
+    CLEAR_PRINT_DASHBOARD,
+    SET_PRINT_DASHBOARD_LAYOUT,
+    ADD_PRINT_DASHBOARD_ITEM,
+    REMOVE_PRINT_DASHBOARD_ITEM,
+    UPDATE_PRINT_DASHBOARD_ITEM,
+} from '../reducers/printDashboard'
+import {
+    NEW_ITEM_SHAPE,
+    getGridItemProperties,
+    getPageBreakItemShape,
+    getPrintTitlePageItemShape,
+} from '../components/ItemGrid/gridUtil'
+import { itemTypeMap, PAGEBREAK } from '../modules/itemTypes'
+
+// actions
+
+export const acSetPrintDashboard = (dashboard, items) => {
+    const val = {
+        ...dashboard,
+        dashboardItems: items,
+    }
+
+    return {
+        type: SET_PRINT_DASHBOARD,
+        value: val,
+    }
+}
+
+export const acClearPrintDashboard = () => ({
+    type: CLEAR_PRINT_DASHBOARD,
+})
+
+export const acUpdatePrintDashboardLayout = value => ({
+    type: SET_PRINT_DASHBOARD_LAYOUT,
+    value,
+})
+
+export const acAddPrintDashboardItem = item => {
+    const type = item.type
+    delete item.type
+    const itemPropName = itemTypeMap[type].propName
+
+    const id = generateUid()
+    const gridItemProperties = getGridItemProperties(id)
+
+    let shape
+    if (type === PAGEBREAK) {
+        const yPos = item.yPos || 0
+        shape = getPageBreakItemShape(yPos, item.isStatic)
+    } else {
+        shape = getPrintTitlePageItemShape()
+    }
+
+    return {
+        type: ADD_PRINT_DASHBOARD_ITEM,
+        value: {
+            id,
+            type,
+            position: item.position || null,
+            [itemPropName]: item.content,
+            ...NEW_ITEM_SHAPE,
+            ...gridItemProperties,
+            ...shape,
+        },
+    }
+}
+
+export const acRemovePrintDashboardItem = value => ({
+    type: REMOVE_PRINT_DASHBOARD_ITEM,
+    value,
+})
+
+export const acUpdatePrintDashboardItem = item => ({
+    type: UPDATE_PRINT_DASHBOARD_ITEM,
+    value: item,
+})