@acorex/data-grid 5.1.6 → 5.1.7

package/src/lib/data-grid/datagrid.module.ts

@@ -1,81 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXDataGridComponent } from './datagrid.component';
-import { FormsModule } from '@angular/forms';
-import { AgGridModule } from 'ag-grid-angular';
-import { AXDataSourceModule } from '@acorex/components';
-import { AXGridTextColumn, TextFilterRenderer } from './columns/text-column.component';
-import { AXGridCheckColumn, BooleanRenderer, BooleanFilterRenderer } from './columns/check-column.component';
-import { AXCoreModule } from '@acorex/core';
-import { AXGridSelectionColumn } from './columns/selection-column.component';
-import { CommandRenderer, AXGridCommandColumn } from './columns/command-column.component';
-import { AXDataGridFilterComponent } from './filters/filter.component';
-import { AXGridDateColumn, AXDatePickerFilterComponent } from './columns/date-column.component';
-import { AXDataGridRowTemplateComponent, AXDataGridRowTemplateRenderer } from './templates/row-template.component';
-import { AXDataGridCellTemplateComponent, AXDataGridCellTemplateRenderer } from './templates/cell-template.component';
-import { AXDataGridDetailTemplateComponent, AXDataGridDetailTemplateRenderer } from './templates/detail-template.component';
-import { AXTextBoxModule } from '@acorex/components';
-import { AXCheckBoxModule } from '@acorex/components';
-import { AXSelectBoxModule } from '@acorex/components';
-import { AXButtonModule } from '@acorex/components';
-import { AXDatePickerModule } from '@acorex/components';
-import 'ag-grid-enterprise';
-import { AXGridRowNumberColumn } from './columns/row-number-column.component';
-
-@NgModule({
-    declarations: [
-        AXDataGridComponent,
-        AXGridTextColumn,
-        AXGridCheckColumn,
-        AXGridSelectionColumn,
-        AXGridDateColumn,
-        AXGridRowNumberColumn,
-        AXGridCommandColumn,
-        BooleanRenderer,
-        BooleanFilterRenderer,
-        TextFilterRenderer,
-        AXDataGridFilterComponent,
-        AXDataGridRowTemplateComponent,
-        AXDataGridDetailTemplateComponent,
-        AXDataGridRowTemplateRenderer,
-        AXDataGridDetailTemplateRenderer,
-        AXDataGridCellTemplateComponent,
-        AXDataGridCellTemplateRenderer,
-        AXDatePickerFilterComponent,
-        CommandRenderer
-    ],
-    imports: [
-        CommonModule,
-        AXCoreModule,
-        FormsModule,
-        //AgGridModule,
-        AXTextBoxModule,
-        AXCheckBoxModule,
-        AXSelectBoxModule,
-        AXDataSourceModule,
-        AXButtonModule,
-        AXDatePickerModule,
-        AgGridModule.withComponents([AXDatePickerFilterComponent])
-    ],
-    exports: [
-        AXDataGridComponent,
-        AXDataGridFilterComponent,
-        AXDataGridRowTemplateComponent,
-        AXDataGridDetailTemplateComponent,
-        AXDataGridRowTemplateRenderer,
-        AXDataGridDetailTemplateRenderer,
-        AXDataGridCellTemplateComponent,
-        AXDataGridCellTemplateRenderer,
-        AXGridTextColumn,
-        AXGridRowNumberColumn,
-        AXGridCheckColumn,
-        AXGridDateColumn,
-        AXGridSelectionColumn,
-        AXGridCommandColumn,
-        BooleanRenderer,
-        BooleanFilterRenderer,
-        CommandRenderer
-    ],
-    providers: []
-})
-export class AXDataGridModule {}

package/src/lib/data-grid/filters/filter.component.ts

@@ -1,21 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-
-@Component({
-  selector: 'ax-data-grid-filter',
-  template: `
-    <div class='ax-grid-filter-container'>
-      <ng-content></ng-content>
-      <div class='btn-group' role='group'>
-        <button type='button' class='btn btn-primary btn-sm'>
-          <i class='fas fa-filter'></i>
-        </button>
-        <button type='button' class='btn btn-danger btn-sm'>
-          <i class='fas fa-trash-alt'></i>
-        </button>
-      </div>
-    </div>
-  `,
-  encapsulation: ViewEncapsulation.None
-})
-export class AXDataGridFilterComponent {}

package/src/lib/data-grid/templates/cell-template.component.ts

@@ -1,47 +0,0 @@
-import { Component, ContentChild, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
-import { ICellRendererAngularComp } from 'ag-grid-angular';
-import { ICellRendererParams } from 'ag-grid-community';
-
-@Component({
-    selector: 'ax-cell-template',
-    template: `<ng-content></ng-content>
-   `
-})
-
-export class AXDataGridCellTemplateComponent {
-    @ContentChild(TemplateRef, { static: true }) templateRef: TemplateRef<any>;
-    renderer: any;
-    params: any;
-    constructor() {
-        this.renderer = AXDataGridCellTemplateRenderer;
-    }
-    ngOnInit(): void {
-        this.params = {
-            templateRef: this.templateRef
-        }
-    }
-}
-
-@Component({
-    template: `
-        <ng-container *ngTemplateOutlet='templateRef; context: { $implicit: rowData }'>
-        </ng-container>
-    `
-})
-
-export class AXDataGridCellTemplateRenderer implements ICellRendererAngularComp {
-    rowData: any;
-    templateRef: TemplateRef<any>;
-
-    constructor() { }
-
-    agInit(params: ICellRendererParams): void {
-        this.rowData = params.data;
-        this.templateRef = (params as any).templateRef;
-    }
-
-    refresh(params: ICellRendererParams): boolean {
-        this.rowData = params.data;
-        return true;
-    }
-}

package/src/lib/data-grid/templates/detail-template.component.ts

@@ -1,43 +0,0 @@
-import { Component, ContentChild, TemplateRef, Input, ChangeDetectorRef } from '@angular/core';
-import { ICellRendererAngularComp } from 'ag-grid-angular';
-
-@Component({
-    selector: 'ax-grid-detail-template',
-    template: `<ng-content></ng-content>`
-})
-
-export class AXDataGridDetailTemplateComponent {
-    @ContentChild(TemplateRef, { static: true }) templateRef: TemplateRef<any>;
-    renderer: any;
-    params: any;
-    constructor() {
-        this.renderer = AXDataGridDetailTemplateRenderer;
-    }
-    ngOnInit(): void {
-        this.params = {
-            templateRef: this.templateRef
-        }
-    }
-
-    @Input()
-    height: number = 100;
-}
-
-@Component({
-    template: `<ng-container *ngTemplateOutlet='templateRef; context: { $implicit: data }'></ng-container>`
-})
-
-export class AXDataGridDetailTemplateRenderer implements ICellRendererAngularComp {
-
-    refresh(params: any): boolean {
-        return false;
-    }
-
-    templateRef: TemplateRef<any>;
-    data: any;
-
-    agInit(params: any): void {
-        this.data = params.data;
-        this.templateRef = params.templateRef;
-    }
-}

package/src/lib/data-grid/templates/row-template.component.ts

@@ -1,41 +0,0 @@
-import { Component, ContentChild, TemplateRef, Input } from '@angular/core';
-import { ICellRendererAngularComp } from 'ag-grid-angular';
-
-@Component({
-    selector: 'ax-row-template',
-    template: `<ng-content></ng-content>`
-})
-
-export class AXDataGridRowTemplateComponent {
-    @ContentChild(TemplateRef, { static: true }) templateRef: TemplateRef<any>;
-    renderer: any;
-    params: any;
-    constructor() {
-        this.renderer = AXDataGridRowTemplateRenderer;
-    }
-    ngOnInit(): void {
-        this.params = {
-            templateRef: this.templateRef
-        }
-    }
-}
-
-@Component({
-    template: `<ng-container *ngTemplateOutlet='templateRef; context: { $implicit: data }'></ng-container>`
-})
-
-export class AXDataGridRowTemplateRenderer implements ICellRendererAngularComp {
-
-    templateRef: TemplateRef<any>;
-
-    data: any;
-
-    refresh(params: any): boolean {
-        return false;
-    }
-
-    agInit(params: any): void {
-        this.data = params.data.callRecords;
-        this.templateRef = params.templateRef;
-    }
-}

package/src/lib/data-lov/data-lov-popup/data-lov-popup.component.html

@@ -1,16 +0,0 @@
-<div style="height: 70vh; padding: 0.5em;">
-    <div style="height: calc(100%);">
-
-        <ax-data-grid [pagination]="pagination" [rtl]="rtl" [suppressRowClickSelection]="false" [keyField]="keyField"
-            [hasChildField]="hasChildField" [selectRow]="selectedItems" #grid [columns]="columns"
-            [remoteOperation]="true" [selectionMode]="selectionMode" (rowDbClick)="rowDoubleClicked($event)"
-            (rowSelectionChange)="rowSelectionChange($event)" [dataSource]="dataSource">
-            <ax-toolbar>
-                <ax-toolbar-search #searchBox style="width: 100%;"></ax-toolbar-search>
-            </ax-toolbar>
-            <ax-selection-column *ngIf="selectionMode== 'single'? false : true"></ax-selection-column>
-            <!-- <ax-data-source [provideData]="dataSource.provideData">
-            </ax-data-source> -->
-        </ax-data-grid>
-    </div>
-</div>

package/src/lib/data-lov/data-lov-popup/data-lov-popup.component.ts

@@ -1,130 +0,0 @@
-import { Component, ViewChild, ChangeDetectorRef, ElementRef } from '@angular/core';
-import { AXDataGridComponent, AXDataGridSelectionChangeEvent } from '../../data-grid/datagrid.component';
-import { AXGridDataColumn } from '../../data-grid/columns/column.component';
-import { AXTranslator, AXButtonItem, AXConfig } from '@acorex/core';
-import {
-  AXToolbarSearchComponent,
-  AXBasePopupPageComponent,
-  AXMenuItemClickEvent,
-  AXDataSourceComponent,
-  AXDataSourceReadParams
-} from '@acorex/components';
-
-@Component({
-  templateUrl: './data-lov-popup.component.html'
-})
-export class AXDataLovPopupComponent extends AXBasePopupPageComponent {
-  @ViewChild('grid', { static: true })
-  grid: AXDataGridComponent;
-
-  @ViewChild('searchBox')
-  searchBox: AXToolbarSearchComponent;
-
-  columns: AXGridDataColumn[] = [];
-
-  selectedItems: any[] = [];
-
-  keyField: string = '';
-  allowNull: boolean = true;
-
-  hasChildField: string;
-  rtl: boolean = AXConfig.get('layout.rtl');
-
-  selectedRows: any[] = [];
-  pagination:boolean =true;
-  constructor(private cdr: ChangeDetectorRef, private ref: ElementRef) {
-    super();
-  }
-
-  dataSource: AXDataSourceComponent;
-
-  selectionMode: string;
-
-  ngOnInit(): void {
-    if (this.rtl == null) {
-      this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
-    }
-  }
-
-  onDoneClick() {
-    if (this.selectedItems) {
-      this.close(this.selectedItems);
-    } else {
-      this.close();
-    }
-  }
-
-  rowDoubleClicked(e) {
-    if (this.selectionMode == 'single') {
-      this.selectedItems = [];
-    }
-
-    this.selectedItems = this.selectedItems.filter((c) => c[this.keyField] != e.data.data[this.keyField]);
-    this.selectedItems.push(e.data.data);
-
-    this.onDoneClick();
-  }
-
-  onCancelClick() {
-    this.close();
-  }
-
-  rowSelectionChange(e) {
-    if (e.data.node.selected == true) {
-      this.selectedItems = this.selectedItems.filter((c) => c[this.keyField] != e.data.node.data[this.keyField]);
-      this.selectedItems.push(e.data.node.data);
-    } else {
-      if (this.allowNull == true || (this.allowNull == false && this.selectedItems.length > 1)) {
-        this.selectedItems = this.selectedItems.filter((c) => c[this.keyField] != e.data.node.data[this.keyField]);
-      }
-    }
-  }
-
-  ngAfterViewInit() {
-    this.selectedItems.forEach((ele) => {
-      this.selectedRows.push(ele);
-    });
-    this.searchBox.focus();
-    if (this.dataSource.onDataReceived) {
-      this.dataSource.onDataReceived.subscribe((arg) => {
-        this.cdr.markForCheck();
-        this.cdr.detectChanges();
-      });
-    }
-  }
-
-  // onValueSearchChanged(e) {
-
-  //     const params: AXDataSourceReadParams = {}
-  //     params.searchText = e.value;
-  //     // params.take = 100;
-  //     // params.skip = 0
-  //     this.dataSource.fetch(params);
-  // }
-
-  getFooterButtons(): AXButtonItem[] {
-    return [
-      {
-        text: AXTranslator.get('common.confirm'),
-        name: 'confirm',
-        style: 'ax primary',
-        icon: 'far fa-check-circle'
-      },
-      {
-        text: AXTranslator.get('common.cancel'),
-        name: 'cancel',
-        style: 'ax light',
-        icon: 'far fa-times'
-      }
-    ];
-  }
-
-  onFooterButtonClick(e: AXMenuItemClickEvent) {
-    if (e.name === 'confirm') {
-      this.onDoneClick();
-    }
-    if (e.name === 'cancel') {
-      this.onCancelClick();
-    }
-  }
-}

package/src/lib/data-lov/data-lov.component.html

@@ -1,61 +0,0 @@
-<ax-select-box [rowInputTemplate]="rowTemplate" [rtl]="rtl" [allowSearch]="allowSearch" #selectBox [showDropDownButton]="false" [allowNull]="allowNull"
-    [remoteOperation]="true" [placeholder]="placeholder" [size]="size" [textField]="textField" [valueField]="valueField"
-    [disabled]="disabled" [mode]="mode" [(selectedItems)]="selectedItems"
-    (selectionChanged)="handleSelectChange($event)" [dataSource]="dataSource">
-    <ng-container start>
-        <ng-content select="[start]">
-        </ng-content>
-    </ng-container>
-    <ng-container end>
-        <ax-button icon="far fa-bars icon" [disabled]="disabled" type="light blank" (click)="handleButtonClick()" end
-            [tabIndex]="-1">
-        </ax-button>
-        <ng-content select="[end]">
-        </ng-content>
-    </ng-container>
-</ax-select-box>
-
-
-<!-- <ax-select-box2 [rtl]="rtl" [allowSearch]="allowSearch" #selectBox [showDropDownButton]="false" [allowNull]="allowNull"
-    [remoteOperation]="true" [placeholder]="placeholder" [size]="size" [textField]="textField" [valueField]="valueField"
-    [disabled]="disabled" [selectionMode]="mode" (onValueChanged)="handleSelectChange($event)" [dataSource]="dataSource"
-    [(value)]="selectedItems" selectionDataMode="item">
-    <ng-container start>
-        <ng-content select="[start]">
-        </ng-content>
-    </ng-container>
-    <ng-container end>
-        <ax-button icon="far fa-bars icon" [disabled]="disabled" type="primary blank" (click)="handleButtonClick()" end
-            [tabIndex]="-1">
-        </ax-button>
-        <ng-content select="[end]">
-        </ng-content>
-    </ng-container>
-</ax-select-box2> -->
-
-
-<!-- <div class="ax-lov-box" [style.display]="mode=='hidden' ? 'none':'unset'">
-    <div class="ax-field-set">
-        <div class="ax-field-set-wrapper" [ngClass]="{ 'no-label': !label }">
-            <fieldset [ngClass]="{ 'input-focused': isFocused, 'input-error': errorText }">
-                <legend *ngIf="label">
-                    {{ label }}
-                </legend>
-            </fieldset>
-            <input type="text" [(ngModel)]="text" [placeholder]="placeholder" (keyup)="handleKeyEvent($event)"
-                (blur)="handleBlurEvent($event)" (focus)="handleFocusEvent($event)" class="ax-text-box" disabled />
-            <div class="ax-field-set-button">
-                <button *ngIf="text && allowClear" type="button" class="btn btn-light" (click)="clearText()">
-                    <i class="far fa-times"></i>
-                </button>
-                <button type="button" class=" btn btn-primary" (click)="handleButtonClick($event)">
-                    <i class="far fa-check-circle"></i>
-                </button>
-            </div>
-        </div>
-    </div>
-    <div class="validation-text" *ngIf="errorText">
-        {{ errorText }}
-    </div>
-
-</div> -->

package/src/lib/data-lov/data-lov.component.ts

@@ -1,184 +0,0 @@
-import {
-  Component,
-  Input,
-  ContentChildren,
-  QueryList,
-  Output,
-  EventEmitter,
-  ContentChild,
-  ViewChild,
-  ViewEncapsulation,
-  ElementRef,
-  TemplateRef
-} from '@angular/core';
-import { AXPopupService, AXBaseInputComponent, AXBaseSizableComponent, AXElementSize, AXValidation } from '@acorex/components';
-import { AXDataSourceComponent, AXSelectBoxComponent, AXDataEvent, AXValidatableComponent } from '@acorex/components';
-import { AXDataLovPopupComponent } from './data-lov-popup/data-lov-popup.component';
-import { AXGridDataColumn } from '../data-grid/columns/column.component';
-import { AXConfig } from '@acorex/core';
-
-@Component({
-  selector: 'ax-lov',
-  templateUrl: './data-lov.component.html',
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'width: 100%' },
-  providers: [{ provide: AXValidatableComponent, useExisting: AXLOVComponent }]
-})
-export class AXLOVComponent extends AXValidatableComponent implements AXBaseSizableComponent, AXBaseInputComponent {
-  @ContentChild(AXValidation, { static: true })
-  private _contentValidation: AXValidation;
-  private _validation: AXValidation;
-
-  @Input()
-  public get validation(): AXValidation {
-    return this._validation ? this._validation : this._contentValidation;
-  }
-  public set validation(v: AXValidation) {
-    this._validation = v;
-  }
-
-  constructor(private popup: AXPopupService, private ref: ElementRef) {
-    super();
-  }
-
-  @ViewChild('selectBox', { static: true })
-  selectBox: AXSelectBoxComponent;
-
-  @ContentChild(AXDataSourceComponent, { static: true })
-  dataSource: AXDataSourceComponent;
-
-  @ContentChildren(AXGridDataColumn)
-  private columns: QueryList<AXGridDataColumn>;
-
-  @ContentChild('itemTemplate', { static: true })
-  rowTemplate: TemplateRef<any>;
-
-  @Input()
-  textField: string = '';
-
-  @Input()
-  allowSearch: boolean = true;
-
-  @Input()
-  valueField: string = '';
-
-  @Input()
-  hasChildField: string = 'null';
-
-  @Input()
-  allowNull: boolean = true;
-
-  @Input()
-  popupSize: 'sm' | 'md' | 'lg' | 'full' = 'md';
-
-  @Input()
-  pagination:boolean =true;
-  @Input()
-  selectedItems: any[] = [];
-
-  // @Input()
-  // selectedValues: any[] = [];
-
-  @Input()
-  readonly: boolean = false;
-
-  @Input()
-  disabled: boolean = false;
-
-  @Input()
-  chipsWidth: string = '';
-
-  @Input()
-  size: AXElementSize = 'md';
-
-  @Input()
-  caption: string;
-
-  @Input()
-  mode: 'single' | 'multiple' = 'single';
-
-  @Input()
-  placeholder: string;
-
-  @Output()
-  onSelectionChange: EventEmitter<AXDataEvent<any>> = new EventEmitter<AXDataEvent<any>>();
-
-  @Input()
-  rtl: boolean = AXConfig.get('layout.rtl');
-
-  focus(): void {
-    this.selectBox.focus();
-  }
-
-  refresh() {
-    this.selectBox.refresh();
-  }
-
-  handleButtonClick() {
-    this.open();
-  }
-
-  ngOnInit(): void {
-    if (this.rtl == null) {
-      this.rtl = window.getComputedStyle(this.ref.nativeElement, null).getPropertyValue('direction') === 'rtl';
-    }
-    //  this.selectVal = this.selectedValues;
-    this.onSelectionChange.subscribe((c) => {
-      this.clearValidationStyle(this.ref.nativeElement);
-    });
-  }
-
-  ngAfterContentInit(): void {
-    this.initValidation(this.ref, 'selectedItems', this.validation);
-  }
-
-  handleSelectChange(e) {
-    this.onSelectionChange.emit({ data: this.selectedItems, component: this, htmlElement: this.ref.nativeElement });
-  }
-
-  public open(): Promise<any> {
-    return new Promise((resolve) => {
-      this.selectBox.dropdown.close();
-      this.popup
-        .open(AXDataLovPopupComponent, {
-          size: this.popupSize,
-          //   closable: false,
-          data: {
-            dataSource: this.dataSource,
-            selectionMode: this.mode,
-            columns: this.columns.toArray(),
-            //  selectedItems: this.selectedValues,
-            selectedItems: this.selectedItems,
-            keyField: this.valueField,
-            allowNull: this.allowNull,
-            hasChildField: this.hasChildField,
-            rtl: this.rtl,
-            pagination:this.pagination
-          },
-          title: this.caption
-          // size: this.size,
-        })
-        .then((c) => {
-          if (c.data) {
-            // this.selectedValues = [];
-            this.selectedItems = [];
-            c.data.forEach((elm) => {
-              this.selectedItems.push(elm);
-            });
-            //  this.selectedItems = c.data;
-            //  this.selectBox.refresh();
-            this.onSelectionChange.emit({ data: this.selectedItems, component: this, htmlElement: this.ref.nativeElement });
-            if (resolve) {
-              resolve(c.data);
-            }
-          } else {
-            if (resolve) {
-              resolve(this.selectedItems);
-            }
-          }
-
-          this.selectBox.refresh();
-        });
-    });
-  }
-}

package/src/lib/data-lov/data-lov.module.ts

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AXLOVComponent } from './data-lov.component';
-import { FormsModule } from '@angular/forms';
-import { AXDataLovPopupComponent } from './data-lov-popup/data-lov-popup.component';
-import { AXDataGridModule } from '../data-grid/datagrid.module';
-import { AXDataSourceModule, AXButtonModule, AXToolbarModule, AXSearchBoxModule, AXSelectBoxModule } from '@acorex/components';
-
-
-@NgModule({
-    declarations: [AXLOVComponent, AXDataLovPopupComponent],
-    imports: [CommonModule, FormsModule, AXDataGridModule, AXDataSourceModule, AXButtonModule, AXToolbarModule, AXSelectBoxModule, AXSearchBoxModule],
-    exports: [AXLOVComponent, AXDataLovPopupComponent],
-    providers: []
-})
-export class AXLOVModule { }

package/src/test.ts

@@ -1,28 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(), {
-    teardown: { destroyAfterEach: false }
-}
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);