diff --git a/cypress/e2e/slideshow.feature b/cypress/e2e/slideshow.feature new file mode 100644 index 000000000..ff2c4c2ec --- /dev/null +++ b/cypress/e2e/slideshow.feature @@ -0,0 +1,31 @@ +Feature: Slideshow + + Scenario: I view a dashboard in slideshow + Given I open the "Delivery" dashboard + When I click the slideshow button + Then item 1 is shown in fullscreen + When I click the next slide button + Then item 2 is shown in fullscreen + When I click the previous slide button + Then item 1 is shown in fullscreen + When I click the exit slideshow button + Then the normal view is shown + + + Scenario: I view fullscreen on the second item of the dashboard + Given I open the "Delivery" dashboard + When I click the fullscreen button on the second item + Then item 2 is shown in fullscreen + When I click the exit slideshow button + Then the normal view is shown + + Scenario: I view fullscreen on the third item of the dashboard and navigate backwards + Given I open the "Delivery" dashboard + When I click the fullscreen button on the third item + Then item 3 is shown in fullscreen + When I click the previous slide button + Then item 2 is shown in fullscreen + When I click the previous slide button + Then item 1 is shown in fullscreen + When I click the exit slideshow button + Then the normal view is shown diff --git a/cypress/e2e/slideshow/index.js b/cypress/e2e/slideshow/index.js new file mode 100644 index 000000000..6a8a6a12a --- /dev/null +++ b/cypress/e2e/slideshow/index.js @@ -0,0 +1 @@ +'../common/index.js' diff --git a/cypress/e2e/slideshow/slideshow.js b/cypress/e2e/slideshow/slideshow.js new file mode 100644 index 000000000..254dd3976 --- /dev/null +++ b/cypress/e2e/slideshow/slideshow.js @@ -0,0 +1,103 @@ +import { When, Then } from '@badeball/cypress-cucumber-preprocessor' +import { + getDashboardItem, + clickMenuButton, +} from '../../elements/dashboardItem.js' + +const sortedDashboardItemIds = ['GaVhJpqABYX', 'qXsjttMYuoZ', 'Rwb3oXJ3bZ9'] + +const assertItemIsVisible = (slideshowItemIndex) => { + getDashboardItem(sortedDashboardItemIds[slideshowItemIndex]).should( + 'have.css', + 'opacity', + '1' + ) +} + +const assertItemIsNotVisible = (slideshowItemIndex) => { + getDashboardItem(sortedDashboardItemIds[slideshowItemIndex]).should( + 'have.css', + 'opacity', + '0' + ) +} + +const getSlideshowExitButton = () => + cy.getByDataTest('slideshow-exit-button', { timeout: 15000 }) + +When('I click the slideshow button', () => { + cy.get('button').contains('Slideshow').realClick() +}) + +Then('item 1 is shown in fullscreen', () => { + getSlideshowExitButton().should('be.visible') + + // check that only the first item is shown + assertItemIsVisible(0) + assertItemIsNotVisible(1) + assertItemIsNotVisible(2) + + cy.getByDataTest('slideshow-page-counter').should('have.text', '1 / 11') + + // visible item does not have context menu button + getDashboardItem(sortedDashboardItemIds[0]) + .findByDataTest('dashboarditem-menu-button') + .should('not.exist') +}) + +When('I click the exit slideshow button', () => { + getSlideshowExitButton().realClick() +}) + +Then('the normal view is shown', () => { + getSlideshowExitButton().should('not.exist') + + // check that multiple items are shown + assertItemIsVisible(0) + assertItemIsVisible(1) + assertItemIsVisible(2) + + // items have context menu button + getDashboardItem(sortedDashboardItemIds[0]) + .findByDataTest('dashboarditem-menu-button') + .should('be.visible') + + getDashboardItem(sortedDashboardItemIds[1]) + .findByDataTest('dashboarditem-menu-button') + .should('be.visible') +}) + +// When I click the next slide button +When('I click the next slide button', () => { + cy.getByDataTest('slideshow-next-button').realClick() +}) + +Then('item 2 is shown in fullscreen', () => { + assertItemIsNotVisible(0) + assertItemIsVisible(1) + assertItemIsNotVisible(2) + + cy.getByDataTest('slideshow-page-counter').should('have.text', '2 / 11') +}) + +When('I click the previous slide button', () => { + cy.getByDataTest('slideshow-prev-button').realClick() +}) + +When('I click the fullscreen button on the second item', () => { + clickMenuButton(sortedDashboardItemIds[1]) + cy.contains('View fullscreen').realClick() +}) + +When('I click the fullscreen button on the third item', () => { + clickMenuButton(sortedDashboardItemIds[2]) + cy.contains('View fullscreen').realClick() +}) + +Then('item 3 is shown in fullscreen', () => { + assertItemIsNotVisible(0) + assertItemIsNotVisible(1) + assertItemIsVisible(2) + + cy.getByDataTest('slideshow-page-counter').should('have.text', '3 / 11') +}) diff --git a/docs/dashboards.md b/docs/dashboards.md index b19b4a9e2..b5902fb64 100644 --- a/docs/dashboards.md +++ b/docs/dashboards.md @@ -2,11 +2,12 @@ ## About the Dashboards app -The Dashboards app makes it possible to present a high level overview of your data, including displaying analytical objects such as maps, charts, reports and tables, as well as displaying text-based information, resource links, and app widgets. +The Dashboards app makes it possible to present a high level overview of your data, including displaying analytical objects such as maps, charts, reports, tables, and line lists, as well as displaying text-based information, resource links, and app widgets. Features of the Dashboards app include: - View and print dashboards +- Slideshow - Create and edit dashboards - Share dashboards with users and user groups - Apply temporary filters while viewing dashboards @@ -15,60 +16,55 @@ Features of the Dashboards app include: ## Dashboards app layout { #dashboards_setup } -Dashboards have a title, description, and any number of dashboard items. Above the dashboard is the dashboards bar, which shows all your available dashboards, a dashboard search field, and a **+** button for creating a new dashboard. +Dashboards have a title, description, dashboard items. The title and actions bar is at the top of the page under the header bar, and shows the title, a dropdown for searching and selecting dashboards, and actions that can be taken with the current dashboard. There is also a **+** button for creating a new dashboard. The Dashboards app has two modes: _view_ and _edit/create_. When you first log in to DHIS2, your most recently used dashboard will be displayed in view mode, if you are on the same computer as you were previously. If you are using a different computer or browser, then the first starred dashboard will be displayed. If there are no starred dashboards, then the first dashboard (alphabetically) will be displayed. Starred dashboards always show first in the dashboard list. -Below is an example of a dashboard named "Antenatal Care", which has been populated with charts and maps: +Below is a dashboard named "Antenatal Care", which has been populated with charts and maps: ![](resources/images/dashboard-view-mode.png) ### Personalization -The Dashboards app can be personalized in the following ways: +To adjust the Dashboards app to suit your needs, you can: -- [Set the height of the dashboards bar](#dashboards_personalize_bar) - [Star dashboards for quick access to your favorite dashboards](#dashboard-star-dashboard) - [Show or hide dashboard description](#dashboard-show-description) ### Responsive view on small screens -When viewing dashboards on small screens (for instance, portrait orientation on a mobile phone ), the dashboard will adapt to the screen and show all items in a single column. Some options, including editing, filtering and sharing, will not be available. +When viewing dashboards on small screens like mobile phones, the dashboard will adapt to the screen and show all items in a single column. Some options, including editing, filtering and sharing, will not be available. -![](resources/images/dashboard-small-screen.png) +Dashboard small screen ### Searching for a dashboard -You can search for a specific dashboard using the search field in the upper left of the dashboards bar entitled “Search for a dashboard”. The search is case insensitive, and as you type, the list of dashboards will be narrowed down to those that match your search text. +You can search for a specific dashboard using the search field available from the Dashboards dropdown selector in the title bar. The search is case insensitive, and as you type, the list of dashboards will be narrowed down to those that match your search text. -![](resources/images/dashboard-search-for-dashboard.png) - -### Personalizing the height of the dashboards bar { #dashboards_personalize_bar } - -You can set a specific height for the dashboards bar by -down-clicking and dragging the bottom edge of the bar. When you finish dragging, the new height will be set. Clicking on the down arrow at the bottom of the dashboards bar will expand the bar to its maximum height (10 "rows"). Clicking on the up arrow will reset the height to your personalized height. +![](resources/images/dashboard-list-and-filter.png) ## Creating and editing a dashboard -To create a new dashboard, click the **+** button in the left corner of the dashboards bar to enter create/edit mode: +To create a new dashboard, click the **+** button in the upper corner of the title bar to enter create/edit mode: ![](resources/images/dashboard-new-button.png) -To edit an existing dashboard, click the **Edit** button next to the dashboard title (you must have edit access to see this button): +To edit an existing dashboard, click the **Edit** button (you must have edit access to see this button): -![](resources/images/dashboard-title-bar.png) +![](resources/images/dashboard-edit-button.png) -In create/edit mode, you can add or change the dashboard title, description and dashboard items. If you do not add a title, the dashboard will automatically be titled "Untitled dashboard". +In create/edit mode, you can add or change the dashboard title, description, dashboard code and dashboard items. If you do not add a title, the dashboard will automatically be titled "Untitled dashboard". ![](resources/images/dashboard-create-mode.png) ### Adding items to the dashboard -Add items to the dashboard by searching for items using the **Search for items to add to this dashboard** drop down selector. Item types are: +Add items to the dashboard by searching for items using the **Search for items to add to this dashboard** dropdown selector. Item types are: -- Visualizations (charts and tables) +- Visualizations (charts and pivot tables) - Maps +- Line lists - Event reports - Event charts - Reports @@ -80,14 +76,14 @@ Add items to the dashboard by searching for items using the **Search for items t ![](resources/images/dashboard-item-selector.png) -The list of items in the drop-down initially displays 10 visualizations (charts and tables), and 5 from each of the other categories, based on the search text you enter. Messages (Email), text boxes and spacer items are also found in the list. To view more items, click on **Show more**, and the list for that type will be extended to 25 items. If you still do not find the item you want, try typing a more specific search text. +The list of items in the dropdown initially displays 10 visualizations (charts and tables), and 5 from each of the other categories, based on the search text you enter. To view more items, click on **Show more**, and the list for that type will be extended to 25 items. If you still do not find the item you want, try typing a more specific search text. Messages (Email), text boxes and spacer items can also be chosen from the list. #### Dashboard layout and placement of new items When adding items to the dashboard you can choose an overall layout by clicking on **Change layout** button. You can change this layout setting at any time. - With _Freeflow_ layout, the added items can be moved using the mouse by down-clicking on the item and dragging it to the desired position. Items can also be resized with the mouse by down-clicking on the drag handle in the lower right corner of the item and dragging to the desired size. -- With _Fixed columns_ layout, you can choose the number of columns to have on the dashboard, and the dashboard will automatically be layed out for you. Items cannot be moved or resized in _Fixed columns_ layout. +- With _Fixed columns_ layout, you can choose the number of columns to have on the dashboard, and the dashboard will automatically be layed out for you. Items cannot be moved or resized in _Fixed columns_ layout. If you want to make custom adjustments to a _Fixed columns_ layout, return to a _Freeflow_ layout. ![](resources/images/dashboard-layout-modal.png) @@ -109,13 +105,13 @@ Spacer in **view mode**: #### Removing items -Remove items by clicking on the red trash can at the upper right of the item. Be aware that when you remove an item while in _Freeflow_ layout, the items that are positioned below the removed item will "rise" upwards until they bump into an item above. +Remove items by clicking on the red trash can at the upper right of the item. Be aware that when you remove an item while in _Freeflow_ layout, the items that are positioned below the removed item will "rise" upwards until they bump into an item above. in _Fixed columns_ layout, the items will be adjusted to fill every column in the layout so there are no empty column slots. ### Actions in create/edit mode In create/edit mode you will see the following buttons in the actions bar at the top of the page: **Save changes**, **Print preview**, **Filter settings**, **Translate**, **Delete**, and **Exit without saving**. The **Translate** and **Delete** buttons are only shown if you are editing an existing dashboard. -![](resources/images/dashboard-edit-mode-actions.png) +![](resources/images/dashboard-edit-anc.png) ### Saving the dashboard @@ -137,7 +133,7 @@ By default, users will be able to filter dashboard items by any dimension define To restrict available filters, you can click **Only allow filtering by selected dimensions** and select the filters you wish to allow on the dashboard. Period and Organisation Unit are selected by default but can be removed if desired. When the dashboard is viewed, users will only be able to choose from among the filters selected. -![](resources/images/dashboard-filter-settings.png) +Dashboard filter settings In order to save updates to filter settings, you need to first click **Confirm** to close the Filter settings dialog and then click **Save changes** to save the dashboard changes. @@ -145,41 +141,50 @@ In order to save updates to filter settings, you need to first click **Confirm** ### Translating dashboard title and description -If you are editing an existing dashboard, then there will be a **Translate** button. Click on this button to open the Translation dialog, which provides a list of languages to translate to, and shows the original dashboard title underneath the name input field. First choose the language you want to translate for, then fill in the dashboard name and description translation. +If you are editing an existing dashboard, then there will be a **Translate** button. Click on this button to open the Translation dialog, which provides a list of languages to translate to, and shows the original dashboard title and description. First choose the language you want to translate for, then fill in the dashboard name and description translation. -![](resources/images/dashboard-translation-dialog.png) +Dashboard translation dialog ### Deleting a dashboard If you have access to delete the dashboard, then there will be a **Delete** button. When you click the **Delete** button, a confirmation dialog will first be displayed to confirm that you want to delete the dashboard. -![](resources/images/dashboard-confirm-delete.png) +Dashboard confirm delete ## Viewing a dashboard -From view mode, you can toggle showing the description, star a dashboard, apply filters, print the dashboard, make the dashboard available offline, and share the dashboard with other users and user groups. +The following actions are available on the dashboard in view mode: + +- Set the show/hide description setting +- Star the dashboard so it appears first in the dashboard list +- Filter the dashboard +- Print the dashboard +- Display the dashboard in a slideshow +- Make the dashboard available offline +- Share the dashboard with other users and user groups +- Close the dashboard ![](resources/images/dashboard-more-menu.png) ### Show description { #dashboard-show-description } -To toggle the description, open the **...More** menu and choose **Show description** (or **Hide description**). This setting will be remembered for all dashboards that you open. This setting applies to you, not other users. +To toggle the description, open the **...** menu and choose **Show description** (or **Hide description**). This setting will be remembered for all dashboards that you open. This setting applies to you, not other users. ### Star dashboards { #dashboard-star-dashboard } -Your starred dashboards are listed first in the list of dashboards for quick access. To star a dashboard, click on the star button to the right of the title. You can also toggle the star from the **...More** menu. When the star is “filled”, that means the dashboard is starred. Starring a dashboard only applies to you, not other users. +Your starred dashboards are listed first in the list of dashboards for quick access. To star a dashboard, click on the star button to the right of the title. You can also toggle the star from the **...** menu. When the star is “filled”, that means the dashboard is starred. Starring a dashboard only applies to you, not other users. -### Filtering a dashboard +### Filter a dashboard Applying filters to a dashboard change the data displayed in dashboard items containing visualizations. The filters are applied to each dashboard item in the same way: each added filter overrides the original value for that dimension in the original chart, table or map. It is possible to filter on Organisation Units and Periods, as well as dynamic dimensions, depending on the DHIS2 instance. You can apply multiple filters to the dashboard. -To add a filter, click on the **Add Filter** button and choose a dimension: +To add a filter, click on the **Filter** button and choose a dimension: ![Adding a filter](resources/images/dashboard-filters.png) A dialog opens where the filter selection can be made. -![Org Unit filter selection](resources/images/dashboard-orgunit-filter-dialog.png) +![Org Unit filter selection](resources/images/dashboard-period-filter-dialog.png) Click on **Confirm** in the dialog to apply the filter to the current dashboard. @@ -192,23 +197,31 @@ You can edit a filter by clicking on the filter badge to open the filter selecti By default, users are able to filter dashboard items by any dimension defined in the DHIS2 instance. To limit available filters, see [Restricting dashboard filters](#restricting-dashboard-filters). -### Making dashboards available offline +### Display the dashboard in a slideshow { #dashboard-slideshow } + +The dashboard can be displayed in a slideshow by clicking on the **Slideshow** button. + +![Slideshow button](resources/images/dashboard-slideshow-button.png) -To make a dashboard available offline, choose the **Make dashboard available offline** option in the **...More** menu. This will cause a reload of the dashboard where requests to the server are recorded and saved in browser storage. Note that offline dashboards are only available on the computer and browser where you set it to offline. If you currently have a filter applied when requesting the dashboard be made available offline, a dialog will appear to confirm the removal of the filters. +When you enter the slideshow, you'll find navigation buttons and an exit button in a navigation bar at the bottom of the page. You can also navigate with the forward and back arrow keys on the keyboard, and exit the slideshow with the **esc** key. Any filters that are applied will be displayed in the navigation bar. Note that messages and spacer items are not displayed in the slideshow. + +![Slideshow navigation bar](resources/images/dashboard-slideshow-navbar.png) + +### Make dashboards available offline + +To make a dashboard available offline, choose the **Make available offline** option in the **...** menu. This will cause a reload of the dashboard where requests to the server are recorded and saved in browser storage. Note that offline dashboards are only available on the computer and browser where you set it to offline. If you currently have a filter applied when requesting the dashboard be made available offline, a dialog will appear to confirm the removal of the filters. ![](resources/images/dashboard-clear-filters-to-sync.png) -Dashboards that have been saved for offline have an indicator on the dashboard chip in the dashboards bar, as well as a tag showing the time it was saved. +Dashboards that have been saved for offline display a tag next to the dashboard title showing the time it was saved. In the dashboard selector, an icon is displayed if the dashboard is available offline. ![](resources/images/dashboard-offline-dashboard.png) -If the dashboard has been changed since you made it available offline, either by you or someone else, you'll need to choose **Sync offline data now** from the **...More** menu to save the latest version of the dashboard. - -![](resources/images/dashboard-sync-offline.png) +If the dashboard has been changed since you made it available offline, either by you or someone else, you'll need to choose **Sync offline data now** from the **...** menu to save the latest version of the dashboard. -You can remove a dashboard from offline storaged by choosing **Remove from offline storage** in the **...More** menu. +You can remove a dashboard from offline storaged by choosing **Remove from offline storage** in the **...** menu. -![](resources/images/dashboard-remove-offline.png) +![](resources/images/dashboard-sync-remove-offline.png) #### Other notes about Dashboards app when you are offline: @@ -218,7 +231,7 @@ If you are offline, any buttons or actions that require a connection to complete ### Printing a dashboard -From the **...More** menu you can print the current dashboard. There are two styles of dashboard print: _Dashboard layout_ and _One item per page_. For both styles, a title page is added that shows the dashboard title, description (if the _Show description_ setting is enabled), and any applied dashboard filters. +From the **...** menu you can print the current dashboard. There are two styles of dashboard print: _Dashboard layout_ and _One item per page_. For both styles, a title page is added that shows the dashboard title, description (if the _Show description_ setting is enabled), and any applied dashboard filters. ![](resources/images/dashboard-print-menu.png) @@ -244,19 +257,19 @@ Click on the **Print** button in the upper right to trigger the browser print fu ![](resources/images/dashboard-print-oipp.png) -## Dashboard items with charts, pivot tables or maps +## Dashboard items with charts, pivot tables, maps and line lists -Dashboard items with charts, pivot table or maps may have an item menu button in the upper right corner of the item with additional viewing options, depending on the system settings that have been configured for the DHIS2 instance. If all the relevant system settings have been disabled by the DHIS2 instance, then there will not be an item menu button. Here are the possible item menu options: +Dashboard items with charts, pivot table, maps, line lists, event reports and event charts may have an item menu button in the upper right corner of the item with additional viewing options, depending on the system settings that have been configured for the DHIS2 instance. If all the relevant system settings have been disabled by the DHIS2 instance, then there will not be an item menu button. Here are the possible item menu options: ### Switching between visualizations -It is possible to toggle the visualization view for items containing charts, pivot tables and maps. Click on the item menu button and choose the desired view (e.g., **View as Table**, **View as Map**, **View as Chart**): +It is possible to toggle the visualization view of charts, pivot tables and maps, and between event charts and reports. Click on the item menu button and choose the desired view (e.g., **View as Table**, **View as Map**, **View as Chart**): ![](resources/images/dashboard-item-menu.png) ### View item in fullscreen -To view the chart, table or map in fullscreen, click on the **View fullscreen** option. To exit fullscreen, you can either press **esc** key or click the exit button in the upper right corner of the fullscreen view. +To view the chart, table, map or line list in fullscreen, click on the **View fullscreen** option. To exit fullscreen, you can either press **esc** key or click the exit button in the upper right corner of the fullscreen view. Note that you actually enter the slideshow, and can then use the navigation bar as described in the [Slideshow section](#dashboard-slideshow) to navigate to other dashboard items in fullscreen. ### Open in app @@ -264,23 +277,23 @@ To open the visualization in its corresponding app (e.g., Data Visualizer, Maps) ### Show interpretations and details -You can write interpretations for the chart, pivot table, map, event report, and event chart items by clicking on **Show interpretations and details**: +You can write interpretations for charts, pivot tables, maps, line lists, event reports, and event charts by clicking on **Show interpretations and details**. The item will be expanded vertically underneath to show the description, interpretations and replies: ![](resources/images/dashboard-item-menu-interpretations.png) -The item will be expanded vertically underneath to show the description, interpretations and replies. You can like an interpretation, reply to an interpretation, and add your own interpretation. You can edit, share or delete your own interpretations and replies, and if you have moderator access, you can delete others’ interpretations. +You can like an interpretation, reply to an interpretation, and add your own interpretations. You can edit, share or delete your own interpretations and replies, and if you have moderator access, you can delete others’ interpretations. -It is possible to format the description field, and interpretations with **bold**, _italic_ by using the Markdown style markers \* and \_ for **bold** and _italic_ respectively. The text field for writing new interpretations has a toolbar for adding rich text. Keyboard shortcuts are also available: Ctrl/Cmd + B and Ctrl/Cmd + I. A limited set of smilies is supported and can be used by typing one of the following character combinations: :) :-) :( :-( :+1 :-1. URLs are automatically detected and converted into a clickable link. +It is possible to format interpretation text with **bold**, _italic_ by using the Markdown style markers \* and \_ for **bold** and _italic_ respectively. The text field for writing new interpretations has a toolbar for adding rich text. Keyboard shortcuts are also available: Ctrl/Cmd + B and Ctrl/Cmd + I. A limited set of smilies is supported and can be used by typing one of the following character combinations: :) :-) :( :-( :+1 :-1. URLs are automatically detected and converted into a clickable link. Interpretations are sorted in descending order by date, with the most recent shown on top. Interpretation replies are sorted in ascending order by date, with the oldest shown on top. -![](resources/images/dashboard-interpretations.png) +Dashboard interpretations -## Sharing a dashboard { #dashboard_sharing } +## Share the dashboard { #dashboard_sharing } -In order to share a dashboard with users and user groups, click on the **Share** button to the right of the dashboard title to display the _Sharing and access_ dialog. +In order to share the dashboard with users and user groups, click on the **Share** button to the right of the dashboard title to display the _Sharing and access_ dialog. -![](resources/images/dashboard-sharing-dialog.png) +Dashboard sharing dialog There are three levels of sharing permissions available for a dashboard: @@ -302,7 +315,7 @@ All dashboards have the _All users_ group set to **No access** by default. The _ To share a dashboard with specific users and user groups, type the name in the input field, choose the desired access level and click on **Give access**. -![](resources/images/dashboard-sharing-add-user.png) +Dashboard sharing add user You can provide users with the url of the dashboard, allowing them to navigate directly to the dashboard. To get the dashboard url, just open the dashboard in view mode, and copy the browser url. For example, the url to the Antenatal Care dashboard in play.dhis2.org/dev is: @@ -312,4 +325,4 @@ https://play.dhis2.org/dev/dhis-web-dashboard/#/nghVC4wtyzi To ensure that all charts, maps and tables on the dashboard are shared with the chosen users and user groups, click on the **Apply sharing to dashboard items** button. -![](resources/images/dashboard-sharing-cascade-sharing.png) +Dashboard cascade sharing diff --git a/docs/resources/images/dashboard-clear-filters-to-sync.png b/docs/resources/images/dashboard-clear-filters-to-sync.png index 3583c53a6..41e7b536c 100644 Binary files a/docs/resources/images/dashboard-clear-filters-to-sync.png and b/docs/resources/images/dashboard-clear-filters-to-sync.png differ diff --git a/docs/resources/images/dashboard-confirm-delete.png b/docs/resources/images/dashboard-confirm-delete.png index b1b592957..4e02264f9 100644 Binary files a/docs/resources/images/dashboard-confirm-delete.png and b/docs/resources/images/dashboard-confirm-delete.png differ diff --git a/docs/resources/images/dashboard-create-mode.png b/docs/resources/images/dashboard-create-mode.png index c8ec30901..73e4b1c74 100644 Binary files a/docs/resources/images/dashboard-create-mode.png and b/docs/resources/images/dashboard-create-mode.png differ diff --git a/docs/resources/images/dashboard-edit-anc.png b/docs/resources/images/dashboard-edit-anc.png new file mode 100644 index 000000000..f49566b24 Binary files /dev/null and b/docs/resources/images/dashboard-edit-anc.png differ diff --git a/docs/resources/images/dashboard-edit-button.png b/docs/resources/images/dashboard-edit-button.png new file mode 100644 index 000000000..db22d1a47 Binary files /dev/null and b/docs/resources/images/dashboard-edit-button.png differ diff --git a/docs/resources/images/dashboard-edit-print-preview.png b/docs/resources/images/dashboard-edit-print-preview.png index bdd3bcda0..991a4bb12 100644 Binary files a/docs/resources/images/dashboard-edit-print-preview.png and b/docs/resources/images/dashboard-edit-print-preview.png differ diff --git a/docs/resources/images/dashboard-filter-badges.png b/docs/resources/images/dashboard-filter-badges.png index 5266adafd..e2dbe5757 100644 Binary files a/docs/resources/images/dashboard-filter-badges.png and b/docs/resources/images/dashboard-filter-badges.png differ diff --git a/docs/resources/images/dashboard-filter-settings.png b/docs/resources/images/dashboard-filter-settings.png index 8e81706e4..09da39edd 100644 Binary files a/docs/resources/images/dashboard-filter-settings.png and b/docs/resources/images/dashboard-filter-settings.png differ diff --git a/docs/resources/images/dashboard-filters.png b/docs/resources/images/dashboard-filters.png index 4681e4cc4..e9b640f9d 100644 Binary files a/docs/resources/images/dashboard-filters.png and b/docs/resources/images/dashboard-filters.png differ diff --git a/docs/resources/images/dashboard-generic.png b/docs/resources/images/dashboard-generic.png new file mode 100644 index 000000000..5c2b60d8b Binary files /dev/null and b/docs/resources/images/dashboard-generic.png differ diff --git a/docs/resources/images/dashboard-interpretations.png b/docs/resources/images/dashboard-interpretations.png new file mode 100644 index 000000000..570917c22 Binary files /dev/null and b/docs/resources/images/dashboard-interpretations.png differ diff --git a/docs/resources/images/dashboard-item-menu-interpretations.png b/docs/resources/images/dashboard-item-menu-interpretations.png index d50233b8d..d9edcde1c 100644 Binary files a/docs/resources/images/dashboard-item-menu-interpretations.png and b/docs/resources/images/dashboard-item-menu-interpretations.png differ diff --git a/docs/resources/images/dashboard-item-menu.png b/docs/resources/images/dashboard-item-menu.png index 986687f37..0d117c02d 100644 Binary files a/docs/resources/images/dashboard-item-menu.png and b/docs/resources/images/dashboard-item-menu.png differ diff --git a/docs/resources/images/dashboard-item-selector.png b/docs/resources/images/dashboard-item-selector.png index a8c05edb5..f7469b0e5 100644 Binary files a/docs/resources/images/dashboard-item-selector.png and b/docs/resources/images/dashboard-item-selector.png differ diff --git a/docs/resources/images/dashboard-layout-modal.png b/docs/resources/images/dashboard-layout-modal.png index 594f5769e..27747bfd4 100644 Binary files a/docs/resources/images/dashboard-layout-modal.png and b/docs/resources/images/dashboard-layout-modal.png differ diff --git a/docs/resources/images/dashboard-list-and-filter.png b/docs/resources/images/dashboard-list-and-filter.png new file mode 100644 index 000000000..f4c0bea00 Binary files /dev/null and b/docs/resources/images/dashboard-list-and-filter.png differ diff --git a/docs/resources/images/dashboard-more-menu.png b/docs/resources/images/dashboard-more-menu.png index 7f9150f18..b194581d3 100644 Binary files a/docs/resources/images/dashboard-more-menu.png and b/docs/resources/images/dashboard-more-menu.png differ diff --git a/docs/resources/images/dashboard-new-button.png b/docs/resources/images/dashboard-new-button.png index 25781b134..803ced2b2 100644 Binary files a/docs/resources/images/dashboard-new-button.png and b/docs/resources/images/dashboard-new-button.png differ diff --git a/docs/resources/images/dashboard-offline-dashboard.png b/docs/resources/images/dashboard-offline-dashboard.png index ec2efc734..283b03606 100644 Binary files a/docs/resources/images/dashboard-offline-dashboard.png and b/docs/resources/images/dashboard-offline-dashboard.png differ diff --git a/docs/resources/images/dashboard-orgunit-filter-dialog.png b/docs/resources/images/dashboard-orgunit-filter-dialog.png deleted file mode 100644 index e158a36dd..000000000 Binary files a/docs/resources/images/dashboard-orgunit-filter-dialog.png and /dev/null differ diff --git a/docs/resources/images/dashboard-period-filter-dialog.png b/docs/resources/images/dashboard-period-filter-dialog.png new file mode 100644 index 000000000..7b8e20d3e Binary files /dev/null and b/docs/resources/images/dashboard-period-filter-dialog.png differ diff --git a/docs/resources/images/dashboard-place-items.png b/docs/resources/images/dashboard-place-items.png new file mode 100644 index 000000000..73ef06aeb Binary files /dev/null and b/docs/resources/images/dashboard-place-items.png differ diff --git a/docs/resources/images/dashboard-print-menu.png b/docs/resources/images/dashboard-print-menu.png index 53473be44..73b274344 100644 Binary files a/docs/resources/images/dashboard-print-menu.png and b/docs/resources/images/dashboard-print-menu.png differ diff --git a/docs/resources/images/dashboard-search-for-dashboard.png b/docs/resources/images/dashboard-search-for-dashboard.png deleted file mode 100644 index 63ac3cef3..000000000 Binary files a/docs/resources/images/dashboard-search-for-dashboard.png and /dev/null differ diff --git a/docs/resources/images/dashboard-sharing-add-user.png b/docs/resources/images/dashboard-sharing-add-user.png index b78187413..9eadd989c 100644 Binary files a/docs/resources/images/dashboard-sharing-add-user.png and b/docs/resources/images/dashboard-sharing-add-user.png differ diff --git a/docs/resources/images/dashboard-sharing-cascade-sharing.png b/docs/resources/images/dashboard-sharing-cascade-sharing.png index 46af33666..52b59e94b 100644 Binary files a/docs/resources/images/dashboard-sharing-cascade-sharing.png and b/docs/resources/images/dashboard-sharing-cascade-sharing.png differ diff --git a/docs/resources/images/dashboard-sharing-dialog.png b/docs/resources/images/dashboard-sharing-dialog.png index 6853cff2a..1e641f116 100644 Binary files a/docs/resources/images/dashboard-sharing-dialog.png and b/docs/resources/images/dashboard-sharing-dialog.png differ diff --git a/docs/resources/images/dashboard-slideshow-button.png b/docs/resources/images/dashboard-slideshow-button.png new file mode 100644 index 000000000..81609dced Binary files /dev/null and b/docs/resources/images/dashboard-slideshow-button.png differ diff --git a/docs/resources/images/dashboard-slideshow-navbar.png b/docs/resources/images/dashboard-slideshow-navbar.png new file mode 100644 index 000000000..57c455798 Binary files /dev/null and b/docs/resources/images/dashboard-slideshow-navbar.png differ diff --git a/docs/resources/images/dashboard-small-screen.png b/docs/resources/images/dashboard-small-screen.png index 8099aa5b8..b26e6d0f6 100644 Binary files a/docs/resources/images/dashboard-small-screen.png and b/docs/resources/images/dashboard-small-screen.png differ diff --git a/docs/resources/images/dashboard-spacer-edit-mode.png b/docs/resources/images/dashboard-spacer-edit-mode.png index c03588b0d..285376f64 100644 Binary files a/docs/resources/images/dashboard-spacer-edit-mode.png and b/docs/resources/images/dashboard-spacer-edit-mode.png differ diff --git a/docs/resources/images/dashboard-spacer-view-mode.png b/docs/resources/images/dashboard-spacer-view-mode.png index 22a3a99d9..2ad12d8f9 100644 Binary files a/docs/resources/images/dashboard-spacer-view-mode.png and b/docs/resources/images/dashboard-spacer-view-mode.png differ diff --git a/docs/resources/images/dashboard-sync-remove-offline.png b/docs/resources/images/dashboard-sync-remove-offline.png new file mode 100644 index 000000000..466810721 Binary files /dev/null and b/docs/resources/images/dashboard-sync-remove-offline.png differ diff --git a/docs/resources/images/dashboard-translation-dialog.png b/docs/resources/images/dashboard-translation-dialog.png index 118375078..9321fce9f 100644 Binary files a/docs/resources/images/dashboard-translation-dialog.png and b/docs/resources/images/dashboard-translation-dialog.png differ diff --git a/docs/resources/images/dashboard-view-mode.png b/docs/resources/images/dashboard-view-mode.png index 6572b9297..ef998ad96 100644 Binary files a/docs/resources/images/dashboard-view-mode.png and b/docs/resources/images/dashboard-view-mode.png differ diff --git a/i18n/en.pot b/i18n/en.pot index 047e5934d..fa8cab2e1 100644 --- a/i18n/en.pot +++ b/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: 2024-12-18T12:26:05.212Z\n" -"PO-Revision-Date: 2024-12-18T12:26:05.212Z\n" +"POT-Creation-Date: 2024-12-19T11:30:27.893Z\n" +"PO-Revision-Date: 2024-12-19T11:30:27.893Z\n" msgid "Untitled dashboard" msgstr "Untitled dashboard" @@ -50,12 +50,21 @@ msgstr "One item per page" msgid "Close dashboard" msgstr "Close dashboard" +msgid "No dashboard items to show in slideshow" +msgstr "No dashboard items to show in slideshow" + +msgid "Not available offline" +msgstr "Not available offline" + msgid "Edit" msgstr "Edit" msgid "Share" msgstr "Share" +msgid "Slideshow" +msgstr "Slideshow" + msgid "Clear dashboard filters?" msgstr "Clear dashboard filters?" @@ -111,6 +120,9 @@ msgstr "Search for a dashboard" msgid "No dashboards found" msgstr "No dashboards found" +msgid "{{appKey}} app not found" +msgstr "{{appKey}} app not found" + msgid "Remove this item" msgstr "Remove this item" @@ -237,8 +249,11 @@ msgstr "There was an error loading data for this item" msgid "Open this item in {{appName}}" msgstr "Open this item in {{appName}}" -msgid "Not available offline" -msgstr "Not available offline" +msgid "Resources" +msgstr "Resources" + +msgid "Reports" +msgstr "Reports" msgid "Visualizations" msgstr "Visualizations" @@ -264,12 +279,6 @@ msgstr "Line lists" msgid "Apps" msgstr "Apps" -msgid "Reports" -msgstr "Reports" - -msgid "Resources" -msgstr "Resources" - msgid "Users" msgstr "Users" @@ -566,6 +575,23 @@ msgstr "" msgid "Yes, remove filters" msgstr "Yes, remove filters" +msgid "Exit slideshow" +msgstr "Exit slideshow" + +msgid "Previous item" +msgstr "Previous item" + +msgid "Next item" +msgstr "Next item" + +msgid "{{name}}: {{filter}}" +msgstr "{{name}}: {{filter}}" + +msgid "{{count}} filters active" +msgid_plural "{{count}} filters active" +msgstr[0] "{{count}} filter active" +msgstr[1] "{{count}} filters active" + msgid "Loading dashboard – {{name}}" msgstr "Loading dashboard – {{name}}" diff --git a/src/actions/slideshow.js b/src/actions/slideshow.js new file mode 100644 index 000000000..38a841ff6 --- /dev/null +++ b/src/actions/slideshow.js @@ -0,0 +1,6 @@ +import { SET_SLIDESHOW } from '../reducers/slideshow.js' + +export const acSetSlideshow = (isSlideshow) => ({ + type: SET_SLIDESHOW, + value: isSlideshow, +}) diff --git a/src/components/DashboardsBar/InformationBlock/ActionsBar.js b/src/components/DashboardsBar/InformationBlock/ActionsBar.js index 2c3e69760..8add1296b 100644 --- a/src/components/DashboardsBar/InformationBlock/ActionsBar.js +++ b/src/components/DashboardsBar/InformationBlock/ActionsBar.js @@ -14,16 +14,19 @@ import { connect } from 'react-redux' import { useHistory, Redirect } from 'react-router-dom' import { acClearItemFilters } from '../../../actions/itemFilters.js' import { acSetShowDescription } from '../../../actions/showDescription.js' +import { acSetSlideshow } from '../../../actions/slideshow.js' import { apiPostShowDescription } from '../../../api/description.js' +import ConfirmActionDialog from '../../../components/ConfirmActionDialog.js' +import DropdownButton from '../../../components/DropdownButton/DropdownButton.js' +import MenuItem from '../../../components/MenuItemWithTooltip.js' +import { useSystemSettings } from '../../../components/SystemSettingsProvider.js' +import { itemTypeSupportsFullscreen } from '../../../modules/itemTypes.js' import { useCacheableSection } from '../../../modules/useCacheableSection.js' import { orObject } from '../../../modules/util.js' import { ROUTE_START_PATH } from '../../../pages/start/index.js' import { sGetNamedItemFilters } from '../../../reducers/itemFilters.js' import { sGetSelected } from '../../../reducers/selected.js' import { sGetShowDescription } from '../../../reducers/showDescription.js' -import ConfirmActionDialog from '../../ConfirmActionDialog.js' -import DropdownButton from '../../DropdownButton/DropdownButton.js' -import MenuItem from '../../MenuItemWithTooltip.js' import FilterSelector from './FilterSelector.js' import classes from './styles/ActionsBar.module.css' @@ -32,6 +35,7 @@ const ActionsBar = ({ access, showDescription, starred, + setSlideshow, toggleDashboardStarred, showAlert, updateShowDescription, @@ -39,6 +43,7 @@ const ActionsBar = ({ restrictFilters, allowedFilters, filtersLength, + dashboardItems, }) => { const history = useHistory() const [moreOptionsIsOpen, setMoreOptionsIsOpen] = useState(false) @@ -49,6 +54,7 @@ const ActionsBar = ({ const { isDisconnected: offline } = useDhis2ConnectionStatus() const { lastUpdated, isCached, startRecording, remove } = useCacheableSection(id) + const { allowVisFullscreen } = useSystemSettings().systemSettings const onRecordError = useCallback(() => { showAlert({ @@ -94,6 +100,10 @@ const ActionsBar = ({ const userAccess = orObject(access) + const hasSlideshowItems = dashboardItems?.some( + (i) => itemTypeSupportsFullscreen(i.type) || false + ) + const getMoreMenu = () => ( {lastUpdated ? ( @@ -176,6 +186,12 @@ const ActionsBar = ({ return } + const slideshowTooltipContent = !hasSlideshowItems + ? i18n.t('No dashboard items to show in slideshow') + : offline && !isCached + ? i18n.t('Not available offline') + : null + return ( <>
@@ -204,6 +220,24 @@ const ActionsBar = ({ ) : null} + {allowVisFullscreen ? ( + + + + ) : null} { } export default connect(mapStateToProps, { + setSlideshow: acSetSlideshow, removeAllFilters: acClearItemFilters, updateShowDescription: acSetShowDescription, })(ActionsBar) diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js index 442b38368..57ed1bf9b 100644 --- a/src/components/Item/AppItem/Item.js +++ b/src/components/Item/AppItem/Item.js @@ -1,4 +1,6 @@ +import i18n from '@dhis2/d2-i18n' import { Divider, colors, spacers, IconQuestion24 } from '@dhis2/ui' +import cx from 'classnames' import PropTypes from 'prop-types' import React from 'react' import { connect } from 'react-redux' @@ -9,8 +11,9 @@ import { } from '../../../reducers/itemFilters.js' import ItemHeader from '../ItemHeader/ItemHeader.js' import { getIframeSrc } from './getIframeSrc.js' +import styles from './styles/AppItem.module.css' -const AppItem = ({ dashboardMode, item, itemFilters, apps }) => { +const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => { let appDetails const appKey = item.appKey @@ -39,26 +42,23 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps }) => {