keevo-components 2.0.105 → 2.0.107

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

@@ -0,0 +1,425 @@
+import {
+  Component,
+  EventEmitter,
+  input,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  signal,
+  SimpleChanges,
+  TemplateRef} from '@angular/core';
+
+import {
+  DatePipe,
+  DecimalPipe
+} from '@angular/common';
+
+import {
+  MenuItem} from 'primeng/api';
+
+
+import {
+  ActionItem,
+  CpfCnpjPipe,
+  NotificationService,
+  TableConfigColumn,
+  TelefonePipe,
+  ValueOrFn,
+  getOrExecute,
+  mapToMenuItem
+} from '../../../public-api';
+
+import { TableEditConfigColumn } from '../../api/components/table/tableedit.config.column';
+import TableEditConfig from '../../api/components/table/tabledit.config';
+import { Subject, Subscription, takeUntil, timer } from 'rxjs';
+import { BasecomponentTable } from '../../api/base-components/base-component-table';
+
+
+@Component({
+  selector: 'kv-table-edit',
+  templateUrl: './kv-table-edit.component.html',
+  styleUrls: ['./kv-table-edit.component.scss']
+})
+export class KvTableEditComponent extends BasecomponentTable implements OnInit, OnChanges {
+  override config!: TableEditConfig;
+
+  enableSizes = input<boolean>(false);
+  editMode = input<'row' | 'cell'>('cell');
+  hideBtnEdit = input<boolean>(false);
+  enableDisplayMode = input<boolean>(false);
+
+  private itemsParaSalvamento: any[] = []
+  protected itemInitialState!: any;
+
+  isEditing: boolean = false;
+  isShowSizes: boolean = false;
+  clonedDataSource: { [s: string]: any } = {};
+  selectedProduct: any = {
+    rowData: {},
+    editing: false
+  };
+
+  menuItems: MenuItem[] = [];
+
+  itemsContextMenu!: MenuItem[];
+
+  selectedDisplayMode: 'details' | 'list' = 'details';
+
+  setDisplayMode(mode: 'list' | 'details') {
+  this.selectedDisplayMode = mode;
+
+  }
+
+
+  actionsDisplayMode: ActionItem[] = [
+    {
+      label: 'Lista',
+      icon: 'pi pi-list-check',
+      command: () => {
+        this.selectedDisplayMode = 'list';
+      }
+    },
+    {
+      label: 'Detalhes',
+      icon: 'pi pi-table',
+      command: () => {
+        this.selectedDisplayMode = 'details';
+      }
+    },
+  ];
+
+  get visibleColumns(): TableEditConfigColumn[] {    
+    return this.config.columns.filter(col => 
+      !col.displayMode || col.displayMode.includes(this.selectedDisplayMode)
+    );
+  }
+
+  /**  Emite evento de salvamento da linha */
+  @Output() onSave: EventEmitter<any> = new EventEmitter();
+  @Output() filterField: EventEmitter<any> = new EventEmitter();
+
+  constructor(
+    datePipe: DatePipe,
+    decimalPipe: DecimalPipe,
+    cpfCnpjPipe: CpfCnpjPipe,
+    telefonePipe: TelefonePipe,
+    notificationService: NotificationService
+    // capitalizePipe: CapitalizePipe,
+  ) {
+    super(datePipe, decimalPipe, cpfCnpjPipe, telefonePipe, notificationService);
+    this.isRowSelectable = this.isRowSelectable.bind(this);
+  }
+
+
+  getOrExecute<T>(action: ValueOrFn<T>, data: any): T {
+    return getOrExecute(action, data);
+  }
+
+  sizes = [
+    {
+      label: 'Pequeno', class: 'p-datatable-sm', size: 0.83, command: (x: any) => {
+        this.selectedSize = { label: 'Pequeno', class: 'p-datatable-sm', size: 0.83 }
+      }
+    },
+    {
+      label: 'Médio', class: 'p-datatable-md', size: 1, command: (x: any) => {
+        this.selectedSize = { label: 'Médio', class: 'p-datatable-md', size: 1 }
+      }
+    },
+    {
+      label: 'Grande', class: 'p-datatable-lg', size: 1.17, command: (x: any) => {
+        this.selectedSize = { label: 'Large', class: 'p-datatable-lg', size: 1.17 }
+
+      }
+    },
+  ];
+
+
+  //FIXME: Mover para um local adequado
+  timerSubscription!: Subscription; // Assinatura do temporizador
+  onSaveTimer$: Subject<void> = new Subject<void>(); // Sujeito para controlar o temporizador
+  private onDestroy$: Subject<void> = new Subject<void>();
+
+  override ngOnInit() {
+    super.ngOnInit();
+
+    this.onSaveTimer$.pipe(
+      takeUntil(this.onDestroy$)
+    ).subscribe(() => {
+      // Quando o temporizador terminar, emita o evento onSave com os dados a serem salvos
+      this.onRowEditSave();
+    });
+
+
+    this.tamanhoTela = window.innerWidth;
+
+    this.itemsContextMenu = [
+      {
+        label: 'Editar linha', icon: 'pi pi-fw pi-pencil', command: () => {
+          const element = document.getElementById('rowEdit' + this.selectedProduct.rowData[this.config.dataKey]);
+          if (element && !this.config.disableEditRowFunction?.(this.selectedProduct.rowData)) {
+            element.click()
+          } else {
+            this.notificationService.toastWarn("A edição dessa linha esta desabilitada")
+          }
+          this.onRowEditInit(this.selectedProduct)
+
+        }
+      },
+      {
+        label: 'Cancelar edição', icon: 'pi pi-fw pi-times', command: (data: any) => {
+          const element = document.getElementById('rowCancel' + this.selectedProduct.rowData[this.config.dataKey]);
+          if (element) {
+            element.click();
+          } else {
+            this.notificationService.toastWarn("A edição dessa linha esta desabilitada")
+          }
+        }
+      },
+      {
+        label: 'Salvar edição', icon: 'pi pi-fw pi-save', command: (data: any) => {
+          const element = document.getElementById('rowSave' + this.selectedProduct.rowData[this.config.dataKey]);
+          if (element) {
+            element.click(); // Dispara um evento de clique no elemento com ID 'teste'
+          } else {
+            this.notificationService.toastWarn("A edição dessa linha esta desabilitada")
+          }
+        }
+      },
+      {
+        label: 'Entrar em modo de edição', icon: 'pi pi-fw pi-pencil', command: () => {
+          this.isEditing = true;
+        }
+      },
+      {
+        label: 'Sair do modo de edição', icon: 'pi pi-fw pi-pencil', command: () => {
+          this.isEditing = false;
+          if (this.itemsParaSalvamento.length > 0)
+            this.onRowEditSave();
+        }
+      },
+    ];
+
+    // Subscreve-se ao sujeito onSaveTimer$
+
+  }
+
+  override adjustTableSize(){
+  }
+
+  ngOnDestroy(): void {
+    // Completa o sujeito onDestroy$
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+    // Se houver um temporizador em execução, pare-o
+    if (this.timerSubscription) {
+      this.timerSubscription.unsubscribe();
+      // Após parar o temporizador, chame onSave diretamente para salvar os dados
+      this.onRowEditSave();
+    }
+  }
+
+  ngDoCheck(): void {
+    this.itemsContextMenu[0].visible = this.editMode() == 'row' && !this.selectedProduct.editing && this.isEditableTable() !== false;
+    this.itemsContextMenu[1].visible = this.editMode() == 'row' && this.selectedProduct.editing && this.isEditableTable() !== false;
+    this.itemsContextMenu[2].visible = this.editMode() == 'row' && this.selectedProduct.editing && this.isEditableTable() !== false;
+
+    this.itemsContextMenu[3].visible = this.editMode() == 'cell' && !this.isEditing;
+    this.itemsContextMenu[4].visible = this.editMode() == 'cell' && this.isEditing;
+
+
+  }
+
+
+  dbClickEdit() {
+
+    const element = document.getElementById('rowEdit' + this.selectedItem[this.config.dataKey]);
+    if (element) {
+      element.click();
+      
+    } else {
+      if (this.editMode() == 'row')
+        this.notificationService.toastWarn("A edição dessa linha esta desabilitada")
+    }
+  }
+
+  isRowSelectable(event: any) {
+    return !this.isDisabledCheckbox(event.data);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
+    //Add '${implements OnChanges}' to the class.
+    if (changes['setConfig'] && this.config) {
+
+      this.config.columns.forEach((e: TableEditConfigColumn) => {
+        if (e.fieldControlType == 'dropdown') {
+          this.listarDrop(e.fieldDropDownControl?.fieldControlDropdownService, e)
+
+        }
+      })
+    }
+  }
+  criarMenusModal(data: any) {
+    if (this.config.actions && data) {
+      for (const action of this.config.actions) {
+        const menuInsert = mapToMenuItem(action, data);
+
+        let item = this.menuItems.filter(
+          x => x.command == menuInsert.command
+        );
+
+        if (item.length == 0) this.menuItems.push(menuInsert);
+        else {
+          if (menuInsert.label != item[0].label) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+
+          if (menuInsert.visible != item[0].visible) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+
+          if (menuInsert.disabled != item[0].disabled) {
+            let index = this.menuItems.indexOf(item[0]);
+            this.menuItems.splice(index, 1);
+          }
+        }
+      }
+    }
+  }
+
+  onRowEditInit(rowData: any) {
+    this.clonedDataSource[rowData.id as string] = { ...rowData };
+  }
+
+  onEditInit(event1: any) {
+    if (this.isEditing) this.itemInitialState = { ...event1.data }
+  }
+
+  onEditComplete(event: any) {
+    if (this.isEditing) {
+      if (this.itemsParaSalvamento.length === 0 || 
+        this.itemsParaSalvamento[this.itemsParaSalvamento.length - 1].index === event.index) {
+        
+        if (event.data && this.itemInitialState &&
+          event.data.hasOwnProperty(event.field) && 
+          this.itemInitialState.hasOwnProperty(event.field) &&
+          event.data[event.field] != this.itemInitialState[event.field]) {
+          this.adicionarCelulaParaSalvar(event);
+        }
+      } else {
+        this.onRowEditSave();
+        this.adicionarCelulaParaSalvar(event);
+      }
+    }
+  }
+
+  adicionarCelulaParaSalvar(item: any) {
+    // Adiciona os dados editados ao array para salvamento
+    this.itemsParaSalvamento.push(item);
+
+    // Se houver um temporizador em execução, limpe-o e reinicie
+    if (this.timerSubscription) {
+      this.timerSubscription.unsubscribe();
+    }
+
+    // Inicia o temporizador para emitir onSave após 5 segundos
+    this.timerSubscription = timer(5000).subscribe(() => {
+      this.onSaveTimer$.next(); // Emita onSave após 5 segundos
+    });
+  }
+
+
+  onRowEditSave() {
+    if (this.itemsParaSalvamento.length == 0 || !this.itemsParaSalvamento[0].data)
+      return;
+
+    const objetoRefletido: any = { ...this.itemsParaSalvamento[0].data };
+    // Reflete as alterações em um objeto
+    this.itemsParaSalvamento.forEach(item => {
+      if (!item.data) return; // Verifica se o item tem a propriedade 'data'
+      const chave = item.field
+      const valor = item.data[chave];
+      objetoRefletido[chave] = valor;
+    });
+    this.onSave.emit(objetoRefletido)
+    this.itemsParaSalvamento = [];
+  }
+
+
+  onRowEditCancel(product: any, index: number) {
+    this.dataSource[index] = this.clonedDataSource[product.id as string];
+    delete this.clonedDataSource[product.id as string];
+  }
+
+  listarDrop(service: any, col: any, indtodos?: boolean) {
+    const column = this.config.columns?.indexOf(col);
+    return this.config.columns[column].fieldDropDownControl?.fieldControlDropdownSource
+  }
+
+  retornaDescricaoDrop(rowData: any[], col: TableEditConfigColumn) {
+
+    const data = col.fieldDropDownControl?.fieldControlDropdownSource
+    const idobjeto = col.fieldDropDownControl?.idobjeto
+    const descricaoobjeto = col.fieldDropDownControl?.descricaoobjeto
+    // @ts-ignore
+    const valorAtual = rowData[col.field]
+
+    if (data && idobjeto && descricaoobjeto)
+      return data?.find((item: any) => item[idobjeto] == valorAtual)[descricaoobjeto]
+    else return 'Carregando'
+  }
+
+
+
+  isDisableEditRowFunction(rowData: any): boolean {
+    return this.config.disableEditRowFunction ? this.config.disableEditRowFunction(rowData) : false;
+  }
+
+  isDisableEditRowCellFunction(rowData: any, col: any): boolean {
+    return col.disableEditRowCellFunction ? col.disableEditRowCellFunction(rowData) : false;
+  }
+
+  isEditableTable(): boolean | null {
+    if (!this.config.columns)
+      return null;
+
+    return this.config.columns.some((column: any) => 'fieldControlType' in column);
+  }  
+
+
+  transformValueDrop(value: any, col: TableConfigColumn) {
+    if (value != null) {
+      if (!col.pipe) {
+        return value;
+      }
+
+      switch (col.pipe) {
+        case 'date':
+          return this.datePipe.transform(value, 'dd/MM/yyyy');
+        case 'datetime':
+          return this.datePipe.transform(value, 'dd/MM/yyyy hh:mm');
+        case 'decimal':
+          return this.decimalPipe.transform(value, '1.2-2', 'pt-BR');
+        case 'cpfcnpj':
+          return this.cpfCnpjPipe.transform(value);
+        case 'telefone':
+          return this.telefonePipe.transform(value);
+        case 'capitalize':
+             return this.transformCapitalize(value);
+        case 'money':
+          return this.formatarValor(value);
+        case 'percentage':
+          return `${ value } %`;
+
+        default:
+          break;
+      }
+    }
+  }
+
+}
+

package/src/lib/components/kv-table-edit/kv-table-edit.module.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+
+import {
+  KvButtonsModule,
+  KvInputsModule,
+  PipesModule,
+  PrimeNgModule
+} from '../../../public-api';
+
+import { KvTableEditComponent } from './kv-table-edit.component';
+import { SelectButtonModule } from 'primeng/selectbutton';
+
+import { KvButtonModule } from '../kv-button/kv-button.module';
+
+@NgModule({
+  declarations: [KvTableEditComponent],
+  imports: [
+    CommonModule,
+    PrimeNgModule,
+    FormsModule,
+    KvInputsModule,
+    KvButtonsModule,
+    PipesModule,
+    SelectButtonModule,
+    KvButtonModule
+  ],
+  exports: [KvTableEditComponent]
+})
+export class KvTableEditModule { }