monkey-front-components 0.0.383 → 0.0.384

package/src/lib/components/dynamic/input/input.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, OnChanges, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MonkeyInputComponent } from 'monkey-style-guide';
+import { MECXFieldConfig } from '../../../interfaces';
+
+@Component({
+  selector: 'mecx-dynamic-input',
+  templateUrl: './input.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicInputComponent implements OnInit, OnChanges {
+  @Input() _field: MECXFieldConfig | null = null;
+
+  @Input() _form: FormGroup | null = null;
+
+  // eslint-disable-next-line object-curly-newline
+  @Input() _formErrors: any | any[] = {};
+
+  @Input() self: any;
+
+  @ViewChild('inputElement', {
+    static: true
+  }) inputElement: MonkeyInputComponent | null = null;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    // not to do
+  }
+
+  @HostBinding('class')
+  get className() {
+    return this._field?.style?.class;
+  }
+
+  ngOnInit() {
+    this.cdr.detectChanges();
+  }
+
+  ngOnChanges() {
+    this.cdr.detectChanges();
+  }
+
+  onChange(event: string) {
+    const { _form, _field, self } = this;
+    if (!_field || !_form) return;
+    const { name } = _field;
+    const func = _field?.functions?.onChange;
+    const isValid = _form?.get(_field?.name as string)?.valid;
+    if (func) {
+      self[func]({
+        name,
+        isValid,
+        event,
+        ctrl: _form.get(this._field?.name as string),
+        form: _form
+      });
+    }
+  }
+}

package/{lib/components/dynamic/input-phone/index.d.ts → src/lib/components/dynamic/input-phone/index.ts}

@@ -1 +1 @@
-export * from './input-phone.component';
+export * from './input-phone.component';

package/src/lib/components/dynamic/input-phone/input-phone.component.html

@@ -0,0 +1,7 @@
+<monkey-input-phone [name]="_field?.name" [label]="_field?.label | translate"
+  [helperMessage]="_field?.helperMessage | translate"
+  [placeholder]="_field?.placeholder | translate" [icon]="_field?.icon"
+  (onChange)="onChange($event)" [internationalNumber]="_field?.internationalNumber"
+  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
+  [maxLength]="_field?.maxLength" [formControl]="_form.controls[_field?.name]" #inputElement>
+</monkey-input-phone>

package/src/lib/components/dynamic/input-phone/input-phone.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectorRef, Component, HostBinding, Input, OnChanges, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MonkeyInputComponent } from 'monkey-style-guide';
+import { MECXFieldConfig } from '../../../interfaces';
+
+@Component({
+  selector: 'mecx-dynamic-input-phone',
+  templateUrl: './input-phone.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicInputPhoneComponent implements OnInit, OnChanges {
+  @Input() _field: MECXFieldConfig | null = null;
+
+  @Input() _form: FormGroup | null = null;
+
+  // eslint-disable-next-line object-curly-newline
+  @Input() _formErrors: any | any[] = {};
+
+  @Input() self: any;
+
+  @ViewChild('inputElement', {
+    static: true
+  }) inputElement: MonkeyInputComponent | null = null;
+
+  constructor(private cdr: ChangeDetectorRef) {
+    // not to do
+  }
+
+  @HostBinding('class')
+  get className() {
+    return this._field?.style?.class;
+  }
+
+  ngOnInit() {
+    this.cdr.detectChanges();
+  }
+
+  ngOnChanges() {
+    this.cdr.detectChanges();
+  }
+
+  onChange(event: string) {
+    const { _form, _field, self } = this;
+    if (!_field || !_form) return;
+    const { name } = _field;
+    const func = _field?.functions?.onChange;
+    const isValid = _form?.get(_field?.name as string)?.valid;
+    if (func) {
+      self[func]({
+        name,
+        isValid,
+        event,
+        ctrl: _form.get(this._field?.name as string),
+        form: _form
+      });
+    }
+  }
+}

package/{lib/components/dynamic/radio/index.d.ts → src/lib/components/dynamic/radio/index.ts}

@@ -1 +1 @@
-export * from './radio.component';
+export * from './radio.component';

package/src/lib/components/dynamic/radio/radio.component.html

@@ -0,0 +1,8 @@
+<monkey-radiobutton
+  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
+  [formControl]="_form.controls[_field?.name]" [helperMessage]="_field?.helperMessage | translate"
+  [label]="_field?.label | translate">
+  <monkey-option *ngFor="let value of _field?.value" [label]="value.description | translate"
+    [value]="value.value">
+  </monkey-option>
+</monkey-radiobutton>

package/src/lib/components/dynamic/radio/radio.component.ts

@@ -0,0 +1,22 @@
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MECXFieldConfig } from '../../../interfaces';
+
+@Component({
+  selector: 'mecx-dynamic-radio',
+  templateUrl: './radio.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicRadioComponent {
+  @Input() _field: MECXFieldConfig | null = null;
+
+  @Input() _form: FormGroup | null = null;
+
+  // eslint-disable-next-line object-curly-newline
+  @Input() _formErrors: any | any[] = {};
+
+  @HostBinding('class')
+  get className() {
+    return this._field?.style?.class;
+  }
+}

package/{lib/components/dynamic/select/index.d.ts → src/lib/components/dynamic/select/index.ts}

@@ -1 +1 @@
-export * from './select.component';
+export * from './select.component';

package/src/lib/components/dynamic/select/select.component.html

@@ -0,0 +1,14 @@
+<monkey-select
+  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
+  [formControl]="_form.controls[_field?.name]" [helperMessage]="_field?.helperMessage | translate"
+  [label]="_field?.label | translate" (click)="onHandleGenericLoad()"
+  [onHandleOptions]="_onHandleOptions" (onChange)="onChange($event)"
+  [labelSelect]="_form.get(_field?.name).value || ('FIELD.SELECT' | translate)"
+  [placeholder]="_field?.placeholder | translate">
+  <monkey-option [label]="'FIELD.LOADING' | translate" *ngIf="!_field?.value?.length"
+    enableClick="false">
+  </monkey-option>
+  <monkey-option *ngFor="let value of _field?.value" [label]="value.description | translate"
+    [value]="value.value">
+  </monkey-option>
+</monkey-select>

package/src/lib/components/dynamic/select/select.component.ts

@@ -0,0 +1,75 @@
+import {
+  Component,
+  HostBinding,
+  Input,
+  EventEmitter,
+  ViewEncapsulation
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MECXFieldConfig, MECXFieldConfigValue } from '../../../interfaces';
+
+@Component({
+  selector: 'mecx-dynamic-select',
+  templateUrl: './select.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicSelectComponent {
+  @Input() _field: MECXFieldConfig | null = null;
+
+  @Input() _form: FormGroup | null = null;
+
+  // eslint-disable-next-line object-curly-newline
+  @Input() _formErrors: any | any[] = {};
+
+  @Input() self: any;
+
+  @HostBinding('class')
+  get className() {
+    return this._field?.style?.class;
+  }
+
+  _onHandleOptions = new EventEmitter<any>();
+
+  onHandleGenericLoad() {
+    const { _form, _field, self } = this;
+    if (_form?.disabled || !_field || !_field?.functions?.onHandleGenericLoad) return;
+    const { name } = _field;
+    if ((_field?.value as MECXFieldConfigValue[])?.length) return;
+    const { func, url } = _field?.functions?.onHandleGenericLoad;
+    if (!func || !self[func]) {
+      console.error('onHandleGenericLoad not declared');
+      return;
+    }
+    _form?.disable();
+    self[func]({
+      name,
+      url,
+      form: _form,
+      callback: (data: any[]) => {
+        if (this._field) {
+          this._field.value = data;
+        }
+        this._form?.enable();
+        this._onHandleOptions.next(null);
+      }
+    });
+  }
+
+  onChange(event: string) {
+    const { _form, _field, self } = this;
+    if (!_field || !_form) return;
+    const { name } = _field;
+    const func = _field?.functions?.onChange;
+    const isValid = _form?.get(_field.name as string)?.valid;
+    if (func) {
+      self[func]({
+        name,
+        isValid,
+        event,
+        ctrl: _form?.get(this._field?.name as string),
+        form: _form,
+        value: _field.value
+      });
+    }
+  }
+}

package/{lib/components/dynamic/select-search/index.d.ts → src/lib/components/dynamic/select-search/index.ts}

@@ -1 +1 @@
-export * from './select-search.component';
+export * from './select-search.component';

package/src/lib/components/dynamic/select-search/select-search.component.html

@@ -0,0 +1,15 @@
+<monkey-select-search
+  errorMessage="{{ _formErrors[_field?.name]?.firstMessage | translate }} {{ _formErrors[_field?.name]?.lastMessage }}"
+  [formControl]="_form.controls[_field?.name]" [helperMessage]="_field?.helperMessage | translate"
+  [label]="_field?.label | translate" (click)="onHandleGenericLoad()"
+  [onHandleOptions]="_onHandleOptions" (onChange)="onChange($event)"
+  [fieldToCompare]="_field?.fieldToCompare"
+  [labelSelect]="_form.get(_field?.name).value || ('FIELD.SELECT' | translate)"
+  [placeholder]="_field?.placeholder | translate">
+  <monkey-option [label]="'FIELD.LOADING' | translate" *ngIf="!_field?.value?.length"
+    enableClick="false">
+  </monkey-option>
+  <monkey-option *ngFor="let value of _field?.value" [label]="value.description | translate"
+    [value]="value.value">
+  </monkey-option>
+</monkey-select-search>

package/src/lib/components/dynamic/select-search/select-search.component.ts

@@ -0,0 +1,76 @@
+import {
+  Component,
+  HostBinding,
+  Input,
+  EventEmitter,
+  ViewEncapsulation
+} from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MECXFieldConfig } from '../../../interfaces';
+
+@Component({
+  selector: 'mecx-dynamic-select-search',
+  templateUrl: './select-search.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class MECXDynamicSelectSearchComponent {
+  @Input() _field: MECXFieldConfig | null = null;
+
+  @Input() _form: FormGroup | null = null;
+
+  // eslint-disable-next-line object-curly-newline
+  @Input() _formErrors: any | any[] = {};
+
+  @Input() self: any;
+
+  @HostBinding('class')
+  get className() {
+    return this._field?.style?.class;
+  }
+
+  _onHandleOptions = new EventEmitter<any>();
+
+  onHandleGenericLoad() {
+    const { _form, _field, self } = this;
+    if (_form?.disabled || !_field || !_field?.functions?.onHandleGenericLoad) return;
+    const { name } = _field;
+    const { func, url } = _field?.functions?.onHandleGenericLoad || {
+      func: null, url: ''
+    };
+    if (!func || !self[func]) {
+      console.error('onHandleGenericLoad not declared');
+      return;
+    }
+    _form?.disable();
+    self[func]({
+      name,
+      url,
+      form: _form,
+      callback: (data: any[]) => {
+        if (this._field) {
+          this._field.value = data;
+        }
+        this._form?.enable();
+        this._onHandleOptions.next(null);
+      }
+    });
+  }
+
+  onChange(event: string) {
+    const { _form, _field, self } = this;
+    if (!_field || !_form) return;
+    const { name } = _field;
+    const func = _field?.functions?.onChange;
+    const isValid = _form?.get(_field?.name as string)?.valid;
+    if (func) {
+      self[func]({
+        name,
+        isValid,
+        event,
+        ctrl: _form.get(this._field?.name as string),
+        form: _form,
+        value: _field.value
+      });
+    }
+  }
+}

package/{lib/components/index.d.ts → src/lib/components/index.ts}

@@ -1,3 +1,3 @@
-export * from './base';
-export * from './dynamic';
-export * from './shared';
+export * from './base';
+export * from './dynamic';
+export * from './shared';

package/src/lib/components/shared/filter/filter.component.html

@@ -0,0 +1,51 @@
+<div class="d-flex flex-column full-width">
+  <div class="d-flex flex-column flex-md-row justify-content-between">
+    <div class="d-flex full-width">
+      <ng-container *ngIf="enableSearch">
+        <monkey-input-filter [placeholder]="searchPlaceholder | translate"
+          (onChange)="onSearchFilter($event)" icon="search-16" iconPosition="left"
+          [(value)]="_search">
+        </monkey-input-filter>
+      </ng-container>
+      <ng-container *ngIf="!_hasFilterByMenu">
+        <div class="d-flex actions" id="mecx-filters-add-filter">
+          <monkey-button type="filter" color="border" (click)="onHandleShowMenu()" icon="more-16"
+            iconPosition="right">
+            {{ 'BUTTONS.ADD-FILTER' | translate }}
+          </monkey-button>
+        </div>
+      </ng-container>
+    </div>
+    <div class="order hidden-sm hidden-xs">
+      <ng-container *ngTemplateOutlet="orderBy"></ng-container>
+    </div>
+  </div>
+  <ng-container *ngIf="_hasFilterByMenu">
+    <div class="separator"></div>
+    <div class="d-flex full-width">
+      <mecx-filter-selected (onSubmit)="onHandleSubmit($event)" (onClose)="onHandleClose()"
+        [model]="menus"></mecx-filter-selected>
+      <div class="more-filters">
+        <monkey-button type="filter" color="border" icon="more-16" id="mecx-filters-add-filter"
+          (click)="onHandleShowMenu()">
+        </monkey-button>
+      </div>
+    </div>
+  </ng-container>
+  <div class="order hidden-md hidden-lg">
+    <ng-container *ngTemplateOutlet="orderBy"></ng-container>
+  </div>
+</div>
+
+<mecx-filter-menu
+  *monkeyecxPopover="_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'"
+  (onSubmit)="onHandleSubmit($event)" (onClose)="onHandleClose()" [model]="menus">
+</mecx-filter-menu>
+
+<ng-template #orderBy>
+  <monkey-select-filter (onChange)="onHandleOrder($event)" [placeholder]="orderPlaceholder | translate" type="none"
+    [(value)]="_order">
+    <monkey-option *ngFor="let ordBy of orders" [label]="ordBy?.label | translate" [value]="ordBy?.value">
+    </monkey-option>
+  </monkey-select-filter>
+</ng-template>

package/src/lib/components/shared/filter/filter.component.scss

@@ -0,0 +1,79 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/breakpoints';
+
+:host {
+  display: flex;
+  width: 100%;
+  align-items: center;
+
+  @include media-breakpoint('lt-md') {
+    flex-direction: column;
+    max-width: 100%;
+
+    ::ng-deep monkey-input-filter {
+      width: 100%;
+    }
+
+    ::ng-deep monkey-select-filter {
+      width: 100%;
+    }
+
+    ::ng-deep monkey-button {
+      width: 100%;
+
+      button {
+        width: 100%;
+      }
+    }
+  }
+
+  .actions {
+    ::ng-deep monkey-button {
+      @include media-breakpoint('gt-sm') {
+        margin-left: 8px;
+
+        button {
+          width: 170px;
+        }
+      }
+    }
+  }
+
+  .more-filters {
+    ::ng-deep monkey-button {
+      monkey-icon {
+        margin-right: unset !important;
+      }
+    }
+  }
+
+  .order {
+    @include media-breakpoint('gt-sm') {
+      width: 230px;
+    }
+
+    @include media-breakpoint('lt-md') {
+      margin-top: 8px;
+    }
+  }
+
+  ::ng-deep monkey-button {
+    margin-bottom: 0px;
+  }
+
+  ::ng-deep mecx-form-field-filter mecx-form-field-body {
+    height: 40px;
+    margin: 0px;
+  }
+
+  ::ng-deep monkey-input-filter {
+    @include media-breakpoint('gt-sm') {
+      width: 464px;
+    }
+  }
+
+  .separator {
+    border-bottom: 1px solid #ebebeb;
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+}

package/src/lib/components/shared/filter/filter.component.ts

@@ -0,0 +1,117 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { MonkeyEcxFilterMenu, MonkeyEcxFilterOrder, MonkeyEcxUtils } from 'monkey-front-core';
+
+@Component({
+  selector: 'mecx-filter',
+  templateUrl: './filter.component.html',
+  styleUrls: ['./filter.component.scss']
+})
+export class MECXFilterComponent implements OnChanges {
+  @Input() searchPlaceholder = '';
+
+  @Input() orderPlaceholder = '';
+
+  @Input() menus: MonkeyEcxFilterMenu[] = [];
+
+  @Input() orders: MonkeyEcxFilterOrder[] = [];
+
+  @Input() enableSearch = true;
+
+  @Input()
+  set search(value: string) {
+    this._search = value;
+  }
+
+  @Input()
+  set order(value: any) {
+    this._order = value;
+  }
+
+  @Input() isLoading = false;
+
+  @Output() onFilter = new EventEmitter<any>();
+
+  _order: MonkeyEcxFilterOrder = null;
+
+  _search = '';
+
+  _showMenu = false;
+
+  _hasFilterByMenu = false;
+
+  _actionElement: HTMLElement = null;
+
+  closeMenu = () => {
+    this._showMenu = false;
+  };
+
+  constructor() {
+    // not to do
+  }
+
+  private validateValue({ field, value, getValue }: any) {
+    try {
+      value = value || getValue()?.[field];
+      if (!value) return false;
+      if (typeof value === 'object') {
+        return value && JSON.stringify(value) !== '{}';
+      }
+      return MonkeyEcxUtils.persistNullEmptyUndefined(value);
+    } catch (e) {
+      // not to do
+    }
+    return false;
+  }
+
+  private handleFilters() {
+    const { menus } = this;
+    let found = menus.find((_: any) => {
+      return this.validateValue(_);
+    });
+    if (!found) {
+      found = menus.find(({ children }) => {
+        return (children || [])?.find((_: any) => {
+          return this.validateValue(_);
+        });
+      });
+    }
+    this._hasFilterByMenu = !!found;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.menus) {
+      const { currentValue } = changes.menus;
+      if (currentValue && JSON.stringify(currentValue) !== '{}') {
+        this.handleFilters();
+      }
+    }
+  }
+
+  onSearchFilter(event: string) {
+    this.onFilter.next({ search: event });
+  }
+
+  onClearFilter() {
+    this._search = '';
+    this.onFilter.next({ search: null });
+  }
+
+  onHandleSubmit(event: any) {
+    this.onFilter.next(event);
+  }
+
+  onHandleShowMenu() {
+    this._actionElement = document.getElementById('mecx-filters-add-filter');
+    setTimeout(() => {
+      this._showMenu = true;
+    }, 0);
+  }
+
+  onHandleClose() {
+    this._showMenu = false;
+  }
+
+  onHandleOrder(event: any) {
+    this.onFilter.next({ sort: event });
+  }
+}

package/src/lib/components/shared/filter/filter.module.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { MonkeyEcxDirectivesModule, MonkeyEcxPipesModule } from 'monkey-front-core';
+import {
+  MonkeyButtonModule,
+  MonkeyIconModule,
+  MonkeyInputModule,
+  MonkeyOptionModule,
+  MonkeySelectModule
+} from 'monkey-style-guide';
+import { MECXFilterComponent } from './filter.component';
+import { MECXFilterMenuModule } from './menu';
+import { MECXFilterSelectedModule } from './selected';
+
+@NgModule({
+  declarations: [MECXFilterComponent],
+  imports: [
+    MonkeyEcxDirectivesModule,
+    MonkeyEcxPipesModule,
+    MonkeyButtonModule,
+    MonkeyInputModule,
+    MonkeyIconModule,
+    MonkeySelectModule,
+    MonkeyOptionModule,
+    TranslateModule.forChild(),
+    MECXFilterMenuModule,
+    MECXFilterSelectedModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule
+  ],
+  exports: [MECXFilterComponent]
+})
+export class MECXFilterModule {}

package/{lib/components/shared/filter/index.d.ts → src/lib/components/shared/filter/index.ts}

@@ -1,2 +1,2 @@
-export * from './filter.component';
-export * from './filter.module';
+export * from './filter.component';
+export * from './filter.module';

package/{lib/components/shared/filter/menu/index.d.ts → src/lib/components/shared/filter/menu/index.ts}

@@ -1 +1 @@
-export * from './menu.module';
+export * from './menu.module';