keevo-components 2.0.106 → 2.0.107

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

@@ -0,0 +1,492 @@
+<div class="kv-treetable-container" #kvTreeTable>
+  <p-treeTable
+    #tt
+    cdkDropList
+    class="example-list"
+    (cdkDropListDropped)="drop($event)"
+    [value]="dataSource()"
+    [columns]="config.columns"
+    [resizableColumns]="true"
+    [tableStyle]="{ 'min-width': '50rem' }"
+    [resizableColumns]="true"
+    [paginator]="paginator"
+    [rows]="rows"
+    [totalRecords]="totalRecords"
+    [rowsPerPageOptions]="[5, 10, 15, 25, 50]"
+    [showFirstLastIcon]="tamanhoTela() > 960 ? true : false"
+    [pageLinks]="tamanhoTela() > 960 ? 2 : 1"
+    [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
+    [(selection)]="selectedItems"
+    [selectionKeys]="selectionKeys()"
+    (selectionKeysChange)="selectionKeys.set($event)"
+    [lazy]="config.lazy"
+    (onLazyLoad)="paginate($event)"
+    (onNodeSelect)="onNodeSelected($event)"
+    (onNodeUnselect)="onNodeUnselected($event)"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} de {totalRecords}"
+    [scrollHeight]="scrollHeight"
+  >
+    @if(config.enableCation) {
+    <ng-template pTemplate="caption">
+      <div
+        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0 p-1"
+        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 col-10 p-0 md:col-6 lg:col-4 justify-content-center {{
+            tamanhoTela() < 768 ? '' : 'input-search'
+          }}"
+        >
+          @if(config.enableFilter) {
+
+          <span 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-2rem"
+              #inputBusca
+            />
+          </span>
+          }
+        </div>
+
+        <div class="flex flex-row col-1 justify-content-end p-0">
+          <div class="flex flex-row gap-2 btns-options">
+            @for (action of config.actionsLote; track $index) {
+            @if((selectedItems.length > 0 || action.showAcoesLote) &&
+            exibirCampo()(action, this.action)) {
+            <kv-button
+              (onClick)="action?.command(); activeItemLote(selectedItems)"
+              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+              [tooltipPosition]="'bottom'"
+              [size]="'small'"
+              [disabled]="getOrExecute(action.disabled, selectedItems) || false"
+              [icon]="getOrExecute(action.icon, selectedItems)"
+              [severity]="action.severity || 'tertiary'"
+            />
+            } }
+          </div>
+        </div>
+      </div>
+    </ng-template>
+    } @if(showHeader){
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        @for(col of columns; track $index){
+        <th
+          [ttSortableColumn]="col.field"
+          [ttSortableColumnDisabled]="col.sortable === false"
+          [style.width]="col.width"
+        >
+          <div>
+            <div [ngClass]="{ flex: $index == 0, 'gap-3': $index == 0 }">
+              @if($index == 0 && config.enableSelect) {
+              <p-treeTableHeaderCheckbox
+                (click)="activeItemLote(selectedItems)"
+              />
+              }
+
+              <div class="flex flex-row align-items-center  {{ align(col) }}">
+                <span class="text-xs">{{ col.header }}</span>
+
+                @if(col.sortable) {
+                <p-treeTableSortIcon [field]="col.field" class="pb-1" />
+                } @if(col.headerTooltip) {
+                <span
+                  class="material-symbols-outlined flex align-items-center"
+                  [pTooltip]="col.headerTooltip"
+                >
+                  info
+                </span>
+                }
+              </div>
+            </div>
+          </div>
+        </th>
+        @if (config.actions?.length ?? 0 > 0 || config.actionsPai) {
+        <th [style.width]="5"></th>
+        } }
+      </tr>
+    </ng-template>
+
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        @for (col of columns; track $index) {
+        <th
+          [ttSortableColumn]="col.field"
+          [ttSortableColumnDisabled]="col.sortable === false"
+          [style.width]="col.width"
+        >
+          <div class="flex flex-row align-items-center {{ align(col) }}">
+            <span class="text-xs">{{ col.header }}</span>
+
+            @if(col.sortable) {
+            <p-treeTableSortIcon [field]="col.field" class="pb-1" />
+            }
+          </div>
+        </th>
+        } @if (config.actions?.length ?? 0 > 0 || config.actionsPai) {
+        <th [style.width]="5"></th>
+        }
+      </tr>
+    </ng-template>
+    }
+
+    <ng-template
+      pTemplate="body"
+      let-rowNode
+      let-rowData="rowData"
+      let-columns="columns"
+    >
+      @if(isLoadingSkeleton()) { @for(skeletonRow of
+      dataSource(); track $index) {
+      <tr>
+        @for(col of columns; track $index){
+        <td>
+          <div
+            class="flex flex-row align-items-center justify-content-center w-full"
+          >
+            @if($index == 0) {
+            <p-treeTableToggler [rowNode]="rowNode" />
+            }
+            <div class="flex flex-column w-full">
+              <p-skeleton height="1rem" />
+            </div>
+          </div>
+        </td>
+        }
+        <td>
+          <div class="flex justify-content-center">
+            <p-skeleton [style]="{ height: '1.5rem', width: '1.5rem' }" />
+          </div>
+        </td>
+      </tr>
+      } } @else { @if(treeTableDraggable) {
+      <tr
+        cdkDrag
+        cdkDragLockAxis="y"
+        [cdkDragData]="rowNode"
+        [ttRow]="rowNode"
+        (dblclick)="doubleClick($event, rowData)"
+        [ngClass]="{ capitalize: tableCaptalized }"
+      >
+        @for(col of columns; track $index){
+        <td
+          class="draggable-cell"
+          [style.position]="
+            !disableRowNodeSticky && rowNode.level !== 0 ? 'sticky' : null
+          "
+        >
+          <!-- [style.left.px]="
+                   childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null
+                   " -->
+
+          <div class="flex flex-row  {{ align(col) }}">
+            @if($index == 0) {
+            <div class="w-full-h-full flex align-items-center">
+              <span
+                class="material-symbols-outlined drag-icon"
+                style="
+                  cursor: grab;
+                  font-size: 25px;
+                  color: #6b7280;
+                  opacity: 0.9;
+                "
+                cdkDragHandle
+              >
+                drag_indicator
+              </span>
+              <p-treeTableToggler class="hiddenVisible" [rowNode]="rowNode" />
+
+              @if(config.enableSelect) {
+              <p-treeTableCheckbox
+                [disabled]="isDisabledCheckbox()(rowData, rowNode)"
+                (click)="activeItemLote(selectedItems)"
+                [value]="rowNode"
+                [ngStyle]="{
+                  display: isSelectEnabled()(rowData, rowNode)
+                    ? 'block'
+                    : 'none',
+                  'margin-left': config.visibleCheckboxFunction
+                    ? '-34px'
+                    : '0px'
+                }"
+              />
+              }
+            </div>
+            }
+
+            <div class="flex flex-row align-items-center w-full">
+              @if (col.template && validateShowTemplate()(rowNode, col)) {
+              <span class="w-full">
+                @if(getCustomTemplate(col.template.name)) {
+                <ng-container
+                  [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+                  [ngTemplateOutletContext]="{ $implicit: rowData }"
+                >
+                </ng-container>
+                }
+              </span>
+              } @else {
+              <div
+                class="flex flex-row align-items-center {{
+                  (col.boolean || col.centralize) && 'justify-content-center'
+                }} gap-2 w-full"
+              >
+                @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.boolean) {
+                <i
+                  class="pi {{
+                    rowData[col.field] ? 'pi-check text-green-300' : ''
+                  }}"
+                  style="font-size: 1rem; font-weight: 700"
+                ></i>
+
+                } @else {
+                <div class="flex flex-column">
+                  <span class="m-0 text-xs">{{ rowData[col.field] }}</span>
+
+                  @if(col.subtitle) {
+
+                  <p class="m-0 text-xs font-semibold">
+                    {{ rowData[col.subtitle] }}
+                  </p>
+                  }
+                </div>
+                }
+              </div>
+              }
+            </div>
+          </div>
+        </td>
+        } @if((config.actions?.length ?? 0 > 0) || config.actionsPai) {
+        <td
+          style="border-left: none; text-align: center; width: 0"
+          [style.borderRight]="rowNode.level === 0 ? 'none' : ''"
+          [style.borderLeft]="rowNode.level === 0 ? 'none' : ''"
+        >
+          @if((config.actions?.length ?? 0 > 0) &&
+          validateActionPosition()(rowNode)) {
+          <div class="flex align-items-center justify-content-center">
+            <span
+              class="material-symbols-outlined cursor-pointer icon-more-horiz"
+              style="font-size: 20px; padding: 0.1rem"
+              (click)="menu.toggle($event); activeItem(rowData)"
+            >
+              more_horiz
+            </span>
+
+            @for(action of config.actions; track $index) {
+            {{ criarMenusModal()(rowData) }}
+            }
+
+            <p-menu
+              #menu
+              [popup]="true"
+              [model]="menuItems"
+              appendTo="body"
+            ></p-menu>
+          </div>
+          } @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){
+          <div class="flex justify-content-end align-items-center">
+            @for (actionPai of config.actionsPai; track $index) {
+            @if(getOrExecute(actionPai.visible, rowData) ?? true) {
+            <kv-button
+              (onClick)="activeItem(rowData); actionPai.command($event)"
+              [type]="'text'"
+              [icon]="actionPai.icon"
+              [severity]="actionPai.severity || 'tertiary'"
+              [disabled]="getOrExecute(actionPai.disabled, rowData) || false"
+              [pTooltip]="getOrExecute(actionPai.tooltip, rowData)"
+              [tooltipPosition]="'left'"
+            />
+
+            } }
+          </div>
+          }
+        </td>
+        }
+      </tr>
+      } @else {
+      <tr
+        [ttRow]="rowNode"
+        (dblclick)="doubleClick($event, rowData)"
+        [ngClass]="{ capitalize: tableCaptalized }"
+      >
+        @for(col of columns; track $index){
+        <td
+          [style.position]="rowNode.level !== 0 ? 'sticky' : null"
+          [style.left.px]="
+            childrenRecoil && rowNode.level !== 0 ? rowNode.level * 30 : null
+          "
+          [style.borderRight]="rowNode.level === 0 ? 'none' : ''"
+          [style.borderLeft]="
+            rowNode.level === 0 && col.field != config.columns[0].field
+              ? 'none'
+              : ''
+          "
+        >
+          <div class="flex flex-row {{ align(col) }}">
+            @if($index == 0) {
+            <div class="w-full-h-full flex align-items-center">
+              <p-treeTableToggler class="hiddenVisible" [rowNode]="rowNode" />
+
+              @if(config.enableSelect) {
+              <p-treeTableCheckbox
+                [disabled]="isDisabledCheckbox()(rowData, rowNode)"
+                (click)="activeItemLote(selectedItems)"
+                [value]="rowNode"
+                [ngStyle]="{
+                  display: isSelectEnabled()(rowData, rowNode)
+                    ? 'block'
+                    : 'none',
+                  'margin-left': config.visibleCheckboxFunction
+                    ? '-34px'
+                    : '0px'
+                }"
+              />
+              }
+            </div>
+            }
+
+            <div class="flex flex-row align-items-center w-full">
+              @if (col.template && validateShowTemplate()(rowNode, col)) {
+              <span class="w-full">
+                @if(getCustomTemplate(col.template.name)) {
+
+                <ng-container
+                  [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+                  [ngTemplateOutletContext]="{ $implicit: rowData }"
+                >
+                </ng-container>
+                }
+              </span>
+              } @else {
+              <div
+                class="flex flex-row align-items-center {{
+                  (col.boolean || col.centralize) && 'justify-content-center'
+                }} gap-2 w-full"
+              >
+                @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.boolean) {
+
+                <i
+                  class="pi {{
+                    rowData[col.field] ? 'pi-check text-green-300' : ''
+                  }}"
+                  style="font-size: 1rem; font-weight: 700"
+                ></i>
+                } @else {
+                <div class="flex flex-column">
+                  <span class="m-0 text-xs">{{ rowData[col.field] }}</span>
+
+                  @if(col.subtitle) {
+
+                  <p class="m-0 text-xs font-semibold">
+                    {{ rowData[col.subtitle] }}
+                  </p>
+                  }
+                </div>
+                }
+              </div>
+              }
+            </div>
+          </div>
+        </td>
+        } @if((config.actions?.length ?? 0 > 0) || config.actionsPai) {
+        <td style="border-left: none; text-align: center; width: 0">
+          @if((config.actions?.length ?? 0 > 0) &&
+          validateActionPosition()(rowNode)) {
+          <div>
+            <span
+              class="material-symbols-outlined cursor-pointer icon-more-horiz"
+              style="font-size: 20px; padding: 0.1rem"
+              (click)="menu.toggle($event); activeItem(rowData)"
+            >
+              more_horiz
+            </span>
+
+            @for(action of config.actions; track $index) {
+            {{ criarMenusModal()(rowData) }}
+            }
+
+            <p-menu
+              #menu
+              [popup]="true"
+              [model]="menuItems"
+              appendTo="body"
+            ></p-menu>
+          </div>
+          } @if(config.actionsPai?.length ?? 0 > 0 && rowNode.level == 0){
+          <div class="flex justify-content-end">
+            @for (actionPai of config.actionsPai; track $index) { @if
+            (getOrExecute(actionPai.visible, rowData) ?? true) {
+            <kv-button
+              (onClick)="activeItem(rowData); actionPai.command($event)"
+              [type]="'text'"
+              [icon]="actionPai.icon"
+              [severity]="actionPai.severity || 'tertiary'"
+              [disabled]="getOrExecute(actionPai.disabled, rowData) || false"
+              [pTooltip]="getOrExecute(actionPai.tooltip, rowData)"
+              [tooltipPosition]="'left'"
+            />
+            } }
+          </div>
+          }
+        </td>
+        }
+      </tr>
+      } }
+    </ng-template>
+
+    <ng-template pTemplate="emptymessage">
+      <tr>
+        <td
+          [attr.colspan]="config.columns.length + 1"
+          style="text-align: center"
+          class="text-xs"
+        >
+          {{ textoEmptyMessage }}
+        </td>
+      </tr>
+    </ng-template>
+  </p-treeTable>
+</div>

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

@@ -0,0 +1,187 @@
+::ng-deep .p-treetable .p-treetable-tbody > tr > td {
+  padding: 0.2rem 0.2rem;
+}
+
+::ng-deep .p-treetable .p-treetable-header {
+  padding: 0rem 0rem;
+}
+
+span {
+  font-size: 14px;
+}
+
+:host ::ng-deep .p-treetable table {
+  table-layout: auto !important;
+}
+
+::ng-deep .p-checkbox .p-checkbox-box {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+::ng-deep .p-checkbox {
+  display: flex;
+  align-items: center;
+}
+
+::ng-deep {
+  .p-treetable .p-paginator {
+    scale: 0.75;
+  }
+}
+
+.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%;
+}
+
+::ng-deep .p-treetable .p-treetable-thead > tr > th {
+  background-color: #eaeaea;
+  padding: 0.3rem 0.3rem;
+}
+
+:host
+  ::ng-deep
+  .treetabledraggable
+  .p-treetable
+  .p-treetable-tbody
+  > tr
+  > td
+  .p-treetable-toggler {
+  width: 1rem;
+  height: 1rem;
+}
+
+.tag {
+  width: 5px;
+  height: 20px;
+  border-radius: 0.25rem;
+}
+
+/* Ocultar o ícone por padrão */
+:host ::ng-deep .draggable-cell .drag-icon {
+  visibility: hidden;
+}
+
+/* Mostrar o ícone quando o mouse estiver sobre o <td> */
+:host ::ng-deep .draggable-cell:hover .drag-icon {
+  visibility: visible;
+}
+
+// .btn-table {
+//   background-color: #29b92d;
+//   padding: 12px 12px;
+
+//   &:hover {
+//     background-color: #249a29;
+//   }
+
+//   &:active {
+//     background-color: #1c801f;
+//   }
+
+//   &:disabled {
+//     background-color: #29b92d;
+//   }
+// }
+
+.cdk-drag-preview {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 10px !important;
+}
+
+.cdk-drop-list-dragging {
+  cursor: grabbing;
+}
+
+/* Animate items as they're being sorted. */
+:host ::ng-deep .cdk-drop-list-dragging .cdk-drag {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* Animate an item that has been dropped. */
+:host ::ng-deep .cdk-drag-animating {
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+::ng-deep svg.p-icon {
+  width: 0.65rem;
+  height: 0.65rem;
+}
+
+::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;
+  }
+}
+
+:host {
+  height: 100%;
+}
+
+::ng-deep .kv-treetable-container,
+::ng-deep p-treeTable {
+  height: 100%;
+}
+
+::ng-deep p-treeTable .p-treetable {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+::ng-deep table {
+  height: auto !important;
+}
+
+::ng-deep p-treeTable .p-treetable .p-treetable-wrapper,
+::ng-deep p-treeTable {
+  height: 100%;
+}
+
+::ng-deep .p-treetable .p-treetable-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);
+  }
+}

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();
+  });
+});