move main layout rendering to connector

SAP · Oct 18, 2024 · 026cacf · 026cacf
1 parent b56c135
commit 026cacf
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 66 deletions.
diff --git a/core-modular/dev-tools/templates/simple/index.html b/core-modular/dev-tools/templates/simple/index.html
@@ -27,70 +27,6 @@
     <script src="/luigi-ui/lui-ui5wc.js"></script>
     <script src="/luigi-config.js"></script>
 
-    <div class="tool-layout">
-      <ui5-shellbar>
-        <!-- <ui5-button icon="menu" slot="startButton" id="toggle"></ui5-button>
-        <ui5-avatar slot="profile" icon="customer"></ui5-avatar>
-        <img
-          slot="logo"
-          src="https://sap.github.io/ui5-webcomponents/images/sap-logo-svg.svg"
-        />
-        <ui5-shellbar-item icon="area-chart" text="Node"></ui5-shellbar-item> -->
-      </ui5-shellbar>
-
-      <ui5-side-navigation>
-        <!--<ui5-side-navigation-item
-          text="Home"
-          icon="home"
-        ></ui5-side-navigation-item>
-        <ui5-side-navigation-item text="People" expanded icon="group">
-          <ui5-side-navigation-sub-item
-            text="From My Team"
-          ></ui5-side-navigation-sub-item>
-          <ui5-side-navigation-sub-item
-            text="From Other Team"
-          ></ui5-side-navigation-sub-item>
-        </ui5-side-navigation-item>
-        <ui5-side-navigation-item
-          text="Locations"
-          icon="locate-me"
-          selected
-        ></ui5-side-navigation-item>
-        <ui5-side-navigation-item text="Events" icon="calendar">
-          <ui5-side-navigation-sub-item
-            text="Local"
-          ></ui5-side-navigation-sub-item>
-          <ui5-side-navigation-sub-item
-            text="Others"
-          ></ui5-side-navigation-sub-item>
-          <ui5-side-navigation-sub-item
-            text="External Link"
-            href="https://sap.com"
-            target="_blank"
-          >
-          </ui5-side-navigation-sub-item>
-        </ui5-side-navigation-item>
-        <ui5-side-navigation-item
-          slot="fixedItems"
-          text="Useful Links"
-          icon="chain-link"
-        >
-          <ui5-side-navigation-sub-item
-            text="External Link"
-            href="https://sap.com"
-            target="_blank"
-          >
-          </ui5-side-navigation-sub-item>
-        </ui5-side-navigation-item>
-        <ui5-side-navigation-item
-          slot="fixedItems"
-          text="History"
-          icon="history"
-        >
-        </ui5-side-navigation-item>-->
-      </ui5-side-navigation>
-
-      <div class="content"></div>
-    </div>
+
   </body>
 </html>
diff --git a/core-modular/dev-tools/templates/simple/luigi-ui/lui-ui5wc.js b/core-modular/dev-tools/templates/simple/luigi-ui/lui-ui5wc.js
@@ -24,6 +24,21 @@ function readExpandedState(uid) {
 
 /** @type {LuigiConnector} */
 const connector = {
+
+  renderMainLayout: () => {
+    if (!document.getElementById('app')) {
+      const appRoot = document.createElement('div');
+      appRoot.id = 'app';
+      appRoot.classList.add('tool-layout');
+      appRoot.innerHTML = `
+        <ui5-shellbar></ui5-shellbar>
+        <ui5-side-navigation></ui5-side-navigation>
+        <div class="content"></div>
+      `;
+      document.body.appendChild(appRoot);
+    }
+  },
+
   renderTopNav: topNavData => {
     const shellbar = document.querySelector('.tool-layout > ui5-shellbar');
     shellbar.setAttribute('primary-title', topNavData.appTitle);

diff --git a/core-modular/package-lock.json b/core-modular/package-lock.json
diff --git a/core-modular/package.json b/core-modular/package.json
@@ -7,6 +7,7 @@
     "@tsconfig/svelte": "^5.0.4",
     "chai": "^4.3.6",
     "css-tree": "^2.3.1",
+    "fs-extra": "^11.2.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "jsdom": "^20.0.0",

diff --git a/core-modular/src/services/navigation.service.ts b/core-modular/src/services/navigation.service.ts
@@ -1,4 +1,3 @@
-import { filter, first } from 'rxjs/operators';
 import type { Luigi } from '../luigi';
 export interface TopNavData {
     appTitle: string;

diff --git a/core-modular/src/types/connector.ts b/core-modular/src/types/connector.ts
@@ -1,6 +1,8 @@
 import type { LeftNavData, Node, TopNavData } from "../services/navigation.service";
 
 export interface LuigiConnector {
+    renderMainLayout(): void;
+
     renderTopNav(data: TopNavData): void;
 
     renderLeftNav(data: LeftNavData): void;

diff --git a/core-modular/src/ui.ts b/core-modular/src/ui.ts
@@ -10,6 +10,7 @@ export const UI = {
     navService : undefined,
     init: (luigi: Luigi) => {        
         console.log('Init UI...');
+        luigi._connector?.renderMainLayout();
         const navService = new NavigationService(luigi);
         const path = Helpers.normalizePath(location.hash);
         const redirect = navService.shouldRedirect(path);