feat: add platform homepage and content management system with improved UI
Implemented a comprehensive CMS for managing platform homepage and content pages: - Platform homepage manager with template selection (default, minimal, modern) - Content pages CRUD with platform defaults and vendor overrides - Sidebar navigation for Content Management section - Dedicated API endpoints for creating, updating, deleting pages - Template support for customizable homepage layouts - Header/footer navigation integration for content pages - Comprehensive documentation for platform homepage setup - Migration script for creating initial platform pages UI improvements: - Fixed action buttons styling in content pages table to match design system - Added proper hover states, rounded corners, and better contrast - Increased button size and padding for better usability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
161
static/admin/js/content-pages.js
Normal file
161
static/admin/js/content-pages.js
Normal file
@@ -0,0 +1,161 @@
|
||||
// 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: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
|
||||
// Tabs and filters
|
||||
activeTab: 'all', // all, platform, vendor
|
||||
searchQuery: '',
|
||||
|
||||
// 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 content pages');
|
||||
await this.loadPages();
|
||||
contentPagesLog.groupEnd();
|
||||
|
||||
contentPagesLog.info('=== CONTENT PAGES MANAGER INITIALIZATION COMPLETE ===');
|
||||
},
|
||||
|
||||
// Computed: Platform pages
|
||||
get platformPages() {
|
||||
return this.allPages.filter(page => page.is_platform_default);
|
||||
},
|
||||
|
||||
// Computed: Vendor pages
|
||||
get vendorPages() {
|
||||
return this.allPages.filter(page => page.is_vendor_override);
|
||||
},
|
||||
|
||||
// Computed: Filtered pages based on active tab and search
|
||||
get filteredPages() {
|
||||
let pages = [];
|
||||
|
||||
// Filter by tab
|
||||
if (this.activeTab === 'platform') {
|
||||
pages = this.platformPages;
|
||||
} else if (this.activeTab === 'vendor') {
|
||||
pages = this.vendorPages;
|
||||
} else {
|
||||
pages = this.allPages;
|
||||
}
|
||||
|
||||
// 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))
|
||||
);
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
},
|
||||
|
||||
// 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);
|
||||
alert(`Failed to delete page: ${err.message}`);
|
||||
}
|
||||
},
|
||||
|
||||
// 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