@acorex/data-grid 4.1.6 → 4.2.0

package/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/acorex/data-grid'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/acorex/data-grid",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "ag-grid-community",
+    "ag-grid-angular",
+    "ag-grid-enterprise"
+  ]
+}

package/package.json

@@ -1,37 +1,17 @@
-{
-  "name": "@acorex/data-grid",
-  "version": "4.1.6",
-  "peerDependencies": {
-    "@angular/common": "^13.3.8",
-    "@angular/core": "^13.3.8",
-    "ag-grid-angular": "^24.0.0",
-    "ag-grid-community": "^24.0.0",
-    "ag-grid-enterprise": "^24.0.0"
-  },
-  "dependencies": {
-    "ag-grid-angular": "^24.0.0",
-    "ag-grid-community": "^24.0.0",
-    "ag-grid-enterprise": "^24.0.0",
-    "tslib": "^2.0.0"
-  },
-  "module": "fesm2015/acorex-data-grid.mjs",
-  "es2020": "fesm2020/acorex-data-grid.mjs",
-  "esm2020": "esm2020/acorex-data-grid.mjs",
-  "fesm2020": "fesm2020/acorex-data-grid.mjs",
-  "fesm2015": "fesm2015/acorex-data-grid.mjs",
-  "typings": "acorex-data-grid.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./acorex-data-grid.d.ts",
-      "esm2020": "./esm2020/acorex-data-grid.mjs",
-      "es2020": "./fesm2020/acorex-data-grid.mjs",
-      "es2015": "./fesm2015/acorex-data-grid.mjs",
-      "node": "./fesm2015/acorex-data-grid.mjs",
-      "default": "./fesm2020/acorex-data-grid.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "@acorex/data-grid",
+  "version": "4.2.0",
+  "peerDependencies": {
+    "@angular/common": "^13.3.8",
+    "@angular/core": "^13.3.8",
+    "ag-grid-angular": "^24.0.0",
+    "ag-grid-community": "^24.0.0",
+    "ag-grid-enterprise": "^24.0.0"
+  },
+  "dependencies": {
+    "ag-grid-angular": "^24.0.0",
+    "ag-grid-community": "^24.0.0",
+    "ag-grid-enterprise": "^24.0.0",
+    "tslib": "^2.0.0"
+  }
+}

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

@@ -0,0 +1,113 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
+import { AXGridDataColumn } from './column.component';
+import { ICellRendererAngularComp, IFilterAngularComp } from 'ag-grid-angular';
+import {
+  ICellRendererParams,
+  IFilterParams,
+  RowNode,
+  IDoesFilterPassParams,
+  IAfterGuiAttachedParams
+} from 'ag-grid-community';
+
+@Component({
+  selector: 'ax-check-column',
+  template: '',
+  providers: [{ provide: AXGridDataColumn, useExisting: AXGridCheckColumn }],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class AXGridCheckColumn extends AXGridDataColumn {
+  constructor() {
+    super();
+  }
+
+  render() {
+    const col = super.render();
+    if (!col.cellRendererFramework) {
+      col.cellRendererFramework = BooleanRenderer;
+    }
+    if (this.allowFiltering) {
+      col.filterFramework = BooleanFilterRenderer;
+    }
+    return col;
+  }
+}
+
+@Component({
+  template: `
+    <ax-check-box [value]='value' readonly='true'></ax-check-box>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BooleanRenderer implements ICellRendererAngularComp {
+  value: boolean;
+  constructor() { }
+  agInit(params: ICellRendererParams): void {
+    this.value = params.value;
+  }
+  refresh(params: ICellRendererParams): boolean {
+    this.value = params.value;
+    return true;
+  }
+}
+
+@Component({
+  template: `
+    <ax-data-grid-filter>
+      <ax-select-box
+        label='Select Box'
+        [items]='selectItem'
+      ></ax-select-box>
+    </ax-data-grid-filter>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BooleanFilterRenderer implements IFilterAngularComp {
+  public value?: boolean = null;
+  private params: IFilterParams;
+  private valueGetter: (rowNode: RowNode) => any;
+  @ViewChild('input', { static: true, read: ViewContainerRef }) public input;
+
+  selectItem = [
+    { value: 0, label: 'True' },
+    { value: 1, label: 'False' },
+  ];
+  agInit(params: IFilterParams): void {
+    this.params = params;
+    this.valueGetter = params.valueGetter;
+  }
+
+  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.value = model ? model.value : null;
+  }
+
+  ngAfterViewInit(params: IAfterGuiAttachedParams): void {
+    window.setTimeout(() => {
+      this.input.element.nativeElement.focus();
+    });
+  }
+
+  onChange(newValue): void {
+    if (this.value !== newValue) {
+      this.value = newValue;
+      this.params.filterChangedCallback();
+    }
+  }
+}

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

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

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

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

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

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