@acorex/data-grid 6.5.28 → 6.5.31

package/src/lib/data-grid/columns/column.component.ts

@@ -1,182 +0,0 @@
-import { AXConfig } from '@acorex/core';
-import { Input, ContentChild, TemplateRef, Directive } from '@angular/core';
-import { AXGridCellParams } from '../datagrid.events';
-import { AXDataGridCellTemplateComponent } from '../templates/cell-template.component';
-import { AXDatePickerFilterComponent } from './date-column.component';
-
-
-@Directive()
-export abstract class AXGridDataColumn {
-
-
-    @ContentChild(AXDataGridCellTemplateComponent)
-    cellTemplate: AXDataGridCellTemplateComponent;
-
-    @Input()
-    width: number = 100;
-
-    @Input()
-    maxWidth: number;
-
-    @Input()
-    minWidth: number;
-
-    @Input()
-    pinned: 'start' | 'end' | null = null;
-
-    @Input()
-    allowSorting: boolean = true;
-
-    @Input()
-    allowFiltering: boolean = AXConfig.get('datagrid.allowFiltering') || false;;
-
-    @Input()
-    cellClass: (params: AXGridCellParams) => (string | string[]) | (string | string[]);
-
-    @Input()
-    sort: 'asc' | 'desc' | null = null;
-
-    @Input()
-    field: string = '';
-
-    @Input()
-    caption: string = '';
-
-    @Input()
-    cellRendererParams: any;
-
-    @Input()
-    checkbox: boolean = false;
-
-    @Input()
-    headerCheckbox: boolean = false;
-
-    @Input()
-    groupIndex: number = -1;
-
-    @Input()
-    treeIndex: number = -1;
-
-    @Input()
-    enableRowGroup: boolean = false;
-
-    @Input()
-    hide: boolean = false;
-
-    @Input()
-    floatingFilter: boolean = AXConfig.get('datagrid.floatingFilter') || false;
-
-    @Input()
-    disableMenu: boolean = false;
-
-    @Input()
-    resizable: boolean = true;
-
-    @Input()
-    menuColumnDisable: boolean = false;
-
-    @Input()
-    menuItemDisable: boolean = false;
-
-    constructor() { }
-
-    render(): any {
-        const col: any = {
-            field: this.field,
-            width: this.width,
-        };
-        col.resizable = this.resizable;
-        col.suppressMenu = this.disableMenu;
-        col.menuTabs = ['filterMenuTab', 'columnsMenuTab', 'generalMenuTab']
-        col.floatingFilter = this.floatingFilter;
-
-        if (!this.allowFiltering) {
-            col.filter = false;
-            col.menuTabs = col.menuTabs.filter(c => c != 'filterMenuTab');
-            col.floatingFilter = false;
-        }
-        if (this.menuColumnDisable == true) {
-            col.menuTabs = col.menuTabs.filter(c => c != 'columnsMenuTab');
-        }
-        if (this.menuItemDisable == true) {
-            col.menuTabs = col.menuTabs.filter(c => c != 'generalMenuTab');
-        }
-        if (this.caption) {
-            col.headerName = this.caption;
-        }
-        if (this.minWidth) {
-            col.minWidth = this.minWidth;
-        }
-        if (this.maxWidth) {
-            col.maxWidth = this.maxWidth;
-        }
-        if (this.pinned) {
-            col.pinned = this.pinned === 'start' ? 'right' : 'left';
-            // TODO: Change based on layout
-        }
-        if (this.allowSorting) {
-            col.sortable = this.allowSorting;
-        }
-        if (this.sort) {
-            col.sort = this.sort;
-        }
-
-        if (this.groupIndex >= 0) {
-            col.rowGroupIndex = this.groupIndex;
-            col.rowGroup = true;
-            this.enableRowGroup = true;
-        }
-
-        if (this.treeIndex >= 0) {
-            col.rowGroupIndex = this.treeIndex;
-            col.rowGroup = false;
-        }
-        if (this.hide) {
-            col.hide = true;
-
-        }
-        if (this.enableRowGroup) {
-            col.enableRowGroup = this.enableRowGroup;
-        }
-
-        if (this.cellClass) {
-            const THAT = this;
-            if (this.cellClass instanceof Function) {
-                col.cellClass = (p) => {
-                    return THAT.cellClass({
-                        column: THAT,
-                        rowIndex: p.node.rowIndex,
-                        rowLevel: p.node.level,
-                        data: p.data,
-                        value: p.value
-                    });
-                };
-            }
-            else {
-                col.cellClass = this.cellClass;
-
-            }
-        }
-        //
-        if (this.cellTemplate != null) {
-            col.cellRendererFramework = this.cellTemplate.renderer;
-            col.cellRendererParams = this.cellTemplate.params;
-        }
-
-        if (this.checkbox) {
-            col.checkboxSelection = (params) => {
-                return true;
-            };
-            //  col.headerCheckboxSelection = this.headerCheckbox;
-        }
-        return col;
-    }
-}
-
-
-
-
-
-
-
-

package/src/lib/data-grid/columns/command-column.component.ts

@@ -1,101 +0,0 @@
-import { AXGridDataColumn } from './column.component';
-import { ChangeDetectionStrategy, Component, Input, EventEmitter, ViewEncapsulation, Output, ChangeDetectorRef } from '@angular/core';
-import { ICellRendererParams } from 'ag-grid-community';
-import { AXGridRowCommandEvent } from '../datagrid.events';
-import { AXMenuItem } from '@acorex/core';
-import { ICellRendererAngularComp } from 'ag-grid-angular';
-
-export type AXGridRowCommandFunction = (row: any) => AXMenuItem[];
-
-@Component({
-  selector: 'ax-command-column',
-  template: '',
-  providers: [{ provide: AXGridDataColumn, useExisting: AXGridCommandColumn }],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
-})
-export class AXGridCommandColumn extends AXGridDataColumn {
-  @Input()
-  items: AXMenuItem[] | AXGridRowCommandFunction = [];
-
-  @Output()
-  onItemClick: EventEmitter<AXGridRowCommandEvent> = new EventEmitter<AXGridRowCommandEvent>();
-
-  render() {
-    const col = super.render();
-    if (!col.cellRendererFramework) {
-      col.cellRendererFramework = CommandRenderer;
-    }
-    col.cellRendererParams = {
-      items: this.items,
-      onClick: (e) => {
-        this.onItemClick.emit({
-          command: e.name,
-          data: e.data,
-          rowIndex: e.rowIndex,
-          rowLevel: e.rowLevel,
-          htmlEvent: e.htmlEvent
-        });
-      }
-    };
-    col.sortable = false;
-    col.filter = false;
-    col.valueGetter = (params) => {
-      return this.items;
-    };
-    return col;
-  }
-}
-
-@Component({
-  selector: 'ax-command-cell',
-  template: `
-    <button
-      *ngFor="let item of items; let i = index"
-      class="ax button md ax-grid-command-button {{ item.style || 'ax primary blank' }}"
-      [class.disabled]="item.disable"
-      type="button"
-      [title]="item.tooltip"
-      [attr.tabindex]="i"
-      (click)="onClick(item, $event)"
-    >
-      <i [ngClass]="item.icon"></i>{{ item.text }}
-    </button>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CommandRenderer implements ICellRendererAngularComp {
-  items: AXMenuItem[] | AXGridRowCommandFunction = [];
-  node: any;
-  private clickCallback: Function;
-
-  constructor() {}
-
-  agInit(params: ICellRendererParams): void {
-    this.mapParams(params);
-  }
-
-  refresh(params: ICellRendererParams): boolean {
-    this.mapParams(params);
-    return true;
-  }
-
-  private mapParams(params: any) {
-    this.node = params.node;
-    this.items = typeof params.items == 'function' ? params.items({ data: this.node.data }) : Array.isArray(params.items) ? params.items : [];
-    this.clickCallback = params.onClick;
-  }
-
-  onClick(item: AXMenuItem, e: MouseEvent) {
-    if (this.clickCallback && !item.disable) {
-      this.clickCallback({
-        name: item.name,
-        rowLevel: this.node.level,
-        rowIndex: this.node.rowIndex,
-        data: this.node.data,
-        htmlEvent: e
-      });
-    }
-  }
-}

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

@@ -1,118 +0,0 @@
-
-import {
-  Component,
-  ChangeDetectionStrategy,
-  Input,
-  ViewEncapsulation,
-  ViewChild,
-  ElementRef
-} from '@angular/core';
-import { AXGridDataColumn } from './column.component';
-import { AXDateTime, AXConfig, AXCalendarType } from '@acorex/core';
-import { AXDatePickerComponent } from '@acorex/components';
-@Component({
-  selector: 'ax-date-column',
-  template: '',
-  providers: [{ provide: AXGridDataColumn, useExisting: AXGridDateColumn }],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXGridDateColumn extends AXGridDataColumn {
-  constructor() {
-    super();
-  }
-
-  @Input()
-  format: string;
-
-  @Input()
-  type: AXCalendarType = AXConfig.get('dateTime.type');
-
-  render() {
-    const col = super.render();
-    col.cellRendererParams = {
-      format: this.format,
-    };
-
-    col.comparator = (valueA: any, valueB: any) => {
-      const date1 = AXDateTime.convert(valueA);
-      const date2 = AXDateTime.convert(valueB);
-      //
-      if (date1 === null && date2 === null) {
-        return 0;
-      }
-      if (date1 === null) {
-        return -1;
-      }
-      if (date2 === null) {
-        return 1;
-      }
-      return (date1.date.getTime() - date2.date.getTime());
-    };
-
-    col.valueFormatter = (params) => {
-      const date: AXDateTime = AXDateTime.convert(params.value, this.type);
-      if (date) {
-        return date.format(this.format);
-      }
-      else {
-        return null;
-      }
-    };
-    col.filter = 'agDateColumnFilter';
-    // col.floatingFilter = true;
-    return col;
-  }
-}
-
-@Component({
-  selector: 'ax-data-picker-filter',
-  template: `<ax-date-picker [selectableHoliday]="selectableHoliday" [allowClear]="true" (onValueChanged)="onValueChanged($event)" size="sm">
-     </ax-date-picker>`,
-  host: {  },
-  encapsulation: ViewEncapsulation.None
-})
-export class AXDatePickerFilterComponent {
-  @ViewChild(AXDatePickerComponent)
-  datePicker: AXDatePickerComponent;
-  @ViewChild('div', { read: ElementRef }) div: ElementRef;
-  selectableHoliday: boolean = false;
-  type: string = 'jalali';
-  date: Date;
-  params: any;
-  picker: any;
-
-
-  agInit(params: any): void {
-    this.params = params;
-  }
-
-  ngAfterViewInit() {
-
-  }
-  ngOnDestroy() {
-  }
-
-  onDateChanged(selectedDates) {
-    //this.date = selectedDates[0] || null;
-    this.params.onDateChanged();
-  }
-
-  getDate(): Date {
-    return this.date;
-  }
-
-  setDate(date: Date): void {
-    this.date = date || null;
-    //this.picker.setDate(date);
-  }
-
-  setInputPlaceholder(placeholder: string): void {
-    //this.div.nativeElement.setAttribute('placeholder', placeholder);
-  }
-  onValueChanged(e) {
-
-    this.setDate(e.value);
-    this.onDateChanged(e.value);
-  }
-
-}

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

@@ -1,36 +0,0 @@
-import { AXGridDataColumn } from './column.component';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { AXConfig } from '@acorex/core';
-
-@Component({
-  selector: 'ax-row-number-column',
-  template: '',
-  providers: [{ provide: AXGridDataColumn, useExisting: AXGridRowNumberColumn }],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXGridRowNumberColumn extends AXGridDataColumn {
-  constructor() {
-    super();
-  }
-
-  ngOnInit(): void {}
-
-  @Input()
-  condition: (params) => boolean;
-
-  render() {
-    const col = super.render();
-    //  col.checkboxSelection = this.condition ? this.condition : true;
-    //  col.headerCheckboxSelection = true;
-
-    (col.headerName = this.caption ? this.caption : AXConfig.get('layout.rtl') ? 'ردیف' : 'Row'),
-      (col.valueGetter = 'node.rowIndex + 1'),
-      (col.pinned = this.pinned == null ? null : this.pinned === 'start' ? 'right' : 'left'),
-      (col.filter = false);
-    col.resizable = true;
-    col.sortable = false;
-    col.width = this.width;
-
-    return col;
-  }
-}

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

@@ -1,39 +0,0 @@
-import { AXGridDataColumn } from './column.component';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'ax-selection-column',
-  template: '',
-  providers: [{ provide: AXGridDataColumn, useExisting: AXGridSelectionColumn }],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXGridSelectionColumn extends AXGridDataColumn {
-  constructor() {
-    super();
-  }
-
-  ngOnInit(): void {}
-
-  @Input()
-  condition: (params) => boolean;
-
-  @Input()
-  pinned: 'start' | 'end' = 'start';
-
-  @Input()
-  width: number = 40;
-
-  render() {
-    const col = super.render();
-    col.checkboxSelection = this.condition ? this.condition : true;
-    //  col.headerCheckboxSelection = true;
-    col.pinned = this.pinned === 'start' ? 'right' : 'left';
-    col.filter = false;
-    col.resizable = true;
-    col.sortable = false;
-    col.minWidth = 5;
-    col.width = this.width;
-    col.floatingFilter = false;
-    return col;
-  }
-}

package/src/lib/data-grid/columns/text-column.component.ts

@@ -1,92 +0,0 @@
-import { AXGridDataColumn } from './column.component';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewContainerRef,
-  ViewChild
-} from '@angular/core';
-import {
-  IFilterParams,
-  RowNode,
-  IDoesFilterPassParams,
-  IAfterGuiAttachedParams
-} from 'ag-grid-community';
-import { IFilterAngularComp } from 'ag-grid-angular';
-import { AXTextBoxComponent } from '@acorex/components';
-
-
-@Component({
-  selector: 'ax-text-column',
-  template: '',
-  providers: [{ provide: AXGridDataColumn, useExisting: AXGridTextColumn }],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AXGridTextColumn extends AXGridDataColumn {
-  constructor() {
-    super();
-  }
-
-  render() {
-    const col = super.render();
-    // if (this.allowFiltering) {
-    //   col.filterFramework = TextFilterRenderer;
-    // }
-    col.filter = 'agTextColumnFilter';
-    return col;
-  }
-}
-
-@Component({
-  template: `
-    <ax-data-grid-filter>
-      <ax-text-box label='Filter' allowClear='true' (textChange)='onChange($event)'>
-      </ax-text-box>
-    </ax-data-grid-filter>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TextFilterRenderer implements IFilterAngularComp {
-  public value?: string = null;
-  private params: IFilterParams;
-  private valueGetter: (rowNode: RowNode) => any;
-  @ViewChild(AXTextBoxComponent, { static: true })
-  private input: AXTextBoxComponent;
-
-  agInit(params: IFilterParams): void {
-    this.params = params;
-    this.valueGetter = (params.valueGetter) as any;
-  }
-
-  isFilterActive(): boolean {
-    return this.value !== null && this.value !== undefined;
-  }
-
-  doesFilterPass(params: IDoesFilterPassParams): boolean {
-    return this.value === this.valueGetter(params.node);
-  }
-
-  getModel(): any {
-    return { value: this.value };
-  }
-
-  setModel(model: any): void {
-    ;
-    this.onChange(model ? model.value : null);
-  }
-
-  ngAfterViewInit(params: IAfterGuiAttachedParams): void {
-    window.setTimeout(() => {
-      this.input.focus();
-    });
-  }
-
-  onChange(newValue): void {
-    if (this.value !== newValue) {
-      this.value = newValue;
-      if (this.value === '') {
-        this.value = null;
-      }
-      this.params.filterChangedCallback();
-    }
-  }
-}

package/src/lib/data-grid/datagrid.component.html

@@ -1,27 +0,0 @@
-<div class="ax-grid-toolbar" *ngIf="toolbar">
-  <ng-content select="ax-toolbar"></ng-content>
-</div>
-<!-- [enableSorting]="true"  [enableColResize]="true" [enableFilter]="allowFiltering"  -->
-<ag-grid-angular *ngIf="gridView" class="ag-theme-balham" [getRowClass]="internalGetRowClass"
-  [style.height]="internalHeight" [columnDefs]="columnDefs" [enableRtl]="rtl" [pagination]="pagination"
-  [rowGroupPanelShow]="rowGroupPanelShow" [rowModelType]="rowModelType" [detailRowHeight]="detailRowHeight"
-  [getRowHeight]="getRowHeight" [paginationAutoPageSize]="paginationAutoPageSize"
-  [paginationPageSize]="paginationPageSize" [suppressMenuHide]="true" [frameworkComponents]="frameworkComponents"
-  [isFullWidthCell]="isFullWidthCell" [rowSelection]="selectionMode" [rowMultiSelectWithClick]="rowMultiSelectWithClick"
-  [fullWidthCellRendererFramework]="fullWidthCellRendererFramework"
-  [fullWidthCellRendererParams]="fullWidthCellRendererParams" (cellClicked)="internalGridCellClicked($event)"
-  (cellDoubleClicked)="internalGridCellDoubleClicked($event)" (cellFocused)="internalGridCellFocused($event)"
-  (rowClicked)="internalGridRowClicked($event)" (selectionChanged)="internalGridSelectionChanged($event)"
-  (rowSelected)="rowSelectionChanged($event)" (rowDoubleClicked)="internalGridRowDoubleClicked($event)"
-  (gridReady)="internalGridReady($event)" [groupSelectsChildren]="groupSelectsChildren"
-  [suppressRowClickSelection]="suppressRowClickSelection" [groupSelectsFiltered]="true"
-  [suppressCellSelection]="suppressCellSelection" [autoGroupColumnDef]="autoGroupColumnDef"
-  [suppressAggFuncInHeader]="true" [treeData]="treeData" [animateRows]="true" [isServerSideGroup]="isServerSideGroup"
-  [getServerSideGroupKey]="getServerSideGroupKey" [masterDetail]="masterDetail"
-  [detailCellRendererParams]="detailCellRendererParams" [detailCellRenderer]="detailCellRenderer"
-  (gridSizeChanged)="internalGridSizeChanged($event)" (firstDataRendered)="internalGridFirstDataRendered($event)"
-  [localeText]="localeText" [groupHideOpenParents]="groupHideOpenParents" [enableRangeSelection]="true"
-  [enableRangeSelection]="false" [allowContextMenuWithControlKey]="false" [getMainMenuItems]="getMainMenuItems">
-</ag-grid-angular>
-
-<!-- (displayedColumnsChanged)="displayedColumnsChanged($event)"  -->