ng-ipa-library 0.7.5 → 0.7.6

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,68 @@
+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-dropdown-input',
+  templateUrl: './dropdown-input.component.html',
+  styleUrls: ['./dropdown-input.component.scss'],
+})
+export class DropdownInputComponent implements OnInit {
+  @ViewChild('select', { static: true }) input!: HTMLSelectElement;
+  @Input() id!: string;
+  @Input() label: string = 'text input';
+  @Input() items: any[] = [];
+  @Input() textField!: string;
+  @Input() valueField!: string;
+  @Input() required = false;
+  @Input() searchable = false;
+  @Input() notFoundText = 'لا يوجد بيانات';
+  @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;
+    this.formControl.patchValue(null);
+  }
+
+  onChange(event: any): void {}
+
+  onTouched(): void {}
+  writeValue(obj: any): void {
+    if (this.input) this.input.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);
+    return this.errorMsg;
+  }
+}

package/src/lib/ipa-form/file-upload/file-upload.component.html

@@ -0,0 +1,37 @@
+<div class="file-upload">
+    <div class="upload-overlay" [dropzone]="config" (error)="onUploadError($event)"
+        (queueComplete)="operationCompleted($event)" (success)="onUploadSuccess($event)" (dragenter)="dragEnter = true"
+        (dragLeave)="dragEnter = false" (drop)="dragEnter = false" (dragEnd)="dragEnter = false"
+        [class.active-border]="dragEnter" (sending)="sending($event)" (reset)="reset($event)"
+        (addedFile)="fileWasAdded($event)">
+    </div>
+    <div class="upload-btn-wrapper">
+        <div>
+            <div class="subtitle mb-2">
+                {{label}}
+                <span *ngIf="required" class="required">*</span>
+            </div>
+            <hr>
+            <span style="font-size: 12px;">قم بسحب الملف أو اضغط هنا</span>
+            <i class="fas fa-upload upload-icon mr-2"></i>
+        </div>
+        <div *ngIf="acceptedFiles.length > 0" class="allowed-extensions">
+            الصيغة المسموح بها:
+            <span class="extensions">{{ acceptedFiles }}</span>
+        </div>
+        <div class="allowed-extensions">
+            اقصى حجم للمرفق:
+            <span class="extensions">{{ maxFileSize }} MB</span>
+        </div>
+    </div>
+</div>
+<div id="attachment-status" style="text-align: center; margin-top:10px;">
+    <span style="font-size: 14px; margin: auto; font-weight:bold;" *ngFor="let file of currentFiles">
+        {{ file.name }} <i (click)="deleteFile(file)" class="fas fa-trash"
+            style="color:firebrick; cursor: pointer;"></i>
+        <br>
+    </span>
+    <ul class="list-unstyled">
+        <li class="text-danger" style="font-size: 12px;" *ngFor="let error of errors">{{error}}</li>
+    </ul>
+</div>

package/src/lib/ipa-form/file-upload/file-upload.component.scss

@@ -0,0 +1,45 @@
+.subtitle {
+  border-bottom: none;
+  display: block;
+  line-height: 2;
+}
+
+.file-upload {
+  border: dashed 1px #ccc;
+  display: block;
+  min-height: 150px;
+  border-radius: 15px;
+  width: 350px;
+  cursor: pointer;
+  position: relative;
+  margin: auto;
+}
+
+.upload-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.upload-btn-wrapper {
+  text-align: center;
+}
+
+.upload-icon {
+  margin-right: 5px;
+}
+
+.list-unstyled {
+  margin: 10px !important;
+  padding: 14px !important;
+  list-style: none;
+}
+
+.allowed-extensions {
+  color: #4d7297;
+}
+
+.required {
+  color: #dc3545;
+  font-size: 20px;
+}

package/src/lib/ipa-form/file-upload/file-upload.component.ts

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { DropzoneConfigInterface, DropzoneDirective } from 'ngx-dropzone-wrapper';
+
+@Component({
+  selector: 'ipa-file-upload',
+  templateUrl: './file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss']
+})
+export class FileUploadComponent implements OnInit {
+  @ViewChild(DropzoneDirective, { static: false })
+  dropzoneDir!: DropzoneDirective;
+  @Input() label = '';
+  @Input() required = false;
+  @Input() acceptedFiles = '';
+  @Input() multiple = 1; // set maxFiles (NOT uploadMultiple)in the config object,
+  @Input() maxFileSize = 2;
+  @Input() method = 'POST';
+  @Input() autoUpload = false;
+  @Input() apiUrl = 'apiUrl';
+  @Input() authorization!: string;
+  @Output() successUpload = new EventEmitter();
+  @Output() fileAdded = new EventEmitter();
+  @Output() fileDeleted = new EventEmitter();
+  dragEnter = false;
+  errors: string[] = [];
+  config!: DropzoneConfigInterface;
+  filesAdded: File[] = [];
+  currentFiles: File[] = [];
+
+  constructor(
+    // private authService: AuthService,
+    private toastrService: ToastrService
+  ) {}
+
+  ngOnInit(): void {
+    this.label = 'رفع ' + this.label;
+    this.config = {
+      url: this.apiUrl,
+      method: this.method,
+      headers: {
+        Authorization: 'Bearer ' + this.authorization,
+      },
+      maxFilesize: this.maxFileSize,
+      maxFiles: this.multiple,
+      uploadMultiple: this.multiple > 1,
+      dictInvalidFileType: 'صيغة الملف غير مسموح بها',
+      dictFileTooBig: 'الحجم تجاوز الحد المسموح',
+      dictMaxFilesExceeded:
+        'الرجاء حذف الملفات الموجودة حاليا لتتمكن من رفع هذا الملف',
+      acceptedFiles: this.acceptedFiles,
+      autoProcessQueue: this.autoUpload,
+      previewTemplate: '<span></span>',
+    };
+  }
+
+  operationCompleted(e: any): void {
+    if (this.filesAdded.length > 0) {
+      this.successUpload.emit(this.filesAdded);
+      this.filesAdded = [];
+    }
+    this.dropzoneDir.reset();
+  }
+
+  onUploadSuccess(e: any): void {
+    const file = e[0];
+    if (file.status === 'success') {
+      this.filesAdded.push(file);
+    }
+
+    this.toastrService.success('تم تحميل المرفقات بنجاح');
+  }
+
+  onUploadError(e: any): void {
+    if (e[1]) {
+      this.errors = [];
+      this.errors.push(`${e[1]} (${e[0].name})`);
+    }
+  }
+
+  fileWasAdded(e: File): void {
+    const myDropzone = this.dropzoneDir.dropzone();
+    if (this.multiple === 1) {
+      this.currentFiles = [];
+      this.filesAdded = [];
+      this.errors = [];
+      const files = myDropzone.files;
+      if (files.length > 1) {
+        myDropzone.removeFile(files[0]);
+      }
+    }
+    this.currentFiles.push(e);
+    this.fileAdded.emit(e);
+  }
+
+  sending(e: any): void {
+    this.errors = [];
+  }
+
+  reset(e: any): void {}
+
+  deleteFile(file: any): void {
+    this.currentFiles = this.currentFiles.filter(
+      (x) => x.name !== file.name && x.size !== file.size
+    );
+    this.errors = [];
+    this.fileDeleted.emit();
+  }
+}