Initial commit
This commit is contained in:
184
src/lib/utils/ModalHelper.ts
Normal file
184
src/lib/utils/ModalHelper.ts
Normal file
@@ -0,0 +1,184 @@
|
||||
import { ProfileManager } from '$lib/profiles/ProfileManager';
|
||||
import { get } from 'svelte/store';
|
||||
import { activeProfile } from '$lib/stores/mudStore';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
import type { Trigger } from '$lib/triggers/TriggerSystem';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import ProfileEditor from '$lib/components/ProfileEditor.svelte';
|
||||
import TriggerEditor from '$lib/components/TriggerEditor.svelte';
|
||||
|
||||
/**
|
||||
* Helper class for creating and showing modals programmatically
|
||||
*/
|
||||
export class ModalHelper {
|
||||
private static modal: Modal | null = null;
|
||||
private static profileManager = new ProfileManager();
|
||||
|
||||
/**
|
||||
* Show the full-featured profile editor modal
|
||||
* @param onSave Callback when profile is saved
|
||||
* @param onCancel Callback when operation is cancelled
|
||||
* @param existingProfile Optional existing profile to edit
|
||||
*/
|
||||
static showProfileEditor(
|
||||
onSave: (profile: MudProfile) => void,
|
||||
onCancel: () => void,
|
||||
existingProfile?: MudProfile
|
||||
): void {
|
||||
console.log('ModalHelper.showProfileEditor called');
|
||||
|
||||
try {
|
||||
// Make sure document.body is available
|
||||
if (!document.body) {
|
||||
throw new Error('document.body is not available');
|
||||
}
|
||||
|
||||
// Destroy existing modal if it exists to prevent memory leaks
|
||||
if (this.modal) {
|
||||
try {
|
||||
this.modal.$destroy();
|
||||
} catch (error) {
|
||||
console.error('Error destroying previous modal:', error);
|
||||
}
|
||||
this.modal = null;
|
||||
}
|
||||
|
||||
// Create a new modal instance
|
||||
console.log('Creating new Modal instance');
|
||||
this.modal = new Modal({
|
||||
target: document.body,
|
||||
props: {
|
||||
closable: true,
|
||||
title: '',
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.modal) {
|
||||
throw new Error('Failed to create modal instance');
|
||||
}
|
||||
|
||||
// Get profile to edit or create new one
|
||||
const profile = existingProfile || this.profileManager.createDefaultProfile();
|
||||
const isNewProfile = !existingProfile;
|
||||
|
||||
console.log('Setting up modal with profile:', profile);
|
||||
|
||||
// Set up the modal with a short delay to ensure the DOM is ready
|
||||
setTimeout(() => {
|
||||
if (this.modal) {
|
||||
// Set up the modal
|
||||
this.modal.setProps({
|
||||
title: isNewProfile ? 'Create New Profile' : 'Edit Profile',
|
||||
component: ProfileEditor,
|
||||
componentProps: {
|
||||
profile,
|
||||
isNewProfile
|
||||
},
|
||||
onSubmit: (result) => {
|
||||
console.log('Modal submit callback with result:', result);
|
||||
onSave(result.profile);
|
||||
},
|
||||
onCancel: () => {
|
||||
console.log('Modal cancel callback');
|
||||
onCancel();
|
||||
}
|
||||
});
|
||||
|
||||
// Open the modal
|
||||
this.modal.open();
|
||||
console.log('Modal opened');
|
||||
} else {
|
||||
console.error('Modal instance was destroyed before it could be opened');
|
||||
}
|
||||
}, 50);
|
||||
} catch (error) {
|
||||
console.error('Error in showProfileEditor:', error);
|
||||
// Call onCancel to ensure the flow continues even if there's an error
|
||||
onCancel();
|
||||
throw error; // Re-throw to allow +page.svelte to handle it
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the trigger editor modal
|
||||
* @param onSave Callback when trigger is saved
|
||||
* @param onCancel Callback when operation is cancelled
|
||||
* @param existingTrigger Optional existing trigger to edit
|
||||
*/
|
||||
static showTriggerEditor(
|
||||
onSave: (trigger: Trigger) => void,
|
||||
onCancel: () => void,
|
||||
existingTrigger?: Trigger
|
||||
): void {
|
||||
console.log('ModalHelper.showTriggerEditor called');
|
||||
|
||||
try {
|
||||
// Make sure document.body is available
|
||||
if (!document.body) {
|
||||
throw new Error('document.body is not available');
|
||||
}
|
||||
|
||||
// Destroy existing modal if it exists to prevent memory leaks
|
||||
if (this.modal) {
|
||||
try {
|
||||
this.modal.$destroy();
|
||||
} catch (error) {
|
||||
console.error('Error destroying previous modal:', error);
|
||||
}
|
||||
this.modal = null;
|
||||
}
|
||||
|
||||
// Create a new modal instance
|
||||
console.log('Creating new Modal instance');
|
||||
this.modal = new Modal({
|
||||
target: document.body,
|
||||
props: {
|
||||
closable: true,
|
||||
title: '',
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.modal) {
|
||||
throw new Error('Failed to create modal instance');
|
||||
}
|
||||
|
||||
const isNewTrigger = !existingTrigger;
|
||||
|
||||
console.log('Setting up trigger modal:', existingTrigger || 'new trigger');
|
||||
|
||||
// Set up the modal with a short delay to ensure the DOM is ready
|
||||
setTimeout(() => {
|
||||
if (this.modal) {
|
||||
// Set up the modal
|
||||
this.modal.setProps({
|
||||
title: isNewTrigger ? 'Create New Trigger' : 'Edit Trigger',
|
||||
component: TriggerEditor,
|
||||
componentProps: {
|
||||
trigger: existingTrigger || null,
|
||||
isNew: isNewTrigger
|
||||
},
|
||||
onSubmit: (result) => {
|
||||
console.log('Modal submit callback with result:', result);
|
||||
onSave(result.trigger);
|
||||
},
|
||||
onCancel: () => {
|
||||
console.log('Modal cancel callback');
|
||||
onCancel();
|
||||
}
|
||||
});
|
||||
|
||||
// Open the modal
|
||||
this.modal.open();
|
||||
console.log('Modal opened');
|
||||
} else {
|
||||
console.error('Modal instance was destroyed before it could be opened');
|
||||
}
|
||||
}, 50);
|
||||
} catch (error) {
|
||||
console.error('Error in showTriggerEditor:', error);
|
||||
// Call onCancel to ensure the flow continues even if there's an error
|
||||
onCancel();
|
||||
throw error; // Re-throw to allow +page.svelte to handle it
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user