keevo-components 2.0.106 → 2.0.107

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

@@ -0,0 +1,355 @@
+import {
+  Component,
+  ContentChildren,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  computed,
+  effect,
+  input,
+  model,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { MenuItem, TreeNode } from 'primeng/api';
+import { TreeTable } from 'primeng/treetable';
+import {
+  ValueOrFn,
+  getOrExecute,
+  mapToMenuItem,
+} from '../../api/components/table/kv-menuitem';
+import { TablePaginate } from '../../api/components/table/table.paginate';
+import { TemplateDirective } from '../../api/directives/template/template.directive';
+import { TreeTableConfig } from '../../api/components/tree-table/tree-table.config';
+import { TreeTableKeys } from '../../api/components/tree-table/tree-table-keys';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { TableConfigColumn } from '../../api/components/table/table.config.column';
+
+@Component({
+  selector: 'kv-tree-table',
+  templateUrl: './kv-tree-table.component.html',
+  styleUrls: ['./kv-tree-table.component.scss'],
+})
+export class KvTreetableComponent {
+  menuItems: MenuItem[] = [];
+  @Input() disableRowNodeSticky: boolean = false;
+
+  @Input() config!: TreeTableConfig;
+  // @Input() dataSource!: any;
+  @Input() gridLines: boolean = false;
+  @Input() tableCaptalized: boolean = false;
+  @Input() selectedItems: any = [];
+  @Input() paginator = true;
+  @Input() rows = 10;
+  @Input() treeTableDraggable = false;
+  @Input() transferArrayItem = false;
+  @Input() ordenacao!: string;
+  @Input() totalRecords!: number;
+  @Input() textoEmptyMessage: string = 'Nenhum registro encontrado';
+  @Input() childrenRecoil: boolean = true;
+  @Input() showHeader: boolean = true;
+  @Input() scrollHeight: string = '';
+  @Input() indFullPage: boolean = false;
+
+  dataSource = model<any[]>([]);
+  tamanhoTela = signal<number>(0);
+  kvTreeTable = viewChild<ElementRef>('kvTreeTable');
+  isLoadingSkeleton = input<boolean>(false);
+  dataSourceMock: any[] = [];
+
+  constructor(private elementRef: ElementRef) { }
+
+  /**
+   * @deprecated O valor de pageLinks é atribuído de acordo com o tamanho da tela, essa propriedade não está sendo utilizada
+   */
+  @Input() pageLinksOptions!: number;
+  /**
+   * @deprecated O valor de pageLinks é atribuído de acordo com o tamanho da tela, essa propriedade não está sendo utilizada
+   */
+  @Input() pageLinks!: number;
+  /**
+   * @deprecated A quantidade de paginitorPageIcons é atribuído de acordo com o tamanho da tela, essa propriedade não está sendo utilizada
+   */
+  @Input() showFirstLastIcon!: boolean;
+
+  @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();
+  @Output() onNodeSelect: EventEmitter<any> = new EventEmitter();
+  @Output() onNodeUnselect: EventEmitter<any> = new EventEmitter();
+  @Output() onDropItem: EventEmitter<any> = new EventEmitter<any>();
+
+  public readonly selectionKeys = model<TreeTableKeys | undefined>(undefined);
+
+  ngOnInit() {
+    this.loadingSkeletonUtilities();
+
+    this.tamanhoTela.set(window.innerWidth);
+    if (this.ordenacao) {
+      this.dataSource.set(this.sortTreeNodes(this.dataSource()));
+    }
+
+    if (this.indFullPage)
+      this.setMaxHeightTreeTable();
+  }
+
+  @ContentChildren(TemplateDirective) templates!: QueryList<any>;
+  @Input('templates') _templates!: any;
+
+  @ViewChild(TreeTable) pTreeTable!: TreeTable;
+  @ViewChild('inputBusca') inputBusca!: ElementRef;
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.tamanhoTela.set(window.innerWidth);
+  }
+
+  public activeItem(rowData: any) {
+    this.onActiveItem.emit(rowData);
+  }
+
+  public activeItemLote(rowData: any) {
+    this.onActiveItemLote.emit(rowData);
+  }
+
+  getOrExecute<T>(action: ValueOrFn<T>, data: any): T {
+    return getOrExecute(action, data);
+  }
+
+  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);
+    }
+  }
+
+  loadingSkeletonUtilities() {
+    if (this.dataSource().length === 0 && this.isLoadingSkeleton()) {
+      let rowItem: any = {};
+      this.config?.columns.forEach((col) => {
+        rowItem[col.field] = '';
+      });
+
+      this.dataSourceMock = Array.from({ length: this.rows }, () => ({
+        ...rowItem,
+        data: { ...(rowItem.data || {}) },
+        children: [{ ...(rowItem.data || {}) }]
+      }));
+
+      this.dataSource.set(this.dataSourceMock)
+    }
+  }
+
+
+  drop(event: CdkDragDrop<any>) {
+    const draggedNode = event.item.data;
+    const draggedChildData = draggedNode.node.data;
+
+    if (draggedNode.level === 0) {
+      moveItemInArray(this.dataSource(), event.previousIndex, event.currentIndex);
+    } else if (draggedNode.level >= 1) {
+      const parentNode = draggedNode.node.parent;
+
+      if (parentNode) {
+        const parentChildren = parentNode.children.map(
+          (child: any) => child.data
+        );
+        const previousChildIndex = parentChildren.indexOf(draggedChildData);
+
+        const relativeCurrentIndex =
+          previousChildIndex + (event.currentIndex - event.previousIndex);
+
+        const targetChildIndex = Math.max(
+          0,
+          Math.min(parentChildren.length - 1, relativeCurrentIndex)
+        );
+
+        if (previousChildIndex !== -1 && targetChildIndex !== -1) {
+          moveItemInArray(
+            parentNode.children,
+            previousChildIndex,
+            targetChildIndex
+          );
+        }
+        const dropInfo: any = {
+          previousChildIndex: previousChildIndex + 1,
+          targetChildIndex: targetChildIndex + 1,
+        };
+
+        this.onDropItem.emit({ event: event, dropChildInfo: dropInfo });
+      }
+    }
+
+    this.dataSource.set([...this.dataSource()]);
+
+    if (draggedNode.level === 0) {
+      this.onDropItem.emit(event);
+    }
+  }
+
+  sortTreeNodes(nodes: TreeNode[]): TreeNode[] {
+    return nodes
+      .sort((a, b) => a.data[this.ordenacao] - b.data[this.ordenacao])
+      .map((node) => {
+        if (node.children) {
+          node.children = this.sortTreeNodes(node.children);
+        }
+        return node;
+      });
+  }
+
+  // calculateTargetChildIndex(
+  //   event: CdkDragDrop<any>,
+  //   parentChildren: any[],
+  //   previousChildIndex: number
+  // ): number {
+  //   const targetChildIndex =
+  //     previousChildIndex + (event.currentIndex - event.previousIndex);
+
+  //   if (targetChildIndex < 0) {
+  //     return 0;
+  //   } else if (targetChildIndex >= parentChildren.length) {
+  //     return parentChildren.length - 1;
+  //   } else {
+  //     return targetChildIndex;
+  //   }
+  // }
+
+  doubleClick(e: any, rowData: any) {
+    let eventDoubleClick = { event: e, rowData: rowData };
+
+    let array: string[] = [];
+    e.target.classList.forEach((x: any) => array.push(x));
+
+    this.doubleClickEvent.emit(eventDoubleClick);
+  }
+
+  onNodeSelected(event: any) {
+    this.onNodeSelect.emit(event);
+  }
+
+  onNodeUnselected(event: any) {
+    this.onNodeUnselect.emit(event);
+  }
+
+  getCustomTemplate(templatename: string): TemplateRef<any> {
+    return this._templates[templatename];
+  }
+
+  getIcon(icon: string): string {
+    return icon.includes('pi-') ? `pi ${icon}` : '';
+  }
+
+  align(col: TableConfigColumn): string {
+    if (col.centralize) return 'justify-content-center';
+    else if (col.align == 'right') return 'justify-content-end';
+    else return '';
+  }
+
+  resetTreeTable() {
+    if (this.pTreeTable) this.pTreeTable.reset();
+    if (this.inputBusca) this.inputBusca.nativeElement.value = '';
+  }
+
+  setMaxHeightTreeTable() {
+    if (this.kvTreeTable()?.nativeElement.offsetHeight) {
+      const height = this.kvTreeTable()?.nativeElement.offsetHeight;
+      const element = this.elementRef.nativeElement.querySelector('.kv-treetable-container')
+      if (element) element.style.maxHeight = `${height}px`
+    }
+  }
+
+  criarMenusModal = computed(() => (data: any) => {
+    if (this.config.actions && data) {
+      for (const action of this.config.actions) {
+        const menuInsert = mapToMenuItem(action, data);
+
+        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);
+          }
+        }
+      }
+    }
+  });
+
+  validateActionPosition = computed(() => (rowNode: any) => {
+    if (this.config.actionsPai && rowNode.level == 0) return false;
+    else return true;
+  });
+
+  isSelectEnabled = computed(() => (rowData: any, rowNode: any) => {
+    return this.config.visibleCheckboxFunction
+      ? this.config.visibleCheckboxFunction(rowData, rowNode)
+      : true
+  });
+
+  isDisabledCheckbox = computed(() => (rowData: any, rowNode: any) => {
+    return this.config.disableControlCheckboxFunction
+      ? this.config.disableControlCheckboxFunction(rowData, rowNode)
+      : false;
+  });
+
+  validateShowTemplate = computed(() => (rowNode: any, col: any) => {
+    if (col.templateOnly) {
+      if (col.templateOnly === 'pai') {
+        return rowNode.level === 0;
+      }
+      if (col.templateOnly === 'filho') {
+        return rowNode.level === 1;
+      }
+    }
+    return true;
+  });
+
+  exibirCampo = computed(() => (field: any, rowData: any) => {
+    let visible = field.visible ? field.visible(rowData) : true;
+    return visible;
+  });
+}
+

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

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { KvTreetableComponent } from './kv-tree-table.component'
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+import { KvButtonModule } from '../kv-button/kv-button.module';
+import { KvInputsModule } from '../kv-inputs/kv-inputs.module';
+
+@NgModule({
+  declarations: [
+    KvTreetableComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    KvButtonModule,
+    KvInputsModule,
+    KvButtonModule
+  ],
+  exports: [
+    KvTreetableComponent
+  ]
+})
+export class KvTreetableModule { }

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

@@ -0,0 +1,16 @@
+<div class="card flex flex-column align-items-center justify-content-center">
+    <p-tree
+        [value]="treeViewData"
+        [selectionMode]="selectionMode"
+        class="w-full"
+        [(selection)]="selectedFiles"
+        (selectionChange)="onSelectionChange()"
+        [filter]="filter" 
+        [filterPlaceholder]="filterPlaceholder"
+        [scrollHeight]="scrollheight" 
+        emptyMessage="Nenhum registro encontrado"
+    >
+    </p-tree>
+</div>
+
+

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

@@ -0,0 +1,19 @@
+:host ::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
+    color: white;
+    border-color: #004172;
+    background: #004172;
+  
+    &:hover {
+      background-color: #002542;
+    }
+  
+    &:active {
+      background-color: #002542;
+    }
+  
+    &:disabled {
+      background-color: #002542;
+      opacity: 0.4;
+      cursor: auto;
+    }
+}

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

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

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

@@ -0,0 +1,73 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output
+} from '@angular/core';
+
+import { TreeNode } from 'primeng/api';
+
+@Component({
+  selector: 'kv-tree-view',
+  templateUrl: './kv-tree-view.component.html',
+  styleUrls: ['./kv-tree-view.component.scss']
+})
+export class KvTreeViewComponent implements OnInit {
+  @Input() selectedFiles: any = [];
+  @Input() selectionMode: any = 'checkbox';
+  @Input() treeViewData!: TreeNode[];
+  @Input() filter: boolean = false;
+  @Input() filterPlaceholder: string = 'Pesquisar...';
+  @Input() scrollheight: string = '';
+
+  @Output() selectedItems: EventEmitter<any> = new EventEmitter();
+
+  initialSelectionVerified = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(): void {
+    if (!this.initialSelectionVerified && this.selectedFiles && this.selectedFiles.length > 2) {
+      this.verifyParentSelection(this.treeViewData);
+      this.initialSelectionVerified = true;
+    }
+  }
+
+  verifyParentSelection(nodes: TreeNode[]) {
+    nodes.forEach((node) => {
+      if (node.children && node.children.length > 0) {
+        const allChildrenSelected = this.areAllDescendantsSelected(node);
+        
+        if (allChildrenSelected) {
+          // Se todos os filhos forem selecionados, seleciona o nó pai
+          this.selectedFiles.push({
+            label: node.label,
+            data: node.data,
+            key: node.key,
+          });
+        }
+
+        // Verifica recursivamente para os filhos
+        this.verifyParentSelection(node.children);
+
+      }
+    });
+  }
+
+  // Função auxiliar para verificar se todos os descendentes de um nó estão selecionados
+  areAllDescendantsSelected(node: TreeNode): boolean {
+    if (!node.children || node.children.length === 0) {
+      return this.selectedFiles.some((selected: any) => selected.key === node.key);
+    }
+
+    return node.children.every(child => this.areAllDescendantsSelected(child));
+  }
+
+  onSelectionChange() {
+    this.selectedItems.emit(this.selectedFiles)
+  }
+}

package/src/lib/components/kv-tree-view/kv-tree-view.module.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { KvTreeViewComponent } from './kv-tree-view.component';
+import { PrimeNgModule } from '../../api/modules/primeng.module';
+
+@NgModule({
+  declarations: [
+    KvTreeViewComponent
+  ],
+  imports: [
+    CommonModule,
+    PrimeNgModule
+  ],
+  exports: [
+    KvTreeViewComponent
+  ],
+})
+export class KvtreeViewModule { }

package/src/lib/components/kv-widget-card/kv-widget-card.component.html

@@ -0,0 +1,71 @@
+<p-card 
+  class="p-0 card"
+  [style]="{ 'width': '100%', 'padding': '0 !important' }" 
+>
+
+  <div 
+    class="flex flex-row gap-4 border-round-xl card {{severity() ? severity() : (!border() ? 'system' : '')}}"
+    [ngClass]="{
+      'border-2 border-200': border(),
+    }"  
+  >
+
+    <div 
+      class="flex flex-column gap-2 h-auto w-auto p-3"
+      
+    >
+      
+      <div class="flex flex-row align-items-center mb-2">
+
+        <kv-icon
+          [icon]="icon()"
+          [severity]="iconSeverity()"
+          [shape]="iconShape()"
+        ></kv-icon>
+
+        <span class="text-xl font-bold text-700" [ngClass]="{ 'ml-auto': icon() }">
+          {{ indicator() }}
+        </span>
+
+      </div>
+
+      <div class="flex flex-row align-items-center text-sm gap-3">
+
+        <span class="text-800">
+          {{ title() }}
+        </span>
+
+        @if(informationMessage()) {
+          <span [style.margin-left]="'auto'" class="material-symbols-outlined text-lg text-500" pTooltip="{{ informationMessage() }}" tooltipPosition="top">
+            info
+          </span>
+        }
+      
+      </div>
+
+      @if(showNavigation()) {
+        <div>
+
+          <button
+            class="border-none bg-transparent cursor-pointer flex align-items-center gap-1 p-0 m-0"
+            [style.padding-left]="'1px !important'"
+            (click)="navigationData().action()"
+          >
+            <span class="text-xs text-500">
+              {{ navigationData().label }}
+            </span>
+
+            <span class="material-symbols-outlined text-xs text-500">
+              {{ navigationData().redirectIcon }}
+            </span>
+
+          </button>
+
+        </div>
+      }
+      
+    </div>
+    
+  </div>
+
+</p-card>

package/src/lib/components/kv-widget-card/kv-widget-card.component.scss

@@ -0,0 +1,27 @@
+@import "../keevo-components-styles.scss";
+
+$system-bg-opacity: 0.1;
+
+:host p-card > ::ng-deep .p-card {
+    color: transparent !important;
+    box-shadow: none !important;
+    border-radius: none !important;
+}
+
+.card {
+    &.system {
+        background-color: rgba(var(--kv-color-system), $system-bg-opacity);
+    }
+
+    &.success { 
+        background-color: rgba(var(--kv-primary-color), $system-bg-opacity);
+    }
+
+    &.warning {
+        background-color: rgba(var(--kv-secondary-color), $system-bg-opacity);
+    }
+
+    &.danger {
+        background-color: rgba(var(--kv-danger-color), $system-bg-opacity);
+    }
+}

package/src/lib/components/kv-widget-card/kv-widget-card.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { KvWidgetCardComponent } from './kv-widget-card.component';
+
+describe('KvWidgetCardComponent', () => {
+  let component: KvWidgetCardComponent;
+  let fixture: ComponentFixture<KvWidgetCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KvWidgetCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KvWidgetCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});