449 lines
13 KiB
Vue
449 lines
13 KiB
Vue
<template>
|
|
<BModal
|
|
id="modal-center"
|
|
v-model="activeModal"
|
|
centered
|
|
title="consumo-cuidado"
|
|
:ok-variant="modalColor"> {{ modalText }}
|
|
</BModal>
|
|
<form class="form" @submit.prevent="submitCompany">
|
|
<FormHeader
|
|
class="f-header"
|
|
title="General"
|
|
subtitle="Estos son los datos básicos de la cooperativa. Procura completar el mayor
|
|
número de campos posible." />
|
|
<fieldset class="fieldset fieldset-general">
|
|
<div class="cont">
|
|
<FormInput
|
|
v-model="form.cif"
|
|
:value="form.cif ? form.cif : ''"
|
|
type="text"
|
|
label-text="C.I.F."
|
|
@input="form.cif = $event"
|
|
/>
|
|
<FormInput
|
|
v-model="form.company_name"
|
|
:value="form.company_name ? form.company_name : ''"
|
|
type="text"
|
|
label-text="Nombre de la cooperativa"
|
|
@input="form.company_name = $event"
|
|
/>
|
|
</div>
|
|
<div class="cont">
|
|
<FormInput
|
|
v-model="form.short_name"
|
|
:value="form.short_name ? form.short_name : ''"
|
|
type="text"
|
|
label-text="Nombre corto"
|
|
@input="form.short_name = $event"
|
|
/>
|
|
<FormInput
|
|
v-model="form.web_link"
|
|
:value="form.web_link ? form.web_link : ''"
|
|
type="text"
|
|
label-text="Sitio web"
|
|
@input="form.web_link = $event"
|
|
/>
|
|
<small v-if="!isValid(form.shop_link)" class="error"
|
|
>La url no es válida</small
|
|
>
|
|
</div>
|
|
<div class="cont">
|
|
<FormInput
|
|
v-model="form.email"
|
|
:value="form.email ? form.email : ''"
|
|
type="text"
|
|
label-text="Email"
|
|
@input="form.email = $event"
|
|
/>
|
|
<FormInput
|
|
v-model="form.phone"
|
|
:value="form.phone ? form.phone : ''"
|
|
type="text"
|
|
label-text="Teléfono"
|
|
@input="form.phone = $event"
|
|
/>
|
|
</div>
|
|
<div class="cont">
|
|
<FormInput
|
|
v-model="form.mobile"
|
|
:value="form.mobile ? form.mobile : ''"
|
|
type="text"
|
|
label-text="Móvil"
|
|
@input="form.mobile = $event"
|
|
/>
|
|
<FormInput
|
|
v-model="form.other_phone"
|
|
:value="form.other_phone ? form.other_phone : ''"
|
|
type="text"
|
|
label-text="Otro teléfono"
|
|
@input="form.other_phone = $event"
|
|
/>
|
|
</div>
|
|
<div class="cont-col">
|
|
<label for="imagen" class="label">Logo</label>
|
|
<ClientOnly>
|
|
<FormInputImage :image-url="form.logo" @change="handleImage($event)" />
|
|
</ClientOnly>
|
|
</div>
|
|
<div class="cont-col">
|
|
<label for="tags-basic" class="label">Palabras clave</label>
|
|
<BFormTags
|
|
v-model="form.tags"
|
|
placeholder="Añade palabras clave"
|
|
input-id="tags-basic"
|
|
/>
|
|
</div>
|
|
<div class="cont-col">
|
|
<label for="" class="label">Descripción</label>
|
|
<textarea v-model="form.description" class="textarea" type="text" />
|
|
</div>
|
|
</fieldset>
|
|
|
|
<FormHeader
|
|
class="f-header"
|
|
title="Tienda Online"
|
|
subtitle="Indica si la cooperativa dispone de tienda online. En caso afirmativo,
|
|
indica su url y la plataforma utilizada en el seleccionable. Si utilizas
|
|
WooCommerce, puedes indicar su API para sincronizar automáticamente todos
|
|
los productos.
|
|
<a href='#'>Sigue estos pasos para obtener la API.</a>"
|
|
/>
|
|
<fieldset class="fieldset">
|
|
<div class="cont">
|
|
<div>
|
|
<BFormCheckbox
|
|
v-model="form.shop"
|
|
label="¿Tiene tienda online?"
|
|
class="label"
|
|
:value="form.shop"
|
|
>Tienda online</BFormCheckbox>
|
|
</div>
|
|
<FormInput
|
|
v-model="form.shop_link"
|
|
:value="form.shop_link ? form.shop_link : ''"
|
|
type="text"
|
|
label-text="Enlace a tienda online"
|
|
@input="form.shop_link = $event"
|
|
/>
|
|
<small v-if="!isValid(form.shop_link)" class="error"
|
|
>La url no es válida</small
|
|
>
|
|
</div>
|
|
<div class="cont-col">
|
|
<label for="select-shop" class="label">Plataforma</label>
|
|
<BFormSelect id="select-shop" v-model="form.platform" name="" >
|
|
<option selected disabled value="">Plataforma</option>
|
|
<option
|
|
v-for="(category, key) in categories"
|
|
:key="key"
|
|
:value="category.value"
|
|
>
|
|
{{ category.text }}
|
|
</option>
|
|
</BFormSelect>
|
|
</div>
|
|
<div v-if="form.platform === 'WOO_COMMERCE'" class="cont-col">
|
|
<h3>Configuración de WooCommerce</h3>
|
|
<div class="cont">
|
|
<FormInput
|
|
v-model="form.credentials.secret"
|
|
:value="form.credentials.secret ? form.credentials.secret : ''"
|
|
type="text"
|
|
label-text="API WooCoomerce clave secreta"
|
|
@input="form.credentials.secret = $event"
|
|
/>
|
|
<FormInput
|
|
v-model="form.credentials.key"
|
|
:value="form.credentials.key ? form.credentials.key : ''"
|
|
type="text"
|
|
label-text="API WooCoomerce clave pública"
|
|
@input="form.credentials.key = $event"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<FormHeader
|
|
class="f-header"
|
|
title="Localización"
|
|
subtitle="La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
|
|
que estén cerca de tu posición." />
|
|
<fieldset class="fieldset">
|
|
<!-- TODO: Arreglar este componente: -->
|
|
<!-- <GoogleAddress :value="form.address" @added-data="getPlace" /> -->
|
|
<br />
|
|
<div class="cont">
|
|
<FormInput
|
|
v-model="form.shop_rss_feed"
|
|
:value="form.shop_rss_feed ? form.shop_rss_feed : ''"
|
|
type="text"
|
|
label-text="Enlace RSS"
|
|
@input="form.shop_rss_feed = $event"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<FormHeader
|
|
class="f-header"
|
|
title="Términos y Condiciones"
|
|
subtitle="En estos textos podrás indicar las condiciones de venta o condiciones de
|
|
envío de la cooperativa. Si no tienes claro qué texto añadir, puedes hacer
|
|
<a @click='loadText'>click aquí para cargar un texto predefinido</a>
|
|
que podrás editar. Ten en cuenta que al clicar se borrará el contenido de
|
|
ambos campos.."/>
|
|
|
|
<fieldset class="fieldset">
|
|
<div class="cont-col">
|
|
<label for="" class="label">Condiciones de venta</label>
|
|
<textarea v-model="form.sale_terms" class="textarea" type="text" />
|
|
<label for="" class="label">Condiciones de envío</label>
|
|
<textarea v-model="form.shipping_terms" class="textarea" type="text" />
|
|
<FormInput
|
|
v-model="form.shipping_cost"
|
|
:value="form.shipping_cost ? form.shipping_cost : ''"
|
|
type="text"
|
|
label-text="Gastos de envío"
|
|
@input="form.shipping_cost = $event"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
<div align="center">
|
|
<SubmitButton text="guardar" image-url="" />
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import { useAuthStore } from '@/stores/auth'
|
|
export default {
|
|
setup() {
|
|
const auth = useAuthStore();
|
|
return {
|
|
auth,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
categories: [
|
|
{ text: 'WooCommerce', value: 'WOO_COMMERCE' },
|
|
{ text: 'Prestashop', value: 'PRESTASHOP' },
|
|
{ text: 'Shopify', value: 'SHOPIFY' },
|
|
],
|
|
form: {
|
|
id: null,
|
|
cif: '',
|
|
company_name: '',
|
|
short_name: '',
|
|
web_link: '',
|
|
shop: false,
|
|
shop_link: '',
|
|
platform: '',
|
|
email: '',
|
|
logo: null,
|
|
city: null,
|
|
address: '',
|
|
tags: [],
|
|
geo: null,
|
|
phone: '',
|
|
credentials: { secret: '', key: '' },
|
|
mobile: '',
|
|
other_phone: '',
|
|
description: '',
|
|
shop_rss_feed: '',
|
|
sale_terms: '',
|
|
shipping_cost: '',
|
|
sync: false,
|
|
},
|
|
|
|
default_text: {
|
|
sale_terms: `Devoluciones - derecho de desistimiento
|
|
|
|
Puedes devolver un pedido comprado a través del vendedor en el plazo de 14 días desde que se efectuó la entrega ejerciendo el derecho de desistimiento. Para cualquier otra duda puede consultar a la cooperativa que le ha vendido el producto.
|
|
|
|
Garantía Legal
|
|
|
|
Si el producto recibido no concuerda con la descripción o es defectuoso dentro de los 24 meses siguientes a su recepción, tiene derecho de manera gratuita a la reparación, reemplazo o reembolso del producto por parte del vendedor.`,
|
|
|
|
shipping_terms: `Salvo que se indique lo contrario los pedidos gestionados por esta cooperativa se envían en un plazo de dos a cinco días desde la recepción del pedido. Se le avisará si su pedido sufre algún retraso o se cancela.`,
|
|
},
|
|
|
|
activeModal: false,
|
|
modalText: '',
|
|
modalColor: '',
|
|
}
|
|
},
|
|
|
|
async mounted() {
|
|
await this.getCompany()
|
|
},
|
|
|
|
methods: {
|
|
isValid(url) {
|
|
if (url) return /^(ftp|http|https):\/\/[^ "]+\.+[^ "]+$/.test(url)
|
|
else return true
|
|
},
|
|
loadText() {
|
|
this.form.sale_terms = this.default_text.sale_terms
|
|
this.form.shipping_terms = this.default_text.shipping_terms
|
|
},
|
|
getPlace(value) {
|
|
if (value) {
|
|
this.form.address = value.address
|
|
this.form.geo = value.geo
|
|
this.form.city = value.city
|
|
}
|
|
},
|
|
async getCompany() {
|
|
const config = useRuntimeConfig()
|
|
const data = await $fetch('my_company/', {
|
|
baseURL: config.public.baseURL,
|
|
method: 'GET',
|
|
headers: {
|
|
Authorization: `Bearer ${this.auth.access}`
|
|
}
|
|
})
|
|
if (data) {
|
|
this.form = data.company
|
|
if (this.form.credentials === null)
|
|
this.form.credentials = { secret: '', key: '' }
|
|
}
|
|
},
|
|
async handleImage(e) {
|
|
this.form.logo = e
|
|
},
|
|
|
|
parseForm() {
|
|
const formData = new FormData()
|
|
Object.keys(this.form).forEach((key) => {
|
|
if ((key === 'geo') | (key === 'tags') | (key === 'credentials'))
|
|
formData.append(key, JSON.stringify(this.form[key]))
|
|
else if (key === 'city') formData.append(key, this.form[key])
|
|
else if (this.form[key] || this.form[key] === '')
|
|
formData.append(key, this.form[key])
|
|
})
|
|
|
|
if (typeof formData.get('logo') === 'string') {
|
|
formData.delete('logo')
|
|
}
|
|
|
|
return formData
|
|
},
|
|
|
|
async submitCompany() {
|
|
const formData = this.parseForm()
|
|
console.log('Submitting company data:', formData)
|
|
try {
|
|
const config = useRuntimeConfig()
|
|
await $fetch(`/companies/${this.form.id}/`, {
|
|
baseURL: config.public.baseURL,
|
|
method: 'PATCH',
|
|
//TODO: review with Diego. I changed formaData with this.form
|
|
body: this.form,
|
|
headers: {
|
|
Authorization: `Bearer ${this.auth.access}`
|
|
}
|
|
})
|
|
this.modalText = 'Actualizado correctamente'
|
|
this.modalColor = 'success'
|
|
this.activeModal = true
|
|
} catch (error) {
|
|
this.modalText = 'Ha habido un error'
|
|
this.modalColor = 'danger'
|
|
this.activeModal = true
|
|
console.error('Error al actualizar la cooperativa:', error)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
@include desktop {
|
|
width: 40%;
|
|
}
|
|
@include tablet {
|
|
width: 60%;
|
|
}
|
|
@include mobile {
|
|
width: 90%;
|
|
}
|
|
.f-header {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.imagenInput {
|
|
font-size: $s;
|
|
}
|
|
|
|
label, .label {
|
|
color: $color-primary;
|
|
font-weight: $medium;
|
|
font-size: $s;
|
|
display: block;
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
background-color: $color-grey-inputs;
|
|
border: 1px solid $color-grey-inputs-border;
|
|
border-radius: 4px;
|
|
padding: 10px 5px;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.fieldset {
|
|
width: 100%;
|
|
margin-bottom: 70px;
|
|
align-items: left;
|
|
}
|
|
.cont {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
@include mobile {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.cont-col {
|
|
margin: 15px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
h3 {
|
|
color: $color-navy;
|
|
font-size: $m;
|
|
margin: 20px 0 15px 0;
|
|
}
|
|
}
|
|
.help-text {
|
|
text-align: left;
|
|
font-size: $xs;
|
|
text-align: justify;
|
|
font-weight: $regular;
|
|
color: $color-greylayout;
|
|
font-family: $font-secondary;
|
|
background-color: $color-light;
|
|
margin-bottom: 20px;
|
|
margin-top: -10px;
|
|
|
|
a {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
color: $color-greytext;
|
|
}
|
|
|
|
@include mobile {
|
|
text-align: left;
|
|
}
|
|
}
|
|
.error {
|
|
color: crimson;
|
|
}
|
|
</style>
|