ng-ipa-library 0.7.2 → 0.7.6

package/src/lib/ipa-form/ipa-form.service.ts

@@ -0,0 +1,294 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms';
+import momentHijri from 'moment-hijri';
+import { Moment } from 'moment';
+import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class IPAFormService {
+  constructor(private parserFormatter: NgbDateParserFormatter) {}
+
+  /**
+   * check link is valid.
+   */
+  static linkValidation(control: AbstractControl): ValidationErrors | null {
+    const isValidLink =
+      /^((https?:\/\/)[\w-]+(\.[a-z-]+)+\.?(:\d+)?(\/\S*)?)$/.test(
+        control.value
+      );
+    return isValidLink || !control.value ? null : { link: true };
+  }
+
+  /**
+   * check mp4 link is valid.
+   */
+  static mp4LinkValidation(control: AbstractControl): ValidationErrors | null {
+    const isValidLink =
+      /^((https?:\/\/)[\w-]+(\.[a-z-]+)+\.?(:\d+)?(\/\S*)?(\/[\w\u0600-\u06FF]+\.mp4))$/.test(
+        control.value
+      );
+    return isValidLink || !control.value ? null : { linkMP4: true };
+  }
+
+  /**
+   * check mobile number is valid.
+   */
+  static mobileNo(control: AbstractControl): ValidationErrors | null {
+    const isValidLink = /^05\d{8}$/.test(control.value);
+    return isValidLink || !control.value ? null : { mobileNo: true };
+  }
+
+  /**
+   * check email is valid.
+   */
+  static email(control: AbstractControl): ValidationErrors | null {
+    const isValidLink =
+      /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/.test(
+        control.value
+      );
+    return isValidLink || !control.value ? null : { Email: true };
+  }
+
+  /**
+   * check national ID or iqama ID is valid.
+   */
+  static checkID(control: AbstractControl): ValidationErrors | null {
+    let isValid = false;
+    const value = control.value;
+    if (
+      IPAFormService.nationalIdValidate(value) ||
+      IPAFormService.iqamaIdValidate(value)
+    ) {
+      isValid = true;
+    } else {
+      isValid = false;
+    }
+    return isValid || !value ? null : { checkId: true };
+  }
+
+  getErrorMessage(control: FormControl, patternErrorMsg = ''): string | null {
+    for (const propertyName in control?.errors) {
+      if (
+        control?.errors.hasOwnProperty(propertyName) &&
+        (control.touched || control.dirty)
+      ) {
+        return this.getValidatorErrorMessage(
+          propertyName,
+          control.errors[propertyName],
+          patternErrorMsg
+        );
+      }
+    }
+    return null;
+  }
+
+  /**
+   * convert gregorian date to hijri date (Based on Umm al-Qura calculations).
+   * @param date: gregorian date
+   * @param format: iDD => day: ١٥, iMM => month: ٠٤, iMMM => month: ربيع ٢,
+   *               iMMMM => ربيع الثاني,  iYY => year: ٤٢, iYYYY => year: ١٤٤٢,
+   *               dd => ن, ddd => إثنين, dddd => الإثنين
+   * @example 'iYYYY/iM/iDهـ الموافق YYYY/M/Dم'
+   *           '١٤٤٢/٠٤/١٥هـ الموافق ٢٠٢٠/١١/٣٠'
+   */
+  convertToHijriDate(
+    date: string,
+    format = 'iYYYY-iMM-iDD',
+    lang = 'ar-SA'
+  ): string {
+    momentHijri.locale(lang);
+    return momentHijri(date).format(format);
+  }
+
+  convertToGregorianDate(
+    date: Moment,
+    format = 'YYYY-MM-DD',
+    lang = 'en'
+  ): string {
+    momentHijri.locale(lang);
+    const m = momentHijri.iConvert.toGregorian(
+      date.year(),
+      date.month(),
+      date.date()
+    );
+    return momentHijri(new Date(m.gy, m.gm, m.gd)).format(format);
+  }
+
+  getCurrentHijriDate() {
+    momentHijri.locale('en');
+    return momentHijri().format('iYYYY/iMM/iDD');
+  }
+
+  private getValidatorErrorMessage(
+    validatorName: string,
+    validatorValue: any,
+    patternErrorMsg: string
+  ): string {
+    if (validatorName === 'pattern') {
+      validatorValue = this.addPatternMsg(validatorValue, patternErrorMsg);
+    }
+    const config: any = {
+      required: 'هذا الحقل مطلوب',
+      pattern: `${validatorValue.message}`,
+      Email: 'خطأ في البريد الالكتروني (example@ipa.edu.sa)',
+      maxlength: `تجاوز عدد الحقل المسموح بها (${validatorValue.requiredLength}) حرف`,
+      minlength: `على الأقل عدد ${validatorValue.requiredLength} حرف.`,
+      min: `رقم اكبر من أو يساوي ${validatorValue.min}`,
+      max: `رقم اصغر من أو يساوي ${validatorValue.max}`,
+      ngbDate: this.getNgbDatepickerErrorMsg(validatorValue),
+      checkId: 'رقم الهوية أو الاقامة غير صحيح',
+      link: 'الرابط غير صحيح (http://google.com)',
+      linkMP4: 'الرابط غير صحيح (http://example.com/a.mp4)',
+      mobileNo: 'خطأ في رقم الجوال (05xxxxxxxx)',
+    };
+    return config[validatorName];
+  }
+
+  private addPatternMsg(validatorValue: any, patternErrorMsg: string) {
+    let pattern = {
+      ...validatorValue,
+      message: patternErrorMsg,
+    };
+    return pattern;
+  }
+
+  private getNgbDatepickerErrorMsg(validatorValue: any): string {
+    let msg = '';
+    if (validatorValue.maxDate) {
+      msg = `التاريخ المدخل "${this.parserFormatter.format(
+        validatorValue.maxDate.actual
+      )}" اكبر من تاريخ اليوم "${this.parserFormatter.format(
+        validatorValue.maxDate.maxDate
+      )}"`;
+    } else if (validatorValue.minDate) {
+      msg = `التاريخ المدخل "${this.parserFormatter.format(
+        validatorValue.minDate.actual
+      )}" يجب ان يكون اكبر من أو يساوي تاريخ البداية "${this.parserFormatter.format(
+        validatorValue.minDate.minDate
+      )}"`;
+    } else if (validatorValue.invalid) {
+      msg = `التاريخ المدخل غير صحيح ${validatorValue.invalid}.`;
+    }
+    return msg;
+  }
+
+  private static convertToEn(value: string) {
+    let newValue = '';
+    for (let i = 0; i < value.length; i++) {
+      let ch = value.charCodeAt(i);
+      if (ch >= 1584 && ch <= 1650) {
+        let newChar = ch - 1584;
+        newValue = newValue + String.fromCharCode(newChar);
+      } else {
+        newValue = newValue + String.fromCharCode(ch);
+      }
+    }
+    return newValue;
+  }
+
+  private static nationalIdValidate(civilId: string): boolean {
+    if (civilId) {
+      let strID = this.convertToEn(civilId);
+      let digits = '';
+      let counter = 0;
+      while (counter < 9) {
+        if ((counter + 1) % 2 == 0) {
+          digits = digits + strID.substring(counter, counter + 1);
+        } else {
+          digits =
+            digits + (+strID.substring(counter, counter + 1) * 2).toString();
+        }
+        counter++;
+      }
+      let intSum = 0;
+      let intSumTemp = 0;
+      let strSum;
+      let intOddSumDigit;
+      let CheckDigit;
+      counter = 0;
+      while (counter < digits.length) {
+        intSumTemp = +digits.charAt(counter) * 1;
+        intSum += intSumTemp;
+        counter++;
+      }
+      strSum = intSum.toString();
+      if (strSum.length == 1) {
+        intOddSumDigit = intSum;
+      } else {
+        intOddSumDigit = strSum.substring(strSum.length, strSum.length - 1);
+      }
+      if (intOddSumDigit == 0) {
+        CheckDigit = 0;
+      } else {
+        CheckDigit = (10 - +intOddSumDigit).toString();
+      }
+      let PublicID = this.convertToEn(civilId);
+      if (
+        CheckDigit ==
+          PublicID.substring(PublicID.length - 1, PublicID.length) &&
+        strID.length == 10 &&
+        strID.substring(0, 1) == '1'
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  private static iqamaIdValidate(civilId: string): boolean {
+    if (civilId) {
+      let strID = this.convertToEn(civilId);
+      let digits = '';
+      let counter = 0;
+      while (counter < 9) {
+        if ((counter + 1) % 2 == 0) {
+          digits = digits + strID.substring(counter, counter + 1);
+        } else {
+          digits =
+            digits + (+strID.substring(counter, counter + 1) * 2).toString();
+        }
+        counter++;
+      }
+      let intSum = 0;
+      let intSumTemp = 0;
+      let strSum;
+      let intOddSumDigit;
+      let CheckDigit;
+      counter = 0;
+      while (counter < digits.length) {
+        intSumTemp = +digits.charAt(counter) * 1;
+        intSum += intSumTemp;
+        counter++;
+      }
+      strSum = intSum.toString();
+      if (strSum.length == 1) {
+        intOddSumDigit = intSum;
+      } else {
+        intOddSumDigit = strSum.substring(strSum.length, strSum.length - 1);
+      }
+      if (intOddSumDigit == 0) {
+        CheckDigit = 0;
+      } else {
+        CheckDigit = (10 - +intOddSumDigit).toString();
+      }
+      let PublicID = this.convertToEn(civilId);
+      if (
+        CheckDigit ==
+          PublicID.substring(PublicID.length - 1, PublicID.length) &&
+        strID.length == 10 &&
+        strID.substring(0, 1) == '2'
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+<ngx-recaptcha2 [siteKey]="siteKey" [size]="recaptchaSize" [hl]="lang" [theme]="theme" [type]="recaptchaType"
+    [useGlobalDomain]="useGlobalDomain" [formControl]="formControl">
+</ngx-recaptcha2>

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

@@ -0,0 +1,42 @@
+import { Component, Input, OnInit, Self } from '@angular/core';
+import { FormControl, NgControl } from '@angular/forms';
+
+@Component({
+  selector: 'ipa-recaptcha',
+  templateUrl: './recaptcha.component.html',
+  styleUrls: ['./recaptcha.component.scss'],
+})
+export class RecaptchaComponent implements OnInit {
+  @Input() siteKey = '6LefJQYdAAAAAIlxmfkjNlWidMk8VukIZcs6lO5e';
+  @Input() recaptchaSize: 'compact' | 'normal' = 'normal';
+  @Input() lang = 'ar';
+  @Input() recaptchaType: 'image' | 'audio' = 'image';
+  @Input() theme: 'light' | 'dark' = 'light';
+  @Input() useGlobalDomain = true;
+  formControl: FormControl = new FormControl('');
+  constructor(@Self() public controlDir: NgControl) {
+    this.controlDir.valueAccessor = this;
+  }
+
+  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;
+  }
+}

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

@@ -0,0 +1,10 @@
+<div class="form-floating {{containerClasses}}">
+    <input #input id="{{id}}" class="form-control {{classes}}" [type]="type" [required]="required" pattern="{{pattern}}"
+        placeholder="{{placeholder}}" [formControl]="formControl" (input)="onChange(controlDir.control?.value)"
+        (blur)="onTouched()"
+        [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))}">
+    <label for="{{id}}">{{label}}</label>
+    <div class="invalid-feedback" *ngIf="errorMessage !== null">
+        {{errorMsg}}
+    </div>
+</div>

package/src/lib/ipa-form/text-input/text-input.component.ts

@@ -0,0 +1,69 @@
+import {
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  Self,
+  ViewChild,
+} from '@angular/core';
+import { FormControl, NgControl } from '@angular/forms';
+import { IPAFormService } from '../ipa-form.service';
+
+@Component({
+  selector: 'ipa-text-input',
+  templateUrl: './text-input.component.html',
+  styleUrls: ['./text-input.component.scss'],
+})
+export class TextInputComponent implements OnInit {
+  @ViewChild('input', { static: true }) input!: ElementRef;
+  @Input() id!: string;
+  @Input() type = 'text';
+  @Input() placeholder = 'please enter text';
+  @Input() label: string = 'text input';
+  @Input() required = false;
+  @Input() patternErrorMsg = 'invalid pattern';
+  @Input() pattern = '';
+  @Input() classes!: string;
+  @Input() containerClasses!: string;
+  formControl: FormControl = new FormControl('');
+  errorMsg!: string | null;
+
+  constructor(
+    private validationService: IPAFormService,
+    @Self() public controlDir: NgControl
+  ) {
+    this.controlDir.valueAccessor = this;
+  }
+
+  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 {
+    this.input.nativeElement.value = obj || '';
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  get errorMessage(): string | null {
+    this.errorMsg = this.validationService.getErrorMessage(
+      this.formControl,
+      this.patternErrorMsg
+    );
+    return this.errorMsg;
+  }
+}

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

@@ -0,0 +1,11 @@
+<div class="form-floating {{containerClasses}}">
+    <textarea #input id="{{id}}" class="form-control {{classes}}" [required]="required" pattern="{{pattern}}"
+        placeholder="{{placeholder}}" [formControl]="formControl" (input)="onChange(controlDir.control?.value)"
+        (blur)="onTouched()"
+        [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))}">
+    </textarea>
+    <label for="{{id}}">{{label}}</label>
+    <div class="invalid-feedback" *ngIf="errorMessage !== null">
+        {{errorMsg}}
+    </div>
+</div>

package/src/lib/ipa-form/textarea-input/textarea-input.component.ts

@@ -0,0 +1,69 @@
+import {
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+  Self,
+  ViewChild,
+} from '@angular/core';
+import { FormControl, NgControl } from '@angular/forms';
+import { IPAFormService } from '../ipa-form.service';
+
+@Component({
+  selector: 'ipa-textarea-input',
+  templateUrl: './textarea-input.component.html',
+  styleUrls: ['./textarea-input.component.scss'],
+})
+export class TextareaInputComponent implements OnInit {
+  @ViewChild('input', { static: true }) input: ElementRef<any> =
+    new ElementRef<any>(null);
+  @Input() id!: string;
+  @Input() placeholder = 'please enter text';
+  @Input() label: string = 'textarea input';
+  @Input() required = false;
+  @Input() patternErrorMsg = 'invalid pattern';
+  @Input() pattern!: string;
+  @Input() classes!: string;
+  @Input() containerClasses!: string;
+  formControl: FormControl = new FormControl('');
+  errorMsg!: string | null;
+
+  constructor(
+    private validationService: IPAFormService,
+    @Self() public controlDir: NgControl
+  ) {
+    this.controlDir.valueAccessor = this;
+  }
+
+  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 {
+    this.input.nativeElement.value = obj || '';
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  get errorMessage(): string | null {
+    this.errorMsg = this.validationService.getErrorMessage(
+      this.formControl,
+      this.patternErrorMsg
+    );
+    return this.errorMsg;
+  }
+}

package/{lib/models/apiException.d.ts → src/lib/models/apiException.ts}

@@ -1,5 +1,6 @@
 import { ApiResponse } from "./apiResponse";
+
 export interface ApiException extends ApiResponse {
     innerException: string;
     stackTrace: string;
-}
+}

package/src/lib/models/apiResponse.ts

@@ -0,0 +1,4 @@
+export interface ApiResponse {
+  statusCode: number;
+  message: string;
+}

package/src/lib/models/breadcrumbs.model.ts

@@ -0,0 +1,4 @@
+export interface Breadcrumbs {
+  nodeName: string;
+  nodeUrl: string | null;
+}

package/src/lib/models/decodedToken.model.ts

@@ -0,0 +1,6 @@
+export interface DecodedToken {
+  nameid?: string;
+  given_name?: string;
+  email?: string;
+  exp?: number;
+}

package/src/lib/models/exceptionUrl.model.ts

@@ -0,0 +1,4 @@
+export interface ExceptionUrl {
+  path: string;
+  method: string;
+}

package/src/lib/models/generateForm.model.ts

@@ -0,0 +1,29 @@
+export interface GenerateForm {
+  columns: Column[];
+}
+
+export interface Column {
+  arabicLabel: string;
+  englishName: string;
+  validationPattern?: string;
+  inputClasses?: string;
+  containerClasses?: string;
+  valueField?: string;
+  textField?: string;
+  patternErrorMsg?: string;
+  type: string;
+  size?: number;
+  required: boolean;
+  data?: Data[] | any[];
+  acceptedFiles?: string;
+  multipleFile?: number;
+  apiUrl?: string;
+  autoUploadFile?: boolean;
+  apiURlMethod?: string;
+  authorization?: string;
+}
+
+export interface Data {
+  id: number;
+  description: string;
+}

package/src/lib/models/pagedResult.ts

@@ -0,0 +1,4 @@
+export interface PagedResult<T> {
+  data: T[];
+  count: number;
+}

package/src/lib/models/user.model.ts

@@ -0,0 +1,7 @@
+export interface User {
+  id: string;
+  email: string;
+  displayName: string;
+  token: string;
+  imageUrl: string;
+}

package/src/lib/ng-ipa-library.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-ipa-library',
+  template: ``,
+  styles: []
+})
+export class NgIpaFormComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/ng-ipa-library.module.ts

@@ -0,0 +1,63 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ToastrModule } from 'ngx-toastr';
+import { DropzoneModule } from 'ngx-dropzone-wrapper';
+import { NgxCaptchaModule } from 'ngx-captcha';
+import { PipesModule } from './pipes/pipes.module';
+import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+import { TextInputComponent } from './ipa-form/text-input/text-input.component';
+import { TextareaInputComponent } from './ipa-form/textarea-input/textarea-input.component';
+import { DropdownInputComponent } from './ipa-form/dropdown-input/dropdown-input.component';
+import { LoaderComponent } from './core/components/loading/loading.component';
+import { GenerateFormComponent } from './generate-form/generate-form.component';
+import { FileUploadComponent } from './ipa-form/file-upload/file-upload.component';
+import { DatepickerComponent } from './ipa-form/datepicker/datepicker.component';
+import { HijriDatepickerComponent } from './ipa-form/datepicker/hijri-datepicker/hijri-datepicker.component';
+import { GregorianDatepickerComponent } from './ipa-form/datepicker/gregorian-datepicker/gregorian-datepicker.component';
+import { ShareButtonModule } from './share-button/share-button.module';
+import { RecaptchaComponent } from './ipa-form/recaptcha/recaptcha.component';
+
+@NgModule({
+  declarations: [
+    TextInputComponent,
+    TextareaInputComponent,
+    DropdownInputComponent,
+    LoaderComponent,
+    GenerateFormComponent,
+    FileUploadComponent,
+    DatepickerComponent,
+    HijriDatepickerComponent,
+    GregorianDatepickerComponent,
+    RecaptchaComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ToastrModule,
+    DropzoneModule,
+    NgxCaptchaModule,
+    PipesModule,
+    NgbDatepickerModule,
+    ShareButtonModule,
+    NgSelectModule,
+  ],
+  exports: [
+    TextInputComponent,
+    TextareaInputComponent,
+    DropdownInputComponent,
+    LoaderComponent,
+    GenerateFormComponent,
+    FileUploadComponent,
+    PipesModule,
+    HijriDatepickerComponent,
+    GregorianDatepickerComponent,
+    ShareButtonModule,
+    RecaptchaComponent,
+    NgSelectModule,
+  ],
+})
+export class NgIPALibraryModule {}

package/src/lib/pipes/hijri-date.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import momentHijri from 'moment-hijri';
+@Pipe({
+  name: 'hijriDate',
+})
+export class HijriDatePipe implements PipeTransform {
+  transform(
+    date: string,
+    format: string = 'iYYYY-iMM-iDD',
+    lang: 'ar' | 'en' = 'en'
+  ): string {
+    momentHijri.locale(lang);
+    return momentHijri(date).format(format);
+  }
+}