feat: add vendor content pages management UI
- Add routes for vendor content pages list, create, and edit - Create content-pages.html with tabs for Platform Defaults and My Pages - Create content-page-edit.html for creating/editing pages - Add JavaScript for both list and edit views - Add "Content Pages" link to vendor sidebar under new "Shop" section - Add show_in_legal field to vendor content pages API schemas - Platform Defaults tab shows pages that can be overridden - My Pages tab shows vendor's custom pages and overrides Vendors can now: - View platform default pages and override them with custom content - Create entirely new custom pages for their shop - Manage navigation placement (header, footer, legal) - Publish/unpublish pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
7
app/api/v1/vendor/content_pages.py
vendored
7
app/api/v1/vendor/content_pages.py
vendored
@@ -48,6 +48,9 @@ class VendorContentPageCreate(BaseModel):
|
||||
is_published: bool = Field(default=False, description="Publish immediately")
|
||||
show_in_footer: bool = Field(default=True, description="Show in footer navigation")
|
||||
show_in_header: bool = Field(default=False, description="Show in header navigation")
|
||||
show_in_legal: bool = Field(
|
||||
default=False, description="Show in legal/bottom bar (next to copyright)"
|
||||
)
|
||||
display_order: int = Field(default=0, description="Display order (lower = first)")
|
||||
|
||||
|
||||
@@ -62,6 +65,7 @@ class VendorContentPageUpdate(BaseModel):
|
||||
is_published: bool | None = None
|
||||
show_in_footer: bool | None = None
|
||||
show_in_header: bool | None = None
|
||||
show_in_legal: bool | None = None
|
||||
display_order: int | None = None
|
||||
|
||||
|
||||
@@ -82,6 +86,7 @@ class ContentPageResponse(BaseModel):
|
||||
display_order: int
|
||||
show_in_footer: bool
|
||||
show_in_header: bool
|
||||
show_in_legal: bool
|
||||
is_platform_default: bool
|
||||
is_vendor_override: bool
|
||||
created_at: str
|
||||
@@ -188,6 +193,7 @@ def create_vendor_page(
|
||||
is_published=page_data.is_published,
|
||||
show_in_footer=page_data.show_in_footer,
|
||||
show_in_header=page_data.show_in_header,
|
||||
show_in_legal=page_data.show_in_legal,
|
||||
display_order=page_data.display_order,
|
||||
created_by=current_user.id,
|
||||
)
|
||||
@@ -224,6 +230,7 @@ def update_vendor_page(
|
||||
is_published=page_data.is_published,
|
||||
show_in_footer=page_data.show_in_footer,
|
||||
show_in_header=page_data.show_in_header,
|
||||
show_in_legal=page_data.show_in_legal,
|
||||
display_order=page_data.display_order,
|
||||
updated_by=current_user.id,
|
||||
)
|
||||
|
||||
@@ -527,6 +527,82 @@ async def vendor_billing_page(
|
||||
)
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# CONTENT PAGES MANAGEMENT
|
||||
# ============================================================================
|
||||
|
||||
|
||||
@router.get(
|
||||
"/{vendor_code}/content-pages", response_class=HTMLResponse, include_in_schema=False
|
||||
)
|
||||
async def vendor_content_pages_list(
|
||||
request: Request,
|
||||
vendor_code: str = Path(..., description="Vendor code"),
|
||||
current_user: User = Depends(get_current_vendor_from_cookie_or_header),
|
||||
):
|
||||
"""
|
||||
Render content pages management page.
|
||||
Shows platform defaults (can be overridden) and vendor custom pages.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"vendor/content-pages.html",
|
||||
{
|
||||
"request": request,
|
||||
"user": current_user,
|
||||
"vendor_code": vendor_code,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
@router.get(
|
||||
"/{vendor_code}/content-pages/create",
|
||||
response_class=HTMLResponse,
|
||||
include_in_schema=False,
|
||||
)
|
||||
async def vendor_content_page_create(
|
||||
request: Request,
|
||||
vendor_code: str = Path(..., description="Vendor code"),
|
||||
current_user: User = Depends(get_current_vendor_from_cookie_or_header),
|
||||
):
|
||||
"""
|
||||
Render content page creation form.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"vendor/content-page-edit.html",
|
||||
{
|
||||
"request": request,
|
||||
"user": current_user,
|
||||
"vendor_code": vendor_code,
|
||||
"page_id": None,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
@router.get(
|
||||
"/{vendor_code}/content-pages/{page_id}/edit",
|
||||
response_class=HTMLResponse,
|
||||
include_in_schema=False,
|
||||
)
|
||||
async def vendor_content_page_edit(
|
||||
request: Request,
|
||||
vendor_code: str = Path(..., description="Vendor code"),
|
||||
page_id: int = Path(..., description="Content page ID"),
|
||||
current_user: User = Depends(get_current_vendor_from_cookie_or_header),
|
||||
):
|
||||
"""
|
||||
Render content page edit form.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"vendor/content-page-edit.html",
|
||||
{
|
||||
"request": request,
|
||||
"user": current_user,
|
||||
"vendor_code": vendor_code,
|
||||
"page_id": page_id,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# DYNAMIC CONTENT PAGES (CMS)
|
||||
# ============================================================================
|
||||
|
||||
294
app/templates/vendor/content-page-edit.html
vendored
Normal file
294
app/templates/vendor/content-page-edit.html
vendored
Normal file
@@ -0,0 +1,294 @@
|
||||
{# app/templates/vendor/content-page-edit.html #}
|
||||
{% extends "vendor/base.html" %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state, alert_dynamic %}
|
||||
{% from 'shared/macros/headers.html' import back_button %}
|
||||
{% from 'shared/macros/inputs.html' import number_stepper %}
|
||||
|
||||
{% block title %}{% if page_id %}Edit{% else %}Create{% endif %} Content Page{% endblock %}
|
||||
|
||||
{% block alpine_data %}vendorContentPageEditor({{ page_id if page_id else 'null' }}){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{# Dynamic title/subtitle and save button text based on create vs edit mode #}
|
||||
<div class="flex items-center justify-between my-6">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="pageId ? 'Edit Content Page' : 'Create Content Page'"></h2>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
<span x-show="!pageId">Create a new custom page for your shop</span>
|
||||
<span x-show="pageId && isOverride">Customize this platform default page</span>
|
||||
<span x-show="pageId && !isOverride">Edit your custom page</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
{{ back_button('/vendor/' + vendor_code + '/content-pages', 'Back to List') }}
|
||||
<button
|
||||
@click="savePage()"
|
||||
:disabled="saving"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 border rounded-lg focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed text-white bg-purple-600 border-transparent hover:bg-purple-700 focus:shadow-outline-purple"
|
||||
>
|
||||
<span x-show="!saving" x-html="$icon('check', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="saving ? 'Saving...' : (pageId ? 'Update Page' : 'Create Page')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ loading_state('Loading page...') }}
|
||||
|
||||
{{ error_state('Error', show_condition='error && !loading') }}
|
||||
|
||||
{{ alert_dynamic(type='success', message_var='successMessage', show_condition='successMessage') }}
|
||||
|
||||
<!-- Override Info Banner -->
|
||||
<div x-show="!loading && isOverride" class="mb-6 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
|
||||
<div class="flex">
|
||||
<span x-html="$icon('information-circle', 'w-5 h-5 text-purple-500 mr-3 flex-shrink-0 mt-0.5')"></span>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-purple-800 dark:text-purple-200">Overriding Platform Default</h4>
|
||||
<p class="text-sm text-purple-700 dark:text-purple-300 mt-1">
|
||||
You're customizing the "<span x-text="form.title"></span>" page. Your version will be shown to customers instead of the platform default.
|
||||
<button @click="deletePage()" class="underline hover:no-underline ml-1">Revert to default</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Form -->
|
||||
<div x-show="!loading" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||||
<form @submit.prevent="savePage()">
|
||||
<!-- Basic Information -->
|
||||
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Basic Information
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Page Title -->
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Page Title <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.title"
|
||||
required
|
||||
maxlength="200"
|
||||
class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
|
||||
placeholder="About Our Store"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Slug -->
|
||||
<div class="md:col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
URL Slug <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="flex items-center">
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400 mr-2">/</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.slug"
|
||||
required
|
||||
maxlength="100"
|
||||
pattern="[a-z0-9\-_]+"
|
||||
:disabled="isOverride"
|
||||
class="flex-1 px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
placeholder="about-us"
|
||||
>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span x-show="!isOverride">URL-safe identifier (lowercase, numbers, hyphens, underscores only)</span>
|
||||
<span x-show="isOverride">Slug cannot be changed for override pages</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Page Content
|
||||
</h3>
|
||||
|
||||
<!-- Content Format -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Content Format
|
||||
</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" x-model="form.content_format" value="html" class="mr-2">
|
||||
<span class="text-sm">HTML</span>
|
||||
</label>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input type="radio" x-model="form.content_format" value="markdown" class="mr-2">
|
||||
<span class="text-sm">Markdown</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Editor -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Content <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
x-model="form.content"
|
||||
required
|
||||
rows="12"
|
||||
class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700 font-mono text-sm"
|
||||
placeholder="<h2>Your content here...</h2>"
|
||||
></textarea>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span x-show="form.content_format === 'html'">Enter HTML content. Basic HTML tags are supported.</span>
|
||||
<span x-show="form.content_format === 'markdown'">Enter Markdown content. Will be converted to HTML.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SEO Settings -->
|
||||
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
SEO & Metadata
|
||||
</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Meta Description -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Meta Description
|
||||
</label>
|
||||
<textarea
|
||||
x-model="form.meta_description"
|
||||
rows="2"
|
||||
maxlength="300"
|
||||
class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
|
||||
placeholder="A brief description for search engines"
|
||||
></textarea>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span x-text="(form.meta_description || '').length"></span>/300 characters (150-160 recommended)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Meta Keywords -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Meta Keywords
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="form.meta_keywords"
|
||||
maxlength="300"
|
||||
class="w-full px-3 py-2 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 dark:bg-gray-700"
|
||||
placeholder="keyword1, keyword2, keyword3"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation & Display Settings -->
|
||||
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Navigation & Display
|
||||
</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<!-- Display Order -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Display Order
|
||||
</label>
|
||||
{{ number_stepper(model='form.display_order', min=0, max=100, step=1, label='Display Order') }}
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Lower = first</p>
|
||||
</div>
|
||||
|
||||
<!-- Show in Header -->
|
||||
<div class="flex items-center">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.show_in_header"
|
||||
class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
>
|
||||
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Show in Header
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Show in Footer -->
|
||||
<div class="flex items-center">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.show_in_footer"
|
||||
class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
>
|
||||
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Show in Footer
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Show in Legal -->
|
||||
<div class="flex items-center">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.show_in_legal"
|
||||
class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
>
|
||||
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Show in Legal
|
||||
</span>
|
||||
</label>
|
||||
<span class="ml-2 text-gray-400 dark:text-gray-500 cursor-help" title="Bottom bar next to copyright">
|
||||
<span x-html="$icon('information-circle', 'w-4 h-4')"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Publishing Settings -->
|
||||
<div class="p-6 bg-gray-50 dark:bg-gray-700/50">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="form.is_published"
|
||||
class="w-5 h-5 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
|
||||
>
|
||||
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">
|
||||
Published
|
||||
</span>
|
||||
</label>
|
||||
<p class="ml-8 text-xs text-gray-500 dark:text-gray-400">
|
||||
Make this page visible to your customers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
:href="`/vendor/${vendorCode}/content-pages`"
|
||||
class="px-6 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-200 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:border-gray-400 dark:hover:border-gray-500"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
class="px-6 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span x-text="saving ? 'Saving...' : (pageId ? 'Update Page' : 'Create Page')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='vendor/js/content-page-edit.js') }}"></script>
|
||||
{% endblock %}
|
||||
283
app/templates/vendor/content-pages.html
vendored
Normal file
283
app/templates/vendor/content-pages.html
vendored
Normal file
@@ -0,0 +1,283 @@
|
||||
{# app/templates/vendor/content-pages.html #}
|
||||
{% extends "vendor/base.html" %}
|
||||
{% from 'shared/macros/headers.html' import page_header %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/tabs.html' import tabs_inline, tab_button %}
|
||||
|
||||
{% block title %}Content Pages{% endblock %}
|
||||
|
||||
{% block alpine_data %}vendorContentPagesManager(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ page_header('Content Pages', subtitle='Customize your shop pages or create new ones', action_label='Create Page', action_url='/vendor/' + vendor_code + '/content-pages/create') }}
|
||||
|
||||
{{ loading_state('Loading pages...') }}
|
||||
|
||||
{{ error_state('Error loading pages') }}
|
||||
|
||||
<!-- Tabs and Info -->
|
||||
<div x-show="!loading" class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<!-- Tabs -->
|
||||
{% call tabs_inline() %}
|
||||
{{ tab_button('platform', 'Platform Defaults', count_var='platformPages.length') }}
|
||||
{{ tab_button('custom', 'My Pages', count_var='customPages.length') }}
|
||||
{% endcall %}
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<span x-html="$icon('search', 'w-5 h-5 text-gray-400')"></span>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="searchQuery"
|
||||
placeholder="Search pages..."
|
||||
class="pl-10 pr-4 py-2 text-sm text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-purple-500"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Platform Defaults Tab -->
|
||||
<div x-show="!loading && activeTab === 'platform'" class="space-y-4">
|
||||
<!-- Info Banner -->
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<div class="flex">
|
||||
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-500 mr-3 flex-shrink-0 mt-0.5')"></span>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-blue-800 dark:text-blue-200">Platform Default Pages</h4>
|
||||
<p class="text-sm text-blue-700 dark:text-blue-300 mt-1">
|
||||
These pages are provided by the platform. You can override any of them with your own custom content.
|
||||
Your overridden version will be shown to your customers instead of the default.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Platform Pages Table -->
|
||||
<div x-show="filteredPlatformPages.length > 0" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full whitespace-nowrap">
|
||||
<thead>
|
||||
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 dark:text-gray-400">
|
||||
<th class="px-4 py-3">Page</th>
|
||||
<th class="px-4 py-3">URL</th>
|
||||
<th class="px-4 py-3">Navigation</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white dark:bg-gray-800 divide-y dark:divide-gray-700">
|
||||
<template x-for="page in filteredPlatformPages" :key="page.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
||||
<!-- Page Title -->
|
||||
<td class="px-4 py-3">
|
||||
<div>
|
||||
<p class="font-semibold text-gray-900 dark:text-white" x-text="page.title"></p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Platform Default</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- URL/Slug -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<code class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded" x-text="'/' + page.slug"></code>
|
||||
</td>
|
||||
|
||||
<!-- Navigation -->
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
<span x-show="page.show_in_header" class="px-2 py-0.5 font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-300 rounded-full">Header</span>
|
||||
<span x-show="page.show_in_footer" class="px-2 py-0.5 font-medium bg-teal-100 text-teal-800 dark:bg-teal-900/50 dark:text-teal-300 rounded-full">Footer</span>
|
||||
<span x-show="page.show_in_legal" class="px-2 py-0.5 font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300 rounded-full">Legal</span>
|
||||
<span x-show="!page.show_in_header && !page.show_in_footer && !page.show_in_legal" class="text-gray-400">—</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Status -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span x-show="hasOverride(page.slug)" class="px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 rounded-full">
|
||||
Overridden
|
||||
</span>
|
||||
<span x-show="!hasOverride(page.slug)" class="px-2 py-1 text-xs font-semibold bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 rounded-full">
|
||||
Using Default
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<!-- Override / Edit Override button -->
|
||||
<template x-if="hasOverride(page.slug)">
|
||||
<a
|
||||
:href="`/vendor/${vendorCode}/content-pages/${getOverrideId(page.slug)}/edit`"
|
||||
class="flex items-center justify-center px-3 py-1.5 text-sm font-medium text-purple-600 bg-purple-50 rounded-lg hover:bg-purple-100 dark:text-purple-400 dark:bg-purple-900/30 dark:hover:bg-purple-900/50 transition-colors"
|
||||
>
|
||||
<span x-html="$icon('edit', 'w-4 h-4 mr-1')"></span>
|
||||
Edit Override
|
||||
</a>
|
||||
</template>
|
||||
<template x-if="!hasOverride(page.slug)">
|
||||
<button
|
||||
@click="createOverride(page)"
|
||||
class="flex items-center justify-center px-3 py-1.5 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 dark:text-blue-400 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 transition-colors"
|
||||
>
|
||||
<span x-html="$icon('plus', 'w-4 h-4 mr-1')"></span>
|
||||
Override
|
||||
</button>
|
||||
</template>
|
||||
<!-- Preview button -->
|
||||
<a
|
||||
:href="`/vendors/${vendorCode}/shop/${page.slug}`"
|
||||
target="_blank"
|
||||
class="flex items-center justify-center p-2 text-gray-500 rounded-lg hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors"
|
||||
title="Preview"
|
||||
>
|
||||
<span x-html="$icon('eye', 'w-5 h-5')"></span>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div x-show="filteredPlatformPages.length === 0 && searchQuery" class="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow-md">
|
||||
<span x-html="$icon('search', 'inline w-12 h-12 text-gray-400 mb-4')"></span>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">No pages found</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
No platform pages match "<span x-text="searchQuery"></span>"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Pages Tab -->
|
||||
<div x-show="!loading && activeTab === 'custom'" class="space-y-4">
|
||||
<!-- Info Banner -->
|
||||
<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4">
|
||||
<div class="flex">
|
||||
<span x-html="$icon('plus-circle', 'w-5 h-5 text-green-500 mr-3 flex-shrink-0 mt-0.5')"></span>
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-green-800 dark:text-green-200">Your Custom Pages</h4>
|
||||
<p class="text-sm text-green-700 dark:text-green-300 mt-1">
|
||||
Create unique pages for your shop like promotions, brand story, or special information.
|
||||
These pages are exclusive to your store.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Pages Table -->
|
||||
<div x-show="filteredCustomPages.length > 0" class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full whitespace-nowrap">
|
||||
<thead>
|
||||
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 dark:text-gray-400">
|
||||
<th class="px-4 py-3">Page</th>
|
||||
<th class="px-4 py-3">URL</th>
|
||||
<th class="px-4 py-3">Navigation</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Updated</th>
|
||||
<th class="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white dark:bg-gray-800 divide-y dark:divide-gray-700">
|
||||
<template x-for="page in filteredCustomPages" :key="page.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
||||
<!-- Page Title -->
|
||||
<td class="px-4 py-3">
|
||||
<div>
|
||||
<p class="font-semibold text-gray-900 dark:text-white" x-text="page.title"></p>
|
||||
<p x-show="page.is_vendor_override" class="text-xs text-purple-600 dark:text-purple-400">Override of platform default</p>
|
||||
<p x-show="!page.is_vendor_override" class="text-xs text-green-600 dark:text-green-400">Custom page</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- URL/Slug -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<code class="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 rounded" x-text="'/' + page.slug"></code>
|
||||
</td>
|
||||
|
||||
<!-- Navigation -->
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
<span x-show="page.show_in_header" class="px-2 py-0.5 font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-300 rounded-full">Header</span>
|
||||
<span x-show="page.show_in_footer" class="px-2 py-0.5 font-medium bg-teal-100 text-teal-800 dark:bg-teal-900/50 dark:text-teal-300 rounded-full">Footer</span>
|
||||
<span x-show="page.show_in_legal" class="px-2 py-0.5 font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300 rounded-full">Legal</span>
|
||||
<span x-show="!page.show_in_header && !page.show_in_footer && !page.show_in_legal" class="text-gray-400">—</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Status -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-semibold rounded-full"
|
||||
:class="page.is_published ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'"
|
||||
x-text="page.is_published ? 'Published' : 'Draft'"
|
||||
></span>
|
||||
</td>
|
||||
|
||||
<!-- Updated -->
|
||||
<td class="px-4 py-3 text-xs" x-text="formatDate(page.updated_at)"></td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<a
|
||||
:href="`/vendor/${vendorCode}/content-pages/${page.id}/edit`"
|
||||
class="flex items-center justify-center p-2 text-purple-600 rounded-lg hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<span x-html="$icon('edit', 'w-5 h-5')"></span>
|
||||
</a>
|
||||
<a
|
||||
:href="`/vendors/${vendorCode}/shop/${page.slug}`"
|
||||
target="_blank"
|
||||
class="flex items-center justify-center p-2 text-gray-500 rounded-lg hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors"
|
||||
title="Preview"
|
||||
>
|
||||
<span x-html="$icon('eye', 'w-5 h-5')"></span>
|
||||
</a>
|
||||
<button
|
||||
@click="deletePage(page)"
|
||||
class="flex items-center justify-center p-2 text-red-600 rounded-lg hover:bg-red-50 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-none transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<span x-html="$icon('delete', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div x-show="filteredCustomPages.length === 0" class="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow-md">
|
||||
<span x-html="$icon('document-text', 'inline w-16 h-16 text-gray-400 mb-4')"></span>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2" x-text="searchQuery ? 'No pages found' : 'No custom pages yet'"></h3>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-4" x-show="searchQuery">
|
||||
No custom pages match "<span x-text="searchQuery"></span>"
|
||||
</p>
|
||||
<p class="text-gray-500 dark:text-gray-400 mb-4" x-show="!searchQuery">
|
||||
Create your first custom page or override a platform default.
|
||||
</p>
|
||||
<a
|
||||
:href="`/vendor/${vendorCode}/content-pages/create`"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
|
||||
>
|
||||
<span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
|
||||
Create Page
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='vendor/js/content-pages.js') }}"></script>
|
||||
{% endblock %}
|
||||
23
app/templates/vendor/partials/sidebar.html
vendored
23
app/templates/vendor/partials/sidebar.html
vendored
@@ -141,6 +141,29 @@ Follows same pattern as admin sidebar
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Shop Customization Section -->
|
||||
<div class="px-6 my-6">
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon('paint-brush', 'w-5 h-5 text-gray-400')"></span>
|
||||
<span class="ml-2 text-xs font-semibold text-gray-500 uppercase dark:text-gray-400">
|
||||
Shop
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="relative px-6 py-3">
|
||||
<span x-show="currentPage === 'content-pages'"
|
||||
class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
|
||||
aria-hidden="true"></span>
|
||||
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
|
||||
:class="currentPage === 'content-pages' ? 'text-gray-800 dark:text-gray-100' : ''"
|
||||
:href="`/vendor/${vendorCode}/content-pages`">
|
||||
<span x-html="$icon('document-text', 'w-5 h-5')"></span>
|
||||
<span class="ml-4">Content Pages</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Settings Section -->
|
||||
<div class="px-6 my-6">
|
||||
<div class="flex items-center">
|
||||
|
||||
196
static/vendor/js/content-page-edit.js
vendored
Normal file
196
static/vendor/js/content-page-edit.js
vendored
Normal file
@@ -0,0 +1,196 @@
|
||||
// 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,
|
||||
|
||||
// Initialize
|
||||
async init() {
|
||||
contentPageEditLog.info('=== VENDOR CONTENT PAGE EDITOR INITIALIZING ===');
|
||||
contentPageEditLog.info('Page ID:', this.pageId);
|
||||
|
||||
// Prevent multiple initializations
|
||||
if (window._vendorContentPageEditInitialized) {
|
||||
contentPageEditLog.warn('Content page editor already initialized, skipping...');
|
||||
return;
|
||||
}
|
||||
window._vendorContentPageEditInitialized = true;
|
||||
|
||||
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 ===');
|
||||
},
|
||||
|
||||
// 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;
|
||||
}
|
||||
},
|
||||
|
||||
// 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';
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
192
static/vendor/js/content-pages.js
vendored
Normal file
192
static/vendor/js/content-pages.js
vendored
Normal file
@@ -0,0 +1,192 @@
|
||||
// static/vendor/js/content-pages.js
|
||||
|
||||
// Use centralized logger
|
||||
const contentPagesLog = window.LogConfig.loggers.contentPages || window.LogConfig.createLogger('contentPages');
|
||||
|
||||
// ============================================
|
||||
// VENDOR CONTENT PAGES MANAGER
|
||||
// ============================================
|
||||
function vendorContentPagesManager() {
|
||||
return {
|
||||
// Inherit base layout functionality from init-alpine.js
|
||||
...data(),
|
||||
|
||||
// Page identifier for sidebar active state
|
||||
currentPage: 'content-pages',
|
||||
|
||||
// State
|
||||
loading: false,
|
||||
error: null,
|
||||
activeTab: 'platform',
|
||||
searchQuery: '',
|
||||
|
||||
// Data
|
||||
platformPages: [], // Platform default pages
|
||||
customPages: [], // Vendor's own pages (overrides + custom)
|
||||
overrideMap: {}, // Map of slug -> page id for quick lookup
|
||||
|
||||
// Initialize
|
||||
async init() {
|
||||
contentPagesLog.info('=== VENDOR CONTENT PAGES MANAGER INITIALIZING ===');
|
||||
|
||||
// Prevent multiple initializations
|
||||
if (window._vendorContentPagesInitialized) {
|
||||
contentPagesLog.warn('Content pages manager already initialized, skipping...');
|
||||
return;
|
||||
}
|
||||
window._vendorContentPagesInitialized = true;
|
||||
|
||||
await this.loadPages();
|
||||
|
||||
contentPagesLog.info('=== VENDOR CONTENT PAGES MANAGER INITIALIZATION COMPLETE ===');
|
||||
},
|
||||
|
||||
// Load all pages
|
||||
async loadPages() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
contentPagesLog.info('Loading content pages...');
|
||||
|
||||
// Load platform defaults and vendor pages in parallel
|
||||
const [platformResponse, vendorResponse] = await Promise.all([
|
||||
apiClient.get('/vendor/content-pages/'),
|
||||
apiClient.get('/vendor/content-pages/overrides')
|
||||
]);
|
||||
|
||||
// Platform pages - filter to only show actual platform defaults
|
||||
const allPages = platformResponse.data || platformResponse || [];
|
||||
this.platformPages = allPages.filter(p => p.is_platform_default);
|
||||
|
||||
// Vendor's custom pages (includes overrides)
|
||||
this.customPages = vendorResponse.data || vendorResponse || [];
|
||||
|
||||
// Build override map for quick lookups
|
||||
this.overrideMap = {};
|
||||
this.customPages.forEach(page => {
|
||||
if (page.is_vendor_override) {
|
||||
this.overrideMap[page.slug] = page.id;
|
||||
}
|
||||
});
|
||||
|
||||
contentPagesLog.info(`Loaded ${this.platformPages.length} platform pages, ${this.customPages.length} vendor pages`);
|
||||
|
||||
} catch (err) {
|
||||
contentPagesLog.error('Error loading pages:', err);
|
||||
this.error = err.message || 'Failed to load pages';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Check if vendor has overridden a platform page
|
||||
hasOverride(slug) {
|
||||
return slug in this.overrideMap;
|
||||
},
|
||||
|
||||
// Get override page ID
|
||||
getOverrideId(slug) {
|
||||
return this.overrideMap[slug];
|
||||
},
|
||||
|
||||
// Create an override for a platform page
|
||||
async createOverride(platformPage) {
|
||||
contentPagesLog.info('Creating override for:', platformPage.slug);
|
||||
|
||||
try {
|
||||
// Create a new vendor page with the same slug as the platform page
|
||||
const payload = {
|
||||
slug: platformPage.slug,
|
||||
title: platformPage.title,
|
||||
content: platformPage.content,
|
||||
content_format: platformPage.content_format || 'html',
|
||||
meta_description: platformPage.meta_description,
|
||||
meta_keywords: platformPage.meta_keywords,
|
||||
is_published: true,
|
||||
show_in_header: platformPage.show_in_header,
|
||||
show_in_footer: platformPage.show_in_footer,
|
||||
display_order: platformPage.display_order
|
||||
};
|
||||
|
||||
const response = await apiClient.post('/vendor/content-pages/', payload);
|
||||
const newPage = response.data || response;
|
||||
|
||||
contentPagesLog.info('Override created:', newPage.id);
|
||||
|
||||
// Redirect to edit the new page
|
||||
window.location.href = `/vendor/${this.vendorCode}/content-pages/${newPage.id}/edit`;
|
||||
|
||||
} catch (err) {
|
||||
contentPagesLog.error('Error creating override:', err);
|
||||
this.error = err.message || 'Failed to create override';
|
||||
}
|
||||
},
|
||||
|
||||
// Delete a page
|
||||
async deletePage(page) {
|
||||
const message = page.is_vendor_override
|
||||
? `Are you sure you want to delete your override for "${page.title}"? The platform default will be shown instead.`
|
||||
: `Are you sure you want to delete "${page.title}"? This cannot be undone.`;
|
||||
|
||||
if (!confirm(message)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
contentPagesLog.info('Deleting page:', page.id);
|
||||
|
||||
await apiClient.delete(`/vendor/content-pages/${page.id}`);
|
||||
|
||||
// Remove from local state
|
||||
this.customPages = this.customPages.filter(p => p.id !== page.id);
|
||||
|
||||
// Update override map
|
||||
if (page.is_vendor_override) {
|
||||
delete this.overrideMap[page.slug];
|
||||
}
|
||||
|
||||
contentPagesLog.info('Page deleted successfully');
|
||||
|
||||
} catch (err) {
|
||||
contentPagesLog.error('Error deleting page:', err);
|
||||
this.error = err.message || 'Failed to delete page';
|
||||
}
|
||||
},
|
||||
|
||||
// Filtered platform pages based on search
|
||||
get filteredPlatformPages() {
|
||||
if (!this.searchQuery) {
|
||||
return this.platformPages;
|
||||
}
|
||||
const query = this.searchQuery.toLowerCase();
|
||||
return this.platformPages.filter(page =>
|
||||
page.title.toLowerCase().includes(query) ||
|
||||
page.slug.toLowerCase().includes(query)
|
||||
);
|
||||
},
|
||||
|
||||
// Filtered custom pages based on search
|
||||
get filteredCustomPages() {
|
||||
if (!this.searchQuery) {
|
||||
return this.customPages;
|
||||
}
|
||||
const query = this.searchQuery.toLowerCase();
|
||||
return this.customPages.filter(page =>
|
||||
page.title.toLowerCase().includes(query) ||
|
||||
page.slug.toLowerCase().includes(query)
|
||||
);
|
||||
},
|
||||
|
||||
// Format date for display
|
||||
formatDate(dateStr) {
|
||||
if (!dateStr) return '—';
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('en-GB', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user