keevo-components 1.5.189 → 1.5.191

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

@@ -0,0 +1,649 @@
+<div>
+  <p-treeTable
+    #tt
+    *ngIf="config"
+    [value]="dataSource"
+    styleClass="p-datatable-sm"
+    [columns]="config.columns"
+    [(selection)]="selectedItems"
+    [scrollable]="true"
+    selectionMode="checkbox"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} de {totalRecords}"
+    [rowsPerPageOptions]="rowsPerPageOptions"
+    [showFirstLastIcon]="showFirstLastIcon"
+    [paginator]="paginator"
+    [rows]="rows"
+    [totalRecords]="tamanhoTotalTree"
+    [lazy]="config.lazy"
+    (onLazyLoad)="paginate($event)"
+    rowGroupMode="rowspan"
+    responsiveLayout="stack"
+  >
+    <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"
+      >
+        <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]="
+            tamanhoTela < 768
+              ? 'flex flex-row align-items-center col-10 md:col-6 lg:col-4 justify-content-center'
+              : 'flex flex-row align-items-center col-12 md:col-6 lg:col-4 justify-content-center input-search'
+          "
+        >
+          <span
+            *ngIf="config.enableFilter"
+            class="block mt-2 md:mt-0 p-input-icon-left text-align-center"
+          >
+            <i
+              class="material-symbols-outlined icon-search"
+              style="display: inline-block"
+            >
+              search
+            </i>
+
+            <input
+              pInputText
+              pAutoFocus
+              [autofocus]="true"
+              type="text"
+              (input)="onGlobalFilter(tt, $event)"
+              placeholder="Pesquisar..."
+              class="w-full mb-1"
+              style="height: 40px"
+            />
+          </span>
+
+          <div *ngIf="config.enableToggleNodes">
+            <button
+              (click)="toggleNodes()"
+              id="recolherExpandirBtn"
+              [pTooltip]="isExpanded ? 'Recolher Todos' : 'Expandir Todos'"
+              pButton
+              class="recolherExpandirBtn toggle p-button-raised p-button-text"
+            >
+              <span
+                class="pi"
+                [ngClass]="{
+                  'pi-chevron-down': isExpanded,
+                  ' pi-chevron-right': !isExpanded
+                }"
+              >
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <div class="flex flex-row col-1 justify-content-end">
+          <div *ngFor="let action of config.actionsLote" class="btns-options">
+            <button
+              id="actionLoteBtns"
+              pButton
+              *ngIf="
+                (selectedItems.length > 0 || action.showAcoesLote) &&
+                exibirCampo(action, this.action)
+              "
+              class="actionLoteBtns p-button-raised p-button-text"
+              (click)="action?.command(); activeItemLote(selectedItems)"
+              [pTooltip]="retornarCampo(action, selectedItems, 'tooltip')"
+              [tooltipPosition]="'bottom'"
+              [style.backgroundColor]="
+                retornarCampo(action, selectedItems, 'btnColor')
+              "
+              [disabled]="retornarCampo(action, selectedItems, 'disabled')"
+            >
+              <span
+                class="material-symbols-outlined md-22"
+                [style.color]="
+                  retornarCampo(action, selectedItems, 'iconBtnColor')
+                "
+              >
+                {{ retornarCampo(action, selectedItems, "icon") }}
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template pTemplate="header" let-columns>
+      <tr>
+        <th
+          *ngFor="let col of columns; index as i"
+          [ttSortableColumn]="col.field"
+          [ttSortableColumnDisabled]="col.sortable === false"
+          class="text-sm"
+          [style.width]="col.width"
+        >
+          <div>
+            <div [ngClass]="{ flex: i == 0, 'gap-3': i == 0 }">
+              <div *ngIf="i == 0 && config.enableSelect">
+                <p-treeTableHeaderCheckbox
+                  (click)="activeItemLote(selectedItems)"
+                ></p-treeTableHeaderCheckbox>
+              </div>
+
+              <div
+                [class]="
+                  centralizarColunas(col) && alignColunasHeader(col) == ''
+                    ? 'flex flex-row justify-content-center'
+                    : 'flex flex-row'
+                "
+                [style]="alignColunasHeader(col)"
+              >
+                <span>{{ col.header }}</span>
+                <p-sortIcon
+                  *ngIf="col.sortable === true"
+                  [field]="col.field"
+                  style="font-size: 10px"
+                ></p-sortIcon>
+
+                <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="body"
+      let-rowNode
+      let-rowData="rowData"
+      let-columns="columns"
+      let-rowgroup="rowgroup"
+      let-rowspan="rowspan"
+    >
+
+      <tr 
+        [ttRow]="rowNode"
+        *ngIf="rowNode.level == 0"
+        [style.height]="espacamentoPai"
+      ></tr>
+
+      <tr [ttRow]="rowNode" (dblclick)="doubleClick($event, rowData, rowNode)">
+        <ng-container *ngFor="let col of columns; index as i" >
+          <td
+            [style.width]="col.width"
+            [ngClass]="{ 'margem-filho': rowNode.level != 0 }"
+            *ngIf="rowgroup && !col.template"
+            [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
+            class="rowTable"
+            [style]="
+              applyStyle(rowData, col) +
+              centralizarColunas(col) +
+              alignColunas(col)
+            "
+          >
+            <div
+              class="w-full-h-full flex"  
+              [style]="centralizarColunas(col)"
+              [ngClass]="{ 'justify-content-between': i == columns.length - 1 }"
+            >
+              <div class="w-full-h-full flex align-items-center" *ngIf="i == 0">
+                <p-treeTableCheckbox
+                  [disabled]="isDisabledCheckbox(rowData, rowNode)"
+                  (click)="activeItemLote(selectedItems)"
+                  [value]="rowNode"
+                  *ngIf="config.enableSelect == true"
+                ></p-treeTableCheckbox>
+
+                <p-treeTableToggler
+                  [rowNode]="rowNode"
+                  *ngIf="!rightCollapse"
+                ></p-treeTableToggler>
+                <p-treeTableToggler
+                  class="hiddenVisible"
+                  [rowNode]="rowNode"
+                  *ngIf="rightCollapse"
+                ></p-treeTableToggler>
+              </div>
+
+              <span
+                *ngIf="!isBooleanField(rowData, col); else booleanField"
+                [class]="returnRowClass(rowData, col)"
+              >
+                <span
+                  *ngIf="
+                    !isChipField(col) && !col.iconField && !isImageField(col)
+                  "
+                >
+                  <i *ngIf="col.icon" [class]="col.icon + ' mr-2'"></i>
+                  {{ transformValue(rowData, col) }}
+                </span>
+
+                <div *ngIf="isChipField(col) && !col.iconField">
+                  <span
+                    [class]="returnClassChip(rowData, col)"
+                    [pTooltip]="returnTooltipIcon(rowData, col)"
+                    >{{ transformValue(rowData, col) }}</span
+                  >
+                </div>
+              </span>
+
+              <span *ngIf="isImageField(col)">
+                <span>
+                  <img class="image" [src]="loadImage(rowData, col)" />
+                </span>
+              </span>
+
+              <i
+                *ngIf="col.iconField"
+                [ngClass]="{
+                  'material-icons': col.indIconMaterial,
+                  'material-symbols-outlined mr-2': !col.indIconMaterial
+                }"
+                [pTooltip]="returnTooltipIcon(rowData, col)"
+              >
+                {{ returnClassIcon(rowData, col) }}
+              </i>
+
+              <ng-template #booleanField>
+                <i
+                  *ngIf="!col.iconField"
+                  [ngClass]="
+                    rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                  "
+                  ><span class="material-symbols-outlined">
+                    {{ rowData[col.field] ? "check" : "close" }}
+                  </span>
+                </i>
+              </ng-template>
+
+              <div
+                class="w-full-h-full flex"
+                *ngIf="
+                  i == columns.length - 1 &&
+                  config.actions &&
+                  config.actions.length > 0
+                "
+                [style]="
+                  applyStyle(rowData, { field: 'btns-options', header: '' })
+                "
+              >
+                <div
+                  class="flex flex-row justify-content-end w-full"
+                  *ngIf="acoesLinhaTabela"
+                >
+                  <div *ngFor="let action of config.actions">
+                    <button
+                      id="actionBtns"
+                      pButton
+                      *ngIf="exibirCampo(action, rowData)"
+                      class="actionBtns p-button-text p-button-raised"
+                      (click)="activeItem(rowData, rowNode); action?.command()"
+                      [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
+                      [tooltipPosition]="'bottom'"
+                      [disabled]="callDisabled(action, rowData)"
+                    >
+                      <span class="material-symbols-outlined md-19">
+                        {{ retornarCampo(action, rowData, "icon") }}</span
+                      >
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="flex flex-row justify-content-end w-full"
+                  *ngIf="!acoesLinhaTabela"
+                >
+                  <button
+                    id="moreVertBtn"
+                    pButton
+                    class="actionBtns p-button-text p-button-raised"
+                    (click)="menu.toggle($event); activeItem(rowData, rowNode)"
+                  >
+                    <span
+                      class="material-symbols-outlined"
+                      style="font-size: 20px"
+                    >
+                      more_horiz
+                    </span>
+                  </button>
+
+                  <div *ngFor="let action of config.actions">
+                    {{ criarMenusModal(rowData, rowNode) }}
+                  </div>
+
+                  <!-- <div *ngFor="let action of config.actions">
+                {{ criarMenusModal(rowData) }}
+              </div> -->
+
+                  <p-menu
+                    #menu
+                    [popup]="true"
+                    [model]="menuItems"
+                    appendTo="body"
+                  ></p-menu>
+                </div>
+              </div>
+            </div>
+          </td>
+
+          <td 
+            [style.width]="col.width"
+            [ngClass]="{
+              'margem-filho': rowNode.level != 0,
+              'justify-content-between': i == columns.length - 1
+            }"
+            *ngIf="!rowgroup && !col.grouped && !col.template"
+            [style]="
+              applyStyle(rowData, col) +
+              centralizarColunas(col) +
+              alignColunas(col)
+            "
+            class="rowTable"
+          >
+          <div
+              class="w-full-h-full flex justify-content-between"
+              [ngClass]="{ 'justify-content-between': i == columns.length - 1 }"
+            >
+              <!-- Toggle -->
+              <div class="w-full-h-full flex align-items-center d-toggle" *ngIf="i == 0">
+                <p-treeTableCheckbox
+                  [disabled]="isDisabledCheckbox(rowData, rowNode)"
+                  (click)="activeItemLote(selectedItems)"
+                  [value]="rowNode"
+                  *ngIf="config.enableSelect == true"
+                ></p-treeTableCheckbox>
+
+                <p-treeTableToggler
+                  [rowNode]="rowNode"
+                  *ngIf="!rightCollapse"
+                ></p-treeTableToggler>
+                <p-treeTableToggler
+                  class="hiddenVisible"
+                  [rowNode]="rowNode"
+                  *ngIf="rightCollapse"
+                ></p-treeTableToggler>
+              </div>
+
+              <!-- Texto -->
+              <div
+                class="w-full flex align-items-center"
+                [style]="centralizarColunas(col)"
+              >
+                <span
+                  *ngIf="!isBooleanField(rowData, col); else booleanField"
+                  [class]="returnRowClass(rowData, col)"
+                >
+                  <span
+                    *ngIf="
+                      !isChipField(col) && !col.iconField && !isImageField(col)
+                    "
+                  >
+                    <i *ngIf="col.icon" [class]="col.icon + ' mr-2'"></i>
+                    {{ transformValue(rowData, col) }}
+                  </span>
+
+                  <div *ngIf="isChipField(col) && !col.iconField">
+                    <span
+                      [class]="returnClassChip(rowData, col)"
+                      [pTooltip]="returnTooltipIcon(rowData, col)"
+                    >
+                      {{ transformValue(rowData, col) }}</span
+                    >
+                  </div>
+                </span>
+
+                <span *ngIf="isImageField(col)">
+                  <span>
+                    <img class="image" [src]="loadImage(rowData, col)" />
+                  </span>
+                </span>
+
+                <i
+                  *ngIf="col.iconField"
+                  [ngClass]="{
+                    'material-icons': col.indIconMaterial,
+                    'material-symbols-outlined mr-2': !col.indIconMaterial
+                  }"
+                  [pTooltip]="returnTooltipIcon(rowData, col)"
+                >
+                  {{ returnClassIcon(rowData, col) }}
+                </i>
+
+                <ng-template #booleanField>
+                  <i
+                    *ngIf="!col.iconField"
+                    [ngClass]="
+                      rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                    "
+                    ><span class="material-symbols-outlined">
+                      {{ rowData[col.field] ? "check" : "close" }}
+                    </span>
+                  </i>
+                </ng-template>
+              </div>
+
+              <!-- Botao de ação -->
+              <div
+                class="w-full-h-full flex"
+                *ngIf="
+                  i == columns.length - 1 &&
+                  config.actions &&
+                  config.actions.length > 0
+                "
+                [style]="
+                  applyStyle(rowData, { field: 'btns-options', header: '' })
+                "
+              >
+                <div
+                  class="flex flex-row justify-content-end w-full"
+                  *ngIf="acoesLinhaTabela"
+                >
+                  <div *ngFor="let action of config.actions">
+                    <button
+                      id="actionBtns"
+                      pButton
+                      *ngIf="exibirCampo(action, rowData)"
+                      class="actionBtns p-button-text p-button-raised"
+                      (click)="activeItem(rowData, rowNode); action?.command()"
+                      [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
+                      [tooltipPosition]="'bottom'"
+                      [disabled]="callDisabled(action, rowData)"
+                    >
+                      <span class="material-symbols-outlined md-19">
+                        {{ retornarCampo(action, rowData, "icon") }}</span
+                      >
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="flex flex-row justify-content-end w-full"
+                  *ngIf="!acoesLinhaTabela"
+                >
+                  <button
+                    id="moreVertBtn"
+                    pButton
+                    class="actionBtns p-button-text p-button-raised"
+                    (click)="menu.toggle($event); activeItem(rowData, rowNode)"
+                  >
+                    <span
+                      class="material-symbols-outlined"
+                      style="font-size: 20px"
+                    >
+                      more_horiz
+                    </span>
+                  </button>
+
+                  <div *ngFor="let action of config.actions">
+                    {{ criarMenusModal(rowData, rowNode) }}
+                  </div>
+
+                  <!-- <div *ngFor="let action of config.actions">
+                  {{ criarMenusModal(rowData) }}
+                </div> -->
+
+                  <p-menu
+                    #menu
+                    [popup]="true"
+                    [model]="menuItems"
+                    appendTo="body"
+                  ></p-menu>
+                </div>
+              </div>
+            </div>
+          </td>
+
+          <td
+            [style.width]="col.width"
+            [ngClass]="{
+              'margem-filho': rowNode.level != 0,
+              'justify-content-between': i == columns.length - 1
+            }"
+            *ngIf="col.template"
+            [style]="
+              applyStyle(rowData, col) +
+              centralizarColunas(col) +
+              alignColunas(col)
+            "
+            class="rowTable"
+          >
+            <div class="flex" [style]="centralizarColunas(col)">
+              <div class="w-full-h-full flex align-items-center" *ngIf="i == 0">
+                <p-treeTableCheckbox
+                  [disabled]="isDisabledCheckbox(rowData, rowNode)"
+                  (click)="activeItemLote(selectedItems)"
+                  [value]="rowNode"
+                  *ngIf="config.enableSelect == true"
+                ></p-treeTableCheckbox>
+
+                <p-treeTableToggler
+                  [rowNode]="rowNode"
+                  *ngIf="!rightCollapse"
+                ></p-treeTableToggler>
+                <p-treeTableToggler
+                  class="hiddenVisible"
+                  [rowNode]="rowNode"
+                  *ngIf="rightCollapse"
+                ></p-treeTableToggler>
+              </div>
+              <ng-container
+                *ngIf="getCustomTemplate(col.template.name)"
+                [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+                [ngTemplateOutletContext]="{ $implicit: rowData }"
+              >
+              </ng-container>
+
+              <div
+                class="w-full-h-full flex"
+                *ngIf="
+                  i == columns.length - 1 &&
+                  config.actions &&
+                  config.actions.length > 0
+                "
+                [style]="
+                  applyStyle(rowData, { field: 'btns-options', header: '' })
+                "
+              >
+                <div
+                  class="flex flex-row justify-content-end w-full"
+                  *ngIf="acoesLinhaTabela"
+                >
+                  <div *ngFor="let action of config.actions">
+                    <button
+                      id="actionBtns"
+                      pButton
+                      *ngIf="exibirCampo(action, rowData)"
+                      class="actionBtns p-button-text p-button-raised"
+                      (click)="activeItem(rowData, rowNode); action?.command()"
+                      [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
+                      [tooltipPosition]="'bottom'"
+                      [disabled]="callDisabled(action, rowData)"
+                    >
+                      <span class="material-symbols-outlined md-19">
+                        {{ retornarCampo(action, rowData, "icon") }}</span
+                      >
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="flex flex-row justify-content-end w-full"
+                  *ngIf="!acoesLinhaTabela"
+                >
+                  <button
+                    id="moreVertBtn"
+                    pButton
+                    class="actionBtns p-button-text p-button-raised"
+                    (click)="menu.toggle($event); activeItem(rowData, rowNode)"
+                  >
+                    <span
+                      class="material-symbols-outlined"
+                      style="font-size: 20px"
+                    >
+                      more_horiz
+                    </span>
+                  </button>
+
+                  <div *ngFor="let action of config.actions">
+                    {{ criarMenusModal(rowData, rowNode) }}
+                  </div>
+
+                  <!-- <div *ngFor="let action of config.actions">
+                  {{ criarMenusModal(rowData) }}
+                </div> -->
+
+                  <p-menu
+                    #menu
+                    [popup]="true"
+                    [model]="menuItems"
+                    appendTo="body"
+                  ></p-menu>
+                </div>
+              </div>
+            </div>
+          </td>
+          
+        </ng-container>
+      </tr>
+
+    </ng-template>
+
+    <!-- :: Hotfix do bug da versão 15 do primeng, ao retirar esse bloco de codigo na versão 15 do primeng os icones de prev e next do paginator irão sumir ( resolvido na versão 16.0)  :: -->
+
+    <ng-template pTemplate="paginatorfirstpagelinkicon">
+      <span class="pi pi-angle-double-left"></span>
+    </ng-template>
+    <ng-template pTemplate="paginatorpreviouspagelinkicon">
+      <span class="pi pi-angle-left"></span>
+    </ng-template>
+    <ng-template pTemplate="paginatornextpagelinkicon">
+      <span class="pi pi-angle-right"></span>
+    </ng-template>
+    <ng-template pTemplate="paginatorlastpagelinkicon">
+      <span class="pi pi-angle-double-right"></span>
+    </ng-template>
+
+    <ng-template pTemplate="emptymessage" let-columns>
+      <tr>
+        <td [attr.colspan]="columns.length + 2" style="text-align: center">
+          Nenhum registro encontrado
+        </td>
+      </tr>
+    </ng-template>
+  </p-treeTable>
+</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"
+/>