keevo-components 1.8.262 → 1.8.264

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

@@ -0,0 +1,504 @@
+<div>
+  @if (filtrosAvancados) {
+  <p-panel
+    header="Filtros avançados"
+    [toggleable]="true"
+    [collapsed]="true"
+    (collapsedChange)="collapsed = !collapsed"
+    [style]="{ 'margin-bottom': '2px' }"
+  >
+    <ng-template pTemplate="headericons">
+      @if (!collapsed) {
+      <i class="pi pi-filter"></i>
+      }
+      <!-- Ícone quando o painel está aberto -->
+      @if (collapsed) {
+      <i class="pi pi-minus"></i>
+      }
+      <!-- Ícone quando o painel está fechado -->
+    </ng-template>
+    <ng-content></ng-content>
+  </p-panel>
+  } @if (config) {
+  <p-table
+    #dt
+    styleClass="p-datatable-sm"
+    [value]="dataSource"
+    [(selection)]="selectedItems"
+    [rowSelectable]="isRowSelectable"
+    [columns]="config.columns"
+    [globalFilterFields]="globalFilterFields"
+    [rows]="rows"
+    [paginator]="paginator"
+    [rowsPerPageOptions]="rowsPerPageOptions"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} de {totalRecords}"
+    [rowHover]="true"
+    [totalRecords]="totalRecords"
+    [lazy]="config.lazy"
+    (onLazyLoad)="paginate($event)"
+    (selectionChange)="selectionChange($event)"
+    (onSort)="onSort($event)"
+    rowGroupMode="rowspan"
+    [groupRowsBy]="config.fieldGroup"
+    [showFirstLastIcon]="tamanhoTela > 960 ? true : false"
+    [pageLinks]="tamanhoTela > 960 ? 2 : 1"
+    [responsive]="true"
+    [responsiveLayout]="responsiveLayout ? 'stack' : ''"
+    [scrollable]="isTableScrollable"
+    [scrollHeight]="scrollHeight"
+    [rowTrackBy]="rowTrackBy"
+  >
+    @if (config.enableCation) {
+    <ng-template pTemplate="caption">
+      <div
+        class="flex flex-row flex-wrap justify-content-between grid formgrid p-fluid col-12 p-0 m-0"
+        [style.background-color]="'#EAEAEA'"
+      >
+        <div class="col-12 flex flex-column">
+          @if (config.title) {
+          <div class="text-md font-bold my-3">
+            {{ config.title }}
+          </div>
+          } @if (config.subtitle) {
+          <div class="text-sm mb-4 font-medium">
+            {{ config.subtitle }}
+          </div>
+          }
+        </div>
+
+        <div
+          class="flex flex-row align-items-center md:col-6 lg:col-4 {{
+            tamanhoTela < 768 ? 'col-10' : 'col-12'
+          }} mt-1 mb-2 gap-1"
+        >
+          @if (config.enableFilter) {
+          <span class="p-input-icon-left">
+            <i class="pi pi-search"></i>
+
+            <input
+              pInputText
+              pAutoFocus
+              [autofocus]="true"
+              type="text"
+              (input)="onGlobalFilter(dt, $event)"
+              placeholder="Pesquisar..."
+              class="h-2rem"
+              autocomplete="off"
+              #inputField
+            />
+          </span>
+          } @if(filterColumnsBtn) {
+          <div #botaoFiltro>
+            <kv-button
+              id="botaoFiltro"
+              [icon]="'align_vertical_top'"
+              (onClick)="abrirMenuFiltro($event)"
+              severity="tertiary"
+              pTooltip="Ocultar/Exibir colunas"
+            >
+            </kv-button>
+          </div>
+
+          <div
+            #menuFiltroDiv
+            id="menuFiltroDiv"
+            [style.visibility]="'hidden'"
+            class="absolute z-4 bg-gray-200 menu-columns-filtro"
+          >
+            <p-card styleClass="p-2">
+              <div
+                class="flex flex-column text-medium w-15rem p-1"
+                *ngFor="let col of columns"
+              >
+                {{ checkMenuFiltro(col) }}
+                <p-checkbox
+                  #filterColumns
+                  [label]="col.header"
+                  [binary]="true"
+                  class="checkbox-container"
+                  (onChange)="dinamicColumnSet($event, col)"
+                  [(ngModel)]="col.checked"
+                  *ngIf="!dinamicDisableColumn(col)"
+                ></p-checkbox>
+              </div>
+            </p-card>
+          </div>
+          }
+        </div>
+
+        <div class="flex flex-row col-2 justify-content-end gap-2">
+          @for (action of config.actionsLote; track i; let i = $index) {
+          <div class="flex align-items-center justify-content-center">
+            @if ((selectedItems.length > 0 || action.showAcoesLote) &&
+            (getOrExecute(action.visible, selectedItems) ?? true)) {
+            <kv-button
+              (onClick)="action?.command(); activeItemLote(selectedItems)"
+              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+              [tooltipPosition]="
+                (getOrExecute(action.tooltip, selectedItems)?.length ??
+                  0 > 7) &&
+                config.actionsLote &&
+                i == config.actionsLote.length - 1
+                  ? 'left'
+                  : 'bottom'
+              "
+              [disabled]="getOrExecute(action.disabled, selectedItems) || false"
+              [icon]="getOrExecute(action.icon, selectedItems)"
+              [severity]="action.severity || 'tertiary'"
+            />
+            }
+          </div>
+          }
+        </div>
+      </div>
+    </ng-template>
+    }
+
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        @if (config.enableSelect) {
+        <th>
+          <p-tableHeaderCheckbox
+            (click)="activeItemLote(selectedItems)"
+            [disabled]="disabledHeaderCheckbox"
+          ></p-tableHeaderCheckbox>
+        </th>
+        } @for (col of columns; track $index) {
+        <th
+          [pSortableColumn]="col.field"
+          [pSortableColumnDisabled]="col.sortable === false"
+          [style.width]="col.width"
+          class="text-sm"
+        >
+          <div
+            class="flex flex-row align-items-center {{
+              col.centralize && 'justify-content-center'
+            }}"
+          >
+            <span>{{ col.header }}</span>
+            @if (col.sortable) {
+            <p-sortIcon
+              [field]="col.field"
+              style="font-size: 10px"
+            ></p-sortIcon>
+            } @if (col.headerTooltip) {
+            <span
+              class="material-symbols-outlined flex align-items-center"
+              [pTooltip]="col.headerTooltip"
+              >info</span
+            >
+            }
+          </div>
+        </th>
+        } @if (config.actions && config.actions.length > 0) {
+        <th></th>
+        }
+      </tr>
+    </ng-template>
+
+    <ng-template
+      pTemplate="body"
+      let-rowData
+      let-columns="columns"
+      let-rowgroup="rowgroup"
+      let-rowspan="rowspan"
+      let-rowIndex="rowIndex"
+    >
+      <tr
+        (dblclick)="doubleClick($event, rowData)"
+        [ngClass]="{ capitalize: tableCaptalized, 'last': rowIndex === dataSource.length - 1  }"
+        class="tr-td {{isDisabledRow(rowData) ? 'disabled-row' : ''}}"
+      >
+        @if (config.enableSelect) { 
+        <td style="width: 8px !important">
+          <p-tableCheckbox
+            [value]="rowData"
+            [disabled]="isDisabledCheckbox(rowData)"
+            (click)="activeItemLote(selectedItems)"
+          ></p-tableCheckbox>
+        </td>
+        } @for (col of columns; track $index) {
+        <ng-container>
+          @if (rowgroup && !col.template) {
+          <td
+            [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
+            [pTooltip]="returnTooltipRow(rowData, col)"
+          >
+            <span class="p-column-title">{{ col.header }}:</span>
+
+            <span
+              *ngIf="!isBooleanField(rowData, col); else booleanField"
+              [class]="returnRowClass(rowData, col)"
+            >
+              @if (!isChipField(col) && !col.iconField && !isImageField(col)) {
+              <span
+                class="flex flex-row gap-2 align-items-center {{
+                  col.centralize && 'justify-content-center'
+                }}"
+                [pTooltip]="
+                  col.tooltip && col.tooltip(rowData, col, rowData[col.field])
+                "
+              >
+                @if(col.tagColor) {
+                <div
+                  class="tag"
+                  [pTooltip]="
+                    col.tooltipTag &&
+                    col.tooltipTag(rowData, col, rowData[col.field])
+                  "
+                  [style.background-color]="
+                    col.tagColor(rowData, col, rowData[col.field])
+                  "
+                ></div>
+
+                } @if (col.icon) {
+                <i [class]="col.icon + ' mr-2'"></i>
+                }
+                {{ transformValue(rowData, col) }}
+              </span>
+              } @if (isChipField(col) && !col.iconField) {
+              <div>
+                <span
+                  [class]="returnClassChip(rowData, col)"
+                  [pTooltip]="returnTooltipIcon(rowData, col)"
+                  >{{ transformValue(rowData, col) }}</span
+                >
+              </div>
+              }
+            </span>
+
+            @if (isImageField(col)) {
+            <span>
+              <span>
+                <img class="image" [src]="loadImage(rowData, col)" />
+              </span>
+            </span>
+            } @if (col.iconField) {
+            <i
+              [ngClass]="{
+                'material-icons': col.indIconMaterial,
+                'material-symbols-outlined mr-2': !col.indIconMaterial
+              }"
+              [pTooltip]="returnTooltipIcon(rowData, col)"
+            >
+              {{ returnClassIcon(rowData, col) }}
+            </i>
+            }
+
+            <ng-template #booleanField>
+              @if (!col.iconField && !isSwitchField(col)) {
+              <div
+                class="flex flex-row gap-2 align-items-center {{
+                  col.centralize && 'justify-content-center'
+                }}"
+                [pTooltip]="
+                  col.tooltip && col.tooltip(rowData, col, rowData[col.field])
+                "
+              >
+                <i
+                  [ngClass]="
+                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                  "
+                  ><span class="material-symbols-outlined">
+                    {{ rowData[col.field] ? "check" : "close" }}
+                  </span>
+                </i>
+              </div>
+
+              } @if (isSwitchField(col)) {
+              <span
+                [class]="
+                  returnRowClass(rowData, col) +
+                  ' flex flex-row align-items-center justify-content-center'
+                "
+              >
+                <kv-switch
+                  (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                  [disabled]="col?.onlyReadField ?? true"
+                  [switchValue]="transformValue(rowData, col)"
+                >
+                </kv-switch>
+              </span>
+              }
+            </ng-template>
+          </td>
+          } @if (!rowgroup && !col.grouped && !col.template) {
+          <td class="rowTable" [pTooltip]="returnTooltipRow(rowData, col)">
+            <span class="p-column-title">{{ col.header }}:</span>
+
+            <span
+              *ngIf="!isBooleanField(rowData, col); else booleanField"
+              [class]="
+                returnRowClass(rowData, col) +
+                ' flex flex-row gap-2 align-items-center ' +
+                (col.centralize && 'justify-content-center')
+              "
+              [pTooltip]="
+                col.tooltip && col.tooltip(rowData, col, rowData[col.field])
+              "
+            >
+              @if(col.tagColor) {
+              <div
+                class="tag"
+                [pTooltip]="
+                  col.tooltipTag &&
+                  col.tooltipTag(rowData, col, rowData[col.field])
+                "
+                [style.background-color]="
+                  col.tagColor(rowData, col, rowData[col.field])
+                "
+              ></div>
+
+              } @if (!isChipField(col) && !col.iconField && !isImageField(col))
+              {
+              <span>
+                @if (col.icon) {
+                <i [class]="col.icon + ' mr-2'"></i>
+                }
+                {{ transformValue(rowData, col) }}
+              </span>
+              } @if (isChipField(col) && !col.iconField) {
+              <div>
+                <span
+                  [class]="returnClassChip(rowData, col)"
+                  [pTooltip]="returnTooltipIcon(rowData, col)"
+                >
+                  {{ transformValue(rowData, col) }}</span
+                >
+              </div>
+              }
+            </span>
+
+            @if (isImageField(col)) {
+            <span>
+              <span>
+                <img class="image" [src]="loadImage(rowData, col)" />
+              </span>
+            </span>
+            } @if (col.iconField) {
+            <i
+              [ngClass]="{
+                'material-icons': col.indIconMaterial,
+                'material-symbols-outlined mr-2': !col.indIconMaterial
+              }"
+              [pTooltip]="returnTooltipIcon(rowData, col)"
+            >
+              {{ returnClassIcon(rowData, col) }}
+            </i>
+            }
+
+            <ng-template #booleanField>
+              @if (!col.iconField && !isSwitchField(col)) {
+              <div
+                class="flex flex-row gap-2 align-items-center {{
+                  col.centralize && 'justify-content-center'
+                }}"
+                [pTooltip]="
+                  col.tooltip && col.tooltip(rowData, col, rowData[col.field])
+                "
+              >
+                <i
+                  [ngClass]="
+                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                  "
+                  ><span class="material-symbols-outlined">
+                    {{ rowData[col.field] ? "check" : "close" }}
+                  </span>
+                </i>
+              </div>
+              } @if (isSwitchField(col)) {
+              <span
+                [class]="
+                  returnRowClass(rowData, col) +
+                  ' flex flex-row align-items-center justify-content-center'
+                "
+              >
+                <kv-switch
+                  (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                  [disabled]="col?.onlyReadField ?? true"
+                  [switchValue]="transformValue(rowData, col)"
+                >
+                </kv-switch>
+              </span>
+              }
+            </ng-template>
+          </td>
+          } @if (col.template) {
+          <td class="rowTable">
+            <span class="p-column-title">{{ col.header }}:</span>
+            @if (getCustomTemplate(col.template.name)) {
+
+            <div
+              class="flex flex-row gap-2 align-items-center {{
+                col.centralize && ' justify-content-center'
+              }}"
+              [pTooltip]="
+                col.tooltip && col.tooltip(rowData, col, rowData[col.field])
+              "
+            >
+              @if(col.tagColor) {
+              <div
+                class="tag"
+                [pTooltip]="col.tooltipTag && col.tooltipTag(rowData, col)"
+                [style.background-color]="col.tagColor(rowData, col)"
+              ></div>
+              }
+
+              <div class="w-full">
+                <ng-container
+                  [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+                  [ngTemplateOutletContext]="{ $implicit: rowData }"
+                />
+              </div>
+            </div>
+            }
+          </td>
+          }
+        </ng-container>
+        } @if (config.actions && config.actions.length > 0) {
+        <td>
+          <div class="flex flex-row justify-content-end w-full">
+            <span
+              class="material-symbols-outlined cursor-pointer icon-more-horiz p-1"
+              style="font-size: 25px"
+              (click)="menu.toggle($event); activeItem(rowData)"
+            >
+              more_horiz
+            </span>
+
+            <p-tieredMenu
+              #menu
+              [popup]="true"
+              [model]="tableActions[rowIndex - actionsOffset]"
+              appendTo="body"
+            ></p-tieredMenu>
+          </div>
+        </td>
+        }
+      </tr>
+    </ng-template>
+
+    <ng-template pTemplate="emptymessage" let-columns>
+      <tr>
+        <td
+          [attr.colspan]="columns.length + 2"
+          style="text-align: center; border-radius: 10px !important"
+        >
+          <p class="font-medium m-0">Nenhum registro encontrado</p>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+  }
+</div>
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>
+
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+/>

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

@@ -0,0 +1,130 @@
+::ng-deep .p-datatable>.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);
+  }
+}
+
+.tag {
+  width: 5px;
+  height: 20px;
+  border-radius: 0.25rem;
+}
+
+::ng-deep .p-panel .p-panel-header {
+  border: none !important;
+}
+
+:host ::ng-deep .p-datatable-header {
+  // background-color: #f2f2f2;
+  background-color: #eaeaea !important;
+  padding: 0 !important;
+  border-radius: 5px !important;
+}
+
+::ng-deep .p-panel.p-panel-toggleable .p-panel-header {
+  background-color: #eaeaea;
+}
+
+::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  background-color: #eaeaea;
+}
+
+.icon-more-horiz {
+  font-weight: 700;
+}
+
+.icon-more-horiz:hover,
+.icon-more-horiz:focus {
+  color: #5e5e5e;
+  transition: color 0.3s, transform 0.3s;
+  background-color: #eaeaea;
+  border-radius: 50%;
+}
+
+.tr-td {
+  &:hover {
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+    background-color: white;
+    transition: color 0.3s, transform 0.3s;
+    transform: scale(1);
+    &.last{
+      box-shadow: -1px -1px 9px -3px rgba(0,0,0,0.75);
+      -webkit-box-shadow: -1px -1px 9px -3px rgba(0,0,0,0.75);
+      -moz-box-shadow: -1px -1px 9px -3px rgba(0,0,0,0.75);
+    }
+  }
+  overflow-wrap: anywhere;
+  
+}
+
+
+
+.disabled-row {
+  pointer-events: none;
+  opacity: 0.6;
+  background-color: #dddddd8e;
+}
+
+::ng-deep .p-tooltip {
+  pointer-events: auto;
+}
+
+.btn-table {
+  background-color: #29b92d;
+  padding: 12px 12px;
+
+  &:hover {
+    background-color: #249a29;
+  }
+
+  &:active {
+    background-color: #1c801f;
+  }
+
+  &:disabled {
+    background-color: #29b92d;
+  }
+}
+
+::ng-deep svg.p-icon {
+  width: 0.7rem;
+  height: 1rem;
+}
+
+::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
+  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-table/kv-table.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 { KvTableComponent } from './kv-table.component';
+
+describe('TableComponent', () => {
+  let component: KvTableComponent;
+  let fixture: ComponentFixture<KvTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KvTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KvTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});