@dropi/ui-components 1.0.0

package/src/components-source/date-picker-range/date-picker-range.component.ts

@@ -0,0 +1,254 @@
+import {
+  Component,
+  OnInit,
+  forwardRef,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  Renderer2,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { SharedModule } from 'primeng/api';
+import { CalendarModule } from 'primeng/calendar';
+import { NgIf, NgClass, NgFor } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-date-picker-range',
+  templateUrl: './date-picker-range.component.html',
+  styleUrls: ['./date-picker-range.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DatePickerRangeComponent),
+      multi: true,
+    },
+  ],
+  standalone: true,
+  imports: [
+    NgIf,
+    NgClass,
+    CalendarModule,
+    FormsModule,
+    SharedModule,
+    NgFor,
+    ButtonModule,
+    TranslateModule,
+  ],
+})
+export class DatePickerRangeComponent implements OnInit, OnChanges, ControlValueAccessor {
+  @Input() startDate: string;
+  @Input() showLabel: boolean = true;
+  @Input() placeholder: string = '';
+  @Input() endDate: string;
+  @Input() limit: number = 0;
+  @Input() minDateLimit: string;
+  @Input() maxDateLimit: string;
+  @Input() loading: boolean = false;
+  @Input() setRight: boolean = false;
+  @Input() maxDaysRange: number = 0;
+  @Input() appendTo: string = '';
+
+  @Output() startDateChange = new EventEmitter<Date>();
+  @Output() endDateChange = new EventEmitter<Date>();
+
+  viewRangeWarning: boolean = false;
+
+  CalendarTypeView: 'date' | 'month' | 'year' | null = null;
+  isDateView = true;
+  dateRange: Date[] | undefined;
+  ranges: any[];
+  locale: any;
+  activeRangeIndex: number | null = null;
+  maxDate: Date;
+  minDate: Date;
+
+  onChange: any = () => {};
+  onTouch: any = () => {};
+
+  constructor(private renderer: Renderer2) {
+    this.ranges = [
+      { label: 'today range', value: [new Date(), new Date()] },
+      {
+        label: 'last 7 days',
+        value: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date()],
+      },
+      {
+        label: 'last 30 days',
+        value: [new Date(new Date().setDate(new Date().getDate() - 29)), new Date()],
+      },
+      {
+        label: 'last 90 days',
+        value: [new Date(new Date().setDate(new Date().getDate() - 89)), new Date()],
+      },
+    ];
+
+    this.locale = {
+      firstDayOfWeek: 1,
+      dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
+      dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
+      dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
+      monthNames: [
+        'Enero',
+        'Febrero',
+        'Marzo',
+        'Abril',
+        'Mayo',
+        'Junio',
+        'Julio',
+        'Agosto',
+        'Septiembre',
+        'Octubre',
+        'Noviembre',
+        'Diciembre',
+      ],
+      monthNamesShort: [
+        'Ene',
+        'Feb',
+        'Mar',
+        'Abr',
+        'May',
+        'Jun',
+        'Jul',
+        'Ago',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dic',
+      ],
+      today: 'Hoy',
+      clear: 'Borrar',
+    };
+  }
+
+  ngOnInit() {
+    this.updateDateRange();
+    this.updateDateLimits();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['startDate'] || changes['endDate']) {
+      if (this.maxDaysRange !== 0 && this.dateRange!) {
+        if (this.dateRange.length === 2) {
+          const [startDate, endDate] = this.dateRange;
+          if (startDate! && endDate!) {
+            const timeDifference = Math.abs(endDate.getTime() - startDate.getTime());
+            const dayDifference = timeDifference / (1000 * 3600 * 24);
+            if (dayDifference > this.maxDaysRange) {
+              this.viewRangeWarning = true;
+            } else {
+              this.viewRangeWarning = false;
+            }
+          }
+        }
+      }
+      this.updateDateRange();
+    }
+    if (changes['limit'] || changes['minDateLimit'] || changes['maxDateLimit']) {
+      this.updateDateLimits();
+    }
+  }
+
+  updateDateRange() {
+    if (this.startDate && this.endDate) {
+      this.dateRange = [new Date(this.startDate), new Date(this.endDate)];
+      this.checkActiveRange();
+    }
+  }
+
+  updateDateLimits() {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    if (this.limit === 0) {
+      this.maxDate = today;
+    } else {
+      this.maxDate = new Date(today.setDate(today.getDate() + this.limit));
+    }
+
+    if (this.minDateLimit) {
+      this.minDate = new Date(this.minDateLimit);
+    }
+
+    if (this.maxDateLimit) {
+      const maxDateFromLimit = new Date(this.maxDateLimit);
+      if (maxDateFromLimit < this.maxDate) {
+        this.maxDate = maxDateFromLimit;
+      }
+    }
+  }
+
+  writeValue(value: any): void {
+    if (value) {
+      this.dateRange = value;
+      this.checkActiveRange();
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  onSelect(event: any) {
+    if (this.dateRange && this.dateRange.length === 2) {
+      this.startDateChange.emit(this.dateRange[0]);
+      this.endDateChange.emit(this.dateRange[1]);
+    }
+    this.onChange(this.dateRange);
+    this.onTouch();
+    this.checkActiveRange();
+  }
+
+  selectRange(range: any, index: number) {
+    this.dateRange = range.value;
+    this.startDateChange.emit(this.dateRange[0]);
+    this.endDateChange.emit(this.dateRange[1]);
+    this.onChange(this.dateRange);
+    this.onTouch();
+    this.activeRangeIndex = index;
+  }
+
+  checkActiveRange() {
+    if (
+      !this.dateRange ||
+      this.dateRange.length !== 2 ||
+      !this.dateRange[0] ||
+      !this.dateRange[1]
+    ) {
+      this.activeRangeIndex = null;
+      return;
+    }
+
+    const start = this.dateRange[0] instanceof Date ? this.dateRange[0].setHours(0, 0, 0, 0) : null;
+    const end = this.dateRange[1] instanceof Date ? this.dateRange[1].setHours(0, 0, 0, 0) : null;
+
+    this.activeRangeIndex = this.ranges.findIndex((range) => {
+      const rangeStart = range.value[0].setHours(0, 0, 0, 0);
+      const rangeEnd = range.value[1].setHours(0, 0, 0, 0);
+      return start === rangeStart && end === rangeEnd;
+    });
+  }
+
+  checkCalendarView(calendar: any) {
+    alert(this.isDateView);
+    // Verifica si el componente está en la vista de selección de día, mes o año
+    const isMonthOrYearView =
+      calendar.overlay?.querySelector('.p-datepicker-monthpicker') ||
+      calendar.overlay?.querySelector('.p-datepicker-yearpicker');
+    this.isDateView = !isMonthOrYearView;
+
+    console.log(this.CalendarTypeView);
+  }
+
+  showCalendar() {
+    const input = this.renderer.selectRootElement('#date-range', true);
+    input.click();
+  }
+}

package/src/components-source/dropi-avatars/dropi-avatars.component.html

@@ -0,0 +1,17 @@
+<figure class="dropi-avatars">
+  <ng-container *ngIf="image; else onlyInitials">
+    <img
+      [src]="image"
+      [alt]="alt"
+      [ngClass]="[type]"
+      class="dropi-avatar"
+      (error)="image = 'assets/images/delivery/default.svg'"
+    />
+  </ng-container>
+
+  <ng-template #onlyInitials>
+    <div class="dropi-avatar__initials fallback" [ngClass]="[type]">
+      <span>{{ initials }}</span>
+    </div>
+  </ng-template>
+</figure>

package/src/components-source/dropi-avatars/dropi-avatars.component.scss

@@ -0,0 +1,58 @@
+.dropi-avatars {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+}
+.dropi-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-family: sans-serif;
+  object-fit: cover;
+  background-color: #e0e0e0;
+  color: #333;
+  border-radius: 50%;
+  &.users {
+    width: 35px;
+    height: 35px;
+  }
+  &.transport {
+    width: 33px;
+    height: 33px;
+  }
+  &.supplier {
+    width: 70px;
+    height: 70px;
+  }
+  &.payment {
+    width: 33px;
+    height: 33px;
+  }
+  &__initials {
+    display: flex;
+    width: 35px;
+    height: 35px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background-color: var(--Primary-Primary-500);
+    span {
+      color: var(--Neutral-White);
+      font-family: Montserrat, sans-serif;
+      font-size: var(--font-size-m);
+      font-style: normal;
+      font-weight: var(--font-weight-bold);
+      line-height: var(--lineheight-large);
+    }
+    &.counter {
+      background: var(--Gray-Gray-50, #f7f8fa);
+      span {
+        color: var(--Gray-Gray-400);
+        font-size: var(--font-size-s);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--lineheight-simple);
+      }
+    }
+  }
+}