@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/booking-modal/ds-mobile-booking-modal.ts

@@ -1,598 +0,0 @@
-import { Component, Input, signal, computed, CUSTOM_ELEMENTS_SCHEMA, ViewChild, AfterViewInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ModalController } from '@ionic/angular/standalone';
-import { DsIconComponent, DsButtonComponent, DsDatepickerComponent } from '@propbinder/design-system';
-import { DsMobileModalBaseComponent } from '../modal-base/ds-mobile-modal-base';
-import { DsMobileSectionComponent } from '../section';
-import { DsMobileSwiperComponent } from '../swiper/ds-mobile-swiper';
-
-/**
- * Date option interface for date selection
- */
-export interface DateOption {
-  id: string;
-  dayName: string;       // "Tue"
-  date: string;          // "19"
-  monthName: string;     // "Nov"
-  fullDate: Date;
-  state: 'default' | 'selected' | 'disabled';
-}
-
-/**
- * Time slot interface for time selection
- */
-export interface TimeSlot {
-  id: string;
-  startTime: string;     // "14:00"
-  endTime: string;       // "16:00"
-  state: 'default' | 'selected' | 'disabled';
-}
-
-/**
- * Booking result returned when user confirms booking
- */
-export interface BookingResult {
-  facilityId: string;
-  facilityTitle: string;
-  selectedDate: DateOption;
-  selectedTimeSlot: TimeSlot;
-  timestamp: Date;
-}
-
-/**
- * DsMobileBookingModalComponent
- * 
- * Full-screen modal for booking facilities with date and time selection.
- * Features swipeable date selection and vertical time slot list.
- * 
- * @example
- * ```typescript
- * const modal = await modalController.create({
- *   component: DsMobileBookingModalComponent,
- *   componentProps: {
- *     facilityId: 'facility-1',
- *     facilityTitle: 'Boremaskinen'
- *   }
- * });
- * await modal.present();
- * const result = await modal.onWillDismiss<BookingResult>();
- * ```
- */
-@Component({
-  selector: 'ds-mobile-booking-modal',
-  standalone: true,
-  imports: [
-    CommonModule,
-    DsMobileModalBaseComponent,
-    DsMobileSectionComponent,
-    DsMobileSwiperComponent,
-    DsIconComponent,
-    DsButtonComponent,
-    DsDatepickerComponent
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  styles: [`
-    /* Date item styles */
-    .date-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 80px;
-      padding: 12px 8px;
-      border-radius: 12px;
-      border: 1px solid var(--color-border, #e5e5e5);
-      background: var(--color-surface-primary, #ffffff);
-      cursor: pointer;
-      transition: all 200ms ease;
-      -webkit-tap-highlight-color: transparent;
-      gap: 4px;
-    }
-
-    .date-item .day-name {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs, 12px);
-      font-weight: 400;
-      color: var(--text-color-default-secondary, #71727a);
-      text-transform: uppercase;
-    }
-
-    .date-item .date-number {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xl, 20px);
-      font-weight: 600;
-      color: var(--text-color-default-primary, #202227);
-    }
-
-    .date-item .month-name {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs, 12px);
-      font-weight: 400;
-      color: var(--text-color-default-secondary, #71727a);
-      text-transform: capitalize;
-    }
-
-    /* Selected state */
-    .date-item.selected {
-      background: var(--color-accent, #5d5fef);
-      border-color: var(--color-accent, #5d5fef);
-    }
-
-    .date-item.selected .day-name,
-    .date-item.selected .date-number,
-    .date-item.selected .month-name {
-      color: #ffffff;
-    }
-
-    /* Disabled state */
-    .date-item.disabled {
-      background: var(--color-background-neutral-secondary, #f5f5f5);
-      border-color: var(--color-border, #e5e5e5);
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    .date-item.disabled .day-name,
-    .date-item.disabled .date-number,
-    .date-item.disabled .month-name {
-      color: var(--text-color-default-tertiary, #9a9aa2);
-    }
-
-    /* Hover effect for non-disabled items */
-    .date-item:not(.disabled):not(.selected):hover {
-      border-color: var(--color-accent, #5d5fef);
-      background: var(--color-background-neutral-secondary, #f5f5f5);
-    }
-
-    /* Time slots list */
-    .time-slots-list {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-
-    .time-slot-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      padding: 16px 20px;
-      border-radius: 12px;
-      border: 1px solid var(--color-border, #e5e5e5);
-      background: var(--color-surface-primary, #ffffff);
-      cursor: pointer;
-      transition: all 200ms ease;
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    .time-slot-item span {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-base, 16px);
-      font-weight: 400;
-      color: var(--text-color-default-primary, #202227);
-    }
-
-    /* Selected state */
-    .time-slot-item.selected {
-      background: var(--color-accent, #5d5fef);
-      border-color: var(--color-accent, #5d5fef);
-    }
-
-    .time-slot-item.selected span {
-      color: #ffffff;
-      font-weight: 500;
-    }
-
-    /* Disabled state */
-    .time-slot-item.disabled {
-      background: var(--color-background-neutral-secondary, #f5f5f5);
-      border-color: var(--color-border, #e5e5e5);
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    .time-slot-item.disabled span {
-      color: var(--text-color-default-tertiary, #9a9aa2);
-    }
-
-    /* Hover effect for non-disabled items */
-    .time-slot-item:not(.disabled):not(.selected):hover {
-      border-color: var(--color-accent, #5d5fef);
-      background: var(--color-background-neutral-secondary, #f5f5f5);
-    }
-
-    /* Fixed bottom button */
-    .booking-confirm-action {
-      width: 100%;
-      padding: 16px 20px;
-      background: var(--color-surface-primary, #ffffff);
-      border-top: 1px solid var(--color-border, #e5e5e5);
-      box-sizing: border-box;
-    }
-
-    .booking-confirm-action ::ng-deep ds-button {
-      display: block;
-      width: 100%;
-    }
-
-    .booking-confirm-action ::ng-deep ds-button button {
-      width: 100%;
-      border-radius: 100px;
-      height: 48px;
-    }
-
-    /* Swiper slide adjustments */
-    ::ng-deep .date-swiper .swiper-slide {
-      width: auto !important;
-    }
-
-    /* Styled to match ds-mobile-section's .section-link */
-    .calendar-link {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 500;
-      color: var(--color-accent, #5d5fef);
-      cursor: pointer;
-      white-space: nowrap;
-      user-select: none;
-      line-height: 1;
-    }
-
-    /* Ensure the CDK overlay renders above the Ionic modal stack */
-    ::ng-deep .cdk-overlay-container {
-      z-index: 20001;
-    }
-  `],
-  template: `
-    <ds-mobile-modal-base 
-      headerTitle="Hvornår skal det være?"
-      [showCloseButton]="true"
-      [hasFixedBottom]="true"
-      (closeClicked)="handleClose()">
-      
-      <!-- Date Section -->
-      <ds-mobile-section headline="Vælg dato">
-        <ds-datepicker
-          header-action
-          [isDateDisabled]="dateDisabledFn()"
-          (dateChange)="jumpToDate($event)">
-          <span class="calendar-link">
-            {{ selectFromCalendarText }}
-            <ds-icon name="remixArrowRightSLine" size="16px" />
-          </span>
-        </ds-datepicker>
-
-        <ds-mobile-swiper 
-          class="date-swiper"
-          [slideWidth]="'auto'" 
-          [gap]="12">
-          @for (date of dateOptions(); track date.id) {
-            <div class="swiper-slide">
-              <button 
-                class="date-item" 
-                [class.selected]="date.state === 'selected'" 
-                [class.disabled]="date.state === 'disabled'"
-                [disabled]="date.state === 'disabled'"
-                (click)="selectDate(date)">
-                <span class="day-name">{{ date.dayName }}</span>
-                <span class="date-number">{{ date.date }}</span>
-                <span class="month-name">{{ date.monthName }}</span>
-              </button>
-            </div>
-          }
-        </ds-mobile-swiper>
-      </ds-mobile-section>
-
-      <!-- Time Section -->
-      <ds-mobile-section headline="Vælg tidspunkt">
-        <div class="time-slots-list">
-          @for (slot of timeSlots(); track slot.id) {
-            <button 
-              class="time-slot-item" 
-              [class.selected]="slot.state === 'selected'" 
-              [class.disabled]="slot.state === 'disabled'"
-              [disabled]="slot.state === 'disabled'"
-              (click)="selectTime(slot)">
-              <span>{{ slot.startTime }} - {{ slot.endTime }}</span>
-              @if (slot.state === 'selected') {
-                <ds-icon name="remixCheckLine" size="20px" color="#ffffff" />
-              }
-            </button>
-          }
-        </div>
-      </ds-mobile-section>
-
-      <!-- Fixed Bottom Button -->
-      <div fixed-bottom class="booking-confirm-action">
-        <ds-button 
-          size="lg" 
-          variant="primary" 
-          [fullWidth]="true" 
-          [disabled]="!canConfirm()"
-          [loading]="isConfirming()"
-          (clicked)="handleConfirm()">
-          {{ confirmBookingText }}
-        </ds-button>
-      </div>
-    </ds-mobile-modal-base>
-  `
-})
-export class DsMobileBookingModalComponent implements AfterViewInit {
-  @Input() facilityId!: string;
-  @Input() facilityTitle!: string;
-  /**
-   * Number of days ahead available for booking selection.
-   * Defaults to 60 (2 months). Override via componentProps when opening the modal.
-   */
-  @Input() daysAhead: number = 60;
-  
-  @Input() selectFromCalendarText: string = 'Vælg fra kalender';
-  @Input() confirmBookingText: string = 'Bekræft booking';
-  @Input() availableDates?: DateOption[];
-  @Input() availableTimeSlots?: Record<string, TimeSlot[]>;
-
-  @ViewChild(DsMobileSwiperComponent) swiperComponent?: DsMobileSwiperComponent;
-
-  // Signals for reactive state management
-  dateOptions = signal<DateOption[]>([]);
-  timeSlots = signal<TimeSlot[]>([]);
-  
-  selectedDate = signal<DateOption | null>(null);
-  selectedTimeSlot = signal<TimeSlot | null>(null);
-  isConfirming = signal<boolean>(false);
-
-  // Computed property for button state
-  canConfirm = computed(() => {
-    return this.selectedDate() !== null && this.selectedTimeSlot() !== null && !this.isConfirming();
-  });
-
-  constructor(private modalController: ModalController) {
-    this.generateMockData();
-  }
-
-  /**
-   * After view init - force swiper update to fix initial positioning
-   */
-  ngAfterViewInit(): void {
-    // Use a slightly longer timeout to ensure swiper is fully initialized
-    setTimeout(() => {
-      if (this.swiperComponent && (this.swiperComponent as any).swiperInstance) {
-        const swiperInstance = (this.swiperComponent as any).swiperInstance;
-        // Update swiper to recalculate positions
-        swiperInstance.update();
-        // Slide to first slide to ensure proper centering
-        swiperInstance.slideTo(0, 0);
-      }
-    }, 150);
-  }
-
-  /**
-   * Returns true if the given date should be disabled in both the swiper and the datepicker.
-   * Weekends are disabled. Index-based mock disabling (i===3, i===7) is swiper-only and
-   * not representable as a date rule, so it is intentionally excluded here.
-   */
-  private isDateUnavailable(date: Date): boolean {
-    return date.getDay() === 0 || date.getDay() === 6;
-  }
-
-  /**
-   * Computed signal that returns a fresh disabled-date function whenever dateOptions()
-   * changes. Returning a new function reference causes the datepicker's own isDateDisabled
-   * input to update, which triggers its internal computed to re-run and re-render all
-   * calendar cells with the correct disabled state.
-   * The disabledSet is pre-built once per computation for O(1) per-cell lookups.
-   */
-  dateDisabledFn = computed(() => {
-    const disabledSet = new Set(
-      this.dateOptions()
-        .filter(opt => opt.state === 'disabled')
-        .map(opt => opt.fullDate.toDateString())
-    );
-
-    return (date: Date): boolean => {
-      const today = new Date(); today.setHours(0, 0, 0, 0);
-      const max = new Date(today); max.setDate(today.getDate() + this.daysAhead - 1);
-      const d = new Date(date); d.setHours(0, 0, 0, 0);
-      if (d < today || d > max) return true;
-      return disabledSet.has(date.toDateString());
-    };
-  });
-
-  /**
-   * Generate mock date and time data or use provided available data
-   */
-  private generateMockData(): void {
-    if (this.availableDates && this.availableDates.length > 0) {
-      this.dateOptions.set(this.availableDates);
-      
-      const firstAvailableDate = this.availableDates.find(d => d.state !== 'disabled') || this.availableDates[0];
-      if (firstAvailableDate) {
-        // Ensure strictly one selected
-        const updatedDates = this.availableDates.map(date => ({
-          ...date,
-          state: date.id === firstAvailableDate.id ? 'selected' as const : 
-                 (date.state === 'disabled' ? 'disabled' as const : 'default' as const)
-        }));
-        this.dateOptions.set(updatedDates);
-        
-        const selectedRef = updatedDates.find(d => d.id === firstAvailableDate.id);
-        if (selectedRef) {
-          this.selectedDate.set(selectedRef);
-          this.generateTimeSlots(selectedRef.fullDate, selectedRef.date);
-        }
-      }
-      return;
-    }
-
-    const dates: DateOption[] = [];
-    const today = new Date();
-    
-    const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    
-    let firstAvailableDate: DateOption | null = null;
-    
-    for (let i = 0; i < this.daysAhead; i++) {
-      const date = new Date(today);
-      date.setDate(today.getDate() + i);
-      
-      const isDisabled = this.isDateUnavailable(date) || (i === 3) || (i === 7);
-      
-      const dateOption: DateOption = {
-        id: `date-${i}`,
-        dayName: dayNames[date.getDay()],
-        date: date.getDate().toString(),
-        monthName: monthNames[date.getMonth()],
-        fullDate: date,
-        state: isDisabled ? 'disabled' : 'default'
-      };
-      
-      // Track the first available (non-disabled) date
-      if (!isDisabled && !firstAvailableDate) {
-        firstAvailableDate = dateOption;
-        dateOption.state = 'selected'; // Set as selected
-      }
-      
-      dates.push(dateOption);
-    }
-    
-    this.dateOptions.set(dates);
-    
-    // Set the first available date as selected and generate time slots for it
-    if (firstAvailableDate) {
-      this.selectedDate.set(firstAvailableDate);
-      this.generateTimeSlots(firstAvailableDate.fullDate, firstAvailableDate.date);
-    } else {
-      // Fallback to today if no available dates
-      this.generateTimeSlots(today);
-    }
-  }
-
-  /**
-   * Generate time slots based on selected date and dynamic available timeslots
-   */
-  private generateTimeSlots(date: Date, dateStringKey?: string): void {
-    if (this.availableTimeSlots && dateStringKey && this.availableTimeSlots[dateStringKey]) {
-      this.timeSlots.set(this.availableTimeSlots[dateStringKey]);
-      return;
-    }
-
-    const slots: TimeSlot[] = [];
-    const currentHour = new Date().getHours();
-    const isToday = date.toDateString() === new Date().toDateString();
-    
-    // Generate time slots from 08:00 to 20:00 in 2-hour increments
-    const startHour = 8;
-    const endHour = 20;
-    
-    for (let hour = startHour; hour < endHour; hour += 2) {
-      const startTime = `${hour.toString().padStart(2, '0')}:00`;
-      const endTime = `${(hour + 2).toString().padStart(2, '0')}:00`;
-      
-      // Disable past times if today is selected
-      const isPast = isToday && hour < currentHour;
-      // Randomly disable some slots for demo purposes
-      const isRandomlyDisabled = Math.random() > 0.7;
-      const isDisabled = isPast || isRandomlyDisabled;
-      
-      slots.push({
-        id: `slot-${hour}`,
-        startTime,
-        endTime,
-        state: isDisabled ? 'disabled' : 'default'
-      });
-    }
-    
-    this.timeSlots.set(slots);
-  }
-
-  /**
-   * Handle date selection
-   */
-  selectDate(selectedDate: DateOption): void {
-    if (selectedDate.state === 'disabled') return;
-    
-    // Update date options
-    const updatedDates = this.dateOptions().map(date => ({
-      ...date,
-      state: date.id === selectedDate.id ? 'selected' as const : 
-             (date.state === 'disabled' ? 'disabled' as const : 'default' as const)
-    }));
-    
-    this.dateOptions.set(updatedDates);
-    this.selectedDate.set(selectedDate);
-    
-    // Regenerate time slots for the selected date
-    this.generateTimeSlots(selectedDate.fullDate, selectedDate.date);
-    
-    // Reset time selection
-    this.selectedTimeSlot.set(null);
-  }
-
-  /**
-   * Handle time slot selection
-   */
-  selectTime(selectedSlot: TimeSlot): void {
-    if (selectedSlot.state === 'disabled') return;
-    
-    // Update time slots
-    const updatedSlots = this.timeSlots().map(slot => ({
-      ...slot,
-      state: slot.id === selectedSlot.id ? 'selected' as const : 
-             (slot.state === 'disabled' ? 'disabled' as const : 'default' as const)
-    }));
-    
-    this.timeSlots.set(updatedSlots);
-    this.selectedTimeSlot.set(selectedSlot);
-  }
-
-  /**
-   * Called when the datepicker overlay emits a date selection.
-   * Finds the matching DateOption in the swiper, selects it, and auto-scrolls to it.
-   */
-  jumpToDate(date: Date | null): void {
-    if (!date) return;
-    const options = this.dateOptions();
-    const idx = options.findIndex(
-      opt => opt.fullDate.toDateString() === date.toDateString()
-    );
-    if (idx === -1) return;
-    const option = options[idx];
-    if (option.state === 'disabled') return;
-    this.selectDate(option);
-    this.swiperComponent?.slideTo(idx);
-  }
-
-  /**
-   * Handle confirm button click
-   */
-  async handleConfirm(): Promise<void> {
-    if (!this.canConfirm()) return;
-    
-    // Set loading state
-    this.isConfirming.set(true);
-    
-    // Simulate booking API call with 2 second delay
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    
-    const result: BookingResult = {
-      facilityId: this.facilityId,
-      facilityTitle: this.facilityTitle,
-      selectedDate: this.selectedDate()!,
-      selectedTimeSlot: this.selectedTimeSlot()!,
-      timestamp: new Date()
-    };
-    
-    await this.modalController.dismiss(result, 'confirm');
-  }
-
-  /**
-   * Handle close button click
-   */
-  async handleClose(): Promise<void> {
-    await this.modalController.dismiss(null, 'cancel');
-  }
-}