aril 1.1.71 → 1.1.73

package/.eslintrc.json

@@ -0,0 +1,41 @@
+{
+	"extends": "../../.eslintrc.json",
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "aril",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "aril",
+						"style": "kebab-case"
+					}
+				],
+				"@angular-eslint/no-input-rename": "off",
+				"rules": {
+					"no-multiple-empty-lines": [
+						"error",
+						{
+							"max": 1,
+							"maxEOF": 0,
+							"maxBOF": 0
+						}
+					]
+				}
+			}
+		},
+		{
+			"files": ["*.html"]
+		}
+	]
+}

package/README.md

@@ -1,62 +1,62 @@
-# ARiL-UI-LIB
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.
-
-```
-> npx @angular/cli new workspace --no-create-application
-> npx ng generate library aril
-> npx ng add @angular-eslint/schematics
-> npm install prettier --save-dev
-> npx nx init
-> ng generate component button --flat --path projects/aril/ui/button/src
-```
-
-## Code Scaffolding
-
-Run `ng generate component|directive|pipe|service|class|guard|interface|enum|module --flat --path projects/aril/<subentry>/<feature>/src` to generate a new as you select.
-
-- > Note: Don't forget to add `--path` or else it will be added to the default project in your `angular.json` file.
-- > Note: subentry must be one of `boot|http|i18n|keycloak|theme|ui|util`.
-- > Note: Don't forget to add `index.ts` and `ng-package.json` for components of subentry points.
-- > Note: Don't forget to export component from `index.ts`.
-
-## Folder Scaffolding
-
-- main-entry (aril)
-  - sub-entry (boot|http|i18n|keycloak|theme|ui|util)
-    - feature (button,calendar etc.)
-      - src
-        - feature.component.ts
-        - feature.view.html
-      - index.ts
-      - ng-package.json
-    - index.ts
-    - ng-package.json
-
-## Build
-
-Run `ng build aril` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build aril`, go to the dist folder `cd dist` and run `npm publish`.
-
-> Note: Don't forget to increment the version number in `project.json` before build.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
-
-## Local testing
-
-To test changes locally, you need to apply the build in the targeted node_modules folder.
-
-### Windows
-On Windows, you can run `npm run build-local`. This will build the packages and move them in the needed directory.
-
-### MacOS
-On MacOS, you should:
-- run `npm run build`
-- copy (and replace) the resulting files from `dist/fesm2022/<your-package>.[mjs & map]` into the `node_modules/aril/fesm2022` of your targeted app (for instance, `aril-ui-yeap-mw`)
-
-This is a temporary solution until we have a script for moving files.
+# ARiL-UI-LIB
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.1.0.
+
+```
+> npx @angular/cli new workspace --no-create-application
+> npx ng generate library aril
+> npx ng add @angular-eslint/schematics
+> npm install prettier --save-dev
+> npx nx init
+> ng generate component button --flat --path projects/aril/ui/button/src
+```
+
+## Code Scaffolding
+
+Run `ng generate component|directive|pipe|service|class|guard|interface|enum|module --flat --path projects/aril/<subentry>/<feature>/src` to generate a new as you select.
+
+- > Note: Don't forget to add `--path` or else it will be added to the default project in your `angular.json` file.
+- > Note: subentry must be one of `boot|http|i18n|keycloak|theme|ui|util`.
+- > Note: Don't forget to add `index.ts` and `ng-package.json` for components of subentry points.
+- > Note: Don't forget to export component from `index.ts`.
+
+## Folder Scaffolding
+
+- main-entry (aril)
+  - sub-entry (boot|http|i18n|keycloak|theme|ui|util)
+    - feature (button,calendar etc.)
+      - src
+        - feature.component.ts
+        - feature.view.html
+      - index.ts
+      - ng-package.json
+    - index.ts
+    - ng-package.json
+
+## Build
+
+Run `ng build aril` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build aril`, go to the dist folder `cd dist` and run `npm publish`.
+
+> Note: Don't forget to increment the version number in `project.json` before build.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+## Local testing
+
+To test changes locally, you need to apply the build in the targeted node_modules folder.
+
+### Windows
+On Windows, you can run `npm run build-local`. This will build the packages and move them in the needed directory.
+
+### MacOS
+On MacOS, you should:
+- run `npm run build`
+- copy (and replace) the resulting files from `dist/fesm2022/<your-package>.[mjs & map]` into the `node_modules/aril/fesm2022` of your targeted app (for instance, `aril-ui-yeap-mw`)
+
+This is a temporary solution until we have a script for moving files.

package/boot/config/api/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/boot/config/api/src/api.sample.json

@@ -0,0 +1,8 @@
+{
+	"api": "",
+	"keycloak": {
+		"url": "",
+		"realm": "",
+		"clientId": ""
+	}
+}

package/boot/config/api/src/api.service.ts

@@ -0,0 +1,91 @@
+import { HttpClient } from '@angular/common/http';
+import { isDevMode, signal } from '@angular/core';
+
+import { KeycloakEventType, KeycloakService } from 'keycloak-angular';
+import { EMPTY, finalize, firstValueFrom, from, switchMap, tap } from 'rxjs';
+
+import { MicroAppService } from 'aril/boot/config/apps';
+
+import { ApiConfigsFactory, Apps } from './interfaces';
+
+export const API_CONFIGS = new ApiConfigsFactory();
+
+export const loadApiConfigs =
+	(httpClient: HttpClient, keycloak: KeycloakService, appName: string, microAppService?: MicroAppService) => () =>
+		new Promise<void>((resolve) =>
+			httpClient
+				.get<ApiConfigsFactory>(isDevMode() ? './assets/local-configs/api.local.json' : './api.json')
+				.pipe(
+					switchMap((configs) => {
+						(globalThis as any).hostMenuItems = signal([]);
+						(globalThis as any).pluginJson = {};
+
+						Object.assign(API_CONFIGS, { ...configs });
+
+						return from(
+							keycloak.init({
+								config: API_CONFIGS.keycloak,
+								loadUserProfileAtStartUp: true,
+								initOptions: { onLoad: 'login-required', checkLoginIframe: false },
+								bearerExcludedUrls: ['/assets']
+							})
+						).pipe(
+							finalize(() =>
+								addEventListener('module-ready', (event) => {
+									const app = (event as CustomEvent).detail;
+									dispatchEvent(new CustomEvent(`${app}:init-keycloak`, { detail: keycloak }));
+
+									keycloak.keycloakEvents$.subscribe((e) => {
+										if (e.type === KeycloakEventType.OnAuthRefreshSuccess) {
+											dispatchEvent(new CustomEvent(`${app}:update-keycloak`, { detail: keycloak }));
+										}
+									});
+								})
+							)
+						);
+					}),
+					switchMap(() => microAppService?.init(httpClient, API_CONFIGS.api) ?? EMPTY)
+				)
+				.subscribe()
+				.add(resolve)
+		);
+
+/**
+ * only works when isHostMode is true
+ * micro-app access its own api.json file when opened in host
+ */
+export function setApiConfigOnMFEMode(
+	httpClient: HttpClient,
+	keycloak: KeycloakService,
+	appName: Apps
+): () => Promise<any> {
+	return () => {
+		const observable$ = httpClient
+			.get<ApiConfigsFactory>(isDevMode() ? './assets/local-configs/api.local.json' : './api.json')
+			.pipe(
+				tap((configs) => {
+					Object.assign(API_CONFIGS, { ...configs });
+					if (appName !== Apps.THOR && appName !== Apps.YEAP) {
+						API_CONFIGS.api = API_CONFIGS.getExternalAppEndpoint(appName);
+					}
+				})
+			);
+
+		return firstValueFrom(observable$);
+	};
+}
+
+export const loadInitData = (httpClient: HttpClient) => () =>
+	new Promise<void>((resolve, _reject) => {
+		const endpoint = API_CONFIGS.api + '/ui-route-content-configs/all';
+		httpClient.get(endpoint).subscribe({
+			next: (data) => {
+				(globalThis as any).routeConfigs = data;
+				resolve();
+			},
+			error: (err) => {
+				console.error(`Failed to load init data from ${endpoint}:`, err);
+				resolve();
+			}
+		});
+	});

package/boot/config/api/src/interfaces.ts

@@ -0,0 +1,65 @@
+export enum Apps {
+	THOR = 'thor',
+	CRM = 'crm',
+	WDM = 'wdm',
+	BILLING = 'billing',
+	PAYMENT = 'payment',
+	YEAP = 'yeap',
+	MW = 'mw',
+	LENA = 'lena',
+	HES = 'hes',
+	CTS = 'cts',
+	SIS = 'sis',
+	MNG = 'mng',
+	MDM = 'mdm',
+	STATE_MACHINE = 'state-machine',
+	REPORT = 'report',
+	LGC = 'lgc',
+	DMS = 'dms'
+}
+
+export enum AppsRoutes {
+	MNG_BASE_URL = 'mngBaseUrl',
+}
+
+export interface KeycloakConfig {
+	url: string;
+	realm: string;
+	clientId: string;
+}
+
+export class ApiConfigsFactory {
+	api: string = '';
+	fromMail: string = '';
+	mwApi: string = '';
+	aiApi: string = '';
+	statusApi: string = '';
+	environment: string = '';
+	keycloak!: Keycloak.KeycloakConfig;
+	routes: Record<AppsRoutes, string> = {
+		mngBaseUrl: '',
+	};
+	prefixMap: Record<Apps, string> = {
+		[Apps.THOR]: '',
+		[Apps.CRM]: '',
+		[Apps.WDM]: '',
+		[Apps.BILLING]: '',
+		[Apps.PAYMENT]: '',
+		[Apps.YEAP]: '',
+		[Apps.MW]: '',
+		[Apps.LENA]: '',
+		[Apps.HES]: '',
+		[Apps.CTS]: '',
+		[Apps.SIS]: '',
+		[Apps.MNG]: '',
+		[Apps.STATE_MACHINE]: '',
+		[Apps.MDM]:'',
+		[Apps.REPORT]: '',
+		[Apps.LGC]: '',
+		[Apps.DMS]: ''
+	};
+	getExternalAppEndpoint(appName: Apps): string {
+		const prefix = this.prefixMap[appName] || this.prefixMap[Apps.MNG];
+		return `${new URL(this.api).origin}/${prefix}`;
+	}
+}

package/boot/config/apps/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/boot/config/apps/src/apps.service.ts

@@ -0,0 +1,62 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable, inject, isDevMode } from '@angular/core';
+import { Router, Routes } from '@angular/router';
+
+import {
+	WebComponentWrapper,
+	WebComponentWrapperOptions,
+	startsWith
+} from '@angular-architects/module-federation-tools';
+import { catchError, of, tap } from 'rxjs';
+
+import { NotFoundComponent } from 'aril/util/custom_pages';
+
+import { AuthGuard } from './auth.guard';
+import { AppsDTO, ExtensionConfig, PluginConfig, PluginMenuItem } from './interfaces';
+import { ShadowDOMWrapperComponent } from './showdowDOMWrapper';
+
+@Injectable({ providedIn: 'root' })
+export class MicroAppService {
+	private router = inject(Router);
+
+	init(httpClient: HttpClient, hostAPI: string) {
+		return httpClient
+			.get<AppsDTO>(isDevMode() ? './assets/local-configs/app.local.json' : hostAPI + '/ui-sidebar-configs')
+			.pipe(
+				tap((apps) => {
+					const routes = this.buildRoutes([...apps.modules, ...apps.plugins]);
+
+					this.router.resetConfig([...this.router.config, ...routes, { path: '**', component: NotFoundComponent }]);
+					this.setMenuItems(apps.menuItems);
+					this.setPlugins(apps.extensions);
+				}),
+				catchError((err) => {
+					console.log('Error Micro Apps Loading', err);
+					return of();
+				})
+			);
+	}
+
+	buildRoutes(options: PluginConfig[]): Routes {
+		const routes: Routes = options.map((options) => {
+			return {
+				matcher: startsWith(options.remoteName),
+				component: options.shadowDomPassive ? WebComponentWrapper : ShadowDOMWrapperComponent,
+				data: options as WebComponentWrapperOptions,
+				canActivate: [AuthGuard]
+			};
+		});
+
+		return routes;
+	}
+
+	setMenuItems(items: PluginMenuItem[]): void {
+		(<any>globalThis).hostMenuItems.set([
+			{ root: true, label: { tr: 'Anasayfa', en: 'Home' }, icon: 'pi pi-fw pi-home', routerLink: '/' },
+			...items
+		]);
+	}
+	setPlugins(items: Record<string, ExtensionConfig>): void {
+		(<any>globalThis).pluginJson = items || {};
+	}
+}

package/boot/config/apps/src/auth.guard.ts

@@ -0,0 +1,22 @@
+import { Injectable, inject } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+
+import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';
+
+@Injectable({ providedIn: 'root' })
+export class AuthGuard extends KeycloakAuthGuard {
+	constructor() {
+		super(inject(Router), inject(KeycloakService));
+	}
+
+	override async isAccessAllowed(
+		route: ActivatedRouteSnapshot,
+		state: RouterStateSnapshot
+	): Promise<boolean | UrlTree> {
+		if (!this.authenticated) {
+			await this.keycloakAngular.login({ redirectUri: window.location.href });
+		}
+
+		return this.authenticated;
+	}
+}

package/boot/config/apps/src/interfaces.ts

@@ -0,0 +1,58 @@
+import { MenuItemCommandEvent } from 'primeng/api';
+
+import { WebComponentWrapperOptions } from '@angular-architects/module-federation-tools';
+
+export enum Apps {
+	THOR = 'thor',
+	CRM = 'crm',
+	WDM = 'wdm',
+	BILLING = 'billing',
+	PAYMENT = 'payment',
+	YEAP = 'yeap',
+	MW = 'mw',
+	LENA = 'lena',
+	HES = 'hes',
+	CTS = 'cts',
+	SIS = 'sis',
+	MNG = 'mng',
+	MDM = 'mdm',
+	STATE_MACHINE = 'state-machine',
+	REPORT = 'report',
+	LGC = 'lgc',
+	DMS = 'dms'
+}
+
+export interface AppsDTO {
+	version: number;
+	modules: PluginConfig[];
+	plugins: PluginConfig[];
+	extensions: Record<string, ExtensionConfig>;
+	menuItems: PluginMenuItem[];
+}
+
+export interface ExtensionConfig {
+	options: PluginConfig;
+}
+
+export type PluginConfig = WebComponentWrapperOptions & {
+	id?: string;
+	remoteName: string;
+	shadowDomPassive: boolean;
+};
+
+export interface PluginMenuItem {
+	routerLink?: string;
+	icon?: string;
+	label: {
+		[languageCode: string]: string;
+	};
+	items?: PluginMenuItem[];
+	permittedRole?: string;
+
+	// UI fields
+	separator?: boolean;
+	root?: boolean;
+	path?: string;
+	disabled?: boolean;
+	command?(event: MenuItemCommandEvent): void;
+}

package/boot/config/apps/src/reuse-strategy.ts

@@ -0,0 +1,10 @@
+import { ActivatedRouteSnapshot, BaseRouteReuseStrategy } from '@angular/router';
+
+export class ArilReuseStrategy extends BaseRouteReuseStrategy {
+	override shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+		if (curr.firstChild?.routeConfig?.data?.['remoteEntry'] === future.firstChild?.routeConfig?.data?.['remoteEntry'])
+			return false;
+
+		return future?.routeConfig === curr?.routeConfig && JSON.stringify(future?.params) === JSON.stringify(curr?.params);
+	}
+}

package/boot/config/apps/src/showdowDOMWrapper.ts

@@ -0,0 +1,28 @@
+import { Component, ElementRef, OnInit, Renderer2, ViewChild, ViewEncapsulation, inject } from '@angular/core';
+
+import { WebComponentWrapper } from '@angular-architects/module-federation-tools';
+
+@Component({
+	standalone: true,
+	template: '<div #vc></div>',
+	encapsulation: ViewEncapsulation.ShadowDom
+})
+export class ShadowDOMWrapperComponent extends WebComponentWrapper implements OnInit {
+	@ViewChild('vc', { read: ElementRef, static: true }) override vc!: ElementRef;
+
+	private renderer = inject(Renderer2);
+
+	ngOnInit(): void {
+		const shadowRoot = this.vc.nativeElement.parentNode;
+		const styleUrls = this['route'].snapshot.data.styleUrls || [];
+
+		// Inject styles into the Shadow DOM
+		styleUrls.forEach((url: string) => {
+			const link = this.renderer.createElement('link');
+			link.setAttribute('rel', 'stylesheet');
+			link.setAttribute('type', 'text/css');
+			link.setAttribute('href', url);
+			this.renderer.appendChild(shadowRoot, link);
+		});
+	}
+}

package/boot/config/plugins/ng-package.json

@@ -0,0 +1,6 @@
+{
+	"$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+	"lib": {
+		"entryFile": "./index.ts"
+	}
+}

package/boot/config/plugins/src/getNgZone.ts

@@ -0,0 +1,7 @@
+import { NgZone } from '@angular/core';
+
+export const getNgZone = () => {
+	if ((<any>globalThis).ngZone) {
+		return { provide: NgZone, useValue: (<any>globalThis).ngZone };
+	} else return [];
+};

package/boot/config/plugins/src/interfaces.ts

@@ -0,0 +1,75 @@
+import { LoadRemoteModuleScriptOptions } from '@angular-architects/module-federation';
+
+interface PluginItem {
+	options: LoadRemoteModuleScriptOptions & { elementName: string };
+	props: { [key in string]: any };
+	events: { [key in string]: Function };
+}
+
+export type PluginConfigs = { [key in string]: PluginItem };
+
+export class FactoryClass {}
+
+enum Apps {
+	THOR = 'thor',
+	CRM = 'crm',
+	WDM = 'wdm',
+	BILLING = 'billing',
+	PAYMENT = 'payment',
+	YEAP = 'yeap',
+	MW = 'mw',
+	LENA = 'lena',
+	HES = 'hes',
+	CTS = 'cts',
+	SIS = 'sis',
+	MNG = 'mng',
+	MDM = 'mdm',
+	STATE_MACHINE = 'state-machine',
+	LGC = 'lgc',
+	DMS = 'dms'
+}
+
+export enum AppsRoutes {
+	MNG_BASE_URL = 'mngBaseUrl',
+}
+
+export interface KeycloakConfig {
+	url: string;
+	realm: string;
+	clientId: string;
+}
+
+export class ApiConfigsFactory {
+	api: string = '';
+	fromMail: string = '';
+	mwApi: string = '';
+	aiApi: string='';
+	statusApi: string='';
+	environment: string = '';
+	routes: Record<AppsRoutes, string> = {
+		mngBaseUrl: '',
+	};
+	prefixMap: Record<Apps,string>= {
+		[Apps.THOR]: '',
+		[Apps.CRM]: '',
+		[Apps.WDM]: '',
+		[Apps.BILLING]: '',
+		[Apps.PAYMENT]: '',
+		[Apps.YEAP]: '',
+		[Apps.MW]: '',
+		[Apps.LENA]: '',
+		[Apps.HES]: '',
+		[Apps.CTS]: '',
+		[Apps.SIS]: '',
+		[Apps.MNG]: '',
+		[Apps.STATE_MACHINE]: '',
+		[Apps.MDM]:'',
+		[Apps.LGC]: '',
+		[Apps.DMS]: ''
+	};
+	keycloak: KeycloakConfig = {
+		url: '',
+		realm: '',
+		clientId: ''
+	};
+}