appproject-components 1.0.45 → 1.0.47

package/src/lib/input-pesquisa/input-pesquisa.component.scss

@@ -0,0 +1,127 @@
+/*
+ion-label {
+    margin-bottom: 4px !important;
+    opacity: 1 !important;
+}
+*/
+
+/*
+ion-input {
+    padding: var(--input-padding, 4px);
+    border: 1px solid darkgray;
+    border-radius: 4px;        
+    width: 100%;
+    margin-top: 2px;    
+    max-height: 29px;
+}
+*/
+
+/*
+input:focus {
+    border: 1px solid lightblue !important;
+    ion-label{
+        --color: blue !important;
+    }
+}
+*/
+
+/*
+.padding {
+    //inner-padding-end: auto; --padding-start: auto;
+    padding: auto;
+    
+}
+*/
+/*
+.no-padding {
+    --inner-padding-end: 0px; --padding-start: 0px;    
+    --padding-bottom: 0px;
+    --inner-padding-bottom: 0px;
+    height: 55px !important;
+}
+*/
+
+/*
+.no-padding-no-height {
+    --inner-padding-end: 0px; --padding-start: 0px;    
+    --padding-bottom: 0px;
+    --inner-padding-bottom: 0px;    
+}
+*/
+
+/*
+.padding-top {
+    --padding-top: 0px;
+}
+*/
+
+.pesquisa-select {
+    display:block; 
+    position:absolute; 
+    top: 58px; 
+    left: 20px; 
+    width: 100%; 
+    z-index: 800; 
+    font-size: 16px;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+
+    option {
+        overflow-y: hidden;
+    }
+
+    option:hover, option:checked {
+        background-color: lightblue;
+    }
+}
+
+.pesquisa-list {
+    display:block; 
+    
+    //position:absolute;     
+    //top: 58px; 
+    //left: 20px; 
+
+    position: absolute;
+    margin-left: 20px;
+    margin-top: -4px;
+
+    // width: 100%; 
+    width: calc(100% - 50px);
+    z-index: 800; 
+    //font-size: 16px;
+    //font-family: Roboto, "Helvetica Neue", sans-serif;
+    border: 1px lightgrey solid;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;    
+    padding: 0px;
+}
+
+.pesquisa-item {
+    --inner-padding-top: 0px; 
+    --inner-padding-bottom: 0px; 
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+    --min-height: 30px !important;
+    font-size: 12px;
+    button {
+        padding: 0px;
+    }
+}
+
+.selected-item {
+    background-color: lightblue;
+}
+
+.botao-limpar {
+    margin-top: var(--margin-botao-limpar, 25px);
+    margin-inline-start: 4px !important; 
+    --padding-start:2px; 
+    --padding-end: 2px; 
+    margin-bottom: 2px !important;
+}
+
+[hidden] {
+    display: none !important;
+}

package/src/lib/input-pesquisa/input-pesquisa.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputPesquisaComponent } from './input-pesquisa.component';
+
+describe('InputPesquisaComponent', () => {
+  let component: InputPesquisaComponent;
+  let fixture: ComponentFixture<InputPesquisaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InputPesquisaComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InputPesquisaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/input-pesquisa/input-pesquisa.component.ts

@@ -0,0 +1,558 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, EventEmitter, Inject, Input, OnInit, Predicate, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { IonSelect, ModalController } from '@ionic/angular';
+import { Subject, Subscription, of } from 'rxjs';
+import { BaseInputComponent } from '../baseInputComponent';
+import { debounceTime, switchMap } from 'rxjs/operators'
+import { ModelTreeviewComponent } from '../model-treeview/model-treeview.component';
+import { LibConfig } from '../lib-config';
+//import { LibConfig, LibConfigService } from '../appproject-components.module';
+
+@Component({
+  selector: 'kb-input-pesquisa',
+  templateUrl: './input-pesquisa.component.html',
+  styleUrls: ['./input-pesquisa.component.scss', './../baseComponent.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputPesquisaComponent,
+    multi: true
+  }]
+})
+export class InputPesquisaComponent extends BaseInputComponent implements OnInit, ControlValueAccessor {
+
+  podePesquisar: boolean = true;
+  @Input() textoPesquisa: string = '';
+  selectElementVisivel: boolean = false;
+  listaPesquisa: any[] = [];
+  selectedItem: any;
+  @Input() override max: string = '30';
+  private pesquisaSubject: Subject<string> = new Subject();
+
+  @Input() filterFunction: Predicate<any> | null = null;
+  @Input() selectId: string = 'selectElement';
+  @Input() campoId: string = 'Id';
+  @Input() campoPaiId: string = 'PaiId';
+  @Input() campoDisplay: string = 'Descricao';
+  @Input() tipo: string = '';
+  //@ViewChild('selectElement', { read: ElementRef, static: true }) selectElement;
+  @ViewChild('selectElement', { static: false }) selectElement: IonSelect | null = null;
+
+  @Input() pesquisaChange = new EventEmitter();
+  @Input() pesquisaAction?: Function;
+  @Input() limpar?: Function;
+  //parametros para chamada API
+  //endpoint para pesquisa por digitação
+  @Input() url: string = '';
+  @Input() urlItem: string = '';
+  //endpoint para montar a arvore, se estiver vazia será usado o campo 'url'
+  @Input() urlTree: string = '';
+  @Input() empresa: number = 0;
+  @Input() loadInit: boolean = false;
+  @Input() treeTitulo: string;
+
+  //planoContas: number;
+
+  //control value acessor
+  public data: number | any;
+  private onChange: Function = (data: number) => { };
+  private onTouch: Function = () => { };
+  private disabled: boolean = false;
+  public console = console;
+
+  modelChanged: Subject<any> = new Subject<any>();
+  modelChangeSubscription?: Subscription;
+
+  writeValue(value: number | any): void {
+    //console.log('write value', value);
+    this.onChange(value);
+    this.data = value;
+    if (value == null || value == 0) {
+      this.writePesquisa('');
+      this.selectedItem = null;
+    } else {
+      if (this.loadInit == true) {
+        this.loadInit = false;
+        this.modelChanged.next(value);
+        //this.carregaItemIdParaLista(value);
+      } else {
+        //console.log(this.selectedItem);
+        if (!this.selectedItem || (this.selectedItem && this.selectedItem[this.campoId] != value)) {
+          console.log('Id diferente');
+          this.modelChanged.next(value);
+          //this.carregaItemIdParaLista(value);
+        }
+      }
+    }
+
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = this.disabled;
+  }
+
+  BASE_API = this.config.apiUrl;
+
+  constructor(@Inject('LibConfigService') private config: LibConfig,
+    private httpClient: HttpClient,
+    private modalCtrl: ModalController) {
+    super();
+
+    this.modelChangeSubscription = this.modelChanged
+      .pipe(debounceTime(500)
+      )
+      .subscribe(data => {
+        this.carregaItemIdParaLista(data);
+      });
+  }
+
+  onBlur(event: any) {
+    console.log('blur', event);
+    //console.log(event.detail.relatedTarget);
+    if (event.detail.relatedTarget == null || event.detail.relatedTarget.id.indexOf(this.selectId + 'IonItem') == -1) {
+      //console.log("true", event.detail.relatedTarget.id);
+      //pesquisar item na lista
+      if (!this.existeNaListaTexto(this.textoPesquisa, true)) {
+        this.limparClick();
+      }
+
+      this.dropDownPesquisa(0);
+      if (this.form) {
+        this.form.get(this.formControlName)?.markAsTouched();
+      }
+    }
+  }
+
+  override ngOnInit() {
+    //tratar urls
+    this.url = this.url.startsWith('http') ? this.url : `${this.BASE_API}/${this.url}`;
+    this.urlItem = this.urlItem.startsWith('http') ? this.urlItem : `${this.BASE_API}/${this.urlItem}`;
+
+    this.pesquisaSubject.pipe(switchMap((url) => {
+      //this.console.log('subject url:', url);      
+      if (!this.isEmpty(url)) {
+        return this.httpClient.get(url);
+        //return of(url);
+      }
+      else
+        return of([]);
+    }))
+      .subscribe({
+        next: (result: any) => {
+          //this.listaPesquisa = result;
+          this.console.log('subject subscribe result:', result);
+          this.listaPesquisa = [];
+
+          if (result && result.length > 0) {
+            if (this.filterFunction) {
+              result = result.filter(this.filterFunction);
+            }
+
+            result.forEach((ent: any, index: any) => {
+              this.listaPesquisa.push({ ...ent, Index: index, Selected: false });
+            });
+          }
+
+          this.podePesquisar = true;
+          if (this.listaPesquisa.length > 0) {
+            this.dropDownPesquisa(this.listaPesquisa.length);
+          }
+        }
+        , error: (error) => {
+          this.podePesquisar = true;
+          console.log('erro pesquisa', error);
+        }
+      });
+  }
+
+  writePesquisa(value: string | any): void {
+    //console.log('write pesquisa', value);
+    this.textoPesquisa = value;
+  }
+
+  showPesquisa(e: any): void {
+    //console.log('show pesquisa', e.keyCode);
+    var self = this;
+    const index = e.target.selectionStart >= 1 ? (e.target.selectionStart - 1) : 0;
+    //console.log(index, 'valor ', event.target.value, 'char ', event.target.value.charCodeAt(index));
+    const keyAt = e.target.value.charCodeAt(index);
+    /*
+    if ((e.keyCode >= 48 && e.keyCode <= 57) ||
+      (keyAt >= 48 && keyAt <= 57) ||
+      (e.keyCode >= 65 && e.keyCode <= 90) ||
+      (e.keyCode >= 96 && e.keyCode <= 105) ||
+      (e.keyCode == 8)) {
+        */
+    if (e.keyCode != 40 && e.keyCode != 38) {
+      if (!self.podePesquisar) {
+        return;
+      }
+      let filtro = self.textoPesquisa;
+      if (filtro != null && filtro != '' && filtro.length >= 2) {
+        self.pesquisarEntidade(filtro);
+
+      }
+      else {
+        if (e.keyCode == 8 && !filtro) {
+          this.limparClick();
+        }
+      }
+    }
+
+    else {
+      if (e.keyCode == 40 || e.keyCode == 38) {
+        self.dropDownPesquisa(self.listaPesquisa.length);
+        if (self.selectElementVisivel == true) {
+          //let select = self.selectElement; //document.getElementById(self.TemplateSelect1Id());
+
+          //ion-list
+          //selecionado
+          //console.log(self.listaPesquisa);
+          let inc = e.keyCode == 40 ? 1 : -1;
+          let selected = self.listaPesquisa.find(s => s['Selected'] === true);
+          let cur = 0;
+          if (selected != null) {
+            cur = selected['Index'];
+            //desmarcar o atual
+            selected['Selected'] = false;
+            cur = cur + inc;
+          } else {
+            cur = 0;
+          }
+
+          if (cur < 0) {
+            cur = self.listaPesquisa.length - 1;
+          } else if (cur >= self.listaPesquisa.length) {
+            cur = 0;
+          }
+
+          let novoSelected = self.listaPesquisa.find(n => n['Index'] === cur);
+          if (novoSelected != null) {
+            novoSelected['Selected'] = true;
+            self.selectedItem = novoSelected;
+            self.textoPesquisa = novoSelected[self.campoDisplay];
+          }
+          /*
+          let select = document.getElementById(this.selectId) as any;
+          console.log('select Element', select)
+          if (select != null) {
+            let inc = e.keyCode == 40 ? 1 : -1;
+            let cur = select.selectedIndex;
+            if (cur == NaN) cur = -1;
+            select.selectedIndex = cur + inc;
+            if (select.selectedIndex >= 0 && select.selectedIndex < self.listaPesquisa.length) {
+              self.selectedItem = self.listaPesquisa[select.selectedIndex];
+              if (self.selectedItem != null) {
+                self.textoPesquisa = self.selectedItem[self.campoDisplay];
+              }
+            }
+          }
+          */
+        }
+
+      } else
+        if (e.keyCode == 13) {
+          console.log('enter key', e)
+          //self.selecionarComboClick(e);
+          self.selecionarComboClick(null);
+          //return false;
+        } else if (e.keyCode == 27) {
+          //ESC
+          self.dropDownPesquisa(0);
+        }
+    }
+
+  }
+
+  highlight(texto: string): string {
+    let index = texto.toLowerCase().indexOf(this.textoPesquisa.toLowerCase());
+    //console.log(index);
+    if (index >= 0) {
+      return texto.substring(0, index) + '<strong>' + texto.substring(index, index + this.textoPesquisa.length) + '</strong>' + texto.substring(index + this.textoPesquisa.length);  //texto.replace(this.textoPesquisa, `<strong>${this.textoPesquisa}</strong>`);
+    } else {
+      return texto;
+    }
+  }
+
+  selecionarComboClick(item: any) {
+    // console.log(item);
+    var self = this;
+    // console.log('combo click', self);
+
+    /*
+    let select = document.getElementById(this.selectId) as any;
+    if (select.selectedIndex >= 0) {
+      self.selectedItem = self.listaPesquisa[select.selectedIndex];
+    }
+    console.log('selected', this.selectedItem);
+    //self.selectedItem = this.listaPesquisa.find(i => i[this.campoId] == e);
+    if (self.selectedItem != null) {
+      self.textoPesquisa = self.selectedItem[self.campoDisplay];
+      self.writeValue(self.selectedItem[self.campoId]);
+      if (e != null) {
+        self.selectElementVisivel = false;
+        if (self.action != null) {
+          self.action(self.selectedItem(), e);
+        }
+      }
+    }
+    else {
+      self.selectElementVisivel = false;
+    }
+    */
+    // pesquisar selecionado
+    // console.log(this.listaPesquisa);
+    let selected = this.listaPesquisa.find(s => s['Selected'] === true);
+
+    // if (!selected) {
+    //   console.log(this.campoId, item);
+    //   selected = this.listaPesquisa.filter( s => s[this.campoId] == item[this.campoId]);
+    // }
+
+    //se o item form passado como parametro (click no ion-item)
+    if (item != null) {
+      if (selected != null) {
+        selected['Selected'] = false;
+      }
+      item['Selected'] = true;
+      selected = item;
+    }
+    if (selected != null) {
+      self.selectedItem = selected;
+      self.textoPesquisa = selected[self.campoDisplay];
+      self.writeValue(selected[self.campoId]);
+      self.selectElementVisivel = false;
+      //console.log('action', self.change);
+      if (self.pesquisaChange != null) {
+        self.pesquisaChange.emit(self.selectedItem);
+      }
+    } else {
+      self.selectElementVisivel = false;
+    }
+    // this.listaPesquisa.forEach( pesquisa => {
+    //   console.log(pesquisa, self.data);
+    // } );
+    // console.log(this.textoPesquisa);
+  }
+
+  selecionarComboChange(e: any) {
+    var self = this;
+    console.log('combo change', e);
+    self.selectedItem = this.listaPesquisa.find(i => i[this.campoId] == e);
+    if (self.selectedItem != null) {
+      self.writeValue(e);
+      self.textoPesquisa = self.selectedItem[self.campoDisplay];
+      if (e != null) {
+        self.selectElementVisivel = false;
+        if (self.pesquisaChange != null) {
+          self.pesquisaChange.emit(self.selectedItem);
+        }
+      }
+    }
+    else {
+      self.selectElementVisivel = false;
+    }
+  }
+
+  dropDownPesquisa(length: number) {
+    var self = this;
+    if (self.listaPesquisa != null && self.listaPesquisa.length > 0) {
+      if (length == -1) {
+        length = self.listaPesquisa.length;
+      }
+      self.selectElementVisivel = length == 0 ? false : true;
+
+      //console.log(this.selectElement);
+      //this.selectElement.open();
+
+      /*
+      //let element = this.selectElement;
+      let element = document.getElementById(this.selectId);
+      console.log('dropDown', element);
+      (element as any).size = length + 1;
+      if (length == 0) {
+        self.selectElementVisivel = false;
+      } else {
+        self.selectElementVisivel = true;
+      }
+      */
+    }
+  }
+
+  pesquisarEntidade(filtro: string) {
+    let url = this.url.replace('<<FILTRO>>', filtro).replace('<<EMPRESA>>', this.empresa.toString());
+    console.log('pesquisarEntidade url', url);
+    this.podePesquisar = false;
+    this.pesquisaSubject.next(url);
+  }
+
+  pesquisarEntidadeOld(filtro: string) {
+    let url = this.url.replace('<<FILTRO>>', filtro).replace('<<EMPRESA>>', this.empresa.toString());
+    console.log('pesquisarEntidade url', url);
+    this.podePesquisar = false;
+    this.httpClient.get<any>(url)
+      .subscribe({ next: (result: any) => {
+        //this.listaPesquisa = result;
+        if (this.filterFunction) {
+          result = result.filter(this.filterFunction);
+        }
+        this.listaPesquisa = [];
+        result.forEach((ent: any, index: number) => {
+          this.listaPesquisa.push({ ...ent, Index: index, Selected: false });
+        });
+
+        this.podePesquisar = true;
+        if (this.listaPesquisa.length > 0) {
+          this.dropDownPesquisa(this.listaPesquisa.length);
+        }
+      }, error: error => {
+        console.log('erro pesquisa', error);
+        this.podePesquisar = true;
+      }});
+  }
+
+  existeNaLista(id: number, setRegistro: boolean = false): boolean {
+    if (this.listaPesquisa && this.listaPesquisa.length > 0) {
+      let existe = this.listaPesquisa.find(l => l[this.campoId] === id);
+      if (existe) {
+        if (setRegistro) {
+          this.selectedItem = existe;
+          this.selecionarComboClick(this.selectedItem);
+        }
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  existeNaListaTexto(texto: string, setRegistro: boolean = false): boolean {
+    console.log("existe texto:", texto, this.campoDisplay, this.listaPesquisa);
+    if (this.listaPesquisa && this.listaPesquisa.length > 0) {
+      let existe = this.listaPesquisa.find(l => l[this.campoDisplay].toUpperCase() === texto.toUpperCase());
+      if (existe) {
+        if (setRegistro) {
+          this.selectedItem = existe;
+          this.selecionarComboClick(this.selectedItem);
+        }
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  }
+
+  validarItemSelecionado(setarRegistro: boolean = false): boolean {
+    console.log('validar selecionado');
+    //passar pela função de filtro
+    let valido = false;
+    if (this.selectedItem) {
+      if (this.filterFunction) {
+        let existe = [{ ...this.selectedItem }].filter(this.filterFunction);
+        if (existe != null && existe.length > 0) {
+          valido = true;
+        }
+      } else {
+        valido = true;
+      }
+      if (valido && setarRegistro) {
+        this.selecionarComboClick(this.selectedItem);
+      }
+
+      return valido;
+    } else {
+      return false;
+    }
+  }
+
+  carregaItemIdParaLista(id: number) {
+    let url = this.urlItem.replace('<<ID>>', id.toString());
+    console.log(this.urlItem);
+    console.log('pesquisar ID url', url);
+    this.podePesquisar = false;
+    this.httpClient.get<any>(url)
+      .subscribe({ next: (result: any) => {
+        this.listaPesquisa = [];
+        this.listaPesquisa.push({ ...result, Index: 0, Selected: true });
+        this.podePesquisar = true;
+        if (this.listaPesquisa.length > 0) {
+          this.selectedItem = this.listaPesquisa[0];
+          this.selecionarComboClick(this.selectedItem);
+        }
+      }, error:  error => {
+        console.log('erro pesquisa', error);
+        this.podePesquisar = true;
+      }});
+  }
+
+  limparClick() {
+    this.writeValue(null);
+    this.writePesquisa(null);
+    this.listaPesquisa = [];
+    this.dropDownPesquisa(0);
+    //this.podePesquisar = true;
+    this.pesquisaSubject.next('');
+    if (this.limpar) {
+      this.limpar();
+    }
+  }
+
+  verificarPesquisa() {
+    //TODO: verificar se o texto corresponde com um item da lista
+    this.selecionarComboClick(null);
+  }
+
+  async pesquisarClick() {
+    /*
+    if (this.pesquisaAction != null) {
+      this.pesquisaAction();
+    }
+    */
+    //pesquisaCategoria
+    console.log(this.filterFunction, this.url, this.urlTree);
+
+    const modal = await this.modalCtrl.create({
+      component: ModelTreeviewComponent,
+      componentProps: {
+        //campoId: this.campoId,
+        //campoPai: this.campoPaiId,
+        //campoLabel: this.campoDisplay,
+        textoPesquisa: this.textoPesquisa,
+        filterFunction: this.filterFunction,
+        empresaSelecionadaId: this.empresa,
+        tipo: this.tipo,
+        //especifico
+        //planoContas: this.planoContas,
+        url: this.isEmpty(this.urlTree) ? this.url : this.urlTree,
+        titulo: this.treeTitulo,
+        campoLabel: this.campoDisplay,
+        campoId: this.campoId,
+        campoPai: this.campoPaiId
+      },
+      cssClass: 'my-custom-modal-pesquisa'
+    });
+
+    modal.onDidDismiss().then(data => {
+      let result = data['data'];
+      console.log(result);
+      if (result != null && result.Id > 0) {
+        this.carregaItemIdParaLista(result.Id);
+      }
+    });
+    modal.present();
+
+  }
+
+  isEmpty(valor: string | any) {
+    return valor == null || valor == undefined || valor == ''
+  }
+}