monkey-front-components 0.0.383 → 0.0.384

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

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

@@ -0,0 +1,58 @@
+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;
+  }
+}

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

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { MonkeyEcxDirectivesModule } from 'monkey-front-core';
+import {
+  MonkeyBadgeModule,
+  MonkeyButtonModule,
+  MonkeyCheckboxModule,
+  MonkeyDateRangePickerModule,
+  MonkeyIconModule,
+  MonkeyInputModule,
+  MonkeyOptionModule,
+  MonkeySelectModule
+} from 'monkey-style-guide';
+import { MECXFilterOptionsChildrenComponent } from './children';
+import { MECXFilterOptionsCurrencyComponent } from './currency';
+import { MECXFilterOptionsInputComponent } from './input';
+import { MECXFilterOptionsDateRangeComponent } from './date-range';
+import { MECXFilterOptionsComponent } from './options.component';
+import { MECXFilterOptionsStatusComponent } from './status';
+
+@NgModule({
+  declarations: [
+    MECXFilterOptionsChildrenComponent,
+    MECXFilterOptionsComponent,
+    MECXFilterOptionsCurrencyComponent,
+    MECXFilterOptionsDateRangeComponent,
+    MECXFilterOptionsInputComponent,
+    MECXFilterOptionsStatusComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MonkeyBadgeModule,
+    MonkeyButtonModule,
+    MonkeyCheckboxModule,
+    MonkeyDateRangePickerModule,
+    MonkeyEcxDirectivesModule,
+    MonkeyIconModule,
+    MonkeyInputModule,
+    MonkeyOptionModule,
+    MonkeySelectModule,
+    ReactiveFormsModule,
+    RouterModule,
+    TranslateModule.forChild()
+  ],
+  exports: [
+    MECXFilterOptionsChildrenComponent,
+    MECXFilterOptionsComponent,
+    MECXFilterOptionsCurrencyComponent,
+    MECXFilterOptionsDateRangeComponent,
+    MECXFilterOptionsInputComponent,
+    MECXFilterOptionsStatusComponent
+  ]
+})
+export class MECXFilterOptionsModule {}

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

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

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

@@ -0,0 +1,4 @@
+<monkey-checkbox type="multiple" *ngFor="let op of option?.values"
+  [description]="op?.description | translate" [value]="onHandleChecked(op?.value)"
+  (click)="onChangeFilter($event, op?.value)">
+</monkey-checkbox>

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

@@ -0,0 +1,29 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  max-width: 232px;
+  min-width: 180px;
+  max-height: 500px;
+  padding: 12px 12px 8px 12px;
+  color: #72717e;
+  overflow: auto;
+
+  ::ng-deep mecx-form-field mecx-form-field-body.checkbox {
+    padding: 0px !important;
+
+    .mecx-check-container {
+      height: unset !important;
+
+      .mecx-check-mark {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  ::ng-deep monkey-checkbox {
+    margin: 6px 0px !important;
+  }
+}

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

@@ -0,0 +1,73 @@
+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-status',
+  templateUrl: './status.component.html',
+  styleUrls: ['./status.component.scss']
+})
+export class MECXFilterOptionsStatusComponent 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
+  }
+
+  private verifySelected(value: string): boolean {
+    return this._value?.includes(value);
+  }
+
+  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;
+      }
+    }
+  }
+
+  onHandleChecked(cmp: string) {
+    const { _value } = this;
+    return `${_value}`.split(',')?.indexOf(cmp) >= 0;
+  }
+
+  onChangeFilter(event: any, value: string): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const selected = !this.verifySelected(value);
+    const filters: string[] = this._value?.split(',') || [];
+    if (!selected) {
+      filters.splice(filters.indexOf(value), 1);
+    } else {
+      filters.push(value);
+    }
+
+    this._value = filters?.length ? filters.join(',') : null;
+    this.eventHandle.next(this._value);
+  }
+}

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

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

package/src/lib/components/shared/filter/selected/item/children/children.component.html

@@ -0,0 +1,19 @@
+<div class="box">
+  <div class="data">
+    {{ option.label | translate }}
+  </div>
+  <div class="value" [id]="'mecx-filter-selected-item-'+option?.field" (click)="onShow.next()">
+    <ng-container *ngIf="option?.type as type">
+      <ng-container [ngSwitch]="type+'-'+_child?.type">
+        <mecx-filter-selected-item-date-with-action *ngSwitchCase="'date-with-action'"
+          [option]="_child">
+        </mecx-filter-selected-item-date-with-action>
+        <mecx-filter-selected-item-date-range *ngSwitchCase="'date-date-range'" [option]="_child">
+        </mecx-filter-selected-item-date-range>
+      </ng-container>
+    </ng-container>
+  </div>
+  <div class="action" (click)="onShow.next()">
+    <monkey-icon icon="arrow-right-14" color="#4B4A53"></monkey-icon>
+  </div>
+</div>

package/src/lib/components/shared/filter/selected/item/children/children.component.scss

@@ -0,0 +1,68 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
+
+:host {
+  display: flex;
+
+  .box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #ffffff;
+    border: 1px solid #d6d6d6;
+    box-sizing: border-box;
+    border-radius: 120px;
+    height: 40px;
+
+    .data {
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+      height: 100%;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      text-align: center;
+      color: #72717e;
+    }
+
+    .value {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      height: 100%;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      text-align: center;
+      color: #72717e;
+      background-color: #6d6d6d0a;
+
+      &:hover {
+        background-color: #6d6d6d0c;
+        font-weight: 400;
+        text-decoration: underline;
+      }
+    }
+
+    .action {
+      cursor: pointer;
+      border-left: 1px solid #d6d6d6;
+      padding: 12px;
+      color: #908e9d;
+      font-weight: 500;
+      font-size: 18px;
+      height: 40px;
+      align-items: center;
+      display: flex;
+
+      &:hover {
+        background-color: #6d6d6d0c;
+        border-top-right-radius: 120px;
+        border-bottom-right-radius: 120px;
+      }
+    }
+  }
+}

package/src/lib/components/shared/filter/selected/item/children/children.component.ts

@@ -0,0 +1,49 @@
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { MonkeyEcxFilterMenu, MonkeyEcxUtils } from 'monkey-front-core';
+
+@Component({
+  selector: 'mecx-filter-selected-item-children',
+  templateUrl: './children.component.html',
+  styleUrls: ['./children.component.scss']
+})
+export class MECXFilterSelectedItemChildrenComponent implements OnChanges {
+  @Input() option: MonkeyEcxFilterMenu = null;
+
+  @Output() onShow = new EventEmitter<any>();
+
+  @Output() onRemove = new EventEmitter<any>();
+
+  _child: any = null;
+
+  constructor(private elRef: ElementRef) {
+    // not to do
+  }
+
+  private validateValue(value: any) {
+    if (!value) return false;
+    if (typeof value === 'object') {
+      return value && JSON.stringify(value) !== '{}';
+    }
+    return MonkeyEcxUtils.persistNullEmptyUndefined(value);
+  }
+
+  private onHandleSelectedValue({ children }: any) {
+    const found = children.find(({ field, getValue }: any) => {
+      return this.validateValue(getValue()?.[field]);
+    });
+    if (!found) {
+      this.elRef.nativeElement.remove();
+      return;
+    }
+    this._child = found;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.option) {
+      const { currentValue } = changes.option;
+      if (currentValue && JSON.stringify(currentValue) !== '{}') {
+        this.onHandleSelectedValue(currentValue);
+      }
+    }
+  }
+}

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

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

package/src/lib/components/shared/filter/selected/item/currency/currency.component.html

@@ -0,0 +1 @@
+{{ _value | monkeyecxFormatCurrency }}

package/src/lib/components/shared/filter/selected/item/currency/currency.component.scss

@@ -0,0 +1,4 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
+
+:host {
+}

package/src/lib/components/shared/filter/selected/item/currency/currency.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { MonkeyEcxFilterMenu } from 'monkey-front-core';
+
+@Component({
+  selector: 'mecx-filter-selected-item-currency',
+  templateUrl: './currency.component.html',
+  styleUrls: ['./currency.component.scss']
+})
+export class MECXFilterSelectedItemCurrencyComponent implements OnChanges {
+  @Input() option: MonkeyEcxFilterMenu = null;
+
+  _value: any = null;
+
+  private onHandleSelectedValue({ value }: any) {
+    this._value = value;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.option) {
+      const { currentValue } = changes.option;
+      if (currentValue && JSON.stringify(currentValue) !== '{}') {
+        this.onHandleSelectedValue(currentValue);
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,2 @@
+{{ _startDate | monkeyecxFormatDateTimelapse: false }} -
+{{ _endDate | monkeyecxFormatDateTimelapse: false }}

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

@@ -0,0 +1,4 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
+
+:host {
+}

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

@@ -0,0 +1,39 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { MonkeyEcxFilterMenu, MonkeyEcxFilterMenuChildren } from 'monkey-front-core';
+
+@Component({
+  selector: 'mecx-filter-selected-item-date-range',
+  templateUrl: './date-range.component.html',
+  styleUrls: ['./date-range.component.scss']
+})
+export class MECXFilterSelectedItemDateRangeComponent implements OnChanges {
+  @Input() option: MonkeyEcxFilterMenu | MonkeyEcxFilterMenuChildren = null;
+
+  _startDate = '';
+
+  _endDate = '';
+
+  private onHandleSelectedValue({ field, value, getValue }: any) {
+    try {
+      value = value || getValue()?.[field];
+      if (value && JSON.stringify(value) !== '{}') {
+        const objDates = JSON.parse(value);
+        this._startDate = objDates?.startDate;
+        this._endDate = objDates?.endDate;
+      }
+    } catch (e) {
+      const objDates = JSON.parse(value?.dates);
+      this._startDate = objDates?.startDate;
+      this._endDate = objDates?.endDate;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.option) {
+      const { currentValue } = changes.option;
+      if (currentValue && JSON.stringify(currentValue) !== '{}') {
+        this.onHandleSelectedValue(currentValue);
+      }
+    }
+  }
+}

package/{lib/components/shared/filter/selected/item/date-range/index.d.ts → src/lib/components/shared/filter/selected/item/date-range/index.ts}

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

package/src/lib/components/shared/filter/selected/item/date-with-action/date-with-action.component.html

@@ -0,0 +1 @@
+{{ _date | monkeyecxFormatDateTimelapse: false }}

package/src/lib/components/shared/filter/selected/item/date-with-action/date-with-action.component.scss

@@ -0,0 +1,4 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
+
+:host {
+}

package/src/lib/components/shared/filter/selected/item/date-with-action/date-with-action.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { MonkeyEcxFilterMenuChildren, MonkeyEcxUtils } from 'monkey-front-core';
+
+@Component({
+  selector: 'mecx-filter-selected-item-date-with-action',
+  templateUrl: './date-with-action.component.html',
+  styleUrls: ['./date-with-action.component.scss']
+})
+export class MECXFilterSelectedItemDateWithActionComponent implements OnChanges {
+  @Input() option: MonkeyEcxFilterMenuChildren = null;
+
+  _date = '';
+
+  private onHandleSelectedValue({ field, getValue }: any) {
+    const value = getValue()?.[field];
+    if (MonkeyEcxUtils.persistNullEmptyUndefined(value)) {
+      this._date = value;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.option) {
+      const { currentValue } = changes.option;
+      if (currentValue && JSON.stringify(currentValue) !== '{}') {
+        this.onHandleSelectedValue(currentValue);
+      }
+    }
+  }
+}

package/{lib/components/shared/filter/selected/item/date-with-action/index.d.ts → src/lib/components/shared/filter/selected/item/date-with-action/index.ts}

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

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

@@ -1,7 +1,7 @@
-export * from './children';
-export * from './currency';
-export * from './date-range';
-export * from './date-with-action';
-export * from './input';
-export * from './item.component';
-export * from './status';
+export * from './children';
+export * from './currency';
+export * from './date-range';
+export * from './date-with-action';
+export * from './input';
+export * from './item.component';
+export * from './status';

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

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

package/src/lib/components/shared/filter/selected/item/input/input.component.html

@@ -0,0 +1 @@
+{{ _value }}

package/src/lib/components/shared/filter/selected/item/input/input.component.scss

@@ -0,0 +1,4 @@
+@import 'node_modules/monkey-style-guide/assets/scss/partials/variables';
+
+:host {
+}

package/src/lib/components/shared/filter/selected/item/input/input.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { MonkeyEcxFilterMenu } from 'monkey-front-core';
+
+@Component({
+  selector: 'mecx-filter-selected-item-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss']
+})
+export class MECXFilterSelectedItemInputComponent implements OnChanges {
+  @Input() option: MonkeyEcxFilterMenu = null;
+
+  _value: any = null;
+
+  private onHandleSelectedValue({ value }: any) {
+    this._value = value;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.option) {
+      const { currentValue } = changes.option;
+      if (currentValue && JSON.stringify(currentValue) !== '{}') {
+        this.onHandleSelectedValue(currentValue);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+<ng-container *ngIf="_option?.type as type">
+  <ng-container *ngIf="_option?.children; else withoutChildren">
+    <mecx-filter-selected-item-children [option]="_option" (onShow)="onHandleShowMenu()"
+      (onRemove)="onHandleRemove()">
+    </mecx-filter-selected-item-children>
+  </ng-container>
+  <ng-template #withoutChildren>
+    <div class="box">
+      <div class="data">
+        {{ _option.label | translate }}
+      </div>
+      <div class="value" [id]="'mecx-filter-selected-item-'+_option?.field"
+        (click)="onHandleShowMenu()">
+        <ng-container [ngSwitch]="type">
+          <mecx-filter-selected-item-currency *ngSwitchCase="'currency'" [option]="_option">
+          </mecx-filter-selected-item-currency>
+          <mecx-filter-selected-item-input *ngSwitchCase="'input'" [option]="_option">
+          </mecx-filter-selected-item-input>
+          <mecx-filter-selected-item-date-range *ngSwitchCase="'date-range'" [option]="_option">
+          </mecx-filter-selected-item-date-range>
+          <mecx-filter-selected-item-status *ngSwitchCase="'status'" [option]="_option"
+            [labelMoreValues]="'FIELD.AND-MORE' | translate">
+          </mecx-filter-selected-item-status>
+        </ng-container>
+      </div>
+      <div class="action" (click)="onHandleShowMenu()">
+        <monkey-icon icon="arrow-right-14" color="#4B4A53"></monkey-icon>
+      </div>
+    </div>
+  </ng-template>
+</ng-container>
+<ng-container
+  *monkeyecxPopover="_showMenu; target: $any(_actionElement); closed: closeMenu; dir: 'ltr'">
+  <mecx-filter-options [option]="_option" (onClose)="onHandleClose()"
+    (onRemove)="onHandleRemove()" (onSubmit)="onHandleSubmit($event)"
+    (onShowFromChildren)="onHandleShowFromChildren($event)">
+  </mecx-filter-options>
+</ng-container>