keevo-components 2.0.106 → 2.0.107

package/src/lib/api/base-components/base-component-crud-list.ts

@@ -0,0 +1,129 @@
+import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { DialogService } from 'primeng/dynamicdialog';
+import { Router } from '@angular/router';
+
+import { BaseComponentCrud } from './base-component-crud';
+import { TablePaginate } from '../components/table/table.paginate';
+import { TableConfig } from '../components/table/table.config';
+import { ActionItem } from '../components/table/action-item';
+import { NotificationService } from '../services/notification.service';
+import { Observable } from 'rxjs';
+import { loading } from '../../components/kv-loader/kv-loader.service';
+import { TreeTableConfig } from '../components/tree-table/tree-table.config';
+import { KvTableComponent } from '../../components/kv-table/kv-table.component';
+import { KvTreetableComponent } from '../../components/kv-tree-table/kv-tree-table.component';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentCrudList
+  extends BaseComponentCrud
+  implements OnInit {
+  dataSource: any = [];
+  selectedItem: any;
+  tableConfig!: TableConfig | TreeTableConfig;
+  totalRecords: number = 0;
+  actionsPageList: ActionItem[] = [];
+
+  @ViewChild(KvTableComponent) table!: KvTableComponent;
+  @ViewChild(KvTreetableComponent) treetable!: KvTreetableComponent;
+
+  constructor(
+    dialogService: DialogService,
+    notificationService: NotificationService,
+    public router: Router
+  ) {
+    super(dialogService, notificationService);
+  }
+
+  ngOnInit() {
+    this.loadFilters();
+    this.configureTable();
+
+    // Tabela não configurada para paginação
+    if (!this.tableConfig?.lazy) this.loadTable(new TablePaginate());
+  }
+
+  /**
+   * Método disparado para configuração das tabelas do componente de lista
+   */
+  abstract configureTable(): void;
+
+  /**
+   * Método disparado para edição de registros
+   * @param registry - Registro que está sendo editado
+   *
+   */
+  abstract edit(registry: any): void;
+
+  /**
+   * Método disparado para carregamento dos filtros da tela
+   */
+  abstract loadFilters(): void;
+
+  /**
+   * Método disparado para carregar a tabela do componente de lista
+   * @param tablePaginate - Classe dos dados da paginação da tabela
+   */
+  abstract loadTable(tablePaginate: TablePaginate): void;
+
+  /**
+   * Método disparado ao clicar no botão de novo registro
+   */
+  abstract newRegistry(): void;
+
+  /**
+   * Método que seta o registro selecionado na tabela
+   * @param event - Registro
+   */
+  protected activeItem(event: any) {
+    this.selectedItem = event;
+  }
+
+  /**
+   * Método que dispara o carregamento da tabela
+   * @param obs - Observable de carregamento dos dados
+   */
+  protected loadData(obs: Observable<any>) {
+    obs.pipe(loading()).subscribe({
+      next: (res: any) => {
+        if (res) {
+          if (Array.isArray(res)) {
+            //Tratamento para retorno do tipo listar ([])
+            this.totalRecords = res.length;
+            this.dataSource = res;
+          } else {
+            //Tratamento para retorno do tipo listarPaginado (<int,[]>)
+            this.totalRecords = res.item1;
+            this.dataSource = res.item2;
+          }
+        }
+      },
+      error: (e) => {
+        this.toastError(e);
+      },
+    });
+  }
+
+  /**
+   * Método que dispara a paginação
+   */
+  protected paginate(event: any) {
+    this.loadTable(event);
+  }
+
+  /**
+   * Método que dispara a atualização da página inteira
+   */
+  protected refresh() {
+    this.loadTable(new TablePaginate());
+  }
+
+  protected resetTable() {
+    this.table?.resetTable();
+  }
+
+  protected resetTreeTable() {
+    this.treetable?.resetTreeTable();
+  }
+}

package/src/lib/api/base-components/base-component-crud.ts

@@ -0,0 +1,92 @@
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Component, inject, Type } from '@angular/core';
+import { FormService, paramsDialog } from '../services/form.service';
+import { NotificationService } from '../services/notification.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentCrud {
+  public isReport: boolean = false;
+  public itemsReport: any = [];
+
+  constructor(
+    public dialogService: DialogService,
+    public notificationService: NotificationService
+  ) {}
+
+  /**
+   * Fecha um relatório
+   */
+  public closeReport() {
+    this.isReport = false;
+  }
+
+  /**
+   * Abre um form dialog
+   * @param componentType - Componente que será renderizado
+   * @param callBackFunction - Função de callback que deverá ser chamada após o fechamento do dialog
+   * @param paramsDialog - Parâmetros do dialog
+   */
+  protected openDialog(
+    componentType: Type<any>,
+    callBackFunction: Function,
+    paramsDialog?: paramsDialog
+  ) {
+    // FormService.openDialog(
+    //   this.dialogService,
+    //   componentType,
+    //   callBackFunction,
+    //   paramsDialog);
+
+    const dialogRef: DynamicDialogRef = FormService.openDialog(
+      this.dialogService,
+      componentType,
+      callBackFunction,
+      paramsDialog
+    );
+
+    // Garante que o estado atual seja mantido no histórico
+    // window.history.pushState(null, '', window.location.href);
+
+    // Configura a ação para quando o botão de voltar do navegador é pressionado
+    window.onpopstate = function () {
+      // Verifica se o dialog está aberto antes de fechá-lo
+      if (dialogRef && dialogRef.close) {
+        // dialogRef.onClose.subscribe(callBackFunction());
+        dialogRef.close();
+      }
+    };
+  }
+
+  /**
+   * Imprime um relatório na tela
+   * @param obs - Observable com o carregamento do relatório
+   */
+  protected printReportFilter(obs: Observable<any>) {
+    obs
+      //.pipe(loading())
+      .subscribe({
+        next: (res: any) => {
+          this.itemsReport = res;
+          this.isReport = true;
+        },
+        error: (e) => {
+          this.toastError(e);
+        },
+      });
+  }
+
+  /**
+   * Exibe um toast com um erro
+   * @param err - Erro
+   */
+  protected toastError(err: any) {
+    if (err) {
+      if (err.message) {
+        this.notificationService.toastError(err.message);
+      }
+    }
+  }
+}

package/src/lib/api/base-components/base-component-dropdown-external.ts

@@ -0,0 +1,29 @@
+import { AfterViewInit, Component, Input, ViewChild } from "@angular/core";
+import { ComponentService } from "../services/component.service";
+import { DialogService } from "primeng/dynamicdialog";
+import { FormGroup } from "@angular/forms";
+import { BaseComponentDropDown } from "./base-component-dropdown";
+import { KvDropdownComponent } from "../../components/kv-inputs/kv-dropdown/kv-dropdown.component";
+
+@Component({
+    template: '',
+})
+export abstract class BaseComponentDropDownExternal extends BaseComponentDropDown implements AfterViewInit {
+
+    @Input() formGroup!: FormGroup;
+    @ViewChild(KvDropdownComponent) dropDownComponent!: KvDropdownComponent;
+
+    constructor(
+        componentService: ComponentService,
+        dialogService: DialogService) {
+        super(componentService, dialogService);
+    }
+
+    override ngAfterViewInit(): void {
+        super.ngAfterViewInit();
+
+        if (this.dropDownComponent) {
+            this.dropDownComponent.formControl = this.formControl;
+        }
+    }
+}

package/src/lib/api/base-components/base-component-dropdown-new.ts

@@ -0,0 +1,112 @@
+import { Component, Input, TemplateRef } from "@angular/core";
+import { BaseComponentDropDown } from "./base-component-dropdown"
+import { FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { KeevoComponentsModule } from "../../components/keevo-components.module";
+import { PrimeNgModule } from "../modules/primeng.module";
+import { KvLabelModule } from "../../components/kv-label/kv-label.module";
+import { kvErrorModule } from "../../components/kv-error/kv-error.module";
+
+@Component({
+    selector: 'app-base-dropdown',
+    template: `
+    <span>
+      <kv-label
+        [componentId]="componentId"
+        [label]="label"
+      />
+      <p-dropdown
+        appendTo="body"
+        [class]="baseInputClass"
+        [disabled]="disabled"
+        [filter]="filter"
+        [inputId]="componentId"
+        [(ngModel)]="value"
+        [options]="filteredOptions"
+        [optionLabel]="optionLabel"
+        [optionValue]="optionValue"
+        [optionDisabled]="optionDisabled"
+        [group]="group"
+        [optionGroupLabel]="optionGroupLabel"
+        [optionGroupChildren]="optionGroupChildren"
+        [showClear]="showClear"
+        [lazy]="lazy"
+        scrollHeight="250px"
+        (onBlur)="onInputBlur($event)"
+        (onClick)="onInputClick($event)"
+        (onChange)="onInputChange($event)"
+        (onFilter)="onInputFilter($event)"
+        [style]="{'width':widthField}"
+        [panelStyle]="{ width: widthField, overflow: 'auto' }"
+        styleClass="inputs"
+      >
+
+        <ng-template
+          *ngIf="showAddButton"
+          pTemplate="footer"
+        >
+          <p-divider></p-divider>
+          <div class="flex flex-wrap card-container p-1">
+            <div class="flex justify-content-center">
+              <button
+                pButton
+                label="Incluir"
+                pTooltip="Clique aqui para incluir um novo registro"
+                tooltipPosition="bottom"
+                icon="pi pi-plus"
+                class="p-button-rounded p-button-success mr-2"
+                (click)="addClick($event)"
+              ></button>
+            </div>
+          </div>
+        </ng-template>
+
+        <ng-template
+          let-selectedItem
+          pTemplate="item"
+          *ngIf="itemTemplate"
+        >
+          <ng-container
+            [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: selectedItem }"
+          >
+          </ng-container>
+        </ng-template>
+
+
+        <ng-template
+          let-item
+          pTemplate="selectedItem"
+          *ngIf="selectedItemTemplate"
+        >
+          <ng-container
+            [ngTemplateOutlet]="selectedItemTemplate"
+            [ngTemplateOutletContext]="{ $implicit: item }"
+          >
+
+          </ng-container>
+        </ng-template>
+
+      </p-dropdown>
+
+      <kv-error [hasError]="hasControlError()">{{ erroMessage() }}</kv-error>
+    </span>
+    <ng-content></ng-content>
+    `,
+    standalone: true,
+    imports: [KeevoComponentsModule, ReactiveFormsModule, FormsModule, PrimeNgModule, KvLabelModule, kvErrorModule]
+})
+export class BaseComponentDropdownNew extends BaseComponentDropDown {
+
+    @Input() formGroup!: FormGroup;
+    @Input() formControlName!: string;
+
+    @Input() dropDowValue!: any;
+    @Input() itemTemplate!: TemplateRef<any>;
+    @Input() selectedItemTemplate!: TemplateRef<any>;
+
+    override ngOnInit(): void {
+        if (this.dropDowValue)
+            this.value = this.dropDowValue;
+    }
+
+}

package/src/lib/api/base-components/base-component-dropdown.ts

@@ -0,0 +1,257 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  Type,
+} from '@angular/core';
+
+import { FormControl } from '@angular/forms';
+import { Observable, debounceTime, finalize, of } from 'rxjs';
+import { DialogService } from 'primeng/dynamicdialog';
+import { BaseComponentInput } from './base-component-input';
+import { ComponentService } from '../services/component.service';
+import { ObjectService } from '../services/object.service';
+import { filtroCombo } from '../components/dropdown/filtro.combo';
+
+@Component({
+  template: '',
+})
+export abstract class BaseComponentDropDown extends BaseComponentInput<any> implements OnInit {
+
+  @Input() filteredOptions!: any[];
+  @Input() options!: any[];
+  @Input() optionLabel!: string;
+  @Input() optionValue!: string;
+
+  /**
+   * String que será utilizada para buscar a opção no método onSelectionChange
+   * @input
+   */
+  @Input() nameForSelectionChange!: string;
+  @Input() optionDisabled!: string;
+
+  @Input() capitalize: boolean = false;
+
+  @Input() group!: boolean;
+  @Input() optionGroupLabel!: string;
+  @Input() optionGroupChildren!: string;
+
+  @Input() filter: boolean = true;
+  @Input() lazy: boolean = false;
+  @Input() loading: boolean = false;
+
+  @Input() showAddButton: boolean = false;
+  @Input() showClear: boolean = true;
+  @Input() widthField?: string;
+
+  @Output() onAddClick: EventEmitter<any> = new EventEmitter();
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+  @Output() onLoadCombo: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionChange: EventEmitter<any> = new EventEmitter();
+  @Output() onSelectionValue: EventEmitter<any> = new EventEmitter();
+  @Output() requestComplete: EventEmitter<any> = new EventEmitter();
+  @Output() onFilter: EventEmitter<any> = new EventEmitter();
+
+  prepositions: string[] = [
+    'de',
+    'da',
+    'do',
+    'em',
+    'no',
+    'na',
+    'para',
+    'por',
+    'com',
+    'a',
+    'o',
+    'e',
+  ];
+
+  constructor(
+    componentService: ComponentService,
+    private dialogService: DialogService
+  ) {
+    super(componentService);
+    this.registerOnTouched(() => { });
+  }
+
+  override ngOnInit(): void {
+    super.ngOnInit();
+    this.setPlaceHolder('Selecione um valor');
+
+    if (!this.lazy) this.carregarCombo();
+  }
+
+  protected addClick(event: Event) {
+    this.onAddClick.emit(event);
+  }
+
+  public carregarCombo(filtro?: filtroCombo): void {
+
+    if (filtro) {
+      this.carregarComboObs(this.listarCombo(filtro));
+    }
+    else {
+      this.carregarComboObs(this.listar());
+    }
+  }
+
+  protected carregarComboObs(obs: Observable<any>) {
+    if (obs) {
+      obs
+        .pipe
+        (
+          debounceTime(450),
+          this.loadingCombo()
+        )
+        .subscribe({
+          next: (data: any) => {
+            this.options = this.capitalizeOptions(data);
+            this.filteredOptions = this.options;
+            this.requestComplete.emit(true);
+          },
+          error: (error: any) => {
+            console.log(error);
+          },
+        });
+    }
+  }
+
+  public emptyMessage() {
+    return (this.lazy ? 'Digite para pesquisar' : 'Nenhum resultado encontrado');
+  }
+
+  public filterOptions(field: string, value: any): void {
+    if (this.options) {
+      let lista = ObjectService.filterObject(this.options, field, value);
+      if (lista?.length > 0) {
+        of(lista).subscribe((opts: any[]) => {
+          this.filteredOptions = this.capitalizeOptions(opts);
+        });
+      } else this.filteredOptions = [];
+    }
+  }
+
+  protected listar(): any { }
+  protected listarCombo(value: any): any { }
+
+  loadingCombo = (): any => {
+    if (!this.lazy) {
+      return (src: Observable<any>) => {
+        this.loading = true;
+        return src.pipe(finalize(() => {
+          this.loading = false;
+        }));
+      };
+    }
+  };
+
+  protected openDialog(
+    componentType: Type<any>,
+    width?: string,
+    height?: string
+  ) {
+    const ref = this.dialogService.open(componentType, {
+      width: width || '70%',
+      height: height,
+      closable: false,
+      maximizable: true,
+      data: { popup: true },
+    });
+
+    ref.onClose.subscribe((id: any) => {
+      if (id) {
+        this.listar()
+          .pipe(this.loadingCombo())
+          .subscribe((data: any) => {
+            this.options = this.capitalizeOptions(data);
+            this.filteredOptions = this.options;
+            if (id) this.formControl?.setValue(id);
+          });
+      }
+    });
+  }
+
+  protected onInputChange(event: any) {
+    this.onSelectionValue.emit(event);
+    //Em nossas implementações o metodo é chamado 2 vezes, em seua segunda chamada o event se torna o objeto selecionado e não o valor, dessa forma o if abaixo apenas emite o objeto
+    if(!event?.originalEvent){
+      this.onSelectionChange.emit(event);
+      return;
+    }
+
+    if (this.formControl) {
+      const controlName = this.getName(this.formControl as FormControl);
+      if (controlName) {
+        let currentItem = ObjectService.findObject(
+          this.options,
+          this.optionValue??controlName,
+          event?.value
+        );
+        this.onSelectionChange.emit(currentItem);
+      }
+    }
+  }
+
+  onInputClick(event: any) {
+    this.onClick.emit(event);
+  }
+
+  onInputFilter(event: any) {
+    if (event) {
+      this.onFilter.emit(event.filter)
+
+      if (event.filter) {
+        if (event.filter.length > 2) {
+          let fil = { termoPesquisa: event.filter } as filtroCombo;
+          this.carregarCombo(fil);
+          this.onLoadCombo.emit(fil);
+        }
+      }
+    }
+  }
+
+  override writeValue(value: any): void {
+    if (this.lazy && value) {
+      let fil = { id: value } as filtroCombo;
+      this.carregarCombo(fil);
+      this.onLoadCombo.emit(fil);
+    }
+    this.value = value;
+  }
+
+
+  transformCapitalize(value: string): string {
+
+    if (!value) return value;
+
+    return value
+      .split(' ')
+      .map((word, index) => {
+        if (
+          index !== 0 &&
+          this.prepositions.includes(word.toLocaleLowerCase())
+        ) {
+          return word.toLocaleLowerCase();
+        }
+        return (
+          word.charAt(0).toLocaleUpperCase() + word.slice(1).toLocaleLowerCase()
+        );
+      })
+      .join(' ');
+  }
+
+  capitalizeOptions(options: any[]): any[] {
+
+    if (this.capitalize) {
+      return options?.map((option: any) => {
+        option[this.optionLabel] = this.transformCapitalize(option[this.optionLabel]);
+
+        return option;
+      });
+    }
+    return options;
+  }
+}