keevo-components 2.0.184 → 2.0.185

package/src/lib/components/kv-table-viewer/components/actions-row-menu/actions-row-menu.component.ts

@@ -0,0 +1,14 @@
+import { Component, input } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { TieredMenuModule } from 'primeng/tieredmenu';
+
+@Component({
+  selector: 'actions-row-menu',
+  standalone: true,
+  imports: [TieredMenuModule],
+  templateUrl: './actions-row-menu.component.html',
+  styleUrl: './actions-row-menu.component.scss'
+})
+export class ActionsRowMenuComponent {
+  actionsRow = input<MenuItem[] | undefined>(undefined);
+}

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

@@ -0,0 +1,198 @@
+<div
+  class="h-full flex flex-row p-2 kv-table-viewer overflow-hidden {{
+    isEmptyTable() ? 'empty-table' : ''
+  }}"
+>
+  @if(!this.selectedItem() || !isMobile() && !selectableTable()) {
+  <div
+    class="h-full {{ handleTableSize() }} m-0 p-0 flex flex-column gap-2"
+    [style.transition]="'all 0.3s ease-in-out'"
+  >
+    @if(showHeaderTemplate()) {
+    <div>
+      <ng-content select="[tableHeaderTemplate]"> </ng-content>
+    </div>
+    }
+
+    <div
+      class="flex flex-row align-items-center justify-content-between flex-initial"
+    >
+      <div class="flex flex-row align-items-center gap-2">
+        @if(searchInput()) {
+        <input
+          style="height: 1.875rem"
+          placeholder="Pesquisar..."
+          type="text"
+          pInputText
+          [(ngModel)]="searchValue"
+          class="text-xs"
+        />
+
+        } @if(filterButton()) {
+        <kv-button
+          label="Filtrar"
+          icon="filter_alt"
+          severity="tertiary"
+          (onClick)="toggleOverlayPanel($event)"
+        ></kv-button>
+        }
+
+        <p-overlayPanel #op [dismissable]="false">
+          <ng-content select="[filtro]"> </ng-content>
+        </p-overlayPanel>
+      </div>
+      <div class="flex flex-row gap-2">
+        @if(actionsHeader()) { @for(action of actionsHeader(); track $index) {
+        <kv-button
+          [icon]="action?.icon || ''"
+          [label]="action?.label || ''"
+          [severity]="action['severity'] || 'tertiary'"
+          (onClick)="action?.command($event)"
+          [popupIcon]="false"
+          [items]="action.items || []"
+          [popup]="isPopupButton()(action)"
+        ></kv-button>
+        } } @if(selectedItem()) {
+        <kv-button
+          [pTooltip]="'Recolher'"
+          icon="reorder"
+          severity="tertiary"
+          (onClick)="selectedItem.set(null)"
+        ></kv-button>
+        }
+      </div>
+    </div>
+
+    <div class="flex-1 h-full overflow-hidden">
+      <p-table
+        [value]="data()"
+        [lazy]="lazy()"
+        [selectionPageOnly]="selectionPageOnly()"
+        [columns]="columns()"
+        [paginator]="paginator()"
+        [rows]="rows()"
+        [totalRecords]="totalRecords()"
+        [loading]="loading()"
+        [pageLinks]="pageLinks()"
+        [first]="first()"
+        [scrollable]="scrollable()"
+        scrollHeight="flex"
+        [showCurrentPageReport]="true"
+        [currentPageReportTemplate]="currentPageReportTemplate()"
+        (onPage)="handlePageChange($event)"
+        (onSort)="handleSort($event)"
+        [rowsPerPageOptions]="rowsPerPageOptions()"
+        [(selection)]="selectedItems"
+        styleClass="p-datatable-sm text-xs overflow-y-auto h-full flex flex-column h-full"
+      >
+        @if(showHeader()) {
+        <ng-template pTemplate="header" let-columns>
+          <tr>
+            @if(selectableTable()) {
+            <th style="width: 4rem"><p-tableHeaderCheckbox /></th>
+            } @for (col of columns; track col.field) {
+            <th
+              [pSortableColumn]="col.field"
+              [pSortableColumnDisabled]="!col?.sortable"
+              [style]="{ width: col.width || 'auto' }"
+            >
+              <div class="flex flex-row align-items-center gap-1">
+                <span>{{ col.header }}</span>
+                @if (col.sortable) {
+                <p-sortIcon [field]="col.field" class="pb-1"></p-sortIcon>
+                }
+              </div>
+            </th>
+            }
+          </tr>
+        </ng-template>
+        }
+
+        <ng-template pTemplate="body" let-rowData let-columns="columns">
+          <tr
+            class="cursor-pointer {{
+              verifyItemSelecionado()(rowData) && 'bg-gray-100'
+            }} hover:bg-gray-200"
+          >
+            @if(selectableTable()) {
+            <td><p-tableCheckbox [value]="rowData" /></td>
+            } @for (col of columns; track col.field) {
+            <td (click)="rowSelect(rowData)" style="word-break: break-all;">
+              @if(col?.template) {
+              <div class="flex flex-row gap-2 align-items-center">
+                @if (getCustomTemplate()(col.template.name)) {
+                <ng-container
+                  [ngTemplateOutlet]="getCustomTemplate()(col.template.name)"
+                  [ngTemplateOutletContext]="{ $implicit: rowData }"
+                />
+                }
+              </div>
+              } @else if(col?.icon) {
+              <span class="material-symbols-outlined text-lg">
+                {{ col.icon(rowData) }}
+              </span>
+              } @else if(col?.tag) {
+              <kv-tags [tags]="[col.tag(rowData)]" />
+              } @else {
+              {{ transformData()(col.pipe, rowData[col.field]) }}
+              }
+            </td>
+            }
+          </tr>
+        </ng-template>
+
+        <ng-template pTemplate="emptymessage">
+          <tr>
+            <td [attr.colspan]="returnColspan()">
+              <div
+                class="w-full h-full flex align-items-center justify-content-center"
+              >
+                <img [src]="emptyTableImg()" class="h-10rem w-auto" />
+              </div>
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </div>
+  </div>
+
+  }
+
+  <div
+    class="shadow-2 p-0 m-0 col selected-item-field ml-2 flex flex-column"
+    [@slideInOut]="isRowSelected() ? 'i.n' : 'out'"
+    [style.overflow]="'hidden'"
+  >
+    @if(hasSelectedItems()) {
+    <actions-lote-field
+      class="h-full"
+      [selectedItems]="selectedItems()"
+      [actionsLote]="actionsLote()"
+    />
+    } @else if(showSelectedItem()) {
+    <div class="bg-gray-100 w-full h-auto p-2 relative">
+      @if(hasActionsRow()) {
+      <actions-row-menu [actionsRow]="actionsRow()" />
+      }
+
+      @if(isMobile()) {
+        <div class="h-2rem w-2rem">
+          <kv-button
+            icon="arrow_back"
+            severity="tertiary"
+            [pTooltip]="'Voltar'"
+            (onClick)="selectedItem.set(null)"
+          />
+        </div>
+      }
+
+      <ng-content select="[selectedItemHeader]"></ng-content>
+    </div>
+    <div class="p-2 overflow-y-auto h-full">
+      <ng-content select="[selectedItem]"></ng-content>
+    </div>
+    }
+
+    <!-- @else { Nenhum item selecionado } -->
+  </div>
+</div>

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

@@ -0,0 +1,106 @@
+::ng-deep .filter-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: transparent;
+  z-index: 1299;
+}
+
+::ng-deep .p-overlaypanel {
+  z-index: 1400 !important;
+}
+
+::ng-deep .kv-table-viewer .p-datatable-wrapper {
+  // flex: 1 1 auto;
+  overflow-x: hidden;
+}
+
+::ng-deep .kv-table-viewer .p-paginator .p-paginator-pages .p-paginator-page {
+  font-size: 0.75rem;
+  min-width: 2rem;
+  height: 2rem;
+}
+
+::ng-deep .kv-table-viewer .p-paginator .p-paginator-current {
+  font-size: 0.75rem;
+}
+
+::ng-deep .kv-table-viewer .p-inputwrapper .p-dropdown {
+  margin: 0;
+  height: auto;
+}
+
+::ng-deep .p-paginator-rpp-options .p-dropdown-panel .p-dropdown-items {
+  padding: 0.25rem 0.25rem;
+}
+
+::ng-deep .p-paginator-rpp-options .p-dropdown-item {
+  border-radius: 0.25rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .p-dropdown-label {
+    padding: 0.5rem 0.5rem;
+  }
+
+  .p-dropdown-trigger {
+    width: 1.5rem;
+  }
+}
+
+::ng-deep .p-paginator-bottom .p-link {
+  min-width: 2rem;
+  height: 2rem;
+}
+
+::ng-deep .p-paginator {
+  padding: 0rem;
+}
+
+::ng-deep .p-dropdown-label {
+  font-size: 0.75rem;
+}
+
+::ng-deep .p-datatable-wrapper {
+  &::-webkit-scrollbar {
+    width: 6px;
+
+    &:hover {
+      background-color: rgba(222, 222, 222, 0.75);
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    border-left: 2px solid white;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-left: 2px solid white;
+    background-color: rgba(222, 222, 222, 0.75);
+  }
+}
+
+::ng-deep .empty-table .p-datatable-table {
+  height: 100%;
+}
+
+
+::ng-deep .p-menu {
+  padding: 0.25rem;
+}
+
+::ng-deep .p-menu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+  font-size: 0.75rem;
+  padding: 0.5rem;
+}
+

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

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

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

@@ -0,0 +1,317 @@
+import { Component, computed, contentChildren, effect, ElementRef, HostListener, inject, input, OnDestroy, output, Renderer2, signal, TemplateRef, untracked, ViewChild } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { SkeletonModule } from 'primeng/skeleton';
+import { TableModule, TablePageEvent } from 'primeng/table';
+import { KvInputsModule } from "../kv-inputs/kv-inputs.module";
+import { KvButtonModule } from "../kv-button/kv-button.module";
+import { OverlayPanel, OverlayPanelModule } from 'primeng/overlaypanel';
+import { ActionsLoteFieldComponent } from './components/actions-lote-field/actions-lote-field.component';
+import { KvTagsModule } from "../kv-tags/kv-tags.module";
+import { CommonModule, DatePipe } from '@angular/common';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { TooltipModule } from 'primeng/tooltip';
+import { MenuItem } from 'primeng/api';
+import { TieredMenuModule } from 'primeng/tieredmenu';
+import { ActionsRowMenuComponent } from './components/actions-row-menu/actions-row-menu.component';
+import { CpfCnpjPipe } from '../../api/pipes/cpfcnpj.pipe';
+import { TelefonePipe } from '../../api/pipes/telefone.pipe';
+import { TemplateDirective } from '../../api/directives/template/template.directive';
+import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+
+interface ColumnTableViewer {
+  field: string;
+  header: string;
+  width?: string;
+  icon?: (rowData: any) => string;
+  tag?: (rowData: any) => { label: string, severity: string, icon: string };
+  pipe?: 'cpfcnpj' | 'telefone' | 'money' | 'date' | 'datetime' | 'dateMonthYear' | undefined;
+  template?: { name: string };
+}
+
+@Component({
+  selector: 'kv-table-viewer',
+  standalone: true,
+  imports: [InputTextModule, CommonModule, TooltipModule, TableModule, SkeletonModule, ButtonModule, KvInputsModule, KvButtonModule, OverlayPanelModule, ActionsLoteFieldComponent, KvTagsModule, TieredMenuModule, ActionsRowMenuComponent, FormsModule],
+  templateUrl: './kv-table-viewer.component.html',
+  styleUrl: './kv-table-viewer.component.scss',
+  animations: [
+    trigger('slideInOut', [
+      state('in', style({
+        width: '*',
+        opacity: 1,
+        transform: 'translateX(0)'
+      })),
+      state('out', style({
+        width: '0px',
+        opacity: 0,
+        transform: 'translateX(100%)'
+      })),
+      transition('out => in', [
+        animate('300ms ease-in-out')
+      ]),
+      transition('in => out', [
+        animate('200ms ease-in-out')
+      ])
+    ])
+  ]
+})
+export class KvTableViewerComponent implements OnDestroy {
+
+  @ViewChild('op') op!: OverlayPanel;
+
+  cpfCnpjPipe = inject(CpfCnpjPipe);
+  telefonePipe = inject(TelefonePipe);
+  datePipe = inject(DatePipe);
+  breakpointObserver = inject(BreakpointObserver);
+  elementRef = inject(ElementRef);
+  renderer = inject(Renderer2);
+
+  columns = input<ColumnTableViewer[]>([]);
+
+  actionsRow = input<MenuItem[] | []>([]);
+  actionsHeader = input<MenuItem[] | undefined>(undefined);
+  actionsLote = input<MenuItem[] | undefined>(undefined);
+
+  data = input<any[]>([]);
+  totalRecords = input<number>(0);
+  loading = input<boolean>(false);
+  rows = input<number>(10);
+  rowsPerPageOptions = input<number[]>([10, 25, 50]);
+  paginator = input<boolean>(true);
+  lazy = input<boolean>(true);
+  scrollable = input<boolean>(true);
+  pageLinks = input<number>(2);
+  currentPageReportTemplate = input<string>('{first} - {last} de {totalRecords}');
+  selectionPageOnly = input<boolean>(true);
+
+
+  selectableTable = input<boolean>(true);
+  showHeader = input<boolean>(true);
+  showHeaderTemplate = input<boolean>(false);
+  tableViewerSize = input<string>('col-8');
+  searchInput = input<boolean>(true);
+  filterButton = input<boolean>(true);
+  idName = input<string | undefined>(undefined);
+  emptyTableImg = input<string>('https://work-assets.keevo.com.br/img/Nenhum_registro_localizado.png');
+  isSelectedPrimaryItem = input<boolean>(false);
+
+  private overlayElement: HTMLElement | null = null;
+
+  selectedItems = signal<any[]>([]);
+  selectedItem = signal<any>(null);
+  first = signal<number>(0);
+  searchValue = signal('');
+  lastEmittedSort = signal<{ field: string, order: number } | null>(null);
+  isMobile = signal(false);
+  
+
+  onPageChange = output<TablePageEvent>();
+  onClickRowItem = output<any>();
+  onSelectItems = output<any[]>();
+  onSearch = output<string>();
+  onSort = output<any>();
+
+  templates = contentChildren(TemplateDirective);
+  _templates = input<Record<string, TemplateRef<any>>>({}, { alias: 'templates' });
+  getCustomTemplate = computed(() => (templatename: string): TemplateRef<any> | null => {
+    const templates = this._templates();
+    return templates[templatename];
+  });
+
+  isRowSelected = computed(() => {
+    return this.selectedItems()?.length > 0 || this.selectedItem();
+  });
+
+  verifyItemSelecionado = computed(() => (rowData: any) => {
+    let isSelected;
+
+    let idName = this.idName() || 'id';
+
+    if (this.selectableTable())
+      isSelected = this.selectedItems().find((item: any) => item[idName] == rowData[idName]);
+    else isSelected = this.selectedItem()?.[idName] == rowData[idName];
+
+    return isSelected;
+  })
+
+  transformData = computed(() => (type: string, value: any) => {
+    if (type === 'cpfcnpj') return this.cpfCnpjPipe.transform(value);
+    if (type === 'telefone') return this.telefonePipe.transform(value);
+    if (type === 'money') return this.transformMoney(value);
+    if (type === 'date') return this.datePipe.transform(value, 'dd/MM/yyyy', 'UTC');
+    if (type === 'datetime') return this.datePipe.transform(value, 'dd/MM/yyyy hh:mm');
+    if (type === 'dateMonthYear') return this.datePipe.transform(value, 'MM/yyyy');
+
+    else return value;
+  })
+
+  handleTableSize = computed(() => {
+    const selectedItems = this.selectedItems();
+    const selectedItem = this.selectedItem();
+
+    if (selectedItems?.length == 0 && !selectedItem)
+      return 'col-12';
+    else return this.tableViewerSize();
+  })
+
+  isPopupButton = computed(() => (action: any) => {
+    return (action.items && action.items?.length > 0) || false;
+  })
+
+  hasActionsRow = computed(() => {
+    return this.actionsRow()?.length > 0;
+  })
+
+  showSelectedItem = computed(() => {
+    return this.selectedItems()?.length == 1 || this.selectedItem();
+  })
+
+  hasSelectedItems = computed(() => {
+    return this.selectedItems()?.length > 1;
+  })
+
+
+  returnColspan = computed(() => {
+    return this.columns().length + 1;
+  });
+
+  isEmptyTable = computed(() => {
+    return this.data()?.length == 0
+  });
+
+  constructor() {
+
+    this.breakpointObserver
+      .observe([Breakpoints.HandsetPortrait, '(max-width: 768px)'])
+      .subscribe(state => this.isMobile.set(state.matches));
+
+    effect(() => {
+      this.onSelectItems.emit(this.selectedItems());
+      this.onSearch.emit(this.searchValue());
+    });
+
+    effect(() => {
+        const dados = this.data();
+        const isSelectedPrimaryItem = this.isSelectedPrimaryItem();
+
+        if(dados && dados.length > 0 && isSelectedPrimaryItem) {
+          untracked(() => this.rowSelect(dados[0]));
+        }
+    });
+  }
+
+  toggleOverlayPanel(event: Event) {
+    event.stopPropagation();
+    this.op.toggle(event);
+
+    setTimeout(() => {
+      if(this.op.overlayVisible) {
+        this.createOverlay();
+      } else {
+        this.removeOverlay();
+      }
+    }, 0);
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClickOutside(event: MouseEvent) {
+    if (!this.op || !this.op.overlayVisible) {
+      return;
+    }
+
+    const targetElement = event.target as HTMLElement;
+    
+    const filterButton = this.elementRef.nativeElement.querySelector('[label="Filtrar"]');
+    if (filterButton && filterButton.contains(targetElement)) {
+      return;
+    }
+
+    if (targetElement.closest('.p-overlaypanel')) {
+      return;
+    }
+  }
+
+  public closeFilter() {
+    this.op?.hide();
+    this.removeOverlay();
+  }
+
+  public toggleFilter(event?: MouseEvent) {
+    if(event) {
+      event.stopPropagation();
+    }
+    this.op?.toggle(event);
+  }
+
+  private createOverlay() {
+    if(this.overlayElement) {
+      return;
+    }
+
+    this.overlayElement = this.renderer.createElement('div');
+    this.renderer.addClass(this.overlayElement, 'filter-overlay');
+
+    this.renderer.listen(this.overlayElement, 'click', () => {
+      this.closeFilter();
+    })
+
+    this.renderer.appendChild(document.body, this.overlayElement);
+  }
+
+  handlePageChange(event: TablePageEvent) {
+    this.first.set(event.first);
+    this.onPageChange.emit(event);
+  }
+
+  handleSort(event: any) {
+    const currentSortState = this.lastEmittedSort();
+
+    if (currentSortState && currentSortState.field === event.field && currentSortState.order === event.order) {
+      return;
+    }
+
+    this.lastEmittedSort.set({ field: event.field, order: event.order });
+
+    let ordenacao = `${event.field} ${event.order === 1 ? 'ASC' : 'DESC'} `;
+    let ordernacaoGroup = { column: event.field, direction: event.order === 1 ? 'ASC' : 'DESC' };
+    this.onSort.emit({ ordenacao: ordenacao, ordernacaoGroup: ordernacaoGroup });
+  }
+
+  rowSelect(rowData: any) {
+    if (this.selectableTable()) {
+      if (this.selectedItems().includes(rowData))
+        this.selectedItems.update((items: any[]) => items.filter(item => item !== rowData));
+      else this.selectedItems.update((items: any[]) => [...items, rowData]);
+
+      if (this.selectedItems()?.length === 1)
+        this.onClickRowItem.emit(this.selectedItems()[0]);
+      else this.onClickRowItem.emit(rowData);
+    } else {
+      this.selectedItem.set(rowData);
+      this.onClickRowItem.emit(rowData);
+    }
+
+  }
+
+  transformMoney(valor: number): string {
+    const formatter = new Intl.NumberFormat('pt-BR', {
+      style: 'currency',
+      currency: 'BRL',
+    });
+
+    return formatter.format(valor);
+  }
+
+  removeOverlay() {
+    if(this.overlayElement) {
+      this.renderer.removeChild(document.body, this.overlayElement);
+      this.overlayElement = null;
+    }
+  }
+ 
+  ngOnDestroy() {
+    this.removeOverlay();
+  }
+}

package/src/lib/components/kv-tag/kv-tag.component.html

@@ -0,0 +1,7 @@
+<div
+  class="kv-tag {{severity()}} {{!border() && 'no-border'}}"
+  [style.backgroundColor]="color() ? color() + '0D' : ''"
+  [style.color]="color()"
+>
+    <ng-content></ng-content>
+</div>