@dev-tcloud/tcloud-ui 0.0.96 → 0.0.97

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

@@ -1,262 +0,0 @@
-import { Component, Input, OnInit, Output, EventEmitter, forwardRef } from '@angular/core';
-import { FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-const  CUSTOM_INPUT_VALIDATORS: any = { 
-  provide: NG_VALIDATORS, 
-  useExisting: forwardRef(() => TCloudUiRangeDateComponent),
-  multi: true
-}
-
-const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => TCloudUiRangeDateComponent),
-  multi: true
-};
-
-const noop = () => {
-};
-
-
-interface IResultDateTime{
-  start: any;
-  stop: any;
-}
-
-@Component({
-  selector: 'range-date',
-  templateUrl: './range-date.component.html',
-  styleUrls: ['./range-date.component.scss'],
-  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, CUSTOM_INPUT_VALIDATORS]
-})
-export class TCloudUiRangeDateComponent implements OnInit {
-
-  result = {} as IResultDateTime;
-
-  options_date_time: any = [];
-  use_validation_required: boolean = false;
-
-  @Output() onChange = new EventEmitter<IResultDateTime>();
-
-  @Input() defaultValuePeriodStartStop: string = '';
-  @Input() required: string | undefined;
-
-  @Input() descriptionStart: string = '';
-  @Input() descriptionStop: string = '';
-
-  @Input() UTC: boolean = false;
-
-  mode: string = 'select';
-
-  isValid = false;
-
-  constructor() { }
-
-  ngOnInit(): void {
-    this.setOptionsDateTime();
-  }
-
-  setOptionsDateTime(){
-    this.options_date_time = [
-      {value:'1-last-time', description: 'Última 1 hora'},
-      {value:'3-last-time', description: 'Últimas 3 horas'},
-      {value:'24-last-time', description: 'Últimas 24 horas'},
-
-      {value:'7-days', description: 'Últimos 7 dias'},
-      {value:'15-days', description: 'Últimos 15 dias'},
-      {value:'30-days', description: 'Últimos 30 dias'},
-      {value:'current-month', description: 'Mês atual'},
-      {value:'current-year', description: 'Ano atual'}
-    ]
-    setTimeout(() => {
-      if( this.defaultValuePeriodStartStop !== '' ){
-        this.onChangeOptionsDateTime( this.defaultValuePeriodStartStop );
-      }
-    });
-    
-  }
-
-  onChangeOptionsDateTime(event: any){
-    this.isValid = false;
-    // this.description_options_date_time = '';
-    // this.value_options_date_time = '';
-    event = (event.value) ? event.value : event;
-
-    let now = new Date();
-    let filter_date: any = undefined;
-
-    if( event === '1-last-time' ){
-      filter_date = new Date(now.getTime() - 1 * 60 * 60 * 1000);
-    }
-
-    if( event === '3-last-time' ){
-      filter_date = new Date(now.getTime() - 3 * 60 * 60 * 1000);
-    }
-
-    if( event === '24-last-time' ){
-      filter_date = new Date(now.getTime() - 24 * 60 * 60 * 1000);
-    }
-
-    if( event === '7-days' ){
-      filter_date = new Date( (new Date(now)).setDate( now.getDate() - 7 ) );  
-      filter_date = new Date( (filter_date).setSeconds(0) );      
-    }
-
-    if( event === '15-days' ){
-      filter_date = new Date( (new Date(now)).setDate( now.getDate() - 15 ) );
-      filter_date = new Date( (filter_date).setSeconds(0) );
-    }
-
-    if( event === '30-days' ){
-      filter_date = new Date( (new Date(now)).setDate( now.getDate() - 30 ) );
-      filter_date = new Date( (filter_date).setSeconds(0) );
-    }
-
-    if( event === 'current-month' ){
-      filter_date = new Date(now.getFullYear(), now.getMonth(), 1);
-    }
-
-    if( event === 'current-year' ){
-      filter_date = new Date(now.getFullYear(), 0, 1);
-    }
-
-    if(filter_date){   
-      
-      this.result = {
-        start: filter_date,
-        stop: now
-      } as IResultDateTime;
-      this.onChange.emit(this.result);
-      this.isValid = true;
-    }else{
-      this.result = {} as IResultDateTime;
-      this.onChange.emit(this.result);
-      this.isValid = false;
-    }
-
-  }
-
-  onChangeStartDateTime(event: any){
-    this.isValid = false;
-    if( this.result && this.result.start && this.result.stop ){
-      this.onChange.emit(this.result);
-      this.isValid = true;
-    }else{
-      this.result = {} as IResultDateTime;
-      this.onChange.emit(this.result);
-    }
-  }
-
-  onChangeStopDateTime(event: any){
-    this.isValid = false;
-    if( this.result && this.result.start && this.result.stop ){
-      this.onChange.emit(this.result);
-      this.isValid = true;
-    }else{
-      this.result = {} as IResultDateTime;
-      this.onChange.emit(this.result);
-    }
-  }
-
-  toggle(){
-    const mode = (this.mode === 'select') ? 'datepickers' : 'select';
-    if( mode === 'select' ){
-      this.isValid = false;
-      this.result = {} as IResultDateTime;
-      this.onChange.emit(this.result);
-    }
-    this.mode = mode;
-  }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  innerValue: any | undefined;
-  //Placeholders for the callbacks which are later providesd
-  //by the Control Value Accessor
-  private onTouchedCallback: () => void = noop;
-  private onChangeCallback: (_: any) => void = noop;
-
-  //get accessor
-  get value(): any {
-      return this.innerValue;
-  };
-
-  //set accessor including call the onchange callback
-  set value(v: any) {
-    if (v !== this.innerValue) {
-      this.innerValue = v;      
-      this.onChangeCallback(v);
-    }
-  }
-
-  //Set touched on blur
-  onBlur() {
-    this.onTouchedCallback();
-  }
-
-  //From ControlValueAccessor interface
-  writeValue(value: any) {
-    if (value !== this.innerValue) {
-      this.innerValue = value;
-      //this.toSetDefault(value);
-    }
-  }
-
-  //From ControlValueAccessor interface
-  registerOnChange(fn: any) {
-    this.onChangeCallback = fn;
-  }
-
-  //From ControlValueAccessor interface
-  registerOnTouched(fn: any) {
-    this.onTouchedCallback = fn;
-  }
-
-  public validate(c: FormControl): any {
-    if( c && ( typeof this.required !== 'undefined' ) ){
-      this.use_validation_required = true;
-      return (this.check_is_valid()) ? null : 'required';
-    }
-    return null;
-  }
-
-  check_is_valid(): boolean{
-    if( this.result && this.result.start && this.result.stop ){
-      return true;
-    }
-    return false;
-  }
-
-}

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

@@ -1,156 +0,0 @@
-<div *ngIf="show_filters" class="area-filter">
-    <ng-container *ngFor="let item of filters; let i = index">
-
-        <ng-container *ngIf="!item.type || (item.type && item.type !== 'boolean')">
-
-            <ng-container *ngIf="item.type === 'date-local'">
-
-                <div class="box-filter-input type-{{item.type}} box-type-{{item.type}}" [style]="(item.width !== '') ? 'width:'+item.width : ''">
-                    <div class="m-description tc-title-ellipsis box-type-{{item.type}}" title="{{ item.description }}"><i [class.to-active]="(item.value !== undefined && item.value !== null && item.value !== '')" class="fas fa-filter icon-filter"></i>&nbsp;{{ item.description }}</div>
-                    <div class="box-type-{{item.type}}">
-                        <tcloud-ui-datepicker 
-                            #_input
-                            name="input_{{i+1}}"
-                            [modeInput]="true"
-                            [(ngModel)]="item.value"
-                            (ngModelChange)="searchIn(item, _input)">
-                        </tcloud-ui-datepicker>
-                        <button class="btn-clear-filter-text" [class.to-hide]="!(item.value !== undefined && item.value !== null && item.value !== '')" (click)="searchIn(item, null); item.searchText = undefined; item.value = ''">
-                            <i class="fas fa-times"></i>
-                        </button>
-                    </div>
-                </div>
-
-                
-            </ng-container>
-
-            <ng-container *ngIf="item.type !== 'date-local'">
-                <ng-container *ngIf="item.type === 'datetime-local'">
-
-                    <ng-container *ngIf="start_stop">
-                        <ng-container *ngIf="item.id === 'start'">
-                            <div class="box-filter-input type-{{item.type}} box-type-{{item.type}}" [style]="(item.width !== '') ? 'width:'+start_stop_width+''+start_stop_und : ''">
-                                <div class="m-description tc-title-ellipsis box-type-{{item.type}}" title="{{ item.description }}"><i [class.to-active]="(_range_date && _range_date.result && _range_date.result.start && _range_date.result.stop )" class="fas fa-filter icon-filter"></i>&nbsp;</div>
-                                <range-date  
-                                    #_range_date ngModel name="input_{{i+1}}" 
-                                    [defaultValuePeriodStartStop]="item.defaultValuePeriodStartStop"
-                                    [descriptionStart]="descriptionStart"
-                                    [descriptionStop]="descriptionStop"
-                                    [UTC]="(item && item.UTC) ? true : false"
-                                    required 
-                                    (onChange)="searchInRange(_range_date); searchIn(item, _range_date)">
-                                </range-date>
-                            </div>
-                        </ng-container>   
-                        <input *ngIf="item.id === 'start'" #_input name="input_{{i+1}}" type="hidden" [(ngModel)]="start_value">  
-                        <input *ngIf="item.id === 'stop'" #_input name="input_{{i+1}}" type="hidden" [(ngModel)]="stop_value">               
-                    </ng-container>
-
-                    <ng-container *ngIf="!start_stop">
-
-                        <div class="box-filter-input type-{{item.type}} box-type-{{item.type}}" [style]="(item.width !== '') ? 'width:'+item.width : ''">
-                            <div class="m-description tc-title-ellipsis box-type-{{item.type}}" title="{{ item.description }}"><i [class.to-active]="(item.value !== undefined && item.value !== null && item.value !== '')" class="fas fa-filter icon-filter"></i>&nbsp;{{ item.description }}</div>
-                            <div class="box-type-{{item.type}}">
-                                <tcloud-ui-datepicker-time 
-                                    #_input 
-                                    [(ngModel)]="item.value" 
-                                    name="input_{{i+1}}" 
-                                    [useOptionsDateTime]="(item && item.useOptionsDateTime) ? true : false"
-                                    [UTC]="(item && item.UTC) ? true : false"
-                                    (eventChange)="searchIn(item, _input)" >
-                                </tcloud-ui-datepicker-time>
-                                <button class="btn-clear-filter-text" [class.to-hide]="!(item.value !== undefined && item.value !== null && item.value !== '')" (click)="searchIn(item, null); item.searchText = undefined; item.value = ''">
-                                    <i class="fas fa-times"></i>
-                                </button>
-                            </div>
-                        </div>
-
-                    </ng-container>
-
-                </ng-container>
-            </ng-container>
-                        
-            <ng-container *ngIf="item.type !== 'select' && item.type !== 'datetime-local' && item.type !== 'date-local'">
-                <div class="box-filter-input type-{{item.type}} box-type-{{item.type}}" [style]="(item.width !== '') ? 'width:'+item.width : ''">
-
-                    <div class="m-description tc-title-ellipsis box-type-{{item.type}}" title="{{ item.description }}"><i [class.to-active]="_input.value !== ''" class="fas fa-filter icon-filter"></i>&nbsp;{{ item.description }}</div>
-                    <div class="box-type-{{item.type}}">
-                        <input 
-                            #_input
-                            [(ngModel)]="item.value"
-                            placeholder="{{ (item.placeholder !== '') ? item.placeholder : '' }}"
-                            name="input_{{i+1}}" 
-                            type="{{ (item.type === 'number') ? 'text' : item.type }}" 
-                            class="form-control tc-form-control"                     
-                            (keyup)="searchIn(item, $event)">                    
-                        <button class="btn-clear-filter-text" [class.to-hide]="_input.value === ''" (click)="searchIn(item, null); _input.value = ''">
-                            <i class="fas fa-times"></i>
-                        </button>
-                    </div>
-                </div>
-            </ng-container>
-
-            <ng-container *ngIf="item.type === 'select' && item.data && (item.data).length > 0" >
-                <div class="box-filter-input type-{{item.type}} box-type-{{item.type}}" [style]="(item.width !== '') ? 'width:'+item.width : ''">
-
-                    <div class="m-description tc-title-ellipsis box-type-{{item.type}}" title="{{ item.description }}"><i [class.to-active]="_input.value !== ''" class="fas fa-filter icon-filter"></i>&nbsp;{{ item.description }}</div>
-                    <div class="box-type-{{item.type}}">
-                        <select 
-                            #_input
-                            [(ngModel)]="item.value"
-                            name="input_{{i+1}}" 
-                            class="form-control tc-form-control"                     
-                            (change)="searchIn(item, $event)">
-                            <option [ngValue]=""></option>
-                            <ng-container *ngFor="let v of item.data">
-                                <option [value]="v.value">{{ v.description }}</option>
-                            </ng-container>
-                        </select>
-                    </div>
-                </div>
-            </ng-container>
-
-        </ng-container>
-
-
-        <ng-container *ngIf="item.type && item.type === 'boolean'">
-            
-            <div class="box-filter-input" [style]="(item.width !== '') ? 'width:'+item.width : ''">
-                <div class="m-description tc-title-ellipsis" title="{{ item.description }}" title="{{ item.description }}"><i [class.to-active]="_input.checked === true" class="fas fa-filter icon-filter"></i>&nbsp;{{ item.description }}</div>
-                <div class="area-input-checkbox">
-                    <div class="form-control tc-form-control">
-                        <label>
-                            {{ item.placeholder }}
-                            <input 
-                                #_input
-                                placeholder="{{ (item.placeholder !== '') ? item.placeholder : '' }}"
-                                name="input_{{i+1}}" 
-                                type="checkbox"                   
-                                (change)="searchIn(item, _input.checked)">   
-                        </label>
-                    </div>                 
-                </div>
-            </div>
-
-        </ng-container>
-
-
-    </ng-container>
-
-    <div class="text-right mb-1 mr-1" *ngIf="useButtonSubmit">
-        <button type="button" class="tc-btn {{ btnSubmitClass }}" (click)="toSubmit()" >{{ submitText }}</button>
-    </div>
-
-</div>
-
-<!-- <pre>{{ inputs | json }}</pre> -->
-    <!-- <pre> {{ data | json }} </pre>
-
-<p>FILTERS</p>
-<pre> {{ filters | json }}</pre> -->
-
-<!--
-    <pre>start_stop: {{ start_stop }}</pre>
-    <pre>start_stop_width: {{ start_stop_width }}</pre>
-    <pre>start_stop_und: {{ start_stop_und }}</pre>
--->

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

@@ -1,75 +0,0 @@
-.box-filter-input{
-    display: inline-grid;
-    
-    padding: 10px 5px;
-    position: relative;
-}
-
-.area-filter{
-    border: 1px solid #eeeeee;
-    border-radius: 5px;   
-    margin-bottom: 5px; 
-}
-
-.btn-clear-filter-text{
-    position: absolute;
-    right: 8px;
-    top: 38px;
-    background-color: #fff;
-    border: none;
-    cursor: pointer;
-    color: #aaa;
-}
-
-.to-hide{
-    display: none;
-}
-
-.icon-filter{
-    color: #ccc;
-}
-
-.to-active{
-    color: var(--verde);
-}
-
-.area-input-checkbox{
-
-    label{
-        cursor: pointer;
-        margin-bottom: 0;
-        color: #9f9f9f;
-    }
-
-    div.tc-form-control{
-        height: 40px;
-    }
-}
-
-.m-description{
-    margin-bottom: 3px;
-}
-
-input{
-    color: #535353;
-}
-
-input[type='text'], input[type='number'], select{
-    height: 40px !important;
-}
-
-.type-hidden{
-    display: none;
-    width: 0px !important;
-}
-
-.box-type-global_vars{
-    display: none !important;
-    width: 0px !important;
-}
-
-.tc-title-ellipsis{
-    white-space: nowrap;                  
-    overflow: hidden;
-    text-overflow: ellipsis;
-}