mirror of
https://github.com/wekan/wekan.git
synced 2026-03-04 12:50:16 +01:00
Some migrations and mobile fixes.
Some checks failed
Some checks failed
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu
parent
bccc22c5fe
commit
30620d0ca4
20 changed files with 2638 additions and 542 deletions
|
|
@ -269,57 +269,71 @@
|
|||
}
|
||||
/* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
|
||||
.board-wrapper.mobile-view {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.board-wrapper.mobile-view .board-canvas {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.board-wrapper.mobile-view .board-canvas.mobile-view .swimlane {
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: flex;
|
||||
display: block !important;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px),
|
||||
screen and (max-device-width: 932px) and (-webkit-min-device-pixel-ratio: 3) {
|
||||
.board-wrapper {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.board-wrapper .board-canvas {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.board-wrapper .board-canvas .swimlane {
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: flex;
|
||||
display: block !important;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
}
|
||||
}
|
||||
.calendar-event-green {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import dragscroll from '@wekanteam/dragscroll';
|
|||
import { boardConverter } from '/client/lib/boardConverter';
|
||||
import { migrationManager } from '/client/lib/migrationManager';
|
||||
import { attachmentMigrationManager } from '/client/lib/attachmentMigrationManager';
|
||||
import { migrationProgressManager } from '/client/components/migrationProgress';
|
||||
import Swimlanes from '/models/swimlanes';
|
||||
import Lists from '/models/lists';
|
||||
|
||||
|
|
@ -98,61 +99,25 @@ BlazeComponent.extendComponent({
|
|||
return;
|
||||
}
|
||||
|
||||
// Check if board needs migration based on migration version
|
||||
// DISABLED: Migration check and execution
|
||||
// const needsMigration = !board.migrationVersion || board.migrationVersion < 1;
|
||||
// Check if board needs comprehensive migration
|
||||
const needsMigration = await this.checkComprehensiveMigration(boardId);
|
||||
|
||||
// if (needsMigration) {
|
||||
// // Start background migration for old boards
|
||||
// this.isMigrating.set(true);
|
||||
// await this.startBackgroundMigration(boardId);
|
||||
// this.isMigrating.set(false);
|
||||
// }
|
||||
if (needsMigration) {
|
||||
// Start comprehensive migration
|
||||
this.isMigrating.set(true);
|
||||
const success = await this.executeComprehensiveMigration(boardId);
|
||||
this.isMigrating.set(false);
|
||||
|
||||
if (success) {
|
||||
this.isBoardReady.set(true);
|
||||
} else {
|
||||
console.error('Comprehensive migration failed, setting ready to true anyway');
|
||||
this.isBoardReady.set(true); // Still show board even if migration failed
|
||||
}
|
||||
} else {
|
||||
this.isBoardReady.set(true);
|
||||
}
|
||||
|
||||
// Check if board needs conversion (for old structure)
|
||||
// DISABLED: Board conversion logic
|
||||
// if (boardConverter.isBoardConverted(boardId)) {
|
||||
// if (process.env.DEBUG === 'true') {
|
||||
// console.log(`Board ${boardId} has already been converted, skipping conversion`);
|
||||
// }
|
||||
// this.isBoardReady.set(true);
|
||||
// } else {
|
||||
// const needsConversion = boardConverter.needsConversion(boardId);
|
||||
//
|
||||
// if (needsConversion) {
|
||||
// this.isConverting.set(true);
|
||||
// const success = await boardConverter.convertBoard(boardId);
|
||||
// this.isConverting.set(false);
|
||||
//
|
||||
// if (success) {
|
||||
// this.isBoardReady.set(true);
|
||||
// } else {
|
||||
// console.error('Board conversion failed, setting ready to true anyway');
|
||||
// this.isBoardReady.set(true); // Still show board even if conversion failed
|
||||
// }
|
||||
// } else {
|
||||
// this.isBoardReady.set(true);
|
||||
// }
|
||||
// }
|
||||
|
||||
// Set board ready immediately since conversions are disabled
|
||||
this.isBoardReady.set(true);
|
||||
|
||||
// Convert shared lists to per-swimlane lists if needed
|
||||
// DISABLED: Shared lists conversion
|
||||
// await this.convertSharedListsToPerSwimlane(boardId);
|
||||
|
||||
// Fix missing lists migration (for cards with wrong listId references)
|
||||
// DISABLED: Missing lists fix
|
||||
// await this.fixMissingLists(boardId);
|
||||
|
||||
// Fix duplicate lists created by WeKan 8.10
|
||||
// DISABLED: Duplicate lists fix
|
||||
// await this.fixDuplicateLists(boardId);
|
||||
|
||||
// Start attachment migration in background if needed
|
||||
// DISABLED: Attachment migration
|
||||
// this.startAttachmentMigrationIfNeeded(boardId);
|
||||
} catch (error) {
|
||||
console.error('Error during board conversion check:', error);
|
||||
this.isConverting.set(false);
|
||||
|
|
@ -161,6 +126,137 @@ BlazeComponent.extendComponent({
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if board needs comprehensive migration
|
||||
*/
|
||||
async checkComprehensiveMigration(boardId) {
|
||||
try {
|
||||
return new Promise((resolve, reject) => {
|
||||
Meteor.call('comprehensiveBoardMigration.needsMigration', boardId, (error, result) => {
|
||||
if (error) {
|
||||
console.error('Error checking comprehensive migration:', error);
|
||||
reject(error);
|
||||
} else {
|
||||
resolve(result);
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error checking comprehensive migration:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Execute comprehensive migration for a board
|
||||
*/
|
||||
async executeComprehensiveMigration(boardId) {
|
||||
try {
|
||||
// Start progress tracking
|
||||
migrationProgressManager.startMigration();
|
||||
|
||||
// Simulate progress updates since we can't easily pass callbacks through Meteor methods
|
||||
const progressSteps = [
|
||||
{ step: 'analyze_board_structure', name: 'Analyze Board Structure', duration: 1000 },
|
||||
{ step: 'fix_orphaned_cards', name: 'Fix Orphaned Cards', duration: 2000 },
|
||||
{ step: 'convert_shared_lists', name: 'Convert Shared Lists', duration: 3000 },
|
||||
{ step: 'ensure_per_swimlane_lists', name: 'Ensure Per-Swimlane Lists', duration: 1500 },
|
||||
{ step: 'cleanup_empty_lists', name: 'Cleanup Empty Lists', duration: 1000 },
|
||||
{ step: 'validate_migration', name: 'Validate Migration', duration: 1000 },
|
||||
{ step: 'fix_avatar_urls', name: 'Fix Avatar URLs', duration: 1000 },
|
||||
{ step: 'fix_attachment_urls', name: 'Fix Attachment URLs', duration: 1000 }
|
||||
];
|
||||
|
||||
// Start the actual migration
|
||||
const migrationPromise = new Promise((resolve, reject) => {
|
||||
Meteor.call('comprehensiveBoardMigration.execute', boardId, (error, result) => {
|
||||
if (error) {
|
||||
console.error('Error executing comprehensive migration:', error);
|
||||
migrationProgressManager.failMigration(error);
|
||||
reject(error);
|
||||
} else {
|
||||
if (process.env.DEBUG === 'true') {
|
||||
console.log('Comprehensive migration completed for board:', boardId, result);
|
||||
}
|
||||
resolve(result.success);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Simulate progress updates
|
||||
const progressPromise = this.simulateMigrationProgress(progressSteps);
|
||||
|
||||
// Wait for both to complete
|
||||
const [migrationResult] = await Promise.all([migrationPromise, progressPromise]);
|
||||
|
||||
migrationProgressManager.completeMigration();
|
||||
return migrationResult;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error executing comprehensive migration:', error);
|
||||
migrationProgressManager.failMigration(error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Simulate migration progress updates
|
||||
*/
|
||||
async simulateMigrationProgress(progressSteps) {
|
||||
const totalSteps = progressSteps.length;
|
||||
|
||||
for (let i = 0; i < progressSteps.length; i++) {
|
||||
const step = progressSteps[i];
|
||||
const stepProgress = Math.round(((i + 1) / totalSteps) * 100);
|
||||
|
||||
// Update progress for this step
|
||||
migrationProgressManager.updateProgress({
|
||||
overallProgress: stepProgress,
|
||||
currentStep: i + 1,
|
||||
totalSteps,
|
||||
stepName: step.step,
|
||||
stepProgress: 0,
|
||||
stepStatus: `Starting ${step.name}...`,
|
||||
stepDetails: null,
|
||||
boardId: Session.get('currentBoard')
|
||||
});
|
||||
|
||||
// Simulate step progress
|
||||
const stepDuration = step.duration;
|
||||
const updateInterval = 100; // Update every 100ms
|
||||
const totalUpdates = stepDuration / updateInterval;
|
||||
|
||||
for (let j = 0; j < totalUpdates; j++) {
|
||||
const stepStepProgress = Math.round(((j + 1) / totalUpdates) * 100);
|
||||
|
||||
migrationProgressManager.updateProgress({
|
||||
overallProgress: stepProgress,
|
||||
currentStep: i + 1,
|
||||
totalSteps,
|
||||
stepName: step.step,
|
||||
stepProgress: stepStepProgress,
|
||||
stepStatus: `Processing ${step.name}...`,
|
||||
stepDetails: { progress: `${stepStepProgress}%` },
|
||||
boardId: Session.get('currentBoard')
|
||||
});
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, updateInterval));
|
||||
}
|
||||
|
||||
// Complete the step
|
||||
migrationProgressManager.updateProgress({
|
||||
overallProgress: stepProgress,
|
||||
currentStep: i + 1,
|
||||
totalSteps,
|
||||
stepName: step.step,
|
||||
stepProgress: 100,
|
||||
stepStatus: `${step.name} completed`,
|
||||
stepDetails: { status: 'completed' },
|
||||
boardId: Session.get('currentBoard')
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async startBackgroundMigration(boardId) {
|
||||
try {
|
||||
// Start background migration using the cron system
|
||||
|
|
|
|||
|
|
@ -505,73 +505,73 @@
|
|||
flex-wrap: nowrap !important;
|
||||
align-items: stretch !important;
|
||||
justify-content: flex-start !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
.mobile-mode .swimlane {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
margin: 0 0 2rem 0 !important;
|
||||
padding: 0 !important;
|
||||
float: none !important;
|
||||
clear: both !important;
|
||||
}
|
||||
.mobile-mode .swimlane {
|
||||
display: block !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
margin: 0 0 2rem 0 !important;
|
||||
padding: 0 !important;
|
||||
float: none !important;
|
||||
clear: both !important;
|
||||
}
|
||||
|
||||
.mobile-mode .swimlane .swimlane-header {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
margin: 0 0 1rem 0 !important;
|
||||
padding: 1rem !important;
|
||||
font-size: clamp(18px, 2.5vw, 32px) !important;
|
||||
font-weight: bold !important;
|
||||
border-bottom: 2px solid #ccc !important;
|
||||
}
|
||||
.mobile-mode .swimlane .swimlane-header {
|
||||
display: block !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
margin: 0 0 1rem 0 !important;
|
||||
padding: 1rem !important;
|
||||
font-size: clamp(18px, 2.5vw, 32px) !important;
|
||||
font-weight: bold !important;
|
||||
border-bottom: 2px solid #ccc !important;
|
||||
}
|
||||
|
||||
.mobile-mode .swimlane .lists {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
flex-direction: column !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: stretch !important;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
.mobile-mode .swimlane .lists {
|
||||
display: block !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
flex-direction: column !important;
|
||||
flex-wrap: nowrap !important;
|
||||
align-items: stretch !important;
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.mobile-mode .list {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
margin: 0 0 2rem 0 !important;
|
||||
padding: 0 !important;
|
||||
float: none !important;
|
||||
clear: both !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
border-top: none !important;
|
||||
border-bottom: 2px solid #ccc !important;
|
||||
flex: none !important;
|
||||
flex-basis: auto !important;
|
||||
flex-grow: 0 !important;
|
||||
flex-shrink: 0 !important;
|
||||
position: static !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
top: auto !important;
|
||||
bottom: auto !important;
|
||||
transform: none !important;
|
||||
}
|
||||
.mobile-mode .list {
|
||||
display: block !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
margin: 0 0 2rem 0 !important;
|
||||
padding: 0 !important;
|
||||
float: none !important;
|
||||
clear: both !important;
|
||||
border-left: none !important;
|
||||
border-right: none !important;
|
||||
border-top: none !important;
|
||||
border-bottom: 2px solid #ccc !important;
|
||||
flex: none !important;
|
||||
flex-basis: auto !important;
|
||||
flex-grow: 0 !important;
|
||||
flex-shrink: 0 !important;
|
||||
position: static !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
top: auto !important;
|
||||
bottom: auto !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.mobile-mode .list:first-child {
|
||||
margin-left: 0 !important;
|
||||
|
|
@ -667,9 +667,9 @@
|
|||
flex-wrap: nowrap !important;
|
||||
align-items: stretch !important;
|
||||
justify-content: flex-start !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
min-width: 100vw !important;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -641,17 +641,22 @@ body.list-resizing-active * {
|
|||
.mini-list.mobile-view {
|
||||
flex: 0 0 60px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
border-left: 0px !important;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: block !important;
|
||||
}
|
||||
.list.mobile-view {
|
||||
display: contents;
|
||||
display: block !important;
|
||||
flex-basis: auto;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
border-left: 0px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.list.mobile-view:first-child {
|
||||
margin-left: 0px;
|
||||
|
|
@ -659,9 +664,11 @@ body.list-resizing-active * {
|
|||
.list.mobile-view.ui-sortable-helper {
|
||||
flex: 0 0 60px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
border-left: 0px !important;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: block !important;
|
||||
}
|
||||
.list.mobile-view.ui-sortable-helper .list-header.ui-sortable-handle {
|
||||
cursor: grabbing;
|
||||
|
|
@ -669,14 +676,17 @@ body.list-resizing-active * {
|
|||
.list.mobile-view.placeholder {
|
||||
flex: 0 0 60px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
border-left: 0px !important;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: block !important;
|
||||
}
|
||||
.list.mobile-view .list-body {
|
||||
padding: 15px 19px;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
}
|
||||
.list.mobile-view .list-header {
|
||||
/*Updated padding values for mobile devices, this should fix text grouping issue*/
|
||||
|
|
@ -685,8 +695,9 @@ body.list-resizing-active * {
|
|||
min-height: 30px;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
/* Force grid layout for iPhone */
|
||||
display: grid !important;
|
||||
grid-template-columns: 30px 1fr auto auto !important;
|
||||
|
|
@ -767,17 +778,22 @@ body.list-resizing-active * {
|
|||
.mini-list {
|
||||
flex: 0 0 60px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
border-left: 0px !important;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: block !important;
|
||||
}
|
||||
.list {
|
||||
display: contents;
|
||||
display: block !important;
|
||||
flex-basis: auto;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
border-left: 0px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.list:first-child {
|
||||
margin-left: 0px;
|
||||
|
|
@ -785,9 +801,11 @@ body.list-resizing-active * {
|
|||
.list.ui-sortable-helper {
|
||||
flex: 0 0 60px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
border-left: 0px !important;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: block !important;
|
||||
}
|
||||
.list.ui-sortable-helper .list-header.ui-sortable-handle {
|
||||
cursor: grabbing;
|
||||
|
|
@ -795,14 +813,17 @@ body.list-resizing-active * {
|
|||
.list.placeholder {
|
||||
flex: 0 0 60px;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
border-left: 0px !important;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: block !important;
|
||||
}
|
||||
.list-body {
|
||||
padding: 15px 19px;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
}
|
||||
.list-header {
|
||||
/*Updated padding values for mobile devices, this should fix text grouping issue*/
|
||||
|
|
@ -811,8 +832,9 @@ body.list-resizing-active * {
|
|||
min-height: 30px;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
min-width: 100vw;
|
||||
}
|
||||
.list-header .list-header-left-icon {
|
||||
padding: 7px;
|
||||
|
|
|
|||
|
|
@ -1,38 +1,33 @@
|
|||
/* Migration Progress Styles */
|
||||
.migration-overlay {
|
||||
.migration-progress-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.migration-overlay.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.migration-modal {
|
||||
.migration-progress-modal {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||||
max-width: 800px;
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
animation: slideInScale 0.4s ease-out;
|
||||
margin: 20px;
|
||||
animation: migrationModalSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInScale {
|
||||
@keyframes migrationModalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px) scale(0.95);
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
|
|
@ -40,333 +35,235 @@
|
|||
}
|
||||
}
|
||||
|
||||
.migration-header {
|
||||
padding: 24px 32px 20px;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
text-align: center;
|
||||
.migration-progress-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.migration-header h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 24px;
|
||||
.migration-progress-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.migration-header h3 i {
|
||||
margin-right: 12px;
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
.migration-header p {
|
||||
margin: 0;
|
||||
.migration-progress-close {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
opacity: 0.9;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.migration-content {
|
||||
padding: 24px 32px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
.migration-progress-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.migration-overview {
|
||||
margin-bottom: 32px;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #667eea;
|
||||
.migration-progress-content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.overall-progress {
|
||||
margin-bottom: 20px;
|
||||
.migration-progress-overall {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
.migration-progress-overall-label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
.migration-progress-overall-bar {
|
||||
background: #e9ecef;
|
||||
border-radius: 10px;
|
||||
height: 12px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.migration-progress-overall-fill {
|
||||
background: linear-gradient(90deg, #28a745, #20c997);
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||
border-radius: 6px;
|
||||
border-radius: 10px;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-fill::after {
|
||||
.migration-progress-overall-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.4),
|
||||
transparent
|
||||
);
|
||||
animation: shimmer 2s infinite;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
animation: migrationProgressShimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
@keyframes migrationProgressShimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.current-step {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.current-step i {
|
||||
margin-right: 8px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.estimated-time {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
background-color: #fff3cd;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffeaa7;
|
||||
}
|
||||
|
||||
.estimated-time i {
|
||||
margin-right: 6px;
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
.migration-steps {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.migration-steps h4 {
|
||||
margin: 0 0 16px 0;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.migration-step {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.migration-step:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.migration-step.completed {
|
||||
background-color: #d4edda;
|
||||
border-left: 4px solid #28a745;
|
||||
}
|
||||
|
||||
.migration-step.current {
|
||||
background-color: #cce7ff;
|
||||
border-left: 4px solid #667eea;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.step-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
margin-right: 12px;
|
||||
font-size: 18px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-icon i.fa-check-circle {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.step-icon i.fa-cog.fa-spin {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.step-icon i.fa-circle-o {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.step-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.step-description {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.step-progress {
|
||||
.migration-progress-overall-percentage {
|
||||
text-align: right;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.step-progress .progress-text {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.step-progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-top: 8px;
|
||||
.migration-progress-current-step {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.step-progress-bar .progress-fill {
|
||||
.migration-progress-step-label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.migration-progress-step-bar {
|
||||
background: #e9ecef;
|
||||
border-radius: 8px;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.migration-progress-step-fill {
|
||||
background: linear-gradient(90deg, #007bff, #0056b3);
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||
border-radius: 2px;
|
||||
border-radius: 8px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.migration-status {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
background-color: #e3f2fd;
|
||||
padding: 12px 16px;
|
||||
.migration-progress-step-percentage {
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.migration-progress-status {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #bbdefb;
|
||||
margin-bottom: 16px;
|
||||
border-left: 4px solid #007bff;
|
||||
}
|
||||
|
||||
.migration-status i {
|
||||
margin-right: 8px;
|
||||
color: #2196f3;
|
||||
.migration-progress-status-label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.migration-footer {
|
||||
padding: 16px 32px 24px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
background-color: #f8f9fa;
|
||||
.migration-progress-status-text {
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.migration-info {
|
||||
.migration-progress-details {
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
background: #e3f2fd;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #2196f3;
|
||||
}
|
||||
|
||||
.migration-progress-details-label {
|
||||
font-weight: 600;
|
||||
color: #1976d2;
|
||||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.migration-progress-details-text {
|
||||
color: #1565c0;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.migration-progress-footer {
|
||||
padding: 20px 30px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.migration-progress-note {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.migration-info i {
|
||||
margin-right: 6px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.migration-warning {
|
||||
text-align: center;
|
||||
color: #856404;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
background-color: #fff3cd;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ffeaa7;
|
||||
}
|
||||
|
||||
.migration-warning i {
|
||||
margin-right: 6px;
|
||||
color: #f39c12;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.migration-modal {
|
||||
width: 98%;
|
||||
margin: 10px;
|
||||
@media (max-width: 600px) {
|
||||
.migration-progress-modal {
|
||||
width: 95%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.migration-header,
|
||||
.migration-content,
|
||||
.migration-footer {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
.migration-progress-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.migration-header h3 {
|
||||
font-size: 20px;
|
||||
.migration-progress-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.step-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.step-progress {
|
||||
text-align: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
max-height: 200px;
|
||||
.migration-progress-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.migration-progress-modal {
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.migration-progress-overall-label,
|
||||
.migration-progress-step-label,
|
||||
.migration-progress-status-label {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.migration-progress-status {
|
||||
background: #4a5568;
|
||||
border-left-color: #63b3ed;
|
||||
}
|
||||
|
||||
.migration-progress-status-text {
|
||||
color: #cbd5e0;
|
||||
}
|
||||
|
||||
.migration-progress-details {
|
||||
background: #2b6cb0;
|
||||
border-left-color: #4299e1;
|
||||
}
|
||||
|
||||
.migration-progress-details-label {
|
||||
color: #bee3f8;
|
||||
}
|
||||
|
||||
.migration-progress-details-text {
|
||||
color: #90cdf4;
|
||||
}
|
||||
|
||||
.migration-progress-footer {
|
||||
background: #4a5568;
|
||||
border-top-color: #718096;
|
||||
}
|
||||
|
||||
.migration-progress-note {
|
||||
color: #a0aec0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +1,43 @@
|
|||
template(name="migrationProgress")
|
||||
.migration-overlay(class="{{#if isMigrating}}active{{/if}}")
|
||||
.migration-modal
|
||||
.migration-header
|
||||
h3
|
||||
| 🗄️
|
||||
| {{_ 'database-migration'}}
|
||||
p {{_ 'database-migration-description'}}
|
||||
|
||||
.migration-content
|
||||
.migration-overview
|
||||
.overall-progress
|
||||
.progress-bar
|
||||
.progress-fill(style="width: {{migrationProgress}}%")
|
||||
.progress-text {{migrationProgress}}%
|
||||
.progress-label {{_ 'overall-progress'}}
|
||||
|
||||
.current-step
|
||||
| ⚙️
|
||||
| {{migrationCurrentStep}}
|
||||
|
||||
.estimated-time(style="{{#unless migrationEstimatedTime}}display: none;{{/unless}}")
|
||||
| ⏰
|
||||
| {{_ 'estimated-time-remaining'}}: {{migrationEstimatedTime}}
|
||||
if isMigrating
|
||||
.migration-progress-overlay
|
||||
.migration-progress-modal
|
||||
.migration-progress-header
|
||||
h3.migration-progress-title
|
||||
| 🔄 Board Migration in Progress
|
||||
.migration-progress-close.js-close-migration-progress
|
||||
| ❌
|
||||
|
||||
.migration-steps
|
||||
h4 {{_ 'migration-steps'}}
|
||||
.steps-list
|
||||
each migrationSteps
|
||||
.migration-step(class="{{#if completed}}completed{{/if}}" class="{{#if isCurrentStep}}current{{/if}}")
|
||||
.step-header
|
||||
.step-icon
|
||||
if completed
|
||||
| ✅
|
||||
else if isCurrentStep
|
||||
| ⚙️
|
||||
else
|
||||
| ⭕
|
||||
.step-info
|
||||
.step-name {{name}}
|
||||
.step-description {{description}}
|
||||
.step-progress
|
||||
if completed
|
||||
.progress-text 100%
|
||||
else if isCurrentStep
|
||||
.progress-text {{progress}}%
|
||||
else
|
||||
.progress-text 0%
|
||||
if isCurrentStep
|
||||
.step-progress-bar
|
||||
.progress-fill(style="width: {{progress}}%")
|
||||
.migration-progress-content
|
||||
.migration-progress-overall
|
||||
.migration-progress-overall-label
|
||||
| Overall Progress: {{currentStep}} of {{totalSteps}} steps
|
||||
.migration-progress-overall-bar
|
||||
.migration-progress-overall-fill(style="{{progressBarStyle}}")
|
||||
.migration-progress-overall-percentage
|
||||
| {{overallProgress}}%
|
||||
|
||||
.migration-progress-current-step
|
||||
.migration-progress-step-label
|
||||
| Current Step: {{stepNameFormatted}}
|
||||
.migration-progress-step-bar
|
||||
.migration-progress-step-fill(style="{{stepProgressBarStyle}}")
|
||||
.migration-progress-step-percentage
|
||||
| {{stepProgress}}%
|
||||
|
||||
.migration-progress-status
|
||||
.migration-progress-status-label
|
||||
| Status:
|
||||
.migration-progress-status-text
|
||||
| {{stepStatus}}
|
||||
|
||||
if stepDetailsFormatted
|
||||
.migration-progress-details
|
||||
.migration-progress-details-label
|
||||
| Details:
|
||||
.migration-progress-details-text
|
||||
| {{stepDetailsFormatted}}
|
||||
|
||||
.migration-status
|
||||
| ℹ️
|
||||
| {{migrationStatus}}
|
||||
|
||||
.migration-footer
|
||||
.migration-info
|
||||
| 💡
|
||||
| {{_ 'migration-info-text'}}
|
||||
.migration-warning
|
||||
| ⚠️
|
||||
| {{_ 'migration-warning-text'}}
|
||||
.migration-progress-footer
|
||||
.migration-progress-note
|
||||
| Please wait while we migrate your board to the latest structure...
|
||||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
padding: 7px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 87vw;
|
||||
right: 10px;
|
||||
font-size: 24px;
|
||||
cursor: move;
|
||||
z-index: 15;
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ template(name="changeAvatarPopup")
|
|||
each uploadedAvatars
|
||||
li: a.js-select-avatar
|
||||
.member
|
||||
img.avatar.avatar-image(src="{{link}}?auth=false&brokenIsFine=true")
|
||||
img.avatar.avatar-image(src="{{link}}")
|
||||
| {{_ 'uploaded-avatar'}}
|
||||
if isSelected
|
||||
| ✅
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ BlazeComponent.extendComponent({
|
|||
isSelected() {
|
||||
const userProfile = ReactiveCache.getCurrentUser().profile;
|
||||
const avatarUrl = userProfile && userProfile.avatarUrl;
|
||||
const currentAvatarUrl = `${this.currentData().link()}?auth=false&brokenIsFine=true`;
|
||||
const currentAvatarUrl = this.currentData().link();
|
||||
return avatarUrl === currentAvatarUrl;
|
||||
},
|
||||
|
||||
|
|
@ -220,7 +220,7 @@ BlazeComponent.extendComponent({
|
|||
}
|
||||
},
|
||||
'click .js-select-avatar'() {
|
||||
const avatarUrl = `${this.currentData().link()}?auth=false&brokenIsFine=true`;
|
||||
const avatarUrl = this.currentData().link();
|
||||
this.setAvatar(avatarUrl);
|
||||
},
|
||||
'click .js-select-initials'() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue