keevo-components 1.8.190 → 1.8.191

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

@@ -0,0 +1,610 @@
+<div *ngIf="!treeTableDraggable">
+  <p-treeTable
+    #tt
+    [value]="dataSource"
+    [columns]="config.columns"
+    [resizableColumns]="true"
+    [tableStyle]="{ 'min-width': '50rem' }"
+    [resizableColumns]="true"
+    [paginator]="paginator"
+    [rows]="rows"
+    [totalRecords]="totalRecords"
+    [rowsPerPageOptions]="[5, 10, 25, 50]"
+    [showFirstLastIcon]="tamanhoTela > 960 ? true : false"
+    [pageLinks]="tamanhoTela > 960 ? 2 : 1"
+    [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
+    [(selection)]="selectedItems"
+    [lazy]="config.lazy"
+    (onLazyLoad)="paginate($event)"
+    (onNodeSelect)="onNodeSelected($event)"
+    (onNodeUnselect)="onNodeUnselected($event)"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} de {totalRecords}"
+  >
+    <ng-template pTemplate="caption" *ngIf="config.enableCation">
+      <div
+        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0"
+        style="background-color: #eaeaea"
+      >
+        <div class="col-12 flex flex-column">
+          <div *ngIf="config.title" class="text-md font-bold my-3">
+            {{ config.title }}
+          </div>
+          <div *ngIf="config.subtitle" 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'
+          }}"
+        >
+          <span *ngIf="config.enableFilter" 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"
+            />
+          </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) {
+            <button
+              pButton
+              [icon]="getIcon(action.icon)"
+              *ngIf="
+                (selectedItems.length > 0 || action.showAcoesLote) &&
+                exibirCampo(action, this.action)
+              "
+              class="w-2rem h-2rem flex align-items-center justify-content-center border-none btn-table"
+              (click)="action?.command(); activeItemLote(selectedItems)"
+              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+              [tooltipPosition]="'bottom'"
+              [disabled]="getOrExecute(action.disabled, selectedItems)"
+            >
+              @if (!action.icon.includes('pi-')){
+              <span
+                class="material-symbols-outlined"
+                style="font-size: 25px; color: white"
+              >
+                {{ getOrExecute(action.icon, selectedItems) }}
+              </span>
+              }
+            </button>
+            }
+          </div>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        @for(col of columns; track $index){
+        <th
+          [ttSortableColumn]="col.field"
+          [ttSortableColumnDisabled]="col.sortable === false"
+          class="text-sm"
+          [style.width]="col.width"
+        >
+          <div>
+            <div [ngClass]="{ flex: $index == 0, 'gap-3': $index == 0 }">
+              <div *ngIf="$index == 0 && config.enableSelect">
+                <p-treeTableHeaderCheckbox
+                  (click)="activeItemLote(selectedItems)"
+                />
+              </div>
+
+              <div class="flex flex-row align-items-center  {{ align(col) }}">
+                <span>{{ col.header }}</span>
+
+                @if(col.sortable) {
+                <p-treeTableSortIcon [field]="col.field" />
+
+                }
+
+                <span
+                  *ngIf="col.headerTooltip"
+                  class="material-symbols-outlined flex align-items-center"
+                  [pTooltip]="col.headerTooltip"
+                  >info</span
+                >
+              </div>
+            </div>
+          </div>
+        </th>
+        @if (config.actions?.length ?? 0 > 0) {
+        <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>{{ col.header }}</span>
+
+            @if(col.sortable) {
+            <p-treeTableSortIcon [field]="col.field" />
+            }
+          </div>
+        </th>
+        } @if (config.actions?.length ?? 0 > 0) {
+        <th [style.width]="5"></th>
+        }
+      </tr>
+    </ng-template>
+
+    <ng-template
+      pTemplate="body"
+      let-rowNode
+      let-rowData="rowData"
+      let-columns="columns"
+    >
+      <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) }}">
+            <div
+              class="w-full-h-full flex align-items-center"
+              *ngIf="$index == 0"
+            >
+              <p-treeTableToggler class="hiddenVisible" [rowNode]="rowNode" />
+
+              <p-treeTableCheckbox
+                [disabled]="isDisabledCheckbox(rowData, rowNode)"
+                (click)="activeItemLote(selectedItems)"
+                [value]="rowNode"
+                *ngIf="config.enableSelect == true"
+              />
+            </div>
+
+            <div class="flex flex-row align-items-center">
+              <div
+                class="flex flex-row align-items-center justify-content-center gap-2"
+              >
+                @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>
+
+                }
+                <i
+                  *ngIf="col.boolean"
+                  class="pi {{
+                    rowData[col.field] ? 'pi-check text-green-300' : ''
+                  }}"
+                  style="font-size: 1.1rem"
+                ></i>
+
+                <div class="flex flex-column" *ngIf="!col.boolean">
+                  <span class="m-0">{{ rowData[col.field] }}</span>
+
+                  <p *ngIf="col.subtitle" class="m-0 text-xs font-semibold">
+                    {{ rowData[col.subtitle] }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <span *ngIf="col.template && validateShowTemplate(rowNode, col)">
+            <ng-container
+              *ngIf="getCustomTemplate(col.template.name)"
+              [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+              [ngTemplateOutletContext]="{ $implicit: rowData }"
+            >
+            </ng-container>
+          </span>
+        </td>
+        }
+
+        <td
+          style="border-left: none; text-align: end"
+          *ngIf="(config.actions?.length ?? 0 > 0) || config.actionsPai"
+        >
+          <div
+            *ngIf="
+              (config.actions?.length ?? 0 > 0) &&
+              validateActionPosition(rowNode)
+            "
+          >
+            <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>
+
+            @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) {
+            <button
+              pButton
+              [icon]="getIcon(actionPai.icon)"
+              [severity]="actionPai.severity ?? 'secondary'"
+              [style]="{ width: '2rem', height: '2rem' }"
+              (click)="activeItem(rowData); actionPai.command($event)"
+              class="p-0 flex justify-content-center border-none btn-table"
+            >
+              @if(!actionPai.icon.includes('pi-')) {
+              <span
+                class="material-icons text-xl"
+                style="font-size: 25px; color: white"
+                >{{ actionPai.icon }}</span
+              >
+              }
+            </button>
+            } }
+          </div>
+          }
+        </td>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="emptymessage">
+      <tr>
+        <td
+          [attr.colspan]="config.columns.length + 1"
+          style="text-align: center"
+        >
+          {{ textoEmptyMessage }}
+        </td>
+      </tr>
+    </ng-template>
+  </p-treeTable>
+</div>
+
+<div
+  *ngIf="treeTableDraggable"
+  cdkDropList
+  class="example-list"
+  (cdkDropListDropped)="drop($event)"
+>
+  <p-treeTable
+    #tt
+    [value]="dataSource"
+    [columns]="config.columns"
+    [resizableColumns]="true"
+    [tableStyle]="{ 'min-width': '50rem' }"
+    [resizableColumns]="true"
+    [paginator]="paginator"
+    [rows]="rows"
+    [pageLinks]="pageLinks"
+    [totalRecords]="totalRecords"
+    [rowsPerPageOptions]="[5, 10, 25, 50]"
+    [showFirstLastIcon]="tamanhoTela > 960 ? true : false"
+    [pageLinks]="tamanhoTela > 960 ? 2 : 1"
+    [styleClass]="gridLines ? 'p-treetable-gridlines' : ''"
+    [(selection)]="selectedItems"
+    [lazy]="config.lazy"
+    (onLazyLoad)="paginate($event)"
+    currentPageReportTemplate="{first} - {last} de {{ totalRecords }}"
+  >
+    <ng-template pTemplate="caption" *ngIf="config.enableCation">
+      <div
+        class="flex flex-row flex-wrap justify-content-between align-items-center grid formgrid p-fluid col-12 m-0"
+        style="background-color: #eaeaea"
+      >
+        <div class="col-12 flex flex-column">
+          <div *ngIf="config.title" class="text-md font-bold my-3">
+            {{ config.title }}
+          </div>
+          <div *ngIf="config.subtitle" 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'
+          }}"
+        >
+          <span *ngIf="config.enableFilter" 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"
+            />
+          </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) {
+
+            <button
+              pButton
+              [icon]="getIcon(action.icon)"
+              *ngIf="
+                (selectedItems.length > 0 || action.showAcoesLote) &&
+                exibirCampo(action, this.action)
+              "
+              class="w-2rem h-2rem flex align-items-center justify-content-center border-none btn-table"
+              (click)="action?.command(); activeItemLote(selectedItems)"
+              [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+              [tooltipPosition]="'bottom'"
+              [disabled]="getOrExecute(action.disabled, selectedItems)"
+            >
+              @if (!action.icon.includes('pi-')){
+              <span
+                class="material-symbols-outlined md-22"
+                style="font-size: 25px; color: white"
+              >
+                {{ getOrExecute(action.icon, selectedItems) }}
+              </span>
+              }
+            </button>
+            }
+          </div>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        @for(col of columns; track $index){
+        <th
+          [ttSortableColumn]="col.field"
+          [ttSortableColumnDisabled]="col.sortable === false"
+          class="text-sm"
+          [style.width]="col.width"
+        >
+          <div>
+            <div [ngClass]="{ flex: $index == 0, 'gap-3': $index == 0 }">
+              <div *ngIf="$index == 0 && config.enableSelect">
+                <p-treeTableHeaderCheckbox
+                  (click)="activeItemLote(selectedItems)"
+                />
+              </div>
+
+              <div class="flex flex-row align-items-center  {{ align(col) }}">
+                <span>{{ col.header }}</span>
+
+                @if(col.sortable) {
+                <p-treeTableSortIcon [field]="col.field" />
+
+                }
+
+                <span
+                  *ngIf="col.headerTooltip"
+                  class="material-symbols-outlined flex align-items-center"
+                  [pTooltip]="col.headerTooltip"
+                  >info</span
+                >
+              </div>
+            </div>
+          </div>
+        </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>{{ col.header }}</span>
+
+            @if(col.sortable) {
+            <p-treeTableSortIcon [field]="col.field" />
+
+            }
+          </div>
+        </th>
+        }
+        <th [style.width]="5"></th>
+      </tr>
+    </ng-template>
+
+    <ng-template
+      pTemplate="body"
+      let-rowNode
+      let-rowData="rowData"
+      let-columns="columns"
+    >
+      <tr
+        cdkDrag
+        [cdkDragData]="rowNode"
+        [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
+          "
+        >
+          <div class="flex flex-row  {{ align(col) }}">
+            <div
+              class="w-full-h-full flex align-items-center"
+              *ngIf="$index == 0"
+            >
+              <p-treeTableToggler class="hiddenVisible" [rowNode]="rowNode" />
+
+              <p-treeTableCheckbox
+                [disabled]="isDisabledCheckbox(rowData, rowNode)"
+                (click)="activeItemLote(selectedItems)"
+                [value]="rowNode"
+                *ngIf="config.enableSelect == true"
+              />
+            </div>
+
+            <div class="flex flex-row align-items-center">
+              <div
+                class="flex flex-row align-items-center justify-content-center gap-2"
+              >
+                @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>
+
+                }
+
+                <i
+                  *ngIf="col.boolean"
+                  class="pi {{
+                    rowData[col.field] ? 'pi-check text-green-300' : ''
+                  }}"
+                  style="font-size: 1.1rem"
+                ></i>
+
+                <div class="flex flex-column" *ngIf="!col.boolean">
+                  <span class="m-0">{{ rowData[col.field] }}</span>
+
+                  <p *ngIf="col.subtitle" class="m-0 text-xs font-semibold">
+                    {{ rowData[col.subtitle] }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <span *ngIf="col.template && validateShowTemplate(rowNode, col)">
+            <ng-container
+              *ngIf="getCustomTemplate(col.template.name)"
+              [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+              [ngTemplateOutletContext]="{ $implicit: rowData }"
+            >
+            </ng-container>
+          </span>
+        </td>
+        }
+
+        <td
+          style="border-left: none; text-align: end"
+          *ngIf="(config.actions?.length ?? 0 > 0) || config.actionsPai"
+          [style.borderRight]="rowNode.level === 0 ? 'none' : ''"
+          [style.borderLeft]="rowNode.level === 0 ? 'none' : ''"
+        >
+          <div
+            *ngIf="
+              (config.actions?.length ?? 0 > 0) &&
+              validateActionPosition(rowNode)
+            "
+          >
+            <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>
+
+            @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) {
+            <button
+              pButton
+              [icon]="getIcon(actionPai.icon)"
+              [severity]="actionPai.severity ?? 'secondary'"
+              [style]="{ width: '2rem', height: '2rem' }"
+              (click)="activeItem(rowData); actionPai.command($event)"
+              class="p-0 flex justify-content-center border-none btn-table"
+            >
+              @if(!actionPai.icon.includes('pi-')) {
+              <span class="material-icons text-xl" style="font-size: 25px">{{
+                actionPai.icon
+              }}</span>
+              }
+            </button>
+            } }
+          </div>
+          }
+        </td>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="emptymessage">
+      <tr>
+        <td
+          [attr.colspan]="config.columns.length + 1"
+          style="text-align: center"
+        >
+          {{ textoEmptyMessage }}
+        </td>
+      </tr>
+    </ng-template>
+  </p-treeTable>
+</div>

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

@@ -0,0 +1,77 @@
+::ng-deep .p-treetable .p-treetable-tbody > tr > td {
+  padding: 0.4rem 0.4rem;
+}
+
+::ng-deep .p-treetable .p-treetable-header {
+  padding: 0rem 0rem;
+}
+
+span {
+  font-size: 14px;
+}
+
+:host ::ng-deep .p-treetable table {
+  table-layout: auto !important;
+}
+
+.icon-more-horiz:hover,
+.icon-more-horiz:focus {
+  color: #5e5e5e;
+  transform: scale(1.2);
+  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;
+}
+
+.tag {
+  width: 5px;
+  height: 20px;
+  border-radius: 0.25rem;
+}
+
+.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.8rem;
+  height: 1rem;
+}

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