@acorex/data-grid 4.1.4 → 4.2.0

package/{lib/data-grid/datagrid.events.d.ts → src/lib/data-grid/datagrid.events.ts}

@@ -5,16 +5,19 @@ export interface AXGridRowEvent {
 }
 export interface AXGridRowCommandEvent extends AXGridRowEvent {
     command: string;
-    htmlEvent: UIEvent;
+    htmlEvent:UIEvent
 }
 export interface AXGridCellEvent extends AXGridRowEvent {
     column: any;
     value: any;
 }
+
+
 export interface AXGridRowParams extends AXGridRowEvent {
 }
 export interface AXGridCellParams extends AXGridCellEvent {
 }
+
 export interface AXGridRowSelectionEvent {
     items: AXGridRowEvent[];
 }

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+<div style="height: 70vh; padding: 0.5em;">
+    <div style="height: calc(100%);">
+
+        <ax-data-grid [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

@@ -0,0 +1,130 @@
+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[] = [];
+
+  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

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

@@ -0,0 +1,181 @@
+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()
+  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
+          },
+          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

@@ -0,0 +1,16 @@
+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/{public-api.d.ts → src/public-api.ts}

@@ -5,13 +5,16 @@ export * from './lib/data-grid/columns/date-column.component';
 export * from './lib/data-grid/columns/selection-column.component';
 export * from './lib/data-grid/columns/text-column.component';
 export * from './lib/data-grid/columns/row-number-column.component';
+
 export * from './lib/data-grid/datagrid.component';
 export * from './lib/data-grid/datagrid.events';
 export * from './lib/data-grid/datagrid.module';
+
 export * from './lib/data-grid/filters/filter.component';
 export * from './lib/data-grid/templates/cell-template.component';
 export * from './lib/data-grid/templates/row-template.component';
 export * from './lib/data-grid/templates/detail-template.component';
+
 export * from './lib/data-lov/data-lov-popup/data-lov-popup.component';
 export * from './lib/data-lov/data-lov.component';
 export * from './lib/data-lov/data-lov.module';