keevo-components 1.8.42 → 1.8.45

package/src/lib/components/kv-tree-table/kv-tree-table.component.html

@@ -0,0 +1,316 @@
+<div>
+    <p-treeTable
+        #tt
+        [value]="dataSource"
+        [columns]="config.columns"
+        [resizableColumns]="true"
+        [tableStyle]="{'min-width': '50rem'}"
+        [resizableColumns]="true"
+        [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
+        [(selection)]="selectedItems"
+        (onLazyLoad)="paginate($event)"
+    >
+
+        <ng-template
+            pTemplate="caption"
+            *ngIf="config.enableCation"
+        >
+            <div
+                class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12">
+                <div class="col-12 flex flex-column">
+                    <div
+                        *ngIf="config.title"
+                        class="text-md font-bold my-3"
+                    >
+                        {{ config.title }}
+                    </div>
+                    <div
+                        *ngIf="config.subtitle"
+                        class="text-sm mb-4 font-medium"
+                    >
+                        {{ config.subtitle }}
+                    </div>
+                </div>
+
+                <div [class]="
+            tamanhoTela < 768
+              ? 'flex flex-row align-items-center col-10 md:col-6 lg:col-4 justify-content-center'
+              : 'flex flex-row align-items-center col-12 md:col-6 lg:col-4 justify-content-center input-search'
+          ">
+
+                    <span
+                        *ngIf="config.enableFilter"
+                        class="p-input-icon-left"
+                    >
+                        <i class="pi pi-search"></i>
+
+                        <input
+                            pInputText
+                            pAutoFocus
+                            [autofocus]="true"
+                            type="text"
+                            (input)="onGlobalFilter(tt, $event)"
+                            placeholder="Pesquisar..."
+                            class="h-2.5rem"
+                        />
+                    </span>
+
+                </div>
+
+                <div class="flex flex-row col-1 justify-content-end p-0">
+                    <div
+                        *ngFor="let action of config.actionsLote"
+                        class="btns-options"
+                    >
+                        <button
+                            id="actionLoteBtns"
+                            pButton
+                            *ngIf="
+                (selectedItems.length > 0 || action.showAcoesLote) &&
+                exibirCampo(action, this.action)
+              "
+                            class="actionLoteBtns p-button-raised p-button-text"
+                            (click)="action?.command(commandEvent); activeItemLote(selectedItems)"
+                            [pTooltip]="retornarCampo(action, selectedItems, 'tooltip')"
+                            [tooltipPosition]="'bottom'"
+                            [style.backgroundColor]="
+                retornarCampo(action, selectedItems, 'btnColor')
+              "
+                            [disabled]="retornarCampo(action, selectedItems, 'disabled')"
+                        >
+                            <span
+                                class="material-symbols-outlined md-22"
+                                [style.color]="
+                  retornarCampo(action, selectedItems, 'iconBtnColor')
+                "
+                            >
+                                {{ retornarCampo(action, selectedItems, "icon") }}
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+
+        <ng-template
+            pTemplate="header"
+            let-columns
+        >
+            <tr>
+                <th
+                    *ngFor="let col of columns; index as i"
+                    [ttSortableColumn]="col.field"
+                    [ttSortableColumnDisabled]="col.sortable === false"
+                    class="text-sm"
+                    [style.width]="col.width"
+                >
+                    <div>
+                        <div [ngClass]="{ flex: i == 0, 'gap-3': i == 0 }">
+                            <div *ngIf="i == 0 && config.enableSelect">
+                                <p-treeTableHeaderCheckbox
+                                    (click)="activeItemLote(selectedItems)"></p-treeTableHeaderCheckbox>
+                            </div>
+
+                            <div
+                                [class]="
+                    centralizarColunas(col) && alignColunasHeader(col) == ''
+                      ? 'flex flex-row justify-content-center'
+                      : 'flex flex-row'
+                  "
+                                [style]="alignColunasHeader(col)"
+                            >
+                                <span>{{ col.header }}</span>
+                                <p-sortIcon
+                                    *ngIf="col.sortable === true"
+                                    [field]="col.field"
+                                    style="font-size: 10px"
+                                ></p-sortIcon>
+
+                                <span
+                                    *ngIf="col.headerTooltip"
+                                    class="material-symbols-outlined flex align-items-center"
+                                    [pTooltip]="col.headerTooltip"
+                                >info</span>
+                            </div>
+                        </div>
+                    </div>
+                </th>
+            </tr>
+        </ng-template>
+
+        <ng-template
+            pTemplate="header"
+            let-columns
+        >
+            <tr>
+                <th
+                    *ngFor="let col of columns"
+                    ttResizableColumn
+                    [style.width]="col.width"
+                    [style]="col.centralize ? 'text-align: center;' : ''"
+                >
+                    {{ col.header }} <br>
+                </th>
+
+                <th
+                    [style.width]="5"
+                    *ngIf="config.actions.length > 0"
+                ></th>
+            </tr>
+        </ng-template>
+        <ng-template
+            pTemplate="body"
+            let-rowNode
+            let-rowData="rowData"
+            let-columns="columns"
+        >
+            <tr
+                [ttRow]="rowNode"
+                (dblclick)="doubleClick($event, rowData)"
+                [ngClass]="{ 'capitalize': tableCaptalized }"
+            >
+                <td
+                    *ngFor="let col of columns;  let i = index"
+                    [style]="returnStyleRow(col, rowNode)"
+                    [style.position]="rowNode.level !== 0 ? 'sticky' : null"
+                    [style.left.px]="rowNode.level !== 0 ? rowNode.level*30 : null"
+                >
+
+                    <div class="flex flex-row  {{col.boolean ? 'justify-content-center' : '' }}">
+                        <div
+                            class="w-full-h-full flex align-items-center"
+                            *ngIf="i == 0"
+                        >
+                            <p-treeTableCheckbox
+                                [disabled]="isDisabledCheckbox(rowData, rowNode)"
+                                (click)="activeItemLote(selectedItems)"
+                                [value]="rowNode"
+                                *ngIf="config.enableSelect == true"
+                            ></p-treeTableCheckbox>
+
+                            <p-treeTableToggler
+                                class="hiddenVisible"
+                                [rowNode]="rowNode"
+                            ></p-treeTableToggler>
+                            <!-- 
+                            <p-treeTableToggler
+                                [rowNode]="rowNode"
+                                *ngIf="!rightCollapse"
+                            ></p-treeTableToggler>
+                            <p-treeTableToggler
+                                class="hiddenVisible"
+                                [rowNode]="rowNode"
+                                *ngIf="rightCollapse"
+                            ></p-treeTableToggler> -->
+                        </div>
+
+
+                        <div class="flex flex-row align-items-center">
+                            <div class="flex flex-row align-items-center justify-content-center">
+
+                                <i
+                                    *ngIf="col.boolean"
+                                    class="pi {{rowData[col.field] ? 'pi-check text-green-300' : ''}}"
+                                    style="font-size: 1.1rem;"
+                                ></i>
+
+
+                                <div
+                                    class="flex flex-column"
+                                    *ngIf="!col.boolean"
+                                >
+                                    <span class="m-0">{{ rowData[col.field] }}</span>
+
+                                    <p
+                                        *ngIf="col.subtitle"
+                                        class="m-0 text-xs font-semibold"
+                                    >{{rowData[col.subtitle]}}</p>
+                                </div>
+
+                            </div>
+                        </div>
+
+                    </div>
+
+
+                    <span *ngIf="col.template && validateShowTemplate(rowNode, col)">
+                        <ng-container
+                            *ngIf="getCustomTemplate(col.template.name)"
+                            [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+                            [ngTemplateOutletContext]="{ $implicit: rowData }"
+                        >
+                        </ng-container>
+                    </span>
+
+                </td>
+
+
+                <td
+                    style="border-left: none;"
+                    *ngIf="config.actions.length > 0 || config.actionsPai"
+                >
+
+                    <div *ngIf="config.actions.length > 0 && validateActionPosition(rowNode)">
+                        <div
+                            class="flex flex-row justify-content-center gap-1"
+                            *ngIf="acoesLinhaTabela"
+                        >
+                            <p-button
+                                *ngFor="let action of config.actions"
+                                icon="pi {{action.icon}}"
+                                [rounded]="true"
+                                [severity]="action.severity ? action.severity : 'secondary'"
+                                [style]="{width: '2rem', height: '2rem'}"
+                                (onClick)="action.command($event)"
+                            ></p-button>
+
+                        </div>
+
+                        <span
+                            *ngIf="!acoesLinhaTabela"
+                            class="material-symbols-outlined cursor-pointer icon-more-horiz"
+                            style="font-size: 22px"
+                            (click)="menu.toggle($event); activeItem(rowData)"
+                        >
+                            more_horiz
+                        </span>
+
+                        <div *ngFor="let action of config.actions">
+                            {{ criarMenusModal(rowData) }}
+                        </div>
+
+                        <p-menu
+                            #menu
+                            [popup]="true"
+                            [model]="menuItems"
+                            appendTo="body"
+                        ></p-menu>
+
+                    </div>
+
+                    <div *ngIf="config.actionsPai?.length > 0 && rowNode.level == 0">
+
+                        <div
+                            *ngFor="let actionPai of config.actionsPai"
+                            class="flex justify-content-end"
+                        >
+
+                            <p-button
+                                icon="pi {{actionPai.icon}}"
+                                [rounded]="true"
+                                [severity]="actionPai.severity ? actionPai.severity : 'secondary'"
+                                [style]="{width: '2rem', height: '2rem'}"
+                                (onClick)="activeItem(rowData);actionPai.command($event);"
+                            ></p-button>
+
+                        </div>
+
+                    </div>
+
+                </td>
+
+            </tr>
+        </ng-template>
+
+    </p-treeTable>
+</div>

package/src/lib/components/kv-tree-table/kv-tree-table.component.scss

@@ -0,0 +1,130 @@
+/* Início: Estilização padrão da tabela */
+
+:host ::ng-deep .p-treetable table {
+    border-spacing: 0 3px;
+}
+
+
+#botaoFiltro:hover {
+    color: rgb(212, 212, 212);
+}
+
+
+:host ::ng-deep .p-treetable .p-treetable-header {
+    // background-color: #f2f2f2;
+    background-color: #d1d1d1;
+    padding: 2px 0 0 0 !important;
+    border-radius: 5px !important;
+}
+
+
+:host ::ng-deep .p-treetable .p-treetable-thead>tr>th {
+    // background-color: #f2f2f2;
+    background-color: #eaeaea;
+
+    padding: 0.5rem 0.5rem !important;
+    margin-bottom: -5px !important;
+}
+
+:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td {
+    padding: 0.5rem 0.5rem !important;
+}
+
+:host ::ng-deep .p-treetable .p-treetable-thead {
+    border-spacing: 0 1px !important;
+}
+
+//frist
+:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:first-of-type {
+    // background-color: #f2f2f2;
+    background-color: #eaeaea;
+
+
+    padding: 0.5rem 0.5rem !important;
+    border-radius: 5px !important;
+}
+
+//last
+
+:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child {
+    background-color: #eaeaea;
+    padding: 0.5rem 0.5rem !important;
+    border-radius: 0 5px 5px 0 !important;
+    -webkit-border-radius: 0 5px 5px 0 !important;
+    -moz-border-radius: 0 5px 5px 0 !important;
+    -ms-border-radius: 0 5px 5px 0 !important;
+    -o-border-radius: 0 5px 5px 0 !important;
+}
+
+
+
+:host ::ng-deep .p-treetable-scrollable-header-box {
+    padding: 0 !important;
+}
+
+
+:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th {
+    background-color: #f2f2f2;
+}
+
+:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th:first-of-type {
+    border-radius: 5px 0 0px 5px;
+}
+
+:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th:last-child {
+    border-radius: 0 5px 5px 0;
+}
+
+:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td {
+    border-bottom: 1px solid #ddd !important;
+    border-top: 1px solid #ddd !important;
+}
+
+:host ::ng-deep #tr-style {
+    border-left: solid 4px #5289B4 !important;
+    border-radius: 10px !important;
+    display: block;
+}
+
+:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-of-type {
+    border-left: solid 4px #5289B4 !important;
+    border-right: none !important;
+    border-radius: 10px 0 0 10px !important;
+    -webkit-border-radius: 10px 0 0 10px !important;
+    -moz-border-radius: 10px 0 0 10px !important;
+    -ms-border-radius: 10px 0 0 10px !important;
+    -o-border-radius: 10px 0 0 10px !important;
+}
+
+:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child {
+    border-radius: 0 10px 10px 0 !important;
+    border-right: 1px solid #ddd !important;
+    -webkit-border-radius: 0 10px 10px 0 !important;
+    -moz-border-radius: 0 10px 10px 0 !important;
+    -ms-border-radius: 0 10px 10px 0 !important;
+    -o-border-radius: 0 10px 10px 0 !important;
+}
+
+:host ::ng-deep .actionBtns,
+:host ::ng-deep .actionLoteBtns {
+    border-radius: 50%;
+    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
+
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+:host ::ng-deep .p-treetable table {
+    border-collapse: separate !important;
+    table-layout: auto !important;
+}
+
+.icon-more-horiz:hover,
+.icon-more-horiz:focus {
+    color: #5e5e5e;
+    transform: scale(1.1);
+    transition: color 0.3s, transform 0.3s;
+}

package/src/lib/components/kv-tree-table/kv-tree-table.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvTreetableComponent } from './kv-tree-table.component';
+
+describe('TreetableComponent', () => {
+  let component: KvTreetableComponent;
+  let fixture: ComponentFixture<KvTreetableComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [KvTreetableComponent]
+    });
+    fixture = TestBed.createComponent(KvTreetableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,231 @@
+import {
+  Component,
+  ContentChildren,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+  QueryList,
+  TemplateRef
+} from '@angular/core';
+
+import { MenuItemCommandEvent } from 'primeng/api';
+import { TreeTable } from 'primeng/treetable';
+
+import { KvMenuItem } from '../../api/components/table/kv-menuitem';
+import { TablePaginate } from '../../api/components/table/table.paginate';
+import { TemplateDirective } from '../../api/directives/template/template.directive';
+
+@Component({
+  selector: 'kv-tree-table',
+  templateUrl: './kv-tree-table.component.html',
+  styleUrls: ['./kv-tree-table.component.scss']
+})
+export class KvTreetableComponent {
+
+  menuItems: KvMenuItem[] = [];
+  tamanhoTela!: number;
+  commandEvent!: MenuItemCommandEvent;
+
+  @Input() config!: any;
+  @Input() dataSource!: any;
+  @Input() gridLines: boolean = false;
+  @Input() acoesLinhaTabela: boolean = false;
+  @Input() tableCaptalized: boolean = false;
+  @Input() selectedItems: any = [];
+
+  @Output() onFilter: EventEmitter<any> = new EventEmitter();
+  @Output() onPaginate: EventEmitter<any> = new EventEmitter();
+  @Output() onActiveItem: EventEmitter<any> = new EventEmitter();
+  @Output() onActiveItemLote: EventEmitter<any> = new EventEmitter();
+  @Output() doubleClickEvent: EventEmitter<any> = new EventEmitter();
+
+  ngOnInit() {
+    this.tamanhoTela = window.innerWidth;
+  }
+
+  @ContentChildren(TemplateDirective) templates!: QueryList<any>;
+  @Input('templates') _templates!: any;
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.tamanhoTela = window.innerWidth;
+  }
+
+  public activeItem(rowData: any) {
+    this.onActiveItem.emit(rowData);
+  }
+
+  public activeItemLote(rowData: any) {
+    this.onActiveItemLote.emit(rowData);
+  }
+
+  public onGlobalFilter(table: TreeTable, event: Event) {
+    this.onFilter.emit((event.target as HTMLInputElement).value);
+    table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
+  }
+
+  public paginate($event: any) {
+    if ($event) {
+      let paginaInicial =
+        ($event?.first > 0 ? $event.first / $event.rows : $event.first) + 1;
+      let termoPesquisa = '';
+      let ordenacao = '';
+
+      if ($event.globalFilter) termoPesquisa = $event.globalFilter;
+
+      if ($event.sortField)
+        ordenacao = `${$event.sortField} ${$event.sortOrder === 1 ? 'ASC' : 'DESC'
+          }`;
+
+      const objeto: TablePaginate = {
+        paginaInicial: paginaInicial,
+        tamanhoPagina: $event.rows,
+        termoPesquisa: termoPesquisa,
+        ordenacao: ordenacao,
+      };
+
+      this.onPaginate.emit(objeto);
+    }
+  }
+
+  returnStyleRow(col: any, rowNode: any): string {
+    const isFirstColumn = col.field === this.config.columns[0].field;
+    const baseOpacity = 1;
+    const maxLevels = 4;
+
+    if (isFirstColumn && rowNode.level >= 0) {
+      const opacity = baseOpacity - (rowNode.level / maxLevels);
+
+      return `border-left: solid 4px rgba(59, 110, 158, ${opacity}) !important;`;
+    }
+
+    if (rowNode.level == 0)
+      return 'border-left: none !important; border-right: none !important'
+
+    return '';
+  }
+
+  alignColunasHeader(col: any): string {
+    if (col.align) {
+      if (col.align == 'right') return 'justify-content: end';
+      else return '';
+    } else return '';
+  }
+  centralizarColunas(col: any): string {
+    if (col.centralize) {
+      return 'text-align: center; ';
+    } else return '';
+  }
+  alignColunas(col: any): string {
+    if (col.align) {
+      return `text-align: ${col.align}`;
+    } else return '';
+  }
+
+  criarMenusModal(data: any) {
+    if (this.config.actions && data) {
+      const items = this.config.actions.map((action: any) => {
+        const icon = this.retornarCampo(action, data, 'icon');
+        const tooltip = this.retornarCampo(action, data, 'tooltip');
+        const tooltipPosition = this.retornarCampo(
+          action,
+          data,
+          'tooltipPosition'
+        );
+        const label = this.retornarCampo(action, data, 'label');
+        const command: any = this.retornarCampo(action, data, 'command');
+        const visible: boolean = action.visible ? action.visible(data) : true;
+        const disabled: boolean = action.disabled
+          ? action.disabled(data)
+          : false;
+
+        const menuInsert: KvMenuItem = {
+          label,
+          icon,
+          tooltip,
+          tooltipPosition,
+          command,
+          disabled,
+          visible,
+        };
+
+        let item = this.menuItems.filter(
+          (x) => x.command == menuInsert.command
+        );
+
+        if (item.length == 0) this.menuItems.push(menuInsert);
+        else {
+          if (menuInsert.label != item[0].label) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+
+          if (menuInsert.visible != item[0].visible) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+
+          if (menuInsert.disabled != item[0].disabled) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+        }
+      });
+    }
+  }
+
+  retornarCampo(action: KvMenuItem, rowData: any, field: string): string {
+    const _function = action.dynamicfields
+      ? (action.dynamicfields[field] as Function)
+      : null;
+    const _field: string = _function
+      ? _function.apply(action, [rowData])
+      : action[field];
+    return _field;
+  }
+
+  exibirCampo(field: any, rowData: any) {
+    let visible = field.visible ? field.visible(rowData) : true;
+    return visible;
+  }
+
+  validateActionPosition(rowNode: any): boolean {
+    if (this.config.actionsPai && rowNode.level == 0) return false;
+    else return true
+  }
+
+
+  doubleClick(e: any, rowData: any) {
+
+    let eventDoubleClick = { event: e, rowData: rowData };
+
+    let array: string[] = [];
+    e.target.classList.forEach((x: any) => array.push(x));
+
+    // if (array.find((x: any) => x == 'ng-star-inserted') != undefined)
+    this.doubleClickEvent.emit(eventDoubleClick);
+  }
+
+  isDisabledCheckbox(rowData: any, rowNode: any): boolean {
+    return this.config.disableControlCheckboxFunction
+      ? this.config.disableControlCheckboxFunction(rowData, rowNode)
+      : false;
+  }
+
+  getCustomTemplate(templatename: string): TemplateRef<any> {
+    return this._templates[templatename];
+  }
+
+  validateShowTemplate(rowNode: any, col: any): boolean {
+    if (col.templateOnly) {
+      if (col.templateOnly === 'pai') {
+        return rowNode.level === 0;
+      }
+      if (col.templateOnly === 'filho') {
+        return rowNode.level === 1;
+      }
+    }
+    return true;
+  }
+}