feat: add media library picker for product images
- Add admin media API endpoints for vendor media management - Create reusable media_picker_modal macro in modals.html - Create mediaPickerMixin Alpine.js helper for media selection - Update product create/edit forms with media picker UI - Support main image + additional images selection - Add upload functionality within the picker modal - Update vendor_product_service to handle additional_images - Add additional_images field to Pydantic schemas 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -699,3 +699,216 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{#
|
||||
Media Picker Modal
|
||||
==================
|
||||
A modal for selecting images from the vendor's media library.
|
||||
Supports browsing existing media, uploading new files, and single/multi-select.
|
||||
|
||||
Parameters:
|
||||
- id: Unique modal ID (default: 'mediaPicker')
|
||||
- show_var: Alpine.js variable controlling visibility (default: 'showMediaPicker')
|
||||
- vendor_id_var: Variable containing vendor ID (default: 'vendorId')
|
||||
- on_select: Callback function when images are selected (default: 'onMediaSelected')
|
||||
- multi_select: Allow selecting multiple images (default: false)
|
||||
- title: Modal title (default: 'Select Image')
|
||||
|
||||
Required Alpine.js state:
|
||||
- showMediaPicker: boolean
|
||||
- vendorId: number
|
||||
- mediaPickerState: object (managed by initMediaPicker())
|
||||
- onMediaSelected(images): callback function
|
||||
|
||||
Usage:
|
||||
{% from 'shared/macros/modals.html' import media_picker_modal %}
|
||||
{{ media_picker_modal(vendor_id_var='form.vendor_id', on_select='setMainImage', multi_select=false) }}
|
||||
#}
|
||||
{% macro media_picker_modal(id='mediaPicker', show_var='showMediaPicker', vendor_id_var='vendorId', on_select='onMediaSelected', multi_select=false, title='Select Image') %}
|
||||
<div
|
||||
x-show="{{ show_var }}"
|
||||
x-cloak
|
||||
@keydown.escape.window="{{ show_var }} = false"
|
||||
class="fixed inset-0 z-50 overflow-y-auto"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
{# Backdrop #}
|
||||
<div
|
||||
x-show="{{ show_var }}"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm"
|
||||
@click="{{ show_var }} = false"
|
||||
></div>
|
||||
|
||||
{# Modal Container #}
|
||||
<div class="flex min-h-full items-center justify-center p-4">
|
||||
<div
|
||||
x-show="{{ show_var }}"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 scale-95"
|
||||
x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-95"
|
||||
@click.stop
|
||||
class="relative w-full max-w-4xl bg-white dark:bg-gray-800 rounded-xl shadow-xl"
|
||||
x-init="$watch('{{ show_var }}', value => value && loadMediaLibrary())"
|
||||
>
|
||||
{# Header #}
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{{ title }}
|
||||
{% if multi_select %}
|
||||
<span class="ml-2 text-sm font-normal text-gray-500 dark:text-gray-400">(select multiple)</span>
|
||||
{% endif %}
|
||||
</h3>
|
||||
<button
|
||||
@click="{{ show_var }} = false"
|
||||
class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{# Toolbar #}
|
||||
<div class="px-6 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
{# Search #}
|
||||
<div class="flex-1 max-w-xs">
|
||||
<div class="relative">
|
||||
<span x-html="$icon('search', 'absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400')"></span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="mediaPickerState.search"
|
||||
@input.debounce.300ms="loadMediaLibrary()"
|
||||
placeholder="Search images..."
|
||||
class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Upload Button #}
|
||||
<div>
|
||||
<label class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 cursor-pointer transition-colors">
|
||||
<span x-html="$icon('upload', 'w-4 h-4 mr-2')"></span>
|
||||
Upload New
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="uploadMediaFile($event)"
|
||||
class="hidden"
|
||||
:disabled="mediaPickerState.uploading"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Upload Progress #}
|
||||
<div x-show="mediaPickerState.uploading" class="mt-3">
|
||||
<div class="flex items-center gap-2 text-sm text-purple-600 dark:text-purple-400">
|
||||
<span x-html="$icon('spinner', 'w-4 h-4 animate-spin')"></span>
|
||||
<span>Uploading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Media Grid #}
|
||||
<div class="px-6 py-4 max-h-[400px] overflow-y-auto">
|
||||
{# Loading State #}
|
||||
<div x-show="mediaPickerState.loading" class="flex items-center justify-center py-12">
|
||||
<span x-html="$icon('spinner', 'w-8 h-8 text-purple-600 animate-spin')"></span>
|
||||
</div>
|
||||
|
||||
{# Empty State #}
|
||||
<div x-show="!mediaPickerState.loading && mediaPickerState.media.length === 0" class="text-center py-12">
|
||||
<span x-html="$icon('photograph', 'w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-4')"></span>
|
||||
<p class="text-gray-500 dark:text-gray-400">No images found</p>
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500 mt-1">Upload an image to get started</p>
|
||||
</div>
|
||||
|
||||
{# Image Grid #}
|
||||
<div x-show="!mediaPickerState.loading && mediaPickerState.media.length > 0" class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-3">
|
||||
<template x-for="media in mediaPickerState.media" :key="media.id">
|
||||
<div
|
||||
@click="toggleMediaSelection(media)"
|
||||
class="relative aspect-square rounded-lg overflow-hidden cursor-pointer border-2 transition-all"
|
||||
:class="isMediaSelected(media.id) ? 'border-purple-500 ring-2 ring-purple-500/50' : 'border-transparent hover:border-gray-300 dark:hover:border-gray-600'"
|
||||
>
|
||||
<img
|
||||
:src="media.thumbnail_url || media.url"
|
||||
:alt="media.alt_text || media.filename"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
{# Selection Indicator #}
|
||||
<div
|
||||
x-show="isMediaSelected(media.id)"
|
||||
class="absolute inset-0 bg-purple-500/20 flex items-center justify-center"
|
||||
>
|
||||
<span class="w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
{# Filename tooltip #}
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2">
|
||||
<p class="text-xs text-white truncate" x-text="media.filename"></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{# Pagination #}
|
||||
<div x-show="mediaPickerState.total > mediaPickerState.media.length" class="mt-4 text-center">
|
||||
<button
|
||||
@click="loadMoreMedia()"
|
||||
:disabled="mediaPickerState.loading"
|
||||
class="px-4 py-2 text-sm text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
Load more (<span x-text="mediaPickerState.media.length"></span> of <span x-text="mediaPickerState.total"></span>)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Footer #}
|
||||
<div class="flex items-center justify-between px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 rounded-b-xl">
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
<span x-show="mediaPickerState.selected.length > 0">
|
||||
<span x-text="mediaPickerState.selected.length"></span> selected
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button
|
||||
@click="{{ show_var }} = false"
|
||||
type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="confirmMediaSelection()"
|
||||
:disabled="mediaPickerState.selected.length === 0"
|
||||
type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{% if multi_select %}
|
||||
Add Selected
|
||||
{% else %}
|
||||
Select Image
|
||||
{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
Reference in New Issue
Block a user