feat: reemplazar entrada de texto de url por campo de carga nativo en formulario de cupones
This commit is contained in:
@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user