Transform CMS from a thin wrapper into a fully self-contained module with all code living within app/modules/cms/: Module Structure: - models/: ContentPage model (canonical location with dynamic discovery) - schemas/: Pydantic schemas for API validation - services/: ContentPageService business logic - exceptions/: Module-specific exceptions - routes/api/: REST API endpoints (admin, vendor, shop) - routes/pages/: HTML page routes (admin, vendor) - templates/cms/: Jinja2 templates (namespaced) - static/: JavaScript files (admin/vendor) - locales/: i18n translations (en, fr, de, lb) Key Changes: - Move ContentPage model to module with dynamic model discovery - Create Pydantic schemas package for request/response validation - Extract API routes from app/api/v1/*/ to module - Extract page routes from admin_pages.py/vendor_pages.py to module - Move static JS files to module with dedicated mount point - Update templates to use cms_static for module assets - Add module static file mounting in main.py - Delete old scattered files (no shims - hard errors on old imports) This establishes the pattern for migrating other modules to be fully autonomous and independently deployable. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
237 lines
8.9 KiB
JavaScript
237 lines
8.9 KiB
JavaScript
// static/vendor/js/content-page-edit.js
|
|
|
|
// Use centralized logger
|
|
const contentPageEditLog = window.LogConfig.loggers.contentPageEdit || window.LogConfig.createLogger('contentPageEdit');
|
|
|
|
// ============================================
|
|
// VENDOR CONTENT PAGE EDITOR
|
|
// ============================================
|
|
function vendorContentPageEditor(pageId) {
|
|
return {
|
|
// Inherit base layout functionality from init-alpine.js
|
|
...data(),
|
|
|
|
// Page identifier for sidebar active state
|
|
currentPage: 'content-pages',
|
|
|
|
// Editor state
|
|
pageId: pageId,
|
|
isOverride: false,
|
|
form: {
|
|
slug: '',
|
|
title: '',
|
|
content: '',
|
|
content_format: 'html',
|
|
meta_description: '',
|
|
meta_keywords: '',
|
|
is_published: false,
|
|
show_in_header: false,
|
|
show_in_footer: true,
|
|
show_in_legal: false,
|
|
display_order: 0
|
|
},
|
|
loading: false,
|
|
saving: false,
|
|
error: null,
|
|
successMessage: null,
|
|
|
|
// Default preview modal state
|
|
showingDefaultPreview: false,
|
|
loadingDefault: false,
|
|
defaultContent: null,
|
|
|
|
// Initialize
|
|
async init() {
|
|
// Prevent multiple initializations
|
|
if (window._vendorContentPageEditInitialized) {
|
|
contentPageEditLog.warn('Content page editor already initialized, skipping...');
|
|
return;
|
|
}
|
|
window._vendorContentPageEditInitialized = true;
|
|
|
|
// IMPORTANT: Call parent init first to set vendorCode from URL
|
|
const parentInit = data().init;
|
|
if (parentInit) {
|
|
await parentInit.call(this);
|
|
}
|
|
|
|
try {
|
|
contentPageEditLog.info('=== VENDOR CONTENT PAGE EDITOR INITIALIZING ===');
|
|
contentPageEditLog.info('Page ID:', this.pageId);
|
|
|
|
if (this.pageId) {
|
|
// Edit mode - load existing page
|
|
contentPageEditLog.group('Loading page for editing');
|
|
await this.loadPage();
|
|
contentPageEditLog.groupEnd();
|
|
} else {
|
|
// Create mode - use default values
|
|
contentPageEditLog.info('Create mode - using default form values');
|
|
}
|
|
|
|
contentPageEditLog.info('=== VENDOR CONTENT PAGE EDITOR INITIALIZATION COMPLETE ===');
|
|
} catch (error) {
|
|
contentPageEditLog.error('Failed to initialize content page editor:', error);
|
|
}
|
|
},
|
|
|
|
// Load existing page
|
|
async loadPage() {
|
|
this.loading = true;
|
|
this.error = null;
|
|
|
|
try {
|
|
contentPageEditLog.info(`Fetching page ${this.pageId}...`);
|
|
|
|
// Use the vendor API to get page by ID
|
|
// We need to get the page details - use overrides endpoint and find by ID
|
|
const response = await apiClient.get('/vendor/content-pages/overrides');
|
|
const pages = response.data || response || [];
|
|
const page = pages.find(p => p.id === this.pageId);
|
|
|
|
if (!page) {
|
|
throw new Error('Page not found or you do not have access to it');
|
|
}
|
|
|
|
contentPageEditLog.debug('Page data:', page);
|
|
|
|
this.isOverride = page.is_vendor_override || false;
|
|
this.form = {
|
|
slug: page.slug || '',
|
|
title: page.title || '',
|
|
content: page.content || '',
|
|
content_format: page.content_format || 'html',
|
|
meta_description: page.meta_description || '',
|
|
meta_keywords: page.meta_keywords || '',
|
|
is_published: page.is_published || false,
|
|
show_in_header: page.show_in_header || false,
|
|
show_in_footer: page.show_in_footer !== undefined ? page.show_in_footer : true,
|
|
show_in_legal: page.show_in_legal || false,
|
|
display_order: page.display_order || 0
|
|
};
|
|
|
|
contentPageEditLog.info('Page loaded successfully');
|
|
|
|
} catch (err) {
|
|
contentPageEditLog.error('Error loading page:', err);
|
|
this.error = err.message || 'Failed to load page';
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
// Save page (create or update)
|
|
async savePage() {
|
|
if (this.saving) return;
|
|
|
|
this.saving = true;
|
|
this.error = null;
|
|
this.successMessage = null;
|
|
|
|
try {
|
|
contentPageEditLog.info(this.pageId ? 'Updating page...' : 'Creating page...');
|
|
|
|
const payload = {
|
|
slug: this.form.slug,
|
|
title: this.form.title,
|
|
content: this.form.content,
|
|
content_format: this.form.content_format,
|
|
meta_description: this.form.meta_description,
|
|
meta_keywords: this.form.meta_keywords,
|
|
is_published: this.form.is_published,
|
|
show_in_header: this.form.show_in_header,
|
|
show_in_footer: this.form.show_in_footer,
|
|
show_in_legal: this.form.show_in_legal,
|
|
display_order: this.form.display_order
|
|
};
|
|
|
|
contentPageEditLog.debug('Payload:', payload);
|
|
|
|
let response;
|
|
if (this.pageId) {
|
|
// Update existing page
|
|
response = await apiClient.put(`/vendor/content-pages/${this.pageId}`, payload);
|
|
this.successMessage = 'Page updated successfully!';
|
|
contentPageEditLog.info('Page updated');
|
|
} else {
|
|
// Create new page
|
|
response = await apiClient.post('/vendor/content-pages/', payload);
|
|
this.successMessage = 'Page created successfully!';
|
|
contentPageEditLog.info('Page created');
|
|
|
|
// Redirect to edit page after creation
|
|
const pageData = response.data || response;
|
|
if (pageData && pageData.id) {
|
|
setTimeout(() => {
|
|
window.location.href = `/vendor/${this.vendorCode}/content-pages/${pageData.id}/edit`;
|
|
}, 1500);
|
|
}
|
|
}
|
|
|
|
// Clear success message after 3 seconds
|
|
setTimeout(() => {
|
|
this.successMessage = null;
|
|
}, 3000);
|
|
|
|
} catch (err) {
|
|
contentPageEditLog.error('Error saving page:', err);
|
|
this.error = err.message || 'Failed to save page';
|
|
|
|
// Scroll to top to show error
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
} finally {
|
|
this.saving = false;
|
|
}
|
|
},
|
|
|
|
// Show default content preview
|
|
async showDefaultPreview() {
|
|
this.showingDefaultPreview = true;
|
|
this.loadingDefault = true;
|
|
this.defaultContent = null;
|
|
|
|
try {
|
|
contentPageEditLog.info('Loading platform default for slug:', this.form.slug);
|
|
|
|
const response = await apiClient.get(`/vendor/content-pages/platform-default/${this.form.slug}`);
|
|
this.defaultContent = response.data || response;
|
|
|
|
contentPageEditLog.info('Default content loaded');
|
|
|
|
} catch (err) {
|
|
contentPageEditLog.error('Error loading default content:', err);
|
|
this.defaultContent = {
|
|
title: 'Error',
|
|
content: `<p class="text-red-500">Failed to load platform default: ${err.message}</p>`
|
|
};
|
|
} finally {
|
|
this.loadingDefault = false;
|
|
}
|
|
},
|
|
|
|
// Delete page (revert to default for overrides)
|
|
async deletePage() {
|
|
const message = this.isOverride
|
|
? 'Are you sure you want to revert to the platform default? Your customizations will be lost.'
|
|
: 'Are you sure you want to delete this page? This cannot be undone.';
|
|
|
|
if (!confirm(message)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
contentPageEditLog.info('Deleting page:', this.pageId);
|
|
|
|
await apiClient.delete(`/vendor/content-pages/${this.pageId}`);
|
|
|
|
// Redirect back to list
|
|
window.location.href = `/vendor/${this.vendorCode}/content-pages`;
|
|
|
|
} catch (err) {
|
|
contentPageEditLog.error('Error deleting page:', err);
|
|
this.error = err.message || 'Failed to delete page';
|
|
}
|
|
}
|
|
};
|
|
}
|