@dev-tcloud/tcloud-ui 2.2.1 → 2.2.3

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

@@ -0,0 +1,160 @@
+.input-control-time{
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  width: 100%;
+  height: 40px;
+}
+
+.form-control-time{
+  max-width: 220px;
+  border: none;
+
+  input{
+    text-align: center;
+  }
+}
+
+.form-time{
+  width: 100%;
+
+  td:first-child{
+    overflow: hidden;
+  }
+}
+
+.delimiter-time{
+  width: 100%;
+  text-align: center;
+}
+
+.delimiter-time-icon{
+  border: none;
+  height: 35px;
+  width: 10px;
+  padding: 4px;
+  font-size: 17px;
+  text-align: center;
+  opacity: 0.6;
+}
+
+.area-icon{
+  width: 25px;
+}
+
+.area-input-date{
+  width: 100px;
+}
+
+.area-delimiter{
+  width: 2px;
+  text-align: center;
+}
+
+.area-input-hour, .area-input-minute{
+  text-align: center;
+  width: 28px;
+  input{
+    height: 35px;
+    width: 28px;
+    text-align: center;
+    color: #999;
+    font-weight: 600;
+    font-style: italic;
+
+
+    &:focus{
+      outline: none;
+    }
+  }
+}
+
+.area-clean{
+  width: 12px;
+}
+
+input, .datepicker-input{
+  border: none !important;
+}
+
+.select-time-date{
+  border: none;
+  background-color: transparent;
+  width: 40px;
+  height: 35px;
+  padding: 0;
+  text-align: center;
+  font-size: 13px;
+  -webkit-appearance: none;
+  appearance: none;
+  color: #777;
+  position: relative;
+  top: -2px;
+
+  -webkit-appearance: none;  /* Remove estilo padrão do Chrome */
+  -moz-appearance: none; /* Remove estilo padrão do FireFox */
+  appearance: none; /* Remove estilo padrão do FireFox*/
+
+  &:focus{
+    box-shadow: 0 0 0 0;
+    border: 0 none;
+    outline: 0;
+  }
+}
+
+.btn-icon-close{
+  border: none;
+  background-color: #fff;
+  cursor: pointer;
+  padding: 0;
+  color: #aaa;
+  width: 17px;
+  position: relative;
+  top: -20px;
+  z-index: 1;
+
+  &:hover{
+    color: #c43a3a !important
+  }
+}
+
+.icon-short-time{
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 15px;
+  color: #8a8a8a;
+}
+
+.input-options-date{
+  position: relative;
+
+  .description-options-date{
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 5px 10px;
+    background-color: #fff;
+    width: 100%;
+    height: 34px;
+    overflow: hidden;
+
+    strong{
+      font-size: 14px;
+      font-weight: normal;
+      padding-left: 5px;
+    }
+  }
+
+  .area-action-date-time-selected{
+    width: 20px;
+    display: block;
+    float: right;
+    text-align: right;
+    position: relative;
+
+    top: -2px;
+    left: 30px;
+    z-index: 1;
+  }
+}

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

@@ -0,0 +1,369 @@
+import { Component, forwardRef, OnInit, EventEmitter, Output, Input, ViewChild, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ISelectOptions } from '../tcloud-ui-data-list/tcloud-ui-data-list';
+
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => TCloudUiDatepickerTimeComponent),
+  multi: true
+};
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'tcloud-ui-datepicker-time',
+  templateUrl: './tcloud-ui-datepicker-time.component.html',
+  styleUrls: ['./tcloud-ui-datepicker-time.component.scss'],
+  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
+})
+export class TCloudUiDatepickerTimeComponent implements OnInit {
+
+  show_date_picker: boolean = true;
+
+  private _ngModel: any | undefined;
+  @Input() set ngModel(v: any){
+    if( v && v !== this.innerValue ){
+      this.innerValue = v; 
+    } 
+  }
+  @Output() ngModelChange = new EventEmitter<Date>();
+
+  @Output() onChange = new EventEmitter<Date>();
+  @Output() eventChange = new EventEmitter<any>();
+
+  @Input() useOptionsDateTime = false;
+
+  DD_MM_YYYY: string = '';
+  HH: string = '00';
+  MM: string = '00';
+
+  ID: string = '';
+
+  option_HH: string[] | undefined;
+  option_MM: string[] | undefined;
+
+  @ViewChild('_datepickertime', {static: false}) datepickertime: ElementRef<HTMLElement> | undefined;
+
+  options_date_time : ISelectOptions[] = [];
+  open_options_date_time: boolean = false;
+
+  last_options_date_time: any;
+  description_options_date_time: any = '';
+  value_options_date_time: any = '';
+
+  ngOnInit(): void {
+
+
+    this.setOptionsDateTime();
+
+    this.ID = this.generateID();
+    this.option_HH = this.getListTIME(23);
+    this.option_MM = this.getListTIME(59);
+  }
+
+  setOptionsDateTime(){
+    this.options_date_time = [
+      {value:'7-days', description: '7 dias'},
+      {value:'15-days', description: '15 dias'},
+      {value:'30-days', description: '30 dias'},
+      {value:'current-month', description: 'Mês atual até agora'},
+      {value:'current-year', description: 'Ano atual até agora'}
+    ]
+  }
+
+  generateID(): string{
+    return `tcloud-ui-datepicker-time-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+  }
+
+  getListTIME(v: number){
+    let mm = [];
+    for(let i = 0; i <= v; i++ ){
+      if( i < 10 ){
+        (mm).push(`0${i}`);
+      }else{
+        (mm).push(`${i}`);
+      }
+    }
+    return mm;
+  }
+
+  toSetDate(date: string){    
+    this.set_date_by_datepicker(date);
+  }
+
+  toSetTime(){
+    if( this.DD_MM_YYYY && ((this.DD_MM_YYYY).trim()).length === 10){
+      const date = (this.DD_MM_YYYY).replace(/-/g, '/');
+      let date_part = (date).split('/');
+      let dd = date_part[0];
+      let mm = date_part[1];
+      let yy = date_part[2];
+      const datetime = new Date(`${yy}-${mm}-${dd}`);
+      if( this.checkIsDate(datetime) ){
+        this.set_date_by_datepicker(date);
+      }
+    }
+  }
+
+  set_date_by_datepicker(date: string){
+
+    if( date ){
+      date = (date).replace(/-/g, '/');
+      let date_part = (date).split('/');
+      let dia = date_part[0];
+      let mes = date_part[1];
+      let ano = date_part[2];
+
+      let hh = this.HH;
+      if( !hh ){
+        hh = '00';
+      }else{
+        if( ( +(hh) >= 0 && +(hh) < 24 ) ){
+          hh = (+(hh) < 10 ) ? `0${+(hh)}` : `${+(hh)}`;
+        }else{
+          hh = '00';
+        }
+      }
+
+      let mm = this.MM;
+      if( !mm ){
+        mm = '00';
+      }else{
+        if( ( +(mm) >= 0 && +(mm) < 60 ) ){
+          mm = (+(mm) < 10 ) ? `0${+(mm)}` : `${+(mm)}`;
+        }else{
+          mm = '00';
+        }
+      }
+
+      if( hh === '00' ){ this.HH = hh; }
+      if( mm === '00' ){ this.MM = mm; }
+
+      const notation = '00';
+
+      const str_date = `${ano}-${mes}-${dia}T${hh}:${mm}:${notation}`;
+      const datetime = new Date( str_date );
+      
+      if( this.checkIsDate(datetime) ){
+        this.innerValue = datetime;
+      }else{
+        this.innerValue = undefined;
+      }
+
+      // console.log('this.datepickertime?.nativeElement', this.datepickertime?.nativeElement);
+
+      // if(this.datepickertime && this.datepickertime.nativeElement){
+      //   const elem = <any> this.datepickertime.nativeElement;
+      //   elem.value = this.innerValue;
+      // }
+
+      this.ngModelChange.emit( this.innerValue );
+      this.onChange.emit( this.innerValue );
+      this.eventChange.emit( this.datepickertime?.nativeElement );
+
+    }else{
+
+      this.description_options_date_time = '';
+      this.value_options_date_time = '';
+
+      this.innerValue = undefined;
+      this.ngModelChange.emit( this.innerValue );
+      this.onChange.emit( this.innerValue );
+      this.eventChange.emit( this.datepickertime?.nativeElement );
+    }
+
+    if( `${this.last_options_date_time}` !== `${this.innerValue}` ){
+      // this.description_options_date_time = '';
+      // this.value_options_date_time = '';
+    }
+
+  }
+
+  // Distribuir os valores da data por pedaços: data - hora - min
+  to_date_hh_mm(d: Date){
+    let dia = `${(d).getDate()}`;
+    dia = (+(dia) < 10 ) ? `0${+dia}` : dia;
+    let mes = `${(d).getMonth()+1}`;
+    mes = (+(mes) < 10 ) ? `0${+mes}` : mes;  
+
+    let ano = `${(d).getFullYear()}`;
+    let hh  = `${(d).getHours()}`;
+    let mm  = `${(d).getMinutes()}`;
+
+    if( hh && ( +(hh) < 0 || +(hh) > 23 ) ){ hh = '00'; }
+    hh = (hh) ? ( (+(hh) < 10 ) ? `0${hh}` : hh ) : '00';
+
+    if( mm && ( +(mm) < 0 || +(mm) > 59 ) ){ mm = '00'; }
+    mm = (mm) ? ( (+(mm) < 10 ) ? `0${mm}` : mm ) : '00';
+
+    this.MM = mm;
+    this.HH = hh;
+
+    this.DD_MM_YYYY = `${dia}/${mes}/${ano}`;
+  }
+
+  checkIsDate(d: any): boolean{
+
+    if(Object.prototype.toString.call(d) === "[object Date]") {
+      if(isNaN(d)) { return false; } else { return true; }
+    } 
+    return false;
+  }
+
+
+  clean(){
+    this.DD_MM_YYYY = '';
+    this.HH = '00';
+    this.MM = '00';
+    this.description_options_date_time = '';
+    this.value_options_date_time = '';
+  }
+
+  toClickIn(id: string){
+    document.getElementById(id)?.focus();
+  }
+
+  onClosedOptionsDateTime(){
+    this.open_options_date_time = false
+  }
+
+  
+  onChangeOptionsDateTime(event: any){
+    // this.description_options_date_time = '';
+    // this.value_options_date_time = '';
+    this.show_date_picker = false;
+
+    let now = new Date();
+    let filter_date: any = undefined;
+    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.innerValue = filter_date;
+      if( this.checkIsDate(filter_date) ){              
+        setTimeout(() => {
+          this.to_date_hh_mm(filter_date);
+          this.toSetDate(this.DD_MM_YYYY);  
+          this.show_date_picker = true;
+          this.value_options_date_time = event;
+          this.last_options_date_time = filter_date as any;
+          this.description_options_date_time = this.get_description_options_date_time(event);
+        });       
+      }
+    }
+
+  }
+
+
+  get_description_options_date_time(value: string){
+    if( this.options_date_time && (this.options_date_time).length > 0 ){
+      for( let i = 0; i < (this.options_date_time).length; i++ ){
+        const item = this.options_date_time[i];
+        if( item.value === value ){
+          return item.description;
+        }
+      }
+    }
+    return '';
+  }
+
+
+  closedTimeDescription(){
+    this.value_options_date_time = '';
+    this.description_options_date_time = ''; 
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  
+  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) {
+
+      try {
+        value = new Date( `${value}` );
+      } catch (error) {}
+
+      this.innerValue = value;
+      if( this.checkIsDate(value) ){
+        this.to_date_hh_mm(value);
+      }else{
+        this.clean()
+      }
+    }
+  }
+
+  //From ControlValueAccessor interface
+  registerOnChange(fn: any) {
+    this.onChangeCallback = fn;
+  }
+
+  //From ControlValueAccessor interface
+  registerOnTouched(fn: any) {
+    this.onTouchedCallback = fn;
+  }
+
+}

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

@@ -0,0 +1,24 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TCloudUiDatepickerTimeComponent } from './tcloud-ui-datepicker-time.component';
+import { TCloudUiDatepickerModule } from './../tcloud-ui-datepicker/tcloud-ui-datepicker.module';
+import { TCloudUiDataListModule } from '../tcloud-ui-data-list/tcloud-ui-data-list.module';
+
+@NgModule({
+  declarations: [
+    TCloudUiDatepickerTimeComponent
+  ],
+  exports: [
+    TCloudUiDatepickerTimeComponent
+  ],
+  imports: [
+    CommonModule,
+    TCloudUiDatepickerModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TCloudUiDataListModule
+  ],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+})
+export class TCloudUiDatepickerTimeModule { }

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

@@ -0,0 +1,54 @@
+<table class="tcloud-ui-filters-range-date area-range-date">
+    <tr>
+
+        <td>
+            <div *ngIf="mode === 'select'">
+                <div class="description-period">Período</div>
+                <select name="periodo" class="tc-form-control" (change)="onChangeOptionsDateTime($event.target)" [(ngModel)]="defaultValuePeriodStartStop"  >
+                    <option value=""></option> 
+                    <ng-container *ngFor="let item of options_date_time">
+                        <option [value]="item.value">{{ item.description }}</option>
+                    </ng-container>
+                </select>
+            </div>
+            <div *ngIf="mode === 'datepickers'">
+
+                <table class="area-range-datepickers">
+                    <tr>
+                        <td>
+                            <div class="description-start">{{ descriptionStart }}</div>
+                            <tcloud-ui-datepicker-time 
+                                #_input_start 
+                                [(ngModel)]="result.start" 
+                                name="input_start" 
+                                (eventChange)="onChangeStartDateTime(_input_start)">
+                            </tcloud-ui-datepicker-time>
+                        </td>
+                        <td>
+                            <div class="description-stop">{{ descriptionStop }}</div>
+                            <tcloud-ui-datepicker-time 
+                                #_input_stop
+                                [(ngModel)]="result.stop" 
+                                name="input_stop" 
+                                (eventChange)="onChangeStopDateTime(_input_stop)">
+                            </tcloud-ui-datepicker-time>
+                        </td>
+                    </tr>
+                </table>
+
+            </div>
+        </td>
+
+        <td>
+            <button class="btn-mode-range-date" [class.active]="mode === 'select'" (click)="toggle()" type="button">
+
+                <i *ngIf="mode === 'select'" class="far fa-calendar-alt" title="Alterar para calendário"></i>
+                <i *ngIf="mode !== 'select'" class="fas fa-calendar-week" title="Selecionar período"></i>
+
+                <!-- <div *ngIf="mode === 'select'">Exibir<br>Calendário</div> -->
+                <!-- <div *ngIf="mode !== 'select'">Exibir<br>Período</div> -->
+            </button>
+        </td>
+
+    </tr>
+</table>

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

@@ -0,0 +1,68 @@
+.area-range-date{
+    height: 40px;
+    width: 100%;
+    tr{
+
+        td:first-child{
+            width: calc(100% - 35px);
+            select{
+                color: #535353;
+                border-radius: 3px 0 0 3px !important;
+            }
+
+            .area-range-datepickers{
+                width: 100%;
+                td{
+                    width: 50% !important;
+                }
+            }
+
+        }
+
+        td:last-child{
+            width: 35px;
+
+            .btn-mode-range-date{
+                width: 100%;
+                text-align: center;
+                border: 1px solid #ccc;
+                background-color: #fff;
+                font-size: 17px;
+                line-height: 1;
+                cursor: pointer;
+                color: #6c6c6c;
+                height: 40px;
+                border-radius: 0 3px 3px 0;
+                &:focus{
+                    color: #403d3d;
+                }
+            }
+        }
+    }
+
+}
+
+
+.active{
+    background-color: #eee !important;
+}
+
+.description-period{
+    position: relative;
+    left: 17px;
+    top: -15px;
+    line-height: 0;
+}
+
+.description-start{
+    position: relative;
+    left: 17px;
+    top: -15px;
+    line-height: 0;
+}
+
+.description-stop{
+    position: relative;
+    top: -15px;
+    line-height: 0;
+}