keevo-components 2.0.105 → 2.0.107

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

@@ -0,0 +1,634 @@
+<div>
+  @if (filtrosAvancados) {
+  <p-panel
+    header="Filtros avançados"
+    [toggleable]="true"
+    [collapsed]="true"
+    (collapsedChange)="collapsedAll = !collapsedAll"
+    [style]="{ 'margin-bottom': '2px' }"
+  >
+    <ng-template pTemplate="headericons">
+      @if (!collapsedAll) {
+      <i class="pi pi-filter"></i>
+      }
+      <!-- Ícone quando o painel está aberto -->
+      @if (collapsedAll) {
+      <i class="pi pi-minus"></i>
+      }
+      <!-- Ícone quando o painel está fechado -->
+    </ng-template>
+    <ng-content></ng-content>
+  </p-panel>
+  } @if (config) {
+  <p-table
+    #dt
+    styleClass="p-datatable-sm"
+    [value]="dataSource"
+    [(selection)]="selectedItems"
+    [rowSelectable]="isRowSelectable"
+    rowGroupMode="subheader"
+    [groupRowsBy]="config.fieldGroup"
+    [columns]="config.columns"
+    [lazy]="config.lazy"
+    (onLazyLoad)="paginate($event)"
+    (selectionChange)="selectionChange($event)"
+    (onSort)="onSort($event)"
+    [sortField]="config.fieldGroup"
+    sortMode="single"
+    [dataKey]="config.fieldGroup"
+    [expandedRowKeys]="expandedRows"
+    [paginator]="paginator"
+    [rows]="rows"
+    [rowsPerPageOptions]="rowsPerPageOptions"
+    [totalRecords]="totalRecords"
+    [globalFilterFields]="globalFilterFields"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} de {totalRecords}"
+    [rowHover]="true"
+    [pageLinks]="pageLinksOptions"
+    [responsive]="true"
+    [responsiveLayout]="responsiveLayout ? 'stack' : ''"
+    [scrollable]="isTableScrollable"
+    [scrollHeight]="scrollHeight"
+    [rowTrackBy]="rowTrackBy"
+    [showFirstLastIcon]="showFirstLastIcon"
+    [rowExpandMode]="rowExpandMode"
+  >
+    @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 p-0 m-0"
+        [style.background-color]="'#EAEAEA'"
+      >
+        <div class="col-12 flex flex-column">
+          @if (config.title) {
+          <div class="text-md font-bold my-3">
+            {{ config.title }}
+          </div>
+          } @if (config.subtitle) {
+          <div class="text-sm mb-4 font-medium">
+            {{ config.subtitle }}
+          </div>
+          }
+        </div>
+
+        <div
+          class="flex flex-row align-items-center md:col-6 lg:col-4 {{
+            tamanhoTela < 768 ? 'col-10' : 'col-12'
+          }} mt-1 mb-2 "
+        >
+          @if (config.enableFilter) {
+          <span class="p-input-icon-left">
+            <i class="pi pi-search"></i>
+
+            <input
+              pInputText
+              pAutoFocus
+              [autofocus]="true"
+              type="text"
+              (input)="onGlobalFilter(dt, $event)"
+              placeholder="Pesquisar..."
+              class="h-2rem"
+            />
+          </span>
+          }
+
+          <!-- <div
+            #menuFiltroDiv
+            id = "menuFiltroDiv"
+            [style.visibility]="'hidden'"
+            class="absolute z-4 bg-gray-200"
+            (click)="onClickEvent($event)"
+          > -->
+
+          <div
+            #menuFiltroDiv
+            id="menuFiltroDiv"
+            [style.visibility]="'hidden'"
+            class="absolute z-4 bg-gray-200 menu-columns-filtro"
+          >
+            <p-card>
+              @for (col of columns; track col) {
+              <div class="flex flex-column text-medium w-15rem">
+                {{ checkMenuFiltro(col) }}
+                @if (!dinamicDisableColumn(col)) {
+                <p-checkbox
+                  #filterColumns
+                  [label]="col.header"
+                  [binary]="true"
+                  class="checkbox-container"
+                  (onChange)="dinamicColumnSet($event, col)"
+                  [(ngModel)]="col.checked"
+                ></p-checkbox>
+                }
+              </div>
+              }
+            </p-card>
+          </div>
+        </div>
+
+        <div class="flex flex-row col-1 justify-content-end p-0">
+          <div class="flex flex-row gap-2 btns-options mr-2">
+          @if(showButtonCollapsed){
+            <kv-button
+              [icon]="iconCollapsed"
+              (onClick)="executeCollapsed()"
+              [severity]="(config.actionsLote)&&(config.actionsLote.length>0) ? 'tertiary' : 'primary'"
+              [pTooltip]="collapsedAll ? 'Recolher tudo' : 'Expandir tudo'"
+            />
+          }
+          @for (action of config.actionsLote; track i; let i = $index) {
+          
+            
+            @if ((selectedItems.length > 0 || action.showAcoesLote) &&
+            (getOrExecute(action.visible, selectedItems) ?? true)) {
+
+              <kv-button
+                (onClick)="action?.command(); activeItemLote(selectedItems)"
+                [pTooltip]="getOrExecute(action.tooltip, selectedItems)"
+                [tooltipPosition]="
+                (getOrExecute(action.tooltip, selectedItems)?.length ??
+                  0 > 7) &&
+                config.actionsLote &&
+                i == config.actionsLote.length - 1
+                  ? 'left'
+                  : 'bottom'
+                "
+                [disabled]="getOrExecute(action.disabled, selectedItems)?true:false"
+                [icon]="getOrExecute(action.icon, selectedItems)"
+                [severity]="action.severity ? action.severity : 'primary'"
+              />
+          }
+        }
+      </div>
+        </div>
+      </div>
+    </ng-template>
+    } 
+    @if (config.enableSelect || showTopHeader ){
+      <ng-template pTemplate="header">
+        <tr>
+        @if(config.enableSelect){
+          <th [style.width]="showTopHeader?'25px':'100%'"  [attr.colspan]="showTopHeader?'1':'12'" >
+            <div class="w-full">
+              <input
+                type="checkbox"
+                [checked]="isAllSelected()"
+                [indeterminate]="isAllIndeterminate()"
+                (click)="selectAll($event)"
+              />
+            </div>
+          </th>
+        }
+        @if(showTopHeader){
+          @if (isTableRowExpanded) {
+            <th
+              [style.width]="3"
+              class="text-sm fixed-header" 
+            ></th>
+          }
+          @for (col of columns; track $index) {
+            <th
+              [pSortableColumn]="col.field"
+              [pSortableColumnDisabled]="col.sortable === false"
+              [style.width]="col.width"
+              class="text-sm fixed-header"
+            >
+              <div
+                [class]="
+                  centralizarColunas(col) && alignColunasHeader(col) == ''
+                    ? 'flex flex-row justify-content-center'
+                    : 'flex flex-row'
+                "
+                [style]="alignColunasHeader(col)"
+              >
+                <span [ngClass]="{ 'text-xs font-medium': isTableRowExpanded }">{{ col.header }}</span>
+                @if (col.sortable) {
+                <p-sortIcon
+                  [field]="'data.' + col.field"
+                  style="font-size: 10px"
+                ></p-sortIcon>
+                } 
+                @if (col.headerTooltip) {
+                <span
+                  class="material-symbols-outlined flex align-items-center"
+                  [pTooltip]="col.headerTooltip"
+                  >info</span
+                >
+                }
+              </div>
+            </th>
+          }
+          @if (config.actions && config.actions.length > 0) {
+            <th [style.width]="'40px'" ></th>
+          }
+        }
+        </tr>
+      </ng-template>
+    }
+
+    <ng-template
+      pTemplate="groupheader"
+      let-group
+      let-rowIndex="rowIndex"
+      let-expanded="expanded"
+    >
+     @if (!isTableRowExpanded) {
+      <tr>
+        <td colspan="12" class="groupheader">
+          <div class="flex flex-row align-items-center w-full">
+            <button
+              type="button"
+              pButton
+              pRipple
+              [pRowToggler]="group"
+              class="p-button-text p-button-rounded p-button-plain mr-2"
+              [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
+            ></button>
+            @if (config.fieldGroupColorFunction){
+            <div
+              class="tag"
+              [style.background-color]="config.fieldGroupColorFunction(group)"
+            ></div>
+            }
+            <span class="font-bold ml-2">{{
+              group[config.fieldGroup || 0]
+            }}</span>
+          </div>
+        </td>
+      </tr>
+     } @else {
+      <tr>
+          <td>
+            @if(isVisibleExpandTolggle(group)){
+              <button
+                type="button"
+                pButton
+                pRipple
+                [pRowToggler]="group"
+                (click)="scrollExpandedContent()"
+                class="p-button-text p-button-rounded p-button-plain icone"
+                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
+              >
+              </button> 
+              
+             }
+            </td>
+
+            @for (col of columns; track $index) {
+              <ng-container>
+                @if (!col.template) {
+                <td
+                  class="rowTable"
+                  [style]="
+                    applyStyle(group, col) +
+                    centralizarColunas(col) +
+                    alignColunas(col)
+                  "
+                  [pTooltip]="returnTooltipRow(group, col)"
+                >
+                  
+                  <span
+                    *ngIf="!isBooleanField(group, col); else booleanField"
+                    [class]="returnRowClass(group, col)"
+                  >
+                    @if (!isChipField(col) && !col.iconField && !isImageField(col)) {
+                    
+                    <span class="text-xs" >
+                      @if (col.icon) {
+                      <i [class]="col.icon + ' mr-2'"></i>
+                      }
+                      {{ transformValue(group, col) }}
+                    </span>
+                    } @if (isChipField(col) && !col.iconField) {
+                    <div>
+                      <span
+                        [class]="returnClassChip(group, col)"
+                        [pTooltip]="returnTooltipIcon(group, col)"
+                        >{{ transformValue(group, col) }}</span
+                      >
+                    </div>
+                    }
+                  </span>
+  
+                  @if (isImageField(col)) {
+                  <span>
+                    <span>
+                      <img class="image" [src]="loadImage(group, col)" />
+                    </span>
+                  </span>
+                  } @if (col.iconField) {
+                  <i
+                    [ngClass]="{
+                      'material-icons': col.indIconMaterial,
+                      'material-symbols-outlined mr-2': !col.indIconMaterial
+                    }"
+                    [pTooltip]="returnTooltipIcon(group, col)"
+                  >
+                    {{ returnClassIcon(group, col) }}
+                  </i>
+                  }
+        
+                  <ng-template #booleanField>
+                    @if (!col.iconField && !isSwitchField(col)) {
+                    <i
+                      [ngClass]="group[col.field] ? 'text-green-500' : 'text-red-500'"
+                      ><span class="material-symbols-outlined">
+                        {{ group[col.field] ? "check" : "close" }}
+                      </span>
+                    </i>
+                    } @if (isSwitchField(col)) {
+                    <span [class]="returnRowClass(group, col)">
+                      <kv-switch
+                        (onSwitchChange)="onSwitchChange($event, group, col)"
+                        [disabled]="col?.onlyReadField ?? true"
+                        [switchValue]="transformValue(group, col)"
+                      >
+                      </kv-switch>
+                    </span>
+                    }
+                  </ng-template>
+                </td>
+                } 
+                @if (col.template) {
+                <td
+                  [style]="
+                    applyStyle(group, col) +
+                    centralizarColunas(col) +
+                    alignColunas(col)
+                  "
+                  class="rowTable"
+                >
+                  <span class="p-column-title">{{ col.header }}:</span>
+                  @if (getCustomTemplate(col.template.name)) {
+                  <ng-container
+                    [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+                    [ngTemplateOutletContext]="{ $implicit: group }"
+                  />
+                  }
+                </td>
+                }
+              </ng-container>
+            }
+      </tr>
+    }
+
+
+      @if(expanded && !showTopHeader){
+      <tr style="height: 40px">
+        @if (config.enableSelect) {
+        <th class="flex align-items-left pl-2">
+          <!-- <p-tableHeaderCheckbox
+            (click)="activeItemLote(selectedItems)"
+          ></p-tableHeaderCheckbox> -->
+          <input
+            type="checkbox"
+            [checked]="
+              isAllGroupSelected(
+                config.fieldGroup || 0,
+                group[config.fieldGroup || 0]
+              )
+            "
+            [indeterminate]="
+              isGroupIndeterminate(
+                config.fieldGroup || 0,
+                group[config.fieldGroup || 0]
+              )
+            "
+            (click)="
+              selectGroup(
+                $event,
+                config.fieldGroup || 0,
+                group[config.fieldGroup || 0]
+              )
+            "
+          />
+        </th>
+        } 
+        @for (col of columns; track $index) {
+        <th
+          [pSortableColumn]="col.field"
+          [pSortableColumnDisabled]="col.sortable === false"
+          [style.width]="col.width"
+          class="text-sm"
+        >
+          <div
+            [class]="
+              centralizarColunas(col) && alignColunasHeader(col) == ''
+                ? 'flex flex-row justify-content-center'
+                : 'flex flex-row'
+            "
+            [style]="alignColunasHeader(col)"
+          >
+            <span>{{ col.header }}</span>
+            @if (col.sortable) {
+            <p-sortIcon
+              [field]="'data.' + col.field"
+              style="font-size: 10px"
+            ></p-sortIcon>
+            } @if (col.headerTooltip) {
+            <span
+              class="material-symbols-outlined flex align-items-center"
+              [pTooltip]="col.headerTooltip"
+              >info</span
+            >
+            }
+          </div>
+        </th>
+        } 
+        @if (config.actions && config.actions.length > 0) {
+        <th></th>
+        }
+      </tr>
+      }
+    </ng-template>
+
+    <ng-template pTemplate="rowexpansion" let-group>
+      @if (!isTableRowExpanded) {
+        <tr
+        (dblclick)="doubleClick($event, group)"
+        [ngClass]="{ capitalize: tableCaptalized }"
+      >
+        @if (config.enableSelect) {
+        <td [style]="applyStyle(group, { field: 'check-box', header: '' })">
+          <!--<p-tableCheckbox *ngIf="isVisibleCheckbox(group.data)"-->
+          <!-- <p-tableCheckbox
+            [value]="group"
+            [disabled]="isDisabledCheckbox(group)"
+            (click)="activeItemLote(selectedItems)"
+          ></p-tableCheckbox>
+           -->
+          <input
+            type="checkbox"
+            [value]="group"
+            [checked]="isSelected(group)"
+            (click)="selectItem($event, group)"
+          />
+        </td>
+        } 
+        @for (col of columns; track $index) {
+        <ng-container>
+          @if (!col.template) {
+          <td
+            class="rowTable"
+            [style]="
+              applyStyle(group, col) +
+              centralizarColunas(col) +
+              alignColunas(col)
+            "
+            [pTooltip]="returnTooltipRow(group, col)"
+          >
+            <span class="p-column-title">{{ col.header }}:</span>
+
+            <span
+              *ngIf="!isBooleanField(group, col); else booleanField"
+              [class]="returnRowClass(group, col)"
+            >
+              @if (!isChipField(col) && !col.iconField && !isImageField(col)) {
+              <span>
+                @if (col.icon) {
+                <i [class]="col.icon + ' mr-2'"></i>
+                }
+                {{ transformValue(group, col) }}
+              </span>
+              } @if (isChipField(col) && !col.iconField) {
+              <div>
+                <span
+                  [class]="returnClassChip(group, col)"
+                  [pTooltip]="returnTooltipIcon(group, col)"
+                  >{{ transformValue(group, col) }}</span
+                >
+              </div>
+              }
+            </span>
+
+            @if (isImageField(col)) {
+            <span>
+              <span>
+                <img class="image" [src]="loadImage(group, col)" />
+              </span>
+            </span>
+            } @if (col.iconField) {
+            <i
+              [ngClass]="{
+                'material-icons': col.indIconMaterial,
+                'material-symbols-outlined mr-2': !col.indIconMaterial
+              }"
+              [pTooltip]="returnTooltipIcon(group, col)"
+            >
+              {{ returnClassIcon(group, col) }}
+            </i>
+            }
+
+            <ng-template #booleanField>
+              @if (!col.iconField && !isSwitchField(col)) {
+              <i
+                [ngClass]="group[col.field] ? 'text-green-500' : 'text-red-500'"
+                ><span class="material-symbols-outlined">
+                  {{ group[col.field] ? "check" : "close" }}
+                </span>
+              </i>
+              } @if (isSwitchField(col)) {
+              <span [class]="returnRowClass(group, col)">
+                <kv-switch
+                  (onSwitchChange)="onSwitchChange($event, group, col)"
+                  [disabled]="col?.onlyReadField ?? true"
+                  [switchValue]="transformValue(group, col)"
+                >
+                </kv-switch>
+              </span>
+              }
+            </ng-template>
+          </td>
+          } 
+          @if (col.template) {
+          <td
+            [style]="
+              applyStyle(group, col) +
+              centralizarColunas(col) +
+              alignColunas(col)
+            "
+            class="rowTable"
+          >
+            <span class="p-column-title">{{ col.header }}:</span>
+            @if (getCustomTemplate(col.template.name)) {
+            <ng-container
+              [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+              [ngTemplateOutletContext]="{ $implicit: group }"
+            />
+            }
+          </td>
+          }
+        </ng-container>
+        } 
+        @if (config.actions && config.actions.length > 0) {
+        <td [style]="applyStyle(group, { field: 'btns-options', header: '' })">
+          <div class="flex flex-row justify-content-end w-full">
+            <!-- <button
+                    id="moreVertBtn"
+                    pButton
+                    class="actionBtns p-button-text p-button-raised"
+                    (click)="menu.toggle($event); activeItem(group)"
+                  > -->
+
+            <span
+              class="material-symbols-outlined cursor-pointer icon-more-horiz"
+              style="font-size: 25px"
+              (click)="
+                returnRowDataActions(group);
+                menu.toggle($event);
+                activeItem(group)
+              "
+            >
+              more_horiz
+            </span>
+
+            <!-- </button> -->
+
+            <p-tieredMenu
+              #menu
+              [popup]="true"
+              [model]="menuItems"
+              appendTo="body"
+            ></p-tieredMenu>
+          </div>
+        </td>
+        }
+      </tr>
+      }
+
+      @if (isTableRowExpanded) {
+
+        <tr>
+          <td
+            #expandedContent
+            [attr.colspan]="columns.length + 2"
+            style="text-align: start; border-radius: 10px !important;"
+          >
+            <div style="width: 100%;">
+              @if (getCustomTemplate(config.templateRowExpanded.name)) {
+              <ng-container
+                [ngTemplateOutlet]="getCustomTemplate(config.templateRowExpanded.name)"
+                [ngTemplateOutletContext]="{ $implicit: group }"
+              />
+              }
+            </div>
+          </td>
+        </tr>
+  
+   }
+    </ng-template>
+
+    <ng-template pTemplate="emptymessage" let-columns>
+      <tr>
+        <td
+          [attr.colspan]="columns.length + 2"
+          style="text-align: center; border-radius: 10px !important"
+        >
+          <p class="font-medium m-0">Nenhum registro encontrado</p>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
+  }
+</div>