@dev-tcloud/tcloud-ui 2.2.1 → 2.2.3

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

@@ -0,0 +1,518 @@
+import { Component, OnInit, ViewChild, ElementRef, Output, EventEmitter, forwardRef, Input, ViewEncapsulation } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DateBRPipe } from '../../_pipes';
+
+// https://mymth.github.io/vanillajs-datepicker/#/
+declare var Datepicker: any;
+
+var translation = {
+  ptBR: {
+    days: ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
+    daysShort: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
+    daysMin: ["Do", "Se", "Te", "Qu", "Qu", "Se", "Sa"],
+    months: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
+    monthsShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
+    today: "Hoje",
+    clear: "Limpar",
+    titleFormat: "MM y",
+    format: "dd/mm/yyyy",
+    weekStart: 0
+  }
+};
+
+const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => TCloudUiDatepickerComponent),
+  multi: true
+};
+
+const noop = () => {
+};
+
+@Component({
+  selector: 'tcloud-ui-datepicker',
+  templateUrl: './tcloud-ui-datepicker.component.html',
+  styleUrls: [
+    './tcloud-ui-datepicker.component.scss',
+    './datepicker/css/datepicker.min.css',
+    './datepicker/css/style.css',
+  ],
+  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
+  encapsulation: ViewEncapsulation.None
+})
+export class TCloudUiDatepickerComponent implements OnInit {
+
+  // multiple permite selecionar multiplas datas
+  @Input() multiple: boolean = false;
+
+  // maxNumberOfDates - Maximum number of dates users can select. No limit is applied if 0 is set.
+  // Depende de: multiple como true
+  @Input() maxNumberOfDates: number = 0;
+
+  // daysOfWeekDisabled - Dias da semana desabilidatos = 0 para sabado até 6 para domingo
+  @Input() daysOfWeekDisabled: number[] = [];
+
+  // minDate - Data minima para exibicao do calendario - ex: 01/01/2020
+  @Input() minDate: string = '';
+
+  // maxDate - Data maxima para exibicao do calendario - ex: 31/12/2020
+  @Input() maxDate: string = '';
+
+  // datesDisabled - Datas desabilitadas - Ex: ['12/10/2020','25/12/2020']
+  @Input() datesDisabled: string[] = [];
+
+  // modeInput - Exibe um input para quando clicar abrir o calendario
+  @Input() modeInput: boolean = false;
+
+  @Input() useBorder: boolean = true;
+
+  @Input() childInputDateTime: boolean = false;
+
+  @Input() startViewInMinDate: boolean = false;
+
+  @Input() startViewInMaxDate: boolean = false;
+
+  @Input() disabled: boolean = false;
+
+  // onChange - Dispara a data selecionada
+  @Output() onChange = new EventEmitter<any|undefined>();
+
+  default_innerValue: any | undefined;
+  default_innerValue_convertida: any | undefined;
+  default_qtd_innerValue: number = 0;
+  date_changed: any | undefined;
+
+  @Input() set ngModel(v: any){
+
+    if( v && v !== this.innerValue ){
+      this.innerValue = v; //this.toSetMask(v); 
+      this.default_innerValue = v;
+      this.default_innerValue_convertida = this.convertDates(v);
+      if( this.multiple ){
+        this.default_qtd_innerValue = (v).length;
+      }      
+      this.onChange.emit(v);
+    } 
+  }
+
+  @Output() ngModelChange = new EventEmitter<any|undefined>();
+
+  @Output() onCheckDate = new EventEmitter<any>();
+
+  @ViewChild('input_datepicker', {static: false}) input_datepicker: ElementRef<HTMLElement> | undefined;
+  private datepicker: any | undefined;
+  @Input() code: string = 'tcloud-ui-datepicker';
+
+  constructor(
+    private _DateBRPipe: DateBRPipe
+  ) { }
+
+  ID: string = '';
+
+  ngOnInit(): void {
+    this.ID = this.generateID();
+    Datepicker.locales.ptBR = translation.ptBR;    
+    this.start_datepicker();
+  }
+
+  generateID(): string{
+    return `tcloud-ui-datepicker-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`;
+  }
+
+  toSetMask(v: string){
+    return this._DateBRPipe.transform(v);
+  }
+
+  parseDateLocal(dateString: any, _split?: string){
+    if( !_split ){ _split = '-'; }
+    const [day , month, year] = dateString.split(_split);
+    return new Date(year, month - 1, day); // Subtrai 1 porque os meses são indexados a partir de 0
+  }
+
+  formatDateLocal(date: any){
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Adiciona 1 porque os meses são indexados a partir de 0
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${day}/${month}/${ year}`;
+  }
+
+  get_options(){
+    // Função para formatar uma data no fuso horário local
+    const formatDateLocal = (date: any) => {
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+      return `${year}-${month}-${day}`;
+    }
+
+    // Função para analisar uma data no fuso horário local
+    const parseDateLocal = (dateString: any) => {
+      const [year, month, day] = dateString.split('-');
+      return new Date(year, month - 1, day);
+    }
+
+    let options = {
+      nextArrow: `<i class="fas fa-caret-right"></i>`,
+      prevArrow: `<i class="fas fa-caret-left"></i>`,
+      format: 'dd/mm/yyyy',      
+      daysOfWeekHighlighted: [0,6],
+      language: 'ptBR',
+      formatter: {
+        date: formatDateLocal,
+      },
+      parser: {
+        date: parseDateLocal,
+      }     
+    } as any;
+
+    if( (this.daysOfWeekDisabled).length > 0 ){
+      options['daysOfWeekDisabled'] = this.daysOfWeekDisabled;
+    }
+
+    if( (this.datesDisabled).length > 0 ){
+      options['datesDisabled'] = this.datesDisabled;
+    }
+
+    if( this.minDate !== '' ){
+      options['minDate'] = this.minDate;
+    }
+
+    if( this.maxDate !== '' ){
+      options['maxDate'] = this.maxDate;
+    }
+
+    if( this.multiple ){  
+      options['multiple'] = true;  
+      options['autohide'] = false; 
+      options['maxNumberOfDates'] = this.maxNumberOfDates;
+    }
+    
+    return options;
+  }
+
+  clearDate(){
+    if( this.datepicker ){ this.datepicker.setDate({clear: true}); }
+  }
+
+  start_datepicker(){
+    setTimeout(() => {     
+      const input_datepicker = <any> this.input_datepicker?.nativeElement;
+      if( input_datepicker ){
+        input_datepicker.setAttribute('placeholder','DD/MM/YYYY');
+
+        if( !this.useBorder ){
+          input_datepicker.setAttribute('style','border:none; text-align: center; max-width: 105px; padding: 0;');
+        }
+        
+        this.datepicker = new Datepicker( input_datepicker, this.get_options() );        
+        if( this.innerValue && this.innerValue !== '' ){
+          this.toSetDefaultDate(this.innerValue);
+        }
+
+        input_datepicker.addEventListener('keyup', (event: any) => {
+          const v = (input_datepicker['value']) ? input_datepicker['value'] : '';
+          input_datepicker['value'] = this.toSetMask(v);
+          if( (input_datepicker['value']).length >= 10 ){
+            const v = (input_datepicker['value']).substring(0, 10);
+            const part_date = (v).split('/');
+            if( (part_date).length === 3 ){
+
+              let dia = part_date[0];
+              let mes = part_date[1];
+              let ano = part_date[2];
+
+              mes = (+(mes) < 10 ) ? `0${+mes}` : mes;  
+              dia = (+(dia) < 10 ) ? `0${+dia}` : dia;
+
+              const dt = new Date(ano+'-'+mes+'-'+dia);
+              if( dt ){
+                input_datepicker?.changeDate;
+                document.getElementById(this.ID)?.blur();
+                this.onChange.emit(this.innerValue);
+                this.ngModelChange.emit(this.innerValue);
+              }
+            }
+          }else{
+            this.innerValue = undefined;
+            this.onChange.emit(this.innerValue);
+            this.ngModelChange.emit(this.innerValue);
+          }
+        })
+
+       
+        input_datepicker.addEventListener('changeDate', (event: any) => {
+
+          if( event?.detail?.date ){
+
+            let qtd = (event.detail.date).length;  
+
+            if( this.disabled ){
+
+              if( !this.multiple ){
+                let dt = this.formatDateLocal(event.detail?.date);
+                if( this.default_innerValue && this.default_innerValue[0] && ( `${this.default_innerValue[0]}` !== `${dt}` ) ){
+                  qtd = 1
+                }
+              }
+             
+              this.datepicker.setDate( this.default_innerValue_convertida, {clear: true, render: true});
+              
+              if( qtd > this.default_qtd_innerValue ){
+                this.date_changed = event?.detail.viewDate;
+                this.datepicker.setFocusedDate( this.date_changed, {resetView: false} );
+
+                this.onCheckDate.emit({
+                  value: this.formatDateLocal(this.date_changed), 
+                  date: this.date_changed, 
+                  checked: true,
+                  disabled: this.disabled
+                });
+              }else{
+
+                if( this.multiple ){
+                  const so = this.findDifferences( this.default_innerValue, this.formatArrayDates(event.detail.date) );
+                  if( so && (so).length > 0 ){
+
+                    this.date_changed = this.parseDateLocal(so[0], '/');
+                    this.onCheckDate.emit({
+                      value :so[0], 
+                      date: this.date_changed,
+                      checked: false,
+                      disabled: this.disabled
+                    });
+                  }
+                }
+
+                this.datepicker.setFocusedDate( this.date_changed, {resetView: false} );
+              }
+            }else{
+
+
+              this.toSelectedDate( event.detail );
+            }
+          }else{
+            this.innerValue = '';
+            this.ngModelChange.emit(this.innerValue);
+          }
+        })
+      }      
+    });
+  }
+
+
+  toSetDefaultDate(date: string | string[]){
+    
+    if( date === undefined || date === null || date === '' ){
+      this.clearDate();
+      return;
+    }
+
+    let dates = [] as string[];
+
+    if( date && typeof date === 'string' ){
+      if( (date).includes(',') ){
+        const dates = (date).split(',');
+        date = dates;
+        if( !this.multiple ){
+          this.innerValue = date = dates[0];
+          this.ngModelChange.emit(this.innerValue); 
+        }
+      }
+    }
+    
+    if( date && typeof date === 'string' ){
+      (dates).push( date ); 
+    }else{
+      dates = <Array<string>> date;
+    }
+    if( this.datepicker ){
+
+      if( dates && dates.length > 0 && this.multiple ){
+        if( this.startViewInMinDate ){          
+          dates = this.sortDatesDescending(dates);          
+        }else if(this.startViewInMaxDate){
+          dates = this.sortDatesAscending(dates); 
+        }
+      }
+      this.datepicker.setDate(dates);      
+    } 
+  }
+
+  convertDates(arrayDeDatas: any[]) {
+    const formatDate = (dateString: any) => {
+      const [day, month, year] = dateString.split('/');
+      return new Date(year, month - 1, day); 
+    }
+    if( arrayDeDatas && Array.isArray(arrayDeDatas) ){
+      const datasOrdenadas = arrayDeDatas.map((data: any) => ({ original: data, convertida: formatDate(data) }));
+      return datasOrdenadas.map(item => item.convertida); 
+    }else{
+      return [arrayDeDatas];
+    }
+  }
+
+  sortDatesDescending(arrayDeDatas: any[]) {
+    const formatDate = (dateString: any) => {
+      const [day, month, year] = dateString.split('/');
+      return new Date(year, month - 1, day); 
+    }
+    const datasOrdenadas = arrayDeDatas.map((data: any) => ({ original: data, convertida: formatDate(data) })).sort((a:any, b: any) => b.convertida - a.convertida);
+    const datasOrdenadasFormatadas = datasOrdenadas.map(item => item.original); 
+    return datasOrdenadasFormatadas;
+  }
+  
+  sortDatesAscending(arrayDeDatas: any[]) {
+    const formatDate = (dateString: any) => {
+      const [day, month, year] = dateString.split('/');
+      return new Date(year, month - 1, day); 
+    }
+    const datasOrdenadas = arrayDeDatas.map((data: any) => ({ original: data, convertida: formatDate(data) })).sort((a:any, b: any) => a.convertida - b.convertida);
+    const datasOrdenadasFormatadas = datasOrdenadas.map(item => item.original);
+    return datasOrdenadasFormatadas;
+  }
+
+  toSelectedDate(detail: any){    
+    if( detail.datepicker.dates && (detail.datepicker.dates).length > 0 ){
+      if( this.multiple ){
+        let dates = [];
+        for( let i = 0; i < (detail.datepicker.dates).length; i++ ){
+          const timeStamp = <number> detail.datepicker.dates[i];
+          (dates).push( this.format_date( timeStamp ) );
+        }
+        this.innerValue = dates;
+        this.onChange.emit(this.innerValue);        
+      }else{
+        const timeStamp = <number> detail.datepicker.dates[0];
+        const date = this.format_date( timeStamp );
+        this.onChange.emit(date);
+        this.innerValue = date;
+      }      
+    }else{
+      this.clearDate();
+      this.innerValue = null;
+      this.onChange.emit(this.innerValue);
+    } 
+    this.value = this.innerValue;
+    this.ngModelChange.emit(this.innerValue); 
+  }
+
+  format_date(timeStamp: number){
+    var date = new Date(timeStamp);
+
+    let dia = `${date.getDate()}`;
+    let mes = `${date.getMonth()+1}`;
+    let ano = `${date.getFullYear()}`;
+
+    dia = (+(dia) < 10 ) ? `0${+dia}` : dia;
+    mes = (+(mes) < 10 ) ? `0${+mes}` : mes; 
+
+    const dateFormat = `${dia}/${mes}/${ano}`;
+    return dateFormat;
+  }
+
+  toClickIn(id: string){
+    const element = document.getElementById(id) as any;
+    setTimeout(() => {      
+      element?.datepicker?.show();
+    });
+  }
+
+
+
+  findDifferences(array1: any, array2: any) {
+    const conjuntoComum = new Set([...array1, ...array2]);
+    return Array.from(conjuntoComum).filter(item => !(array1.includes(item) && array2.includes(item)));
+  }
+
+
+
+  formatArrayDates(array_dates: any){
+    let formateds = [];
+    if( array_dates && (array_dates).length > 0 ){
+      const formatDateLocal = (date: any) => {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // Adiciona 1 porque os meses são indexados a partir de 0
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${day}/${month}/${year}`;
+      }
+      for( let i = 0; i < (array_dates).length; i++ ){
+        const dt = array_dates[i];
+        (formateds).push( formatDateLocal(dt) )
+      }
+    }
+    return formateds;
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  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.toSetMask(v);      
+      this.onChangeCallback(v);
+    }else{
+     // this.innerValue = '';
+    }
+  }
+
+  //Set touched on blur
+  onBlur() {
+    this.onTouchedCallback();
+  }
+
+  //From ControlValueAccessor interface
+  writeValue(value: any) {
+    if (value !== this.innerValue) {
+      this.innerValue = value;
+      this.toSetDefaultDate(value);
+    }
+  }
+
+  //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/tcloud-ui-datepicker.module.ts

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

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

@@ -0,0 +1,97 @@
+<div class="tcloud-ui-datepicker-time">
+  <input type="hidden" value="{{ innerValue }}" #_datepickertime >
+  <form #_formulario="ngForm">
+    <div class="input-control-time">
+      <div class="form-control-time">
+
+        <table style="width: 100%;">
+          <tr>
+            <td>
+
+              <div class="input-options-date">
+              <table class="form-time">
+                <tr>
+                  <!-- <td class="area-icon"><div class="delimiter-time-icon" (click)="toClickIn(ID)" ><i class="fas fa-calendar-alt"></i></div></td> -->
+                  <td class="area-input-date">
+                    <ng-container *ngIf="show_date_picker">
+                      <tcloud-ui-datepicker #_tclouddatepickertime [childInputDateTime]="true" [modeInput]="true" name="date" [useBorder]="false" [(ngModel)]="DD_MM_YYYY" (onChange)="toSetDate($event)" ></tcloud-ui-datepicker>
+                    </ng-container>
+                  </td>
+                  
+                  <td class="area-delimiter"><div class="delimiter-time"></div></td>
+                  <td class="area-input-hour">
+                    <!--<input type="text" placeholder="HH" (keyup)="toSetTime()" [(ngModel)]="HH" maxlength="2" name="hh" pattern="[0][0-9]|[1][0-9]|2[0-3]">-->
+                    <select class="select-time-date" (change)="toSetTime()" [(ngModel)]="HH" name="hh">
+                      <ng-container *ngFor="let hh of option_HH">
+                        <option [ngValue]="hh">{{ hh }}</option>
+                      </ng-container>
+                    </select>
+                  </td>
+                  <td class="area-delimiter"><div class="delimiter-time">:</div></td>
+                  <td class="area-input-minute">
+                    <!--<input type="text" placeholder="MM" (keyup)="toSetTime()" [(ngModel)]="MM" maxlength="2" name="mm" pattern="[012345][0-9]">-->
+                    <select class="select-time-date" (change)="toSetTime()" [(ngModel)]="MM" name="mm">
+                      <ng-container *ngFor="let mm of option_MM">
+                        <option [value]="mm">{{ mm }}</option>
+                      </ng-container>
+                    </select>
+                  </td>
+                  <td class="area-clean"></td>
+                </tr>
+              </table>
+
+              <div class="description-options-date" *ngIf="value_options_date_time !== ''">
+                <strong>{{ description_options_date_time }}</strong>
+
+                  <!-- <div class="area-action-date-time-selected">
+                    <button class="btn-icon" type="button" (click)="closedTimeDescription()" >
+                      <i class="fas fa-times"></i>
+                    </button>                  
+                  </div> -->
+              </div>
+
+
+            </div>
+
+            </td>
+            <td *ngIf="useOptionsDateTime && options_date_time && (options_date_time).length > 0" style="width: 20px">
+              <button type="button" class="icon-short-time" (click)="open_options_date_time = !open_options_date_time" [title]="description_options_date_time" >
+                <i *ngIf="!open_options_date_time" class="fas fa-caret-down"></i>
+                <i *ngIf="open_options_date_time" class="fas fa-caret-up"></i>
+              </button>
+
+              <ng-container *ngIf="value_options_date_time !== ''">
+                <button class="btn-icon-close" type="button" (click)="closedTimeDescription()" >
+                  <i class="fas fa-times"></i>
+                </button> 
+              </ng-container>
+
+            </td>
+          </tr>
+          <tr *ngIf="useOptionsDateTime && options_date_time && (options_date_time).length > 0 && open_options_date_time">
+            <td colspan="2">
+                <tcloud-ui-data-list 
+                  name="value_options_date_time"
+                  [showInput]="false" 
+                  [search]="false" 
+                  [open]="true" 
+                  [listItems]="options_date_time" 
+                  (onClosed)="onClosedOptionsDateTime()"
+                  [ngModel]="value_options_date_time"
+                  (ngModelChange)="onChangeOptionsDateTime($event)"
+                  >
+                </tcloud-ui-data-list>
+
+                
+
+
+              
+            </td>
+          </tr>
+        </table>
+
+        
+      </div>
+    </div>
+  </form>
+</div>