keevo-components 1.8.42 → 1.8.45

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

@@ -0,0 +1,630 @@
+
+
+<div class="card" >
+  <p-toast></p-toast>
+
+  <p-panel
+    *ngIf="filtrosAvancados"
+    header="Filtros avançados"
+    [toggleable]="true"
+    [collapsed]="true"
+    (collapsedChange)="collapsed = !collapsed"
+    [style]="{ 'margin-bottom': '2px' }"
+  >
+    <ng-template pTemplate="headericons">
+      <i
+        *ngIf="!collapsed"
+        class="pi pi-filter"
+      ></i>
+      <!-- Ícone quando o painel está aberto -->
+      <i
+        *ngIf="collapsed"
+        class="pi pi-minus"
+      ></i>
+      <!-- Ícone quando o painel está fechado -->
+    </ng-template>
+    <ng-content></ng-content>
+  </p-panel>
+
+  <p-contextMenu #cm [model]="items"></p-contextMenu>
+  <p-table
+  #te
+  [reorderableColumns]="config.reorderableColumns || false"
+  *ngIf="config"
+  [value]="dataSource"
+  [dataKey]="config.dataKey"
+  [tableStyle]="{ 'min-width': '50rem' }"
+  [columns]="config.columns"
+  [editMode]="'row'"
+  [scrollable]="true"
+  scrollHeight="400px"
+  appendTo="body"
+  [styleClass]="'p-datatable-sm'"
+  [(selection)]="selectedItems"
+  [rowSelectable]="isRowSelectable"
+  [globalFilterFields]="globalFilterFields"
+  [rows]="rows"
+  [paginator]="paginator"
+  [rowsPerPageOptions]="rowsPerPageOptions"
+  [showCurrentPageReport]="true"
+  currentPageReportTemplate="{first} - {last} de {{ totalRecords }}"
+  (selectionChange)="selectionChange($event)"
+  [rowHover]="true"
+  [totalRecords]="totalRecords"
+  [lazy]="config.lazy"
+  (onLazyLoad)="paginate($event)"
+  [groupRowsBy]="config.fieldGroup"
+  [showFirstLastIcon]="showFirstLastIcon"
+  [pageLinks]="pageLinksOptions"
+  [scrollable]="isTableScrollable"
+  [scrollHeight]="scrollHeight"
+  [rowTrackBy]="rowTrackBy "
+  [(contextMenuSelection)]="selectedProduct"
+  [contextMenu]=" isEditableTable() ? cm : null"
+  >
+
+
+
+
+
+
+
+
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+
+    <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="flex flex-row align-items-center md:col-6 lg:col-4 {{
+            tamanhoTela < 768 ? 'col-10' : 'col-12'
+          }} mt-1 mb-2 ">
+          <span
+            *ngIf="config.enableFilter"
+            class="p-input-icon-left"
+          >
+            <i class="pi pi-search"></i>
+
+            <input
+              pInputText
+              pAutoFocus
+              [autofocus]="true"
+              type="text"
+              (input)="onGlobalFilter(te, $event)"
+              placeholder="Pesquisar..."
+              class="h-2rem"
+            />
+          </span>
+
+        </div>
+
+        <div class="flex flex-row col-1 justify-content-end">
+          <div
+            *ngFor="let action of config.actionsLote"
+            class="btns-options"
+            [style]="{ 'margin-right': '7px' }"
+          >
+            <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(commandEvent); 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
+          style="width: 4rem; border-left: solid 4px transparent"
+          *ngIf="config.enableSelect"
+        >
+          <p-tableHeaderCheckbox (click)="activeItemLote(selectedItems)"></p-tableHeaderCheckbox>
+        </th>
+
+        <th
+          *ngFor="let col of columns"
+          [pSortableColumn]="col.field"
+          [pSortableColumnDisabled]="col.sortable === false"
+          [style.min-width]="col.width"
+          pReorderableColumn
+          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>
+            <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>
+        </th>
+        <th *ngIf="config.actions && config.actions.length > 0"></th>
+        <th *ngIf="isEditableTable()"  id="th-edit" style="width: 20px">Editar</th>
+      </tr>
+    </ng-template>
+
+
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+
+
+
+
+    <ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex" let-columns="columns"
+      let-rowgroup="rowgroup" let-rowspan="rowspan">
+      <tr [pEditableRow]="rowData" [pEditableRowDisabled]="false"
+      [pContextMenuRow]="{rowData, editing}"
+      >
+
+
+        <td
+          *ngIf="config.enableSelect"
+          [style]="applyStyle(rowData, { field: 'check-box', header: '' })"
+        >
+          <!--<p-tableCheckbox *ngIf="isVisibleCheckbox(rowData)"-->
+          <p-tableCheckbox
+            [value]="rowData"
+            [disabled]="isDisabledCheckbox(rowData)"
+            (click)="activeItemLote(selectedItems)"
+          ></p-tableCheckbox>
+        </td>
+
+
+        <ng-container *ngFor="let col of columns; let i = index">
+
+
+
+
+
+
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+
+          <!-- Celula que armazena os controles de edição para os campos -->
+          <td *ngIf="col.fieldControlType"
+          [id]="'rowTable'+ rowData[config.dataKey]"
+          pSelectableRowDblClick=""
+          (click)="activeItem(rowData)"
+          (dblclick)="dbClickEdit()"
+          pSelectableRowDblClick=""
+          class="rowTable" [style]="
+          applyStyle(rowData, col) +
+          centralizarColunas(col) +
+          alignColunas(col) " [pTooltip]="returnTooltipRow(rowData, col)"
+          >
+            <p-cellEditor [ngClass]="{'switch': col.fieldControlType == 'switch'}">
+              <!-- Controle de edição do campo -->
+              <ng-template pTemplate="input">
+
+                <ng-container [ngSwitch]="col.fieldControlType">
+
+                  <ng-container *ngSwitchCase="'text'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid" >
+                      <kv-input-text [disabled]="isDisableEditRowCellFunction(rowData, col)" class="cellControl col" [(ngModel)]="rowData[col.field]" [required]="col.required ?? true"></kv-input-text>
+                    </div>
+                  </ng-container>
+
+                  <ng-container *ngSwitchCase="'number'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid" >
+                      <kv-input-number [disabled]="isDisableEditRowCellFunction(rowData, col)" class="cellControl col" [(ngModel)]="rowData[col.field]" [required]="col.required ?? true"></kv-input-number>
+                    </div>
+                  </ng-container>
+
+                  <ng-container *ngSwitchCase="'mask'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid" >
+                      <kv-input-mask [disabled]="isDisableEditRowCellFunction(rowData, col)" class="cellControl col" [mask]="col.mask" [required]="col.required ?? true" [(ngModel)]="rowData[col.field]"></kv-input-mask>
+                    </div>
+                  </ng-container>
+
+                  <ng-container *ngSwitchCase="'switch'">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid" >
+                      <kv-switch [disabled]="isDisableEditRowCellFunction(rowData, col)" class="cellControl col" [(ngModel)]="rowData[col.field]" ></kv-switch>
+                    </div>
+                  </ng-container>
+
+                  <ng-container *ngSwitchCase="'calendar'">
+                    <div [style.width]="col.width">
+                    <div [style.width]="col.width" class="grid formgrid p-fluid" >
+                      <kv-input-calendar class="cellControl col" [(ngModel)]="rowData[col.field]"></kv-input-calendar>
+                    </div>
+                    </div>
+                  </ng-container>
+                  <ng-container *ngSwitchCase="'dropdown'">
+                    <div  [style.width]="col.width"  class="grid formgrid p-fluid" >
+                      <p-dropdown
+                        [disabled]="isDisableEditRowCellFunction(rowData, col)"
+                        class="cellControl col"
+                        appendTo="body"
+                        [optionLabel]="col.fieldDropDownControl.descricaoobjeto"
+                        [optionValue]="col.fieldDropDownControl.idobjeto"
+                        [options]="col.fieldDropDownControl.fieldControlDropdownSource"
+                        [(ngModel)]="rowData[col.field]"
+                        >
+                      </p-dropdown>
+                    </div>
+                  </ng-container>
+                </ng-container>
+              </ng-template>
+
+
+
+
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+
+
+
+
+              <!-- Valor atual do campo -->
+              <ng-template pTemplate="output">
+                <ng-container [ngSwitch]="col.fieldControlType">
+                  <ng-container *ngSwitchCase="'dropdown'">
+                    <ng-container *ngIf="rowData[col.field]">
+                      {{
+                      retornaDescricaoDrop(
+                      rowData,
+                      col
+                      )
+                      }}
+                      <!-- {{rowData[col.field]}} -->
+                    </ng-container>
+                  </ng-container>
+
+                  <ng-container *ngSwitchCase="'switch'">
+                    <kv-switch [(ngModel)]="rowData[col.field]" [disabled]="true"></kv-switch>
+                  </ng-container>
+
+                  <ng-container *ngSwitchCase="'calendar'">
+                    {{ rowData[col.field] | date }}
+                  </ng-container>
+
+                  <ng-container *ngSwitchCase="'mask'">
+                    {{ rowData[col.field] | mask:col.mask }}
+                  </ng-container>
+
+                  <ng-container *ngSwitchDefault>
+                    {{ rowData[col.field] }}
+                  </ng-container>
+
+                </ng-container>
+              </ng-template>
+            </p-cellEditor>
+          </td>
+
+
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+    <!-- ----------------------------------------------------------------------------------------------------------------------------------- -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+          <td *ngIf="rowgroup && !col.template && !col.fieldControlType" [attr.rowspan]="rowgroup && col.grouped ? rowspan : null"
+            class="rowTable" [style]="
+              applyStyle(rowData, col) +
+              centralizarColunas(col) +
+              alignColunas(col)
+            " [pTooltip]="returnTooltipRow(rowData, col)">
+            <span class="p-column-title">{{ col.header }}:</span>
+
+            <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 && !isSwitchField(col)" [ngClass]="
+                  rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                "><span class="material-symbols-outlined">
+                  {{ rowData[col.field] ? "check" : "close" }}
+                </span>
+              </i>
+
+              <span *ngIf="isSwitchField(col)" [class]="returnRowClass(rowData, col)">
+                <kv-switch (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                  [disabled]="col?.onlyReadField ?? true" [switchValue]="transformValue(rowData, col)">
+                </kv-switch>
+              </span>
+            </ng-template>
+          </td>
+
+          <td *ngIf="!rowgroup && !col.grouped && !col.template && !col.fieldControlType" [style]="
+              applyStyle(rowData, col) +
+              centralizarColunas(col) +
+              alignColunas(col)
+            " class="rowTable" [pTooltip]="returnTooltipRow(rowData, col)">
+            <span class="p-column-title">{{ col.header }}:</span>
+
+            <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 && !isSwitchField(col)" [ngClass]="
+                  rowData[col.field] ? 'text-green-500' : 'text-red-500'
+                "><span class="material-symbols-outlined">
+                  {{ rowData[col.field] ? "check" : "close" }}
+                </span>
+              </i>
+
+              <span *ngIf="isSwitchField(col)" [class]="returnRowClass(rowData, col)">
+                <kv-switch (onSwitchChange)="onSwitchChange($event, rowData, col)"
+                  [disabled]="col?.onlyReadField ?? true" [switchValue]="transformValue(rowData, col)">
+                </kv-switch>
+              </span>
+            </ng-template>
+          </td>
+
+          <td *ngIf="col.template && !col.fieldControlType" [style]="
+              applyStyle(rowData, col) +
+              centralizarColunas(col) +
+              alignColunas(col)
+            " class="rowTable">
+            <span class="p-column-title">{{ col.header }}:</span>
+            <ng-container *ngIf="getCustomTemplate(col.template.name)"
+              [ngTemplateOutlet]="getCustomTemplate(col.template.name)"
+              [ngTemplateOutletContext]="{ $implicit: rowData }">
+            </ng-container>
+          </td>
+
+        </ng-container>
+
+
+
+
+
+
+
+
+
+
+
+      <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->
+      <!-- Controle de ação  -->
+      <td [ngClass]="{'td-tools': isEditableTable(), 'td-tools-sticky': !isEditableTable() }"
+        *ngIf="config.actions && config.actions.length > 0 && !editing"
+        [style]="applyStyle(rowData, { field: 'btns-options', header: '' })"
+      >
+        <div
+          class="flex flex-row justify-content-end w-full gap-1"
+          *ngIf="acoesLinhaTabela"
+        >
+          <div
+            *ngFor="let action of config.actions"
+            class="mr-1"
+          >
+            <!-- <button
+              id="actionBtns"
+              pButton
+              *ngIf="exibirCampo(action, rowData)"
+              class="actionBtns p-button-text p-button-raised"
+              (click)="activeItem(rowData); action?.command(commandEvent)"
+              [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
+              [tooltipPosition]="
+                action.tooltipPosition ? action.tooltipPosition : 'bottom'
+              "
+              [disabled]="callDisabled(action, rowData)"
+            >
+              <span class="material-symbols-outlined md-19">
+                {{ retornarCampo(action, rowData, "icon") }}</span
+              >
+            </button> -->
+
+            <span
+              class="material-symbols-outlined {{
+                callDisabled(action, rowData)
+                  ? 'text-gray-400 cursor-auto'
+                  : 'cursor-pointer'
+              }}"
+              style="font-size: 20px"
+              (click)="isButtonDisable(action, rowData, commandEvent)"
+              [pTooltip]="retornarCampo(action, rowData, 'tooltip')"
+              [tooltipPosition]="
+                action.tooltipPosition ? action.tooltipPosition : 'bottom'
+              "
+            >
+              {{ retornarCampo(action, rowData, "icon") }}
+            </span>
+          </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)"
+          > -->
+          <span
+            class="material-symbols-outlined cursor-pointer icon-more-horiz"
+            style="font-size: 20px"
+            (click)="menu.toggle($event); activeItem(rowData)"
+          >
+            more_horiz
+          </span>
+          <!-- </button> -->
+
+          <div *ngFor="let action of config.actions">
+            {{ criarMenusModal(rowData) }}
+          </div>
+
+          <!-- <div *ngFor="let action of config.actions">
+            {{ criarMenusModal(rowData) }}
+          </div> -->
+
+          <p-menu
+            #menu
+            [popup]="true"
+            [model]="menuItems"
+            appendTo="body"
+          ></p-menu>
+        </div>
+      </td>
+
+      <td
+      class="td-tools"
+      *ngIf="config.actions && config.actions.length > 0 && editing"
+      [style]="applyStyle(rowData, { field: 'btns-options', header: '' })"
+    >
+      <div
+        class="flex flex-row justify-content-end w-full gap-1"
+        *ngIf="acoesLinhaTabela"
+      >
+
+      </div>
+      <div
+        class="flex flex-row justify-content-end w-full"
+        *ngIf="!acoesLinhaTabela"
+      >
+      </div>
+      </td>
+
+
+
+      <!-- ------------------------------------------------------------------------------------------------------------------------------------------- -->
+      <!-- Controle de edição -->
+        <td class="td-edit" *ngIf="this.isEditableTable()" >
+          <div class="flex align-items-center justify-content-center gap-2">
+            <button [style.height]="'28px'" [id]="'rowEdit' + rowData[config.dataKey] " [style.width]="'28px'" [disabled]="isDisableEditRowFunction(rowData)" *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil"
+              (click)="onRowEditInit(rowData)" class="p-button-rounded p-button-text"></button>
+            <button [style.height]="'28px'" [style.width]="'28px'" [disabled]="isDisableEditRowFunction(rowData)" *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check"
+              (click)="onRowEditSave(rowData, ri)" [id]="'rowSave' + rowData[config.dataKey] " class="p-button-rounded p-button-text p-button-success mr-2"></button>
+            <button [style.height]="'28px'" [style.width]="'28px'" [disabled]="isDisableEditRowFunction(rowData)" *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times"
+              (click)="onRowEditCancel(rowData, ri)" [id]="'rowCancel' + rowData[config.dataKey] " class="p-button-rounded p-button-text p-button-danger"></button>
+          </div>
+        </td>
+
+
+
+
+      </tr>
+    </ng-template>
+  </p-table>
+</div>