raise-common-lib 0.0.1

package/src/lib/common-grid/index.component.ts

@@ -0,0 +1,420 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  TemplateRef,
+  OnChanges,
+  ViewChild,
+  SimpleChanges,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { GridComponent } from '@syncfusion/ej2-angular-grids';
+
+import { BeforeOpenCloseEventArgs } from '@syncfusion/ej2-angular-inputs';
+import { IActionMenuItem, IColumnField } from '../constant';
+
+@Component({
+  selector: 'kt-common-grid',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss'],
+})
+export class CommonGridComponent implements OnInit, OnChanges {
+  @ViewChild('grid', { static: false })
+  public grid: GridComponent;
+  @Input() showCheckBox = true;
+  @Input() loaded = true;
+  @Input() hiddenLoaded = false;
+  @Input() authorized = true; // Dataset是否授权，未授权则显示权限错误提示
+  // only use for local data pagination
+  @Input() selectedDiffKey = '';
+  @Input() gridHeight = '';
+  // 这玩意必填，不然filter columnChooser都会报错
+  @Input() gridId = 'grid';
+  @Input() resizeSettings = { mode: 'Auto' };
+  @Input() filterSettings = { type: 'Menu' };
+  @Input() template: any;
+  @Input() fields: IColumnField[] = [];
+  @Input() dataSource = [];
+  @Input() editSettings;
+  @Input() columnTemplate: TemplateRef<any>;
+  @Input() pageSettings;
+  @Input() allowPaging = true;
+  @Input() clipMode = 'EllipsisWithTooltip';
+  @Input() checkBoxWidth = 32; // col 数量过少的时候，check宽度会拉伸，这时候设置null
+  @Input() childGrid;
+
+  /**
+	 * Sample: [
+			{
+				text: "Preview",
+				target: ".e-content",
+				id: "preview-icon",
+				iconCss: "preview",
+			},
+			{
+				text: "Download",
+				target: ".e-content",
+				id: "download-icon",
+				iconCss: "download",
+			}
+		]
+		用于定义row中 点击事件
+	 */
+  @Input() contextMenuItems: IActionMenuItem[] = [];
+  // @Input() selectionSettings = { checkboxOnly: true, type: "Multiple" };
+  @Input() selectionSettings = {
+    type: 'Multiple',
+    // persistSelection: true,
+    checkboxOnly: true,
+  };
+  @Input() alwaysShowCheckbox: boolean = false;
+  @Input() defaultRecord: any;
+  @Input() disableSystemRow: boolean = false; // 禁用IsSytem = true的整行
+
+  @Output() recordDoubleClick = new EventEmitter();
+  @Output() actionComplete = new EventEmitter();
+  @Output() rowSelected = new EventEmitter();
+  @Output() rowDeselected = new EventEmitter();
+  @Output() onContextMenu = new EventEmitter();
+  @Output() actionHandler = new EventEmitter();
+  @Output() queryCellInfo = new EventEmitter();
+  @Output() recordClick = new EventEmitter();
+  @Output() actionBegin = new EventEmitter();
+  @Output() rowDataBound = new EventEmitter();
+  @Output() dataBound = new EventEmitter();
+  @Output() exportQueryCellInfo = new EventEmitter();
+  @Output() rowSelecting = new EventEmitter();
+
+  selectId = [];
+  startPaging = false;
+  indexList = [];
+  className = 'grid-loading';
+
+  public translation;
+
+  constructor(private ref: ChangeDetectorRef) {
+    this.translation = JSON.parse(localStorage.getItem('translation'));
+  }
+
+  ngOnInit(): void {
+    if (this.hiddenLoaded) this.className = '';
+    this.ref && this.ref.markForCheck();
+  }
+
+  trackByFn(index, item) {
+    return index; // or a unique identifier in your object
+  }
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.dataSource && changes.dataSource.currentValue) {
+      if (
+        this.allowPaging &&
+        changes.dataSource.currentValue.length &&
+        !this.pageSettings
+      ) {
+        this.pageSettings =
+          changes.dataSource.currentValue.length > 9
+            ? {
+                pageSizes: ['All', '25', '50', '100'],
+                pageSize: 50,
+              }
+            : null;
+      }
+    }
+  }
+
+  _load() {
+    if (!this.authorized) {
+      (this.grid.localeObj as any).localeStrings.EmptyRecord =
+        this.translation.YOU_DO_NOT_HAVE_THE_DATASET_PERMISSION ||
+        "You don't have the dataset permission to view the record.";
+    }
+  }
+
+  _dataBound(args: any) {
+    // 整个组件加载完成时的回调函数
+    var pagerContainer = document.querySelector('.e-pagercontainer');
+    if (pagerContainer) {
+      var linkElements = pagerContainer.querySelectorAll('.e-link');
+      linkElements.forEach(function (element) {
+        element.removeAttribute('href'); // SMP2-10310 删除分页器的href属性
+      });
+    }
+    if (this.selectedDiffKey) {
+      setTimeout(() => {
+        this.chooseRecords();
+      });
+    }
+    this.dataBound.emit(args);
+  }
+
+  _exportQueryCellInfo(args) {
+    this.exportQueryCellInfo.emit(args);
+  }
+
+  _recordDoubleClick($event) {
+    this.recordDoubleClick.emit($event);
+  }
+  /**
+	 * [selectionSettings]="{ checkboxOnly: true }"
+	   [showCheckBox]="true"
+	   控件使用时，必须配置上面两个属性，否则，全选会失效
+	 */
+  _rowSelected($event) {
+    if (this.selectedDiffKey) {
+      if ($event.isHeaderCheckboxClicked && Array.isArray($event.data)) {
+        if ($event.data && $event.data.length) {
+          $event.data.forEach((item) => {
+            item.isSelected = true;
+            this.selectId.push(item);
+          });
+          this.dataSource.forEach((data) => {
+            $event.data.forEach((_data) => {
+              if (_data[this.selectedDiffKey] === data[this.selectedDiffKey]) {
+                data.isSelected = true;
+              }
+            });
+          });
+        }
+      } else {
+        $event.data.isSelected = true;
+        this.selectId.push($event.data);
+        this.dataSource.forEach((data) => {
+          if (
+            data[this.selectedDiffKey] === $event.data[this.selectedDiffKey]
+          ) {
+            data.isSelected = true;
+          }
+        });
+      }
+      this.ref && this.ref.markForCheck();
+    }
+    this.rowSelected.emit($event);
+  }
+
+  _rowDeselected($event) {
+    if (this.selectedDiffKey) {
+      if (this.startPaging) {
+        return;
+      }
+      if ($event.isHeaderCheckboxClicked && Array.isArray($event.data)) {
+        $event.data.forEach((item) => {
+          item.isSelected = false;
+        });
+        this.selectId = [];
+        this.dataSource.forEach((data) => {
+          $event.data.forEach((_data) => {
+            if (_data[this.selectedDiffKey] === data[this.selectedDiffKey]) {
+              data.isSelected = false;
+            }
+          });
+        });
+      } else {
+        $event.data.isSelected = false;
+        this.selectId = this.selectId.filter(
+          (item) =>
+            item[this.selectedDiffKey] !== $event.data[this.selectedDiffKey]
+        );
+        this.dataSource.forEach((data) => {
+          if (
+            data[this.selectedDiffKey] === $event.data[this.selectedDiffKey]
+          ) {
+            data.isSelected = false;
+          }
+        });
+      }
+      this.ref && this.ref.markForCheck();
+    }
+    this.rowDeselected.emit($event);
+  }
+
+  _onContextMenu(args) {
+    this.onContextMenu.emit(args);
+  }
+
+  _actionBegin(args) {
+    if (
+      this.selectedDiffKey &&
+      (args.requestType === 'paging' ||
+        args.requestType === 'searching' ||
+        args.requestType === 'filtering' ||
+        args.requestType === 'sorting')
+    ) {
+      this.startPaging = true;
+    }
+    this.actionBegin.emit(args);
+  }
+
+  search(keywords) {
+    this.grid.search(keywords);
+  }
+  selectRows(indexList: number[]) {
+    this.grid.selectRows(indexList);
+  }
+  selectRow(index) {
+    this.grid.selectRow(index);
+  }
+  getCurrentViewRecords() {
+    return this.grid.getCurrentViewRecords();
+  }
+
+  customiseCell($event) {
+    this.queryCellInfo.emit($event);
+  }
+
+  contextMenuOpen(args?: BeforeOpenCloseEventArgs): void {
+    const data = (args as BeforeOpenCloseEventArgs | any).rowInfo.rowData;
+    if (!data) {
+      args.cancel = true;
+      return;
+    }
+    let enableItems = [];
+    let hideItems = [];
+    this.grid.contextMenuModule.contextMenu.refresh(); // 每次点击按钮弹窗前需再次初始化状态 否则不更新；
+    this.contextMenuItems.forEach((item: IActionMenuItem) => {
+      // 用于处理部分按钮disabled的情况
+      if (
+        item.disabled ||
+        (data.disableItem && data.disableItem.includes(item.iconCss))
+      ) {
+        enableItems.push(item.text);
+        // this.grid.contextMenuModule.contextMenu.enableItems(
+        // 	[item.text],
+        // 	false
+        // );
+      }
+      // 用于处理部分按钮需要hide的情况
+      if (
+        item.isHide ||
+        (data.hideItem && data.hideItem.includes(item.iconCss))
+      ) {
+        hideItems.push(item.text);
+        // this.grid.contextMenuModule.contextMenu.hideItems(
+        // 	[item.text],
+        // 	false
+        // );
+      }
+    });
+    this.grid.contextMenuModule.contextMenu.enableItems(enableItems, false);
+    this.grid.contextMenuModule.contextMenu.hideItems(hideItems, false);
+  }
+
+  _actionHandler($event) {
+    if (
+      this.selectedDiffKey &&
+      ($event.requestType === 'paging' ||
+        $event.requestType === 'searching' ||
+        $event.requestType === 'filtering' ||
+        $event.requestType === 'sorting')
+    ) {
+      this.indexList = [];
+      setTimeout(() => {
+        this.chooseRecords();
+        this.startPaging = false;
+        this.ref && this.ref.detectChanges();
+        this.ref && this.ref.markForCheck();
+      });
+    }
+    this.actionHandler.emit($event);
+    this.actionComplete.emit($event);
+  }
+
+  private chooseRecords() {
+    this.indexList = [];
+    this.dataSource.forEach((data) => {
+      this.grid.getCurrentViewRecords().forEach((row: any, i) => {
+        if (
+          row &&
+          data[this.selectedDiffKey] === row[this.selectedDiffKey] &&
+          data.isSelected
+        ) {
+          this.indexList.push(i);
+        }
+      });
+    });
+
+    this.grid.selectRows(this.indexList);
+  }
+
+  _recordClick($event) {
+    this.recordClick.emit($event);
+  }
+  refresh() {
+    this.grid.refresh();
+  }
+  _rowSelecting(e) {
+    this.rowSelecting.emit(e);
+  }
+  refreshColumns() {
+    this.grid.refreshColumns();
+  }
+  refreshHeader() {
+    this.grid.refreshHeader();
+  }
+
+  export(excelExportProperties?) {
+    this.grid.excelExport(excelExportProperties);
+  }
+
+  getSelectedRecords() {
+    return this.grid.getSelectedRecords();
+  }
+
+  _rowDataBound($event) {
+    if (this.disableSystemRow && $event.data && $event.data.IsSystem) {
+      $event.row.classList.add('e-disabled');
+    }
+    this.rowDataBound.emit($event);
+  }
+
+  clearSelection() {
+    this.grid.clearSelection();
+  }
+
+  excelExport() {
+    this.grid.excelExport();
+  }
+
+  addItem() {
+    this.grid.addRecord({ ...this.defaultRecord, isNew: true }, 0);
+    setTimeout(() => {
+      this.grid.selectRow(0);
+      this.grid.startEdit();
+    }, 30);
+  }
+
+  saveItem() {
+    this.grid.endEdit();
+  }
+
+  editItem(index) {
+    setTimeout(() => {
+      this.grid.selectRow(Number(index));
+      this.grid.startEdit();
+    }, 30);
+  }
+
+  deleteItem(index) {
+    this.grid.selectRow(Number(index));
+    var selectedRecord = this.grid.getSelectedRecords()[0] as any;
+    this.grid.deleteRecord(selectedRecord as string);
+  }
+
+  cancelItem(index) {
+    this.grid.closeEdit();
+    this.deleteItem(index);
+  }
+
+  public showLoading() {
+    this.className = 'grid-loading';
+    this.ref && this.ref.markForCheck();
+    this.ref && this.ref.detectChanges();
+  }
+
+  public hideLoading() {
+    this.className = '';
+    this.ref && this.ref.markForCheck();
+    this.ref && this.ref.detectChanges();
+  }
+}

package/src/lib/constant/index.ts

@@ -0,0 +1,59 @@
+import { ContextMenuItemModel } from "@syncfusion/ej2-angular-grids";
+
+export interface IColumnField {
+	columnName: string;
+	columnDisplayName: string;
+	visible: boolean;
+	/**
+	 * sample: { class: 'hideColumnFilterClass' }
+	 * 可以考虑在部分情况下给column增加class等attribute
+	 */
+	customAttributes?: string;
+	// 不填默认是Left
+	textAlign?: "Left" | "Right" | "Center";
+	width?: number;
+	dataType?: string;
+	format?: string;
+	translationCode?: string;
+	showColumnMenu?: boolean;
+	showTemplate?: boolean;
+	allowFiltering?: boolean;
+	allowSorting?: boolean;
+	allowEditing?: boolean;
+	minWidth?: number | string;
+	editType?: string;
+	dropdownParams?: any;
+	dateComparer?: any;
+	sortComparer?: any;
+	clipMode?: string;
+	filter?: any;
+	colName?: string;
+	validationRules?: any;
+}
+
+export interface IActionMenuItem extends ContextMenuItemModel {
+	disabled?: boolean;
+	isHide?: boolean;
+}
+
+export enum ButtonColorType {
+	PRIMARY = "primary",
+	CANCEL = "cancel",
+}
+
+enum IconPosition {
+	FRONT = "front",
+	BEHIND = "behind",
+}
+
+export interface BaseButton {
+	label: string;
+	type?: ButtonColorType;
+	icon?: string;
+	iconPosition?: IconPosition;
+	callMethod?: string;
+	translationCode?: string;
+	value?: any;
+}
+
+export interface DrawerButton extends BaseButton {}

package/src/lib/raise-common-lib.module.ts

@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { CommonGridComponent } from './common-grid/index.component';
+import { CommonModule } from '@angular/common';
+
+import {
+  GridModule,
+  PageService,
+  SortService,
+  FilterService,
+  ExcelExportService,
+  EditService,
+  ResizeService,
+  ToolbarService,
+  ColumnChooserService,
+  AggregateService,
+  ColumnMenuService,
+  DetailRowService,
+  SelectionService,
+  PagerModule,
+  GroupService,
+  GridAllModule,
+} from '@syncfusion/ej2-angular-grids';
+
+@NgModule({
+  declarations: [
+    CommonGridComponent,
+  ],
+  imports: [CommonModule, GridModule, PagerModule, GridAllModule],
+  providers: [
+    PageService,
+    SortService,
+    FilterService,
+    ExcelExportService,
+    EditService,
+    ResizeService,
+    ToolbarService,
+    ColumnChooserService,
+    AggregateService,
+    ColumnMenuService,
+    DetailRowService,
+    SelectionService,
+    GroupService,
+  ],
+  exports: [
+    CommonGridComponent,
+  ]
+})
+export class RaiseCommonLibModule { }

package/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of raise-common-lib
+ */
+export * from './lib/common-grid/index.component';
+export * from './lib/raise-common-lib.module';

package/tsconfig.lib.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "lib",
+      "kebab-case"
+    ]
+  }
+}