@acorex/components 6.5.26 → 6.5.28

package/src/lib/context-menu/context-menu.directive.ts

@@ -0,0 +1,159 @@
+import { Directive, ElementRef, HostListener, Input, Output, EventEmitter, ComponentFactoryResolver, Injector, ViewContainerRef } from '@angular/core';
+import { AXMenuItem } from '@acorex/core';
+import { AXBaseEvent } from '../base/events.class';
+import { AXContextMenuComponent } from './context-menu.component';
+import { Subscription } from 'rxjs';
+
+export type AXContextMenuPromiseFunction = (item: any) => Promise<AXMenuItem[]>;
+export type AXContextMenuFunction = (item: any) => AXMenuItem[];
+export class AXContextMenuItemClickEvent extends AXBaseEvent {
+  dataItem?: any;
+  menuItem: AXMenuItem;
+}
+
+@Directive({
+  selector: '[axContextMenu]'
+})
+export class AXContextMenuDirective {
+  @Input()
+  contextMenu: AXContextMenuComponent;
+
+  @Input()
+  contextDataItem: any;
+
+  @Input()
+  contextMenuItems: AXMenuItem[] | AXContextMenuPromiseFunction | AXContextMenuFunction;
+
+  @Output()
+  onContextMenuItemClick: EventEmitter<AXContextMenuItemClickEvent> = new EventEmitter<AXContextMenuItemClickEvent>();
+
+  @Input()
+  rtl: boolean = false;
+
+  internalItems: AXMenuItem[] = [];
+
+  private clickSubscribe: Subscription;
+  private closeSubscribe: Subscription;
+
+  @HostListener('contextmenu', ['$event'])
+  onContextMenu(e: MouseEvent) {
+    this.getMenuItems().then(items => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.createContextMenu();
+      this.contextMenu.items = items;
+
+
+      this.contextMenu.open(e.x, e.y, this.rtl);
+
+
+    });
+  }
+
+
+
+  constructor(
+    private ref: ElementRef,
+    private factoryResolver: ComponentFactoryResolver,
+    private viewContainerRef: ViewContainerRef,
+    private injector: Injector
+  ) {
+  }
+
+  ngOnInit(): void {
+    if (this.rtl == null) {
+      this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
+    }
+  }
+
+  createContextMenu(): void {
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('ax-overlay-wrapper');
+    wrapper.addEventListener('click', this.wrapperClick.bind(this));
+    wrapper.addEventListener('contextmenu', this.wrapperRClick.bind(this));
+    //
+    document.body.appendChild(wrapper);
+    const factory = this.factoryResolver.resolveComponentFactory(AXContextMenuComponent);
+    const componentRef = this.viewContainerRef.createComponent(factory);
+    this.contextMenu = componentRef.instance;
+    wrapper.appendChild(componentRef.location.nativeElement);
+    //
+    this.clearComponentSubscriptions();
+    this.createComponentSubscriptions();
+  }
+
+  wrapperClick(e: MouseEvent) {
+    this.remove();
+  }
+
+  wrapperRClick(e: MouseEvent) {
+    if (document.elementsFromPoint(e.clientX, e.clientY).includes(this.ref.nativeElement)) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      this.contextMenu.open(e.x, e.y, this.rtl);
+    }
+    else {
+      e.preventDefault();
+      this.remove();
+    }
+  }
+
+
+
+  private clearComponentSubscriptions() {
+    if (this.clickSubscribe) {
+      this.clickSubscribe.unsubscribe();
+      this.clickSubscribe = undefined;
+    }
+    if (this.closeSubscribe) {
+      this.closeSubscribe.unsubscribe();
+      this.closeSubscribe = undefined;
+    }
+  }
+
+  private createComponentSubscriptions() {
+    this.clickSubscribe = this.contextMenu.onItemClick.subscribe(c => {
+      this.remove();
+      this.onContextMenuItemClick.emit({
+        component: this,
+        dataItem: this.contextDataItem,
+        htmlElement: this.ref.nativeElement,
+        menuItem: c
+      });
+    }) as any;
+    this.closeSubscribe = this.contextMenu.onClosed.subscribe(c => {
+      this.clearComponentSubscriptions();
+    }) as any;
+  }
+
+  private remove() {
+    this.viewContainerRef.clear();
+    this.clearComponentSubscriptions();
+    document.querySelector('.ax-overlay-wrapper')?.remove();
+  }
+
+  private getMenuItems(): Promise<AXMenuItem[]> {
+    return new Promise<AXMenuItem[]>((resolve, reject) => {
+      if (typeof (this.contextMenuItems) === 'function') {
+        const val = this.contextMenuItems(this.contextDataItem);
+        if (val instanceof Promise) {
+          val.then(_data => {
+            resolve(_data);
+          });
+        } else {
+          resolve(val);
+        }
+      } else if (Array.isArray(this.contextMenuItems)) {
+        resolve(this.contextMenuItems);
+      }
+      else {
+        resolve([]);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.clearComponentSubscriptions();
+  }
+}

package/src/lib/context-menu/context-menu.module.ts

@@ -0,0 +1,15 @@
+import { NgModule, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXContextMenuComponent } from './context-menu.component';
+import { AXContextMenuDirective } from './context-menu.directive';
+
+
+@NgModule({
+    declarations: [AXContextMenuComponent, AXContextMenuDirective],
+    imports: [CommonModule],
+    exports: [AXContextMenuComponent, AXContextMenuDirective],
+    providers: [],
+})
+export class AXContextMenuModule {
+
+}

package/src/lib/data-filter/columns/filter-column-date.component.ts

@@ -0,0 +1,123 @@
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, EventEmitter, Output } from '@angular/core';
+import { AXFilterCondition, AXFilterColumnComponent } from '../filter.class';
+import { AXDateTime } from '@acorex/core';
+import { AXSelectionListComponent } from '../../selection-list/selection-list.component';
+
+@Component({
+    selector: 'ax-filter-column-date',
+    template: `
+    <div class="ax-filter-section">
+    <ax-selection-list [items]="items" mode="single" direction="vertical" (selectedItemsChange)="onSelectedChanged($event)">
+    </ax-selection-list>
+    </div>
+    <div class="ax-filter-section-value" [hidden]="!showCustom">
+        <ax-date-picker label="From" [(value)]="fromDate" (onValueChanged)="dateChange($event)"></ax-date-picker>
+        <ax-date-picker label="To" [(value)]="toDate" (onValueChanged)="dateChange($event)"></ax-date-picker>
+    </div>
+    <div class="ax-filter-section-value" [hidden]="!showSpecific">
+        <ax-date-picker label="Date" [(value)]="fromDate" (onValueChanged)="dateChange($event)"></ax-date-picker>            
+    </div>
+    `,
+    providers: [
+        { provide: AXFilterColumnComponent, useExisting: AXFilterColumnDateComponent }
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXFilterColumnDateComponent extends AXFilterColumnComponent {
+    @ViewChild(AXSelectionListComponent, { static: true }) selection: AXSelectionListComponent;
+
+    items: any = [
+        {
+            text: 'Today',
+            value: 'today'
+        },
+        {
+            text: 'This Week',
+            value: 'this-week'
+        },
+        {
+            text: 'This Month',
+            value: 'this-month'
+        },
+        {
+            text: 'This Year',
+            value: 'this-year'
+        },
+        {
+            text: 'Specific',
+            value: 'specific'
+        },
+        {
+            text: 'Range',
+            value: 'range'
+        }
+    ];
+
+    fromDate: AXDateTime = new AXDateTime();
+    toDate: AXDateTime = new AXDateTime();
+
+    selectedItem: any = null;
+
+    showCustom: boolean = false;
+    showSpecific: boolean = false;
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    ngAfterViewInit(): void {
+        this.selection.selectedItems = [this.items[0]];
+    }
+    dateChange(e) {
+        this.valueChange.emit();
+    }
+    onSelectedChanged(items: any[]) {
+
+        this.selectedItem = items[0];
+        this.showCustom = this.selectedItem && this.selectedItem.value == 'range';
+        this.showSpecific = this.selectedItem && this.selectedItem.value == 'specific';
+        this.cdr.detectChanges();
+        this.valueChange.emit();
+    }
+
+    get condition(): AXFilterCondition {
+        let today = new AXDateTime();
+        switch (this.selectedItem.value) {
+            case 'today':
+                this.fromDate = this.toDate = today;
+
+                return {
+                    condition: 'equal',
+                    field: this.field,
+                    dataType: 'date',
+                    value: this.fromDate.toISOString()
+                }
+            case 'specific':
+                return {
+                    condition: 'equal',
+                    field: this.field,
+                    dataType: 'date',
+                    value: this.fromDate.toISOString()
+                }
+            case 'this-week':
+                this.toDate = today.endOf('week');
+                this.fromDate = today.startOf('week');
+                break;
+            case 'this-month':
+                this.toDate = today.endOf('month')
+                this.fromDate = today.startOf('month');
+                break;
+            case 'this-year':
+                this.toDate = today.endOf('year')
+                this.fromDate = today.startOf('year');
+                break;
+        }
+
+        return {
+            condition: 'between',
+            field: this.field,
+            dataType: 'date',
+            value: [this.fromDate.toISOString(), this.toDate.toISOString()]
+        }
+    }
+}

package/src/lib/data-filter/columns/filter-column-number.component.ts

@@ -0,0 +1,100 @@
+import { Component, ChangeDetectorRef } from '@angular/core';
+import { AXFilterCondition, AXFilterColumnComponent } from '../filter.class';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+import { Observable } from 'rxjs';
+
+
+@Component({
+    selector: 'ax-filter-column-number',
+    template: `
+    <div class="ax-filter-section">
+    <div>
+        <select (ngModelChange)="onOperatorChange($event)" class="form-control form-control-sm"  [(ngModel)]="operator">
+            <option *ngFor="let o of operators" value="{{o.value}}">
+                {{o.title}}
+            </option>
+        </select>
+    </div>
+    <div>
+        <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value" *ngIf="operator!='is-not-empty' && operator!='is-empty'">
+        </ax-text-box>
+    </div>
+</div>
+    `,
+    providers: [
+        { provide: AXFilterColumnComponent, useExisting: AXFilterColumnNumberComponent }
+    ]
+})
+export class AXFilterColumnNumberComponent extends AXFilterColumnComponent {
+
+    operator: string = 'equal';
+
+    operators: any[] = [
+        {
+            title: 'is',
+            value: 'equal'
+        },
+        {
+            title: `isn't`,
+            value: 'not-equal'
+        },
+        {
+            title: 'less than',
+            value: 'less-than'
+        },
+        {
+            title: 'less than or equal',
+            value: 'less-than-equal'
+        },
+        {
+            title: 'greater than',
+            value: 'greater-than'
+        },
+        {
+            title: 'greater than or equal',
+            value: 'greater-than-equal'
+        },
+        {
+            title: 'is empty',
+            value: 'is-empty'
+        },
+        {
+            title: `isn't empty`,
+            value: 'is-not-empty'
+        }
+    ];
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+    private searchChangeObserver: any;
+    onOperatorChange(e) {
+
+        this.valueChange.emit();
+
+    }
+    onTextChange(e) {
+        // TODO: Check this method work correctly
+        if (!this.searchChangeObserver) {
+            return new Observable(observer => {
+                this.searchChangeObserver = observer;
+            })
+                .pipe(debounceTime(500))
+                .pipe(distinctUntilChanged())
+                .subscribe(c => {
+                    this.valueChange.emit();
+                });
+        }
+        this.searchChangeObserver.next(e);
+    }
+
+    get condition(): AXFilterCondition {
+        return {
+            condition: this.operator,
+            field: this.field,
+            dataType: 'number',
+            value: this.value
+        };
+    }
+
+}

package/src/lib/data-filter/columns/filter-column-selection.component.ts

@@ -0,0 +1,69 @@
+import { Component, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
+import { AXFilterCondition, AXFilterColumnComponent } from '../filter.class';
+import { AXCheckItem } from '@acorex/core';
+
+@Component({
+    selector: 'ax-filter-column-selection',
+    template: `
+    <div class="ax-filter-section">
+    <ax-selection-list  [items]="items" (selectedItemsChange)="onSelectChange($event)" [mode]="mode" direction="vertical" [(selectedItems)]="selectedItems">
+    </ax-selection-list>
+ </div>
+    `,
+    providers: [
+        { provide: AXFilterColumnComponent, useExisting: AXFilterColumnSelectionComponent }
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AXFilterColumnSelectionComponent extends AXFilterColumnComponent {
+
+
+    selectedItems: any[] = [];
+
+    @Input()
+    items: AXCheckItem[] = [];
+
+    @Input()
+    mode = 'single';
+
+    @Input()
+    dataType: any = 'number';
+
+
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    get condition(): AXFilterCondition {
+        const values = this.selectedItems.map(c => c.value);
+        if (values.length === 0) {
+            return null;
+
+        }
+        return {
+            condition: this.mode === 'single' ? 'equal' : 'contains',
+            field: this.field,
+            dataType: this.dataType,
+            value: this.mode === 'single' ? values[0] : values
+        }
+    }
+    clear() {
+        this.selectedItems = [];
+        super.clear();
+    }
+    onSelectChange(e) {
+        this.valueChange.emit();
+
+    }
+
+    setFilter(value: any, operator: string) {
+        if (value instanceof Array) {
+            this.selectedItems = this.items.filter(c => value.some(z => z === c.value));
+        }
+        else {
+            this.selectedItems = [this.items.find(c => c.value === value)];
+        }
+        super.setFilter(value, operator);
+    }
+}

package/src/lib/data-filter/columns/filter-column-string.component.ts

@@ -0,0 +1,100 @@
+import { Component,ChangeDetectorRef } from '@angular/core';
+import { AXFilterCondition, AXFilterColumnComponent } from '../filter.class';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+@Component({
+    selector: 'ax-filter-column-string',
+    template: `
+    <div class="ax-filter-section">
+    <div>
+        <select (ngModelChange)="onOperatorChange($event)" class="form-control form-control-sm"  [(ngModel)]="operator">
+            <option *ngFor="let o of operators" value="{{o.value}}">
+                {{o.title}}
+            </option>
+        </select>
+    </div>
+    <div>
+        <ax-text-box placeholder="Type here" (textChange)="onTextChange($event)" [(value)]="value" *ngIf="operator!='is-not-empty' && operator!='is-empty'">
+        </ax-text-box>
+    </div>
+</div>
+    `,
+    providers: [
+        { provide: AXFilterColumnComponent, useExisting: AXFilterColumnStringComponent }
+    ]
+})
+export class AXFilterColumnStringComponent extends AXFilterColumnComponent {
+
+
+    operator: string = 'contains';
+    operators: any[] = [
+        {
+            title: 'is',
+            value: 'equal'
+        },
+        {
+            title: `isn't`,
+            value: 'not-equal'
+        },
+        {
+            title: 'contains',
+            value: 'contains'
+        },
+        {
+            title: 'not contains',
+            value: 'not-contains'
+        },
+        {
+            title: 'start with',
+            value: 'start-with'
+        },
+        {
+            title: 'end with',
+            value: 'end-with'
+        },
+        {
+            title: 'is empty',
+            value: 'is-empty'
+        },
+        {
+            title: `isn't empty`,
+            value: 'is-not-empty'
+        }
+    ];
+
+    constructor(protected cdr: ChangeDetectorRef) {
+        super(cdr);
+    }
+
+    private searchChangeObserver: any;
+
+    onOperatorChange(e) {
+
+        this.valueChange.emit();
+
+    }
+
+    // TODO: Check this method work correctly
+    onTextChange(e) {
+        if (!this.searchChangeObserver) {
+            return new Observable(observer => {
+                this.searchChangeObserver = observer;
+            })
+                .pipe(debounceTime(500))
+                .pipe(distinctUntilChanged())
+                .subscribe(c => {
+                    this.valueChange.emit();
+                });
+        }
+        this.searchChangeObserver.next(e);
+    }
+
+    get condition(): AXFilterCondition {
+        return {
+            condition: this.operator,
+            field: this.field,
+            dataType: 'string',
+            value: this.value
+        }
+    }
+}

package/src/lib/data-filter/filter-panel/filter-panel.component.html

@@ -0,0 +1,120 @@
+<div class="ax-filter-panel" #panel>
+    <div class="saved-list" #savedList>
+        <ax-panel-box #fb>
+            <ng-template #header>
+                <div class="group-header" (click)="fb.toggle()">
+                    <ax-toolbar>
+                        <ax-toolbar-title>
+                            <div>
+                                <i class="far fa-filter"></i>
+                                <span>SAVED FILTERS</span>
+                            </div>
+                        </ax-toolbar-title>
+                        <ax-toolbar-menu #menu [items]="saveItems" (onItemClick)="onMenuItemClick($event)">
+                        </ax-toolbar-menu>
+                    </ax-toolbar>
+                </div>
+            </ng-template>
+
+            <div class="list">
+                <ng-container *ngIf="predefinedFilters && predefinedFilters.length; else emptyList">
+                    <ul>
+                        <ng-container *ngFor="let f of predefinedFilters">
+                            <ng-container *ngIf="!f.isInEdit; else editMode">
+                                <li (click)="setFilterByName(f.name)">
+                                    <div class="item-line" [class.selected]="f.selected">
+                                        <span class="title"><i class="far fa-check"></i> {{f.title}}</span>
+                                        <span class="tools"><i class="far fa-pen text-primary" title="Rename"
+                                                (click)="handleRenameClick(f)"></i>&nbsp;<i
+                                                class="far fa-times text-danger" title="Remove"
+                                                (click)="removeFilter(f)"></i></span>
+                                    </div>
+                                </li>
+                            </ng-container>
+                            <ng-template #editMode>
+                                <li>
+                                    <ax-text-box #tbxName placeholder="Enter filter's title here"
+                                        (onKey)="tbxNameOnKey($event)">
+                                        <ax-button title="Save" type="primary" (onClick)="applySaveFilter()">
+                                            <i class="far fa-check"></i>
+                                        </ax-button>
+                                        <ax-button title="Cancel" type="danger" (onClick)="cancelSaveFilter()">
+                                            <i class="far fa-times"></i>
+                                        </ax-button>
+                                        <ax-validation>
+                                            <ax-validation-rule type="required" message="this field is required">
+                                            </ax-validation-rule>
+                                        </ax-validation>
+                                    </ax-text-box>
+                                </li>
+                            </ng-template>
+                        </ng-container>
+                    </ul>
+                </ng-container>
+                <ng-template #emptyList>
+                    <div class="empty-list">
+                        Empty
+                    </div>
+                </ng-template>
+            </div>
+        </ax-panel-box>
+    </div>
+    <div class="body" #body>
+        <ng-container *ngFor="let g of groups">
+            <ax-panel-box #fb>
+                <ng-template #header>
+                    <div class="group-header" *ngIf="g.caption" (click)="fb.toggle()">
+                        <i
+                            [ngClass]="{ 'far fa-minus-square' : !fb.collapsed ,'fas fa-plus-square' : fb.collapsed }"></i>
+                        <span>{{g.caption}}</span>
+                    </div>
+                </ng-template>
+                <ng-container *ngFor="let c of g.columns">
+                    <div class="ax-filter-item-header" [style.margin-bottom.px]="c.active ? 0 : 2">
+                        <ax-check-box (onValueChanged)="onCheckValueChange(c,$event)" [label]="c.caption"
+                            [(value)]="c.active">
+                        </ax-check-box>
+                    </div>
+                    <div [hidden]="!c.active">
+                        <ng-container [ngSwitch]="c.type">
+                            <ng-container *ngSwitchCase="'selection'">
+                                <ax-filter-column-selection (valueChange)="onValueChange($event)" [field]="c.field"
+                                    [(active)]="c.active" [mode]="c.options.mode" [items]="c.options.items"
+                                    [dataType]="c.options.dataType">
+                                </ax-filter-column-selection>
+                            </ng-container>
+                            <ng-container *ngSwitchCase="'date'">
+                                <ax-filter-column-date (valueChange)="onValueChange($event)" [field]="c.field"
+                                    [(active)]="c.active">
+                                </ax-filter-column-date>
+                            </ng-container>
+                            <ng-container *ngSwitchCase="'number'">
+                                <ax-filter-column-number (valueChange)="onValueChange($event)" [field]="c.field"
+                                    [(active)]="c.active">
+                                </ax-filter-column-number>
+                            </ng-container>
+                            <ng-container *ngSwitchDefault>
+                                <ax-filter-column-string (valueChange)="onValueChange($event)" [field]="c.field"
+                                    [(active)]="c.active">
+                                </ax-filter-column-string>
+                            </ng-container>
+                        </ng-container>
+                    </div>
+                </ng-container>
+            </ax-panel-box>
+        </ng-container>
+    </div>
+
+    <div *ngIf="mode=='click'" class="footer" #footer>
+        <div class="filter-panel">
+            <ax-button (onClick)="apply()" type="success" size="sm">
+                <i class="far fa-filter"></i>
+                Apply Filter
+            </ax-button>
+            <ax-button (onClick)="clear();" type="light " size="sm">
+                <i class="far fa-eraser"></i>
+                Clear
+            </ax-button>
+        </div>
+    </div>
+</div>