@dev-tcloud/tcloud-ui 0.0.95 → 0.0.96

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

@@ -0,0 +1,262 @@
+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

@@ -0,0 +1,156 @@
+<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

@@ -0,0 +1,75 @@
+.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;
+}