edit cooperative page and functionality
This commit is contained in:
María
441
components/CompanyForm.vue
Normal file
441
components/CompanyForm.vue
Normal file
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<BModal
|
||||
id="modal-center"
|
||||
v-model="activeModal"
|
||||
centered
|
||||
title="latienda.coop"
|
||||
:ok-variant="modalColor"> {{ modalText }}
|
||||
</BModal>
|
||||
<form class="form" @submit.prevent="submitCompany">
|
||||
<FormHeader title="general" />
|
||||
<p class="help-text">
|
||||
Estos son los datos básicos de la cooperativa. Procura completar el mayor
|
||||
número de campos posible.
|
||||
</p>
|
||||
<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">Logo</label>
|
||||
<ClientOnly>
|
||||
<FormInputImage :image-url="form.logo" @change="handleImage($event)" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<div class="cont-col">
|
||||
<label for="tags-basic">Palabras clave</label>
|
||||
<BFormTags
|
||||
v-model="form.tags"
|
||||
placeholder="Añade palabras clave"
|
||||
input-id="tags-basic"
|
||||
/>
|
||||
</div>
|
||||
<div class="cont-col">
|
||||
<label for="">Descripción</label>
|
||||
<textarea v-model="form.description" class="textarea" type="text" />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<FormHeader title="tienda online" />
|
||||
<p class="help-text">
|
||||
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>
|
||||
</p>
|
||||
<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">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 title="localización" />
|
||||
<p class="help-text">
|
||||
La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
|
||||
que estén cerca de tu posición.
|
||||
</p>
|
||||
<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 title="términos y condiciones" />
|
||||
<p class="help-text help-text-terms">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<fieldset class="fieldset">
|
||||
<div class="cont-col">
|
||||
<label for="">Condiciones de venta</label>
|
||||
<textarea v-model="form.sale_terms" class="textarea" type="text" />
|
||||
<label for="">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 {
|
||||
@include desktop {
|
||||
width: 40%;
|
||||
}
|
||||
@include tablet {
|
||||
width: 60%;
|
||||
}
|
||||
@include mobile {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.imagenInput {
|
||||
font-size: $s;
|
||||
}
|
||||
|
||||
label, .label {
|
||||
text-align: left;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
font-size: $xs;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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>
|
||||
Reference in New Issue
Block a user