ngx-wapp-components 3.2.11-alpha.9 → 3.2.11

package/src/lib/tables/w-table/w-table.component.ts

@@ -1,317 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { ConfirmationService } from 'primeng/api';
-import { Table } from 'primeng/table';
-import { WappTable } from '../../shared/models/wapp-table.model';
-import { CustomColor, TableColumnFilterTypes, TableColumnTypes, WDatePipeFormatType, WappTableColumnAlignTypes } from '../../shared/models/enums.model';
-import { DateConversionService } from '../../shared/services/date-conversion.service';
-
-@Component({
-    selector: 'w-table',
-    templateUrl: './w-table.component.html',
-    styleUrls: ['./w-table.component.scss'],
-    providers: [ConfirmationService],
-    standalone: false
-})
-export class WTableComponent implements OnInit, OnChanges {
-  translations: any;
-  translateObjectName: string = "object"
-  selectAll: boolean = false;
-  tableMinWidth: number = 70;
-
-  tableSkeletons: any = [{ name: '' }, { name: '' }, { name: '' }, { name: '' }];
-
-  private _totalRecords: number = 0;
-
-  set totalRecords(value: number) {
-    this._totalRecords = value;
-  }
-
-  get totalRecords() {
-    return this._totalRecords;
-  }
-
-  wappDateFormat: typeof WDatePipeFormatType = WDatePipeFormatType;
-  
-  @Input('loading') loading: boolean = true;
-  @Input('elements') elements!: any[];
-  @Input('selectedElements') selectedElements: any[] = [];
-  @Input('wappTableObject') wappTableObject!: WappTable;
-  @Input('rowsPerPage') rowsPerPage: number = 0;
-  originalRowsPerPage: number = 0;
-  @Input('singleRowSelection') singleRowSelection: boolean = false;
-
-  @Output('onElementSelect') onElementSelect = new EventEmitter<any>();
-  @Output('onViewElementSelect') onViewElementSelect = new EventEmitter<any>();
-  @Output('onCopyElementSelect') onCopyElementSelect = new EventEmitter<any>();
-  @Output('onEditElementSelect') onEditElementSelect = new EventEmitter<any>();
-  @Output('onCustomElementSelect') onCustomElementSelect = new EventEmitter<any>();
-  @Output('onDeleteElementSelect') onDeleteElementSelect = new EventEmitter<any[]>();
-  @Output('onNewElementSelect') onNewElementSelect = new EventEmitter<boolean>();
-  @Output('onPageChange') onPageChange = new EventEmitter<any>();
-  @Output('onSelectedElementsChange') onSelectedElementsChange = new EventEmitter<any>();
-  @Output('onSecondaryCheckboxChange') onSecondaryCheckboxChange = new EventEmitter<any>();
-
-  @ViewChild('filter') filter!: ElementRef;
-  @ViewChild('table') dataTable!: Table;
-
-  constructor(
-    private confirmationService: ConfirmationService,
-    public dateConversionService: DateConversionService
-  ) { }
-
-  ngOnInit(): void { }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes?.['rowsPerPage'] && changes?.['rowsPerPage'].currentValue !== changes?.['rowsPerPage'].previousValue) {
-      if (this.originalRowsPerPage === 0 && changes?.['rowsPerPage'].currentValue !== 0) {
-        this.originalRowsPerPage = changes?.['rowsPerPage'].currentValue;
-      }
-    }
-
-    if (changes?.['elements'] && changes?.['elements']?.currentValue.length != 0) {
-      this.totalRecords = changes?.['elements']?.currentValue.length;
-      if (this.rowsPerPage === 0 && this.elements) {
-        this.rowsPerPage = Math.min(this.elements.length, 10);
-      } else if ((this.rowsPerPage > this.elements.length) || this.elements.length === 0) {
-        this.rowsPerPage = Math.max(this.elements.length, 0);
-      }else if(this.elements.length > this.rowsPerPage){
-        if(this.originalRowsPerPage === 0){
-          this.rowsPerPage = Math.min(this.elements.length, 10);
-        }else if(this.rowsPerPage < this.originalRowsPerPage){
-          this.rowsPerPage = this.elements.length;
-        }
-      }
-    }
-  }
-
-  create() {
-    this.onNewElementSelect.emit(true);
-  }
-
-  onElement(element: any) {
-    this.onElementSelect.emit(element);
-  }
-
-  viewElement(element: any) {
-    this.onViewElementSelect.emit(element);
-  }
-
-  editElement(element: any) {
-    this.onEditElementSelect.emit(element);
-  }
-
-  customElement(element: any) {
-    this.onCustomElementSelect.emit(element);
-  }
-
-  readProperty(obj: any, prop: string): any {
-    if (typeof obj === 'undefined') {
-      return false;
-    }
-
-    var _index = prop.indexOf('.')
-    if (_index > -1) {
-      return this.readProperty(obj[prop.substring(0, _index)], prop.substr(_index + 1));
-    }
-    return obj[prop];
-  }
-
-  confirmDeleteSelected(event: any) {
-    this.confirmationService.confirm({
-      target: event.target as EventTarget,
-      message: this.wappTableObject.confirmMultipleDeleteLabel,
-      icon: "pi pi-exclamation-triangle",
-      acceptLabel: this.wappTableObject.confirmDeleteBtnLabel,
-      accept: () => {
-        this.deleteSelectedElements();
-      }
-    });
-  }
-
-  deleteSelectedElements() {
-    this.onDeleteElementSelect.emit(this.selectedElements)
-    this.selectedElements = [];
-  }
-
-  confirmDelete(event: Event, element: any) {
-    this.confirmationService.confirm({
-      target: event.target as EventTarget,
-      message: this.wappTableObject.confirmSingleDeleteLabel,
-      icon: "pi pi-exclamation-triangle",
-      rejectButtonProps: {
-        label: this.wappTableObject.confirmDeleteBtnLabel
-      }, 
-      rejectButtonStyleClass: 'p-button-text p-button-sm',
-      acceptButtonProps: {
-          label: this.wappTableObject.confirmDeleteBtnLabel,
-      },
-      accept: () => {
-        this.deleteSingleElement(element);
-      }, 
-      defaultFocus: 'w-table-confirm-dialog'
-    });
-  }
-
-  deleteSingleElement(element: any) {
-    this.onDeleteElementSelect.emit([element])
-  }
-
-  copyElement(element: any) {
-    this.onCopyElementSelect.emit(element);
-  }
-
-  confirmCopy(event: Event, element: any) {
-    this.confirmationService.confirm({
-      target: event.target as EventTarget,
-      message: this.wappTableObject.confirmCopyLabel,
-      icon: "pi pi-exclamation-triangle",
-      acceptLabel: this.wappTableObject.confirmCopyBtnLabel,
-      accept: () => {
-        this.copyElement(element);
-      }
-    });
-  }
-
-  onSelectionChange(selectedItems : any) {
-    if (this.singleRowSelection) {
-        this.selectedElements = [selectedItems];
-    } else {
-      this.selectedElements = selectedItems;
-    }
-    this.selectAll = this.selectedElements.length === this.elements.length;
-    this.onSelectedElementsChange.emit(this.selectedElements);
-  }
-
-  onSelectAllChange(event: any) {
-    const checked = event.checked;
-
-    if (checked) {
-      this.selectedElements = this.wappTableObject.disableCheckbox ? this.getSelectableElements(this.elements) : this.elements;
-      if(this.dataTable.filteredValue) {
-        this.updateSelectedFilteredItems(this.dataTable.filteredValue.map(v => v[this.wappTableObject.identificator]));
-      }
-      this.selectAll = true;
-    }
-    else {
-      this.selectedElements = [];
-      this.selectAll = false;
-    }
-
-    this.onSelectedElementsChange.emit(this.selectedElements);
-  }
-
-  getSelectableElements(allElements: any[]) {
-    return allElements.filter((element: any) => !this.readProperty(element, this.wappTableObject.disableCheckbox!));
-  }
-
-  updateSelectedFilteredItems(items: any[]) {
-    this.selectedElements = this.selectedElements.filter(e => items.includes(e[this.wappTableObject.identificator]));
-  }
-
-  onSecondaryCheckboxChanges(element: any) {
-    this.onSecondaryCheckboxChange.emit(element)
-  }
-
-  onGlobalFilter(table: Table, event: Event) {
-    table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
-  }
-
-  clear(table: Table) {
-    table.clear();
-  }
-
-  public get tableColumnFilterTypes(): typeof TableColumnFilterTypes {
-    return TableColumnFilterTypes;
-  }
-
-  public get tableColumnTypes(): typeof TableColumnTypes {
-    return TableColumnTypes;
-  }
-
-  getBooleanColumnClass(index: number, valueProperty: boolean) {
-    const booleanIconClasses = [];
-
-    if (valueProperty == true) {
-      booleanIconClasses.push(this.wappTableObject.columnBooleanTypeIcons[index].trueIcon ?? '');
-      booleanIconClasses.push(this.wappTableObject.columnBooleanTypeIcons[index].trueIconColor ?? '');
-    } else if (valueProperty == false) {
-      booleanIconClasses.push(this.wappTableObject.columnBooleanTypeIcons[index].falseIcon ?? '');
-      booleanIconClasses.push(this.wappTableObject.columnBooleanTypeIcons[index].falseIconColor ?? '');
-    } else if (valueProperty == null) {
-      booleanIconClasses.push(this.wappTableObject.columnBooleanTypeIcons[index].nullIcon ?? '');
-      booleanIconClasses.push(this.wappTableObject.columnBooleanTypeIcons[index].nullIconColor ?? '');
-    }
-
-    return booleanIconClasses;
-  }
-
-  clearFilters() {
-    this.dataTable.clear();
-  }
-
-  getTableColumnAlignClass(alignment: number) {
-    if (alignment == WappTableColumnAlignTypes.Right) return 'text-right';
-    if (alignment == WappTableColumnAlignTypes.Left) return 'text-left';
-    if (alignment == WappTableColumnAlignTypes.Center) return 'text-center';
-    return 'text-left'
-  }
-
-  getTableColumnAlignClassDefaultByColumnType(columnType: TableColumnTypes) {
-    if (columnType == TableColumnTypes.Text) return 'text-left';
-    if (columnType == TableColumnTypes.Currency) return 'text-left';
-    if (columnType == TableColumnTypes.Date) return 'text-left';
-    if (columnType == TableColumnTypes.Badge) return 'text-center';
-    if (columnType == TableColumnTypes.Boolean) return 'text-center';
-    if (columnType == TableColumnTypes.Image) return 'text-center';
-    if (columnType == TableColumnTypes.Number) return 'text-right';
-    if (columnType == TableColumnTypes.SecondaryCheckbox) return 'text-center';
-    if (columnType == TableColumnTypes.Enum) return 'text-center';
-    return 'text-left'
-  }
-
-  calculateColspan() {
-    let colspan = this.wappTableObject.headers.length;
-    this.wappTableObject.hasCheckbox ?
-      colspan += 1 : '';
-    this.hasActionButtons() ?
-      colspan += 1 : '';
-    return colspan;
-  }
-
-  hasActionButtons(): boolean {
-    return this.wappTableObject.hasCopyButton ||
-      this.wappTableObject.hasEditButton ||
-      this.wappTableObject.hasViewButton ||
-      this.wappTableObject.hasDeleteButton ||
-      this.wappTableObject.hasCustomButton ?
-      true : false;
-  }
-
-  pageChange(element: any) {
-    this.onPageChange.emit(element);
-  }
-
-  getButtonCustomColorClass(customColor: CustomColor) {
-    if(customColor == CustomColor.darkBlue1) { return 'darkBlue1' }
-    if(customColor == CustomColor.darkBlue2) { return 'darkBlue2' }
-    if(customColor == CustomColor.darkBlue3) { return 'darkBlue3' }
-    if(customColor == CustomColor.purple1) { return 'purple1' }
-    if(customColor == CustomColor.purple2) { return 'purple2' }
-    if(customColor == CustomColor.purple3) { return 'purple3' }
-    if(customColor == CustomColor.pink1) { return 'pink1' }
-    if(customColor == CustomColor.pink2) { return 'pink2' }
-    if(customColor == CustomColor.pink3) { return 'pink3' }
-    if(customColor == CustomColor.green1) { return 'green1' }
-    if(customColor == CustomColor.green2) { return 'green2' }
-    if(customColor == CustomColor.green3) { return 'green3' }
-    if(customColor == CustomColor.error1) { return 'error1' }
-    if(customColor == CustomColor.error2) { return 'error2' }
-    return '';
-  }
-
-  isElementSelected(id: number): boolean {
-    return this.selectedElements && this.selectedElements.length > 0
-      ? this.selectedElements.some(element => element[this.wappTableObject.identificator] == id)
-      : false;
-  }
-}