feat: reemplazar entrada de texto de url por campo de carga nativo en formulario de cupones

This commit is contained in:
2026-03-05 12:29:27 -05:00
parent 51d390c2e1
commit 1b3dad0fd6

View File

@ -26,6 +26,17 @@ const categories = ['Todas', 'Restaurante', 'Turismo', 'Bebidas', 'Comercio']
const showModal = ref(false)
const isEditing = ref(false)
const couponImageFile = ref<File | null>(null)
const couponImagePreview = ref<string | null>(null)
function handleImageUpload(e: Event) {
const file = (e.target as HTMLInputElement).files?.[0]
if (file) {
couponImageFile.value = file
couponImagePreview.value = URL.createObjectURL(file)
}
}
// Current data
const currentCoupon = ref<Partial<Coupon>>({
@ -177,6 +188,8 @@ async function deleteBusiness(id: string) {
// Coupon Methods
function openCreateModal() {
isEditing.value = false
couponImageFile.value = null
couponImagePreview.value = null
currentCoupon.value = {
title: '',
business_id: null,
@ -197,7 +210,6 @@ function openCreateModal() {
function handleBusinessChange() {
const selectedBiz = businesses.value.find(b => b.id === currentCoupon.value.business_id)
if (selectedBiz) {
currentCoupon.value.image_url = selectedBiz.image_url
currentCoupon.value.social_media = selectedBiz.social_media
currentCoupon.value.category = selectedBiz.category
}
@ -205,6 +217,8 @@ function handleBusinessChange() {
function openEditModal(coupon: Coupon) {
isEditing.value = true
couponImageFile.value = null
couponImagePreview.value = null
currentCoupon.value = { ...coupon }
showModal.value = true
}
@ -236,6 +250,14 @@ async function saveCoupon() {
if (data.discount_percentage !== null) data.discount_percentage = Number(data.discount_percentage)
if (data.discount_amount !== null) data.discount_amount = Number(data.discount_amount)
if (couponImageFile.value) {
const filename = `coupons/${Date.now()}_${couponImageFile.value.name.replace(/[^a-zA-Z0-9.]/g, '_')}`
const { error: upErr } = await supabase.storage.from('uploads').upload(filename, couponImageFile.value)
if (upErr) throw upErr
const { data: urlData } = supabase.storage.from('uploads').getPublicUrl(filename)
data.image_url = urlData.publicUrl
}
if (isEditing.value && data.id) {
await couponsService.updateCoupon(data.id, data)
} else {
@ -584,13 +606,15 @@ async function toggleCouponStatus(coupon: Coupon) {
</div>
<div class="form-row">
<div class="form-group">
<label>URL Imagen</label>
<input v-model="currentCoupon.image_url" type="text">
<div class="form-group file-upload-wrapper">
<label>Imagen del Cupón</label>
<input type="file" @change="handleImageUpload" accept="image/*" class="file-input">
<img v-if="couponImagePreview" :src="couponImagePreview" class="file-preview" style="max-height: 100px; border-radius: 8px; margin-top: 10px;" />
<img v-else-if="currentCoupon.image_url" :src="currentCoupon.image_url" class="file-preview" style="max-height: 100px; border-radius: 8px; margin-top: 10px;" />
</div>
<div class="form-group">
<label>Redes Sociales</label>
<input v-model="currentCoupon.social_media" type="text">
<input v-model="currentCoupon.social_media" type="text" placeholder="IG, FB, Web, etc.">
</div>
</div>