ngx-techlify-core 11.5.0 → 11.5.2

package/src/lib/core/http.service.ts

@@ -0,0 +1,137 @@
+import { Inject, Injectable, InjectionToken, Injector, Optional } from '@angular/core';
+import { HttpClient, HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { ErrorHandlerInterceptor } from './error-handler.interceptor';
+import { CacheInterceptor } from './cache.interceptor';
+import { ApiPrefixInterceptor } from './api-prefix.interceptor';
+import { TokenInterceptor } from './token.interceptor';
+import { HeaderInterceptor } from './header.interceptor';
+
+
+// Augment HttpClient with the added configuration methods from HttpService, to allow in-place replacement of
+// HttpClient with HttpService using dependency injection
+export interface HttpCustomClient {
+
+  /**
+   * Enables caching for this request.
+   * @param {boolean} forceUpdate Forces request to be made and updates cache entry.
+   * @return {HttpCustomClient} The new instance.
+   */
+  cache(forceUpdate?: boolean): HttpCustomClient;
+
+  /**
+   * Skips default error handler for this request.
+   * @return {HttpCustomClient} The new instance.
+   */
+  skipErrorHandler(): HttpCustomClient;
+
+  /**
+  * Skips default API Prefix for this request.
+  * @return {HttpCustomClient} The new instance.
+  */
+  skipApiPrefix(): HttpCustomClient;
+
+
+  /**
+ * Skips default Token Interceptor for this request.
+ * @return {HttpCustomClient} The new instance.
+ */
+  skipToken(): HttpCustomClient;
+
+  /**
+* Skips default Header Interceptor for this request.
+* @return {HttpCustomClient} The new instance.
+*/
+  skipHeader(): HttpCustomClient;
+
+}
+
+
+// From @angular/common/http/src/interceptor: allows to chain interceptors
+class HttpInterceptorHandler implements HttpHandler {
+
+  constructor(private next: HttpHandler, private interceptor: HttpInterceptor) { }
+
+  handle(request: HttpRequest<any>): Observable<HttpEvent<any>> {
+    return this.interceptor.intercept(request, this.next);
+  }
+
+}
+
+/**
+ * Allows to override default dynamic interceptors that can be disabled with the HttpService extension.
+ * Except for very specific needs, you should better configure these interceptors directly in the constructor below
+ * for better readability.
+ *
+ * For static interceptors that should always be enabled (like ApiPrefixInterceptor), use the standard
+ * HTTP_INTERCEPTORS token.
+ */
+export const HTTP_DYNAMIC_INTERCEPTORS = new InjectionToken<HttpInterceptor>('HTTP_DYNAMIC_INTERCEPTORS');
+
+/**
+ * Extends HttpClient with per request configuration using dynamic interceptors.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class HttpService extends HttpClient implements HttpCustomClient {
+
+  constructor(private httpHandler: HttpHandler,
+    private injector: Injector,
+    @Optional() @Inject(HTTP_DYNAMIC_INTERCEPTORS) private interceptors: HttpInterceptor[] = []) {
+    super(httpHandler);
+
+    if (!this.interceptors) {
+      // Configure default interceptors that can be disabled here
+      this.interceptors = [this.injector.get(ApiPrefixInterceptor), this.injector.get(HeaderInterceptor), this.injector.get(TokenInterceptor), this.injector.get(ErrorHandlerInterceptor)];
+    }
+  }
+
+  cache(forceUpdate?: boolean): HttpService {
+    const cacheInterceptor = this.injector.get(CacheInterceptor).configure({ update: forceUpdate });
+    return this.addInterceptor(cacheInterceptor);
+  }
+
+  skipErrorHandler(): HttpService {
+    return this.removeInterceptor(ErrorHandlerInterceptor);
+  }
+
+  skipApiPrefix(): HttpService {
+    return this.removeInterceptor(ApiPrefixInterceptor);
+  }
+
+  skipToken(): HttpService {
+    return this.removeInterceptor(TokenInterceptor);
+  }
+
+  skipHeader(): HttpService {
+    return this.removeInterceptor(HeaderInterceptor);
+  }
+
+  // Override the original method to wire interceptors when triggering the request.
+  request(method?: any, url?: any, options?: any): any {
+    const handler = this.interceptors.reduceRight(
+      (next, interceptor) => new HttpInterceptorHandler(next, interceptor),
+      this.httpHandler
+    );
+    return new HttpClient(handler).request(method, url, options);
+  }
+
+  private removeInterceptor(interceptorType: Function): HttpService {
+    return new HttpService(
+      this.httpHandler,
+      this.injector,
+      this.interceptors.filter(i => !(i instanceof interceptorType))
+    );
+  }
+
+  private addInterceptor(interceptor: HttpInterceptor): HttpService {
+    return new HttpService(
+      this.httpHandler,
+      this.injector,
+      this.interceptors.concat([interceptor])
+    );
+  }
+
+}

package/{lib/core/index.d.ts → src/lib/core/index.ts}

@@ -1,20 +1,22 @@
-export * from './snack/snack.component';
-export * from './snack/snack.module';
-export * from './alert.service';
-export * from './api-prefix.interceptor';
-export * from './authentication.guard';
-export * from './authentication.service';
-export * from './cache.interceptor';
-export * from './config.service';
-export * from './credentials.service';
-export * from './error-handler.interceptor';
-export * from './error-handler.service';
-export * from './form-validator.service';
-export * from './http-cache.service';
-export * from './http.service';
-export * from './logger.service';
-export * from './route-reusable-strategy';
-export * from './storage.service';
-export * from './techlify-config.model';
-export * from './token.interceptor';
-export * from './dataManager.service';
+export * from './snack/snack.component';
+export * from './snack/snack.module';
+
+export * from './alert.service';
+export * from './api-prefix.interceptor';
+export * from './authentication.guard';
+export * from './authentication.service';
+export * from './cache.interceptor';
+export * from './config.service';
+export * from './credentials.service';
+export * from './error-handler.interceptor';
+export * from './error-handler.service';
+export * from './form-validator.service';
+export * from './http-cache.service';
+export * from './http.service';
+export * from './logger.service';
+export * from './route-reusable-strategy';
+export * from './storage.service';
+export * from './techlify-config.model';
+export * from './token.interceptor';
+export * from './dataManager.service';
+export * from './filter.service';

package/src/lib/core/logger.service.ts

@@ -0,0 +1,113 @@
+/**
+ * Simple logger system with the possibility of registering custom outputs.
+ *
+ * 4 different log levels are provided, with corresponding methods:
+ * - debug   : for debug information
+ * - info    : for informative status of the application (success, ...)
+ * - warning : for non-critical errors that do not prevent normal application behavior
+ * - error   : for critical errors that prevent normal application behavior
+ *
+ * Example usage:
+ * ```
+ * import { Logger } from 'app/core/logger.service';
+ *
+ * const log = new Logger('myFile');
+ * ...
+ * log.debug('something happened');
+ * ```
+ *
+ * To disable debug and info logs in production, add this snippet to your root component:
+ * ```
+ * export class AppComponent implements OnInit {
+ *   ngOnInit() {
+ *     if (environment.production) {
+ *       Logger.enableProductionMode();
+ *     }
+ *     ...
+ *   }
+ * }
+ *
+ * If you want to process logs through other outputs than console, you can add LogOutput functions to Logger.outputs.
+ */
+
+/**
+ * The possible log levels.
+ * LogLevel.Off is never emitted and only used with Logger.level property to disable logs.
+ */
+export enum LogLevel {
+  Off = 0,
+  Error,
+  Warning,
+  Info,
+  Debug
+}
+
+/**
+ * Log output handler function.
+ */
+export type LogOutput = (source: string | undefined, level: LogLevel, ...objects: any[]) => void;
+
+export class Logger {
+
+  /**
+   * Current logging level.
+   * Set it to LogLevel.Off to disable logs completely.
+   */
+  static level = LogLevel.Debug;
+
+  /**
+   * Additional log outputs.
+   */
+  static outputs: LogOutput[] = [];
+
+  /**
+   * Enables production mode.
+   * Sets logging level to LogLevel.Warning.
+   */
+  static enableProductionMode() {
+    Logger.level = LogLevel.Warning;
+  }
+
+  constructor(private source?: string) { }
+
+  /**
+   * Logs messages or objects  with the debug level.
+   * Works the same as console.log().
+   */
+  debug(...objects: any[]) {
+    this.log(console.log, LogLevel.Debug, objects);
+  }
+
+  /**
+   * Logs messages or objects  with the info level.
+   * Works the same as console.log().
+   */
+  info(...objects: any[]) {
+    this.log(console.info, LogLevel.Info, objects);
+  }
+
+  /**
+   * Logs messages or objects  with the warning level.
+   * Works the same as console.log().
+   */
+  warn(...objects: any[]) {
+    this.log(console.warn, LogLevel.Warning, objects);
+  }
+
+  /**
+   * Logs messages or objects  with the error level.
+   * Works the same as console.log().
+   */
+  error(...objects: any[]) {
+    this.log(console.error, LogLevel.Error, objects);
+  }
+
+  private log(func: (...args: any[]) => void, level: LogLevel, objects: any[]) {
+    if (level <= Logger.level) {
+      const log = this.source ? ['[' + this.source + ']'].concat(objects) : objects;
+      func.apply(console, log);
+      Logger.outputs.forEach(output => output.apply(output, [this.source, level, ...objects]));
+    }
+  }
+
+}

package/src/lib/core/route-reusable-strategy.ts

@@ -0,0 +1,36 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+import { Injectable } from '@angular/core';
+
+/**
+ * A route strategy allowing for explicit route reuse.
+ * Used as a workaround for https://github.com/angular/angular/issues/18374
+ * To reuse a given route, add `data: { reuse: true }` to the route definition.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class RouteReusableStrategy extends RouteReuseStrategy {
+
+  public shouldDetach(route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle | null): void { }
+
+  public shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    return false;
+  }
+
+  public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
+    return null;
+  }
+
+  public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    // Reuse the route if the RouteConfig is the same, or if both routes use the
+    // same component, because the latter can have different RouteConfigs.
+    return future.routeConfig === curr.routeConfig ||
+      Boolean(future.routeConfig?.component &&
+        future.routeConfig?.component === curr.routeConfig?.component);
+  }
+
+}

package/src/lib/core/snack/error-snack.html

@@ -0,0 +1,8 @@
+<div class="row-container">
+    <span class="icon-column">
+        <mat-icon class="error"> cancel</mat-icon>
+    </span>
+    <span class="text-column">
+        {{ data }}
+    </span>
+</div>

package/src/lib/core/snack/snack.component.ts

@@ -0,0 +1,19 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'snack-bar-component-example-snack',
+  templateUrl: 'success-snack.html',
+  styleUrls: ['./snack.scss'],
+})
+export class SuccessSnackComponent {
+  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
+}
+@Component({
+  selector: 'snack-bar-component-example-snack',
+  templateUrl: 'error-snack.html',
+  styleUrls: ['./snack.scss'],
+})
+export class ErrorSnackComponent {
+  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
+}

package/src/lib/core/snack/snack.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { SuccessSnackComponent, ErrorSnackComponent } from './snack.component';
+import { CommonModule } from '@angular/common';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatIconModule } from '@angular/material/icon';
+
+@NgModule({
+  declarations: [
+    SuccessSnackComponent,
+    ErrorSnackComponent
+  ],
+  imports: [
+    CommonModule,
+    MatSnackBarModule,
+    MatIconModule
+  ],
+  exports: [
+    SuccessSnackComponent,
+    ErrorSnackComponent,
+  ]
+})
+export class SnackModule { }

package/src/lib/core/snack/snack.scss

@@ -0,0 +1,18 @@
+.error {
+    color: #dc3545;
+}
+  .success {
+    color: #28a745;
+  }
+  .row-container {
+    display: flex;
+  }
+  .icon-column {
+    flex: 5%;
+    padding-right: 5px;
+  }
+  .text-column {
+    flex: 95%;
+    text-align: center;
+    color: white;
+  }

package/src/lib/core/snack/success-snack.html

@@ -0,0 +1,8 @@
+<div class="row-container">
+    <span class="icon-column">
+        <mat-icon class="success"> check_circle_outline</mat-icon>
+    </span>
+    <span class="text-column">
+        {{ data }}
+    </span>
+</div>

package/src/lib/core/storage.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from "@angular/core";
+import { Subject, Observable } from 'rxjs';
+
+/**
+ * Service used to manage Local Storage
+ * 
+ * @author Joshua Kissoon
+ * @since 20190623
+ */
+@Injectable({
+    providedIn: 'root'
+})
+export class StorageService {
+    private storageSub = new Subject<any>();
+
+    constructor() {
+
+    }
+
+    watch(): Observable<any> {
+        return this.storageSub.asObservable();
+    }
+
+    setItem(key: string, data: any) {
+        localStorage.setItem(key, data);
+        this.storageSub.next({ key: key, value: data });
+    }
+
+    getItem(key: string) {
+        return localStorage.getItem(key);
+    }
+
+    removeItem(key: string) {
+        const data = this.getItem(key);
+        localStorage.removeItem(key);
+        this.storageSub.next({ key: key, value: data });
+    }
+}

package/src/lib/core/techlify-config.model.ts

@@ -0,0 +1,32 @@
+/**
+ * Class that stores the configuration data
+ *
+ * @author Joshua Kissoon
+ * @since 20180724
+ */
+export class TechlifyConfig {
+    projectKey: string = '';
+    environment: string = '';
+    authClientSecret: string = '';
+    authGrantType: string = '';
+    apiUrl: string = '';
+    rawConfigs: any;
+    storage: Storage;
+    isLogoutWhileApiGetsFailed: boolean = false;
+
+    constructor(data: any) {
+        this.loadFromMap(data);
+    }
+
+    loadFromMap(data: any) {
+        this.projectKey = data.projectKey;
+        this.environment = data.environment;
+        this.authClientSecret = data.authClientSecret;
+        this.authGrantType = data.authGrantType;
+        this.apiUrl = data.apiUrl;
+        this.storage = data?.storage;
+        this.rawConfigs = data;
+        this.isLogoutWhileApiGetsFailed = data?.isLogoutWhileApiGetsFailed;
+    }
+
+}

package/src/lib/core/token.interceptor.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { CredentialsService } from './credentials.service';
+
+
+/**
+ * Prefixes all requests not starting with `http[s]` with `environment.serverUrl`.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class TokenInterceptor implements HttpInterceptor {
+
+  constructor(private credentials: CredentialsService) { }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    request = request.clone({
+      setHeaders: {
+        Authorization: `Bearer ${this.credentials.getAccessToken() || ''}`
+      }
+    });
+    return next.handle(request);
+  }
+}

package/src/lib/data-table/data-table.component.html

@@ -0,0 +1,139 @@
+<div fxLayout="column" [ngClass]="{
+    'mat-elevation-z1': !config.disableElevation
+  }" class="scroll-container" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50"
+    (scrolled)="onScroll()" [scrollWindow]="false" [ngStyle]="config.style">
+    <table mat-table [dataSource]="dataSource" matSort [id]="elementId">
+        <!-- Checkbox Column -->
+        <ng-container matColumnDef="select">
+            <th mat-header-cell *matHeaderCellDef style="width:60px">
+                <mat-checkbox *ngIf="selection" (change)="$event ? masterToggle() : null"
+                    [checked]="selection.hasValue() && isAllSelected()"
+                    [indeterminate]="selection.hasValue() && !isAllSelected()">
+                </mat-checkbox>
+            </th>
+            <td mat-cell *matCellDef="let row" style="width:60px">
+                <mat-checkbox *ngIf="selection" (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                </mat-checkbox>
+            </td>
+        </ng-container>
+
+        <!-- Index Column -->
+        <ng-container matColumnDef="index">
+            <th mat-header-cell *matHeaderCellDef>#</th>
+            <td mat-cell *matCellDef="let index = index">
+                {{ (index + 1) }}
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef class="action-width d-print-none">
+                {{ config.customActionLabel }}
+            </th>
+
+            <td mat-cell *matCellDef="let element; let index = index" class="d-print-none">
+                <div>
+                    <button *ngIf="
+              config.actionsConfig.download && element[config.downloadLink]
+            " type="button" mat-icon-button (click)="downloadClicked($event, element)">
+                        <mat-icon>vertical_align_bottom</mat-icon>
+                    </button>
+
+                    <button *ngIf="config.actionsConfig.edit" [disabled]="!this.checkEdit(element)" type="button"
+                        mat-icon-button (click)="editClicked($event, element)">
+                        <mat-icon>edit</mat-icon>
+                    </button>
+
+                    <button *ngIf="config.actionsConfig.print" [disabled]="!this.checkPrint(element)" type="button"
+                        mat-icon-button (click)="printClicked($event,element)">
+                        <mat-icon>print</mat-icon>
+                    </button>
+
+                    <button *ngIf="config.actionsConfig.view" [disabled]="!this.checkView(element)" type="button"
+                        mat-icon-button (click)="viewClicked($event, element)">
+                        <mat-icon>description</mat-icon>
+                    </button>
+
+                    <button *ngIf="config.actionsConfig.deactivate" type="button" mat-icon-button
+                        (click)="deactivateClicked($event, element)">
+                        <mat-icon>delete</mat-icon>
+                    </button>
+
+                    <button #menuTrigger="matMenuTrigger" *ngIf="
+              config.actionsConfig.actionsMenu &&
+              this.checkActions(element) &&
+              config.actionsConfig.actionsMenu.length > 0
+            " type="button" mat-icon-button [matMenuTriggerFor]="actionsMenu"
+                        (click)="actionMenuTriggerClick($event, menuTrigger)">
+                        <mat-icon>more_vert</mat-icon>
+                    </button>
+                </div>
+
+                <mat-menu #actionsMenu="matMenu">
+                    <div *ngFor="let item of config.actionsConfig.actionsMenu">
+                        <button *ngIf="this.checkActionButton(element, item.value)" mat-menu-item
+                            (click)="actionMenuClick($event, element, item.value)">
+                            <span>{{ item.name }}</span>
+                        </button>
+                    </div>
+                </mat-menu>
+            </td>
+        </ng-container>
+
+        <!-- Actual Columns -->
+        <ng-container matColumnDef="{{ column.value }}" *ngFor="let column of config.columnsConfig">
+            <ng-container *ngIf="column?.sort; else noSort">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    {{ column.title }}
+                </th>
+            </ng-container>
+            <ng-template #noSort>
+                <th mat-header-cell *matHeaderCellDef>
+                    {{ column.title }}
+                </th>
+            </ng-template>
+            <ng-container *ngIf="column.dateField; else currencyField">
+                <td mat-cell *matCellDef="let element">
+                    <div class="text-truncate" appToolTip>
+                        {{ getValue(element, column.value) | date:column.format? column.format: 'mediumDate' }}
+                    </div>
+                </td>
+            </ng-container>
+
+            <ng-template #currencyField>
+                <div *ngIf="column.currencyField; else normalField">
+                    <td mat-cell *matCellDef="let element">
+                        <div class="text-truncate" appToolTip>
+                            {{ getValue(element, column.value) | currency: "$":'symbol' : '1.0-0' }}
+                        </div>
+                    </td>
+                </div>
+            </ng-template>
+
+            <ng-template #normalField>
+                <td mat-cell *matCellDef="let element">
+                    <div class="text-truncate" appToolTip>
+                        {{ getValue(element, column.value) }}
+                    </div>
+                </td>
+            </ng-template>
+        </ng-container>
+
+        <ng-container *ngIf="config.stickyHeader; else normalHeader">
+            <tr class="font-weight-bold" mat-header-row *matHeaderRowDef="config.displayedColumns; sticky:true"></tr>
+        </ng-container>
+        <ng-template #normalHeader>
+            <tr class="font-weight-bold" mat-header-row *matHeaderRowDef="config.displayedColumns;">
+            </tr>
+        </ng-template>
+
+        <div *ngIf="!config.enableRowClick">
+            <tr mat-row *matRowDef="let row; columns: config.displayedColumns"></tr>
+        </div>
+
+        <div *ngIf="config.enableRowClick">
+            <tr mat-row *matRowDef="let row; columns: config.displayedColumns" (click)="rowClicked($event, row)"
+                class="hoverable row-hover"></tr>
+        </div>
+    </table>
+</div>