Complete Story 3.3: Preset Import & Export

Implements FR-19: Preset import/export as JSON New Files: - src/core/PresetImportExportManager.js - Core logic for export/import with merge/replace - src/ui/gm/PresetExportDialog.js - Export dialog with file download - src/ui/gm/PresetImportDialog.js - Import dialog with file picker, preview, merge/replace - templates/preset-export.hbs - Export dialog template - templates/preset-import.hbs - Import dialog template - styles/components/_preset-import-export.less - Dialog styles - tests/unit/core/PresetImportExportManager.test.js - 38 unit tests - _bmad-output/implementation-artifacts/3-3-preset-import-and-export.md - Story file Modified Files: - src/ui/gm/DirectorsBoard.js - Added export/import button handlers - templates/directors-board.hbs - Added Export/Import buttons to footer - styles/scrying-pool.less - Added stylesheet import - lang/en.json - Added localization strings for new UI - _bmad-output/implementation-artifacts/sprint-status.yaml - Story status: review Features: - Export all presets from current scene as JSON file - Import presets with merge (add new, skip duplicates) or replace (overwrite all) modes - Preview of presets before import with validation status - Confirmation dialog for replace mode to prevent data loss - Comprehensive error handling and validation - All ACs satisfied (AC-9 deferred for README docs) Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
2026-05-23 16:28:53 +02:00
parent e31badf865
commit d175f92806
13 changed files with 2357 additions and 79 deletions
@@ -0,0 +1,345 @@
+/**
+ * PresetImportDialog — Dialog for importing scene presets from JSON file.
+ *
+ * Extends ApplicationV2 via HandlebarsApplicationMixin to provide FoundryVTT-native
+ * dialog experience. Allows GM to upload a JSON file and choose between merge or replace modes.
+ *
+ * @module ui/gm/PresetImportDialog
+ */
+
+import { PresetImportExportManager } from '../../core/PresetImportExportManager.js';
+
+// Conditional base class — test environment lacks foundry globals.
+// At module load time in tests, foundry is undefined → fallback class is used.
+
+/** @private */
+const _AppBase =
+  typeof foundry !== 'undefined' &&
+  foundry.applications?.api?.HandlebarsApplicationMixin &&
+  foundry.applications?.api?.ApplicationV2
+    ? foundry.applications.api.HandlebarsApplicationMixin(
+        foundry.applications.api.ApplicationV2
+      )
+    : class _FallbackApp {
+        static DEFAULT_OPTIONS = {};
+        static PARTS = {};
+        get rendered() { return this._rendered ?? false; }
+        set rendered(v) { this._rendered = v; }
+        get element() { return this._element ?? null; }
+        set element(v) { this._element = v; }
+        async render() { this._rendered = true; }
+        async close() { this._rendered = false; }
+        async _prepareContext() { return {}; }
+        _onRender() {}
+        _onClose() {}
+        _onPosition() {}
+      };
+
+/**
+ * Import dialog for scene presets.
+ * Provides file picker, mode selection (merge/replace), preview, and confirmation.
+ */
+export class PresetImportDialog extends _AppBase {
+  /**
+   * @param {object} options - Dialog options.
+   * @param {import('../../foundry/FoundryAdapter.js').FoundryAdapter} options.adapter - Foundry adapter.
+   * @param {import('../../core/ScenePresetManager.js').ScenePresetManager} options.scenePresetManager - Scene preset manager.
+   */
+  constructor(options = {}) {
+    super(options);
+
+    if (!options.adapter || typeof options.adapter !== 'object') {
+      throw new TypeError('PresetImportDialog: adapter option is required and must be an object');
+    }
+    if (!options.scenePresetManager || typeof options.scenePresetManager !== 'object') {
+      throw new TypeError('PresetImportDialog: scenePresetManager option is required and must be an object');
+    }
+
+    this._adapter = options.adapter;
+    this._scenePresetManager = options.scenePresetManager;
+    this._exportManager = new PresetImportExportManager(this._adapter, this._scenePresetManager);
+
+    // State
+    /** @type {File|null} */
+    this._selectedFile = null;
+    /** @type {'merge'|'replace'} */
+    this._mode = 'merge';
+    /** @type {Array<{name: string, valid: boolean, error?: string}>} */
+    this._previewItems = [];
+    /** @type {boolean} */
+    this._requiresConfirmation = false;
+  }
+
+  static DEFAULT_OPTIONS = {
+    id: 'scrying-pool-preset-import',
+    classes: ['scrying-pool', 'dialog', 'preset-import'],
+    window: { title: 'Import Scene Presets', resizable: false },
+    position: { width: 500, height: 'auto' },
+  };
+
+  static PARTS = {
+    dialog: {
+      template: 'modules/video-view-manager/templates/preset-import.hbs',
+    },
+  };
+
+  /**
+   * Get data for template rendering.
+   * @returns {Promise<object>} Template data.
+   */
+  async _prepareContext() {
+    const existingPresetCount = this._scenePresetManager.list().length;
+
+    return {
+      existingPresetCount,
+      hasExistingPresets: existingPresetCount > 0,
+      mode: this._mode,
+      previewItems: this._previewItems,
+      requiresConfirmation: this._requiresConfirmation,
+      selectedFileName: this._selectedFile?.name ?? null,
+    };
+  }
+
+  /**
+   * ApplicationV2 lifecycle — sets up event listeners on every render.
+   * @inheritdoc
+   */
+  _onRender(context, options) {
+    super._onRender?.(context, options);
+    const root = this.element;
+    if (!root) return;
+
+    // File input change handler
+    root.querySelector('.sp-file-input')?.addEventListener('change', (event) => {
+      this._onFileSelected(event);
+    });
+
+    // Mode radio button handlers
+    root.querySelector('.sp-mode-merge')?.addEventListener('change', () => {
+      this._mode = 'merge';
+      this._requiresConfirmation = false;
+      this.render();
+    });
+
+    root.querySelector('.sp-mode-replace')?.addEventListener('change', () => {
+      this._mode = 'replace';
+      this._requiresConfirmation = true;
+      this.render();
+    });
+
+    // Import button click handler
+    root.querySelector('.sp-import-btn:not(.sp-confirm-btn)')?.addEventListener('click', async (event) => {
+      event.preventDefault();
+      await this._onImport();
+    });
+
+    // Confirm button handler (for replace mode)
+    root.querySelector('.sp-confirm-btn')?.addEventListener('click', async (event) => {
+      event.preventDefault();
+      await this._onConfirmImport();
+    });
+
+    // Cancel button handler
+    root.querySelector('.sp-cancel-btn')?.addEventListener('click', (event) => {
+      event.preventDefault();
+      this.close();
+    });
+  }
+
+  /**
+   * ApplicationV2 lifecycle — clean up event listeners when closed.
+   * @inheritdoc
+   */
+  async _onClose(options) {
+    await super._onClose?.(options);
+    // Clean up any references
+    this._exportManager = null;
+    this._scenePresetManager = null;
+    this._adapter = null;
+    this._selectedFile = null;
+    this._previewItems = [];
+  }
+
+  /**
+   * Handles file selection.
+   * Validates the file and shows preview.
+   * @param {Event} event - Change event from file input.
+   * @private
+   */
+  _onFileSelected(event) {
+    const input = /** @type {HTMLInputElement} */ (event.target);
+    if (!input.files || input.files.length === 0) {
+      this._selectedFile = null;
+      this._previewItems = [];
+      this._requiresConfirmation = false;
+      this.render();
+      return;
+    }
+
+    this._selectedFile = input.files[0];
+    this._previewItems = [];
+    this._parseAndPreviewFile();
+  }
+
+  /**
+   * Parses the selected file and generates a preview.
+   * @private
+   */
+  async _parseAndPreviewFile() {
+    if (!this._selectedFile) {
+      this._previewItems = [];
+      this._requiresConfirmation = false;
+      this.render();
+      return;
+    }
+
+    try {
+      const content = await this._readFileAsText(this._selectedFile);
+      const data = JSON.parse(content);
+
+      // Validate structure
+      this._exportManager.validateImportData(data);
+
+      // Generate preview items
+      this._previewItems = [];
+      const existingNames = new Set(this._scenePresetManager.list().map(p => p.name));
+
+      for (const [name] of Object.entries(data.presets || {})) {
+        let valid = true;
+        let error = undefined;
+
+        try {
+          // Check if preset name already exists (for merge mode preview)
+          if (this._mode === 'merge' && existingNames.has(name)) {
+            valid = false;
+            error = 'Already exists - will be skipped';
+          }
+        } catch (err) {
+          valid = false;
+          error = err instanceof Error ? err.message : String(err);
+        }
+
+        this._previewItems.push({ name, valid, error });
+      }
+
+      // Determine if replace mode needs confirmation
+      if (this._mode === 'replace' && existingNames.size > 0) {
+        this._requiresConfirmation = true;
+      } else if (this._mode === 'merge') {
+        this._requiresConfirmation = false;
+      }
+
+      this.render();
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      this._previewItems = [{ name: this._selectedFile.name, valid: false, error: errorMsg }];
+      this._requiresConfirmation = false;
+      this.render();
+    }
+  }
+
+  /**
+   * Reads a file as text.
+   * @param {File} file - File to read.
+   * @returns {Promise<string>} File content as text.
+   * @private
+   */
+  _readFileAsText(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target && typeof event.target.result === 'string') {
+          resolve(event.target.result);
+        } else {
+          reject(new Error('Failed to read file'));
+        }
+      };
+      reader.onerror = () => {
+        reject(new Error('File read error'));
+      };
+      reader.readAsText(file);
+    });
+  }
+
+  /**
+   * Handles the import action.
+   * For merge mode, processes immediately. For replace mode, shows confirmation.
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _onImport() {
+    if (!this._selectedFile) {
+      if (this._adapter.notifications) {
+        this._adapter.notifications.warn('Please select a file first');
+      }
+      return;
+    }
+
+    if (this._mode === 'replace') {
+      // Show confirmation for replace mode
+      this._requiresConfirmation = true;
+      this.render();
+      return;
+    }
+
+    // Direct import for merge mode
+    await this._processImport();
+  }
+
+  /**
+   * Handles confirmed import (after user confirms replace mode).
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _onConfirmImport() {
+    await this._processImport();
+  }
+
+  /**
+   * Processes the import operation.
+   * @returns {Promise<void>}
+   * @private
+   */
+  async _processImport() {
+    if (!this._selectedFile) {
+      return;
+    }
+
+    const isReplaceMode = this._mode === 'replace';
+    const btn = this.element?.querySelector(isReplaceMode ? '.sp-confirm-btn' : '.sp-import-btn');
+    if (!btn) return;
+
+    const originalLabel = btn.innerHTML;
+
+    try {
+      // Disable button and show loading state
+      btn.disabled = true;
+      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Importing...';
+
+      // Read and import file
+      const content = await this._readFileAsText(this._selectedFile);
+      const result = await this._exportManager.importPresets(content, this._mode);
+
+      if (result.success) {
+        if (this._adapter.notifications) {
+          this._adapter.notifications.info(result.message);
+        }
+        this.close();
+      } else {
+        // Show errors
+        const errorMessages = result.errors.join('\n');
+        if (this._adapter.notifications) {
+          this._adapter.notifications.error('Failed to import presets\n' + errorMessages);
+        }
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      if (this._adapter.notifications) {
+        this._adapter.notifications.error('Failed to import presets: ' + errorMsg);
+      }
+    } finally {
+      btn.disabled = false;
+      btn.innerHTML = originalLabel;
+    }
+  }
+}