aril 1.1.72 → 1.1.73

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

@@ -0,0 +1,110 @@
+import { HttpClient, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { APP_INITIALIZER, ApplicationConfig, Type, importProvidersFrom, isDevMode } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+import { createApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { ConfirmationService, MessageService, PrimeNGConfig } from 'primeng/api';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { DialogModule } from 'primeng/dialog';
+import { MessagesModule } from 'primeng/messages';
+import { ToastModule } from 'primeng/toast';
+
+import { TranslocoService } from '@ngneat/transloco';
+import { KeycloakAngularModule, KeycloakBearerInterceptor } from 'keycloak-angular';
+import { firstValueFrom, tap } from 'rxjs';
+
+import { API_CONFIGS } from 'aril/boot/config/api';
+import { LanguageCode, TR_TRANSLATIONS } from 'aril/boot/config/translate';
+import { HttpBackendService, acceptLanguageInterceptor } from 'aril/http';
+import { i18nFolderName, i18nModule } from 'aril/i18n';
+import { authInterceptor, keycloakAuthInterceptor } from 'aril/keycloak';
+import { provideHost, provideHostRouter, provideLocaleId } from 'aril/provider';
+
+import { getNgZone } from './getNgZone';
+import { ApiConfigsFactory, FactoryClass, PluginConfigs } from './interfaces';
+
+export const PLUGINS = new FactoryClass() as FactoryClass & PluginConfigs;
+
+export function loadPlugins(): () => void {
+	return () => {
+		try {
+			const pluginsData = (<any>globalThis).pluginJson;
+			Object.assign(PLUGINS, pluginsData);
+		} catch (err) {
+			console.log('Error Plugins Loading', err);
+		}
+	};
+}
+
+export async function bootPlugin(selector: string, component: Type<any>) {
+	if (customElements.get(selector)) return;
+
+	const config: ApplicationConfig = {
+		providers: [
+			provideAnimations(),
+			provideHost(selector as any), // todo refactor
+			provideHostRouter(),
+			provideLocaleId(),
+			KeycloakBearerInterceptor,
+			provideHttpClient(withInterceptors([acceptLanguageInterceptor, authInterceptor, keycloakAuthInterceptor])),
+			importProvidersFrom(
+				i18nModule,
+				KeycloakAngularModule,
+				ConfirmDialogModule,
+				ConfirmPopupModule,
+				DialogModule,
+				MessagesModule,
+				ToastModule
+			),
+			getNgZone(),
+			MessageService,
+			ConfirmationService,
+			{
+				provide: APP_INITIALIZER,
+				useFactory: (
+					httpBackend: { httpClient: HttpClient },
+					translocoService: TranslocoService,
+					primeNgConfig: PrimeNGConfig
+				) => {
+					return () => {
+						const activeLang: LanguageCode = (localStorage.getItem('lang') as LanguageCode) ?? LanguageCode.TR;
+
+						translocoService.setActiveLang(activeLang);
+
+						if (!activeLang?.length) {
+							console.warn('No language selected');
+							return;
+						}
+
+						if (activeLang === LanguageCode.TR) {
+							primeNgConfig.setTranslation(TR_TRANSLATIONS);
+						}
+
+						const observable$ = httpBackend.httpClient
+							.get<ApiConfigsFactory>(isDevMode() ? './assets/local-configs/api.local.json' : './api.json')
+							.pipe(
+								tap((configs) => {
+									Object.assign(API_CONFIGS, { ...configs });
+								})
+							);
+
+						return firstValueFrom(observable$);
+					};
+				},
+				deps: [HttpBackendService, TranslocoService, PrimeNGConfig],
+				multi: true
+			},
+			{
+				provide: i18nFolderName,
+				useValue: 'host'
+			}
+		]
+	};
+
+	const appRef = await createApplication(config);
+	const plugin = createCustomElement(component, { injector: appRef.injector });
+
+	customElements.define(selector, plugin);
+}

package/boot/config/translate/constants.ts

@@ -0,0 +1,4 @@
+export enum LanguageCode {
+	TR = 'tr',
+	EN = 'en'
+}

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

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

package/boot/config/translate/primeng/i18n/tr.ts

@@ -0,0 +1,59 @@
+export const TR_TRANSLATIONS = {
+	matchAll: 'Tümü',
+	matchAny: 'Herhangi biri',
+	startsWith: 'İle başlar',
+	contains: 'İçerir',
+	notContains: 'İçermez',
+	notEquals: 'Eşit değildir',
+	endsWith: 'İle biter',
+	equals: 'Eşittir',
+	lt: 'Eşit değildir',
+	lte: 'Küçük eşittir',
+	gt: 'Büyüktür',
+	gte: 'Büyük eşittir',
+	is: 'Eşittir',
+	isNot: 'Eşit değildir',
+	before: 'Önce',
+	after: 'Sonra',
+	clear: 'Temizle',
+	apply: 'Uygula',
+	addRule: 'Kural Ekle',
+	removeRule: 'Kural Kaldır',
+	accept: 'Kabul',
+	reject: 'Reddet',
+	choose: 'Seç',
+	upload: 'Yükle',
+	cancel: 'İptal',
+	dayNames: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
+	dayNamesShort: ['Paz', 'Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt'],
+	dayNamesMin: ['Pz', 'Pt', 'Sa', 'Ça', 'Pe', 'Cu', 'Ct'],
+	monthNames: [
+		'Ocak',
+		'Şubat',
+		'Mart',
+		'Nisan',
+		'Mayıs',
+		'Haziran',
+		'Temmuz',
+		'Ağustos',
+		'Eylül',
+		'Ekim',
+		'Kasım',
+		'Aralık'
+	],
+	monthNamesShort: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas', 'Ara'],
+	dateFormat: 'dd/mm/yy',
+	firstDayOfWeek: 1,
+	today: 'Bugün',
+	weekHeader: 'Hafta',
+	weak: 'Zayıf',
+	medium: 'Orta',
+	strong: 'Güçlü',
+	passwordPrompt: 'Şifre',
+	emptyMessage: 'Kayıt bulunamadı',
+	emptyFilterMessage: 'Eşleşen kayıt bulunamadı',
+	dateIs: 'Tarih eşit',
+	dateIsNot: 'Tarih eşit değil',
+	dateBefore: 'Tarihten önce',
+	dateAfter: 'Tarihten sonra'
+};

package/boot/host/ng-package.json

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

package/boot/host/src/app.component.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, NgZone, inject, signal } from '@angular/core';
+
+import {  AppLayoutComponent, LayoutService } from 'aril/theme/layout';
+import { PubSubService } from 'aril/util/pub-sub';
+
+import { appName } from './bootstrap';
+	
+type MenuMode = 'static' | 'expandable';
+
+@Component({
+	standalone: true,
+	selector: 'aril-root',
+	template: ` <app-layout></app-layout> `,
+	imports: [AppLayoutComponent]
+})
+export class AppComponent {
+	constructor(
+		private layoutService: LayoutService,
+		private pubSubService: PubSubService
+	) {
+		(<any>globalThis).activeHost = appName;
+		(<any>globalThis).__ARIL_PAGE_TITLE__ = signal('');
+		(<any>globalThis).ngZone = inject(NgZone);
+		(<any>globalThis).isHostMode = true;
+
+		this.pubSubService.subscribe('menuModeChanged', (data) => {
+			const menuMode = data?.custom;
+			
+			if (menuMode && (menuMode === 'static' || menuMode === 'expandable')) {				
+				this.layoutService.config.update((config) => {
+					const newConfig = {
+						...config,
+						menuMode: menuMode as MenuMode
+					};
+					return newConfig;
+				});
+								
+				if (menuMode === 'static') {
+					this.layoutService.state.staticSidebarVisible = true;
+				} else if (menuMode === 'expandable') {
+					this.layoutService.state.staticSidebarVisible = false;
+				}
+				
+				// Always close mobile menu on mode change
+				this.layoutService.state.staticMenuMobileActive = false;
+				
+			}
+		});
+	}
+}

package/boot/host/src/bootstrap.ts

@@ -0,0 +1,87 @@
+import { HttpClient, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+	RouteReuseStrategy,
+	Router,
+	Routes,
+	provideRouter,
+	withComponentInputBinding,
+	withHashLocation,
+	withRouterConfig,
+	withViewTransitions
+} from '@angular/router';
+
+import { ConfirmationService, MessageService } from 'primeng/api';
+
+import { KeycloakAngularModule, KeycloakBearerInterceptor, KeycloakService } from 'keycloak-angular';
+
+import { loadApiConfigs, loadInitData } from 'aril/boot/config/api';
+import { Apps, ArilReuseStrategy, MicroAppService } from 'aril/boot/config/apps';
+import { loadPlugins } from 'aril/boot/config/plugins';
+import { acceptLanguageInterceptor } from 'aril/http';
+import { i18nFolderName, i18nModule } from 'aril/i18n';
+import { authInterceptor, keycloakAuthInterceptor } from 'aril/keycloak';
+import { provideLocaleId } from 'aril/provider';
+
+import { AppComponent } from './app.component';
+
+export var appName: Apps;
+
+export const boot = (_appName: Apps, routes: Routes) => {
+	appName = _appName;
+	const appConfig: ApplicationConfig = {
+		providers: [
+			provideAnimations(),
+			provideLocaleId(),
+			KeycloakBearerInterceptor,
+			provideHttpClient(withInterceptors([acceptLanguageInterceptor, authInterceptor, keycloakAuthInterceptor])),
+			provideRouter(
+				routes,
+				withComponentInputBinding(),
+				withHashLocation(),
+				withViewTransitions(),
+				withRouterConfig({ onSameUrlNavigation: 'reload' })
+			),
+			{ provide: RouteReuseStrategy, useClass: ArilReuseStrategy },
+			importProvidersFrom(i18nModule, KeycloakAngularModule),
+			MessageService,
+			ConfirmationService,
+			{
+				provide: APP_INITIALIZER,
+				useFactory: (
+					httpClient: HttpClient,
+					keycloak: KeycloakService,
+					router: Router,
+					folderName: typeof i18nFolderName,
+					microAppService: MicroAppService
+				) => {
+					if (router) (globalThis as any).hostRouter = router;
+
+					const runLoadApiConfigs = loadApiConfigs(
+						httpClient,
+						keycloak,
+						folderName as unknown as string,
+						microAppService
+					);
+					const runLoadInitData = loadInitData(httpClient);
+					const runLoadPlugins = loadPlugins();
+					return async () => {
+						await runLoadApiConfigs();
+						await runLoadInitData();
+						runLoadPlugins();
+					};
+				},
+				multi: true,
+				deps: [HttpClient, KeycloakService, Router, i18nFolderName, MicroAppService]
+			},
+			{
+				provide: i18nFolderName,
+				useValue: 'host'
+			}
+		]
+	};
+
+	bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+};

package/boot/index.ts

@@ -0,0 +1 @@
+export const aril_boot = 'ARiL-BOOT';

package/boot/mfe/ng-package.json

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

package/boot/mfe/src/app.component.ts

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, NgZone, inject } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { PrimeNGConfig } from 'primeng/api';
+
+import { ModuleFederationToolsModule, connectRouter } from '@angular-architects/module-federation-tools';
+import { TranslocoService } from '@ngneat/transloco';
+
+import { LanguageCode, TR_TRANSLATIONS } from 'aril/boot/config/translate';
+import { AppLayoutComponent, AppMenuService, MFELayoutComponent } from 'aril/theme/layout';
+
+import { appName, menuItems } from './bootstrap';
+
+@Component({
+	standalone: true,
+	template: `
+		@if (isHostMode) {
+			<mfe-layout></mfe-layout>
+		} @else {
+			<app-layout></app-layout>
+		}
+	`,
+	imports: [ModuleFederationToolsModule, AppLayoutComponent, MFELayoutComponent]
+})
+export class AppComponent {
+	constructor(
+		private readonly router: Router,
+		private readonly translocoService: TranslocoService,
+		private readonly appMenuService: AppMenuService,
+		private readonly primeNgConfig: PrimeNGConfig
+	) {
+		if (!this.isHostMode && !(<any>globalThis).ngZone) {
+			(<any>globalThis).ngZone = inject(NgZone);
+		}
+
+		connectRouter(this.router, true);
+
+		(<any>globalThis).activeMF = appName;
+		const lang: LanguageCode = (localStorage.getItem('lang') as LanguageCode) ?? LanguageCode.TR;
+
+		this.translocoService.setActiveLang(lang);
+
+		this.setLocale(lang);
+
+		if (!this.isHostMode) {
+			this.appMenuService.menuConfig.set({ items: structuredClone(menuItems), prefix: appName });
+		}
+	}
+
+	isHostMode = (<any>globalThis).isHostMode;
+
+	setLocale(lang: LanguageCode) {
+		if (!lang?.length) {
+			console.warn('No language selected');
+			return;
+		}
+
+		if (lang === LanguageCode.TR) {
+			this.primeNgConfig.setTranslation(TR_TRANSLATIONS);
+		}
+	}
+}

package/boot/mfe/src/appComponentLoader.ts

@@ -0,0 +1,4 @@
+export const appComponentLoader = async () => {
+	const { AppComponent } = await import('./app.component');
+	return AppComponent;
+};

package/boot/mfe/src/bootstrap.ts

@@ -0,0 +1,97 @@
+import { HttpClient, provideHttpClient, withInterceptors } from '@angular/common/http';
+import { APP_INITIALIZER, ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
+import { createApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import {
+	RouteReuseStrategy,
+	Routes,
+	provideRouter,
+	withComponentInputBinding,
+	withHashLocation,
+	withRouterConfig,
+	withViewTransitions
+} from '@angular/router';
+
+import { ConfirmationService, MessageService } from 'primeng/api';
+
+import { KeycloakAngularModule, KeycloakBearerInterceptor, KeycloakService } from 'keycloak-angular';
+import { MonacoEditorModule, NGX_MONACO_EDITOR_CONFIG } from 'ngx-monaco-editor-v2';
+
+import { loadApiConfigs, setApiConfigOnMFEMode } from 'aril/boot/config/api';
+import { Apps, ArilReuseStrategy, PluginMenuItem } from 'aril/boot/config/apps';
+import { getNgZone, loadPlugins } from 'aril/boot/config/plugins';
+import { acceptLanguageInterceptor } from 'aril/http';
+import { i18nFolderName, i18nModule } from 'aril/i18n';
+import { authInterceptor, keycloakAuthInterceptor } from 'aril/keycloak';
+import { provideHost, provideLocaleId } from 'aril/provider';
+import { StyleLoaderService } from 'aril/util/loaders';
+
+import { appComponentLoader } from './appComponentLoader';
+import { loadStyles } from './loadStyles';
+import { monacoConfig } from './monaco.config';
+
+export var appName: Apps;
+export var menuItems: PluginMenuItem[] = [];
+
+export const boot = (_appName: Apps, _routes: Routes, _menuItems: PluginMenuItem[]) => {
+	if (customElements.get(`app-${_appName}`)) return;
+
+	appName = _appName;
+	menuItems = _menuItems;
+
+	const appBootConfig: ApplicationConfig = {
+		providers: [
+			provideAnimations(),
+			provideHost(appName),
+			provideLocaleId(),
+			KeycloakBearerInterceptor,
+			provideHttpClient(withInterceptors([acceptLanguageInterceptor, authInterceptor, keycloakAuthInterceptor])),
+			provideRouter(
+				_routes,
+				withComponentInputBinding(),
+				withHashLocation(),
+				withViewTransitions(),
+				withRouterConfig({ onSameUrlNavigation: 'reload' })
+			),
+			{ provide: RouteReuseStrategy, useClass: ArilReuseStrategy },
+			importProvidersFrom(i18nModule, KeycloakAngularModule),
+			getNgZone(),
+			MessageService,
+			ConfirmationService,
+			{
+				provide: APP_INITIALIZER,
+				useFactory: (httpClient: HttpClient, keycloak: KeycloakService, folderName: typeof i18nFolderName) => {
+					const apiFactory = (<any>globalThis).isHostMode ? setApiConfigOnMFEMode : loadApiConfigs;
+					const runApiInit = apiFactory(httpClient, keycloak, folderName as unknown as Apps);
+					const runLoadPlugins = loadPlugins();
+					return async () => {
+						await runApiInit();
+						runLoadPlugins();
+					};
+				},
+				multi: true,
+				deps: [HttpClient, KeycloakService, i18nFolderName]
+			},
+			{
+				provide: APP_INITIALIZER,
+				useFactory: loadStyles,
+				multi: true,
+				deps: [StyleLoaderService, i18nFolderName]
+			},
+			{
+				provide: i18nFolderName,
+				useValue: _appName
+			},
+			importProvidersFrom(MonacoEditorModule.forRoot()),
+			{ provide: NGX_MONACO_EDITOR_CONFIG, useValue: monacoConfig }
+		]
+	};
+
+	createApplication(appBootConfig).then((appRef) => {
+		appComponentLoader().then((AppComponent) => {
+			const app = createCustomElement(AppComponent, { injector: appRef.injector });
+			customElements.define(`app-${appName}`, app);
+		});
+	});
+};

package/boot/mfe/src/loadStyles.ts

@@ -0,0 +1,42 @@
+import { Apps } from 'aril/boot/config/apps';
+import { StyleLoaderService } from 'aril/util/loaders';
+
+export function loadStyles(styleLoaderService: StyleLoaderService, appName: Apps): () => Promise<any> {
+	const styles = [
+		'layout.css',
+		'ui.common.css',
+		'preloading.css',
+		'primeng.min.css',
+		'dx.fluent.saas.light.css',
+		`assets/${appName}/styles/primeflex/primeflex.min.css`,
+		`assets/${appName}/styles/primeicons/primeicons.css`
+	];
+
+	/*switch (appName) {
+		case Apps.HES:
+		case Apps.CTS:
+		case Apps.SIS:
+			styles.push('theme.light.lena.css');
+			break;
+		case Apps.CRM:
+		case Apps.BILLING:
+		case Apps.PAYMENT:
+		case Apps.WDM:
+		case Apps.MNG:
+			styles.push('theme.light.thor.css');
+			break;
+		case Apps.MW:
+			styles.push('theme.light.yeap.css');
+			break;
+		default:
+			styles.push('theme.light.indigo.css');
+
+	}
+	*/
+
+	styles.push('theme.light.custom.css');
+
+	if ((<any>globalThis).isHostMode) return () => Promise.resolve();
+
+	return () => styleLoaderService.load(styles);
+}