sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate Quill rich text editor in admin templates

Browse Source 
- Add Quill editor to content-page-edit.html
- Add Quill editor to vendor-product-edit.html
- Add Quill snow theme CSS
- Update background-tasks.html and platform-homepage.html templates

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-01-13 20:37:54 +01:00
parent 29a3bf3989
commit 013d8e3d10
5 changed files with 165 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
app/templates/admin/vendor-product-edit.html
View File

@@ -3,11 +3,20 @@
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/headers.html' import detail_page_header %}
{% from 'shared/macros/modals.html' import media_picker_modal %}
{% from 'shared/macros/richtext.html' import quill_css, quill_js, quill_editor %}
{% block title %}Edit Vendor Product{% endblock %}
{% block alpine_data %}adminVendorProductEdit(){% endblock %}
{% block quill_css %}
{{ quill_css() }}
{% endblock %}
{% block quill_script %}
{{ quill_js() }}
{% endblock %}
{% block content %}
{% call detail_page_header("'Edit: ' + (product?.vendor_translations?.en?.title || 'Product')", '/admin/vendor-products', subtitle_show='product') %}
<span x-text="product?.vendor_name || 'Unknown Vendor'"></span>
@@ -41,35 +50,99 @@
</nav>
</div>
<!-- Translation Fields -->
<template x-for="lang in ['en', 'fr', 'de', 'lu']" :key="lang">
<div x-show="activeLanguage === lang" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Title (<span x-text="lang.toUpperCase()"></span>) <span class="text-red-500">*</span>
</label>
<input
type="text"
x-model="form.translations[lang].title"
:required="lang === 'en'"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Product title"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Description (<span x-text="lang.toUpperCase()"></span>) <span class="text-red-500">*</span>
</label>
<textarea
x-model="form.translations[lang].description"
rows="5"
:required="lang === 'en'"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Product description"
></textarea>
</div>
<!-- Translation Fields - English -->
<div x-show="activeLanguage === 'en'" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Title (EN) <span class="text-red-500">*</span>
</label>
<input
type="text"
x-model="form.translations.en.title"
required
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Product title"
/>
</div>
</template>
{{ quill_editor(
id='desc-editor-en',
model='form.translations.en.description',
label='Description (EN)',
required=true,
placeholder='Enter product description in English...',
min_height='150px',
toolbar='standard'
) }}
</div>
<!-- Translation Fields - French -->
<div x-show="activeLanguage === 'fr'" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Title (FR)
</label>
<input
type="text"
x-model="form.translations.fr.title"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Product title"
/>
</div>
{{ quill_editor(
id='desc-editor-fr',
model='form.translations.fr.description',
label='Description (FR)',
placeholder='Enter product description in French...',
min_height='150px',
toolbar='standard'
) }}
</div>
<!-- Translation Fields - German -->
<div x-show="activeLanguage === 'de'" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Title (DE)
</label>
<input
type="text"
x-model="form.translations.de.title"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Product title"
/>
</div>
{{ quill_editor(
id='desc-editor-de',
model='form.translations.de.description',
label='Description (DE)',
placeholder='Enter product description in German...',
min_height='150px',
toolbar='standard'
) }}
</div>
<!-- Translation Fields - Luxembourgish -->
<div x-show="activeLanguage === 'lu'" class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
Title (LU)
</label>
<input
type="text"
x-model="form.translations.lu.title"
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"
placeholder="Product title"
/>
</div>
{{ quill_editor(
id='desc-editor-lu',
model='form.translations.lu.description',
label='Description (LU)',
placeholder='Enter product description in Luxembourgish...',
min_height='150px',
toolbar='standard'
) }}
</div>
</div>
<!-- Product Identifiers -->