@propbinder/mobile-design 0.2.48 → 0.2.50

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

@@ -0,0 +1,598 @@
+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');
+  }
+}