Some migrations and mobile fixes.

Thanks to xet7 !

client/components/migrationProgress.js

@@ -1,54 +1,212 @@
-import { Template } from 'meteor/templating';
-import { 
-  migrationManager,
-  isMigrating,
-  migrationProgress,
-  migrationStatus,
-  migrationCurrentStep,
-  migrationEstimatedTime,
-  migrationSteps
-} from '/client/lib/migrationManager';
+/**
+ * Migration Progress Component
+ * Displays detailed progress for comprehensive board migration
+ */
 
+import { ReactiveVar } from 'meteor/reactive-var';
+import { ReactiveCache } from '/imports/reactiveCache';
+
+// Reactive variables for migration progress
+export const migrationProgress = new ReactiveVar(0);
+export const migrationStatus = new ReactiveVar('');
+export const migrationStepName = new ReactiveVar('');
+export const migrationStepProgress = new ReactiveVar(0);
+export const migrationStepStatus = new ReactiveVar('');
+export const migrationStepDetails = new ReactiveVar(null);
+export const migrationCurrentStep = new ReactiveVar(0);
+export const migrationTotalSteps = new ReactiveVar(0);
+export const isMigrating = new ReactiveVar(false);
+
+class MigrationProgressManager {
+  constructor() {
+    this.progressHistory = [];
+  }
+
+  /**
+   * Update migration progress
+   */
+  updateProgress(progressData) {
+    const {
+      overallProgress,
+      currentStep,
+      totalSteps,
+      stepName,
+      stepProgress,
+      stepStatus,
+      stepDetails,
+      boardId
+    } = progressData;
+
+    // Update reactive variables
+    migrationProgress.set(overallProgress);
+    migrationCurrentStep.set(currentStep);
+    migrationTotalSteps.set(totalSteps);
+    migrationStepName.set(stepName);
+    migrationStepProgress.set(stepProgress);
+    migrationStepStatus.set(stepStatus);
+    migrationStepDetails.set(stepDetails);
+
+    // Store in history
+    this.progressHistory.push({
+      timestamp: new Date(),
+      ...progressData
+    });
+
+    // Update overall status
+    migrationStatus.set(`${stepName}: ${stepStatus}`);
+  }
+
+  /**
+   * Start migration
+   */
+  startMigration() {
+    isMigrating.set(true);
+    migrationProgress.set(0);
+    migrationStatus.set('Starting migration...');
+    migrationStepName.set('');
+    migrationStepProgress.set(0);
+    migrationStepStatus.set('');
+    migrationStepDetails.set(null);
+    migrationCurrentStep.set(0);
+    migrationTotalSteps.set(0);
+    this.progressHistory = [];
+  }
+
+  /**
+   * Complete migration
+   */
+  completeMigration() {
+    isMigrating.set(false);
+    migrationProgress.set(100);
+    migrationStatus.set('Migration completed successfully!');
+    
+    // Clear step details after a delay
+    setTimeout(() => {
+      migrationStepName.set('');
+      migrationStepProgress.set(0);
+      migrationStepStatus.set('');
+      migrationStepDetails.set(null);
+      migrationCurrentStep.set(0);
+      migrationTotalSteps.set(0);
+    }, 3000);
+  }
+
+  /**
+   * Fail migration
+   */
+  failMigration(error) {
+    isMigrating.set(false);
+    migrationStatus.set(`Migration failed: ${error.message || error}`);
+    migrationStepStatus.set('Error occurred');
+  }
+
+  /**
+   * Get progress history
+   */
+  getProgressHistory() {
+    return this.progressHistory;
+  }
+
+  /**
+   * Clear progress
+   */
+  clearProgress() {
+    isMigrating.set(false);
+    migrationProgress.set(0);
+    migrationStatus.set('');
+    migrationStepName.set('');
+    migrationStepProgress.set(0);
+    migrationStepStatus.set('');
+    migrationStepDetails.set(null);
+    migrationCurrentStep.set(0);
+    migrationTotalSteps.set(0);
+    this.progressHistory = [];
+  }
+}
+
+// Export singleton instance
+export const migrationProgressManager = new MigrationProgressManager();
+
+// Template helpers
 Template.migrationProgress.helpers({
   isMigrating() {
     return isMigrating.get();
   },
-  
-  migrationProgress() {
+
+  overallProgress() {
     return migrationProgress.get();
   },
-  
-  migrationStatus() {
+
+  overallStatus() {
     return migrationStatus.get();
   },
-  
-  migrationCurrentStep() {
+
+  currentStep() {
     return migrationCurrentStep.get();
   },
-  
-  migrationEstimatedTime() {
-    return migrationEstimatedTime.get();
+
+  totalSteps() {
+    return migrationTotalSteps.get();
   },
-  
-  migrationSteps() {
-    const steps = migrationSteps.get();
-    const currentStep = migrationCurrentStep.get();
+
+  stepName() {
+    return migrationStepName.get();
+  },
+
+  stepProgress() {
+    return migrationStepProgress.get();
+  },
+
+  stepStatus() {
+    return migrationStepStatus.get();
+  },
+
+  stepDetails() {
+    return migrationStepDetails.get();
+  },
+
+  progressBarStyle() {
+    const progress = migrationProgress.get();
+    return `width: ${progress}%`;
+  },
+
+  stepProgressBarStyle() {
+    const progress = migrationStepProgress.get();
+    return `width: ${progress}%`;
+  },
+
+  stepNameFormatted() {
+    const stepName = migrationStepName.get();
+    if (!stepName) return '';
     
-    return steps.map(step => ({
-      ...step,
-      isCurrentStep: step.name === currentStep
-    }));
+    // Convert snake_case to Title Case
+    return stepName
+      .split('_')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  },
+
+  stepDetailsFormatted() {
+    const details = migrationStepDetails.get();
+    if (!details) return '';
+    
+    const formatted = [];
+    for (const [key, value] of Object.entries(details)) {
+      const formattedKey = key
+        .split(/(?=[A-Z])/)
+        .join(' ')
+        .toLowerCase()
+        .replace(/^\w/, c => c.toUpperCase());
+      formatted.push(`${formattedKey}: ${value}`);
+    }
+    
+    return formatted.join(', ');
   }
 });
 
-Template.migrationProgress.onCreated(function() {
-  // Subscribe to migration state changes
-  this.autorun(() => {
-    isMigrating.get();
-    migrationProgress.get();
-    migrationStatus.get();
-    migrationCurrentStep.get();
-    migrationEstimatedTime.get();
-    migrationSteps.get();
-  });
-});
+// Template events
+Template.migrationProgress.events({
+  'click .js-close-migration-progress'() {
+    migrationProgressManager.clearProgress();
+  }
+});