monkey-front-components 0.0.384 → 0.0.387

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

@@ -1,122 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu, MonkeyEcxFilterMenuChildren, MonkeyEcxUtils } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-menu',
-  templateUrl: './menu.component.html',
-  styleUrls: ['./menu.component.scss']
-})
-export class MECXFilterMenuComponent implements OnChanges {
-  @Input() model: MonkeyEcxFilterMenu[] = [];
-
-  @Output() onClose = new EventEmitter<any>();
-
-  @Output() onSubmit = new EventEmitter<any>();
-
-  _onHandleSubmit: Function = null;
-
-  _model: MonkeyEcxFilterMenu[] = [];
-
-  _showMenu = false;
-
-  _menuOption: MonkeyEcxFilterMenu | MonkeyEcxFilterMenuChildren = 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 onHandleSubmitValue(value: any) {
-    this.onSubmit.next(value);
-    this.onHandleClose();
-  }
-
-  private onHandleMenus(value: any[]) {
-    this._model = value?.map((_: any) => {
-      const { children } = _;
-      let obj = null;
-      if (children) {
-        obj = {
-          ..._,
-          children: children?.filter((_: any) => {
-            return !this.validateValue(_);
-          })
-        };
-      } else if (!this.validateValue(_)) {
-        obj = {
-          ..._,
-          ...obj || {}
-        };
-      }
-
-      return obj;
-    })?.filter((_) => {
-      return _;
-    });
-
-    this._model = this._model?.sort((a, b) => {
-      const groupA = `${a?.group}`.toLowerCase();
-      const groupB = `${b?.group}`.toLowerCase();
-      return groupA !== groupB ? 1 : -1;
-    });
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.model) {
-      const { currentValue } = changes.model;
-      if (currentValue && JSON.stringify(currentValue) !== '{}') {
-        this.onHandleMenus(currentValue);
-      }
-    }
-  }
-
-  onHandleChildrenAction(option: MonkeyEcxFilterMenu, child: MonkeyEcxFilterMenuChildren) {
-    const { field, type, action } = child;
-    if (type === 'with-action') {
-      this.onHandleSubmitValue({
-        [option.field]: JSON.stringify({
-          [field]: action()
-        })
-      });
-    } else {
-      this._showMenu = true;
-      this._menuOption = child;
-      this.onHandleSubmit = (event: any) => {
-        this.onHandleSubmitValue({
-          [option.field]: JSON.stringify(event)
-        });
-      };
-    }
-  }
-
-  onHandleShowMenu(option: MonkeyEcxFilterMenu) {
-    this._showMenu = true;
-    this._menuOption = option;
-  }
-
-  onHandleClose() {
-    this._showMenu = false;
-    this.onClose.next();
-  }
-
-  onHandleSubmit(event: any) {
-    this.onHandleSubmitValue(event);
-  }
-}

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

@@ -1,41 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MonkeyEcxDirectivesModule } from 'monkey-front-core';
-import {
-  MonkeyBadgeModule,
-  MonkeyButtonModule,
-  MonkeyCheckboxModule,
-  MonkeyDateRangePickerModule,
-  MonkeyIconModule,
-  MonkeyInputModule,
-  MonkeyOptionModule,
-  MonkeySelectModule
-} from 'monkey-style-guide';
-import { MECXFilterOptionsModule } from '../options';
-import { MECXFilterMenuComponent } from './menu.component';
-
-@NgModule({
-  declarations: [MECXFilterMenuComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MonkeyEcxDirectivesModule,
-    MonkeyButtonModule,
-    MonkeyBadgeModule,
-    MonkeyIconModule,
-    MonkeyInputModule,
-    MonkeyCheckboxModule,
-    MonkeySelectModule,
-    MonkeyOptionModule,
-    MonkeyDateRangePickerModule,
-    RouterModule,
-    MECXFilterOptionsModule,
-    TranslateModule.forChild()
-  ],
-  exports: [MECXFilterMenuComponent]
-})
-export class MECXFilterMenuModule {}

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

@@ -1,6 +0,0 @@
-<ng-container *ngFor="let child of option?.children">
-  <div class="item" (click)="onHandleChildrenAction(child)"
-    [class.selected]="onHandleValidateSelected(child)">
-    {{ child.label | translate }}
-  </div>
-</ng-container>

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

@@ -1,30 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  min-width: 180px;
-
-  .item {
-    cursor: pointer;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: #72717e;
-    padding: 8px 24px 8px 24px;
-
-    &.selected {
-      cursor: not-allowed !important;
-      background-color: map-get($mecx-theme, 400) !important;
-      color: map-get(map-get($mecx-theme, contrast), main) !important;
-      font-weight: 400;
-    }
-
-    &:hover {
-      background-color: map-get($mecx-theme, 100) !important;
-      color: #72717e !important;
-      font-weight: 400;
-    }
-  }
-}

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

@@ -1,58 +0,0 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { MonkeyEcxFilterMenu } from 'monkey-front-core';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-
-@Component({
-  selector: 'mecx-filter-options-children',
-  templateUrl: './children.component.html',
-  styleUrls: ['./children.component.scss']
-})
-export class MECXFilterOptionsChildrenComponent implements OnInit, OnDestroy {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  @Output() onSubmit = new EventEmitter<any>();
-
-  @Output() onShow = new EventEmitter<any>();
-
-  private eventHandle = new EventEmitter<any>();
-
-  private eventSubscription: Subscription;
-
-  constructor() {
-    // not to do
-  }
-
-  ngOnInit() {
-    const {
-      eventHandle,
-      onSubmit,
-      option: { field }
-    } = this;
-
-    this.eventSubscription = eventHandle.pipe(debounceTime(100)).subscribe((value: any) => {
-      onSubmit.next({ [field]: value });
-    });
-  }
-
-  ngOnDestroy() {
-    this.eventSubscription.unsubscribe();
-  }
-
-  onHandleChildrenAction(child: any) {
-    const { field, type, action } = child;
-    if (type === 'with-action') {
-      this.eventHandle.next(
-        JSON.stringify({
-          [field]: action()
-        })
-      );
-    } else {
-      this.onShow.next(child);
-    }
-  }
-
-  onHandleValidateSelected({ field, getValue }: any) {
-    return !!getValue()?.[field];
-  }
-}

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

@@ -1,3 +0,0 @@
-<monkey-input currency="true" type="text" maxLength="25" [(value)]="_value"
-  (onChange)="onChangeFilter($event)">
-</monkey-input>

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

@@ -1,19 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  max-width: 232px;
-  min-width: 180px;
-  padding: 12px 12px 8px 12px;
-  color: #72717e;
-
-  .title {
-    color: #4b4a53;
-    font-size: 18px;
-    line-height: 21px;
-    font-weight: 500;
-    text-align: left;
-    margin-bottom: 4px;
-  }
-}

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

@@ -1,52 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu } from 'monkey-front-core';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-
-@Component({
-  selector: 'mecx-filter-options-currency',
-  templateUrl: './currency.component.html',
-  styleUrls: ['./currency.component.scss']
-})
-export class MECXFilterOptionsCurrencyComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  @Output() onSubmit = new EventEmitter<any>();
-
-  _value = 0;
-
-  private eventHandle = new EventEmitter<any>();
-
-  private eventSubscription: Subscription;
-
-  constructor() {
-    // not to do
-  }
-
-  ngOnInit() {
-    const { eventHandle, onSubmit, option: { field } } = this;
-
-    this.eventSubscription = eventHandle
-      .pipe(debounceTime(800))
-      .subscribe((value: number) => {
-        onSubmit.next({ [field]: value });
-      });
-  }
-
-  ngOnDestroy() {
-    this.eventSubscription.unsubscribe();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.option) {
-      const { currentValue } = changes.option;
-      if (currentValue && JSON.stringify(currentValue) !== '{}') {
-        this._value = currentValue?.value;
-      }
-    }
-  }
-
-  onChangeFilter(value: number) {
-    this.eventHandle.next(value);
-  }
-}

package/src/lib/components/shared/filter/options/date-range/date-range.component.html

@@ -1,3 +0,0 @@
-<monkey-date-range-picker [(value)]="_value" [i18n]="'CALENDAR' | translate"
-  [moveDaysForward]="_moveDaysForward" (onChange)="onChangeFilter($event)">
-</monkey-date-range-picker>

package/src/lib/components/shared/filter/options/date-range/date-range.component.scss

@@ -1,34 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  padding: 12px 12px 8px 12px;
-
-  .title {
-    color: #4b4a53;
-    font-size: 18px;
-    line-height: 21px;
-    font-weight: 500;
-    text-align: left;
-    margin-bottom: 4px;
-  }
-
-  ::ng-deep mecx-date-range-picker-group-action {
-    display: none;
-  }
-
-  ::ng-deep
-    monkey-date-range-picker
-    mecx-date-range-picker-group
-    mecx-date-range-picker-group-info {
-    display: none;
-  }
-
-  ::ng-deep
-    monkey-date-range-picker
-    mecx-date-range-picker-group
-    mecx-date-range-picker-group-header {
-    display: none;
-  }
-}

package/src/lib/components/shared/filter/options/date-range/date-range.component.ts

@@ -1,72 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { MonkeyEcxFilterMenu, MonkeyEcxFilterMenuChildren, MonkeyEcxUtils } from 'monkey-front-core';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-
-@Component({
-  selector: 'mecx-filter-options-date-range',
-  templateUrl: './date-range.component.html',
-  styleUrls: ['./date-range.component.scss']
-})
-export class MECXFilterOptionsDateRangeComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() option: MonkeyEcxFilterMenu | MonkeyEcxFilterMenuChildren = null;
-
-  @Output() onSubmit = new EventEmitter<any>();
-
-  _value: any = {
-    startDate: null,
-    endDate: null
-  };
-
-  _form: FormGroup;
-
-  _moveDaysForward = true;
-
-  private eventHandle = new EventEmitter<any>();
-
-  private eventSubscription: Subscription;
-
-  constructor() {
-    // not to do
-  }
-
-  private onHandleSelectedValue({ field, value, getValue }: any) {
-    try {
-      value = value || getValue()?.[field];
-      if (MonkeyEcxUtils.persistNullEmptyUndefined(value)) {
-        this._value = JSON.parse(value);
-      }
-    } catch (e) {
-      // not to do
-    }
-  }
-
-  ngOnInit() {
-    const { eventHandle, onSubmit, option: { field } } = this;
-
-    this.eventSubscription = eventHandle
-      .pipe(debounceTime(800))
-      .subscribe((value: number) => {
-        onSubmit.next({ [field]: value });
-      });
-  }
-
-  ngOnDestroy() {
-    this.eventSubscription.unsubscribe();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.option) {
-      const { currentValue } = changes.option;
-      if (currentValue && JSON.stringify(currentValue) !== '{}') {
-        this.onHandleSelectedValue(currentValue);
-      }
-    }
-  }
-
-  onChangeFilter(value: { startDate: string, endDate: string }) {
-    if (!value?.endDate) return;
-    this.eventHandle.next(JSON.stringify(value));
-  }
-}

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

@@ -1,3 +0,0 @@
-<monkey-input type="text" maxLength="255" [(value)]="_value"
-  (onChange)="onChangeFilter($event)">
-</monkey-input>

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

@@ -1,19 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  max-width: 232px;
-  min-width: 180px;
-  padding: 12px 12px 8px 12px;
-  color: #72717e;
-
-  .title {
-    color: #4b4a53;
-    font-size: 18px;
-    line-height: 21px;
-    font-weight: 500;
-    text-align: left;
-    margin-bottom: 4px;
-  }
-}

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

@@ -1,52 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
-import { MonkeyEcxFilterMenu } from 'monkey-front-core';
-import { Subscription } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-
-@Component({
-  selector: 'mecx-filter-options-input',
-  templateUrl: './input.component.html',
-  styleUrls: ['./input.component.scss']
-})
-export class MECXFilterOptionsInputComponent implements OnInit, OnChanges, OnDestroy {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  @Output() onSubmit = new EventEmitter<any>();
-
-  _value = '';
-
-  private eventHandle = new EventEmitter<any>();
-
-  private eventSubscription: Subscription;
-
-  constructor() {
-    // not to do
-  }
-
-  ngOnInit() {
-    const { eventHandle, onSubmit, option: { field } } = this;
-
-    this.eventSubscription = eventHandle
-      .pipe(debounceTime(800))
-      .subscribe((value: string) => {
-        onSubmit.next({ [field]: value });
-      });
-  }
-
-  ngOnDestroy() {
-    this.eventSubscription.unsubscribe();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.option) {
-      const { currentValue } = changes.option;
-      if (currentValue && JSON.stringify(currentValue) !== '{}') {
-        this._value = currentValue?.value;
-      }
-    }
-  }
-
-  onChangeFilter(value: number) {
-    this.eventHandle.next(value);
-  }
-}

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

@@ -1,43 +0,0 @@
-<div class="d-flex justify-content-between header">
-  <span class="title">
-    {{ option?.label | translate }}
-  </span>
-  <div class="close" #actionElement (click)="onHandleShowMenu()">
-    <monkey-icon icon="close-12" color="#474747"></monkey-icon>
-  </div>
-</div>
-<ng-container *ngIf="option?.type as type">
-  <ng-container *ngIf="option?.children; else withoutChildren">
-    <mecx-filter-options-children [option]="option" (onSubmit)="onHandleSubmitChildren($event)"
-      (onShow)="onShowFromChildren.next($event)">
-    </mecx-filter-options-children>
-  </ng-container>
-  <ng-template #withoutChildren>
-    <ng-container [ngSwitch]="type">
-      <mecx-filter-options-status *ngSwitchCase="'status'" [option]="option"
-        (onSubmit)="onHandleSubmit($event)">
-      </mecx-filter-options-status>
-      <mecx-filter-options-date-range *ngSwitchCase="'date-range'" [option]="option"
-        (onSubmit)="onHandleSubmit($event)">
-      </mecx-filter-options-date-range>
-      <mecx-filter-options-currency *ngSwitchCase="'currency'" [option]="option"
-        (onSubmit)="onHandleSubmit($event)">
-      </mecx-filter-options-currency>
-      <mecx-filter-options-input *ngSwitchCase="'input'" [option]="option"
-        (onSubmit)="onHandleSubmit($event)">
-      </mecx-filter-options-input>
-    </ng-container>
-  </ng-template>
-</ng-container>
-
-<ng-container
-  *monkeyecxPopover="_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'ltr'">
-  <div class="close-menu">
-    <monkey-button type="tertiary" color="error" (click)="onRemove.next()" size="sm">
-      {{ 'BUTTONS.REMOVE' | translate }}
-    </monkey-button>
-    <monkey-button type="tertiary" color="theme" (click)="onClose.next()" size="sm">
-      {{ 'BUTTONS.CLOSE' | translate }}
-    </monkey-button>
-  </div>
-</ng-container>

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

@@ -1,56 +0,0 @@
-@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
-
-:host {
-  display: flex;
-  flex-direction: column;
-  background: #fafafa;
-  border: 1px solid #d6d6d6;
-  box-sizing: border-box;
-  box-shadow: 0px 4px 36px -8px #6d6d6d3a;
-  border-radius: 8px !important;
-  margin: 0px 8px;
-
-  .header {
-    border-bottom: 1px solid #d6d6d6;
-    padding: 8px 8px;
-
-    .title {
-      color: #4b4a53;
-      font-style: normal;
-      font-size: 14px;
-      line-height: 16px;
-      font-weight: 500;
-      text-align: left;
-    }
-
-    .close {
-      cursor: pointer;
-      border-radius: 120px;
-      padding: 4px;
-
-      &:hover {
-        background-color: #6d6d6d0c;
-      }
-    }
-  }
-}
-
-.close-menu {
-  display: flex;
-  flex-direction: column;
-  background: #fafafa;
-  border: 1px solid #d6d6d6;
-  box-sizing: border-box;
-  box-shadow: 0px 4px 36px -8px #6d6d6d3a;
-  border-radius: 8px !important;
-  margin: 0px 8px;
-  padding: 8px;
-
-  ::ng-deep monkey-button {
-    width: 100%;
-
-    button {
-      width: 100%;
-    }
-  }
-}

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

@@ -1,58 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MonkeyEcxFilterMenu, MonkeyEcxFilterMenuChildren } from 'monkey-front-core';
-
-@Component({
-  selector: 'mecx-filter-options',
-  templateUrl: './options.component.html',
-  styleUrls: ['./options.component.scss']
-})
-export class MECXFilterOptionsComponent {
-  @Input() option: MonkeyEcxFilterMenu = null;
-
-  @Input() closeDirectly = false;
-
-  @Output() onClose = new EventEmitter<any>();
-
-  @Output() onRemove = new EventEmitter<any>();
-
-  @Output() onSubmit = new EventEmitter<any>();
-
-  @Output() onShowFromChildren = new EventEmitter<any>();
-
-  _showMenu = false;
-
-  closeMenu = () => {
-    this._showMenu = false;
-  };
-
-  constructor() {
-    // not to do
-  }
-
-  onHandleChildrenAction(child: MonkeyEcxFilterMenuChildren) {
-    const { option } = this;
-    const { field, action } = child;
-    this.onSubmit.next({
-      [option.field]: {
-        [field]: action()
-      }
-    });
-  }
-
-  onHandleSubmitChildren(event: any) {
-    this.onSubmit.next(event);
-  }
-
-  onHandleSubmit(event: any) {
-    this.onSubmit.next(event);
-  }
-
-  onHandleShowMenu() {
-    const { closeDirectly } = this;
-    if (closeDirectly) {
-      this.onClose.next();
-      return;
-    }
-    this._showMenu = true;
-  }
-}