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:
@@ -1,6 +1,7 @@
|
||||
{# app/templates/admin/vendor-product-create.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/headers.html' import detail_page_header %}
|
||||
{% from 'shared/macros/modals.html' import media_picker_modal %}
|
||||
|
||||
{% block title %}Create Vendor Product{% endblock %}
|
||||
|
||||
@@ -252,35 +253,97 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
<!-- Product Images -->
|
||||
<div class="px-4 py-5 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">
|
||||
Primary Image
|
||||
Product Images
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Image URL</label>
|
||||
<input
|
||||
type="url"
|
||||
x-model="form.primary_image_url"
|
||||
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="https://..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Preview</label>
|
||||
<div class="w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600">
|
||||
|
||||
<!-- Main Image -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Main Image</label>
|
||||
<div class="flex items-start gap-4">
|
||||
<!-- Preview -->
|
||||
<div class="w-32 h-32 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 flex-shrink-0">
|
||||
<template x-if="form.primary_image_url">
|
||||
<img :src="form.primary_image_url" class="w-full h-full object-cover" />
|
||||
<div class="relative w-full h-full group">
|
||||
<img :src="form.primary_image_url" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="clearMainImage()"
|
||||
class="p-2 bg-red-500 rounded-full text-white hover:bg-red-600"
|
||||
title="Remove image"
|
||||
>
|
||||
<span x-html="$icon('delete', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="!form.primary_image_url">
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<span x-html="$icon('photograph', 'w-8 h-8 text-gray-400')"></span>
|
||||
<span x-html="$icon('photograph', 'w-10 h-10 text-gray-400')"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="openMediaPickerMain()"
|
||||
:disabled="!form.vendor_id"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium text-purple-600 dark:text-purple-400 border border-purple-300 dark:border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<span x-html="$icon('photograph', 'w-4 h-4 mr-2')"></span>
|
||||
Browse Media Library
|
||||
</button>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">Or enter URL directly:</p>
|
||||
<input
|
||||
type="url"
|
||||
x-model="form.primary_image_url"
|
||||
class="w-64 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="https://..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Images -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Additional Images</label>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<!-- Existing Additional Images -->
|
||||
<template x-for="(imgUrl, index) in form.additional_images" :key="index">
|
||||
<div class="relative w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 group">
|
||||
<img :src="imgUrl" class="w-full h-full object-cover" />
|
||||
<div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="removeAdditionalImage(index)"
|
||||
class="p-1.5 bg-red-500 rounded-full text-white hover:bg-red-600"
|
||||
title="Remove image"
|
||||
>
|
||||
<span x-html="$icon('close', 'w-3 h-3')"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs text-center py-0.5" x-text="index + 1"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Add Image Button -->
|
||||
<button
|
||||
type="button"
|
||||
@click="openMediaPickerAdditional()"
|
||||
:disabled="!form.vendor_id"
|
||||
class="w-24 h-24 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-purple-400 dark:hover:border-purple-500 flex flex-col items-center justify-center text-gray-400 hover:text-purple-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span x-html="$icon('plus', 'w-6 h-6')"></span>
|
||||
<span class="text-xs mt-1">Add</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Click "Add" to select images from the media library or upload new ones</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Product Type & Status -->
|
||||
@@ -334,6 +397,26 @@
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Media Picker Modal for Main Image -->
|
||||
{{ media_picker_modal(
|
||||
id='mediaPickerMain',
|
||||
show_var='showMediaPicker',
|
||||
vendor_id_var='form.vendor_id',
|
||||
on_select='setMainImage',
|
||||
multi_select=false,
|
||||
title='Select Main Image'
|
||||
) }}
|
||||
|
||||
<!-- Media Picker Modal for Additional Images -->
|
||||
{{ media_picker_modal(
|
||||
id='mediaPickerAdditional',
|
||||
show_var='showMediaPickerAdditional',
|
||||
vendor_id_var='form.vendor_id',
|
||||
on_select='addAdditionalImages',
|
||||
multi_select=true,
|
||||
title='Select Additional Images'
|
||||
) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
@@ -351,5 +434,6 @@
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
<script src="{{ url_for('static', path='shared/js/media-picker.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='admin/js/vendor-product-create.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
{% extends "admin/base.html" %}
|
||||
{% 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 %}
|
||||
|
||||
{% block title %}Edit Vendor Product{% endblock %}
|
||||
|
||||
@@ -228,40 +229,115 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image -->
|
||||
<!-- Images -->
|
||||
<div class="px-4 py-5 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">
|
||||
Primary Image <span class="text-red-500">*</span>
|
||||
Product Images
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
|
||||
Image URL <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
x-model="form.primary_image_url"
|
||||
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="https://..."
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Preview</label>
|
||||
<div class="w-24 h-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600">
|
||||
|
||||
<!-- Main Image -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Main Image <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="flex items-start gap-4">
|
||||
<!-- Preview -->
|
||||
<div class="w-32 h-32 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 flex-shrink-0">
|
||||
<template x-if="form.primary_image_url">
|
||||
<img :src="form.primary_image_url" class="w-full h-full object-cover" />
|
||||
</template>
|
||||
<template x-if="!form.primary_image_url">
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<span x-html="$icon('photograph', 'w-8 h-8 text-gray-400')"></span>
|
||||
<span x-html="$icon('photograph', 'w-10 h-10 text-gray-400')"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="openMediaPickerMain(); loadMediaLibrary()"
|
||||
class="px-3 py-2 text-sm font-medium text-purple-600 dark:text-purple-400 border border-purple-300 dark:border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20 flex items-center gap-2"
|
||||
>
|
||||
<span x-html="$icon('photograph', 'w-4 h-4')"></span>
|
||||
Browse Media
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
x-show="form.primary_image_url"
|
||||
@click="clearMainImage()"
|
||||
class="px-3 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
<!-- URL fallback -->
|
||||
<div>
|
||||
<label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Or enter URL directly:</label>
|
||||
<input
|
||||
type="url"
|
||||
x-model="form.primary_image_url"
|
||||
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="https://..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Images -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Additional Images
|
||||
</label>
|
||||
<div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 mb-3">
|
||||
<!-- Existing additional images -->
|
||||
<template x-for="(url, index) in form.additional_images" :key="index">
|
||||
<div class="relative group">
|
||||
<div class="w-full aspect-square rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600">
|
||||
<img :src="url" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
@click="removeAdditionalImage(index)"
|
||||
class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- Add button -->
|
||||
<button
|
||||
type="button"
|
||||
@click="openMediaPickerAdditional(); loadMediaLibrary()"
|
||||
class="w-full aspect-square rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-purple-400 dark:hover:border-purple-500 flex items-center justify-center text-gray-400 hover:text-purple-500 transition-colors"
|
||||
>
|
||||
<span x-html="$icon('plus', 'w-8 h-8')"></span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||
Click the + button to add more images from the media library
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Media Picker Modals -->
|
||||
{{ media_picker_modal(
|
||||
id='media-picker-main',
|
||||
show_var='showMediaPicker',
|
||||
vendor_id_var='product?.vendor_id',
|
||||
title='Select Main Image'
|
||||
) }}
|
||||
|
||||
{{ media_picker_modal(
|
||||
id='media-picker-additional',
|
||||
show_var='showMediaPickerAdditional',
|
||||
vendor_id_var='product?.vendor_id',
|
||||
multi_select=true,
|
||||
title='Select Additional Images'
|
||||
) }}
|
||||
|
||||
<!-- Product Type & Status -->
|
||||
<div class="px-4 py-5 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">
|
||||
@@ -349,5 +425,6 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', path='shared/js/media-picker.js') }}"></script>
|
||||
<script src="{{ url_for('static', path='admin/js/vendor-product-edit.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user