monkey-front-components 0.0.383 → 0.0.384

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

@@ -0,0 +1,28 @@
+<div class="d-flex flex-column" #actionElement>
+  <ng-container *ngFor="let menu of _model; let index = index">
+    <ng-container *ngIf="menu?.children; else withoutChildren">
+      <div class="item no-action">
+        {{ menu.label | translate }}
+      </div>
+      <div class="separator"></div>
+      <ng-container *ngFor="let child of menu?.children">
+        <div class="item children" (click)="onHandleChildrenAction(menu, child)">
+          {{ child.label | translate }}
+        </div>
+      </ng-container>
+    </ng-container>
+    <ng-template #withoutChildren>
+      <div class="item" (click)="onHandleShowMenu(menu)">
+        {{ menu.label | translate }}
+      </div>
+    </ng-template>
+    <ng-container *ngIf="_model[index+1]?.group as next; _model[index]?.group as current">
+      <div class="separator" *ngIf="next !== current"></div>
+    </ng-container>
+  </ng-container>
+</div>
+<ng-container
+  *monkeyecxPopover="_showMenu; target: $any(actionElement); closed: closeMenu; dir: 'rt'">
+  <mecx-filter-options [option]="_menuOption" (onClose)="onHandleClose()"
+    (onSubmit)="onHandleSubmit($event)" [closeDirectly]="true"></mecx-filter-options>
+</ng-container>

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

@@ -0,0 +1,62 @@
+@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: 16px !important;
+  min-width: 192px;
+  margin: 4px 8px;
+  overflow: auto;
+  max-height: 500px;
+
+  ::ng-deep monkey-button {
+    width: 100%;
+
+    button {
+      justify-content: flex-start !important;
+      width: 100%;
+    }
+  }
+
+  .item {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: #72717e;
+    padding: 8px 24px 8px 24px;
+
+    &.no-action {
+      cursor: not-allowed;
+      padding: 8px;
+      margin: 0px !important;
+      font-weight: 500;
+    }
+
+    &:first-child {
+      margin: 12px 0px 0px 0px;
+    }
+
+    &:last-child {
+      margin: 0px 0px 12px 0px;
+    }
+
+    &:not(.no-action) {
+      cursor: pointer;
+
+      &:hover {
+        background-color: map-get($mecx-theme, 200) !important;
+        color: map-get($mecx-theme, main) !important;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .separator {
+    border-bottom: 1px solid #ebebeb;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,58 @@
+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/{lib/components/shared/filter/options/children/index.d.ts → src/lib/components/shared/filter/options/children/index.ts}

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

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

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

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

@@ -0,0 +1,52 @@
+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/{lib/components/shared/filter/options/currency/index.d.ts → src/lib/components/shared/filter/options/currency/index.ts}

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

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

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

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

@@ -0,0 +1,72 @@
+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/{lib/components/shared/filter/options/date-range/index.d.ts → src/lib/components/shared/filter/options/date-range/index.ts}

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

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

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

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

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

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

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

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

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

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

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