ngx-wapp-components 1.8.2 → 1.8.3

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

@@ -0,0 +1,323 @@
+@import '../../../styles/_variables.scss';
+
+.table-container {
+    padding: $spacingM $spacingL $spacingL $spacingL;
+    background-color: $white;
+    border-radius: $borderRadius;
+    box-shadow: $boxShadowContainer;
+}
+
+.w-table-selectable-row {
+    cursor: pointer;
+}
+
+.showing-per-page {
+    color: $text500;
+    font-weight: map-get($caption, font-weight);
+}
+
+::ng-deep .w-table-styles .p-paginator-bottom > span:first-child {
+    margin-right: auto;
+}
+
+::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page {
+    color: $text500;
+    border-radius: $borderRadius;
+    height: $spacingXXXL;
+    width: $spacingXXXL;
+    max-width: $spacingXXXL;
+    min-width: $spacingXXXL;
+}
+
+::ng-deep .w-table-styles .p-paginator {
+	border-width: 0;
+    padding: $spacingM $spacingL $spacingZero $spacingL;
+}
+
+::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background-color: $primaryLightColor;
+    color: $black846;
+    height: $spacingXXXL;
+    width: $spacingXXXL;
+    max-width: $spacingXXXL;
+    min-width: $spacingXXXL;
+}
+
+::ng-deep .w-table-styles .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: $paginatorBackgroundHoverColor; //ToDo actualizar por variable paginator-background-footer 
+    border-color: transparent;
+    color: $black846;
+    height: $spacingXXXL;
+    width: $spacingXXXL;
+    max-width: $spacingXXXL;
+    min-width: $spacingXXXL;
+}
+
+::ng-deep .w-table-styles .p-paginator .p-paginator-current {
+    color: $text500;
+    padding: 0px;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: $black;
+    margin-left: 0.5rem;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
+	color: $black800;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-sortable-column:focus {
+	box-shadow: inset 0 0 0 0;
+	outline: 0 none;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-datatable-thead > tr > th {
+    @extend .w-table-th-text;
+    background: $white;
+}
+
+::ng-deep .w-table-styles .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
+    background: $black50;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-paginator-bottom {
+    justify-content: normal !important;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-paginator-bottom > button {
+    color: $text500;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-datatable-header {
+    background: $white;
+    border-width: $spacingZero;
+    padding: $spacingZero $spacingZero $spacingM $spacingZero !important;
+    font-weight: map-get($caption, font-weight);
+}
+
+::ng-deep .w-table-styles p-inputnumber, .p-inputnumber {
+    height: $spacingXXXL;
+}
+
+::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
+    width: $spacingXXXL;
+}
+
+::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
+    width: $spacingXXXL;
+}
+
+::ng-deep .wapp-table-styles .showing-per-page .p-button.p-inputnumber-button-up {
+    border-radius: $borderRadius;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+::ng-deep .wapp-table-styles .showing-per-page .p-button.p-inputnumber-button-down {
+    border-radius: $borderRadius;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+::ng-deep .w-table-styles .p-inputnumber-buttons-horizontal .p-inputnumber-input {
+    border-width: $borderWidth 0px $borderWidth 0px;
+    border-color: $black200;
+    color: $black300;
+    text-align: center;
+}
+
+::ng-deep .w-table-styles .p-button.p-button-outlined {
+    color: $black200;
+    border-width: $borderWidth;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-datatable-tbody > tr > td {
+    @extend .w-table-td-text;
+	border: $borderWidth solid #e2e8f0;
+	border-width: $tableBorderWidth;
+	padding-left: $spacingXS;
+	padding-right: $spacingXS;
+    padding-top: $spacingXSM;
+    padding-bottom: calc($spacingXSM - $tableBorder);
+}
+
+::ng-deep .w-table-no-buttons .p-datatable .p-datatable-tbody > tr > td {
+	padding-left: $spacingXS !important;
+	padding-right: $spacingXS !important;
+    padding-top: $spacingM !important;
+    padding-bottom: calc($spacingM - $tableBorder) !important;
+}
+
+::ng-deep .w-table-styles{
+    .p-checkbox{
+        height: 16px;
+        width: 16px; 
+        border-width: $borderWidth;
+
+        .p-checkbox-box{
+            height: 16px;
+            width: 16px;
+            border-radius: $checkboxBorderRadius;
+            border: $borderWidth solid $black300;
+
+            .p-checkbox-icon{
+                @extend .w-control-button-small-icon-text;
+            }
+            
+            &.p-highlight {
+                border-color: $secondary400;
+                background: $secondary400;
+            }
+        }
+
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $black300;
+                    border: $borderWidth solid $black300;
+                }
+
+                &.p-focus {
+                    background-color: $secondary400;
+                    @extend .focus;
+                    border: $borderWidth solid $secondary50;
+                }
+
+                &:not(.p-highlight).p-focus {
+                    background-color: $black300;
+                    border: $borderWidth solid $black300;
+                }
+    
+                &.p-highlight:hover {    
+                    border-color: $secondary400;
+                    background: $secondary400;
+                }
+            }
+        }
+    }
+}
+
+::ng-deep .w-table-styles .p-inputtext:enabled:focus {
+	outline: 0 none;
+	outline-offset: 0;
+	box-shadow: 0 0 0 0 $black;
+    background-color: $black100;
+	border-color: $black100;
+    color: $black;
+}
+
+::ng-deep .w-table-styles .p-inputtext:enabled:hover {
+    border-color: $black200;
+}
+
+::ng-deep .w-table-styles .p-button.p-button-outlined:enabled:hover {
+    color: $black200;
+    border: $borderWidth solid;
+    background-color: $black100;
+}
+
+::ng-deep .w-table-styles .p-button.p-button-outlined:enabled:hover > .p-button-icon {
+    color: $text846;
+}
+
+::ng-deep .w-table-styles .p-button.p-button-outlined > .pi {
+	font-size: 0.7rem;
+    font-weight: bolder;
+}
+
+::ng-deep .w-table-styles .p-datatable .p-datatable-thead > tr > th:hover {
+	color: $black800;
+	background: $white;
+}
+
+.element-image-width {
+    max-height: 32px;
+    width: auto;
+    vertical-align: middle;
+}
+
+.height-input {
+    height: $spacingXXXL;
+}
+
+.w-input {
+    @extend .w-input-small-placeholder-text;
+    border-radius: $borderRadius;
+    border-width: $borderWidth;
+    border-color: $black200;
+    gap: 16px;
+}
+::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $text700;
+}
+::-moz-placeholder { /* Firefox 19+ */
+    color: $text700;
+}
+:-ms-input-placeholder { /* IE 10+ */
+    color: $text700;
+}
+:-moz-placeholder { /* Firefox 18- */
+    color: $text700;
+}
+.w-input:hover {
+    border: $borderWidth solid $primaryColor !important;
+}
+.w-input:focus {
+    box-shadow:  0px 0px 3px 3px $primary50 !important;
+    background-color: transparent !important;
+}
+.pi-search {
+	left: calc($spacingS - $borderWidth);
+	color: $text700 !important;
+}
+
+.image-header{
+    text-align: center !important;
+}
+
+::ng-deep .w-table-styles .p-avatar img {
+	width: $spacingXXXL !important;
+	height: $spacingXXXL !important;
+}
+
+:host ::ng-deep .w-table-styles .p-avatar {
+    border: 1px solid $black200;
+}
+
+::ng-deep .p-datatable .p-datatable-thead > tr > th {
+    padding: $spacingM $spacingXS;
+    border: $borderWidth solid $black200;
+    border-width: $spacingZero $spacingZero $borderWidth $spacingZero;
+    font-weight: 700;
+    color: $black;
+    background: $white;
+    transition: box-shadow 0.2s;
+  }
+
+::ng-deep .p-datatable {
+    .p-datatable-tbody {
+        > tr {
+            color: $text500;
+        }
+    }
+}
+
+::ng-deep .p-sortable-column {
+    &:not(.p-highlight):hover {
+        .p-sortable-column-icon {
+            color: $black800;
+        }
+    }
+}
+
+::ng-deep .p-datatable .p-datatable-tbody > tr.w-table-lazy-empty-message-padding > td {
+	padding-left: $spacingS !important;
+	padding-right: $spacingS !important;
+    padding-top: $spacingM !important;
+    padding-bottom: calc($spacingM - $tableBorder) !important;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WTableComponent } from './w-table.component';
+
+describe('WTableComponent', () => {
+  let component: WTableComponent;
+  let fixture: ComponentFixture<WTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WTableComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,238 @@
+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 { TableColumnFilterTypes, TableColumnTypes, WDatePipeFormatType, WappTableColumnAlignTypes } from '../../shared/models/enums.model';
+
+@Component({
+  selector: 'w-table',
+  templateUrl: './w-table.component.html',
+  styleUrls: ['./w-table.component.scss'],
+  providers: [ConfirmationService]
+
+})
+export class WTableComponent implements OnInit, OnChanges{
+  selectedElements: any[] = [];
+  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('elements') elements!: any[];
+  @Input('rowsPerPage') rowsPerPage: number = 0;
+  @Input('loading') loading: boolean = true;
+  @Input('wappTableObject') wappTableObject!: WappTable;
+
+  @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>();
+
+  @ViewChild('filter') filter!: ElementRef;
+  @ViewChild('table') dataTable!: Table;
+
+  constructor(
+    private confirmationService: ConfirmationService,
+  ) { }
+
+  ngOnInit(): void { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if(changes?.['elements'] && changes?.['elements']?.currentValue.length != 0) {
+      this.totalRecords = changes?.['elements']?.currentValue.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",
+      acceptLabel: this.wappTableObject.confirmDeleteBtnLabel,
+      accept: () => {
+        this.deleteSingleElement(element);
+      }
+    });
+  }
+
+  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(value = []) {
+    this.selectAll = value.length === this.elements.length;
+    this.selectedElements = value;
+  }
+
+  onSelectAllChange(event:any) {
+    const checked = event.checked;
+
+    if (checked) {
+        this.selectedElements =  this.wappTableObject.disableCheckbox ? this.getSelectableElements(this.elements) : this.elements;
+        this.selectAll = true;
+    }
+    else {
+        this.selectedElements = [];
+        this.selectAll = false;
+    }
+  }
+
+  getSelectableElements(allElements: any[]) {
+    return allElements.filter((element:any) => !this.readProperty(element, this.wappTableObject.disableCheckbox!));
+  }
+
+  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';
+    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.customButtonConfig?.hasCustomButton ?
+          true : false;
+  }
+}