@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/facility-creation-modal/ds-mobile-facility-creation-modal.ts

@@ -0,0 +1,656 @@
+import { Component, signal, Input, ViewChild, ElementRef, OnInit, AfterViewInit, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ModalController } from '@ionic/angular/standalone';
+import { Capacitor } from '@capacitor/core';
+import { FilePicker } from '@capawesome/capacitor-file-picker';
+import { DsButtonComponent, DsTextareaComponent, DsIconComponent, DsIconButtonComponent } from '@propbinder/design-system';
+import { DsMobileModalBaseComponent } from '../modal-base/ds-mobile-modal-base';
+import { DsMobileSectionComponent } from '../section';
+import { DsMobileListItemComponent } from '../list-item';
+import { DsMobileBottomSheetService } from '../bottom-sheet';
+import { DsMobileAttachmentPreviewComponent, type AttachmentData, type AttachmentFileType } from '../attachment-preview';
+
+/**
+ * New facility form data
+ */
+export interface NewFacilityData {
+  title: string;
+  description: string;
+  whoCanBook: string;
+  whenCanBook: string;
+  price: string;
+  accessRequirements: string;
+  attachments: AttachmentData[];
+}
+
+/**
+ * DsMobileFacilityCreationModalComponent
+ *
+ * Modal component for creating new facilities.
+ * Uses ds-mobile-modal-base for consistent layout and behavior.
+ *
+ * Features:
+ * - Title and description fields
+ * - Interactive list items for facility options
+ * - Bottom sheet pickers for selections
+ * - Photo upload with preview
+ * - Form validation
+ *
+ * This component is typically not used directly - use DsMobileFacilityCreationModalService instead.
+ */
+@Component({
+  selector: 'ds-mobile-facility-creation-modal',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    DsButtonComponent,
+    DsTextareaComponent,
+    DsIconComponent,
+    DsIconButtonComponent,
+    DsMobileModalBaseComponent,
+    DsMobileSectionComponent,
+    DsMobileListItemComponent,
+    DsMobileAttachmentPreviewComponent,
+  ],
+  styleUrls: ['../shared/mobile-common.css', './ds-mobile-facility-creation-modal.css'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <ds-mobile-modal-base
+      [loading]="loading"
+      [error]="error"
+      [showHeader]="false"
+      [hasFixedBottom]="true"
+      [enableKeyboardHandling]="true"
+      [keyboardContentBehavior]="'overlay'"
+      closeButtonLabel="Close"
+    >
+      <!-- Form Content -->
+      <ds-mobile-section class="form-section">
+        <!-- Title Field (Large Ghost Textarea) -->
+        <ds-textarea
+          #titleInput
+          [(ngModel)]="title"
+          [ghost]="true"
+          [required]="true"
+          [rows]="1"
+          [placeholder]="titlePlaceholder"
+          class="inquiry-title-input ghost-input-clean"
+          (valueChange)="handleTitleChange($event)"
+        />
+
+        <!-- Description Field (Ghost Textarea) -->
+        <ds-textarea
+          #descriptionInput
+          [(ngModel)]="description"
+          [ghost]="true"
+          [rows]="1"
+          [placeholder]="descriptionPlaceholder"
+          class="inquiry-description-input ghost-input-clean"
+          (valueChange)="handleDescriptionChange($event)"
+        />
+      </ds-mobile-section>
+
+      <!-- List Items Section -->
+      <ds-mobile-section [contentGap]="'0'">
+        <!-- Who can book - hidden until Propbinder API supports this field -->
+        <!-- <ds-mobile-list-item 
+          [leadingSize]="'32px'" 
+          [showDivider]="true" 
+          [interactive]="true"
+          [showDesktopMoreButton]="false"
+          [align]="'center'"
+          (itemClick)="openWhoSheet()">
+          <ds-icon content-leading name="remixGroupLine" size="20px" color="tertiary" />
+          <div content-main>
+            <div class="detail-label">Hvem kan booke</div>
+            <div class="detail-value">{{ whoCanBook() }}</div>
+          </div>
+          <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
+        </ds-mobile-list-item> -->
+
+        <!-- When can it be booked -->
+        <ds-mobile-list-item 
+          [leadingSize]="'32px'" 
+          [showDivider]="true" 
+          [interactive]="true"
+          [showDesktopMoreButton]="false"
+          [align]="'center'"
+          (itemClick)="openWhenSheet()">
+          <ds-icon content-leading name="remixCalendarLine" size="20px" color="tertiary" />
+          <div content-main>
+            <div class="detail-label">Hvornår kan det bookes</div>
+            <div class="detail-value">{{ whenCanBook() }}</div>
+          </div>
+          <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
+        </ds-mobile-list-item>
+
+        <!-- Price -->
+        <ds-mobile-list-item 
+          [leadingSize]="'32px'" 
+          [showDivider]="false" 
+          [interactive]="true"
+          [showDesktopMoreButton]="false"
+          [align]="'center'"
+          (itemClick)="openPriceSheet()">
+          <ds-icon content-leading name="remixPriceTag3Line" size="20px" color="tertiary" />
+          <div content-main>
+            <div class="detail-label">Pris</div>
+            <div class="detail-value">{{ price() }}</div>
+          </div>
+          <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
+        </ds-mobile-list-item>
+
+        <!-- Access requirements - hidden until Propbinder API supports this field -->
+        <!-- <ds-mobile-list-item 
+          [leadingSize]="'32px'" 
+          [showDivider]="false" 
+          [interactive]="true"
+          [showDesktopMoreButton]="false"
+          [align]="'center'"
+          (itemClick)="openAccessSheet()">
+          <ds-icon content-leading name="remixKeyLine" size="20px" color="tertiary" />
+          <div content-main>
+            <div class="detail-label">Adgangskrav</div>
+            <div class="detail-value">{{ accessRequirements() }}</div>
+          </div>
+          <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
+        </ds-mobile-list-item> -->
+      </ds-mobile-section>
+
+      <!-- Fixed Bottom Container (Slides with keyboard) -->
+      <div fixed-bottom class="fixed-bottom-container">
+        <!-- Attachment Previews (if any) -->
+        @if (attachments().length > 0) {
+          <div class="attachment-previews-section">
+            <div class="image-previews">
+              @for (attachment of attachments(); track attachment.id) {
+                <ds-mobile-attachment-preview [attachment]="attachment" (remove)="removeAttachment($event)" />
+              }
+            </div>
+          </div>
+        }
+
+        <!-- Submit Actions Container -->
+        <div class="submit-container">
+          <div class="submit-content">
+            <!-- Upload Actions (Left) -->
+            <div class="upload-actions">
+              <ds-icon-button icon="remixImageLine" variant="secondary" size="md" (clicked)="addPhoto()" [disabled]="attachments().length >= 6" aria-label="Add photo">
+              </ds-icon-button>
+              <ds-icon-button
+                icon="remixAttachmentLine"
+                variant="secondary"
+                size="md"
+                (clicked)="handleAddAttachment()"
+                [disabled]="attachments().length >= 6"
+                aria-label="Add attachment"
+              >
+              </ds-icon-button>
+
+              <!-- Hidden file input for file selection -->
+              <input #fileInput type="file" accept="*/*" multiple (change)="handleFileSelect($event)" style="display: none;" aria-hidden="true" />
+            </div>
+
+            <!-- Submit Button (Right) -->
+            <ds-button class="submit-action-button" variant="primary" size="sm" [disabled]="!isFormValid() || isSubmitting()" (clicked)="handleSubmit()">
+              {{ submitButtonLabel }}
+            </ds-button>
+          </div>
+        </div>
+      </div>
+    </ds-mobile-modal-base>
+  `
+})
+export class DsMobileFacilityCreationModalComponent implements OnInit, AfterViewInit {
+  private modalController = inject(ModalController);
+  private bottomSheetService = inject(DsMobileBottomSheetService);
+  
+  @ViewChild('titleInput', { read: ElementRef }) titleInputRef?: ElementRef<HTMLElement>;
+  @ViewChild('descriptionInput', { read: ElementRef }) descriptionInputRef?: ElementRef<HTMLElement>;
+  @ViewChild('titleInput') titleInput?: DsTextareaComponent;
+  @ViewChild('fileInput') fileInput?: ElementRef<HTMLInputElement>;
+
+  /**
+   * Loading state for the modal
+   */
+  @Input() loading: boolean = false;
+
+  /**
+   * Error message to display
+   */
+  @Input() error?: string;
+
+  /**
+   * Callback function when form is submitted
+   */
+  @Input() onSubmit?: (data: NewFacilityData) => void | Promise<void>;
+
+  /**
+   * Placeholder for the title field
+   */
+  @Input() titlePlaceholder: string = 'Festlokale på tal';
+
+  /**
+   * Placeholder for the description field
+   */
+  @Input() descriptionPlaceholder: string = 'Beskriv din booking så detaljeret som muligt...';
+
+  /**
+   * Label for the submit button
+   */
+  @Input() submitButtonLabel: string = 'Opret';
+
+  /**
+   * Form title field
+   */
+  title = '';
+
+  /**
+   * Form description field
+   */
+  description = '';
+
+  /**
+   * Attachments array
+   */
+  attachments = signal<AttachmentData[]>([]);
+
+  /**
+   * Who can book signal
+   */
+  whoCanBook = signal<string>('Alle');
+
+  /**
+   * When can it be booked signal
+   */
+  whenCanBook = signal<string>('I weekenden, 09:00 til 17:30');
+
+  /**
+   * Price signal
+   */
+  price = signal<string>('Gratis');
+
+  /**
+   * Access requirements signal
+   */
+  accessRequirements = signal<string>('Ingen adgangskrav');
+
+  /**
+   * Form validation state
+   */
+  isFormValid = signal<boolean>(false);
+
+  /**
+   * Submitting state
+   */
+  isSubmitting = signal<boolean>(false);
+
+  ngOnInit(): void {
+    console.log('[FacilityCreationModal] Component initialized');
+  }
+
+  ngAfterViewInit(): void {
+    // Setup auto-resize for title textarea
+    setTimeout(() => {
+      this.autoResizeTitleTextarea();
+      this.autoResizeDescriptionTextarea();
+
+      // Focus the title textarea after view initialization to trigger keyboard on iOS
+      if (this.titleInputRef) {
+        const textareaElement = this.titleInputRef.nativeElement.querySelector('textarea');
+        if (textareaElement) {
+          textareaElement.focus();
+        }
+      }
+    }, 300);
+  }
+
+  /**
+   * Auto-resize the title textarea based on content
+   */
+  private autoResizeTitleTextarea(): void {
+    if (!this.titleInputRef) return;
+
+    // Access the native textarea element
+    const textareaElement = this.titleInputRef.nativeElement.querySelector('textarea');
+    if (textareaElement) {
+      textareaElement.style.height = 'auto';
+      textareaElement.style.height = textareaElement.scrollHeight + 'px';
+    }
+  }
+
+  /**
+   * Auto-resize the description textarea based on content
+   */
+  private autoResizeDescriptionTextarea(): void {
+    if (!this.descriptionInputRef) return;
+
+    const textareaElement = this.descriptionInputRef.nativeElement.querySelector('textarea');
+    if (textareaElement) {
+      textareaElement.style.height = 'auto';
+      textareaElement.style.height = textareaElement.scrollHeight + 'px';
+    }
+  }
+
+  /**
+   * Handle title change with auto-resize
+   */
+  handleTitleChange(value: string): void {
+    this.validateForm();
+    this.autoResizeTitleTextarea();
+  }
+
+  /**
+   * Handle description change with auto-resize
+   */
+  handleDescriptionChange(value: string): void {
+    this.validateForm();
+    this.autoResizeDescriptionTextarea();
+  }
+
+  /**
+   * Validate form fields
+   */
+  validateForm(): void {
+    const isValid = this.title.trim().length > 0 && this.description.trim().length > 0;
+    this.isFormValid.set(isValid);
+  }
+
+  /**
+   * Open who can book sheet
+   */
+  async openWhoSheet(): Promise<void> {
+    console.log('[FacilityCreationModal] Opening who can book sheet');
+    const { DsMobileWhoCanBookSheetComponent } = await import('./sheets/ds-mobile-who-can-book-sheet');
+    
+    const modal = await this.bottomSheetService.create({
+      component: DsMobileWhoCanBookSheetComponent,
+      componentProps: {},
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      cssClass: ['ds-bottom-sheet', 'auto-height']
+    });
+    
+    const result = await modal.onWillDismiss();
+    if (result?.data?.value) {
+      // value is now an array of selected community IDs
+      const selectedIds = result.data.value as string[];
+      
+      // If all non-"alle" options are selected, just display "Alle"
+      const allCommunities = ['faelleskab-a', 'faelleskab-b', 'faelleskab-c'];
+      const allCommunitiesSelected = allCommunities.every(id => selectedIds.includes(id));
+      
+      if (allCommunitiesSelected || selectedIds.includes('alle')) {
+        this.whoCanBook.set('Alle');
+      } else {
+        // Otherwise, show individual labels
+        const labels = selectedIds
+          .filter(id => id !== 'alle') // Exclude "alle" from individual display
+          .map((id: string) => {
+            // Convert IDs to display labels
+            if (id === 'faelleskab-a') return 'Fælleskab A';
+            if (id === 'faelleskab-b') return 'Fælleskab B';
+            if (id === 'faelleskab-c') return 'Fælleskab C';
+            return id;
+          });
+        this.whoCanBook.set(labels.join(', '));
+      }
+    }
+  }
+
+  /**
+   * Open when can it be booked sheet
+   */
+  async openWhenSheet(): Promise<void> {
+    console.log('[FacilityCreationModal] Opening when sheet');
+    const { DsMobileWhenCanBookSheetComponent } = await import('./sheets/ds-mobile-when-can-book-sheet');
+    
+    const modal = await this.bottomSheetService.create({
+      component: DsMobileWhenCanBookSheetComponent,
+      componentProps: {},
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      cssClass: ['ds-bottom-sheet', 'auto-height']
+    });
+    
+    const result = await modal.onWillDismiss();
+    if (result?.data?.value) {
+      // value is now an object with days, timeRange, duration
+      const { days, timeRange, duration } = result.data.value;
+      const dayStr = days.join(', ');
+      const timeStr = `${timeRange.start} til ${timeRange.end}`;
+      this.whenCanBook.set(`${dayStr}, ${timeStr}, ${duration}`);
+    }
+  }
+
+  /**
+   * Open price sheet
+   */
+  async openPriceSheet(): Promise<void> {
+    console.log('[FacilityCreationModal] Opening price sheet');
+    const { DsMobilePriceSheetComponent } = await import('./sheets/ds-mobile-price-sheet');
+    
+    const modal = await this.bottomSheetService.create({
+      component: DsMobilePriceSheetComponent,
+      componentProps: {},
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      cssClass: ['ds-bottom-sheet', 'auto-height']
+    });
+    
+    const result = await modal.onWillDismiss();
+    if (result?.data?.value) {
+      this.price.set(result.data.value);
+    }
+  }
+
+  /**
+   * Open access requirements sheet
+   */
+  async openAccessSheet(): Promise<void> {
+    console.log('[FacilityCreationModal] Opening access sheet');
+    const { DsMobileAccessSheetComponent } = await import('./sheets/ds-mobile-access-sheet');
+    
+    const modal = await this.bottomSheetService.create({
+      component: DsMobileAccessSheetComponent,
+      componentProps: {},
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      cssClass: ['ds-bottom-sheet', 'auto-height']
+    });
+    
+    const result = await modal.onWillDismiss();
+    if (result?.data?.value !== undefined) {
+      // value is now an array of selected restriction IDs
+      const selectedIds = result.data.value as string[];
+      
+      // If no restrictions are selected, show "Ingen adgangskrav"
+      if (selectedIds.length === 0) {
+        this.accessRequirements.set('Ingen adgangskrav');
+      } else {
+        const labels = selectedIds.map((id: string) => {
+          // Convert IDs to display labels
+          if (id === 'digital-adgangskode') return 'Digital adgangskode';
+          if (id === 'depositum') return 'Depositum';
+          if (id === 'nøglekort') return 'Nøglekort';
+          return id;
+        });
+        this.accessRequirements.set(labels.join(', '));
+      }
+    }
+  }
+
+  /**
+   * Add a new photo from camera/library
+   */
+  async addPhoto(): Promise<void> {
+    if (this.attachments().length >= 6) {
+      return;
+    }
+
+    try {
+      const result = await FilePicker.pickImages({
+        limit: 1,
+      });
+
+      const image = result.files?.[0];
+      if (image) {
+        const newAttachment: AttachmentData = {
+          id: `photo-${Date.now()}`,
+          src: image.path ? Capacitor.convertFileSrc(image.path) : (image.blob ? URL.createObjectURL(image.blob) : ''),
+          type: 'image',
+          name: image.name || `Photo ${this.attachments().length + 1}`,
+          size: this.formatFileSize(image.size ?? 0),
+        };
+
+        this.attachments.update((attachments) => [...attachments, newAttachment]);
+      }
+    } catch (error) {
+      console.error('[FacilityCreationModal] Error adding photo:', error);
+      // User cancelled or error occurred - just ignore
+    }
+  }
+
+  /**
+   * Remove an attachment
+   */
+  removeAttachment(attachmentId: string): void {
+    this.attachments.update((attachments) => attachments.filter((a) => a.id !== attachmentId));
+  }
+
+  /**
+   * Handle attachment button click
+   */
+  handleAddAttachment(): void {
+    if (this.attachments().length >= 6) {
+      return;
+    }
+
+    // Trigger the hidden file input
+    if (this.fileInput) {
+      this.fileInput.nativeElement.click();
+    }
+  }
+
+  /**
+   * Detect file type from file name or mime type
+   */
+  private detectFileType(file: File): AttachmentFileType {
+    const fileName = file.name.toLowerCase();
+    const mimeType = file.type.toLowerCase();
+
+    // Check if it's an image
+    if (mimeType.startsWith('image/')) {
+      return 'image';
+    }
+
+    // Check file extension
+    if (fileName.endsWith('.pdf')) {
+      return 'pdf';
+    } else if (fileName.endsWith('.doc')) {
+      return 'doc';
+    } else if (fileName.endsWith('.docx')) {
+      return 'docx';
+    } else if (fileName.endsWith('.xls')) {
+      return 'xls';
+    } else if (fileName.endsWith('.xlsx')) {
+      return 'xlsx';
+    }
+
+    return 'other';
+  }
+
+  /**
+   * Format file size for display
+   */
+  private formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+  }
+
+  /**
+   * Handle file selection from file input
+   */
+  handleFileSelect(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const files = input.files;
+
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    // Process each selected file (up to the limit)
+    const remainingSlots = 6 - this.attachments().length;
+    const filesToProcess = Array.from(files).slice(0, remainingSlots);
+
+    filesToProcess.forEach((file) => {
+      const fileType = this.detectFileType(file);
+
+      // Create a data URL for preview
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const result = e.target?.result as string;
+        if (result) {
+          const newAttachment: AttachmentData = {
+            id: `file-${Date.now()}-${Math.random()}`,
+            src: result,
+            type: fileType,
+            name: file.name,
+            size: this.formatFileSize(file.size),
+          };
+          this.attachments.update((attachments) => [...attachments, newAttachment]);
+        }
+      };
+      reader.readAsDataURL(file);
+    });
+
+    // Reset the input so the same file can be selected again
+    input.value = '';
+  }
+
+  /**
+   * Handle form submission
+   */
+  async handleSubmit(): Promise<void> {
+    if (!this.isFormValid() || this.isSubmitting()) {
+      return;
+    }
+
+    this.isSubmitting.set(true);
+
+    try {
+      const facilityData: NewFacilityData = {
+        title: this.title.trim(),
+        description: this.description.trim(),
+        whoCanBook: this.whoCanBook(),
+        whenCanBook: this.whenCanBook(),
+        price: this.price(),
+        accessRequirements: this.accessRequirements(),
+        attachments: this.attachments(),
+      };
+
+      console.log('[FacilityCreationModal] Submitting facility:', facilityData);
+
+      if (this.onSubmit) {
+        await this.onSubmit(facilityData);
+      }
+
+      // Success - close the modal
+      this.modalController.dismiss();
+    } catch (error) {
+      console.error('[FacilityCreationModal] Error submitting facility:', error);
+      this.error = 'Failed to create facility. Please try again.';
+    } finally {
+      this.isSubmitting.set(false);
+    }
+  }
+}

package/src/components/facility-creation-modal/index.ts

@@ -0,0 +1,9 @@
+export { DsMobileFacilityCreationModalComponent } from './ds-mobile-facility-creation-modal';
+export type { NewFacilityData } from './ds-mobile-facility-creation-modal';
+export { DsMobileFacilityCreationModalService } from './ds-mobile-facility-creation-modal.service';
+export type { FacilityCreationModalOptions } from './ds-mobile-facility-creation-modal.service';
+export { DsMobileFacilityCreationConfirmationWrapperComponent } from './ds-mobile-facility-creation-confirmation-wrapper';
+export { DsMobileWhoCanBookSheetComponent } from './sheets/ds-mobile-who-can-book-sheet';
+export { DsMobileWhenCanBookSheetComponent } from './sheets/ds-mobile-when-can-book-sheet';
+export { DsMobilePriceSheetComponent } from './sheets/ds-mobile-price-sheet';
+export { DsMobileAccessSheetComponent } from './sheets/ds-mobile-access-sheet';