ng-ipa-library 0.7.6 → 0.7.7

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

@@ -1,77 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,85 +0,0 @@
-<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>

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

@@ -1,119 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import {
-  FormArray,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { IPAFormService } from '../ipa-form/ipa-form.service';
-import { Column, GenerateForm } from '../models/generateForm.model';
-
-@Component({
-  selector: 'ipa-generate-form',
-  templateUrl: './generate-form.component.html',
-  styleUrls: ['./generate-form.component.scss'],
-})
-export class GenerateFormComponent implements OnInit {
-  @Input() generateForm!: FormGroup;
-  @Input() form!: GenerateForm;
-
-  // recaptcha inputs
-  @Input() siteKey!: string;
-  @Input() recaptchaSize: 'compact' | 'normal' = 'normal';
-  @Input() lang = 'ar';
-  @Input() recaptchaType: 'image' | 'audio' = 'image';
-  @Input() theme: 'light' | 'dark' = 'light';
-  @Input() useGlobalDomain = true;
-
-  // file upload outputs
-  @Output() successUpload = new EventEmitter();
-  @Output() fileAdded = new EventEmitter();
-  @Output() fileDeleted = new EventEmitter();
-
-  errorMsg!: string | null;
-
-  constructor(private validationService: IPAFormService) {}
-
-  ngOnInit(): void {
-    this.createForm();
-  }
-
-  get formControls() {
-    return this.generateForm.get('items') as FormArray;
-  }
-
-  getErrorMessage(formControlName: string): string | null {
-    const formControl = this.generateForm.controls[
-      formControlName
-    ] as FormControl;
-    this.errorMsg = this.validationService.getErrorMessage(formControl);
-    return this.errorMsg;
-  }
-
-  SuccessUpload(event: any) {
-    this.successUpload.emit(event);
-  }
-
-  FileAdded(file: any, formControlName: string) {
-    this.generateForm.controls[formControlName].patchValue(file);
-    this.fileAdded.emit(file);
-  }
-
-  FileDeleted(event: any, formControlName: string) {
-    this.generateForm.controls[formControlName].patchValue(null);
-    this.fileDeleted.emit(event);
-  }
-
-  private createForm() {
-    this.form.columns.forEach((column) => {
-      if (column.type === 'checkbox') {
-        this.addCheckboxControl(column);
-      } else {
-        this.generateForm.addControl(
-          column.englishName,
-          new FormControl(null, [
-            column.required ? Validators.required : Validators.nullValidator,
-            Validators.maxLength(column.size!),
-            column.type === 'number'
-              ? Validators.min(1)
-              : Validators.nullValidator,
-          ])
-        );
-      }
-    });
-  }
-
-  private addCheckboxControl(column: Column) {
-    let checkboxGroup = new FormArray(
-      column.data!.map((item) => {
-        return new FormGroup({
-          [column.valueField!]: new FormControl(item[column.valueField!]),
-          [column.textField!]: new FormControl(item[column.textField!]),
-          checkbox: new FormControl(false, Validators.required),
-        });
-      })
-    );
-
-    this.generateForm.addControl(
-      column.englishName,
-      new FormControl(
-        null,
-        column.required ? Validators.required : Validators.nullValidator
-      )
-    );
-    this.generateForm.addControl('items', checkboxGroup);
-    checkboxGroup.valueChanges.subscribe((value) => {
-      if (this.getCheckboxSelectedValues(value)) {
-        this.generateForm.controls[column.englishName].patchValue(value);
-      } else {
-        this.generateForm.controls[column.englishName].patchValue(null);
-        this.generateForm.controls[column.englishName].markAsTouched();
-      }
-    });
-  }
-
-  private getCheckboxSelectedValues(items: any[]) {
-    let selectedItems = items.filter((item) => item.checkbox);
-    return selectedItems.length > 0 ? selectedItems : null;
-  }
-}

package/src/lib/ipa-form/datepicker/datepicker.component.html

@@ -1,21 +0,0 @@
-<div class="form-floating input-group {{containerClasses}}">
-    <input id="{{id}}"
-        [ngClass]="{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}"
-        class="form-control {{classes}}" [formControl]="formControl" [firstDayOfWeek]="7" ngbDatepicker
-        #d="ngbDatepicker" [maxDate]="maxDate" [minDate]="minDate" [footerTemplate]="footerTemplate"
-        [required]="required" style="outline: unset; z-index: unset !important;" autocomplete="off" (blur)="onTouched()" title="{{label}}">
-    <label for="{{id}}">{{label}}</label>
-    <span class="input-group-text calenderBtn" (click)="d.toggle()">
-        <i class="far fa-calendar-alt fa-lg"></i>
-    </span>
-    <div class="invalid-feedback" *ngIf="errorMessage !== null">
-        {{errorMsg}}
-    </div>
-    <ng-template #footerTemplate style="text-align: center;">
-        <hr>
-        <button type="button" class="btn btn-primary btn-sm m-2 " style="width: auto; float: right;"
-            (click)="formControl.patchValue(today);d.navigateTo(today);">اليوم</button>
-        <button type="button" class="btn btn-secondary btn-sm m-2" style="width: auto; float: left;"
-            (click)="formControl.patchValue(null);d.close()">مسح</button>
-    </ng-template>
-</div>

package/src/lib/ipa-form/datepicker/datepicker.component.scss

@@ -1,13 +0,0 @@
-.calenderBtn {
-  cursor: pointer;
-  background-color: transparent;
-  color: #6c757d;
-  border-top-left-radius: .25rem !important;
-  border-bottom-left-radius: .25rem !important;
-}
-
-.calenderBtn:hover {
-  color: #fff;
-  background-color: #6c757d;
-  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-}

package/src/lib/ipa-form/datepicker/datepicker.component.ts

@@ -1,67 +0,0 @@
-import { Component, Input, OnInit, Self } from '@angular/core';
-import { FormControl, NgControl } from '@angular/forms';
-import {
-  NgbCalendar,
-  NgbDateStruct,
-  NgbInputDatepickerConfig,
-} from '@ng-bootstrap/ng-bootstrap';
-import { IPAFormService } from '../ipa-form.service';
-
-@Component({
-  selector: 'ipa-datepicker',
-  templateUrl: './datepicker.component.html',
-  styleUrls: ['./datepicker.component.scss'],
-})
-export class DatepickerComponent implements OnInit {
-  @Input() id!: string;
-  @Input() label = 'datepicker';
-  @Input() patternErrorMsg = 'invalid pattern';
-  @Input() required = false;
-  @Input() maxDate!: NgbDateStruct;
-  @Input() minDate!: NgbDateStruct;
-  @Input() classes!: string;
-  @Input() containerClasses!: string;
-  today = this.calendar.getToday();
-  formControl: FormControl = new FormControl('');
-  errorMsg!: string | null;
-
-  constructor(
-    private ipaFormService: IPAFormService,
-    private calendar: NgbCalendar,
-    @Self() public controlDir: NgControl,
-    config: NgbInputDatepickerConfig
-  ) {
-    this.controlDir.valueAccessor = this;
-    config.container = 'body';
-  }
-
-  ngOnInit(): void {
-    const control = this.controlDir.control;
-    const validators = control?.validator ? [control.validator] : [];
-
-    control?.setValidators(validators);
-    control?.updateValueAndValidity();
-    this.formControl = control as FormControl;
-  }
-
-  onChange(event: any): void {}
-
-  onTouched(): void {}
-  writeValue(obj: any): void {}
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  get errorMessage(): string | null {
-    this.errorMsg = this.ipaFormService.getErrorMessage(
-      this.formControl,
-      this.patternErrorMsg
-    );
-    return this.errorMsg;
-  }
-}

package/src/lib/ipa-form/datepicker/gregorian-datepicker/gregorian-datepicker.component.ts

@@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-import { NgbCalendar, NgbCalendarGregorian, NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
-import { DatepickerComponent } from '../datepicker.component';
-import { Gregorian18n } from './gregorian18n';
-
-@Component({
-  selector: 'ipa-gregorian-datepicker',
-  templateUrl: '../datepicker.component.html',
-  styleUrls: ['../datepicker.component.scss'],
-  providers: [
-    { provide: NgbCalendar, useClass: NgbCalendarGregorian},
-    { provide: NgbDatepickerI18n, useClass: Gregorian18n },
-  ],
-})
-export class GregorianDatepickerComponent extends DatepickerComponent {}

package/src/lib/ipa-form/datepicker/gregorian-datepicker/gregorian18n.ts

@@ -1,38 +0,0 @@
-import { TranslationWidth } from '@angular/common';
-import { Injectable } from '@angular/core';
-import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
-
-const WEEKDAYS = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
-const MONTHS = [
-  'يناير',
-  'فبراير',
-  'مارس',
-  'أبريل',
-  'مايو',
-  'يونيو',
-  'يوليو',
-  'اغسطس',
-  'سبتمبر',
-  'أكتوبر',
-  'نوفمبر',
-  'ديسمبر',
-];
-
-@Injectable()
-export class Gregorian18n extends NgbDatepickerI18n {
-  getMonthShortName(month: number) {
-    return MONTHS[month - 1];
-  }
-
-  getMonthFullName(month: number) {
-    return MONTHS[month - 1];
-  }
-
-  getWeekdayLabel(weekday: number, width?: TranslationWidth) {
-    return WEEKDAYS[weekday - 1];
-  }
-
-  getDayAriaLabel(date: NgbDateStruct): string {
-    return `${date.day}-${date.month}-${date.year}`;
-  }
-}

package/src/lib/ipa-form/datepicker/hijri-datepicker/IslamicI18n.ts

@@ -1,38 +0,0 @@
-import { TranslationWidth } from '@angular/common';
-import { Injectable } from '@angular/core';
-import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
-
-const WEEKDAYS = ['ن', 'ث', 'ر', 'خ', 'ج', 'س', 'ح'];
-const MONTHS = [
-  'محرم',
-  'صفر',
-  'ربيع الأول',
-  'ربيع الآخر',
-  'جمادى الأولى',
-  'جمادى الآخرة',
-  'رجب',
-  'شعبان',
-  'رمضان',
-  'شوال',
-  'ذو القعدة',
-  'ذو الحجة',
-];
-
-@Injectable()
-export class IslamicI18n extends NgbDatepickerI18n {
-  getMonthShortName(month: number) {
-    return MONTHS[month - 1];
-  }
-
-  getMonthFullName(month: number) {
-    return MONTHS[month - 1];
-  }
-
-  getWeekdayLabel(weekday: number, width?: TranslationWidth) {
-    return WEEKDAYS[weekday - 1];
-  }
-
-  getDayAriaLabel(date: NgbDateStruct): string {
-    return `${date.day}-${date.month}-${date.year}`;
-  }
-}

package/src/lib/ipa-form/datepicker/hijri-datepicker/hijri-datepicker.component.ts

@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-import { NgbCalendar, NgbCalendarIslamicUmalqura, NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
-import { DatepickerComponent } from '../datepicker.component';
-import { IslamicI18n } from './IslamicI18n';
-@Component({
-  selector: 'ipa-hijri-datepicker',
-  templateUrl: '../datepicker.component.html',
-  styleUrls: ['../datepicker.component.scss'],
-  providers: [
-    { provide: NgbCalendar, useClass: NgbCalendarIslamicUmalqura },
-    { provide: NgbDatepickerI18n, useClass: IslamicI18n },
-  ],
-})
-export class HijriDatepickerComponent extends DatepickerComponent {}

package/src/lib/ipa-form/dropdown-input/dropdown-input.component.html

@@ -1,22 +0,0 @@
-<div class="form-floating {{containerClasses}}"
-  [ngClass]="{'was-validated': (controlDir.control?.dirty || controlDir.control?.touched) && required}">
-
-  <!-- searchable is false -->
-  <ng-container *ngIf="!searchable">
-    <select #select id="{{id}}" class="form-select {{classes}}" [required]="required" [formControl]="formControl">
-      <option *ngFor="let item of items" [value]="valueField ? item[valueField] : item">
-        {{textField ? item[textField] : item}}</option>
-    </select>
-    <label for="{{id}}">{{label}}</label>
-  </ng-container>
-
-  <!-- searchable is true -->
-  <ng-select *ngIf="searchable" #select dir="rtl" class="{{classes}}" [formControl]="formControl" [items]="items"
-    [placeholder]="label" [notFoundText]="notFoundText" [required]="required" [bindValue]="valueField"
-    [bindLabel]="textField"
-    [ngClass]="{'is-invalid is-invalid:focus': (controlDir.control?.invalid && (controlDir.control?.dirty || controlDir.control?.touched)) && errorMsg,'is-valid is-valid:focus': (controlDir.control?.valid && (controlDir.control?.dirty || controlDir.control?.touched)  && (errorMsg || controlDir.value))}">
-  </ng-select>
-  <div class="invalid-feedback" *ngIf="errorMessage !== null">
-    {{errorMsg}}
-  </div>
-</div>