@dev-tcloud/tcloud-ui 0.0.95 → 0.0.96

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.component.ts

@@ -0,0 +1,508 @@
+import { DatePipe } from '@angular/common';
+import { Component, Input, OnChanges, OnInit, Output, SimpleChanges, EventEmitter, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { TCCondition, TCDataFilters, TCFiltersType } from './tcloud-ui-filters';
+
+@Component({
+  selector: 'tcloud-ui-filters',
+  templateUrl: './tcloud-ui-filters.component.html',
+  styleUrls: ['./tcloud-ui-filters.component.scss']
+})
+export class TCloudUiFiltersComponent implements OnInit, OnChanges {
+
+  datepickers = [] as any;
+
+  @ViewChild('_formulario')  _formulario: NgForm | undefined;
+
+  inputs: string[] = [];
+
+  show_filters: boolean = false;
+
+  search_data: any | undefined;
+
+  private _data: any | undefined;
+  @Input() set data(data: any){
+    // this._data = JSON.parse(JSON.stringify(data));
+  }
+  get data(): any{ return this._data; }
+
+  private _filters: TCDataFilters | undefined;
+  @Input() set filters(filters: any){
+    //this._filters = filters;
+  }
+  get filters(): any{ return this._filters; }
+
+  private _submitText: string = 'Filtrar';
+  @Input() set submitText(v: string){ 
+    if( v && v !== this._submitText ){
+      this._submitText = v;
+    }
+  }
+  get submitText():string{ return this._submitText; }
+
+  @Input() btnSubmitClass: string = 'btn-new-grey';
+  @Input() useOnChangeSubmit: boolean = true; // useOnChangeSubmit - Submit automatico quando for alterado quanquer input
+  @Input() useButtonSubmit: boolean = false; // useButtonSubmit - Exibe um botão de submit e não executa a busca automaticamente
+  @Input() useNormalizeCaseSensitive: boolean = true; // useNormalizeCaseSensitive - Não valida caixa alta ou baixa e caracteres especiais
+  @Input() useRangeDate: boolean = true;
+  @Input() useFilterAccept: boolean = false;
+
+  @Output() result = new EventEmitter<any>();
+  @Output() onFilter = new EventEmitter<any>();
+  @Output() onChange = new EventEmitter<any>();
+  @Output() onSubmit = new EventEmitter<any>();
+
+  descriptionStart: string = '';
+  descriptionStop: string = '';
+
+  private first_active_filter: boolean = false;
+
+  start_stop: boolean = false;
+  start_stop_width: number = 0;
+  start_stop_und: string = ''; // px ou %
+
+  constructor(
+    private datepipe: DatePipe
+  ) { }
+
+  ngOnInit(): void {
+    setTimeout(() => {
+      if( this.filters && (this.filters).length > 0 ){
+        for(let i = 0; i < (this.filters).length; i++){
+          if( this.filters[i].value ){
+            if( this.filters[i].type === 'datetime-local' ){
+              try {
+                this.filters[i].searchText = new Date( `${this.filters[i].value}` );
+              } catch (error) {}
+            }else{
+              this.filters[i].searchText = this.filters[i].value;
+            }
+            this.first_active_filter = true;
+          }
+        }      
+      }
+      this.start_stop = (this.useRangeDate) ? this.is_start_stop_datetime() : false;
+      this.toSubmit();
+    });
+  }
+
+  is_start_stop_datetime(){
+    let start = false;
+    let stop = false;
+    if( this.filters && (this.filters).length > 0 ){
+      this.start_stop_width = 0;
+      for(let i = 0; i < (this.filters).length; i++){
+        if( this.filters[i].id === 'start' ){
+          start = true;
+          this.start_stop_width += this.getValueWidth(this.filters[i].width);
+          this.start_stop_und = this.getUnidade(this.filters[i].width);
+          this.descriptionStart = this.filters[i].description;
+        }
+        if( this.filters[i].id === 'stop' ){
+          stop = true;
+          this.start_stop_width += this.getValueWidth(this.filters[i].width);
+          this.descriptionStop = this.filters[i].description;
+        }
+      }
+    }
+    return ( start && stop ) ? true : false;
+  }
+
+  getValueWidth(v: string):number {
+    let und = this.getUnidade(v);
+    v = (v).replace(und, '');
+    return +(v);
+  }
+
+  getUnidade(v: string):string {
+    let und = '%';
+    if( v && (v).includes('px') ){
+      und = 'px';
+    }
+    return und;
+  }
+ 
+
+  ngOnChanges(changes: SimpleChanges) {  
+    
+    if( changes && changes['data'] ){
+      const data = changes['data'].currentValue;
+      if( this._data !== data ){
+        this._data = JSON.parse(JSON.stringify(data));
+        this.search_data = JSON.parse(JSON.stringify(data));
+        this.init();
+      }
+    }
+
+    if( changes && changes['filters'] ){
+      const filters = changes['filters'].currentValue;
+      if( this._filters !== filters ){
+        this._filters = JSON.parse(JSON.stringify(filters));
+        this.init();
+      }
+    }
+  }
+
+  private init(){
+    if( this.data && this.filters ){
+      this.show_filters = true;
+      if( this.filters && (this.filters).length > 0 ){
+        (this.filters).forEach((filter: TCDataFilters) => {            
+          this.searchIn(filter, 'sync');
+        });
+      } 
+      // this.toResult();
+      if( !this.useOnChangeSubmit ){
+        this.result_accept(this.data);
+      }
+
+      if( this.useOnChangeSubmit || this.useButtonSubmit ){
+        this.start_filter();
+      }
+    }
+  }
+
+  private normalize(text: any): string{
+    if( this.useNormalizeCaseSensitive ){
+      const v = ( ( (`${text}`).normalize('NFD').replace(/[\u0300-\u036f]/g, "") ).trim() ).toLowerCase();
+      return v;
+    }
+    return text;
+  }
+
+  toSubmit(){
+    if( this.filters && (this.filters).length > 0 ){
+      this.init();
+    }
+    this.emitSubmitFilters();
+  }
+
+  private emitSubmitFilters(){
+    let filters = JSON.parse(JSON.stringify(this.filters));
+    if( filters && (filters).length > 0 ){
+      (filters).forEach((filter: TCDataFilters, i: number) => {
+
+        if( filter.width ){ delete(filters[i].width); }
+        if( filter.placeholder ){ delete(filters[i].placeholder); }
+        if( filter.description ){ delete(filters[i].description); }
+
+        if( (!filter.searchText || filter.searchText && filter.searchText === '') && filter.type !== "boolean" ){
+          delete(filters[i]);
+        }
+        if( filter.type === "boolean" ){
+          if( !filter.searchText ){
+            filter.searchText = false;
+          }
+        }
+        
+      });
+    }   
+    
+    this.onSubmit.emit(this.filters);
+  }
+
+
+  private collectionFind(obj: any, path: any): any {
+    const pathArray = path.split(".");
+    let current = obj;
+    for (let i = 0; i < pathArray.length; i++) {
+      const key = pathArray[i];
+
+      if (key.includes('[') && key.includes(']')) {
+        const nextKeys = pathArray.slice(i + 1);
+        const index = key.substring(key.indexOf('[') + 1, key.indexOf(']'));
+        const arrayKey = key.substring(0, key.indexOf('['));
+        if( current && current[arrayKey] && current[arrayKey][index] ){
+          return this.collectionFind(current[arrayKey][index], nextKeys.join("."));
+        }
+      }
+
+
+      if (key.includes("[]")) {
+        const arrayKey = key.replace("[]", "");
+        current = current[arrayKey] || [];
+        const nextKeys = pathArray.slice(i + 1);
+        const results = [];
+        for (let j = 0; j < current.length; j++) {
+          let result = this.collectionFind(current[j], nextKeys.join("."));
+          if (result !== undefined) {
+            results.push(result); 
+          }
+        }
+        if (results.length === 0) {
+          return undefined;
+        }
+        return results;
+      } else {
+        if( !current || (current && !current[key]) ){
+          return undefined;
+        }
+        current = current[key];
+        if (current === undefined) {
+          return undefined;
+        }
+      }
+    }
+    return current;
+  }
+    
+  first: boolean = true;
+  start_filter_fc: any = undefined;
+
+  start_value: any | undefined;
+  stop_value: any | undefined;
+
+  searchInRange( range_date: any){
+    
+    if( this.filters && (this.filters).length > 0 ){
+
+      let event = {} as any; 
+      event.datepickertime = true;
+
+      for( let i = 0; i < (this.filters).length; i++ ){
+
+        if( this.filters[i] && this.filters[i].id && this.filters[i].id === 'start' ){
+          this.filters[i].value = range_date?.result?.start!;
+          this.filters[i].searchText = range_date?.result?.start!;
+          event.innerValue = this.start_value = range_date?.result?.start!;
+          this.searchIn(this.filters[i], event);
+        }
+
+        if( this.filters[i] && this.filters[i].id && this.filters[i].id === 'stop' ){
+          this.filters[i].value = range_date?.result?.stop!;
+          this.filters[i].searchText = range_date?.result?.stop!;
+          event.innerValue = this.stop_value = range_date?.result?.stop!;
+          this.searchIn(this.filters[i], event);
+        }
+      }
+      if( this.first || this.useOnChangeSubmit ){
+        this.toSubmit();
+      }
+      
+    }
+    this.first = false;
+
+  }
+
+  convertDataToNumber(dataString: string): number {
+    try {
+      const [dia, mes, ano] = dataString.split('/');
+      return +(`${ano}${mes}${dia}`);
+    } catch (error) {}
+    return 0;
+  }
+
+  searchIn(item: TCDataFilters, event?: any){
+
+   
+
+    this.start_filter_fc = undefined;
+
+    let isValid = true;
+
+    if( event === 'sync' && isValid ){
+      isValid = false;
+      this.onChange.emit(true);
+    }
+
+    if( typeof event === 'boolean' && isValid ){
+      isValid = false;
+      item.searchText = event;
+      this.onChange.emit(true);
+    }
+
+    if( event === undefined || event === null || event === '' && isValid ){
+      isValid = false;
+      item.searchText = '';
+      this.onChange.emit(true);
+    }
+
+    if( event?.datepickertime  && isValid ){
+      isValid = false;
+      item.searchText = event?.innerValue;      
+      this.onChange.emit(true);
+    }
+
+    if(event?.target?.value && isValid ){
+      isValid = false;
+      item.searchText = this.normalize(event.target.value);
+      this.onChange.emit(true);
+    }
+
+    if(event?.target?.value === '' && isValid ){
+      isValid = false;
+      item.searchText = '';
+      this.onChange.emit(true);
+    }
+
+    if( item.type === 'date-local' && item.value ){
+      isValid = false;
+      item.searchText = `${this.convertDataToNumber( item.value )}`;
+      this.onChange.emit(true);
+    }
+    
+    if( this.useOnChangeSubmit || this.first_active_filter ){      
+      this.start_filter_fc = this.start_filter();
+      this.first_active_filter = false;
+    }
+
+    if( !this.useButtonSubmit ){
+      this.emitSubmitFilters();
+    } 
+  }
+
+  
+  start_filter(){
+    for( let i = 0; i < (this.data).length; i++ ){
+
+      this.setDataIndex(i, true);
+
+      for( let j = 0; j < (this.filters).length; j++ ){        
+        const filter_item = this.filters[j];   
+
+        if( filter_item.searchText && typeof (filter_item.searchText) === 'string' && filter_item.searchText !== '' && filter_item.type !== TCFiltersType.number && filter_item.type !== TCFiltersType.date ){
+          
+          filter_item.searchText = this.normalize(filter_item.searchText);        
+          let item_value = this.collectionFind(this.data[i], filter_item.searchIn);
+          if( item_value ){
+            item_value = this.normalize(item_value);            
+            if( !( item_value.includes(filter_item.searchText) || item_value === filter_item.searchText ) ){
+              this.setDataIndex(i, false);
+            }
+          }else{
+            this.setDataIndex(i, false);
+          }
+        } 
+        
+
+        if( filter_item.searchText && filter_item.searchText instanceof Date && !isNaN( filter_item.searchText.valueOf()) && filter_item.type === TCFiltersType.datetime ){
+          
+          let item_value: any = this.collectionFind(this.data[i], filter_item.searchIn);
+
+          try { item_value = new Date(item_value); } catch (error) {}
+          if( item_value &&  item_value instanceof Date && !isNaN( item_value.valueOf()) ){
+            let is_accept = false;
+            const dt_target   = ( (filter_item.searchText).getTime() ).toString().substring(0, 10); /* + (3 * 60 * 60 * 1000); */
+            const dt_current  = ( (item_value).getTime() ).toString().substring(0, 10);
+            if( filter_item.condition ){
+              switch (filter_item.condition) {
+                case TCCondition.gt:    is_accept = ( Number(dt_target) >  Number(dt_current) );  break;
+                case TCCondition.lt:    is_accept = ( Number(dt_target) <  Number(dt_current) );  break;
+                case TCCondition.gte:   is_accept = ( Number(dt_target) <= Number(dt_current) );  break;
+                case TCCondition.lte:   is_accept = ( Number(dt_target) >= Number(dt_current) );  break;
+                case TCCondition.equal: is_accept = ( Number(dt_target) === Number(dt_current) );  break;
+                default: is_accept = ( Number(dt_target) == Number(dt_current) );
+              }
+            }else{
+              is_accept = ( Number(filter_item.searchText) === Number(item_value) );
+            }
+            if( !is_accept ){
+              this.setDataIndex(i, false);
+            }
+          }
+        }
+
+        
+
+        if( filter_item.searchText && typeof Number(filter_item.searchText) === 'number' && ( filter_item.type === TCFiltersType.number || filter_item.type === TCFiltersType.date ) ){
+          
+          filter_item.searchText = Number(filter_item.searchText);
+          let item_value = this.collectionFind(this.data[i], filter_item.searchIn);
+
+          if( typeof Number(item_value) === 'number' ){   
+            item_value = Number(item_value);            
+            let is_accept = false;
+            if( filter_item.condition ){
+
+              switch (filter_item.condition) {
+                case TCCondition.gt:    is_accept = ( Number(filter_item.searchText) >  Number(item_value) );  break;
+                case TCCondition.lt:    is_accept = ( Number(filter_item.searchText) <  Number(item_value) );  break;
+                case TCCondition.gte:   is_accept = ( Number(filter_item.searchText) <= Number(item_value) ); break;
+                case TCCondition.lte:   is_accept = ( Number(filter_item.searchText) >= Number(item_value) );  break;
+                case TCCondition.equal: is_accept = ( Number(filter_item.searchText) === Number(item_value) ); break;
+                default: is_accept = ( Number(filter_item.searchText) == Number(item_value) );
+              }
+            }else{
+              is_accept = ( Number(filter_item.searchText) === Number(item_value) );
+            }
+            if( !is_accept ){
+              this.setDataIndex(i, false);
+            }
+          }
+        }
+        
+        
+        if( typeof (filter_item.searchText) === 'boolean' && filter_item.searchText === true ){
+
+          let item_value: any = this.collectionFind(this.data[i], filter_item.searchIn);
+          
+          if( item_value && (item_value).length > 0 ){  
+            let qtd_is_true = 0;          
+            for( let i = 0; i < ((item_value).length); i++ ){
+              const item = item_value[i];
+              if( item === filter_item.searchText ){
+                qtd_is_true++;
+              }
+            }
+            if( qtd_is_true === 0 ){
+              this.setDataIndex(i, false);
+            }
+          }else{
+            if( !( item_value === filter_item.searchText ) ){
+              this.setDataIndex(i, false);
+            }
+          }          
+        }
+      
+      }
+
+    } // end for
+    
+    this.toResult();
+      
+  }
+
+  private toResult(){
+
+
+    const search_data = [];
+
+    let is_filter = false;
+    for( let i = 0; i < (this.filters).length; i++ ){
+      if( this.filters[i].searchText && this.filters[i].searchText !== '' ){
+        is_filter = true; break;
+      }
+    }
+
+    if( is_filter ){
+      for( let i = 0; i < (this.data).length; i++ ){
+        if( this.data && this.data[i] && this.data[i]['tc_filter_accept'] ){
+          (search_data).push(this.data[i]);
+        }
+      }
+
+      this.result_accept(search_data);
+      this.onFilter.emit({...this.filters});
+      return;
+    }
+
+    this.result_accept(this.data);
+    this.onFilter.emit({...this.filters});
+  }
+
+  setDataIndex(index: number, value: boolean ){
+    if( this.data && this.data[index] ){
+      this.data[index]['tc_filter_accept'] = value;
+    }
+  }
+
+  result_accept(data: any){
+    if( !this.useFilterAccept && data && (data).length > 0 ){
+      for( let i = 0; i < (data).length; i++ ){
+        //delete data[i]['tc_filter_accept'];
+      }
+    }
+    this.result.emit(data);
+  }
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.module.ts

@@ -0,0 +1,28 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiFiltersComponent } from './tcloud-ui-filters.component';
+import { TCloudUiDatepickerTimeModule } from '../tcloud-ui-datepicker-time/tcloud-ui-datepicker-time.module';
+import { TCloudUiRangeDateComponent } from './components/range-date/range-date.component';
+import { TCloudUiDatepickerModule } from '../tcloud-ui-datepicker/tcloud-ui-datepicker.module';
+
+
+
+@NgModule({
+  declarations: [
+    TCloudUiFiltersComponent,
+    TCloudUiRangeDateComponent
+  ],
+  exports: [
+    TCloudUiFiltersComponent,
+    TCloudUiRangeDateComponent  
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TCloudUiDatepickerTimeModule,
+    TCloudUiDatepickerModule
+  ]
+})
+export class TCloudUiFiltersModule { }

package/{lib/_modules/tcloud-ui-filters/tcloud-ui-filters.d.ts → projects/tcloud-ui/src/lib/_modules/tcloud-ui-filters/tcloud-ui-filters.ts}

@@ -1,9 +1,10 @@
-export interface TCDataFilters {
-    description: string;
+export interface TCDataFilters{
+    description: string;    
     searchIn: string;
     type?: TCFiltersType;
     name?: string;
     id?: string;
+
     searchText?: any;
     accept?: boolean;
     placeholder?: string;
@@ -11,27 +12,32 @@ export interface TCDataFilters {
     data?: TCDataOtions[];
     condition?: TCCondition;
     value?: any;
+
+    // For datepicker
     defaultValuePeriodStartStop?: any;
     UTC?: boolean;
     useOptionsDateTime?: boolean;
 }
+
 export interface TCDataOtions {
     description: string;
     value: any;
 }
-export declare enum TCFiltersType {
+
+export enum TCFiltersType{
     text = "text",
     number = "number",
     select = "select",
     boolean = "boolean",
     datetime = "datetime-local",
     hidden = "hidden",
-    date = "date-local"
+    date = "date-local",
 }
-export declare enum TCCondition {
+
+export enum TCCondition{
     equal = "equal",
     gte = "gte",
     lte = "lte",
     lt = "lt",
     gt = "gt"
-}
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-input-search/tcloud-ui-input-search.component.html

@@ -0,0 +1,14 @@
+<table class="tc-group-input-table" cellspacing="0" cellpadding="0">
+    <tr>
+        <td><input class="tc-form-control box-ui-input-group" [(ngModel)]="search_text" type="text" (keyup)="buscar(search_text)" placeholder="{{ placeholder }}" ></td>
+        <td>     
+            <ng-container *ngIf="search_text === ''">  
+                <button type="button" (click)="buscar(search_text)"><i class="fas fa-search"></i></button>
+            </ng-container> 
+
+            <ng-container *ngIf="search_text !== ''">  
+                <button type="button" (click)="clean()"><i class="fas fa-times"></i></button>
+            </ng-container>
+        </td>
+    </tr>
+</table>

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-input-search/tcloud-ui-input-search.component.scss

@@ -0,0 +1,33 @@
+.tc-group-input-table{
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    td{
+        border: none;
+        border-style: hidden;
+        border-spacing: 0;
+        vertical-align: top;
+    }
+
+    td:first-child{
+        input{
+            height: 40px;
+            width: 100%;
+            border: 1px solid #ccc;
+            border-radius: 4px 0 0 4px !important;
+        }
+    }
+
+    td:last-child{
+        width: 40px;
+        button{
+            width: 100%;
+            height: 40px;
+            border: none;
+            border-radius: 0 10px 10px 0;
+            cursor: pointer;
+        }
+    }
+
+}

package/projects/tcloud-ui/src/lib/_modules/tcloud-ui-input-search/tcloud-ui-input-search.component.ts

@@ -0,0 +1,69 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { TCloudUiSearchInObjectService } from '../../_services/search-in-object.service';
+
+@Component({
+  selector: 'tcloud-ui-input-search',
+  templateUrl: './tcloud-ui-input-search.component.html',
+  styleUrls: ['./tcloud-ui-input-search.component.scss']
+})
+export class TCloudUiInputSearchComponent implements OnInit {
+
+  /**
+   * tcloud-ui-input-search - Procura pelo valor informado no objeto indicado
+   * @param placeholder string - placeholder no input
+   * @param mirror boolean - Exibir os valores espelhados ou somente os valores encontrados
+   * @param base_object object - Objeto onde ser procurado 
+   * @param found - Emite o valor encontrado
+   */
+
+  @Input() placeholder: string = 'Procurar...';
+
+  @Input() mirror: boolean = true;
+
+  search_text: string = '';
+
+  private _base_object: any;
+  @Input() set base_object(base_object: any){
+    if( base_object ){
+      this._base_object = base_object;
+
+      if( this.mirror ){
+        this.result_object = base_object;
+        this.toFound();
+      }
+    }    
+  }
+  get base_object(){ return this._base_object; }
+
+  result_object: any | undefined;
+
+  @Output() found = new EventEmitter<any>();
+
+  constructor(
+    private searchInObjectService: TCloudUiSearchInObjectService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  buscar(value: string){
+    const result = this.searchInObjectService.meet(`${value}`, this.base_object);
+    this.result_object = JSON.parse(JSON.stringify(result));
+    this.toFound();
+  }
+
+  clean(){
+    if( this.mirror ){
+      this.buscar('');
+    }else{
+      this.result_object = []; 
+      this.toFound();
+    }
+    this.search_text = '';
+  }
+
+  toFound(){
+    this.found.emit( this.result_object );
+  }
+
+}