keevo-components 2.0.179 → 2.0.180

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

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

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

@@ -0,0 +1,673 @@
+<div class="kv-table-container">
+  @if (config) {
+  <p-table
+    #dt
+    #table
+    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"
+    [first]="first()"
+    (onLazyLoad)="paginate($event)"
+    (selectionChange)="selectionChange($event)"
+    (onSort)="onSort($event)"
+    (onPage)="onPage($event)"
+    rowGroupMode="rowspan"
+    [groupRowsBy]="config.fieldGroup"
+    [showFirstLastIcon]="widthPage() > 960 ? true : false"
+    [pageLinks]="widthPage() > 960 ? 2 : 1"
+    [responsive]="true"
+    [responsiveLayout]="responsiveLayout ? 'stack' : ''"
+    [scrollable]="isTableScrollable"
+    [scrollHeight]="scrollHeight"
+    [rowTrackBy]="rowTrackBy"
+
+    cdkDropList
+    [cdkDropListData]="dragDropData()"
+    (cdkDropListDropped)="drop($event)"
+    cdkDropListOrientation="vertical"
+  >
+    @if (config.enableCation) {
+    <ng-template pTemplate="caption">
+      <div
+        class="flex flex-row flex-wrap justify-content-between grid formgrid p-fluid col-12 m-0 mb-2"
+        [style.padding.rem]="0.1"
+      >
+        <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 {{
+            widthPage() < 768 ? 'col-10' : 'col-12'
+          }}  gap-1 p-0"
+        >
+          @if (config.enableFilter) {
+          <input
+            pInputText
+            pAutoFocus
+            [autofocus]="widthPage() > 800"
+            type="text"
+            (input)="onGlobalFilter(dt, $event)"
+            [placeholder]="searchPlaceholder"
+            autocomplete="off"
+            #inputField
+            class="text-sm col-6"
+          />
+          } @if(filterColumnsBtn) {
+          <div #botaoFiltro>
+            <kv-button
+              id="botaoFiltro"
+              [icon]="'align_vertical_top'"
+              (onClick)="abrirMenuFiltro($event)"
+              severity="tertiary"
+              pTooltip="Ocultar/Exibir colunas"
+              size="small"
+            >
+            </kv-button>
+          </div>
+
+          <div
+            #menuFiltroDiv
+            id="menuFiltroDiv"
+            [style.visibility]="'hidden'"
+            class="absolute z-4 bg-gray-200 menu-columns-filtro"
+          >
+            <p-card styleClass="p-1">
+              <div
+                class="flex flex-column text-medium w-15rem p-1"
+                *ngFor="let col of columnsFilter()"
+              >
+                {{ 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>
+          } @if(filterButton()) {
+          <p-button
+            styleClass="kv-button small tertiary text-xs font-medium"
+            label="Filtrar"
+            icon="pi pi-filter"
+            [badge]="filterButtonBadge()"
+            badgeClass="text-gray-800"
+            class="text-xs"
+            (onClick)="op.toggle($event)"
+          ></p-button>
+          }
+
+          <p-overlayPanel #op>
+            <ng-content select="[filtro]"> </ng-content>
+          </p-overlayPanel>
+        </div>
+
+        <div class="flex flex-row col-2 justify-content-end gap-2 p-0">
+          @for (action of config.actionsLote; track i; let i = $index) {
+          <div class="flex align-items-center justify-content-center">
+            @if ((((selectedItems && selectedItems.length > 0) || action.showAcoesLote)) &&
+            (getOrExecute(action.visible, selectedItems) ?? true)) {
+            <kv-button
+              (onClick)="action?.command(); activeItemLote(selectedItems)"
+              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+              [tooltipPosition]="'left'"
+              [disabled]="getOrExecute(action.disabled, selectedItems) || false"
+              [icon]="getOrExecute(action.icon, selectedItems)"
+              [severity]="action.severity || 'tertiary'"
+              size="small"
+              [label]="getOrExecute(action.label, selectedItems) || ''"
+              [items]="action.items || []"
+              [popup]="(action.items && action.items.length > 0) || false"
+            />
+            }
+          </div>
+          }
+        </div>
+      </div>
+    </ng-template>
+    }
+
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        @if (enableDragDrop) {
+        <th style="width: 40px; text-align: center;" class="drag-handle-header">
+        </th>
+        }
+        @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"
+        >
+          <div
+            class="flex flex-row align-items-center {{
+              col?.centralize && 'justify-content-center'
+            }}"
+          >
+            <span class="text-xs font-semibold">{{ col.header }}</span>
+            @if (col.sortable) {
+            <p-sortIcon [field]="col.field" class="pb-1"></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
+        cdkDrag
+        cdkDragLockAxis="y"
+        (cdkDragStarted)="onDragStarted($event)"
+        (cdkDragEnded)="onDragEnded()"
+        [cdkDragDisabled]="!enableDragDrop || dragDropDisabled(rowData)"
+        [cdkDragData]="selectedItems"
+
+        (dblclick)="doubleClick($event, rowData)"
+        [ngClass]="{
+          capitalize: tableCaptalized,
+          last: rowIndex === dataSource.length - 1
+        }"
+        class="tr-td {{ isDisabledRow(rowData) ? 'disabled-row' : '' }}"
+      >
+
+        @if (enableDragDrop) {
+        <td cdkDragHandle>
+          <span class="material-symbols-outlined text-sm">
+            drag_indicator
+          </span>
+        </td>
+        }
+
+          @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)"
+              class="{{
+                col.styleClass
+                  ? col.styleClass(rowData, col, rowData[col.field])
+                  : ''
+              }}"
+            >
+              <span
+                *ngIf="!isBooleanField(rowData, col); else booleanField"
+                [class]="returnRowClass(rowData, col)"
+              >
+                @if (!isChipField(col) && !col.iconField && !isImageField(col) &&
+                !isEmptyDataSource()) {
+                <span
+                  class="flex flex-row gap-2 align-items-center {{
+                    col?.centralize && 'justify-content-center'
+                  }} text-xs {{ ellipsisText() && 'ellipsis-text' }}"
+                  [pTooltip]="
+                    col.tooltip && col.tooltip(rowData, col, rowData[col.field])
+                  "
+                  [tooltipPosition]="'bottom'"
+                  [style.max-width]="
+                    ellipsisText() && returnMaxWidth()(col.width)
+                  "
+                >
+                  @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)"
+                    class="text-xs"
+                    >{{ transformValue(rowData, col) }}</span
+                  >
+                </div>
+                } @if(isEmptyDataSource() && this.isLoadingSkeleton()) {
+                <div class="w-full">
+                  @if(!isSwitchField(col)) {
+
+                  <div
+                    class="w-full flex {{
+                      col.centralize && 'justify-content-center'
+                    }}"
+                  >
+                    <div [style.width]="widthRandom()(col, rowIndex) + '%'">
+                      <p-skeleton styleClass="w-full"></p-skeleton>
+                    </div>
+                  </div>
+
+                  } @else {
+                  <div class="flex flex-row justify-content-center">
+                    <div
+                      [style]="{
+                        height: '16.8px',
+                        width: '28.8px',
+                        'border-radius': '30px'
+                      }"
+                    >
+                      <p-skeleton styleClass="w-full"></p-skeleton>
+                    </div>
+                  </div>
+                  }
+                </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])
+                  "
+                  [tooltipPosition]="'bottom'"
+                >
+                  <i
+                    [ngClass]="
+                      rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                    "
+                    ><span
+                      class="material-symbols-outlined text-lg font-semibold"
+                    >
+                      {{ 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'
+                  "
+                  style="height: 25px"
+                >
+                  @if(col.switchDisable){
+                  <kv-switch
+                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                    [disabled]="col.switchDisable(rowData, col)"
+                    [switchValue]="transformValue(rowData, col)"
+                  >
+                  </kv-switch>
+                  } @else {
+                  <kv-switch
+                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                    [disabled]="col?.onlyReadField ?? true"
+                    [switchValue]="transformValue(rowData, col)"
+                  >
+                  </kv-switch>
+                  }
+                </span>
+                } @if(isEmptyDataSource() && this.isLoadingSkeleton()) {
+                <div class="w-full">
+                  @if(!isSwitchField(col)) {
+                  <div
+                    class="w-full flex {{
+                      col.centralize && 'justify-content-center'
+                    }}"
+                  >
+                    <div [style.width]="widthRandom()(col, rowIndex) + '%'">
+                      <p-skeleton styleClass="w-full"></p-skeleton>
+                    </div>
+                  </div>
+
+                  } @else {
+                  <div class="flex flex-row justify-content-center">
+                    <div
+                      [style]="{
+                        height: '16.8px',
+                        width: '28.8px',
+                        'border-radius': '30px'
+                      }"
+                    >
+                      <p-skeleton styleClass="w-full"></p-skeleton>
+                    </div>
+                  </div>
+                  }
+                </div>
+                }
+              </ng-template>
+            </td>
+            } @if (!rowgroup && !col.grouped && !col.template) {
+            <td
+              #tableCell
+              class="rowTable {{
+                col.styleClass
+                  ? col.styleClass(rowData, col, rowData[col.field])
+                  : ''
+              }} "
+              [pTooltip]="returnTooltipRow(rowData, col)"
+            >
+              @if(!isEmptyDataSource()) {
+
+              <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])
+                "
+                [tooltipPosition]="'bottom'"
+                [style.max-width]="ellipsisText() && returnMaxWidth()(col.width)"
+              >
+                @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 class="text-xs {{ ellipsisText() && 'ellipsis-text' }}">
+                  @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)"
+                    class="text-xs"
+                  >
+                    {{ 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])
+                  "
+                  [tooltipPosition]="'bottom'"
+                >
+                  <i
+                    [ngClass]="
+                      rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                    "
+                    ><span
+                      class="material-symbols-outlined text-lg font-semibold"
+                    >
+                      {{ 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'
+                  "
+                  style="height: 25px"
+                >
+                  @if(col.switchDisable){
+                  <kv-switch
+                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                    [disabled]="col.switchDisable(rowData, col)"
+                    [switchValue]="transformValue(rowData, col)"
+                  >
+                  </kv-switch>
+                  } @else {
+                  <kv-switch
+                    (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                    [disabled]="col?.onlyReadField ?? true"
+                    [switchValue]="transformValue(rowData, col)"
+                  >
+                  </kv-switch>
+                  }
+                </span>
+                }
+              </ng-template>
+
+              @if(isEmptyDataSource() && this.isLoadingSkeleton()) {
+              <div class="w-full">
+                @if(!isSwitchField(col)) {
+                <div
+                  class="w-full flex {{
+                    col.centralize && 'justify-content-center'
+                  }}"
+                >
+                  <div [style.width]="widthRandom()(col, rowIndex) + '%'">
+                    <p-skeleton styleClass="w-full"></p-skeleton>
+                  </div>
+                </div>
+
+                } @else {
+                <div class="flex flex-row justify-content-center">
+                  <div
+                    [style]="{
+                      height: '16.8px',
+                      width: '28.8px',
+                      'border-radius': '30px'
+                    }"
+                  >
+                    <p-skeleton styleClass="w-full"></p-skeleton>
+                  </div>
+                </div>
+                }
+              </div>
+              }
+            </td>
+            } @if (col.template) {
+            <td
+              class="rowTable {{
+                col.styleClass
+                  ? col.styleClass(rowData, col, rowData[col.field])
+                  : ''
+              }} "
+            >
+              @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])
+                "
+                [tooltipPosition]="'bottom'"
+              >
+                @if(col.tagColor) {
+                <div
+                  class="tag"
+                  [pTooltip]="col.tooltipTag && col.tooltipTag(rowData, col)"
+                  [style.background-color]="col.tagColor(rowData, col)"
+                ></div>
+                } @if(!isEmptyDataSource()) {
+
+                <div class="w-full">
+                  <ng-container
+                    [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+                    [ngTemplateOutletContext]="{ $implicit: rowData }"
+                  />
+                </div>
+                }
+              </div>
+
+              @if(isEmptyDataSource() && this.isLoadingSkeleton()) {
+              <p-skeleton
+                [width]="widthRandom()(col, rowIndex) + '%'"
+              ></p-skeleton>
+              } }
+            </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"
+                (click)="menu.toggle($event); activeItem(rowData)"
+              >
+                <!-- more_vert -->
+                more_horiz
+              </span>
+
+              <p-tieredMenu
+                #menu
+                [popup]="true"
+                [model]="currentPageActions()[rowIndex]"
+                appendTo="body"
+              >
+                <ng-template let-item pTemplate="item">
+                  <div
+                    [pTooltip]="item.tooltip"
+                    tooltipPosition="left"
+                    class="cursor-pointer"
+                  >
+                    <span class="text-xs">
+                      {{ item.label }}
+                    </span>
+                  </div>
+                </ng-template>
+              </p-tieredMenu>
+              <!-- <span pTooltip="{{ tableActions[rowIndex - actionsOffset][0]?.tooltip }}" tooltipPosition="top">a</span> -->
+            </div>
+          </td>
+          }
+        </tr>
+    </ng-template>
+
+    <ng-template pTemplate="emptymessage" let-columns>
+      <tr>
+        <td
+          [attr.colspan]="columns.length + (enableDragDrop ? 1 : 0) + (config.enableSelect ? 1 : 0) + (config.actions && config.actions.length > 0 ? 1 : 0)"
+          style="text-align: center; border-radius: 10px !important"
+        >
+          <p class="font-medium m-0 text-xs">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"
+/>