@quincarter/create-lit-app 1.1.4 → 1.1.6

package/create-app-shell.sh

@@ -867,7 +867,7 @@ if [ "$ENABLE_ROUTER" = true ]; then
 		directory: \"todos-page\",
 		component: \"todos-page\",
 		filePath: \"../../views/todos-page/todos-page.ts\",
-		levelOfAccess: [\"public\"],
+		levelOfAccess: [\"private\"],
 		tagName: \"todos-page\",
 		isMfe: false,
 	}"
@@ -953,6 +953,11 @@ export const routesBuilt = (
 		icon: navItem.icon || ("" as IconType),
 		mfeComponent: getMfeComponent(navItem.tagName),
 		userHasPermission: getAccessPermissions(navItem, accesses),
+		children: navItem.children?.map((child: NavItem) => ({
+			...child,
+			icon: child.icon || ("" as IconType),
+			userHasPermission: getAccessPermissions(child, accesses),
+		})),
 	}));
 };
 EOF
@@ -1262,10 +1267,12 @@ export class AppShellHeader extends LitElement {
         ${
 					this.routes.length > 0
 						? html`<ul>
-                ${this.routes.map(
-									(route) =>
-										html`<li><a href="${withBase(route.path)}">${route.name}</a></li>`,
-								)}
+                ${this.routes
+									.filter((route) => route.userHasPermission !== false)
+									.map(
+										(route) =>
+											html`<li><a href="${withBase(route.path)}">${route.name}</a></li>`,
+									)}
               </ul>`
 						: nothing
 				}
@@ -1623,7 +1630,7 @@ export const ViewMixin = <T extends Constructor<LitElement>>(superClass: T) => {
 				return this.renderUnderConstruction();
 			}
 
-			if (customTemplate) return html`${customTemplate}`;
+			if (customTemplate && this.featureIsEnabled) return html`${customTemplate}`;
 
 			return html`${
 				this.featureIsEnabled && this.isMfe
@@ -1675,6 +1682,7 @@ import "../../components/todos/todo-list/todo-list";
 
 @customElement("todos-page")
 export class TodosPage extends ViewMixin(LitElement) {
+	tagName = "todos-page";
 	featureIsEnabled = true;
 	isMfe = false;
 	static styles = [TodosPageStyles];
@@ -1703,6 +1711,7 @@ import "../../components/card/generic-card";
 
 @customElement("card-examples")
 export class CardExamples extends ViewMixin(LitElement) {
+	tagName = "card-examples";
 	featureIsEnabled = true;
 	isMfe = false;
 	static styles = [CardPageStyles];
@@ -1731,6 +1740,7 @@ import "../../components/chart-js/chart-js";
 
 @customElement("chart-examples")
 export class ChartExamples extends ViewMixin(LitElement) {
+	tagName = "chart-examples";
 	featureIsEnabled = true;
 	isMfe = false;
 
@@ -1792,7 +1802,10 @@ EOF
 IMPORTS="import { type HTMLTemplateResult, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { AppShellStyles } from './app-shell.styles';
-import type { NavItem } from './shared/interfaces/navigation.interface';"
+import type { NavItem } from './shared/interfaces/navigation.interface';
+import \"./shared/internal-views/404-not-found/page-not-found\";
+import \"./shared/internal-views/no-access/no-access\";
+import \"./shared/internal-views/under-construction/under-construction\";"
 
 if [ "$ENABLE_CONTEXT" = true ]; then
   IMPORTS="$IMPORTS
@@ -1814,9 +1827,10 @@ if [ "$ENABLE_ROUTER" = true ]; then
 import { Router } from '@lit-labs/router';
 import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 import 'urlpattern-polyfill';
-import { navigationRouting } from './shared/configuration/nav';
+import { navigationRouting, sidePages } from './shared/configuration/nav';
 import { routesBuilt } from './shared/configuration/routes';
-import { withBase } from './shared/configuration/base-path';"
+import { withBase } from './shared/configuration/base-path';
+import { AppRootUtilities } from './shared/utilities/app-root.utility';"
 fi
 
 if [ "$ENABLE_HEADER" = true ]; then
@@ -1847,6 +1861,24 @@ cat <<EOF >> src/app-shell.ts
   @property({ type: Array })
   accesses: string[] = ["public"];
 EOF
+else
+cat <<EOF >> src/app-shell.ts
+  @property({ type: Array })
+  routing: NavItem[] = [];
+
+  @property({ type: Array })
+  accesses: string[] = ["public"];
+EOF
+fi
+
+if [ "$ENABLE_ROUTER" = true ]; then
+cat <<EOF >> src/app-shell.ts
+  @state()
+  navRoutes: NavItem[] = [] as NavItem[];
+
+  @state()
+  notAllowedRouteList: NavItem[] = [];
+EOF
 fi
 
 # Provide the MFE loader independently of ENABLE_CONTEXT so that the MFE
@@ -1875,6 +1907,7 @@ EOF
 
 if [ "$ENABLE_ROUTER" = true ]; then
 cat <<EOF >> src/app-shell.ts
+    this.navRoutes = this._buildNavBarRoutes(navigationRouting);
     await this._setupRoutes();
 EOF
 fi
@@ -1894,8 +1927,20 @@ EOF
 if [ "$ENABLE_ROUTER" = true ]; then
 cat <<EOF >> src/app-shell.ts
 
+  private _buildNavBarRoutes(navItems: NavItem[]): NavItem[] {
+    const navi = routesBuilt(navItems, this.accesses);
+    const { notAllowed, navItems: filtered } =
+      AppRootUtilities.getNotAllowedRoutes(navi, this.notAllowedRouteList);
+    this.notAllowedRouteList = notAllowed;
+    return filtered;
+  }
+
   private async _setupRoutes(): Promise<void> {
-    this.routing = routesBuilt(navigationRouting, ["public"]);
+    const detailRoutes = this._buildNavBarRoutes([...sidePages]);
+    this.routing = routesBuilt(
+      [...this.navRoutes, ...this.notAllowedRouteList, ...detailRoutes],
+      this.accesses,
+    );
     const routeConfigs = this.routing.map((navItem) => ({
       path: withBase(navItem.path),
       enter: async () => {
@@ -1908,8 +1953,8 @@ cat <<EOF >> src/app-shell.ts
       },
     }));
 
-    const firstPath = navigationRouting[0]?.path || "/home";
-    const firstItem = navigationRouting[0];
+    const firstPath = this.navRoutes[0]?.path || "/home";
+    const firstItem = this.navRoutes[0];
 
     this._router.routes = [
       {
@@ -1943,7 +1988,7 @@ EOF
 
 if [ "$ENABLE_HEADER" = true ]; then
 cat <<EOF >> src/app-shell.ts
-      <app-shell-header .routes="\${this.routing}" enable-theme-switcher>
+      <app-shell-header .routes="\${this.navRoutes}" enable-theme-switcher>
         <main>
 EOF
 else

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quincarter/create-lit-app",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Interactive CLI initializer for Lit Element App Shell architecture",
   "type": "module",
   "bin": {