modals poc

core-modular/dev-tools/templates/simple/luigi-ui/lui-ui5wc.js

@@ -161,6 +161,31 @@ const connector = {
   },
   getContainerWrapper: () => {
     return document.querySelector('.tool-layout > .content');
+  },
+  renderModal: (lc, modalSettings) => {
+    const dialog = document.createElement('ui5-dialog');
+    dialog.classList.add('lui-dialog');
+    dialog.setAttribute('header-text', modalSettings?.title);
+    dialog.appendChild(lc);
+
+    const bar = document.createElement('ui5-bar');
+    bar.setAttribute('slot', 'header');
+    bar.innerHTML = `<ui5-title level="H5" slot="startContent">${modalSettings?.title}</ui5-title>`;
+    dialog.appendChild(bar);
+    const btn = document.createElement('ui5-button');
+    btn.innerHTML = 'X';
+    btn.onclick = () => {
+      dialog.open = false;
+    };
+    btn.setAttribute('slot', 'endContent');
+    bar.appendChild(btn);
+
+    document.body.appendChild(dialog);
+    dialog.addEventListener('close', () => {
+      console.log('close');
+      //document.body.removeChild(dialog);
+    });
+    dialog.open = true;
   }
 };
 

core-modular/dev-tools/templates/simple/luigi-ui/lui.css

@@ -50,4 +50,10 @@ ui5-shellbar {
     border-radius: 0.5rem 0.5rem 0 0;
     box-shadow: 0 0 0.125rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent),
         0 0.5rem 1rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
+}
+
+
+.lui-dialog::part(header),
+.lui-dialog::part(footer) {
+    padding-inline: 0;
 }

core-modular/src/luigi.ts

@@ -25,17 +25,18 @@ export class Luigi {
         this._connector = connector;
     }
 
-    setConfig(cfg: any) {
+    // NOTE: using arrow style functions to have "code completion" in browser dev tools
+    setConfig = (cfg: any) => {
         this.config = cfg;
         _init();
-    }
+    };
 
-    getConfig(): any {
+    getConfig = (): any => {
         return this.config;
-    }
+    };
 
-    navigation(): any {
+    navigation = (): Navigation => {
         return new Navigation(this);
-    }
+    };
     // ...
 }

core-modular/src/navigation.ts

@@ -1,19 +1,34 @@
 import type { Luigi } from "./luigi";
+import { NavigationService } from "./services/navigation.service";
+import Title from '../../website/fiddle/public/vendor/ui5/webcomponents/Title';
 
 export class Navigation {
     luigi: Luigi;
     hashRouting: boolean = false;
+    navService: NavigationService;
 
     constructor(luigi: Luigi) {
         this.luigi = luigi;
-        this.hashRouting = luigi.getConfig().routing?.useHashRouting;
+        this.hashRouting = luigi.getConfig().routing?.useHashRouting;        
+        this.navService = new NavigationService(luigi);
     }
-    navigate(path: string) {
-        let normalizedPath = path.replace(/\/\/+/g, '/');
+
+    navigate = (path: string) => {
+        const normalizedPath = path.replace(/\/\/+/g, '/');
         if(this.hashRouting) {
             location.hash = normalizedPath;
         } else {
             console.log('path routing not yet implemented');
         }
-    }
+    };
+
+    openAsModal = (path: string, modalSettings: any /* TODO: type */, onCloseCallback: Function) => {        
+        const normalizedPath = path.replace(/\/\/+/g, '/');
+        const node = this.navService.getCurrentNode(normalizedPath);
+        const settings = modalSettings || {};
+        if (!settings.title) {
+            settings.title = node.label;
+        }
+        this.luigi._ui.openModal(this.luigi, node, settings, onCloseCallback);
+    };
 }

core-modular/src/services/navigation.service.ts

@@ -42,7 +42,10 @@ export class NavigationService {
 
     getPathData(path: string): PathData {        
         const cfg = this.luigi.getConfig();
-        const pathSegments = path.split('/');
+        let pathSegments = path.split('/');
+        if (pathSegments?.length > 0 && pathSegments[0]  === '') {
+            pathSegments = pathSegments.slice(1);
+        }
         const rootNodes = cfg.navigation?.nodes || [];
         const pathData: PathData = {
             selectedNodeChildren: rootNodes,

core-modular/src/types/connector.ts

@@ -2,10 +2,12 @@ import type { LeftNavData, Node, TopNavData } from "../services/navigation.servi
 
 export interface LuigiConnector {
     renderMainLayout(): void;
-    
+
     renderTopNav(data: TopNavData): void;
 
     renderLeftNav(data: LeftNavData): void;
 
     getContainerWrapper(): HTMLElement;
+
+    renderModal(container: HTMLElement, modalSettings: any): any;
 }

core-modular/src/ui.ts

@@ -2,8 +2,12 @@ import { Helpers } from "./helpers";
 import type { Luigi } from "./luigi";
 import { NavigationService } from "./services/navigation.service";
 
-const renderContainer = () => {
-
+const createContainer = (node: any): HTMLElement => {
+    const lc: any = document.createElement('luigi-container');
+    lc.setAttribute('viewUrl', node.viewUrl);
+    lc.webcomponent = node.webcomponent;
+    lc.context = node.context;
+    return lc;
 }
 
 export const UI = {
@@ -22,7 +26,6 @@ export const UI = {
         luigi._connector?.renderTopNav(navService.getTopNavData());
         luigi._connector?.renderLeftNav(navService.getLeftNavData(path));
 
-        renderContainer();
         const currentNode = navService.getCurrentNode(path);
         if(currentNode) {
             UI.updateMainContent(currentNode, luigi);
@@ -33,11 +36,11 @@ export const UI = {
         // if viewgroup and preload do some caching/restoring... for now only re-render
         if(currentNode && containerWrapper) {
             containerWrapper.innerHTML = '';
-            const lc: any = document.createElement('luigi-container');
-            lc.setAttribute('viewUrl', currentNode.viewUrl);
-            lc.webcomponent = currentNode.webcomponent;
-            lc.context = currentNode.context;
-            containerWrapper?.appendChild(lc);
+            containerWrapper?.appendChild(createContainer(currentNode));
         }
+    },
+    openModal: (luigi: Luigi, node: any, modalSettings: any /* TODO: type */, onCloseCallback: Function) => {
+        const lc = createContainer(node);
+        const modalHandle = luigi._connector?.renderModal(lc, modalSettings);
     }
 }