ng-ipa-library 0.7.5 → 0.7.6

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ng-ipa-library'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ng-ipa-library",
+  "allowedNonPeerDependencies": [
+    "ngx-toastr",
+    "ngx-dropzone-wrapper",
+    "ngx-captcha",
+    "moment-hijri",
+    "@types/moment-hijri",
+    "@ng-bootstrap/ng-bootstrap",
+    "@ng-bootstrap/ng-bootstrap",
+    "@fortawesome/angular-fontawesome",
+    "@fortawesome/fontawesome-svg-core",
+    "@fortawesome/free-brands-svg-icons",
+    "@fortawesome/free-solid-svg-icons",
+    "ngx-sharebuttons",
+    "@angular/cdk",
+    "@ng-select/ng-select"
+  ],
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "umdModuleIds": {
+      "ngx-toastr": "ngx-toastr",
+      "ngx-dropzone-wrapper": "ngx-dropzone-wrapper",
+      "ngx-captcha": "ngx-captcha",
+      "moment-hijri": "moment-hijri",
+      "@types/moment-hijri": "@types/moment-hijri",
+      "@ng-bootstrap/ng-bootstrap": "@ng-bootstrap/ng-bootstrap",
+      "@fortawesome/angular-fontawesome": "@fortawesome/angular-fontawesome",
+      "@fortawesome/fontawesome-svg-core": "@fortawesome/fontawesome-svg-core",
+      "@fortawesome/free-brands-svg-icons": "@fortawesome/free-brands-svg-icons",
+      "@fortawesome/free-solid-svg-icons": "@fortawesome/free-solid-svg-icons",
+      "ngx-sharebuttons": "ngx-sharebuttons",
+      "ngx-sharebuttons/icons": "ngx-sharebuttons/icons",
+      "ngx-sharebuttons/popup": "ngx-sharebuttons/popup",
+      "@angular/cdk": "@angular/cdk",
+      "@ng-select/ng-select": "@ng-select/ng-select"
+    }
+  },
+  "assets": [
+    "src/lib/assets/ngIPAStyle.scss"
+  ]
+}

package/package.json

@@ -1,31 +1,24 @@
-{
-  "name": "ng-ipa-library",
-  "version": "0.7.5",
-  "peerDependencies": {
-    "@angular/common": "~12.2.9",
-    "@angular/core": "~12.2.9"
-  },
-  "dependencies": {
-    "tslib": "^2.2.0",
-    "ngx-toastr": "^14.1.0",
-    "@ng-select/ng-select": "^7.4.0",
-    "ngx-captcha": "^10.0.0",
-    "ngx-dropzone-wrapper": "^10.0.1",
-    "moment-hijri": "^2.1.2",
-    "@types/moment-hijri": "^2.1.0",
-    "@ng-bootstrap/ng-bootstrap": "^11.0.0-beta.2",
-    "@fortawesome/angular-fontawesome": "^0.9.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "ngx-sharebuttons": "^9.0.0",
-    "@angular/cdk": "^12.2.9"
-  },
-  "main": "bundles/ng-ipa-library.umd.js",
-  "module": "fesm2015/ng-ipa-library.js",
-  "es2015": "fesm2015/ng-ipa-library.js",
-  "esm2015": "esm2015/ng-ipa-library.js",
-  "fesm2015": "fesm2015/ng-ipa-library.js",
-  "typings": "ng-ipa-library.d.ts",
-  "sideEffects": false
-}
+{
+  "name": "ng-ipa-library",
+  "version": "0.7.6",
+  "peerDependencies": {
+    "@angular/common": "~12.2.9",
+    "@angular/core": "~12.2.9"
+  },
+  "dependencies": {
+    "tslib": "^2.2.0",
+    "ngx-toastr": "^14.1.0",
+    "@ng-select/ng-select": "^7.4.0",
+    "ngx-captcha": "^10.0.0",
+    "ngx-dropzone-wrapper": "^10.0.1",
+    "moment-hijri": "^2.1.2",
+    "@types/moment-hijri": "^2.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^11.0.0-beta.2",
+    "@fortawesome/angular-fontawesome": "^0.9.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "ngx-sharebuttons": "^9.0.0",
+    "@angular/cdk": "^12.2.9"
+  }
+}

package/src/lib/core/components/loading/loading.component.html

@@ -0,0 +1,3 @@
+<div id="cover-spin" *ngIf="loading">
+  <div class="spinner"></div>
+</div>

package/src/lib/core/components/loading/loading.component.scss

@@ -0,0 +1,3 @@
+#cover-spin {
+    display: flex;
+}

package/src/lib/core/components/loading/loading.component.ts

@@ -0,0 +1,23 @@
+import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';
+import { LoaderService } from '../../services/loader.service';
+
+@Component({
+  selector: 'ipa-loader',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss'],
+})
+export class LoaderComponent implements AfterViewInit {
+  loading!: boolean;
+
+  constructor(
+    private loaderService: LoaderService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngAfterViewInit(): void {
+    this.loaderService.isLoading.subscribe((v) => {
+      this.loading = v;
+      this.cdr.detectChanges();
+    });
+  }
+}

package/src/lib/core/interceptors/error.interceptor.ts

@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor,
+} from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { ErrorService } from '../services/error.service';
+import { ApiException } from '../../models/apiException';
+import { IndividualConfig, ToastrService } from 'ngx-toastr';
+
+@Injectable()
+export class ErrorInterceptor implements HttpInterceptor {
+  constructor(
+    private errorService: ErrorService,
+    private toastrService: ToastrService
+  ) {}
+
+  intercept(
+    req: HttpRequest<unknown>,
+    next: HttpHandler
+  ): Observable<HttpEvent<unknown>> {
+    if (this.isException(req)) {
+      return next.handle(req);
+    }
+
+    return next.handle(req).pipe(
+      catchError((error) => {
+        const response = error.error as ApiException;
+        const toastrConfig: Partial<IndividualConfig> = {
+          disableTimeOut: true,
+        };
+        switch (response.statusCode) {
+          case 500:
+            this.toastrService.error(
+              response?.innerException + ' ' + response?.stackTrace,
+              response.message,
+              toastrConfig
+            );
+            break;
+
+          default:
+            this.toastrService.error(response.message, '', toastrConfig);
+            break;
+        }
+        return throwError(error);
+      })
+    );
+  }
+
+  isException(req: HttpRequest<any>): boolean {
+    for (const url of this.errorService.urls) {
+      if (req.url.includes(url.path) && req.method === url.method) {
+        return true;
+      }
+    }
+    return false;
+  }
+}

package/src/lib/core/interceptors/loading.interceptor.ts

@@ -0,0 +1,69 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor,
+  HttpResponse,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { LoaderService } from '../services/loader.service';
+
+@Injectable()
+export class LoadingInterceptor implements HttpInterceptor {
+  private requests: HttpRequest<any>[] = [];
+
+  constructor(private loaderService: LoaderService) {}
+
+  removeRequest(req: HttpRequest<any>): void {
+    const i = this.requests.indexOf(req);
+    if (i >= 0) {
+      this.requests.splice(i, 1);
+    }
+    this.loaderService.isLoading.next(this.requests.length > 0);
+  }
+
+  intercept(
+    req: HttpRequest<unknown>,
+    next: HttpHandler
+  ): Observable<HttpEvent<unknown>> {
+    if (this.isException(req)) {
+      return next.handle(req);
+    }
+    this.requests.push(req);
+
+    this.loaderService.isLoading.next(true);
+    return new Observable((observer) => {
+      const subscription = next.handle(req).subscribe(
+        (event) => {
+          if (event instanceof HttpResponse) {
+            this.removeRequest(req);
+            observer.next(event);
+          }
+        },
+        (err) => {
+          this.removeRequest(req);
+          observer.error(err);
+        },
+        () => {
+          this.removeRequest(req);
+          observer.complete();
+        }
+      );
+      // remove request from queue when cancelled
+      return () => {
+        this.removeRequest(req);
+        subscription.unsubscribe();
+      };
+    });
+  }
+
+  isException(req: HttpRequest<any>): boolean {
+    for (const url of this.loaderService.urls) {
+      if (req.url.includes(url.path) && req.method === url.method) {
+        return true;
+      }
+    }
+    return false;
+  }
+}

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

@@ -0,0 +1,77 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor,
+  HttpClient,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { AuthService } from '../services/auth.service';
+import { DecodedToken } from '../../models/decodedToken.model';
+import { User } from '../../models/user.model';
+
+@Injectable()
+export class TokenInterceptor implements HttpInterceptor {
+  refresh = true;
+  constructor(private authService: AuthService, private http: HttpClient) {}
+
+  intercept(
+    request: HttpRequest<unknown>,
+    next: HttpHandler
+  ): Observable<HttpEvent<unknown>> {
+    if (this.isException(request)) {
+      return next.handle(request);
+    }
+    const token = this.authService.getToken();
+    if (token) {
+      this.isTokenExpired(token);
+      request = request.clone({
+        setHeaders: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+    }
+    return next.handle(request);
+  }
+
+  private isTokenExpired(token: string) {
+    const redirectPath = location.pathname;
+    const decodedToken = this.authService.getDecodedToken() as DecodedToken;
+    const expDate = new Date((decodedToken.exp ?? 0) * 1000);
+    if (expDate < new Date()) {
+      location.replace('/ar/login?redirect=' + redirectPath);
+      return;
+    } else {
+      if (this.authService.currentUserUrl) {
+        if (this.refresh) {
+          this.http
+            .get<User>(this.authService.currentUserUrl + `/api/users?refresh`, {
+              headers: { Authorization: `Bearer ${token}` },
+            })
+            .subscribe((user) => {
+              localStorage.setItem('token', user.token);
+              this.refresh = false;
+              setTimeout(() => {
+                this.refresh = true;
+              }, 60 * 1000);
+            });
+        }
+      } else {
+        throw new Error(
+          "provide current base user api url using this function authService.setCurrentUserUrl('https://...')"
+        );
+      }
+    }
+  }
+
+  private isException(request: HttpRequest<any>): boolean {
+    if (
+      request.url.includes('/api/users?refresh') &&
+      request.method === 'GET'
+    ) {
+      return true;
+    }
+    return false;
+  }
+}

package/src/lib/core/services/auth.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { DecodedToken } from '../../models/decodedToken.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  public currentUser = new BehaviorSubject<DecodedToken>({ exp: 0 });
+  currentUserUrl = '';
+  constructor() {}
+
+  getToken(): string {
+    return localStorage.getItem('token') ?? '';
+  }
+
+  getDecodedToken(): any {
+    return this.decodeJwt(this.getToken());
+  }
+
+  setCurrentUser(): void {
+    const decodedToken = this.getDecodedToken() as DecodedToken;
+    this.currentUser.next({
+      nameid: decodedToken.nameid,
+      email: decodedToken.email,
+      given_name: decodedToken.given_name,
+      exp: decodedToken.exp,
+    });
+  }
+
+  setCurrentUserUrl(url: string) {
+    this.currentUserUrl = url;
+  }
+
+  private decodeJwt(token: string): any {
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map((c) => {
+          return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        })
+        .join('')
+    );
+    return JSON.parse(jsonPayload);
+  }
+}

package/src/lib/core/services/error.service.ts

@@ -0,0 +1,19 @@
+import { HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ExceptionUrl } from '../../models/exceptionUrl.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ErrorService {
+  urls: ExceptionUrl[] = [];
+  constructor() {}
+
+  setExceptionUrls(urls: ExceptionUrl[]) {
+    this.urls = urls;
+  }
+
+  addExceptionUrl(url: ExceptionUrl) {
+    this.urls.push(url);
+  }
+}

package/src/lib/core/services/loader.service.ts

@@ -0,0 +1,21 @@
+import { HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { ExceptionUrl } from '../../models/exceptionUrl.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoaderService {
+  public isLoading = new BehaviorSubject(false);
+  urls: ExceptionUrl[] = [];
+  constructor() {}
+
+  setExceptionUrls(urls: ExceptionUrl[]) {
+    this.urls = urls;
+  }
+
+  addExceptionUrl(url: ExceptionUrl) {
+    this.urls.push(url);
+  }
+}

package/src/lib/generate-form/generate-form.component.html

@@ -0,0 +1,85 @@
+<form [formGroup]="generateForm">
+    <ng-container *ngFor="let column of form.columns">
+        <div [ngSwitch]="column.type">
+            <!-- TEXTAREA -->
+            <div *ngSwitchCase="'textArea'">
+                <ipa-textarea-input [formControlName]="column.englishName" [id]="column.englishName"
+                    [label]="column.arabicLabel" [required]="column.required" [pattern]="column.validationPattern!"
+                    [patternErrorMsg]="column.patternErrorMsg!" [classes]="column.inputClasses!"
+                    [containerClasses]="column.containerClasses!"></ipa-textarea-input>
+            </div>
+
+            <!-- DROP DOWN LIST -->
+            <div *ngSwitchCase="'select'">
+                <ipa-dropdown-input [formControlName]="column.englishName" [id]="column.englishName"
+                    [label]="column.arabicLabel" [items]="column.data!" [valueField]="column.valueField!"
+                    [textField]="column.textField!" [required]="column.required" [classes]="column.inputClasses!"
+                    [containerClasses]="column.containerClasses!">
+                </ipa-dropdown-input>
+            </div>
+
+            <!-- CHECKBOX -->
+            <div *ngSwitchCase="'checkbox'">
+                <label [for]="column.englishName">{{column.arabicLabel}}</label>
+                <div [formArrayName]="'items'" *ngFor="let control of formControls.controls; let i = index">
+                    <div [formGroupName]="i" [id]="column.englishName">
+                        <div class="form-check">
+                            <input [id]="column.englishName+control.value[column.valueField!]" class="form-check-input" type="checkbox"
+                                formControlName="checkbox">
+                            <label class="form-check-label" [for]="column.englishName+control.value[column.valueField!]">
+                                {{control.value[column.textField!]}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="invalid-feedback" style="display: block !important;"
+                    *ngIf="getErrorMessage(column.englishName) !== null">
+                    {{errorMsg}}
+                </div>
+            </div>
+
+            <!-- RADIO -->
+            <div *ngSwitchCase="'radio'">
+                <label [for]="column.englishName">{{column.arabicLabel}}</label>
+                <div *ngFor="let item of column.data; let i = index" [id]="column.englishName">
+                    <div class="form-check">
+                        <input [id]="column.englishName+item[column.valueField!]" class="form-check-input" type="radio"
+                            [formControlName]="column.englishName" [value]="item[column.valueField!]">
+                        <label class="form-check-label" [for]="column.englishName+item[column.valueField!]">
+                            {{item[column.textField!]}}
+                        </label>
+                    </div>
+                </div>
+                <div class="invalid-feedback" style="display: block !important;"
+                    *ngIf="getErrorMessage(column.englishName) !== null">
+                    {{errorMsg}}
+                </div>
+            </div>
+
+            <!-- FILE UPLOAD -->
+            <div *ngSwitchCase="'file'">
+                <ipa-file-upload [label]="column.arabicLabel" [acceptedFiles]="column.acceptedFiles!"
+                    [multiple]="column.multipleFile!" [maxFileSize]="column.size!" [method]="column.apiURlMethod!"
+                    [autoUpload]="column.autoUploadFile!" [apiUrl]="column.apiUrl?? 'apiUrl' " [authorization]="column.authorization!"
+                    ngDefaultControl [formControlName]="column.englishName" (successUpload)="SuccessUpload($event)"
+                    (fileAdded)="FileAdded($event, column.englishName)"
+                    (fileDeleted)="FileDeleted($event, column.englishName)"></ipa-file-upload>
+            </div>
+
+            <!-- recaptcha -->
+            <div *ngSwitchCase="'recaptcha'">
+                <ipa-recaptcha [recaptchaSize]="recaptchaSize" [lang]="lang" [theme]="theme"
+                    [recaptchaType]="recaptchaType" [useGlobalDomain]="useGlobalDomain"
+                    formControlName="{{column.englishName}}"></ipa-recaptcha>
+            </div>
+
+            <!-- DEFAULT -->
+            <div *ngSwitchDefault>
+                <ipa-text-input [formControlName]="column.englishName" [id]="column.englishName" [type]="column.type"
+                    [label]="column.arabicLabel" [required]="column.required" [pattern]="column.validationPattern!"
+                    [patternErrorMsg]="column.patternErrorMsg!" [classes]="column.inputClasses!"
+                    [containerClasses]="column.containerClasses!"></ipa-text-input>
+            </div>
+        </div>
+    </ng-container>
+</form>