Files
orion/app/modules/cms/static/vendor/js/content-page-edit.js
Samir Boulahtit ec4ec045fc feat: complete CMS as fully autonomous self-contained module
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>
2026-01-26 22:42:46 +01:00

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';
}
}
};
}