monkey-front-components 0.0.384 → 0.0.387

package/src/lib/components/base/base-component.ts

@@ -1,359 +0,0 @@
-/* eslint-disable max-len */
-import { AbstractControl, FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs';
-import { OnDestroy, Directive } from '@angular/core';
-import { takeUntil } from 'rxjs/operators';
-import { MonkeyUtils } from 'monkey-style-guide';
-import {
-  MonkeyEcxCommonsService,
-  MonkeyEcxErrorResponse,
-  MonkeyEcxPaginationOptions,
-  MonkeyEcxScrollOptions,
-  MonkeyEcxSupportOptions,
-  MonkeyEcxTranslateOptions,
-  ValidateUtils
-} from 'monkey-front-core';
-
-@Directive({
-  selector: '[baseComponent]'
-})
-export abstract class BaseComponent implements OnDestroy {
-  __monkeyecxFormErrors: any | any[];
-
-  __unsubscribeAll: Subject<any>;
-
-  __paginationOptions: MonkeyEcxPaginationOptions | null = null;
-
-  __i18n: any;
-
-  __isMobile = this.isMobile();
-
-  __locales = ['pt-BR', 'es-CL'];
-
-  private paginationFunc: any;
-
-  protected constructor() {
-    this.__unsubscribeAll = new Subject();
-  }
-
-  private isMobile() {
-    const isMobileWidth = (window.screen.width <= 640) ||
-      (window.matchMedia &&
-        window.matchMedia('only screen and (max-width: 640px)').matches
-      );
-    return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Mobile/i.test(
-      navigator.userAgent
-    )) || isMobileWidth;
-  }
-
-  private handlePagination(create = true) {
-    const { __paginationOptions } = this;
-
-    if (__paginationOptions) {
-      const { mainElement, service } = __paginationOptions;
-
-      const element = document.getElementById(mainElement);
-
-      if (element) {
-        element.scroll = null;
-        element.onscroll = null;
-
-        element.removeEventListener('scroll', (element as any).eventListeners('scroll'));
-        element.removeEventListener('scroll', (element as any).eventListeners('scroll')[0]);
-        if (create) {
-          element.addEventListener('scroll', () => {
-            const { scrollTop, scrollHeight, offsetHeight } = element;
-            const contentHeight = scrollHeight - offsetHeight;
-
-            if (contentHeight <= scrollTop) {
-              service.doPagination();
-            }
-          });
-        }
-      }
-    }
-  }
-
-  private handleSupport(supportControls: MonkeyEcxSupportOptions) {
-    const { service, show } = supportControls;
-    const method = show ? 'show' : 'hide';
-    service[method.toLowerCase()]();
-  }
-
-  private handleTranslate(translateOptions: MonkeyEcxTranslateOptions) {
-    const { service } = translateOptions;
-    service.__oni18nDataChanged$
-      .pipe(takeUntil(this.__unsubscribeAll))
-      .subscribe(() => {
-        const data = service.__i18n;
-        if (data) {
-          this.__i18n = data;
-        }
-      });
-  }
-
-  private handleViewScroll(options: MonkeyEcxScrollOptions) {
-    const { elementId, service } = options;
-
-    if (elementId === service?.__savedState?.scrollElementId) {
-      this.goScroll(elementId);
-
-      service.__savedState.scrollElementId = null;
-    }
-  }
-
-  private getErrorFirstMessageTranslated(formControl: AbstractControl | null = null) {
-    if (formControl?.hasError('required')) return 'FIELD-REQUIRED';
-    if (formControl?.hasError('invalid')) return 'FIELD-INVALID';
-    if (formControl?.hasError('email')) return 'INVALID-EMAIL';
-    if (formControl?.hasError('minlength')) return 'MIN-LENGTH';
-    if (formControl?.hasError('maxlength')) return 'MAX-LENGTH';
-    if (formControl?.hasError('max')) return 'MAX';
-    if (formControl?.hasError('min')) return 'MIN';
-    if (formControl?.hasError('passwordsNotMatching')) return 'MATCH-PASSWORD';
-    if (formControl?.hasError('invalidDate')) return 'INVALID-DATE';
-    if (formControl?.hasError('invalidTrue')) return 'INVALID-TRUE';
-    if (formControl?.hasError('invalidCpfCnpj')) return 'INVALID-DOCUMENT';
-    if (formControl?.hasError('invalidZipCode')) return 'INVALID-ZIPCODE';
-    if (formControl?.hasError('invalidCombo')) return 'INVALID-COMBO';
-    if (formControl?.hasError('invalidUrl')) return 'INVALID-URL';
-    if (formControl?.hasError('invalidUnlockRegister')) { return 'INVALID-UNLOCK-REGISTER'; }
-    if (formControl?.hasError('dateStartMustBeLessThanAnd')) {
-      return 'DATE-START-MUST-BE-LESS-THAN-AND';
-    }
-    if (formControl?.hasError('dateEndMustBeGreaterThanStart')) {
-      return 'DATE-END-MUST-BE-GREATER-THAN-SART';
-    }
-    if (formControl?.hasError('phone')) return 'INVALID-PHONE';
-    if (formControl?.hasError('invalidValueGreaterThanZero')) return 'INVALID-GREATER-THAN-ZERO';
-
-    return 'FIELD-INVALID';
-  }
-
-  private getErrorLastMessageNotTranslated(formControl: AbstractControl | null = null) {
-    if (formControl?.hasError('minlength')) {
-      return `${formControl?.getError('minlength').requiredLength} caracteres.`;
-    }
-    if (formControl?.hasError('maxlength')) {
-      return `${formControl?.getError('maxlength').requiredLength} caracteres.`;
-    }
-    if (formControl?.hasError('max')) { return `${formControl?.getError('max').max}`; }
-    if (formControl?.hasError('min')) { return `${formControl?.getError('min').min}`; }
-
-    return '';
-  }
-
-  public validateFormWithTranslate(f: FormGroup, index?: number): boolean {
-    const formErrors: any = f.value;
-
-    if (f.status === 'VALID') return true;
-
-    if (!formErrors) return true;
-    Object.entries(formErrors).forEach(([key, value]) => {
-      const control = f.get(key);
-      formErrors[key] = '';
-      if (control && !control.valid) {
-        const msg = {
-          first: `ERRORS.${this.getErrorFirstMessageTranslated(f.get(key))}`,
-          last: this.getErrorLastMessageNotTranslated(f.get(key))
-        };
-        formErrors[key] = msg;
-      }
-    });
-
-    if (MonkeyUtils.persistNullEmptyUndefined(index)) { this.__monkeyecxFormErrors[index || 0] = formErrors; } else {
-      this.__monkeyecxFormErrors = formErrors;
-    }
-
-    return false;
-  }
-
-  public copyToClipboard(val: string) {
-    const selBox = document.createElement('textarea');
-    selBox.style.position = 'fixed';
-    selBox.style.left = '0';
-    selBox.style.top = '0';
-    selBox.style.opacity = '0';
-    selBox.value = val;
-    document.body.appendChild(selBox);
-    selBox.focus();
-    selBox.select();
-    document.execCommand('copy');
-    document.body.removeChild(selBox);
-  }
-
-  public validateForm(f: FormGroup, index?: number, alias?: string): boolean {
-    const formErrors: any = f.value;
-    if (f.status === 'VALID') return true;
-
-    if (!formErrors) return true;
-    Object.entries(formErrors).forEach(([key, value]) => {
-      const control = f.get(key);
-      formErrors[key] = '';
-      if (control && !control.valid) {
-        const msg = {
-          firstMessage: `ERRORS.${this.getErrorFirstMessageTranslated(
-            f.get(key)
-          )}`,
-          lastMessage: this.getErrorLastMessageNotTranslated(f.get(key))
-        };
-        formErrors[key] = msg;
-      }
-    });
-
-    if (MonkeyUtils.persistNullEmptyUndefined(index)) {
-      this.__monkeyecxFormErrors[index || 0] = formErrors;
-    } else {
-      let obj: any;
-
-      if (alias) {
-        obj = {
-          [alias]: {
-            ...formErrors
-          }
-        };
-      } else {
-        obj = formErrors;
-      }
-
-      this.__monkeyecxFormErrors = {
-        ...this.__monkeyecxFormErrors,
-        ...obj
-      };
-    }
-    f.markAllAsTouched();
-    return false;
-  }
-
-  public clearAllServiceData(clearData: boolean) {
-    const context = this;
-    Object.values(context).forEach((ctx: any) => {
-      if (ctx instanceof MonkeyEcxCommonsService) {
-        ctx.clear(clearData);
-      }
-    });
-  }
-
-  public ngOnInit(args: {
-    paginationOptions?: MonkeyEcxPaginationOptions;
-    supportControls?: MonkeyEcxSupportOptions;
-    scrollOptions?: MonkeyEcxScrollOptions;
-    translateOptions?: MonkeyEcxTranslateOptions;
-  }) {
-    if (args?.paginationOptions) {
-      this.__paginationOptions = args?.paginationOptions;
-      this.handlePagination();
-    }
-    if (args?.supportControls) {
-      this.handleSupport(args?.supportControls);
-    }
-    if (args?.translateOptions) {
-      this.handleTranslate(args?.translateOptions);
-    }
-    if (args?.scrollOptions) {
-      this.handleViewScroll(args.scrollOptions);
-    }
-  }
-
-  public ngOnDestroy(clearData: boolean = true) {
-    this.__unsubscribeAll.next();
-    this.__unsubscribeAll.complete();
-    this.clearAllServiceData(clearData);
-    this.handlePagination(false);
-  }
-
-  public handleErrorFromServices(error: MonkeyEcxErrorResponse, f: FormGroup) {
-    this.__monkeyecxFormErrors = null;
-    if (error.type === 'Parameter_Error') {
-      Object.entries(f.value).forEach(([key, value]) => {
-        error.notifications.forEach((_: any) => {
-          const field = _.split(':')[0];
-          const description = _.split(':')[1];
-          if (field === key) {
-            const msg = {
-              firstMessage: '',
-              lastMessage: description
-            };
-            this.__monkeyecxFormErrors = {
-              ...this.__monkeyecxFormErrors,
-              [key]: msg
-            };
-            f.controls[key].setErrors({
-              incorrect: true
-            });
-          }
-        });
-      });
-    }
-
-    f.markAllAsTouched();
-  }
-
-  public goBack() {
-    window.history.back();
-  }
-
-  public goScroll(id: string) {
-    const element = document.getElementById(id);
-    if (element) element.scrollIntoView();
-  }
-
-  public getEmbeddedData(data: any, field: string): any[] | any {
-    const { _embedded } = data;
-    return _embedded ? _embedded[field] : null;
-  }
-
-  public openWindow(url: string) {
-    window.open(`${url}`, '_blank');
-  }
-
-  public fillI18n(data: any) {
-    this.__i18n = data;
-  }
-
-  public getCountryPrefix(country: string) {
-    return {
-      br: 55,
-      cl: 56
-    }[country];
-  }
-
-  public getCountryCurrencyChartFormat(country: string) {
-    return {
-      br: 'R$ #,###,##0.00',
-      cl: 'CLP #,###,##0'
-    }[country];
-  }
-
-  public getCountryValidators(country: string) {
-    return {
-      br: {
-        governmentId: ValidateUtils.DocumentValidator
-      },
-      cl: {
-        governmentId: ValidateUtils.DocumentRutValidator
-      }
-    }[country];
-  }
-
-  public isAbleToHandlePagination() {
-    const { __paginationOptions } = this;
-
-    if (__paginationOptions) {
-      const { service } = __paginationOptions;
-
-      const links = service.__links;
-      if (links && links?.next) return true;
-    }
-    return false;
-  }
-
-  public onHandlePagination() {
-    const { __paginationOptions } = this;
-
-    if (__paginationOptions) {
-      const { service } = __paginationOptions;
-      service.doPagination();
-    }
-  }
-}

package/src/lib/components/base/base-dynamic-array.ts

@@ -1,233 +0,0 @@
-import { Directive, EventEmitter, Input, OnInit, OnChanges, Output } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MonkeyUtils } from 'monkey-style-guide';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { MECXFieldConfig, MECXFieldConfigValidator } from '../../interfaces';
-import { BaseComponent } from './base-component';
-import { validators } from './base-validators';
-
-@Directive({
-  selector: '[baseDynamicArray]'
-})
-export abstract class BaseDynamicArray extends BaseComponent implements OnInit, OnChanges {
-  @Input() onHandleSubmit = new EventEmitter<any>();
-
-  @Input() onHandleUpdateForm = new EventEmitter<any>();
-
-  @Output() onHandleSubmitFormReady: EventEmitter<any> = new EventEmitter<any>();
-
-  @Input() self: any;
-
-  @Input() fields: MECXFieldConfig[] = [];
-
-  @Input() data: any;
-
-  @Input() qtd: number = 1;
-
-  @Input() disabled: boolean = false;
-
-  _form: FormGroup | null = null;
-
-  // eslint-disable-next-line object-curly-newline
-  _plusValidations: any[] = [];
-
-  private changesUnsubscribe = new Subject();
-
-  constructor(private fb: FormBuilder) {
-    super();
-  }
-
-  private handleInternalPlusValidation(
-    mainField: any,
-    data: any
-  ) {
-    const { operator, field, value } = mainField;
-    const validators: any = {
-      e: (val1: any, val2: string) => { return val1 === val2; },
-      lt: (val1: any, val2: string) => { return val1 < val2; },
-      gt: (val1: any, val2: string) => { return val1 > val2; }
-    };
-
-    return validators[operator](data?.[field] || data, value);
-  }
-
-  private makeInternalPlusValidation(
-    data: any,
-    sourceField: string,
-    settings: any,
-    rowIndex: number
-  ) {
-    const changeFields = (show: boolean) => {
-      const saved = [...this.fields];
-
-      saved.map((val) => {
-        const valSaved = {
-          ...val
-        };
-        if (val.name === sourceField) {
-          this._plusValidations[rowIndex] = {
-            [sourceField]: {
-              ...valSaved,
-              alwaysShow: show
-            }
-          };
-          this.createOneControl(val.name, this.formValues?.controls[rowIndex], show);
-        } else {
-          this._plusValidations[rowIndex] = {
-            ...valSaved
-          };
-        }
-        return null;
-      });
-    };
-
-    const validated = this.handleInternalPlusValidation(settings, data);
-    changeFields(validated);
-  }
-
-  private createOneControl(fieldName: string, ctrl: any, create = true) {
-    const { fields } = this;
-    if (!fields) return;
-
-    fields.forEach((field: MECXFieldConfig) => {
-      const { fieldType, validations, name, disabled } = field;
-      if (name !== fieldName) return;
-      let { value } = field;
-      if (fieldType === 'button') return;
-      if (fieldType === 'radiobutton' || fieldType === 'checkbox' || fieldType === 'select') {
-        value = '';
-      }
-      if (create) {
-        const control = this.fb.control(value, this.bindValidations(validations || []));
-        if (disabled || this.disabled) control.disable();
-        ctrl.addControl(name, control);
-      } else {
-        ctrl.removeControl(name);
-      }
-    });
-  }
-
-  private createControl(data?: any) {
-    const { fields } = this;
-    if (!fields) return null;
-    // eslint-disable-next-line object-curly-newline
-    const group = this.fb.group({});
-    fields.forEach((field: MECXFieldConfig) => {
-      const { fieldType, validations, name, disabled, alwaysShow } = field;
-      let { value } = field;
-      if (field.alwaysShowPlusValidation) {
-        if (!this.handleInternalPlusValidation(field.alwaysShowPlusValidation, data)) return;
-      } else if (!alwaysShow) return;
-      if (fieldType === 'button') return;
-      if (fieldType === 'radiobutton' || fieldType === 'checkbox' || fieldType === 'select') {
-        value = '';
-      }
-      const control = this.fb.control(value, this.bindValidations(validations || []));
-      if (disabled || this.disabled) control.disable();
-      group.addControl(name as string, control);
-    });
-
-    return group;
-  }
-
-  private bindValidations(validations: MECXFieldConfigValidator[]) {
-    if (validations.length > 0) {
-      const validList: any[] = [];
-      validations.forEach((valid: MECXFieldConfigValidator) => {
-        const validated = valid.param
-          ? validators[valid.name](valid.param)
-          : validators[valid.name];
-        validList.push(validated);
-      });
-      return Validators.compose(validList);
-    }
-    return null;
-  }
-
-  private buildForm(): FormGroup {
-    const form = this.fb.group({
-      fields: this.fb.array([])
-    });
-
-    form?.controls.fields?.valueChanges.subscribe((_) => {
-      this.watchForChanges();
-    });
-
-    return form;
-  }
-
-  private watchForChanges() {
-    const { fields, changesUnsubscribe } = this;
-    changesUnsubscribe.next();
-
-    this.formValues?.controls?.map((control: any, index: number) => {
-      fields.forEach((fieldConfig: MECXFieldConfig) => {
-        const { name, alwaysShowPlusValidation } = fieldConfig;
-        if (!alwaysShowPlusValidation) return;
-        const { field } = alwaysShowPlusValidation;
-        if (field) {
-          control.controls[field]?.valueChanges.pipe(
-            takeUntil(changesUnsubscribe)).subscribe((_: any) => {
-            this.makeInternalPlusValidation(
-              _,
-              name as string,
-              alwaysShowPlusValidation,
-              index
-            );
-          });
-        }
-      });
-      return null;
-    });
-  }
-
-  public formBase = () => {
-    // return this.fb.group(this.createControl());
-    return this.createControl();
-  };
-
-  public get formValues() {
-    return this._form ? (this._form.get('fields') as FormArray) : null;
-  }
-
-  public fillValues() {
-    const { data, qtd } = this;
-    if ((!this._form) && qtd) return;
-    if (qtd > 0) {
-      Array<any>(qtd)
-        .fill(null)
-        .map((_, index) => {
-          let form = this.createControl();
-          if (data && data[index]) {
-            form = this.createControl(data[index]);
-            const handledData = data[index];
-            Object.entries(handledData).forEach(([key, value]) => {
-              if (MonkeyUtils.persistNullEmptyUndefined(value) && form?.controls[key]) {
-                form?.controls[key].setValue(value);
-              }
-            });
-          }
-          this.formValues?.push(form as any);
-
-          return null;
-        });
-    }
-  }
-
-  ngOnInit() {
-    this._form = this.buildForm();
-    this.fillValues();
-
-    this.onHandleUpdateForm.subscribe(() => {
-      this.fillValues();
-    });
-  }
-
-  ngOnChanges() {
-    if (!this._form) {
-      this._form = this.buildForm();
-    }
-    this.fillValues();
-  }
-}

package/src/lib/components/base/base-dynamic.ts

@@ -1,90 +0,0 @@
-import { Directive, EventEmitter, Input, OnInit, OnChanges, Output } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MonkeyUtils } from 'monkey-style-guide';
-import { MECXFieldConfig, MECXFieldConfigValidator } from '../../interfaces';
-import { BaseComponent } from './base-component';
-import { validators } from './base-validators';
-
-@Directive({
-  selector: '[baseDynamic]'
-})
-export abstract class BaseDynamic extends BaseComponent implements OnInit, OnChanges {
-  @Input() onHandleSubmit = new EventEmitter<any>();
-
-  @Input() onHandleUpdateForm = new EventEmitter<any>();
-
-  @Output() onHandleSubmitFormReady: EventEmitter<any> = new EventEmitter<any>();
-
-  @Input() self: any;
-
-  @Input() fields: MECXFieldConfig[] = [];
-
-  @Input() data: any;
-
-  @Input() disabled: boolean = false;
-
-  _form: FormGroup | null = null;
-
-  constructor(private fb: FormBuilder) {
-    super();
-  }
-
-  private createControl() {
-    const { fields } = this;
-    if (!fields) return null;
-    // eslint-disable-next-line object-curly-newline
-    const group = this.fb.group({});
-    fields.forEach((field: MECXFieldConfig) => {
-      const { fieldType, validations, name, disabled } = field;
-      let { value } = field;
-      if (fieldType === 'button') return;
-      if (fieldType === 'radiobutton' || fieldType === 'checkbox' || fieldType === 'select') {
-        value = '';
-      }
-      const control = this.fb.control(value, this.bindValidations(validations || []));
-      if (disabled || this.disabled) control.disable();
-      group.addControl(name as string, control);
-    });
-    return group;
-  }
-
-  private bindValidations(validations: MECXFieldConfigValidator[]) {
-    if (validations.length > 0) {
-      const validList: any[] = [];
-      validations.forEach((valid: MECXFieldConfigValidator) => {
-        const validated = valid.param
-          ? validators[valid.name](valid.param)
-          : validators[valid.name];
-        validList.push(validated);
-      });
-      return Validators.compose(validList);
-    }
-    return null;
-  }
-
-  public fillValues() {
-    const { data } = this;
-    if (!data || !this._form) return;
-    Object.entries(data).forEach(([key, value]) => {
-      if (MonkeyUtils.persistNullEmptyUndefined(value) && this._form?.controls[key]) {
-        this._form?.controls[key]?.setValue(value);
-      }
-    });
-  }
-
-  ngOnInit() {
-    this._form = this.createControl();
-    this.fillValues();
-
-    this.onHandleUpdateForm.subscribe(() => {
-      this.fillValues();
-    });
-  }
-
-  ngOnChanges() {
-    if (!this._form) {
-      this._form = this.createControl();
-    }
-    this.fillValues();
-  }
-}