@yomotech/view-toolkit 0.0.31 → 0.0.32

package/src/lib/containers/side-menu/side-menu.component.ts

@@ -0,0 +1,458 @@
+import { Platform, PlatformModule } from '@angular/cdk/platform';
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Inject, Input, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { RequestService } from '../../services/request.service';
+import { UtilityService } from '../../services/utility.service';
+import { OKTA_AUTH, OktaAuthStateService } from '@okta/okta-angular';
+import OktaAuth from '@okta/okta-auth-js';
+import { jwtDecode } from 'jwt-decode';
+import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
+import { LogsComponent } from '../logs/logs.component';
+import { NotificationService } from '../../services/notification.service';
+import { Device } from '@capacitor/device';
+import { de_DE, en_US, NzI18nService } from 'ng-zorro-antd/i18n';
+import { MobileKeycloakService } from '../../services/mobile-keycloak.service';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { CommonModule } from '@angular/common';
+import { NzMenuModule } from 'ng-zorro-antd/menu';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTooltipModule } from 'ng-zorro-antd/tooltip';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { Couchdb } from '../../services/couchdb';
+
+
+@Component({
+  standalone: true,
+  selector: 'vl-side-menu',
+  templateUrl: './side-menu.component.html',
+  styleUrl: './side-menu.component.css',
+  imports: [
+    CommonModule,
+    PlatformModule,
+    // NG-ZORRO
+    NzMenuModule,
+    NzIconModule,
+    NzTooltipModule,
+    NzButtonModule,
+    // PrimeNG
+    DynamicDialogModule
+  ]
+})
+export class SideMenuComponent implements AfterViewInit {
+  isCollapsed: boolean = false;
+  isMobile: boolean = false;
+  projectsLayoutSchema: any;
+  loginUser: any = {};
+  isLogined: boolean = false;
+  loginedUserInfo: any = {};
+  menuItemsCopy: any = {};
+  settingMenu: any = {};
+  setLanguage: boolean = false;
+  tenantKey: any = '';
+  tenantName: any = '';
+  @Input() menuItems: any[] = [];
+  @Input() userInfo: any = {};
+  @Input() settings: any = {};
+  @Input() projects: any;
+  @Input() environment: any;
+  @Input() projectSeleted: any;
+  @Output() languageChange: EventEmitter<any> = new EventEmitter();
+  @Output() invokeMenu: EventEmitter<any> = new EventEmitter();
+  @Output() menuToggle: EventEmitter<any> = new EventEmitter();
+  @Output() invokeProject: EventEmitter<any> = new EventEmitter();
+  @Output() errorMessage: EventEmitter<any> = new EventEmitter();
+  @Output() deleteProject: EventEmitter<any> = new EventEmitter();
+
+  PRIME_DE = {
+    firstDayOfWeek: 1,
+    dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    dayNamesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    dayNamesMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    monthNames: [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
+      'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
+    ],
+    monthNamesShort: [
+      'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
+      'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'
+    ],
+    today: 'Heute',
+    clear: 'Löschen',
+    dateFormat: 'yy-mm-dd',
+    weekHeader: 'KW'
+  };
+
+  PRIME_EN = {
+    firstDayOfWeek: 0,
+    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    monthNames: [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December'
+    ],
+    monthNamesShort: [
+      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+    ],
+    today: 'Today',
+    clear: 'Clear',
+    dateFormat: 'yy-mm-dd',
+    weekHeader: 'Wk'
+  };
+
+
+  @ViewChild('sideMenu', { static: true })
+  sideMenu!: ElementRef;
+
+  constructor(
+    private i18n: NzI18nService,
+    private mobileKeycloakService: MobileKeycloakService,
+    private couchdbService: Couchdb,
+    private oauthService: OAuthService,
+    private platform: Platform,
+    private requestService: RequestService,
+    private utilityService: UtilityService,
+    private dialogService: DialogService,
+    private oktaAuthService: OktaAuthStateService,
+    private notificationService: NotificationService,
+    @Inject(OKTA_AUTH) private oktaAuth: OktaAuth) { }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    const path = event.composedPath() as HTMLElement[];
+    const clickedInsideMenu = path.some(
+      el => el === this.sideMenu?.nativeElement
+    );
+    const clickedToggle = path.some(
+      el =>
+        el instanceof HTMLElement &&
+        el.classList?.contains('side-toggle-handle')
+    );
+    if (!clickedInsideMenu && !clickedToggle && this.isMobile) {
+      console.log('OUTSIDE CLICK');
+      let btn = document.getElementById('toggle-id');
+      if (btn && !this.isCollapsed) {
+        btn.click();
+      }
+    }
+  }
+
+  toggleCollapsed(): void {
+    if (this.isMobile) {
+      this.isCollapsed = !this.isCollapsed;
+      const sideMenu = document.querySelector('.side-menu');
+      if (sideMenu) {
+        sideMenu.classList.toggle('open', !this.isCollapsed);
+      }
+    } else {
+      this.isCollapsed = !this.isCollapsed;
+    }
+  }
+
+  async ngOnInit() {
+    if (this.platform.ANDROID || this.platform.IOS) {
+      this.isCollapsed = true;
+      this.isMobile = true;
+      this.tenantKey = await this.utilityService.getLocalStorage('tenantKey');
+      this.tenantName = await this.utilityService.getLocalStorage('tenantName');
+    } else {
+      this.tenantKey = await this.utilityService.getStorage('tenantKey');
+      this.tenantName = await this.utilityService.getStorage('tenantName');
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.setLoginUser();
+    if (changes['menuItems'] && this.menuItems?.length) {
+      this.menuItemsCopy = JSON.parse(JSON.stringify(this.menuItems));
+      this.setProjectSetting();
+      this.setSettingImages();
+    }
+  }
+
+  async setProjectSetting() {
+    const tasks: Promise<void>[] = [];
+    this.menuItems.forEach((menuItem: any) => {
+      if (menuItem?.label?.caption === "Setting" && menuItem?.submenu?.length) {
+        menuItem?.submenu.forEach((subMenu: any) => {
+          if (subMenu?.label?.caption === "Languages" && subMenu?.submenu?.length) {
+            subMenu?.submenu.forEach((childMenu: any) => {
+              tasks.push((async () => {
+                try {
+                  let projectName = `${this.tenantName}_${this.projectSeleted}`
+                  const image = await this.couchdbService.getFileContentFromCouchDb(
+                    projectName,
+                    childMenu.icon
+                  );
+                  childMenu.icon = this.getMediaSrc(image);
+                } catch (err) {
+                  console.error("Failed to fetch icon:", err);
+                }
+              })());
+            })
+          }
+        })
+      }
+    })
+    await Promise.all(tasks);
+  }
+
+  async ngAfterViewInit(): Promise<void> {
+    let mobileLang = await this.getDeviceLanguage()
+    if (mobileLang) {
+      this.changeLanguage(mobileLang + '.json');
+    }
+    setTimeout(async () => {
+      this.initializeProjects();
+      await this.setLoginUser();
+    }, 1000);
+
+  }
+
+  async getDeviceLanguage(): Promise<string> {
+    const info = await Device.getLanguageCode();
+    return info.value; // e.g. 'en', 'ur', 'de'
+  }
+
+  async setLoginUser() {
+    try {
+      if (this.environment?.login?.type === 'oktaAuth') {
+        if (this.platform.ANDROID || this.platform.IOS) {
+          const logined: any = await this.utilityService.getLocalStorage('loginedUser');
+          if (logined?.token) {
+            this.requestService.getLoginUser(logined.token).subscribe({
+              next: (userInfo: any) => {
+                this.loginUser = { ...this.userInfo, ...logined };
+                this.setLoginedUser(this.loginUser);
+              },
+              error: (err) => {
+                console.error('Failed to fetch login user (mobile):', err);
+              }
+            });
+          }
+        } else {
+          this.oktaAuthService.authState$.subscribe({
+            next: async (result) => {
+              if (result.isAuthenticated) {
+                try {
+                  const oktaWebUser = await this.oktaAuth.getUser();
+                  const webLoginedUser = { ...this.userInfo, ...oktaWebUser };
+                  this.loginUser = webLoginedUser;
+                  this.setLoginedUser(this.loginUser);
+                } catch (err) {
+                  console.error('Failed to fetch Okta web user:', err);
+                }
+              }
+            },
+            error: (err) => {
+              console.error('Okta auth state subscription error:', err);
+            }
+          });
+        }
+      } else if (this.environment?.login?.type === 'jwtToken' && this.userInfo?.jwt) {
+        const userInfo = this.getUserInfoFromToken(this.userInfo.jwt);
+        this.loginUser = userInfo;
+        this.setLoginedUser(this.loginUser);
+      } else if (this.environment?.login?.type === 'keycloak' && this.userInfo?.name) {
+        this.loginUser = this.userInfo;
+        this.setLoginedUser(this.loginUser);
+      }
+    } catch (error) {
+      console.error('Error in setLoginUser:', error);
+    }
+  }
+
+
+
+  getUserInfoFromToken(token: string) {
+    try {
+      const decoded: any = jwtDecode(token);
+
+      return {
+        sub: decoded.sub,
+        name: decoded.name || 'User is undefined',
+        role: decoded.role || 'Role is undefined',
+        email: decoded.email || decoded.sub,
+        iat: decoded.iat,
+        exp: decoded.exp
+      };
+    } catch (err) {
+      return null;
+    }
+  }
+
+  async setSettingImages() {
+    if (this.settings && this.settings.length > 0) {
+
+
+      const tasks: Promise<void>[] = [];
+      console.log('this.settings: ', this.settings);
+
+      for (const menu of this.settings?.submenu) {
+        if (menu?.submenu?.length) {
+          for (const childMenu of menu.submenu) {
+            if (childMenu.options && childMenu.options.setImageUrl) {
+              tasks.push((async () => {
+                try {
+                  let projectName = `${this.tenantName}_${this.projectSeleted}`
+                  const image = await this.couchdbService.getFileContentFromCouchDb(
+                    projectName,
+                    childMenu.icon
+                  );
+                  childMenu.icon = this.getMediaSrc(image);
+                } catch (err) {
+                  console.error("Failed to fetch icon:", err);
+                }
+              })());
+            }
+          }
+        }
+      }
+      await Promise.all(tasks);
+    }
+    this.settingMenu = JSON.parse(JSON.stringify(this.settings));
+  }
+
+  getMediaSrc(file: any): string {
+    if (!file) return '';
+
+    // Best case: service already returns full data URL
+    if (file.src) {
+      return file.src;
+    }
+
+    // If service returns raw base64 + mimeType
+    if (file.base64) {
+      const mimeType = file.mimeType || 'image/png';
+      return `data:${mimeType};base64,${file.base64}`;
+    }
+
+    // If service returns old dataUrl format
+    if (file.dataUrl) {
+      return file.dataUrl;
+    }
+
+    return '';
+  }
+
+  isUrl(value: string): boolean {
+    return /^https?:\/\//.test(value) || value.startsWith('blob:');
+  }
+
+  async setLoginedUser(user: any) {
+    if (user?.name) {
+      user['image'] = "assets/user.png";
+      this.loginedUserInfo = user;
+      let matchMenu = this.menuItems.find((menu: any) => menu?.options?.action && menu?.options?.action === "logout");
+      if (matchMenu) {
+        this.loginedUserInfo.actions = [matchMenu]
+      }
+      this.isLogined = this.loginedUserInfo?.name ? true : false;
+    }
+  }
+
+  initializeProjects() {
+    this.projectsLayoutSchema = this.projects;
+  }
+
+  async invokeNavigate(menu: any, parentMenu?: any) {
+    if (menu.options.showAllProjects) {
+      this.utilityService.showAllProjects();
+    } else if (menu.options.changeLang) {
+      this.changeLanguage(menu.options.data_url);
+    } else if (menu.options.changeProject) {
+      this.navigateToProject(menu);
+    } else if (menu.options.logs) {
+      this.openLogsTable();
+    } else if (menu.options.terms) {
+      this.notificationService.info("Term Not Apply")
+    } else if (menu.options.projectPrivacy) {
+      this.notificationService.warning("Project Privacy Not Apply")
+    } else if (menu.options.projectVersion) {
+      this.notificationService.warning("Project Version Not Apply")
+    } else if (menu.options.action == 'login' && this.environment?.login?.type == "keycloak") {
+      if (this.platform.ANDROID || this.platform.IOS) {
+        let login = await this.mobileKeycloakService.login();
+      } else {
+        this.oauthService.initLoginFlow();
+      }
+    } else {
+      this.toggleCollapsed();
+      this.invokeMenu.emit(menu);
+    }
+  }
+
+  openLogsTable() {
+    let logsModal = this.dialogService.open(LogsComponent, {
+      width: '700px',
+      data: {}
+    });
+
+    // logsModal.onClose.subscribe((res: any) => {
+    //   if (res) {
+    //     console.log('res789: ', res);
+    //   }
+    // });
+  }
+
+  deleteMenuItem(subChild: any, index: any, event: any) {
+    event.stopPropagation();
+    this.settings.submenu[1].submenu.splice(index, 1);
+    this.deleteProject.emit(subChild);
+  }
+
+  navigateToProject(project: any) {
+    this.invokeProject.emit(project);
+  }
+
+  async changeLanguage(lang: any) {
+    if (lang) {
+      if (lang === 'de.json') {
+        // NG-Zorro
+        this.i18n.setLocale(de_DE);
+        // PrimeNG 🔥
+        // this.primengConfig.setTranslation(this.PRIME_DE);
+      } else {
+        this.i18n.setLocale(en_US);
+        // this.primengConfig.setTranslation(this.PRIME_EN);
+      }
+      const selectedLanguage = await this.couchdbService.getFileContentFromCouchDb(
+        `${this.tenantName}_${this.projectSeleted}`,
+        `languages/${lang}`
+      );
+      const errorMessages = await this.couchdbService.getFileContentFromCouchDb(
+        `${this.tenantName}_${this.projectSeleted}`,
+        `languages/errorMessage_${lang}`
+      );
+      this.languageChange.emit({ selectedLanguage: selectedLanguage, errorMessages: errorMessages });
+      this.setLanguage = true;
+      this.menuItemsCopy.forEach((menu: any, index: any) => {
+        if (menu.label && menu.label.caption && selectedLanguage[menu.label.caption]) {
+          this.menuItems[index].label.caption = selectedLanguage[menu.label.caption]
+        }
+        if (menu?.submenu?.length) {
+          menu?.submenu.forEach((subMenuInfo: any, subIndex: any) => {
+            if (subMenuInfo.label && subMenuInfo.label.caption && selectedLanguage[subMenuInfo.label.caption]) {
+              this.menuItems[index].submenu[subIndex].label.caption = selectedLanguage[subMenuInfo.label.caption];
+            }
+            if (subMenuInfo?.submenu?.length) {
+              subMenuInfo.submenu.forEach((childMenu: any, childIndex: any) => {
+                if (childMenu.label && childMenu.label.caption && selectedLanguage[childMenu.label.caption]) {
+                  this.menuItems[index].submenu[subIndex].submenu[childIndex].label.caption = selectedLanguage[childMenu.label.caption];
+                }
+              });
+            }
+          });
+        }
+      })
+      if (this.settingMenu?.label?.caption) {
+        this.settingMenu.label.caption = selectedLanguage[this.settings.label.caption]
+      }
+      this.settings?.submenu?.forEach((menu: any, index: any) => {
+        if (menu.label && menu.label.caption && selectedLanguage[menu.label.caption] && this.settingMenu?.submenu[index] && this.settingMenu.submenu[index]?.label) {
+          this.settingMenu.submenu[index].label.caption = selectedLanguage[menu.label.caption];
+        }
+      });
+    }
+  }
+}

package/src/lib/services/app-version-reset.service.ts

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { Preferences } from '@capacitor/preferences';
+import { APP_VERSION } from '../app-version';
+import { Platform } from '@angular/cdk/platform';
+
+const VERSION_KEY = 'APP_VERSION';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppVersionResetService {
+
+  constructor(
+    private platform: Platform) {
+  }
+
+
+  async run(): Promise<void> {
+    if (this.platform.ANDROID || this.platform.IOS) {
+      await this.clearNativeIfChanged();
+      // this.clearWebIfChanged();
+      // return;
+    }
+  }
+
+  private async clearNativeIfChanged(): Promise<void> {
+    const { value: savedVersion } = await Preferences.get({ key: VERSION_KEY });
+    if (savedVersion === APP_VERSION) return;
+    console.log(`🧹 Clearing Capacitor Preferences (new build ${APP_VERSION})`);
+    await Preferences.clear();
+    this.clearWebStores();
+    await Preferences.set({ key: VERSION_KEY, value: APP_VERSION });
+  }
+
+  // private clearWebIfChanged(): void {
+  //   const savedVersion = sessionStorage.getItem(VERSION_KEY) || localStorage.getItem(VERSION_KEY);
+  //   if (savedVersion === APP_VERSION) return;
+  //   this.clearWebStores();
+  //   localStorage.setItem(VERSION_KEY, APP_VERSION);
+  //   sessionStorage.setItem(VERSION_KEY, APP_VERSION);
+  // }
+
+  private clearWebStores(): void {
+    try { localStorage.clear(); } catch { }
+    try { sessionStorage.clear(); } catch { }
+    try {
+      if (typeof document !== 'undefined' && document.cookie) {
+        document.cookie.split(';').forEach((c) => {
+          const eqPos = c.indexOf('=');
+          const name = eqPos > -1 ? c.substring(0, eqPos).trim() : c.trim();
+          if (name) {
+            document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
+          }
+        });
+      }
+    } catch { }
+  }
+}

package/src/lib/services/config.service.ts

@@ -0,0 +1,144 @@
+import { Injectable } from '@angular/core';
+import { UtilityService } from './utility.service';
+import { Platform } from '@angular/cdk/platform';
+import { Couchdb } from './couchdb';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfigService {
+  private config: any;
+  private skipOkta = false;
+  private keycloakConfig: any;
+
+  constructor(private couchdbService: Couchdb, private utilityService: UtilityService, private platform: Platform) { }
+
+  async loadOktaConfig(projectName: string): Promise<void> {
+    try {
+      let tenantKey: any = "";
+      let tenantName: any = "";
+      if (this.platform.ANDROID || this.platform.IOS) {
+        tenantKey = await this.utilityService.getLocalStorage('tenantKey');
+        tenantName = await this.utilityService.getLocalStorage('tenantName');
+      } else {
+        tenantKey = await this.utilityService.getStorage('tenantKey');
+        tenantName = await this.utilityService.getStorage('tenantName');
+      }
+      if (tenantName) {
+        this.config = await this.couchdbService.getFileContentFromCouchDb(
+          `${tenantName}_${projectName}`,
+          'environments/environment.json'
+        );
+      } else {
+        this.config = await this.couchdbService.getFileContentFromCouchDb(
+          `${projectName}`,
+          'environments/environment.json'
+        );
+      }
+
+      if (this.platform.ANDROID || this.platform.IOS) {
+        if (this.config.environment.login.mobile) {
+          this.setConfiguration(this.config.environment.login.mobile);
+        } else {
+          this.setConfiguration(null);
+        }
+      } else {
+        if (this.config.environment.login.web) {
+          this.setConfiguration(this.config.environment.login.web);
+        } else {
+          this.setConfiguration(null);
+        }
+      }
+
+    } catch (err) {
+      console.error('Error loading config:', err);
+    }
+  }
+
+  setConfiguration(config: any) {
+    if (config) {
+      this.config = config;
+    } else {
+      this.config = {
+        issuer: 'http://dummy',
+        clientId: 'dummy',
+        redirectUri: 'http://dummy',
+        pkce: true,
+      };
+    }
+  }
+
+  skipOktaConfig() {
+    this.skipOkta = true;
+  }
+
+  get oktaConfig() {
+    if (this.skipOkta) {
+      return null;
+    }
+    return this.config;
+  }
+
+  async loadKeycloakConfig(projectName: string): Promise<void> {
+    let tenantKey: any = "";
+    let tenantName: any = "";
+    if (this.platform.ANDROID || this.platform.IOS) {
+      tenantKey = await this.utilityService.getLocalStorage('tenantKey');
+      tenantName = await this.utilityService.getLocalStorage('tenantName');
+    } else {
+      tenantKey = await this.utilityService.getStorage('tenantKey');
+      tenantName = await this.utilityService.getStorage('tenantName');
+    }
+    let env: any = {};
+    if (tenantName) {
+      env = await this.couchdbService.getFileContentFromCouchDb(
+        `${tenantName}_${projectName}`,
+        'environments/environment.json'
+      );
+    } else {
+      env = await this.couchdbService.getFileContentFromCouchDb(
+        `${projectName}`,
+        'environments/environment.json'
+      );
+    }
+    if (env?.environment?.login.type === "keycloak") {
+      if (this.platform.ANDROID || this.platform.IOS) {
+        this.keycloakConfig = {
+          issuer: "https://keycloak-poc.wilken.de/realms/p5",
+          clientId: "mobile",
+          redirectUri: "de.yomotech:/login/callback",
+          logoutRedirectUri: "de.yomotech:/login/callback",
+          scope: "openid profile email",
+          responseType: "code"
+        }
+      } else {
+        this.keycloakConfig = {
+          issuer: env?.environment?.login?.web?.issuer ?? 'http://dummy',
+          clientId: env?.environment?.login?.web?.clientId ?? 'dummy',
+          redirectUri: window.location.origin,
+          responseType: 'code',
+          scope: 'openid profile email',
+          showDebugInformation: true
+        };
+      }
+    } else {
+      this.keycloakConfig = {};
+    }
+  }
+
+  getKeycloakConfig() {
+    return this.keycloakConfig;
+  }
+
+  getKeycloakMobileConfig() {
+    if (!this.keycloakConfig) return null;
+    return {
+      issuer: this.keycloakConfig?.issuer,
+      clientId: this.keycloakConfig?.clientId,
+      redirectUri: this.keycloakConfig.redirectUri,
+      logoutRedirectUri: this.keycloakConfig.logoutRedirectUri,
+      scope: this.keycloakConfig.scope,
+      responseType: this.keycloakConfig.responseType
+    };
+  }
+}