spiderly 0.0.8 → 19.0.1

package/src/lib/services/app-layout-base.service.ts

@@ -0,0 +1,184 @@
+import { AuthBaseService } from './auth-base.service';
+import { ApiSecurityService } from './api.service.security';
+import { Injectable, OnDestroy } from '@angular/core';
+import { BehaviorSubject, combineLatest, delay, lastValueFrom, map, Observable, of, Subject, Subscription, withLatestFrom } from 'rxjs';
+import { InitTopBarData } from '../entities/init-top-bar-data';
+import { ConfigBaseService } from './config-base.service';
+import { PrimengOption } from '../entities/primeng-option';
+import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
+
+export interface AppConfig {
+    inputStyle: string;
+    colorScheme: string; 
+    theme: string;
+    ripple: boolean;
+    menuMode: string;
+    scale: number;
+    color: string;
+}
+
+interface LayoutState {
+    staticMenuDesktopInactive: boolean;
+    overlayMenuActive: boolean;
+    profileSidebarVisible: boolean;
+    profileDropdownSidebarVisible:boolean;
+    configSidebarVisible: boolean;
+    staticMenuMobileActive: boolean;
+    menuHoverActive: boolean;
+}
+
+@Injectable({
+    providedIn: 'root',
+})
+export class LayoutBaseService implements OnDestroy {
+    userSubscription: Subscription;
+
+    protected _unreadNotificationsNumber = new BehaviorSubject<number | null>(null);
+    unreadNotificationsCount$ = this._unreadNotificationsNumber.asObservable();
+
+    layoutConfig: AppConfig = {
+        ripple: false,
+        inputStyle: 'outlined',
+        menuMode: 'static',
+        colorScheme: 'light',
+        theme: 'lara-light-indigo',
+        scale: 14,
+        color: `var(--p-primary-color)`,
+    };
+
+    state: LayoutState = {
+        staticMenuDesktopInactive: false,
+        overlayMenuActive: false,
+        profileSidebarVisible: false,
+        profileDropdownSidebarVisible: false,
+        configSidebarVisible: false,
+        staticMenuMobileActive: false,
+        menuHoverActive: false
+    };
+
+    private configUpdate = new Subject<AppConfig>();
+
+    private overlayOpen = new Subject<any>();
+
+    configUpdate$ = this.configUpdate.asObservable();
+
+    overlayOpen$ = this.overlayOpen.asObservable();
+
+    constructor(
+        protected apiService: ApiSecurityService,
+        protected config: ConfigBaseService,
+        protected authService: AuthBaseService
+    ) {
+    }
+
+    initUnreadNotificationsCountForCurrentUser = () => {
+        this.initUnreadNotificationsCountForCurrentUserObservable().pipe(
+            delay(1), // HACK: Adding delay so both additionalObservable and user emits single null value when logout
+            withLatestFrom(this.authService.user$) // Triggers when unread notifications change
+        ).subscribe(([additionalObservable, user]) => {
+            if (user != null && additionalObservable !== undefined) {
+                this.setUnreadNotificationsCountForCurrentUser().subscribe();
+            }
+        });
+    }
+
+    initUnreadNotificationsCountForCurrentUserObservable = (): Observable<any> => {
+        return this.authService.user$;
+    }
+
+    setUnreadNotificationsCountForCurrentUser = (): Observable<any> => {
+        return this.apiService.getUnreadNotificationsCountForCurrentUser().pipe(
+            map((unreadNotificationsCount) => {
+                this._unreadNotificationsNumber.next(unreadNotificationsCount);
+            })
+        );
+    }
+
+    onMenuToggle() {
+        if (this.isOverlay()) {
+            this.state.overlayMenuActive = !this.state.overlayMenuActive;
+            if (this.state.overlayMenuActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+
+        if (this.isDesktop()) {
+            this.state.staticMenuDesktopInactive = !this.state.staticMenuDesktopInactive;
+        }
+        else {
+            this.state.staticMenuMobileActive = !this.state.staticMenuMobileActive;
+
+            if (this.state.staticMenuMobileActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+    }
+
+    showProfileSidebar() {
+        this.state.profileSidebarVisible = !this.state.profileSidebarVisible;
+        if (this.state.profileSidebarVisible) {
+            this.overlayOpen.next(null);
+        }
+    }
+
+    showProfileDropdownSidebar() {
+        this.state.profileDropdownSidebarVisible = !this.state.profileDropdownSidebarVisible;
+        if (this.state.profileDropdownSidebarVisible) {
+            this.overlayOpen.next(null);
+        }
+    }
+
+    showConfigSidebar() {
+        this.state.configSidebarVisible = true;
+    }
+
+    isOverlay() {
+        return this.layoutConfig.menuMode === 'overlay';
+    }
+
+    isDesktop() {
+        return window.innerWidth > 991;
+    }
+
+    isMobile() {
+        return !this.isDesktop();
+    }
+
+    onConfigUpdate() {
+        this.configUpdate.next(this.layoutConfig);
+    }
+    
+    //#region Top Bar
+
+    initTopBarData = (): Observable<InitTopBarData> => {
+        return combineLatest([this.authService.user$, this.unreadNotificationsCount$]).pipe(
+            map(([currentUser, unreadNotificationsCount]) => {
+                return new InitTopBarData({
+                    companyName: this.config.companyName,
+                    userProfilePath: `/administration/users/${currentUser?.id}`,
+                    unreadNotificationsCount: unreadNotificationsCount,
+                    showProfileIcon: true,
+                    currentUser: currentUser,
+                });
+            })
+        );
+    }
+
+    //#endregion
+
+    //#region Side Bar
+
+    searchPartners = (event: AutoCompleteCompleteEvent): Observable<PrimengOption[]> => {
+        return of();
+    }
+
+    partnersAutocompleteButtonClick = (selectedPartner: PrimengOption) => {}
+
+    //#endregion
+
+    ngOnDestroy(): void {
+        if (this.userSubscription) {
+            this.userSubscription.unsubscribe();
+        }
+    }
+}

package/src/lib/services/auth-base.service.ts

@@ -0,0 +1,271 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable, of, Subject, Subscription } from 'rxjs';
+import { map, tap, delay, finalize } from 'rxjs/operators';
+import { SocialUser, SocialAuthService } from '@abacritt/angularx-social-login';
+import { ExternalProvider, Login, VerificationTokenRequest, AuthResult, Registration, RegistrationVerificationResult, RefreshTokenRequest, User } from '../entities/security-entities';
+import { ConfigBaseService } from './config-base.service';
+import { ApiSecurityService } from './api.service.security';
+import { InitCompanyAuthDialogDetails } from '../entities/init-company-auth-dialog-details';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthBaseService implements OnDestroy {
+  private readonly apiUrl = this.config.apiUrl;
+  private timer?: Subscription;
+
+  protected _currentUserPermissionCodes = new BehaviorSubject<string[] | null>(undefined);
+  currentUserPermissionCodes$ = this._currentUserPermissionCodes.asObservable();
+
+  protected _user = new BehaviorSubject<User | null>(undefined);
+  user$ = this._user.asObservable();
+
+  // Google auth
+  private authChangeSub = new Subject<boolean>();
+  private extAuthChangeSub = new Subject<SocialUser>();
+  public authChanged = this.authChangeSub.asObservable();
+  public extAuthChanged = this.extAuthChangeSub.asObservable();
+  
+  constructor(
+    protected router: Router,
+    protected http: HttpClient,
+    protected externalAuthService: SocialAuthService,
+    protected apiService: ApiSecurityService,
+    protected config: ConfigBaseService,
+  ) {
+    window.addEventListener('storage', this.storageEventListener);
+
+    // Google auth
+    this.externalAuthService.authState.subscribe((user) => {
+      const externalAuth: ExternalProvider = {
+        // provider: user.provider,
+        idToken: user.idToken
+      }
+      this.loginExternal(externalAuth).subscribe(() => {
+        this.navigateToDashboard();
+      });
+      this.extAuthChangeSub.next(user);
+    });
+  }
+
+  private storageEventListener = (event: StorageEvent) => {
+    if (event.storageArea === localStorage) {
+      if (event.key === 'logout-event') {
+        this.stopTokenTimer();
+        this._user.next(null);
+
+        this._currentUserPermissionCodes.next(null);
+      }
+      if (event.key === 'login-event') {
+        this.stopTokenTimer();
+
+        this.apiService.getCurrentUser().subscribe((user: User) => {
+            this._user.next({
+              id: user.id,
+              email: user.email
+            });
+
+            this.setCurrentUserPermissionCodes().subscribe();
+          });
+      }
+    }
+  }
+
+  sendLoginVerificationEmail(body: Login): Observable<any> {
+    const browserId = this.getBrowserId();
+    body.browserId = browserId;
+    return this.apiService.sendLoginVerificationEmail(body);
+  }
+
+  login(body: VerificationTokenRequest): Observable<Promise<AuthResult>> {
+    const browserId = this.getBrowserId();
+    body.browserId = browserId;
+    const loginResultObservable = this.http.post<AuthResult>(`${this.apiUrl}/Security/Login`, body);
+    return this.handleLoginResult(loginResultObservable);
+  }
+
+  loginExternal(body: ExternalProvider): Observable<Promise<AuthResult>> {
+    const browserId = this.getBrowserId();
+    body.browserId = browserId;
+    const loginResultObservable = this.http.post<AuthResult>(`${this.apiUrl}/Security/LoginExternal`, body);
+    return this.handleLoginResult(loginResultObservable);
+  }
+
+  sendRegistrationVerificationEmail(body: Registration): Observable<RegistrationVerificationResult> {
+    const browserId = this.getBrowserId();
+    body.browserId = browserId;
+    return this.apiService.sendRegistrationVerificationEmail(body);
+  }
+  
+  register(body: VerificationTokenRequest): Observable<Promise<AuthResult>> {
+    const browserId = this.getBrowserId();
+    body.browserId = browserId;
+    const loginResultObservable = this.apiService.register(body);
+    return this.handleLoginResult(loginResultObservable);
+  }
+
+  handleLoginResult(loginResultObservable: Observable<AuthResult>){
+    return loginResultObservable.pipe(
+      map(async (loginResult: AuthResult) => {
+        this.setLocalStorage(loginResult);
+        this._user.next({
+          id: loginResult.userId,
+          email: loginResult.email,
+        });
+        this.startTokenTimer();
+        this.setCurrentUserPermissionCodes().subscribe()
+        return loginResult;
+      })
+    );
+  }
+
+  logout() {
+    const browserId = this.getBrowserId();
+    this.http
+      .get(`${this.apiUrl}/Security/Logout?browserId=${browserId}`)
+      .pipe(
+        finalize(() => {
+          this.clearLocalStorage();
+          this._user.next(null);
+          this.onAfterLogout();
+          this.stopTokenTimer();
+          this.router.navigate([this.config.loginSlug]);
+        })
+      )
+      .subscribe();
+  }
+
+  onAfterLogout = () => {
+    this._currentUserPermissionCodes.next(null);
+  }
+
+  refreshToken(): Observable<AuthResult> {
+    let refreshToken = localStorage.getItem(this.config.refreshTokenKey);
+
+    if (!refreshToken) {
+      this.clearLocalStorage();
+      return of(null);
+    }
+
+    const browserId = this.getBrowserId();
+    let body: RefreshTokenRequest = new RefreshTokenRequest();
+    body.browserId = browserId;
+    body.refreshToken = refreshToken;
+    
+    return this.http
+      .post<AuthResult>(`${this.apiUrl}/Security/RefreshToken`, body, this.config.httpSkipSpinnerOptions)
+      .pipe(
+        map((loginResult) => {
+          this._user.next({
+            id: loginResult.userId,
+            email: loginResult.email
+          });
+          
+          this.setLocalStorage(loginResult);
+          this.startTokenTimer();
+          this.onAfterRefreshToken();
+          
+          return loginResult;
+        })
+      );
+  }
+
+  onAfterRefreshToken = () => {
+    this.setCurrentUserPermissionCodes().subscribe(); // FT: Needs to be after setting local storage
+  }
+
+  setLocalStorage(loginResult: AuthResult) {
+    localStorage.setItem(this.config.accessTokenKey, loginResult.accessToken);
+    localStorage.setItem(this.config.refreshTokenKey, loginResult.refreshToken);
+    localStorage.setItem('login-event', 'login' + Math.random());
+  }
+
+  clearLocalStorage() {
+    localStorage.removeItem(this.config.accessTokenKey);
+    localStorage.removeItem(this.config.refreshTokenKey);
+    localStorage.setItem('logout-event', 'logout' + Math.random());
+  }
+
+  getBrowserId(): string {
+    let browserId = localStorage.getItem(this.config.browserIdKey); // FT: We don't need to remove this from the local storage ever, only if the user manuely deletes it, we will handle it
+    if (!browserId) {
+      browserId = crypto.randomUUID();
+      localStorage.setItem(this.config.browserIdKey, browserId);
+    }
+    return browserId;
+  }
+
+  isAccessTokenExpired(): Observable<boolean> {
+    const expired = this.getTokenRemainingTime() < 5000;
+    
+    return of(expired);
+  }
+
+  getTokenRemainingTime(): number {
+    const accessToken = this.getAccessToken();
+
+    if (!accessToken) {
+      return 0;
+    }
+
+    const jwtToken = JSON.parse(atob(accessToken.split('.')[1]));
+    const expires = new Date(jwtToken.exp * 1000);
+    
+    return expires.getTime() - Date.now();
+  }
+
+  getAccessToken(): string {
+    return localStorage.getItem(this.config.accessTokenKey);
+  }
+
+  private startTokenTimer() {
+    const timeout = this.getTokenRemainingTime();
+    this.timer = of(true)
+      .pipe(
+        delay(timeout),
+        tap({
+          next: () => this.refreshToken().subscribe(),
+        })
+      )
+      .subscribe();
+  }
+
+  private stopTokenTimer() {
+    this.timer?.unsubscribe();
+  }
+
+  navigateToDashboard(){
+    this.router.navigate(['/']);
+  }
+
+  logoutGoogle = () => {
+    this.externalAuthService.signOut();
+  }
+
+  initCompanyAuthDialogDetails = (): Observable<InitCompanyAuthDialogDetails> => {
+    return of(
+      new InitCompanyAuthDialogDetails ({
+        image: `assets/images/logo/logo.svg`, 
+        companyName: this.config.companyName,
+      })
+    );
+  }
+
+  setCurrentUserPermissionCodes(): Observable<string[]> {
+    return this.apiService.getCurrentUserPermissionCodes().pipe(
+      map(permissionCodes => {
+        this._currentUserPermissionCodes.next(permissionCodes);
+        return permissionCodes;
+      }
+    ));
+  }
+
+  ngOnDestroy(): void {
+    window.removeEventListener('storage', this.storageEventListener.bind(this));
+    this.onAfterNgOnDestroy();
+  }
+
+  onAfterNgOnDestroy = () => {};
+}

package/src/lib/services/base-form.service.ts

@@ -0,0 +1,178 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { Injectable } from '@angular/core';
+import { SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup } from '../components/spiderly-form-control/spiderly-form-control';
+import { BaseEntity } from '../entities/base-entity';
+import { TranslateLabelsAbstractService } from './translate-labels-abstract.service';
+import { ValidatorAbstractService } from './validator-abstract.service';
+import { SpiderlyMessageService } from './spiderly-message.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BaseFormService {
+  constructor(
+    private translateLabelsService: TranslateLabelsAbstractService,
+    private validatorService: ValidatorAbstractService,
+    private messageService: SpiderlyMessageService,
+    private translocoService: TranslocoService
+  ) {}
+
+  addFormGroup = <T>(
+    formGroup: SpiderlyFormGroup<T>, 
+    parentFormGroup: SpiderlyFormGroup, 
+    modelConstructor: any, 
+    propertyNameInSaveBody: string,
+    updateOnChangeControls?: (keyof T)[]
+  ) => {
+    if (modelConstructor == null)
+      return null;
+
+    if (formGroup == null)
+      console.error('FT: You need to instantiate the form group.')
+
+    this.initFormGroup(formGroup, modelConstructor, updateOnChangeControls);
+    parentFormGroup.setControl(propertyNameInSaveBody, formGroup); // FT: Use setControl because it will update formGroup if it already exists
+
+    return formGroup;
+  }
+
+  initFormGroup = <T>(
+    formGroup: SpiderlyFormGroup<T>, 
+    modelConstructor: T & BaseEntity, 
+    updateOnChangeControls?: (keyof T)[]
+  ) => {
+    if (formGroup == null)
+      console.error('FT: You need to instantiate the form group.')
+
+    Object.keys(modelConstructor).forEach((formControlName) => {
+      let formControl: SpiderlyFormControl;
+      
+      const formControlValue = modelConstructor[formControlName];
+      
+      if (updateOnChangeControls?.includes(formControlName as keyof T) ||
+        (formControlName.endsWith('Id') && formControlName.length > 2)
+      ){
+        formControl = new SpiderlyFormControl(formControlValue, { updateOn: 'change' });
+      }
+      else{
+        formControl = new SpiderlyFormControl(formControlValue, { updateOn: 'blur' });
+      }
+
+      formControl.label = formControlName;
+      formControl.labelForDisplay = this.getTranslatedLabel(formControlName);
+
+      formGroup.setControl(formControlName, formControl); // FT: Use setControl because it will update formControl if it already exists
+
+      this.validatorService.setValidator(formControl, modelConstructor.typeName);
+    });
+
+    return formGroup;
+  }
+
+  getTranslatedLabel(formControlName: string): string {
+    if (formControlName.endsWith('Id') && formControlName.length > 2) {
+      formControlName = formControlName.substring(0, formControlName.length - 2);
+    } 
+    else if (formControlName.endsWith('DisplayName')) {
+      formControlName = formControlName.replace('DisplayName', '');
+    } 
+
+    return this.translateLabelsService.translate(formControlName);
+  }
+
+  getFormArrayGroups<T>(formArray: SpiderlyFormArray<T>): SpiderlyFormGroup<T>[]{
+    return formArray.controls as SpiderlyFormGroup<T>[]
+  }
+
+  addNewFormGroupToFormArray<T>(
+    formArray: SpiderlyFormArray<T>, 
+    modelConstructor: T & BaseEntity,
+    index: number,
+  ) : SpiderlyFormGroup {
+    let helperFormGroup = new SpiderlyFormGroup({});
+    this.initFormGroup(helperFormGroup, modelConstructor);
+    
+    if (index == null) {
+      formArray.push(helperFormGroup);
+    }else{
+      formArray.insert(index, helperFormGroup);
+    }
+
+    return helperFormGroup;
+  }
+
+  initFormArray<T>(
+    parentFormGroup: SpiderlyFormGroup, 
+    modelList: (T & BaseEntity)[], 
+    modelConstructor: T & BaseEntity, 
+    formArraySaveBodyName: string, 
+    formArrayTranslationKey: string, 
+    required: boolean = false)
+  {
+    if (modelList == null)
+      return null;
+
+    let formArray = new SpiderlyFormArray<T>([]);
+    formArray.required = required;
+    formArray.modelConstructor = modelConstructor;
+    formArray.translationKey = formArrayTranslationKey;
+
+    modelList.forEach(model => {
+      Object.assign(modelConstructor, model);
+      let helperFormGroup: SpiderlyFormGroup = new SpiderlyFormGroup({});
+      this.initFormGroup(helperFormGroup, formArray.modelConstructor);
+      formArray.push(helperFormGroup);
+    });
+
+    parentFormGroup.setControl(formArraySaveBodyName, formArray); // FT: Use setControl because it will update formArray if it already exists
+
+    return formArray;
+  }
+
+  disableAllFormControls<T>(formArray: SpiderlyFormArray<T>){
+    formArray.controls.forEach((segmentationItemFormGroup: SpiderlyFormGroup) => {
+        Object.keys(segmentationItemFormGroup.controls).forEach(key => {
+            segmentationItemFormGroup.controls[key].disable();
+        });
+    });
+  }
+
+  enableAllFormControls<T>(formArray: SpiderlyFormArray<T>){
+    formArray.controls.forEach((segmentationItemFormGroup: SpiderlyFormGroup) => {
+        Object.keys(segmentationItemFormGroup.controls).forEach(key => {
+            segmentationItemFormGroup.controls[key].enable();
+        });
+    });
+  }
+
+  //#region Helpers
+
+  // FT: If you want to call single method
+  checkFormGroupValidity = <T>(formGroup: SpiderlyFormGroup<T>): boolean => {
+    if (formGroup.invalid) {
+      Object.keys(formGroup.controls).forEach(key => {
+        formGroup.controls[key].markAsDirty(); // this.formGroup.markAsDirty(); // FT: For some reason this doesnt work
+      });
+
+      this.showInvalidFieldsMessage();
+
+      return false;
+    }
+    
+    return true;
+  }
+
+  showInvalidFieldsMessage = () => {
+    this.messageService.warningMessage(
+      this.translocoService.translate('YouHaveSomeInvalidFieldsDescription'),
+      this.translocoService.translate('YouHaveSomeInvalidFieldsTitle'), 
+    );
+  }
+
+  generateNewNegativeId<T extends BaseEntity>(formArray: SpiderlyFormArray<T>){
+    return -formArray.getRawValue().filter(x => x.id < 0).length - 1;
+  }
+
+  //#endregion
+
+}

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

@@ -0,0 +1,36 @@
+import { HttpHeaders, HttpParams } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ConfigBaseService
+{
+    production = false;
+    apiUrl: string;
+    frontendUrl = 'http://localhost:4200';
+    GoogleClientId: string;
+    companyName = 'Company Name';
+    primaryColor = '#111b2c';
+    
+    googleAuth = true;
+    usersCanRegister = true;
+
+    /* URLs */
+    loginSlug = 'login';
+
+    /* Local storage */
+    accessTokenKey = 'access_token';
+    refreshTokenKey = 'refresh_token';
+    browserIdKey = 'browser_id';
+
+    httpOptions = {};
+    httpSkipSpinnerOptions = {
+        headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+        params: new HttpParams().set('X-Skip-Spinner', 'true')
+    };
+
+    constructor(
+    ) {
+    }
+}