Chapter 19: UX Edge Cases: Autosave, Resumable Uploads, Drag-and-Drop

# Ensure Angular CLI is up-to-date
npm install -g @angular/cli@latest

# Create a new standalone Angular project
ng new ux-edge-cases-app --standalone --style=scss --routing=false
cd ux-edge-cases-app

// src/app/services/autosave.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { delay, tap, catchError } from 'rxjs/operators';

export interface DocumentContent {
  id: string;
  title: string;
  body: string;
  version: number; // For conflict resolution
  lastSavedAt?: Date;
}

@Injectable({
  providedIn: 'root'
})
export class AutosaveService {
  private http = inject(HttpClient);
  private apiUrl = '/api/documents'; // Simulate an API endpoint

  // In a real app, this would fetch the document from the server
  // For now, we'll simulate fetching and saving
  private mockDocument: DocumentContent = {
    id: 'doc-123',
    title: 'My Awesome Document',
    body: 'This is the initial content of my document.',
    version: 1
  };

  /**
   * Simulates fetching a document from the server.
   * @param id The document ID.
   * @returns An Observable of the document content.
   */
  getDocument(id: string): Observable<DocumentContent> {
    console.log(`[AutosaveService] Fetching document ${id}...`);
    return of(this.mockDocument).pipe(
      delay(500), // Simulate network delay
      tap(() => console.log(`[AutosaveService] Document ${id} fetched.`))
    );
  }

  /**
   * Simulates saving a document to the server.
   * Includes basic conflict resolution logic.
   * @param document The document content to save.
   * @returns An Observable indicating success or failure.
   */
  saveDocument(document: DocumentContent): Observable<DocumentContent> {
    console.log(`[AutosaveService] Attempting to save document ${document.id}, version ${document.version}...`);

    // Simulate a conflict if the client's version is older than the server's
    if (document.version < this.mockDocument.version) {
      console.warn(`[AutosaveService] CONFLICT DETECTED: Client version ${document.version} is older than server version ${this.mockDocument.version}.`);
      // In a real scenario, you might throw an error or return a specific conflict status.
      // For this simulation, we'll just log and return the current server state.
      return of({ ...this.mockDocument, lastSavedAt: new Date() }).pipe(
        delay(700),
        tap(() => console.log(`[AutosaveService] Conflict resolved (server version returned).`))
      );
    }

    // Simulate a successful save
    this.mockDocument = {
      ...document,
      version: this.mockDocument.version + 1, // Increment server version
      lastSavedAt: new Date()
    };
    console.log(`[AutosaveService] Document ${document.id} saved successfully. New server version: ${this.mockDocument.version}`);

    return of({ ...this.mockDocument }).pipe(
      delay(700), // Simulate network delay
      tap(() => console.log(`[AutosaveService] Save operation complete.`)),
      catchError(error => {
        console.error('[AutosaveService] Save failed:', error);
        throw error; // Re-throw to propagate the error
      })
    );
  }
}

// src/app/components/document-editor/document-editor.component.ts
import { Component, OnInit, OnDestroy, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { AutosaveService, DocumentContent } from '../../services/autosave.service';
import { Subject, takeUntil, debounceTime, distinctUntilChanged, switchMap, filter, tap } from 'rxjs';

@Component({
  selector: 'app-document-editor',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <div class="document-editor-container">
      <h2>Document Editor (Autosave Enabled)</h2>
      <form [formGroup]="documentForm">
        <div class="form-group">
          <label for="title">Title:</label>
          <input id="title" type="text" formControlName="title">
        </div>
        <div class="form-group">
          <label for="body">Body:</label>
          <textarea id="body" formControlName="body" rows="10"></textarea>
        </div>
      </form>

      <div class="status-area">
        <p *ngIf="lastSavedAt">Last saved: {{ lastSavedAt | date:'mediumTime' }} (Version: {{ currentDocumentVersion }})</p>
        <p *ngIf="isSaving" class="saving-status">Saving...</p>
        <p *ngIf="conflictDetected" class="conflict-status">
          <strong>Conflict Detected!</strong> Your changes are based on an older version.
          <button (click)="loadServerVersion()">Load Server Version</button>
          <button (click)="overwriteServerVersion()">Overwrite Server Version</button>
        </p>
        <p *ngIf="saveError" class="error-status">Save failed: {{ saveError }}</p>
      </div>
    </div>
  `,
  styles: [`
    .document-editor-container {
      max-width: 800px;
      margin: 2rem auto;
      padding: 1.5rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background-color: #f9f9f9;
    }
    .form-group {
      margin-bottom: 1rem;
    }
    label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: bold;
    }
    input[type="text"], textarea {
      width: 100%;
      padding: 0.8rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1rem;
      box-sizing: border-box;
    }
    textarea {
      resize: vertical;
    }
    .status-area {
      margin-top: 1.5rem;
      padding: 1rem;
      border-top: 1px solid #eee;
      font-size: 0.9em;
      color: #555;
    }
    .saving-status {
      color: #007bff;
      font-weight: bold;
    }
    .conflict-status {
      color: #ffc107;
      font-weight: bold;
      background-color: #fff3cd;
      border: 1px solid #ffeeba;
      padding: 0.75rem;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .error-status {
      color: #dc3545;
      font-weight: bold;
    }
    button {
      padding: 8px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9em;
      transition: background-color 0.2s;
    }
    button:hover {
      opacity: 0.9;
    }
    .conflict-status button {
      background-color: #ffc107;
      color: #333;
    }
    .conflict-status button:last-child {
      background-color: #dc3545;
      color: white;
    }
  `]
})
export class DocumentEditorComponent implements OnInit, OnDestroy {
  private autosaveService = inject(AutosaveService);
  private destroy$ = new Subject<void>();

  documentForm = new FormGroup({
    title: new FormControl('', { nonNullable: true }),
    body: new FormControl('', { nonNullable: true })
  });

  lastSavedAt: Date | null = null;
  currentDocumentVersion: number = 0;
  isSaving: boolean = false;
  conflictDetected: boolean = false;
  saveError: string | null = null;

  // Store the last successfully saved document state to compare for changes
  private lastSavedDocument: DocumentContent | null = null;

  ngOnInit(): void {
    const documentId = 'doc-123'; // Hardcoded for this example

    // 1. Load initial document
    this.autosaveService.getDocument(documentId)
      .pipe(takeUntil(this.destroy$))
      .subscribe(doc => {
        this.documentForm.patchValue(doc, { emitEvent: false }); // Patch without triggering valueChanges
        this.lastSavedDocument = doc;
        this.lastSavedAt = doc.lastSavedAt || null;
        this.currentDocumentVersion = doc.version;
        console.log(`[DocumentEditor] Initial document loaded:`, doc);
      });

    // 2. Setup autosave logic
    this.documentForm.valueChanges
      .pipe(
        takeUntil(this.destroy$),
        debounceTime(1500), // Wait for 1.5 seconds of inactivity
        distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)), // Only emit if form value truly changes
        filter(() => !this.isSaving), // Prevent new saves if one is already in progress
        filter(changes => {
          // Only save if there are actual changes compared to the last saved version
          if (!this.lastSavedDocument) return true; // Always save if no previous save
          return changes.title !== this.lastSavedDocument.title || changes.body !== this.lastSavedDocument.body;
        }),
        tap(() => {
          this.isSaving = true;
          this.conflictDetected = false; // Clear conflict status on new save attempt
          this.saveError = null; // Clear previous errors
        }),
        switchMap(changes => {
          const docToSave: DocumentContent = {
            id: documentId,
            title: changes.title!,
            body: changes.body!,
            version: this.currentDocumentVersion // Send the version we last *know* about
          };
          return this.autosaveService.saveDocument(docToSave).pipe(
            catchError(error => {
              this.saveError = error.message || 'An unknown error occurred.';
              this.isSaving = false;
              return []; // Stop the stream on error
            })
          );
        })
      )
      .subscribe(savedDoc => {
        this.isSaving = false;
        if (savedDoc.version > this.currentDocumentVersion) {
          // Successful save, update client's known version and state
          this.lastSavedDocument = savedDoc;
          this.lastSavedAt = savedDoc.lastSavedAt || null;
          this.currentDocumentVersion = savedDoc.version;
          console.log(`[DocumentEditor] Document autosaved. New version: ${savedDoc.version}`);
        } else if (savedDoc.version === this.currentDocumentVersion) {
          // Server returned same version, implies conflict handled by server returning its current state.
          // This happens in our mock service when client version is older.
          this.conflictDetected = true;
          this.saveError = 'Server has a newer version. Please resolve conflict.';
          console.warn(`[DocumentEditor] Autosave completed but conflict detected. Server version: ${savedDoc.version}, Client version: ${this.currentDocumentVersion}`);
        }
      });
  }

  loadServerVersion(): void {
    const documentId = 'doc-123';
    this.autosaveService.getDocument(documentId)
      .pipe(takeUntil(this.destroy$))
      .subscribe(doc => {
        this.documentForm.patchValue(doc, { emitEvent: false });
        this.lastSavedDocument = doc;
        this.lastSavedAt = doc.lastSavedAt || null;
        this.currentDocumentVersion = doc.version;
        this.conflictDetected = false;
        this.saveError = null;
        console.log(`[DocumentEditor] Loaded server version:`, doc);
      });
  }

  overwriteServerVersion(): void {
    const documentId = 'doc-123';
    const docToSave: DocumentContent = {
      id: documentId,
      title: this.documentForm.controls.title.value,
      body: this.documentForm.controls.body.value,
      version: this.currentDocumentVersion + 1 // Force increment to overwrite
    };
    this.isSaving = true;
    this.conflictDetected = false;
    this.saveError = null;

    this.autosaveService.saveDocument(docToSave)
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (savedDoc) => {
          this.isSaving = false;
          this.lastSavedDocument = savedDoc;
          this.lastSavedAt = savedDoc.lastSavedAt || null;
          this.currentDocumentVersion = savedDoc.version;
          console.log(`[DocumentEditor] Overwrote server version. New version: ${savedDoc.version}`);
        },
        error: (err) => {
          this.isSaving = false;
          this.saveError = err.message || 'Failed to overwrite server version.';
          console.error(`[DocumentEditor] Error overwriting server version:`, err);
        }
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// src/app/app.component.ts
import { Component } from '@angular/core';
import { DocumentEditorComponent } from './components/document-editor/document-editor.component';
import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocumentEditorComponent, HttpClientModule], // Add HttpClientModule
  template: `
    <main>
      <app-document-editor></app-document-editor>
    </main>
  `,
  styles: []
})
export class AppComponent {
  title = 'ux-edge-cases-app';
}

// src/app/services/upload.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest } from '@angular/common/http';
import { Observable, Subject, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

export interface UploadProgress {
  file: File;
  progress: number; // 0-100
  state: 'PENDING' | 'IN_PROGRESS' | 'COMPLETED' | 'FAILED' | 'PAUSED';
  message?: string;
  uploadId?: string; // Identifier for resumable uploads
  uploadedBytes?: number;
  totalBytes?: number;
}

@Injectable({
  providedIn: 'root'
})
export class UploadService {
  private http = inject(HttpClient);
  private apiUrl = '/api/uploads'; // Simulate an API endpoint

  // In a real application, you'd have a server-side endpoint to initiate and track uploads.
  // For simplicity, we'll simulate the server interaction.

  /**
   * Initiates a resumable upload.
   * In a real scenario, this would contact the server to get an upload ID and existing progress.
   * @param file The file to upload.
   * @returns An Observable of UploadProgress.
   */
  initiateResumableUpload(file: File): Observable<UploadProgress> {
    const uploadId = `upload-${Date.now()}-${file.name.replace(/\s/g, '-')}`;
    const chunkSize = 1024 * 1024 * 5; // 5 MB chunks
    let uploadedBytes = 0; // Simulate already uploaded bytes from server

    console.log(`[UploadService] Initiating upload for ${file.name} with ID: ${uploadId}`);

    // Simulate server response providing existing progress
    return of({
      file,
      progress: (uploadedBytes / file.size) * 100,
      state: 'PENDING',
      uploadId,
      uploadedBytes,
      totalBytes: file.size
    }).pipe(
      delay(300), // Simulate network delay
      tap(() => console.log(`[UploadService] Upload initiated. Starting from byte ${uploadedBytes}.`))
    );
  }

  /**
   * Uploads a file chunk using HTTP Range headers.
   * @param uploadId The unique ID for the resumable upload.
   * @param file The original file.
   * @param startByte The starting byte of the chunk.
   * @param endByte The ending byte of the chunk.
   * @returns An Observable of UploadProgress for this chunk.
   */
  uploadChunk(uploadId: string, file: File, startByte: number, endByte: number): Observable<UploadProgress> {
    const chunk = file.slice(startByte, endByte);
    const headers = new HttpHeaders({
      'Content-Type': 'application/octet-stream',
      'Content-Range': `bytes ${startByte}-${endByte - 1}/${file.size}`,
      'X-Upload-ID': uploadId // Custom header to identify the upload on the server
    });

    // In a real app, this would be a PUT or PATCH request to a specific chunk endpoint.
    // For simulation, we'll just log and return success.
    const req = new HttpRequest('PATCH', `${this.apiUrl}/${uploadId}`, chunk, {
      headers: headers,
      reportProgress: true // Important for progress events
    });

    const progressSubject = new Subject<UploadProgress>();

    // Simulate actual HTTP request
    this.http.request(req).pipe(
      map(event => {
        switch (event.type) {
          case HttpEventType.UploadProgress:
            const progress = Math.round(100 * event.loaded / (event.total || chunk.size));
            progressSubject.next({
              file,
              progress,
              state: 'IN_PROGRESS',
              uploadId,
              uploadedBytes: startByte + event.loaded,
              totalBytes: file.size
            });
            return null; // Don't emit anything from map for progress events
          case HttpEventType.Response:
            progressSubject.next({
              file,
              progress: 100,
              state: 'COMPLETED',
              uploadId,
              uploadedBytes: endByte,
              totalBytes: file.size,
              message: `Chunk ${startByte}-${endByte - 1} uploaded.`
            });
            progressSubject.complete();
            return null;
          default:
            return null;
        }
      }),
      catchError(error => {
        console.error(`[UploadService] Chunk upload failed for ${uploadId} (${startByte}-${endByte - 1}):`, error);
        progressSubject.error({
          file,
          progress: (startByte / file.size) * 100,
          state: 'FAILED',
          uploadId,
          uploadedBytes: startByte,
          totalBytes: file.size,
          message: error.message || 'Chunk upload failed.'
        });
        return of(null); // Return observable of null to complete the inner stream
      }),
      tap(null, null, () => console.log(`[UploadService] Chunk ${startByte}-${endByte - 1} process complete.`))
    ).subscribe();

    return progressSubject.asObservable();
  }
}

// src/app/components/file-uploader/file-uploader.component.ts
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UploadService, UploadProgress } from '../../services/upload.service';
import { Subject, takeUntil, concatMap, from, map, scan, tap, switchMap, of, takeWhile, delay } from 'rxjs';

@Component({
  selector: 'app-file-uploader',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="uploader-container">
      <h2>Resumable File Uploader</h2>
      <input type="file" (change)="onFileSelected($event)" #fileInput>
      <button (click)="uploadFile()" [disabled]="!selectedFile || isUploading">Upload File</button>
      <button (click)="pauseUpload()" [disabled]="!isUploading || uploadProgress.state === 'PAUSED'">Pause</button>
      <button (click)="resumeUpload()" [disabled]="!selectedFile || !uploadProgress.uploadId || (uploadProgress.state !== 'PAUSED' && uploadProgress.state !== 'FAILED')">Resume</button>

      <div *ngIf="selectedFile" class="file-info">
        <h3>Selected File: {{ selectedFile.name }} ({{ selectedFile.size | number:'1.0-0' }} bytes)</h3>
        <div class="progress-bar-container">
          <div class="progress-bar" [style.width.%]="uploadProgress.progress"></div>
          <span class="progress-text">{{ uploadProgress.progress | number:'1.0-0' }}%</span>
        </div>
        <p>Status: {{ uploadProgress.state }}</p>
        <p *ngIf="uploadProgress.message">{{ uploadProgress.message }}</p>
        <p *ngIf="uploadProgress.uploadedBytes !== undefined">Uploaded: {{ uploadProgress.uploadedBytes | number:'1.0-0' }} / {{ uploadProgress.totalBytes | number:'1.0-0' }} bytes</p>
      </div>
    </div>
  `,
  styles: [`
    .uploader-container {
      max-width: 800px;
      margin: 2rem auto;
      padding: 1.5rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background-color: #f9f9f9;
    }
    input[type="file"] {
      margin-right: 1rem;
    }
    button {
      padding: 8px 15px;
      margin-right: 0.5rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #007bff;
      color: white;
      transition: background-color 0.2s;
    }
    button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
    button:hover:not(:disabled) {
      background-color: #0056b3;
    }
    .file-info {
      margin-top: 1.5rem;
      padding: 1rem;
      border: 1px dashed #ccc;
      border-radius: 4px;
      background-color: #e9ecef;
    }
    .progress-bar-container {
      width: 100%;
      background-color: #e0e0e0;
      border-radius: 5px;
      overflow: hidden;
      margin-top: 0.5rem;
      height: 25px;
      position: relative;
    }
    .progress-bar {
      height: 100%;
      background-color: #28a745;
      width: 0%;
      transition: width 0.3s ease-in-out;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 0.9em;
    }
    .progress-text {
      position: absolute;
      width: 100%;
      text-align: center;
      line-height: 25px;
      color: #333;
      font-weight: bold;
    }
  `]
})
export class FileUploaderComponent {
  private uploadService = inject(UploadService);
  private destroy$ = new Subject<void>();
  private uploadSubscription$ = new Subject<void>(); // To manage active upload streams

  selectedFile: File | null = null;
  isUploading: boolean = false;
  uploadProgress: UploadProgress = {
    file: new File([], ''),
    progress: 0,
    state: 'PENDING',
    uploadedBytes: 0,
    totalBytes: 0
  };
  private chunkSize = 1024 * 1024 * 5; // 5 MB per chunk

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
      this.resetUploadState();
      console.log(`[FileUploader] File selected: ${this.selectedFile.name}`);
    } else {
      this.selectedFile = null;
      this.resetUploadState();
    }
  }

  resetUploadState(): void {
    this.isUploading = false;
    this.uploadProgress = {
      file: this.selectedFile || new File([], ''),
      progress: 0,
      state: 'PENDING',
      uploadedBytes: 0,
      totalBytes: this.selectedFile?.size || 0
    };
    this.uploadSubscription$.next(); // Stop any ongoing uploads
  }

  uploadFile(): void {
    if (!this.selectedFile) return;

    this.isUploading = true;
    this.uploadProgress.state = 'IN_PROGRESS';
    this.uploadSubscription$.next(); // Cancel previous uploads before starting a new one

    this.uploadService.initiateResumableUpload(this.selectedFile)
      .pipe(
        takeUntil(this.destroy$),
        switchMap(initialProgress => {
          this.uploadProgress = initialProgress;
          return this.processChunks(initialProgress.uploadId!, this.selectedFile!, initialProgress.uploadedBytes!);
        })
      )
      .subscribe({
        next: (progress) => {
          this.uploadProgress = progress;
          if (progress.state === 'COMPLETED') {
            this.isUploading = false;
            console.log(`[FileUploader] Upload of ${progress.file.name} completed!`);
          }
        },
        error: (err) => {
          this.isUploading = false;
          this.uploadProgress.state = 'FAILED';
          this.uploadProgress.message = `Upload failed: ${err.message || 'Unknown error'}`;
          console.error(`[FileUploader] Upload failed:`, err);
        },
        complete: () => {
          if (this.uploadProgress.state !== 'FAILED') {
            this.uploadProgress.state = 'COMPLETED';
            this.uploadProgress.progress = 100;
          }
          this.isUploading = false;
          console.log(`[FileUploader] Upload stream completed.`);
        }
      });
  }

  private processChunks(uploadId: string, file: File, startByte: number): Observable<UploadProgress> {
    const totalBytes = file.size;
    let currentByte = startByte;
    const chunkObservables: Observable<UploadProgress>[] = [];

    while (currentByte < totalBytes) {
      const endByte = Math.min(currentByte + this.chunkSize, totalBytes);
      chunkObservables.push(
        this.uploadService.uploadChunk(uploadId, file, currentByte, endByte).pipe(
          takeUntil(this.uploadSubscription$) // Allow pausing/cancelling individual chunk streams
        )
      );
      currentByte = endByte;
    }

    return from(chunkObservables).pipe(
      concatMap(obs => obs), // Upload chunks sequentially
      scan((acc: UploadProgress, chunkProgress: UploadProgress) => {
        // Accumulate overall progress from chunk progress updates
        const newUploadedBytes = chunkProgress.uploadedBytes || acc.uploadedBytes;
        const newProgress = (newUploadedBytes / totalBytes) * 100;
        return {
          ...acc,
          progress: newProgress,
          uploadedBytes: newUploadedBytes,
          state: chunkProgress.state === 'FAILED' ? 'FAILED' : 'IN_PROGRESS',
          message: chunkProgress.message || acc.message
        };
      }, { ...this.uploadProgress, file, totalBytes, uploadId, uploadedBytes: startByte }),
      takeWhile(progress => progress.state !== 'FAILED' && progress.progress < 100, true), // Stop on failure or completion
      tap(progress => {
        if (progress.state === 'FAILED') {
          this.isUploading = false;
          this.uploadProgress.state = 'FAILED';
        }
      })
    );
  }

  pauseUpload(): void {
    this.uploadSubscription$.next(); // Emit to stop current chunk processing
    this.isUploading = false;
    this.uploadProgress.state = 'PAUSED';
    console.log(`[FileUploader] Upload paused at ${this.uploadProgress.uploadedBytes} bytes.`);
  }

  resumeUpload(): void {
    if (!this.selectedFile || !this.uploadProgress.uploadId || this.isUploading) return;

    this.isUploading = true;
    this.uploadProgress.state = 'IN_PROGRESS';
    this.uploadSubscription$.next(); // Ensure previous subscriptions are cancelled

    // Resume from the last known uploaded bytes
    this.processChunks(this.uploadProgress.uploadId, this.selectedFile, this.uploadProgress.uploadedBytes!)
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (progress) => {
          this.uploadProgress = progress;
          if (progress.state === 'COMPLETED') {
            this.isUploading = false;
            console.log(`[FileUploader] Upload of ${progress.file.name} resumed and completed!`);
          }
        },
        error: (err) => {
          this.isUploading = false;
          this.uploadProgress.state = 'FAILED';
          this.uploadProgress.message = `Upload failed: ${err.message || 'Unknown error'}`;
          console.error(`[FileUploader] Resume upload failed:`, err);
        },
        complete: () => {
          if (this.uploadProgress.state !== 'FAILED') {
            this.uploadProgress.state = 'COMPLETED';
            this.uploadProgress.progress = 100;
          }
          this.isUploading = false;
          console.log(`[FileUploader] Resume upload stream completed.`);
        }
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
    this.uploadSubscription$.next(); // Ensure any ongoing upload is cancelled
    this.uploadSubscription$.complete();
  }
}

// src/app/app.component.ts
import { Component } from '@angular/core';
import { DocumentEditorComponent } from './components/document-editor/document-editor.component';
import { FileUploaderComponent } from './components/file-uploader/file-uploader.component'; // Import FileUploaderComponent
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocumentEditorComponent, FileUploaderComponent, HttpClientModule], // Add FileUploaderComponent
  template: `
    <main>
      <app-document-editor></app-document-editor>
      <hr>
      <app-file-uploader></app-file-uploader>
    </main>
  `,
  styles: []
})
export class AppComponent {
  title = 'ux-edge-cases-app';
}

ng add @angular/cdk@latest

// src/app/components/kanban-board/kanban-board.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CdkDragDrop, moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';

interface Task {
  id: string;
  title: string;
}

@Component({
  selector: 'app-kanban-board',
  standalone: true,
  imports: [CommonModule, DragDropModule], // Import DragDropModule
  template: `
    <div class="kanban-board-container">
      <h2>Kanban Board (Drag & Drop)</h2>

      <div class="kanban-columns">
        <div class="kanban-column">
          <h3>To Do</h3>
          <div cdkDropList
               [cdkDropListData]="todo"
               (cdkDropListDropped)="drop($event)"
               class="task-list">
            <div class="task-item" *ngFor="let task of todo" cdkDrag>
              {{ task.title }}
            </div>
          </div>
        </div>

        <div class="kanban-column">
          <h3>In Progress</h3>
          <div cdkDropList
               [cdkDropListData]="inProgress"
               (cdkDropListDropped)="drop($event)"
               class="task-list">
            <div class="task-item" *ngFor="let task of inProgress" cdkDrag>
              {{ task.title }}
            </div>
          </div>
        </div>

        <div class="kanban-column">
          <h3>Done</h3>
          <div cdkDropList
               [cdkDropListData]="done"
               (cdkDropListDropped)="drop($event)"
               class="task-list">
            <div class="task-item" *ngFor="let task of done" cdkDrag>
              {{ task.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .kanban-board-container {
      max-width: 1200px;
      margin: 2rem auto;
      padding: 1.5rem;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background-color: #f9f9f9;
    }
    .kanban-columns {
      display: flex;
      gap: 1.5rem;
      justify-content: space-around;
      flex-wrap: wrap;
    }
    .kanban-column {
      flex: 1;
      min-width: 280px;
      background-color: #eef;
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      border: 1px solid #ccc;
    }
    .kanban-column h3 {
      text-align: center;
      margin-top: 0;
      margin-bottom: 1.5rem;
      color: #333;
    }
    .task-list {
      min-height: 100px; /* Ensure drop target is visible */
      background-color: #fff;
      border: 1px dashed #bbb;
      border-radius: 4px;
      padding: 0.5rem;
    }
    .task-item {
      padding: 0.8rem;
      margin-bottom: 0.5rem;
      background-color: #f8f8f8;
      border: 1px solid #eee;
      border-radius: 4px;
      cursor: grab;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: box-shadow 0.2s ease-in-out;
    }
    .task-item:hover {
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    /* Styles for when an item is being dragged */
    .cdk-drag-placeholder {
      opacity: 0.5;
      background: #ccc;
      border: 1px dashed #999;
      min-height: 40px; /* Placeholder height */
    }
    /* Styles for the actual item being dragged */
    .cdk-drag-animating {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
    .cdk-drop-list-dragging .cdk-drag {
      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
    .cdk-drag-preview {
      box-sizing: border-box;
      border-radius: 4px;
      box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                  0 8px 10px 1px rgba(0, 0, 0, 0.14),
                  0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }
  `]
})
export class KanbanBoardComponent {
  todo: Task[] = [
    { id: '1', title: 'Setup project structure' },
    { id: '2', title: 'Implement autosave feature' },
    { id: '3', title: 'Design file uploader UI' }
  ];

  inProgress: Task[] = [
    { id: '4', title: 'Develop resumable upload service' }
  ];

  done: Task[] = [
    { id: '5', title: 'Research UX edge cases' },
    { id: '6', title: 'Install Angular CDK' }
  ];

  drop(event: CdkDragDrop<Task[]>): void {
    if (event.previousContainer === event.container) {
      // Item moved within the same list
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      console.log(`[KanbanBoard] Item '${event.item.data.title}' reordered within same list.`);
    } else {
      // Item moved to a different list
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
      console.log(`[KanbanBoard] Item '${event.item.data.title}' moved from '${event.previousContainer.id}' to '${event.container.id}'.`);
    }
    // In a real application, you would now send these changes to your backend API.
  }
}

// src/app/app.component.ts
import { Component } from '@angular/core';
import { DocumentEditorComponent } from './components/document-editor/document-editor.component';
import { FileUploaderComponent } from './components/file-uploader/file-uploader.component';
import { KanbanBoardComponent } from './components/kanban-board/kanban-board.component'; // Import KanbanBoardComponent
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    DocumentEditorComponent,
    FileUploaderComponent,
    KanbanBoardComponent, // Add KanbanBoardComponent
    HttpClientModule
  ],
  template: `
    <main>
      <app-document-editor></app-document-editor>
      <hr>
      <app-file-uploader></app-file-uploader>
      <hr>
      <app-kanban-board></app-kanban-board>
    </main>
  `,
  styles: [`
    hr {
      margin: 4rem auto;
      width: 80%;
      border: 0;
      border-top: 1px solid #eee;
    }
  `]
})
export class AppComponent {
  title = 'ux-edge-cases-app';
}