@dev-tcloud/tcloud-ui 2.2.2 → 2.2.3

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

@@ -0,0 +1,525 @@
+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 = 'tc-btn-primary';
+  @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');
+        });
+      } 
+      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( event && event.result && ( event.result.start || event.result.stop ) ){
+      isValid = false;
+      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();
+    } 
+  }
+
+  getDateUTC(dt: any){
+    const ano = dt.getFullYear();
+    const mes = dt.getMonth();
+    const dia = dt.getDate();
+    const horas = dt.getHours();
+    const minutos = dt.getMinutes();
+    const segundos = dt.getSeconds();
+    return new Date(Date.UTC(ano, mes, dia, horas, minutos, segundos));
+  }
+
+  
+  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,29 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, 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
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+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-password/tcloud-ui-input-password.component.html

@@ -0,0 +1,38 @@
+<div class="tcloud-ui-input-password">
+    <table>
+        <tr>
+            <!-- input password -->
+            <td>
+                <form #_form="ngForm">
+                    <ng-container *ngIf="passwordRegex">
+                        <input class="tc-form-control" *ngIf="mode == 'password'" type="password" name="tc_password" [pattern]="passwordRegex" autoComplete="new-password" [(ngModel)]="innerValue" required>
+                        <input class="tc-form-control" *ngIf="mode == 'text'" type="text" name="tc_text" [pattern]="passwordRegex" [(ngModel)]="innerValue" required>
+                    </ng-container>
+                </form>
+            </td>
+
+            <!-- action show hide -->
+            <td *ngIf="actionView">
+                <button type="button" (click)="toggleMode()" [title]="(mode == 'password') ? 'Visualizar Senha' : 'Esconder Senha'">
+                    <i *ngIf="mode == 'password'" class="far fa-eye-slash"></i>
+                    <i *ngIf="mode == 'text'" class="far fa-eye"></i> 
+                </button>
+            </td>
+
+            <!-- action generate pass -->
+            <td *ngIf="actionGeneratePassword">
+                <button type="button" [title]="'Gerar Senha'" (click)="generatePassword()">
+                    <i class="fa-solid fa-key"></i>
+                </button>
+            </td>
+
+            <!-- action copy pass -->
+            <td *ngIf="actionCopy">
+                <button type="button" [title]="'Copiar Senha'" (click)="copyText()">
+                    <i *ngIf="!isCopy" class="fa-regular fa-copy"></i>
+                    <i *ngIf="isCopy" class="fa-solid fa-check"></i>
+                </button>
+            </td>
+        </tr>
+    </table>
+</div>

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

@@ -0,0 +1,40 @@
+.tcloud-ui-input-password{
+    border: 1px solid var(--tc-gray-300);
+    border-radius: 3px;
+
+    table{        
+        width: 100%;
+
+        td:first-child{
+            width: 100% !important;
+
+            input{
+                width: 100%;
+                border: none;
+                height: 38px;
+                padding-left: 8px;
+            }            
+        }
+        td{
+            width: 50px;
+            height: 40px;
+            background-color: #fff;
+
+            button{
+                background: transparent;
+                border: none;
+                margin-right: 3px;
+                cursor: pointer;
+                color: var(--tc-gray-500);
+
+                &:hover{
+                    color: var(--tc-primary2); 
+                }
+            }
+        }
+    }
+
+    .ng-invalid.ng-touched{
+        border: 1px solid var(--red) !important;
+    }
+}