appproject-components 1.0.46 → 1.0.47

package/src/lib/grid-view/grid-view.component.ts

@@ -0,0 +1,292 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { GridColuna, GridTabela, LibService } from 'appproject-lib';
+
+@Component({
+  selector: 'kb-grid-view',    
+  templateUrl: './grid-view.component.html',
+  styleUrl: './grid-view.component.scss'
+})
+export class GridViewComponent implements OnInit, OnChanges {
+  @Input() empresaId: number;
+  @Input() tabelaCampos: GridTabela;
+  @Input() dataSet: Array<any>;
+  @Input() minHeight: string = '400px';
+  @Input() inMemoryPagination: boolean = false;
+
+  @Output() selecionarItem = new EventEmitter();
+  @Output() excluirItem = new EventEmitter();
+  @Output() selecionarChecked = new EventEmitter();
+
+  selectedItem: any;
+  //inputs = inject(new InjectionToken<any>('title inputs'));
+  grupos: any[] = [{ Coluna: '', Tabela: null, Dados: null, Nivel: 0 }];
+
+  // tabelaCampos = {
+  //   Selecionar: false,
+  //   Exportar: true,
+  //   Colunas: [
+  //     { Campo: 'Id', Titulo: 'Id', Tamanho: '10%', Ordem: true, Grupo: false, Filtrar: true, OrdemStatus: 0, Tipo: 'number', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //     { Campo: 'Marca', Titulo: 'Marca', Tamanho: '25%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'string', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //     { Campo: 'Descricao', Titulo: 'Descrição', Tamanho: '25%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'string', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //     { Campo: 'Data', Titulo: 'Data', Tamanho: '20%', Ordem: true, Grupo: true, Filtrar: true, OrdemStatus: 0, Tipo: 'date', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //     { Campo: 'Valor', Titulo: 'Valor', Tamanho: '20%', Ordem: true, Grupo: false, Filtrar: true, OrdemStatus: 0, Tipo: 'number', Valores: [], FiltroOperador: '=', FiltroValor: '', FiltroVisivel: false },
+  //   ]
+  // }
+
+  // dataSet: Array<any> = [
+  //   { Id: 1, Marca: 'Apple', Descricao: 'IPhone 14', Data: '2023-05-01', Valor: 7899.99 },
+  //   { Id: 2, Marca: 'Apple', Descricao: 'MacBook Pro', Data: '2023-06-01', Valor: 17999.99 },
+  //   { Id: 3, Marca: 'Samsung', Descricao: 'Galaxy S23', Data: '2023-05-01', Valor: 6899.99 },
+  //   { Id: 4, Marca: 'Sony', Descricao: 'PS 5', Data: '2023-06-01', Valor: 4899.99 },
+  //   { Id: 5, Marca: 'Samsung', Descricao: 'Watch 23', Data: '2023-05-01', Valor: 1899.99 },
+  // ]
+
+
+
+  groups = []
+  @Input() filteredDataSet = [];
+  pageDataSet = [];
+
+
+  //array com os campos filtrados para display
+  camposDisplay = [];
+
+  //filtro
+  isFiltroOpen: boolean = false;
+  selectedColuna: any;
+  todosSelecionados: boolean = false;
+
+  //pagination
+  //página atual
+  page: number = 1;
+  //registros por página
+  @Input() pageOffset: number = 20;
+  //total de registros
+  totalRec: number;
+  //total de páginas
+  totalPages: number;
+  //indexador de paginas
+  pages: number[];  
+  start: number;
+
+
+  constructor() { }
+
+  valoresFiltro() {
+    this.tabelaCampos.Colunas.forEach(c => {
+      if (c.Filtrar) {
+        //projetar a coluna
+        let initial = [];
+        let valores = this.dataSet.map(d => d[c.Campo]);
+        c.Valores = valores.filter((value, index, self) => {
+          return self.indexOf(value) === index;
+        }).map(v => { return { Selecionado: false, Valor: v } });
+      //   console.log(c.Campo, valores);
+      //   console.log(c.Valores)
+      }
+    })
+  }
+
+  ngOnInit() {
+
+
+    //this.inicializaGrupo();
+    //this.agrupar('Marca');
+    //console.log('inputs', this.inputs);
+    //console.log('Input empresa', this.empresaId);
+    GridTabela.init(this.tabelaCampos);
+    this.valoresFiltro();
+    this.filteredDataSet = this.dataSet;
+    console.log('Init Tabela campos', this.tabelaCampos);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    console.log('On changes Tabela campos', this.tabelaCampos);
+    //evento chamado quando o dataset for atualizado
+    //inicializar vars de paginação
+    this.initPage();
+    this.todosSelecionados = false;
+  }
+
+  initPage() {
+    this.page = 1;
+    this.totalRec = this.filteredDataSet.length;
+    this.totalPages = Math.ceil(this.totalRec / this.pageOffset);    
+
+    if (this.inMemoryPagination === true) {
+      this.getRegistrosPage();
+    } else {
+      this.pageDataSet = this.filteredDataSet;
+    }
+  }
+
+  getRegistrosPage() {
+    this.start = (this.page - 1) * this.pageOffset;
+    console.log('dataset', this.filteredDataSet);
+    console.log('start', this.start);
+    console.log('offset', this.pageOffset);
+    this.pageDataSet = this.filteredDataSet.slice(this.start, (this.start + this.pageOffset));
+    console.log('page dataset', this.pageDataSet);
+  }
+
+  proximo() {
+    if (this.page < this.totalPages) {
+      this.page++;
+      this.getRegistrosPage();
+      this.gerarArrayPags();
+    }
+  }
+
+  anterior() {
+    if (this.page > 1) {
+      this.page--;
+      this.getRegistrosPage();
+      this.gerarArrayPags();
+    }
+  }
+
+  gerarArrayPags() {
+
+  }
+
+  inicializaGrupo() {
+    //inicializar o primeiro grupo 'default'
+    this.camposDisplay = this.tabelaCampos.Colunas;
+    this.grupos[0].Tabela = this.camposDisplay;
+    this.grupos[0].Dados = this.dataSet;
+  }
+
+  agrupar(campo: string) {
+    this.groups.push(campo);
+    let level = 0;
+    for (let g in this.groups) {
+      console.log(g);
+      //filtrar os dados
+      let result = this.dataSet.reduce((group, data) => {
+        const { g } = data;
+        group[g] = group[campo] ?? [];
+        group[g].push(data);
+        return group;
+      }, {});
+      console.log(result);
+    }
+
+  }
+
+  filtrarCampos(coluna = '') {
+    if (coluna != '') {
+
+    } else {
+
+    }
+  }
+
+  filtrar(col: GridColuna) {
+    //console.log('filtrar', col);
+    if (col.Valores && col.Valores.find(v => v.Selecionado) != null) {
+      const valores = col.Valores.filter(v => v.Selecionado).map(v => v.Valor);
+
+      //filtrar por valores selecionados
+      this.filteredDataSet = this.dataSet.filter(d => valores.indexOf(d[col.Campo]) > -1);
+    } else if (col.FiltroOperador && col.FiltroValor) {
+      //console.log(col.FiltroOperador, col.FiltroValor)
+      try {
+        this.filteredDataSet = this.dataSet.filter(d => {
+          switch (col.FiltroOperador) {
+            case "=":
+              return d[col.Campo] == col.FiltroValor;
+            case ">=":
+              if (col.Tipo == 'number') {
+                return LibService.stringToDecimal(d[col.Campo], true) >= LibService.stringToDecimal(col.FiltroValor, true);  
+              } else if (col.Tipo == 'data') {
+                return new Date(this.dataToString(d[col.Campo])) >= new Date(this.dataToString(col.FiltroValor));  
+              } else
+              return d[col.Campo] >= col.FiltroValor;
+            case "<=":
+              if (col.Tipo == 'number') {
+                return LibService.stringToDecimal(d[col.Campo], true) <= LibService.stringToDecimal(col.FiltroValor, true);  
+              } else
+              return d[col.Campo] <= col.FiltroValor;
+            case "tem":
+              return d[col.Campo].toString().toLowerCase().indexOf(col.FiltroValor.toLowerCase()) > -1;
+            default:
+              return true;
+          }
+
+        });
+      } catch(ex) {
+        console.log(ex);
+        this.filteredDataSet = this.dataSet;
+      }
+    }
+    col.FiltroVisivel = false;
+
+    this.initPage();
+  }
+
+  getPage() {
+
+  }
+
+  limpar() {
+    this.filteredDataSet = this.dataSet;
+  }
+
+  dataToString(data: string): string {
+    if (data) {
+      return data.split('/').reverse().join('-');
+    } else {
+      return "";
+    }
+  }
+
+  ordenar(col: GridColuna) {
+    if (col.OrdemStatus == 0 || col.OrdemStatus == -1) {
+      if (col.Tipo == 'data') {
+        this.filteredDataSet.sort((a, b) => this.dataToString(a[col.Campo]) > this.dataToString(b[col.Campo]) ? 1 : (this.dataToString(a[col.Campo]) < this.dataToString(b[col.Campo]) ? -1 : 0));
+      } else if (col.Tipo == 'number') {
+        this.filteredDataSet.sort((a, b) => LibService.stringToDecimal(a[col.Campo]) > LibService.stringToDecimal(b[col.Campo]) ? 1 : (LibService.stringToDecimal(a[col.Campo]) < LibService.stringToDecimal(b[col.Campo]) ? -1 : 0));
+      } else 
+        this.filteredDataSet.sort((a, b) => a[col.Campo] > b[col.Campo] ? 1 : (a[col.Campo] < b[col.Campo] ? -1 : 0));
+      col.OrdemStatus = 1; //asc
+    } else {
+      if (col.Tipo == 'data') {
+        this.filteredDataSet.sort((a, b) => this.dataToString(a[col.Campo]) < this.dataToString(b[col.Campo]) ? 1 : (this.dataToString(a[col.Campo]) > this.dataToString(b[col.Campo]) ? -1 : 0));
+      } else if (col.Tipo == 'number') {
+        this.filteredDataSet.sort((a, b) => LibService.stringToDecimal(a[col.Campo], true) < LibService.stringToDecimal(b[col.Campo], true) ? 1 : (LibService.stringToDecimal(a[col.Campo], true) > LibService.stringToDecimal(b[col.Campo], true) ? -1 : 0));
+      } else 
+      this.filteredDataSet.sort((a, b) => a[col.Campo] < b[col.Campo] ? 1 : (a[col.Campo] > b[col.Campo] ? -1 : 0));
+      col.OrdemStatus = -1; //desc
+    }
+  }
+
+  setFiltroOpen(col: any) {
+    col.FiltroVisivel = !col.FiltroVisivel
+    if (col.FiltroVisivel) {
+      this.selectedColuna = col;
+      //console.log(this.selectedColuna);
+    }    
+  }
+
+  selecionarTodos() {
+    //this.todosSelecionados = !this.todosSelecionados;
+    this.filteredDataSet.forEach(item => {
+      item[this.tabelaCampos.CampoSelecionar] = this.todosSelecionados;
+    });
+    this.selecionarChecked.emit();
+  }
+
+  selecionarLinha(item: any) {
+    this.selecionarItem.emit(item);
+    this.selectedItem = item;
+  }
+
+  excluirLinha(item: any) {
+    this.excluirItem.emit(item);
+  }
+
+  //check
+  selecionadoChecked() {
+    this.selecionarChecked.emit();
+  }
+}

package/src/lib/input-area/input-area.component.html

@@ -0,0 +1,30 @@
+<!-- 
+  maxlength="{{ max }}"
+-->
+<div>
+    <ion-item lines="none" style="--background-focused: transparent;" [class]="itemClass" #itemArea>
+      <ion-label position="{{ labelPosition }}">{{ label }}</ion-label>
+      <!-- formControlName="{{ formControlName }}"  -->
+      <textarea #inputArea        
+        [placeholder]="placeholder"       
+        [maxLength]="max"
+        (ionBlur)="onBlur()"
+        [value]="data"
+        [rows]="linhas"      
+        (input)="writeValue(inputArea.value)"
+        [disabled]="readonly"
+        (focus)="entered()"
+        ></textarea>
+    </ion-item>
+  
+    <div class="validation-errors" *ngIf="form">
+  
+      <ng-container *ngFor="let validation of validation_messages">
+        <div class="error-message"
+          *ngIf="form.get(formControlName)?.hasError(validation.type) && (form.get(formControlName)?.dirty || form.get(formControlName)?.touched)">
+          &#8226; {{ validation.message }}
+        </div>
+      </ng-container>
+  
+    </div>
+  </div>

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

@@ -0,0 +1,68 @@
+ion-label {
+    margin-bottom: 4px !important;
+}
+
+ion-textarea {
+    //padding: 4px;
+    padding: var(--input-padding, 8px) !important;
+    border: 1px solid darkgray;
+    border-radius: 4px;    
+    width: 100%;
+    margin-top: 2px;    
+    /*max-height: 29px;*/
+}
+
+textarea {
+    //padding: 4px;
+    padding: var(--input-padding, 8px) !important;
+    border: 1px solid darkgray;
+    border-radius: 4px;    
+    width: 100%;
+    margin-top: 2px;    
+    resize: none;
+    /*max-height: 29px;*/
+    background-color: white;
+
+    //scrollbar-width: thin; /* or auto for default width */
+    //scrollbar-color: #4CAF50 #f1f1f1; /* thumb and track colors */
+    
+}
+
+    //ion-item::part(native) {    
+    /* não funcionou */
+
+    textarea::-webkit-scrollbar {
+        //width: 0.5em !important;
+        width: 10px;
+        height: 10px;
+    }
+    
+    textarea::-webkit-scrollbar-track {
+        //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+        background: #f1f1f1;
+    }
+    
+    textarea::-webkit-scrollbar-thumb {
+        //background-color: darkgrey;
+        //outline: 1px solid slategrey;
+        border-radius: 12px;
+        background: var(--scroll-color-thumb, #808080);
+    }
+    textarea::-webkit-scrollbar-thumb:hover {
+        background: var(--scroll-color-hover, #5c5c5c);
+    }
+
+    textarea:focus {
+        outline: none !important;
+        //--focus-color: blue;
+        border: 1px solid lightblue !important;
+        ion-label{
+            color: var(--ion-color-label-focus, blue) !important;
+        }
+    }    
+    //}
+    .item-has-focus {
+        ion-label {
+            color: var(--ion-color-label-focus, blue) !important;
+        }    
+    }

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

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

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

@@ -0,0 +1,69 @@
+import { Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BaseInputComponent } from '../baseInputComponent';
+
+@Component({
+  selector: 'kb-input-area',
+  templateUrl: './input-area.component.html',
+  styleUrls: ['./input-area.component.scss', './../baseComponent.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputAreaComponent,
+    multi: true
+  }]
+})
+export class InputAreaComponent extends BaseInputComponent implements OnInit, ControlValueAccessor {
+  @Input() linhas: number = 5;
+  
+  @ViewChild("itemArea", {read: ElementRef}) itemArea: any;
+  //control value acessor
+  public data: string | any;
+  private onChange: Function = (data: string) => {};
+  private onTouch: Function = () => {};
+  private disabled: boolean = false;
+  public console = console;
+
+  writeValue(value: string | any): void {
+    //console.log('write value', value);
+    this.onChange(value);
+    this.data = value;
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = this.disabled;
+  }
+  constructor(private renderer: Renderer2) { 
+    super();
+  }
+
+  override ngOnInit() {}
+
+  onBlur() {
+    //remover classe do ion-item
+    setTimeout(() => {
+      //this.renderer.addClass(document.getElementById("item-select"), "item-has-focus");
+      this.renderer.removeClass(this.itemArea.nativeElement, "item-has-focus");
+      //console.log('select focused', document.getElementById("item-select"));
+    }, 200);
+    
+    if (this.form) {
+      this.form.get(this.formControlName)?.markAsTouched();
+    }
+  }
+
+  entered() {
+    //adicionar classe ao ion-item
+    // console.log('select focused');
+    setTimeout(() => {
+      //this.renderer.addClass(document.getElementById("item-select"), "item-has-focus");
+      this.renderer.addClass(this.itemArea.nativeElement, "item-has-focus");
+      //console.log('select focused', document.getElementById("item-select"));
+    }, 200);
+    
+  }
+}

package/src/lib/input-arquivo/input-arquivo.component.html

@@ -0,0 +1,11 @@
+<!-- style="box-shadow: #4c8dff 0px 3px 3px 0.05px" -->
+<div style="text-align:center;">
+    <ion-button [fill]="btnFill" size="normal" [color]="btnColor" 
+      (click)="showImageBrowser()" [expand]="btnExpand" [disabled]="readOnly">
+      <ion-icon *ngIf="showIcon" class="ion-padding-end" [slot]="iconSlot" [src]="iconSrc" [name]="icon"></ion-icon>
+      {{ caption }}
+    </ion-button>
+    <input type="file" id="upimgfile" name="uploadfile" #inputNome [accept]="arquivoTipos" (change)="loadImagem()"
+      style="display: none;" />
+  </div>
+  

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

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

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

@@ -0,0 +1,140 @@
+import { Component, Input, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'kb-input-arquivo',
+  templateUrl: './input-arquivo.component.html',
+  styleUrls: ['./input-arquivo.component.scss'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InputArquivoComponent,
+    multi: true
+  }]
+})
+export class InputArquivoComponent implements OnInit, ControlValueAccessor {
+  @Input() nomeArquivo: string;
+
+  //@Input() disabled: boolean = false;
+
+  @Input() caption: string;
+  @Input() pasta: string;
+  @Input() subir: boolean = false;
+  @Input() callback = new EventEmitter();
+  @Input() tipoArquivo: string = "image/*";
+  @Output() fileSelected = new EventEmitter();
+  @Input() form: boolean = false;
+  @Input() showIcon: boolean = false;
+  @Input() icon: string;
+  @Input() iconSrc: string; ///assets/icon/image_primary_24dp.svg
+  @Input() btnExpand: string = "block";
+  @Input() btnColor: string = "primary";
+  @Input() btnFill: string = "outline";
+  @Input() iconSlot: string = "start";
+  @Input() arquivoTipos: string = "image/*";
+  @Input() readOnly: boolean = false;
+
+  //imagem
+  @ViewChild('inputNome', { read: ElementRef, static: true }) myInput;
+  captureDataUrl: string;
+  public formFile: any;
+  public sucessoEvent: Subject<boolean> = new Subject();
+
+  data: string;
+  filename: string;
+
+  private onChange: Function = (selectedColor: string) => { };
+  private onTouch: Function = () => { };
+  private disabled: boolean = false;
+
+  showImageBrowser() {
+    this.myInput.nativeElement.click();
+  }
+
+  writeValue(value: string): void {
+    this.onChange(value);
+    this.data = value;
+    if (this.callback)
+      this.callback.emit(this.filename);
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = this.disabled;
+  }
+
+  constructor() {
+
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  loadImagem() {
+    //console.log(this.myInput);
+    this.formFile = this.myInput.nativeElement.files[0];
+     
+    if (this.fileSelected) {
+      this.fileSelected.emit({ content: this.formFile, name: this.myInput.nativeElement.files[0].name });
+    }
+
+    if (this.form) {
+      //this.formFile = this.myInput.nativeElement.files[0];
+      this.sucessoEvent.next(true);
+
+    } else {
+      //this.formFile = this.myInput.nativeElement.files[0];
+      this.getBase64FromFile(this.myInput.nativeElement.files[0])
+        .then(result => {
+          //console.log('file: ', result.toString());
+          //console.log('nome do arquivo: ', this.nomeArquivo.toLowerCase());
+          let searchstr = result.toString().substring(0, result.toString().indexOf('base64,')) + 'base64,';
+          console.log('searchstring', searchstr);
+          if (this.subir) {
+            this.captureDataUrl = result.toString().replace(searchstr, '');
+          } else {
+            this.captureDataUrl = result.toString();
+          }
+          //this.utils.showToast('Imagem carregada em memória.');
+          this.sucessoEvent.next(true);
+          console.log('file', this.myInput.nativeElement.files[0]);
+          this.filename = this.myInput.nativeElement.files[0].name;
+          this.writeValue(this.captureDataUrl);
+
+
+
+          // if (this.nomeArquivo && this.subir) {
+          //   this.arquivoService.setImagem({ Nome: this.nomeArquivo, Conteudo: this.captureDataUrl, Status: 0, Pasta: this.pasta })
+          //     .subscribe(result => {
+          //       console.log('result set imagem', result);
+          //       if (result.Status == 200) {
+          //         this.utils.showToast('Sucesso!');
+          //       } else {
+          //         this.utils.showAlert('Erro. Tente mais tarde.' + result.Conteudo);
+          //       }
+          //     }, error => {
+          //       this.utils.showAlert('Erro. Tente mais tarde.');
+          //     })
+          // }
+
+        }).catch(error => {
+          this.sucessoEvent.next(false);
+        })
+    }
+  }
+
+  //util
+  getBase64FromFile(file: File) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+  }
+}