@inspark/inspark-components 19.0.49 → 19.0.51

package/src/components/tree-table/tree-table.component.ts

@@ -0,0 +1,366 @@
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  NgModule,
+  Output,
+  QueryList,
+  TemplateRef,
+  ViewChild
+} from '@angular/core';
+import {TreeTable} from 'primeng/treetable';
+import {CommonModule} from '@angular/common';
+import {InsparkTemplate} from '../inspark.shared';
+import {TranslateModule} from '@ngx-translate/core';
+import {FormsModule} from '@angular/forms';
+import {TableComponentModule} from '../table/table.component';
+import {PipesModule} from '../../pipes/pipes.module';
+import {TableRowData} from '../../utils/hybrid/prime-table/table-row-data.model';
+import {TableColumns} from '../../interface';
+import {TreeTableModule} from 'primeng/treetable';
+
+
+
+@Component({
+  standalone: false,
+  selector: 'in-tree-table',
+  templateUrl: './tree-table.component.html',
+  styleUrls: ['./tree-table.component.scss'],
+})
+export class TreeTableComponent implements AfterContentInit {
+
+  @ViewChild('dt') dt: TreeTable;
+
+  @Input() columns: TableColumns[] = [];
+  // values is defined below as @Input() getter/setter to rebuild _nodeMap on change
+  @Input() scrollHeight: string;
+  @Input() scrollable: boolean;
+  @Input() selectionMode: 'single' | 'multiple' | null = null;
+  @Input() label: string;
+  @Input() error: string;
+  @Input() class: string;
+  @Input() required: boolean;
+  @Input() style: any;
+  @Input() toolbar: any;
+  @Input() checkboxSelection = true;
+  @Input() active;
+  @Input() sortField;
+  @Input() isAscending;
+  @Input() dataKey;
+
+  @Output() activeChange = new EventEmitter<any>();
+  @ContentChildren(InsparkTemplate) templates: QueryList<InsparkTemplate>;
+  @Output() selectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() addAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() csvAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() saveAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() collapseAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() removeAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() unlinkAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() groupEditAction: EventEmitter<any> = new EventEmitter<any>();
+  @Output() groupAddAction: EventEmitter<any> = new EventEmitter<any>();
+
+  headerTemplate: TemplateRef<any>;
+  bodyTemplate: TemplateRef<any>;
+  loadingBodyTemplate: TemplateRef<any>;
+  captionTemplate: TemplateRef<any>;
+  frozenRowsTemplate: TemplateRef<any>;
+  footerTemplate: TemplateRef<any>;
+  summaryTemplate: TemplateRef<any>;
+  colGroupTemplate: TemplateRef<any>;
+  expandedRowTemplate: TemplateRef<any>;
+  frozenHeaderTemplate: TemplateRef<any>;
+  frozenBodyTemplate: TemplateRef<any>;
+  frozenFooterTemplate: TemplateRef<any>;
+  frozenColGroupTemplate: TemplateRef<any>;
+  emptyMessageTemplate: TemplateRef<any>;
+  paginatorLeftTemplate: TemplateRef<any>;
+  paginatorRightTemplate: TemplateRef<any>;
+  valueTemplate: TemplateRef<any>;
+  searchText: string;
+  rowIndex = 0;
+  isCollapse = true;
+  _selection = null;
+
+  private _selectionSet = new Set<any>();
+  /** Map: dataKey → TreeNode (built from values for O(1) lookups) */
+  private _nodeMap = new Map<any, any>();
+
+  private _buildNodeMap(): void {
+    this._nodeMap = new Map<any, any>();
+    const key = this.dataKey || 'id';
+    const visit = (node: any) => {
+      const k = node?.data?.[key];
+      if (k !== undefined) { this._nodeMap.set(k, node); }
+      (node?.children || []).forEach(visit);
+    };
+    (this.values || []).forEach(visit);
+  }
+
+  /** All descendant data-keys of a node */
+  private _descendantKeys(node: any): any[] {
+    const key = this.dataKey || 'id';
+    const result: any[] = [];
+    const collect = (n: any) => {
+      (n?.children || []).forEach((c: any) => {
+        const k = c?.data?.[key];
+        if (k !== undefined) { result.push(k); }
+        collect(c);
+      });
+    };
+    collect(node);
+    return result;
+  }
+
+  private _rebuildSelectionSet(val: any[]): void {
+    this._selectionSet = new Set<any>();
+    if (Array.isArray(val)) {
+      const key = this.dataKey || 'id';
+      for (const item of val) {
+        const data = item?.data ?? item;
+        if (data != null) { this._selectionSet.add(data[key] ?? data); }
+      }
+    }
+  }
+
+  /** True if some (not all) descendants are selected → show indeterminate (-) */
+  public _isIndeterminate(rowData: any): boolean {
+    const key = this.dataKey || 'id';
+    const node = this._nodeMap.get(rowData?.[key]);
+    if (!node?.children?.length) { return false; }
+    const descKeys = this._descendantKeys(node);
+    if (!descKeys.length) { return false; }
+    const selectedCount = descKeys.filter(k => this._selectionSet.has(k)).length;
+    return selectedCount > 0 && selectedCount < descKeys.length;
+  }
+
+  public _isAllSelected(): boolean {
+    const data = this.dt?.filteredNodes ?? this.values;
+    if (!data || data.length === 0) { return false; }
+    const allKeys = data.flatMap(node => this._flattenTree(node)).map(row => {
+      const key = this.dataKey || 'id';
+      return row?.[key] ?? row;
+    });
+    return allKeys.length > 0 && allKeys.every(k => this._selectionSet.has(k));
+  }
+
+  public _onHeaderCheckboxChange(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    const key = this.dataKey || 'id';
+    const data = this.dt?.filteredNodes ?? this.values;
+    if (checked) {
+      const newKeys = (data || []).flatMap(node => this._flattenTree(node)).map(row => row?.[key] ?? row);
+      newKeys.forEach(k => this._selectionSet.add(k));
+      const existing = new Set((this._selection || []).map((i: any) => (i?.data ?? i)?.[key]));
+      const toAdd = (data || []).flatMap(node => this._flattenTreeNodes(node))
+        .filter((n: any) => !existing.has((n?.data ?? n)?.[key]));
+      this._selection = [...(this._selection || []), ...toAdd];
+    } else {
+      const keysToRemove = new Set(
+        (data || []).flatMap(node => this._flattenTree(node)).map(row => row?.[key] ?? row)
+      );
+      keysToRemove.forEach(k => this._selectionSet.delete(k));
+      this._selection = (this._selection || []).filter((item: any) => {
+        const d = item?.data ?? item;
+        return !keysToRemove.has(d?.[key] ?? d);
+      });
+    }
+    this.selectionValue = this._selection;
+  }
+
+  private _flattenTree(node: any): any[] {
+    const key = this.dataKey || 'id';
+    const data = node?.data ?? node;
+    const result = [data];
+    if (node?.children?.length) {
+      for (const child of node.children) { result.push(...this._flattenTree(child)); }
+    }
+    return result;
+  }
+
+  private _flattenTreeNodes(node: any): any[] {
+    const result = [node];
+    if (node?.children?.length) {
+      for (const child of node.children) { result.push(...this._flattenTreeNodes(child)); }
+    }
+    return result;
+  }
+
+  /** rowData = plain data object from template let-rowData="rowData" */
+  public _isRowSelected(rowData: any): boolean {
+    const key = this.dataKey || 'id';
+    return this._selectionSet.has(rowData?.[key] ?? rowData);
+  }
+
+  /** rowNode = PrimeNG TreeNode (for selection state), rowData = plain data (for key lookup) */
+  public _onCheckboxChange(event: Event, rowNode: any, rowData: any): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    const key = this.dataKey || 'id';
+    const rowKey = rowData?.[key] ?? rowData;
+    const node = this._nodeMap.get(rowKey);
+    const descKeys = node ? this._descendantKeys(node) : [];
+
+    if (checked) {
+      // Select this node + all descendants
+      this._selectionSet.add(rowKey);
+      descKeys.forEach(k => this._selectionSet.add(k));
+      const keysToAdd = new Set([rowKey, ...descKeys]);
+      const existing = new Set((this._selection || []).map((i: any) => (i?.data ?? i)?.[key]));
+      const toAdd: any[] = [];
+      keysToAdd.forEach(k => {
+        if (!existing.has(k)) {
+          const n = this._nodeMap.get(k);
+          if (n) { toAdd.push(n); }
+        }
+      });
+      this._selection = [...(this._selection || []), ...toAdd];
+    } else {
+      // Deselect this node + all descendants
+      const keysToRemove = new Set([rowKey, ...descKeys]);
+      keysToRemove.forEach(k => this._selectionSet.delete(k));
+      this._selection = (this._selection || []).filter((item: any) => {
+        const d = item?.data ?? item;
+        return !keysToRemove.has(d?.[key] ?? d);
+      });
+    }
+    this.selectionValue = this._selection;
+  }
+
+  @Input() set values(val: any[]) {
+    this._values = val;
+    this._buildNodeMap();
+  }
+  get values(): any[] { return this._values; }
+  private _values: any[] = [];
+
+  @Input() set selection(val) {
+    this._selection = val;
+    this._rebuildSelectionSet(val);
+  }
+
+  get selectionValue() {
+    return this._selection;
+  }
+
+  set selectionValue(val) {
+    this._selection = val;
+    this._rebuildSelectionSet(val);
+    this.selectionChange.emit(val);
+  }
+
+  public isRowActive(row: TableRowData) {
+    return this.active && this.active.id === row.id;
+  }
+
+  public visibleColumns(): TableColumns[] {
+    return this.columns.filter(column => !column.isHidden);
+  }
+
+  public columnsChange(data) {
+    data.column.isHidden = !data.event;
+  }
+  ngAfterContentInit() {
+    this.templates.forEach((item) => {
+      switch (item.getType()) {
+        case 'caption':
+          this.captionTemplate = item.template;
+          break;
+
+        case 'header':
+          this.headerTemplate = item.template;
+          break;
+
+        case 'body':
+          this.bodyTemplate = item.template;
+          break;
+        case 'value':
+          this.valueTemplate = item.template;
+          break;
+
+        case 'loadingbody':
+          this.loadingBodyTemplate = item.template;
+          break;
+
+        case 'footer':
+          this.footerTemplate = item.template;
+          break;
+
+        case 'summary':
+          this.summaryTemplate = item.template;
+          break;
+
+        case 'colgroup':
+          this.colGroupTemplate = item.template;
+          break;
+
+        case 'rowexpansion':
+          this.expandedRowTemplate = item.template;
+          break;
+
+        case 'frozenrows':
+          this.frozenRowsTemplate = item.template;
+          break;
+
+        case 'frozenheader':
+          this.frozenHeaderTemplate = item.template;
+          break;
+
+        case 'frozenbody':
+          this.frozenBodyTemplate = item.template;
+          break;
+
+        case 'frozenfooter':
+          this.frozenFooterTemplate = item.template;
+          break;
+
+        case 'frozencolgroup':
+          this.frozenColGroupTemplate = item.template;
+          break;
+
+        case 'emptymessage':
+          this.emptyMessageTemplate = item.template;
+          break;
+
+        case 'paginatorleft':
+          this.paginatorLeftTemplate = item.template;
+          break;
+
+        case 'paginatorright':
+          this.paginatorRightTemplate = item.template;
+          break;
+      }
+    });
+  }
+
+  collapse(event, dt) {
+    this.values.forEach((node) => {
+      this.toggleCollapse(node, this.isCollapse);
+    });
+    this.isCollapse = !this.isCollapse;
+    dt.filterGlobal(this.searchText, 'contains');
+  }
+
+  toggleCollapse(node: any, isCollapsed: boolean) {
+
+    if (node.children) {
+      node.expanded = isCollapsed;
+      for (const cn of node.children) {
+        if (cn) {
+          this.toggleCollapse(cn, isCollapsed);
+        }
+      }
+    }
+  }
+
+}
+
+
+@NgModule({
+  imports: [CommonModule, TreeTableModule, PipesModule, TranslateModule.forChild(), FormsModule, TableComponentModule],
+  exports: [TreeTableComponent],
+  declarations: [TreeTableComponent]
+})
+export class TreeTableComponentModule {
+}

package/src/components/types.ts

@@ -0,0 +1,7 @@
+export enum VIEW_SIZE {
+  'mobile',
+  'tablet',
+  'desktop',
+  'free',
+  'wide' = 4,
+}

package/src/css.js

@@ -0,0 +1,6 @@
+import './scss/main.scss';
+import './scss/theme-dark.scss';
+import './scss/theme-light.scss';
+import './scss/theme-contrast.scss';
+import './scss/theme-green.scss';
+import './scss/theme-blue.scss';

package/src/interface.ts

@@ -0,0 +1,80 @@
+import {MenuItem} from 'primeng/api';
+
+
+export interface TableCellData {
+  label: string;
+  status: 'success' | 'error' | 'warning' | 'critical' | 'falsevalue';
+  isEdit: boolean;
+}
+
+export interface TableColumns {
+
+  label: string;
+  field: string;
+  size: string;
+  width?: string;
+  isHidden?: boolean;
+  isSecondary?: boolean;
+  isRequired?: boolean;
+  groupKey?: string[];
+  groupOrder?: (number | string)[];
+  translatable?: boolean;
+  isFiltering?: boolean;
+  col_invisible?: boolean;
+}
+
+export interface InsparkMenuItem extends MenuItem {
+  svg?: string;
+}
+
+
+export type CircleMode = 'success' | 'warning' | 'error' | 'falsevalue' | 'maintenance' | 'primary' | 'none' | 'critical' | 'inverse' | 'black';
+export type CircleSize = 'mini' | 'small' | 'normal' | 'big';
+
+export interface ToolBar {
+  add?: ToolBarItem;
+  collapse?: ToolBarItem;
+  csv?: ToolBarItem;
+  expandAll?: ToolBarItem;
+  filter?: ToolBarFilterItem;
+  groupAdd?: ToolBarItem;
+  groupEdit?: ToolBarItem;
+  groupSort?: ToolBarItem;
+  link?: ToolBarItem;
+  paramsEdit?: ToolBarItem;
+  remove?: ToolBarItem;
+  search?: ToolBarFilterItem;
+  save?: ToolBarItem;
+  tree?: ToolBarItem;
+  unlink?: ToolBarItem;
+
+}
+
+export interface ToolBarItem {
+  active?: boolean;
+  disabled?: boolean;
+  title?: string;
+  label?: ToolBarGroupSortOption[];
+}
+
+export interface ToolBarFilterItem {
+  active?: boolean;
+  disabled?: boolean;
+  title?: string;
+  cols?: ToolBarFilterColumn[];
+}
+
+export interface ToolBarFilterColumn {
+  field?: string,
+  type?: string;
+  options?: ToolBarFilterColumnOption[]
+}
+export interface ToolBarFilterColumnOption {
+  label?: string;
+  value?: string;
+}
+
+export interface ToolBarGroupSortOption {
+  label?: string;
+  value?: any;
+}

package/src/pipes/pipes.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {PropertyValuePipe} from './propertyValue.pipe';
+import {FormatNumToTime, InDate, NumToShortWeekdayPipe, ShortToFullWeekdayPipe} from './time.pipe';
+import {SafeUrlPipe} from './safeUrl.pipe';
+import {SortByPipe} from "./sort-by.pipe";
+
+@NgModule({
+  exports: [PropertyValuePipe, NumToShortWeekdayPipe, FormatNumToTime, InDate, ShortToFullWeekdayPipe, SafeUrlPipe, SortByPipe],
+  declarations: [PropertyValuePipe, NumToShortWeekdayPipe, FormatNumToTime, InDate, ShortToFullWeekdayPipe, SafeUrlPipe, SortByPipe]
+})
+export class PipesModule {
+}

package/src/pipes/propertyValue.pipe.ts

@@ -0,0 +1,18 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  standalone: false,
+  name: 'propertyValue'
+})
+export class PropertyValuePipe implements PipeTransform {
+  transform(value: any, name: string): any {
+    if (Array.isArray(value) || !(value instanceof Object) || !name) {
+      return value;
+    } else if (name.indexOf('.') > -1) {
+      const splitName: string[] = name.split(/\.(.+)/, 2);
+      return this.transform(value[splitName[0]], splitName[1]);
+    } else {
+      return value[name];
+    }
+  }
+}

package/src/pipes/safeUrl.pipe.ts

@@ -0,0 +1,30 @@
+// Angular
+import {Pipe, PipeTransform} from '@angular/core';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+
+/**
+ * Sanitize HTML
+ */
+@Pipe({
+  standalone: false,
+  name: 'safeUrl'
+})
+export class SafeUrlPipe implements PipeTransform {
+  /**
+   * Pipe Constructor
+   *
+   * @param _sanitizer: DomSanitezer
+   */
+  // tslint:disable-next-line
+  constructor(protected _sanitizer: DomSanitizer) {
+  }
+
+  /**
+   * Transform
+   *
+   * @param value: string
+   */
+  transform(value: string): SafeResourceUrl {
+    return this._sanitizer.bypassSecurityTrustResourceUrl(value);
+  }
+}

package/src/pipes/sort-by.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  standalone: false,
+  name: 'SortByPipe'
+})
+export class SortByPipe implements PipeTransform {
+  transform(arr: Array<any>, options: Array<any>): any {
+    if (arr === undefined) {
+      return;
+    }
+    return arr.sort((a: any, b: any): number => {
+      let cmp = 0;
+      for (let i = 0; i < options.length; i++) {
+        const x = a[options[i].sortField];
+        const y = b[options[i].sortField];
+        const asc = options[i].isAscending ? -1 : 1;
+        cmp = (((x === y) ? 0 : (x < y) ? -1 * asc : 1 * asc) + cmp) * 10;
+      }
+      return cmp;
+    });
+  }
+}