feat: add platform detail/edit admin UI and service enhancements
- Add platform detail and edit admin pages with templates and JS - Add ContentPageService methods: list_all_platform_pages, list_all_vendor_defaults - Deprecate /admin/platform-homepage route (redirects to /admin/platforms) - Add migration to fix content_page nullable columns - Refine platform and vendor context middleware - Add platform context middleware unit tests - Update platforms.js with improved functionality - Add section-based homepage plan documentation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -69,7 +69,6 @@ class BasePlatformConfig(ABC):
|
||||
"""
|
||||
return [
|
||||
"home",
|
||||
"platform_homepage",
|
||||
"pricing",
|
||||
"about",
|
||||
"contact",
|
||||
|
||||
@@ -1116,23 +1116,21 @@ async def admin_platform_edit(
|
||||
# ============================================================================
|
||||
|
||||
|
||||
@router.get("/platform-homepage", response_class=HTMLResponse, include_in_schema=False)
|
||||
@router.get("/platform-homepage", include_in_schema=False)
|
||||
async def admin_platform_homepage_manager(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_admin_from_cookie_or_header),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Render platform homepage manager.
|
||||
Allows editing the main platform homepage with template selection.
|
||||
Deprecated: Redirects to platforms page.
|
||||
|
||||
Platform homepages are now managed via:
|
||||
- /admin/platforms → Select platform → Homepage button
|
||||
- Or directly: /admin/content-pages?platform_code={code}&slug=home
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"admin/platform-homepage.html",
|
||||
{
|
||||
"request": request,
|
||||
"user": current_user,
|
||||
},
|
||||
)
|
||||
from starlette.responses import RedirectResponse
|
||||
return RedirectResponse(url="/admin/platforms", status_code=302)
|
||||
|
||||
|
||||
@router.get("/content-pages", response_class=HTMLResponse, include_in_schema=False)
|
||||
|
||||
@@ -158,18 +158,13 @@ async def homepage(
|
||||
return RedirectResponse(url="/shop/", status_code=302)
|
||||
|
||||
# Scenario 2: Platform marketing site (no vendor)
|
||||
# Try to load platform homepage from CMS
|
||||
# Load platform homepage from CMS (slug='home')
|
||||
platform_id = platform.id if platform else 1
|
||||
|
||||
cms_homepage = content_page_service.get_platform_page(
|
||||
db, platform_id=platform_id, slug="home", include_unpublished=False
|
||||
)
|
||||
|
||||
if not cms_homepage:
|
||||
cms_homepage = content_page_service.get_platform_page(
|
||||
db, platform_id=platform_id, slug="platform_homepage", include_unpublished=False
|
||||
)
|
||||
|
||||
if cms_homepage:
|
||||
# Use CMS-based homepage with template selection
|
||||
context = get_platform_context(request, db)
|
||||
|
||||
@@ -305,6 +305,66 @@ class ContentPageService:
|
||||
.all()
|
||||
)
|
||||
|
||||
@staticmethod
|
||||
def list_all_platform_pages(
|
||||
db: Session,
|
||||
include_unpublished: bool = False,
|
||||
) -> list[ContentPage]:
|
||||
"""
|
||||
List all platform marketing pages across all platforms (for admin use).
|
||||
|
||||
Args:
|
||||
db: Database session
|
||||
include_unpublished: Include draft pages
|
||||
|
||||
Returns:
|
||||
List of all platform marketing ContentPage objects
|
||||
"""
|
||||
filters = [
|
||||
ContentPage.vendor_id.is_(None),
|
||||
ContentPage.is_platform_page.is_(True),
|
||||
]
|
||||
|
||||
if not include_unpublished:
|
||||
filters.append(ContentPage.is_published.is_(True))
|
||||
|
||||
return (
|
||||
db.query(ContentPage)
|
||||
.filter(and_(*filters))
|
||||
.order_by(ContentPage.platform_id, ContentPage.display_order, ContentPage.title)
|
||||
.all()
|
||||
)
|
||||
|
||||
@staticmethod
|
||||
def list_all_vendor_defaults(
|
||||
db: Session,
|
||||
include_unpublished: bool = False,
|
||||
) -> list[ContentPage]:
|
||||
"""
|
||||
List all vendor default pages across all platforms (for admin use).
|
||||
|
||||
Args:
|
||||
db: Database session
|
||||
include_unpublished: Include draft pages
|
||||
|
||||
Returns:
|
||||
List of all vendor default ContentPage objects
|
||||
"""
|
||||
filters = [
|
||||
ContentPage.vendor_id.is_(None),
|
||||
ContentPage.is_platform_page.is_(False),
|
||||
]
|
||||
|
||||
if not include_unpublished:
|
||||
filters.append(ContentPage.is_published.is_(True))
|
||||
|
||||
return (
|
||||
db.query(ContentPage)
|
||||
.filter(and_(*filters))
|
||||
.order_by(ContentPage.platform_id, ContentPage.display_order, ContentPage.title)
|
||||
.all()
|
||||
)
|
||||
|
||||
# =========================================================================
|
||||
# CRUD Methods
|
||||
# =========================================================================
|
||||
|
||||
@@ -32,7 +32,8 @@
|
||||
<div class="relative">
|
||||
<select
|
||||
x-model="selectedPlatform"
|
||||
class="pl-3 pr-8 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 appearance-none cursor-pointer"
|
||||
class="pl-3 pr-8 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 cursor-pointer"
|
||||
style="appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none;"
|
||||
>
|
||||
<option value="">All Platforms</option>
|
||||
<template x-for="platform in platforms" :key="platform.id">
|
||||
|
||||
@@ -105,7 +105,6 @@
|
||||
{{ section_header('Content Management', 'contentMgmt') }}
|
||||
{% call section_content('contentMgmt') %}
|
||||
{{ menu_item('platforms', '/admin/platforms', 'globe-alt', 'Platforms') }}
|
||||
{{ menu_item('platform-homepage', '/admin/platform-homepage', 'home', 'Platform Homepage') }}
|
||||
{{ menu_item('content-pages', '/admin/content-pages', 'document-text', 'Content Pages') }}
|
||||
{{ menu_item('vendor-theme', '/admin/vendor-themes', 'color-swatch', 'Vendor Themes') }}
|
||||
{% endcall %}
|
||||
|
||||
270
app/templates/admin/platform-detail.html
Normal file
270
app/templates/admin/platform-detail.html
Normal file
@@ -0,0 +1,270 @@
|
||||
{# app/templates/admin/platform-detail.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
||||
{% from 'shared/macros/headers.html' import page_header %}
|
||||
|
||||
{% block title %}Platform Details{% endblock %}
|
||||
|
||||
{% block alpine_data %}platformDetail(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Header with Back Button -->
|
||||
<div class="flex items-center justify-between my-6">
|
||||
<div class="flex items-center">
|
||||
<a href="/admin/platforms" class="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<span x-html="$icon('arrow-left', 'w-5 h-5 text-gray-600 dark:text-gray-400')"></span>
|
||||
</a>
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon(getPlatformIcon(platformCode), 'w-8 h-8 text-purple-600 dark:text-purple-400 mr-3')"></span>
|
||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200" x-text="platform?.name || 'Loading...'"></h2>
|
||||
<code class="ml-3 text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="platformCode"></code>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="platform?.description || ''"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Status Badges -->
|
||||
<span
|
||||
x-show="platform?.is_active"
|
||||
class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
||||
Active
|
||||
</span>
|
||||
<span
|
||||
x-show="!platform?.is_active"
|
||||
class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
|
||||
Inactive
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ loading_state('Loading platform details...') }}
|
||||
{{ error_state('Error loading platform') }}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div x-show="!loading && platform" class="space-y-6">
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Actions</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<!-- Edit Settings -->
|
||||
<a :href="`/admin/platforms/${platformCode}/edit`"
|
||||
class="flex items-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors">
|
||||
<span x-html="$icon('cog', 'w-8 h-8 text-purple-600 dark:text-purple-400')"></span>
|
||||
<div class="ml-3">
|
||||
<p class="font-semibold text-gray-900 dark:text-white">Edit Settings</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Branding, domain, languages</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Edit Homepage -->
|
||||
<a :href="`/admin/content-pages?platform_code=${platformCode}&slug=home`"
|
||||
class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors">
|
||||
<span x-html="$icon('home', 'w-8 h-8 text-blue-600 dark:text-blue-400')"></span>
|
||||
<div class="ml-3">
|
||||
<p class="font-semibold text-gray-900 dark:text-white">Edit Homepage</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Platform landing page</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Manage Pages -->
|
||||
<a :href="`/admin/content-pages?platform_code=${platformCode}`"
|
||||
class="flex items-center p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg hover:bg-teal-100 dark:hover:bg-teal-900/40 transition-colors">
|
||||
<span x-html="$icon('document-text', 'w-8 h-8 text-teal-600 dark:text-teal-400')"></span>
|
||||
<div class="ml-3">
|
||||
<p class="font-semibold text-gray-900 dark:text-white">Manage Pages</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">All content pages</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- View Platform -->
|
||||
<a :href="getPlatformUrl()" target="_blank"
|
||||
class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<span x-html="$icon('external-link', 'w-8 h-8 text-gray-600 dark:text-gray-400')"></span>
|
||||
<div class="ml-3">
|
||||
<p class="font-semibold text-gray-900 dark:text-white">View Platform</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Open in new tab</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<!-- Vendors -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Vendors</p>
|
||||
<p class="text-3xl font-bold text-purple-600 dark:text-purple-400" x-text="platform?.vendor_count || 0"></p>
|
||||
</div>
|
||||
<div class="p-3 bg-purple-100 dark:bg-purple-900/50 rounded-full">
|
||||
<span x-html="$icon('building-storefront', 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Marketing Pages -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Marketing Pages</p>
|
||||
<p class="text-3xl font-bold text-blue-600 dark:text-blue-400" x-text="platform?.platform_pages_count || 0"></p>
|
||||
</div>
|
||||
<div class="p-3 bg-blue-100 dark:bg-blue-900/50 rounded-full">
|
||||
<span x-html="$icon('megaphone', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vendor Defaults -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Vendor Defaults</p>
|
||||
<p class="text-3xl font-bold text-teal-600 dark:text-teal-400" x-text="platform?.vendor_defaults_count || 0"></p>
|
||||
</div>
|
||||
<div class="p-3 bg-teal-100 dark:bg-teal-900/50 rounded-full">
|
||||
<span x-html="$icon('document-duplicate', 'w-6 h-6 text-teal-600 dark:text-teal-400')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Language -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Default Language</p>
|
||||
<p class="text-3xl font-bold text-gray-700 dark:text-gray-300" x-text="platform?.default_language?.toUpperCase() || '—'"></p>
|
||||
</div>
|
||||
<div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-full">
|
||||
<span x-html="$icon('language', 'w-6 h-6 text-gray-600 dark:text-gray-400')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Platform Configuration -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Routing Info -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Routing Configuration</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<span class="text-gray-600 dark:text-gray-400">Production Domain</span>
|
||||
<code x-show="platform?.domain" class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="platform?.domain"></code>
|
||||
<span x-show="!platform?.domain" class="text-gray-400 dark:text-gray-500 text-sm">Not configured</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<span class="text-gray-600 dark:text-gray-400">Dev Path Prefix</span>
|
||||
<code x-show="platform?.path_prefix" class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="`/platforms/${platform?.path_prefix}/`"></code>
|
||||
<span x-show="!platform?.path_prefix" class="text-gray-400 dark:text-gray-500 text-sm">Root path</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2">
|
||||
<span class="text-gray-600 dark:text-gray-400">Supported Languages</span>
|
||||
<div class="flex gap-1">
|
||||
<template x-for="lang in (platform?.supported_languages || [])" :key="lang">
|
||||
<span class="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded" x-text="lang.toUpperCase()"></span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Branding -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Branding</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<span class="text-gray-600 dark:text-gray-400">Logo</span>
|
||||
<template x-if="platform?.logo">
|
||||
<img :src="platform.logo" alt="Logo" class="h-8 max-w-32 object-contain">
|
||||
</template>
|
||||
<span x-show="!platform?.logo" class="text-gray-400 dark:text-gray-500 text-sm">Not configured</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<span class="text-gray-600 dark:text-gray-400">Logo (Dark)</span>
|
||||
<template x-if="platform?.logo_dark">
|
||||
<img :src="platform.logo_dark" alt="Logo Dark" class="h-8 max-w-32 object-contain bg-gray-800 rounded p-1">
|
||||
</template>
|
||||
<span x-show="!platform?.logo_dark" class="text-gray-400 dark:text-gray-500 text-sm">Not configured</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-2">
|
||||
<span class="text-gray-600 dark:text-gray-400">Favicon</span>
|
||||
<template x-if="platform?.favicon">
|
||||
<img :src="platform.favicon" alt="Favicon" class="h-6 w-6 object-contain">
|
||||
</template>
|
||||
<span x-show="!platform?.favicon" class="text-gray-400 dark:text-gray-500 text-sm">Not configured</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Pages -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Content Pages</h3>
|
||||
<a :href="`/admin/content-pages?platform_code=${platformCode}`"
|
||||
class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300">
|
||||
View All →
|
||||
</a>
|
||||
</div>
|
||||
<div x-show="recentPages.length > 0">
|
||||
<table class="w-full">
|
||||
<thead class="bg-gray-50 dark:bg-gray-700/50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Title</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Slug</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Type</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<template x-for="page in recentPages" :key="page.id">
|
||||
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
||||
<td class="px-6 py-4">
|
||||
<a :href="`/admin/content-pages/${page.id}/edit`"
|
||||
class="text-gray-900 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 font-medium"
|
||||
x-text="page.title"></a>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="page.slug"></code>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 text-xs font-semibold rounded-full"
|
||||
:class="getPageTypeBadgeClass(page)"
|
||||
x-text="getPageTypeLabel(page)"></span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span x-show="page.is_published" class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Published</span>
|
||||
<span x-show="!page.is_published" class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Draft</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(page.updated_at)"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div x-show="recentPages.length === 0" class="p-6 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('document-text', 'w-12 h-12 mx-auto mb-2 opacity-50')"></span>
|
||||
<p>No content pages yet.</p>
|
||||
<a :href="`/admin/content-pages/create?platform_code=${platformCode}`"
|
||||
class="inline-block mt-2 text-purple-600 hover:text-purple-700 dark:text-purple-400">
|
||||
Create your first page →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timestamps -->
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p>Created: <span x-text="formatDate(platform?.created_at)"></span></p>
|
||||
<p>Last Updated: <span x-text="formatDate(platform?.updated_at)"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="/static/admin/js/platform-detail.js"></script>
|
||||
{% endblock %}
|
||||
324
app/templates/admin/platform-edit.html
Normal file
324
app/templates/admin/platform-edit.html
Normal file
@@ -0,0 +1,324 @@
|
||||
{# app/templates/admin/platform-edit.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/alerts.html' import loading_state %}
|
||||
{% from 'shared/macros/headers.html' import edit_page_header %}
|
||||
|
||||
{% block title %}Edit Platform{% endblock %}
|
||||
|
||||
{% block alpine_data %}platformEdit(){% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% call edit_page_header('Edit Platform', '/admin/platforms', subtitle_show='platform', back_label='Back to Platforms') %}
|
||||
<span x-text="platform?.name"></span>
|
||||
<span class="text-gray-400">•</span>
|
||||
<code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="platform?.code"></code>
|
||||
{% endcall %}
|
||||
|
||||
{{ loading_state('Loading platform...', show_condition='loading') }}
|
||||
|
||||
<!-- Error State -->
|
||||
<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg dark:bg-red-900/50 dark:border-red-600 dark:text-red-200">
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon('exclamation-circle', 'w-5 h-5 mr-2')"></span>
|
||||
<span x-text="error"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success State -->
|
||||
<div x-show="success" x-transition class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg dark:bg-green-900/50 dark:border-green-600 dark:text-green-200">
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon('check-circle', 'w-5 h-5 mr-2')"></span>
|
||||
<span x-text="success"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Form -->
|
||||
<div x-show="!loading && platform">
|
||||
<!-- Quick Actions Card -->
|
||||
<div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Quick Actions
|
||||
</h3>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button
|
||||
@click="toggleActive()"
|
||||
:disabled="saving"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
:class="formData.is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'">
|
||||
<span x-html="$icon(formData.is_active ? 'pause' : 'play', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="formData.is_active ? 'Deactivate' : 'Activate'"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="togglePublic()"
|
||||
:disabled="saving"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 rounded-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
:class="formData.is_public ? 'bg-orange-600 hover:bg-orange-700' : 'bg-blue-600 hover:bg-blue-700'">
|
||||
<span x-html="$icon(formData.is_public ? 'eye-off' : 'eye', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="formData.is_public ? 'Make Private' : 'Make Public'"></span>
|
||||
</button>
|
||||
|
||||
<!-- Status Badges -->
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<span
|
||||
x-show="formData.is_active"
|
||||
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
||||
<span x-html="$icon('check-circle', 'w-3 h-3 mr-1')"></span>
|
||||
Active
|
||||
</span>
|
||||
<span
|
||||
x-show="!formData.is_active"
|
||||
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
|
||||
<span x-html="$icon('x-circle', 'w-3 h-3 mr-1')"></span>
|
||||
Inactive
|
||||
</span>
|
||||
<span
|
||||
x-show="formData.is_public"
|
||||
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
|
||||
<span x-html="$icon('globe-alt', 'w-3 h-3 mr-1')"></span>
|
||||
Public
|
||||
</span>
|
||||
<span
|
||||
x-show="!formData.is_public"
|
||||
class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-gray-700 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-100">
|
||||
<span x-html="$icon('lock-closed', 'w-3 h-3 mr-1')"></span>
|
||||
Private
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
||||
<!-- Left Column: Basic Info -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Basic Information
|
||||
</h3>
|
||||
|
||||
<!-- Platform Code (readonly) -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Platform Code
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
:value="platform?.code || ''"
|
||||
disabled
|
||||
class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
|
||||
>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Cannot be changed after creation
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Name -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Platform Name <span class="text-red-600">*</span>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.name"
|
||||
required
|
||||
maxlength="100"
|
||||
:disabled="saving"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
:class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
|
||||
>
|
||||
<span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
|
||||
</label>
|
||||
|
||||
<!-- Description -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Description
|
||||
</span>
|
||||
<textarea
|
||||
x-model="formData.description"
|
||||
rows="3"
|
||||
maxlength="500"
|
||||
:disabled="saving"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<!-- Default Language -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Default Language
|
||||
</span>
|
||||
<select
|
||||
x-model="formData.default_language"
|
||||
:disabled="saving"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-select"
|
||||
>
|
||||
<template x-for="lang in availableLanguages" :key="lang.code">
|
||||
<option :value="lang.code" x-text="lang.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<!-- Supported Languages -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Supported Languages
|
||||
</span>
|
||||
<div class="mt-2 flex flex-wrap gap-2">
|
||||
<template x-for="lang in availableLanguages" :key="lang.code">
|
||||
<button
|
||||
type="button"
|
||||
@click="toggleLanguage(lang.code)"
|
||||
:disabled="saving"
|
||||
class="px-3 py-1 text-sm rounded-full transition-colors"
|
||||
:class="isLanguageSupported(lang.code)
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
|
||||
>
|
||||
<span x-text="lang.name"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Routing & Branding -->
|
||||
<div>
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Routing & Branding
|
||||
</h3>
|
||||
|
||||
<!-- Domain -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Production Domain
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.domain"
|
||||
placeholder="e.g., oms.lu"
|
||||
:disabled="saving"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Domain used in production for this platform
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Path Prefix -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Development Path Prefix
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="formData.path_prefix"
|
||||
placeholder="e.g., oms"
|
||||
:disabled="saving"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
||||
Used for /platforms/{prefix}/ routing in development
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<!-- Logo URL -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Logo URL (Light Mode)
|
||||
</span>
|
||||
<input
|
||||
type="url"
|
||||
x-model="formData.logo"
|
||||
placeholder="https://..."
|
||||
:disabled="saving"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
>
|
||||
</label>
|
||||
|
||||
<!-- Logo Dark URL -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Logo URL (Dark Mode)
|
||||
</span>
|
||||
<input
|
||||
type="url"
|
||||
x-model="formData.logo_dark"
|
||||
placeholder="https://..."
|
||||
:disabled="saving"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
>
|
||||
</label>
|
||||
|
||||
<!-- Favicon URL -->
|
||||
<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">
|
||||
Favicon URL
|
||||
</span>
|
||||
<input
|
||||
type="url"
|
||||
x-model="formData.favicon"
|
||||
placeholder="https://..."
|
||||
:disabled="saving"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Platform Stats (Read Only) -->
|
||||
<div class="mb-8 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Platform Statistics
|
||||
</h3>
|
||||
<div class="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-purple-600 dark:text-purple-400" x-text="platform?.vendor_count || 0"></p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Vendors</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="platform?.platform_pages_count || 0"></p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Marketing Pages</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-teal-600 dark:text-teal-400" x-text="platform?.vendor_defaults_count || 0"></p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Vendor Defaults</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<a
|
||||
href="/admin/platforms"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
>
|
||||
Cancel
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="saving"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
>
|
||||
<span x-show="saving" x-html="$icon('refresh', 'w-4 h-4 mr-2 animate-spin')"></span>
|
||||
<span x-text="saving ? 'Saving...' : 'Save Changes'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Timestamps -->
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<p>
|
||||
Created: <span x-text="formatDate(platform?.created_at)"></span>
|
||||
</p>
|
||||
<p>
|
||||
Last Updated: <span x-text="formatDate(platform?.updated_at)"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="/static/admin/js/platform-edit.js"></script>
|
||||
{% endblock %}
|
||||
@@ -89,9 +89,17 @@
|
||||
</a>
|
||||
<div class="flex space-x-2">
|
||||
<a
|
||||
:href="`/admin/content-pages?platform=${platform.code}`"
|
||||
:href="`/admin/content-pages?platform_code=${platform.code}&slug=home`"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
title="View content pages for this platform"
|
||||
title="Edit platform homepage"
|
||||
>
|
||||
<span x-html="$icon('home', 'w-4 h-4 mr-1')"></span>
|
||||
Homepage
|
||||
</a>
|
||||
<a
|
||||
:href="`/admin/content-pages?platform_code=${platform.code}`"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
|
||||
title="View all content pages for this platform"
|
||||
>
|
||||
<span x-html="$icon('document-text', 'w-4 h-4 mr-1')"></span>
|
||||
Pages
|
||||
@@ -101,8 +109,8 @@
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
|
||||
title="Edit platform settings"
|
||||
>
|
||||
<span x-html="$icon('edit', 'w-4 h-4 mr-1')"></span>
|
||||
Edit
|
||||
<span x-html="$icon('cog', 'w-4 h-4 mr-1')"></span>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user