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>
This commit is contained in:
266
app/modules/cms/static/admin/js/content-pages.js
Normal file
266
app/modules/cms/static/admin/js/content-pages.js
Normal file
@@ -0,0 +1,266 @@
|
||||
// noqa: js-006 - async init pattern is safe, loadData has try/catch
|
||||
// static/admin/js/content-pages.js
|
||||
|
||||
// Use centralized logger
|
||||
const contentPagesLog = window.LogConfig.loggers.contentPages || window.LogConfig.createLogger('contentPages');
|
||||
|
||||
// ============================================
|
||||
// CONTENT PAGES MANAGER FUNCTION
|
||||
// ============================================
|
||||
function contentPagesManager() {
|
||||
return {
|
||||
// Inherit base layout functionality from init-alpine.js
|
||||
...data(),
|
||||
|
||||
// Page identifier for sidebar active state
|
||||
currentPage: 'content-pages',
|
||||
|
||||
// Content pages specific state
|
||||
allPages: [],
|
||||
platforms: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
|
||||
// Tabs and filters
|
||||
activeTab: 'all', // all, platform_marketing, vendor_defaults, vendor_overrides
|
||||
searchQuery: '',
|
||||
selectedPlatform: '', // Platform code filter
|
||||
|
||||
// Initialize
|
||||
async init() {
|
||||
contentPagesLog.info('=== CONTENT PAGES MANAGER INITIALIZING ===');
|
||||
|
||||
// Prevent multiple initializations
|
||||
if (window._contentPagesInitialized) {
|
||||
contentPagesLog.warn('Content pages manager already initialized, skipping...');
|
||||
return;
|
||||
}
|
||||
window._contentPagesInitialized = true;
|
||||
|
||||
contentPagesLog.group('Loading data');
|
||||
await Promise.all([
|
||||
this.loadPages(),
|
||||
this.loadPlatforms()
|
||||
]);
|
||||
contentPagesLog.groupEnd();
|
||||
|
||||
// Check for platform filter in URL (support both 'platform' and 'platform_code')
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const platformParam = urlParams.get('platform_code') || urlParams.get('platform');
|
||||
if (platformParam) {
|
||||
this.selectedPlatform = platformParam;
|
||||
}
|
||||
|
||||
// Check for slug param - if specified, redirect to edit page
|
||||
const slugParam = urlParams.get('slug');
|
||||
if (slugParam && platformParam) {
|
||||
await this.redirectToEditIfSlugMatches(platformParam, slugParam);
|
||||
}
|
||||
|
||||
contentPagesLog.info('=== CONTENT PAGES MANAGER INITIALIZATION COMPLETE ===');
|
||||
},
|
||||
|
||||
// Computed: Platform Marketing pages (is_platform_page=true, vendor_id=null)
|
||||
get platformMarketingPages() {
|
||||
return this.allPages.filter(page => page.is_platform_page && !page.vendor_id);
|
||||
},
|
||||
|
||||
// Computed: Vendor Default pages (is_platform_page=false, vendor_id=null)
|
||||
get vendorDefaultPages() {
|
||||
return this.allPages.filter(page => !page.is_platform_page && !page.vendor_id);
|
||||
},
|
||||
|
||||
// Computed: Vendor Override pages (vendor_id is set)
|
||||
get vendorOverridePages() {
|
||||
return this.allPages.filter(page => page.vendor_id);
|
||||
},
|
||||
|
||||
// Legacy computed (for backward compatibility)
|
||||
get platformPages() {
|
||||
return [...this.platformMarketingPages, ...this.vendorDefaultPages];
|
||||
},
|
||||
|
||||
get vendorPages() {
|
||||
return this.vendorOverridePages;
|
||||
},
|
||||
|
||||
// Computed: Filtered pages based on active tab, platform, and search
|
||||
get filteredPages() {
|
||||
let pages = [];
|
||||
|
||||
// Filter by tab (three-tier system)
|
||||
if (this.activeTab === 'platform_marketing') {
|
||||
pages = this.platformMarketingPages;
|
||||
} else if (this.activeTab === 'vendor_defaults') {
|
||||
pages = this.vendorDefaultPages;
|
||||
} else if (this.activeTab === 'vendor_overrides') {
|
||||
pages = this.vendorOverridePages;
|
||||
} else {
|
||||
pages = this.allPages;
|
||||
}
|
||||
|
||||
// Filter by selected platform
|
||||
if (this.selectedPlatform) {
|
||||
pages = pages.filter(page =>
|
||||
page.platform_code === this.selectedPlatform
|
||||
);
|
||||
}
|
||||
|
||||
// Filter by search query
|
||||
if (this.searchQuery) {
|
||||
const query = this.searchQuery.toLowerCase();
|
||||
pages = pages.filter(page =>
|
||||
page.title.toLowerCase().includes(query) ||
|
||||
page.slug.toLowerCase().includes(query) ||
|
||||
(page.vendor_name && page.vendor_name.toLowerCase().includes(query)) ||
|
||||
(page.platform_name && page.platform_name.toLowerCase().includes(query))
|
||||
);
|
||||
}
|
||||
|
||||
// Sort by display_order, then title
|
||||
return pages.sort((a, b) => {
|
||||
if (a.display_order !== b.display_order) {
|
||||
return a.display_order - b.display_order;
|
||||
}
|
||||
return a.title.localeCompare(b.title);
|
||||
});
|
||||
},
|
||||
|
||||
// Load all content pages
|
||||
async loadPages() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
contentPagesLog.info('Fetching all content pages...');
|
||||
|
||||
// Fetch all pages (platform + vendor, published + unpublished)
|
||||
const response = await apiClient.get('/admin/content-pages/?include_unpublished=true');
|
||||
|
||||
contentPagesLog.debug('API Response:', response);
|
||||
|
||||
if (!response) {
|
||||
throw new Error('Invalid API response');
|
||||
}
|
||||
|
||||
// Handle response - API returns array directly
|
||||
this.allPages = Array.isArray(response) ? response : (response.data || response.items || []);
|
||||
contentPagesLog.info(`Loaded ${this.allPages.length} pages`);
|
||||
|
||||
} catch (err) {
|
||||
contentPagesLog.error('Error loading content pages:', err);
|
||||
this.error = err.message || 'Failed to load content pages';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Load platforms for filter dropdown
|
||||
async loadPlatforms() {
|
||||
try {
|
||||
contentPagesLog.info('Fetching platforms...');
|
||||
const response = await apiClient.get('/admin/platforms');
|
||||
this.platforms = response.platforms || [];
|
||||
contentPagesLog.info(`Loaded ${this.platforms.length} platforms`);
|
||||
} catch (err) {
|
||||
contentPagesLog.error('Error loading platforms:', err);
|
||||
// Non-critical - don't set error state
|
||||
}
|
||||
},
|
||||
|
||||
// Redirect to edit page if a specific slug is requested
|
||||
async redirectToEditIfSlugMatches(platformCode, slug) {
|
||||
contentPagesLog.info(`Looking for page with platform=${platformCode}, slug=${slug}`);
|
||||
|
||||
// Find the page matching the platform and slug
|
||||
const matchingPage = this.allPages.find(page =>
|
||||
page.platform_code === platformCode && page.slug === slug
|
||||
);
|
||||
|
||||
if (matchingPage) {
|
||||
contentPagesLog.info(`Found matching page: ${matchingPage.id}, redirecting to edit...`);
|
||||
window.location.href = `/admin/content-pages/${matchingPage.id}/edit`;
|
||||
} else {
|
||||
contentPagesLog.warn(`No page found for platform=${platformCode}, slug=${slug}`);
|
||||
// Show a toast and offer to create
|
||||
if (slug === 'home') {
|
||||
// Offer to create homepage
|
||||
if (confirm(`No homepage found for ${platformCode}. Would you like to create one?`)) {
|
||||
window.location.href = `/admin/content-pages/create?platform_code=${platformCode}&slug=home&is_platform_page=true`;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Get page tier label (three-tier system)
|
||||
getPageTierLabel(page) {
|
||||
if (page.vendor_id) {
|
||||
return 'Vendor Override';
|
||||
} else if (page.is_platform_page) {
|
||||
return 'Platform Marketing';
|
||||
} else {
|
||||
return 'Vendor Default';
|
||||
}
|
||||
},
|
||||
|
||||
// Get page tier CSS class (three-tier system)
|
||||
getPageTierClass(page) {
|
||||
if (page.vendor_id) {
|
||||
// Vendor Override - purple
|
||||
return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
|
||||
} else if (page.is_platform_page) {
|
||||
// Platform Marketing - blue
|
||||
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
|
||||
} else {
|
||||
// Vendor Default - teal
|
||||
return 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200';
|
||||
}
|
||||
},
|
||||
|
||||
// Delete a page
|
||||
async deletePage(page) {
|
||||
if (!confirm(`Are you sure you want to delete "${page.title}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
contentPagesLog.info(`Deleting page: ${page.id}`);
|
||||
|
||||
await apiClient.delete(`/admin/content-pages/${page.id}`);
|
||||
|
||||
// Remove from local array
|
||||
this.allPages = this.allPages.filter(p => p.id !== page.id);
|
||||
|
||||
contentPagesLog.info('Page deleted successfully');
|
||||
|
||||
} catch (err) {
|
||||
contentPagesLog.error('Error deleting page:', err);
|
||||
Utils.showToast(`Failed to delete page: ${err.message}`, 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// Format date helper
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '—';
|
||||
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const diffMs = now - date;
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays === 0) {
|
||||
return 'Today';
|
||||
} else if (diffDays === 1) {
|
||||
return 'Yesterday';
|
||||
} else if (diffDays < 7) {
|
||||
return `${diffDays} days ago`;
|
||||
} else {
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user