Add the possibility to access custom opfab screen in menu (#7880)

Signed-off-by: ClementBouvierN <[email protected]>

Author: ClementBouvierN

config/docker/ui-config/ui-menu.json

@@ -35,6 +35,11 @@
             "id": "menu2",
             "label": "title.multi",
             "entries": [
+                {
+                    "customMenuId": "uid_test_0",
+                    "customScreenId": "testId",
+                    "label": "entry.custom"
+                },
                 {
                     "customMenuId": "uid_test_1",
                     "url": "https://opfab.github.io/",
@@ -144,7 +149,8 @@
                     "entry1": "First menu entry",
                     "entry2": "Second menu entry",
                     "entry3": "External application",
-                    "admin": "Admin menu entry"
+                    "admin": "Admin menu entry",
+                    "custom": "Custom screen"
                 }
             }
         },
@@ -161,7 +167,9 @@
                     "entry1": "Premier élément",
                     "entry2": "Deuxième élément",
                     "entry3": "Application externe",
-                    "admin": "Menu admin élément"
+                    "admin": "Menu admin élément",
+                    "custom": "Écran personnalisé"
+
                 }
             }
         },
@@ -178,7 +186,8 @@
                     "entry1": "Eerste menu-item",
                     "entry2": "Tweede menu-item",
                     "entry3": "TExterne applicatie",
-                    "admin": "Admin menu-item"
+                    "admin": "Admin menu-item",
+                    "custom": "Aangepast scherm"
                 }
             }
         }

src/docs/asciidoc/deployment/configuration/web-ui_configuration.adoc

@@ -37,7 +37,7 @@ The line customized in the nginx configuration file must end with à semicolon (
 [[ui_properties]]
 == UI properties
 
-The properties lie in the `web-ui.json`.The following table describes their meaning and  how to use them. An example file can be found in the config/docker directory.
+The properties lie in the `web-ui.json`. The following table describes their meaning and how to use them. An example file can be found in the config/docker directory.
 
 |===
 |name|default|mandatory?|Description

src/docs/asciidoc/reference_doc/ui_customization.adoc

@@ -295,6 +295,40 @@ Named `opfab_theme`, this parameter has a value corresponding to the current the
 `http://mysite.com/index.htm?opfab_theme=NIGHT`. Switching theme will trigger reload of open iframes.
 
 
+=== Custom screen menus
+
+It is possible to add menus linked to custom screens of the application. See custom screen definition link:./single_page_doc.html#card_list_custom_screen[here]. To set up such a menu, it's important to give it a customMenuId and a customScreenId. See example below :
+
+.Example
+[source, json]
+----
+{
+  "navigationBar": [
+    {
+      "opfabCoreMenuId": "feed"
+    },
+    {
+      "id": "menu1",
+      "entries": [
+        {
+            "customMenuId": "uid_test_0",
+            "customScreenId": "testId",
+            "label": "entry.custom"
+        },
+        {
+          "customMenuId": "uid_test_1",
+          "url": "https://opfab.github.io/",
+          "label": "entry.single",
+          "linkType": "BOTH"
+        }
+      ]
+    }
+  ],
+  [...]
+}
+----
+
+[[card_list_custom_screen]]
 == Card List Custom Screen
 
 You can define a custom screen containing a search header and a list of cards.

ui/main/src/app/services/config/model/MenuEntry.ts

@@ -16,6 +16,7 @@ export class MenuEntry {
     constructor(
         public readonly id: string,
         public readonly customMenuId: string,
+        public readonly customScreenId: string,
         public readonly opfabCoreMenuId: string,
         public readonly label: string,
         public readonly url: string,

ui/main/src/app/services/navigation/NavigationService.ts

@@ -15,7 +15,7 @@ export enum PageType {
     UNKNOWN,
     FEED,
     ARCHIVE,
-    THIRPARTY,
+    THIRDPARTY,
     SETTING,
     ABOUT,
     CALENDAR,
@@ -31,7 +31,7 @@ export class NavigationService {
     private static readonly pageConf = new Map([
         ['feed', PageType.FEED],
         ['archives', PageType.ARCHIVE],
-        ['businessconfigparty', PageType.THIRPARTY],
+        ['businessconfigparty', PageType.THIRDPARTY],
         ['setting', PageType.SETTING],
         ['about', PageType.ABOUT],
         ['calendar', PageType.CALENDAR],

ui/main/src/app/views/navbar/navbarMenu.view.ts

@@ -102,8 +102,10 @@ export class NavbarMenuView {
 
     private setMenuElementProperties(navbarMenuElement: NavbarMenuElement, menuElementConfig: any): void {
         navbarMenuElement.dropdownMenu = [];
-        navbarMenuElement.id = menuElementConfig.opfabCoreMenuId || menuElementConfig.customMenuId;
+        navbarMenuElement.id =
+            menuElementConfig.opfabCoreMenuId || menuElementConfig.customScreenId || menuElementConfig.customMenuId;
         navbarMenuElement.isCoreMenu = !!menuElementConfig.opfabCoreMenuId;
+        navbarMenuElement.isCustomScreen = !!menuElementConfig.customScreenId;
         navbarMenuElement.label = this.getTranslation(menuElementConfig);
         navbarMenuElement.url = menuElementConfig.url;
         navbarMenuElement.linkType = menuElementConfig.linkType;
@@ -186,6 +188,10 @@ export class NavbarMenuView {
     }
 
     public onMenuClick(navbarMenuElement: NavbarMenuElement, isClickOnNewTabIcon = false): void {
+        if (navbarMenuElement.isCustomScreen) {
+            NavigationService.navigateTo('customscreen/' + navbarMenuElement.id);
+            return;
+        }
         if (navbarMenuElement.isCoreMenu) {
             if (navbarMenuElement.id === 'nightdaymode') {
                 if (GlobalStyleService.getStyle() === GlobalStyleService.DAY) {

ui/main/src/app/views/navbar/navbarMenu_OnMenuClick.view.spec.ts

@@ -54,6 +54,15 @@ describe('NavbarMenuView - OnMenuClick', () => {
             expect(applicationRouterMock.urlCalled).toEqual('businessconfigparty/customMenu1/');
         });
 
+        it('open custom screen if menu item contains custom screen id ', async () => {
+            clickOnMenu({
+                menuId: 'customMenu1',
+                isCustomScreen: true,
+                isCoreMenu: false
+            });
+            expect(applicationRouterMock.urlCalled).toEqual('customscreen/customMenu1');
+        });
+
         it('set route for custom application with double encoding if id contains a #', async () => {
             clickOnMenu({
                 menuId: 'custom#Menu1',
@@ -206,6 +215,7 @@ describe('NavbarMenuView - OnMenuClick', () => {
     function clickOnMenu({
         menuId = 'MyMenuId',
         isCoreMenu = false,
+        isCustomScreen = false,
         linkType = MenuEntryLinkType.IFRAME,
         url = '',
         openInNewTab = false
@@ -215,6 +225,7 @@ describe('NavbarMenuView - OnMenuClick', () => {
         const navbarMenuElement = new NavbarMenuElement();
         navbarMenuElement.id = menuId;
         navbarMenuElement.isCoreMenu = isCoreMenu;
+        navbarMenuElement.isCustomScreen = isCustomScreen;
         navbarMenuElement.linkType = linkType;
         navbarMenuElement.url = url;
         navbarMenuView.onMenuClick(navbarMenuElement, openInNewTab);

ui/main/src/app/views/navbar/navbarPage.ts

@@ -37,6 +37,7 @@ export class NavbarMenuElement {
     id: string;
     url: string;
     label: string;
+    isCustomScreen: boolean;
     linkType: MenuEntryLinkType;
     dropdownMenu: NavbarMenuElement[];
 }