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>
|
||||
@@ -4,6 +4,7 @@
|
||||
>{{ labelText + (required ? '*' : '') }}
|
||||
<input
|
||||
v-model="inputValue"
|
||||
:value="value ? value : inputValue"
|
||||
:required="required"
|
||||
:type="type"
|
||||
:step="step"
|
||||
|
||||
110
components/FormInputImage.vue
Normal file
110
components/FormInputImage.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<input class="input" type="file" @change="loadImage" />
|
||||
|
||||
<!-- Editor -->
|
||||
<div v-show="edit">
|
||||
<cropper
|
||||
ref="cropperRef"
|
||||
class="cropper"
|
||||
:src="croppieImage"
|
||||
:stencil-props="{ aspectRatio: 1 }"
|
||||
/>
|
||||
<div>
|
||||
<button class="filter-button" @click.prevent="crop">Aplicar</button>
|
||||
<button @click.prevent="cancel">Cancelar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result -->
|
||||
<div v-show="cropped && !edit">
|
||||
<img :src="cropped" @click.prevent="editImage" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Cropper } from "vue-advanced-cropper";
|
||||
import "vue-advanced-cropper/dist/style.css";
|
||||
|
||||
export default {
|
||||
components: { Cropper },
|
||||
props: {
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ["change"],
|
||||
data() {
|
||||
return {
|
||||
croppieImage: "",
|
||||
cropped: null,
|
||||
edit: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (typeof this.imageUrl === "string") {
|
||||
this.croppieImage = this.imageUrl;
|
||||
this.cropped = this.imageUrl;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
editImage() {
|
||||
this.edit = true;
|
||||
},
|
||||
cancel() {
|
||||
this.edit = false;
|
||||
},
|
||||
loadImage(e) {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (evt) => {
|
||||
this.croppieImage = evt.target.result;
|
||||
this.edit = true;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
},
|
||||
crop() {
|
||||
const canvas = this.$refs.cropperRef.getResult().canvas;
|
||||
if (canvas) {
|
||||
const base64 = canvas.toDataURL("image/png");
|
||||
this.cropped = base64;
|
||||
|
||||
// Emitir como File
|
||||
canvas.toBlob((blob) => {
|
||||
if (blob) {
|
||||
const fileName =
|
||||
Math.random().toString(36).substring(2, 15) + ".png";
|
||||
const file = new File([blob], fileName, { type: "image/png" });
|
||||
this.$emit("change", file);
|
||||
}
|
||||
}, "image/png");
|
||||
}
|
||||
this.edit = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form-container {
|
||||
width: 100%;
|
||||
}
|
||||
.cropper {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
.filter-button {
|
||||
background-color: $color-navy;
|
||||
color: $color-light;
|
||||
font-size: $xs;
|
||||
padding: 0.5em 0.8em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.input {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -38,13 +38,17 @@ export default {
|
||||
async logout() {
|
||||
await this.auth.logout()
|
||||
},
|
||||
//TODO: check if cooperative is validated is working
|
||||
async checkIfCoopValidated() {
|
||||
const config = useRuntimeConfig()
|
||||
const accessToken = this.auth.access
|
||||
const result = await $fetch('my_company/', {
|
||||
baseURL: config.public.baseURL,
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${accessToken}`
|
||||
}
|
||||
})
|
||||
this.coopIsValidated = result.data.company.is_validated
|
||||
this.coopIsValidated = result.company.is_validated
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
37
package-lock.json
generated
37
package-lock.json
generated
@@ -18,6 +18,7 @@
|
||||
"pinia": "^3.0.3",
|
||||
"pinia-plugin-persistedstate": "^4.4.1",
|
||||
"vue": "^3.5.18",
|
||||
"vue-advanced-cropper": "^2.8.9",
|
||||
"vue-router": "^4.5.1",
|
||||
"vue3-carousel": "^0.16.0"
|
||||
},
|
||||
@@ -6043,6 +6044,12 @@
|
||||
"consola": "^3.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/clean-regexp": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/clean-regexp/-/clean-regexp-1.0.0.tgz",
|
||||
@@ -6721,6 +6728,12 @@
|
||||
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debounce": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
|
||||
"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
|
||||
@@ -7111,6 +7124,12 @@
|
||||
"integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/easy-bem": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
|
||||
"integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ee-first": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
|
||||
@@ -14031,6 +14050,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-advanced-cropper": {
|
||||
"version": "2.8.9",
|
||||
"resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-2.8.9.tgz",
|
||||
"integrity": "sha512-1jc5gO674kVGpJKekoaol6ZlwaF5VYDLSBwBOUpViW0IOrrRsyLw6XNszjEqgbavvqinlKNS6Kqlom3B5M72Tw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
"debounce": "^1.2.0",
|
||||
"easy-bem": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8",
|
||||
"npm": ">=5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-bundle-renderer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.1.2.tgz",
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
"pinia": "^3.0.3",
|
||||
"pinia-plugin-persistedstate": "^4.4.1",
|
||||
"vue": "^3.5.18",
|
||||
"vue-advanced-cropper": "^2.8.9",
|
||||
"vue-router": "^4.5.1",
|
||||
"vue3-carousel": "^0.16.0"
|
||||
},
|
||||
|
||||
59
pages/editar/cooperativa/index.vue
Normal file
59
pages/editar/cooperativa/index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<BContainer class="container">
|
||||
<BRow align-h="center">
|
||||
<BCol class="edit-coop">
|
||||
<h1 class="title">Editar Cooperativa</h1>
|
||||
<div class="form-container">
|
||||
<CompanyForm />
|
||||
</div>
|
||||
</BCol>
|
||||
</BRow>
|
||||
</BContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup (){
|
||||
definePageMeta({
|
||||
layout: 'editar',
|
||||
middleware: 'auth',
|
||||
auth: { authority: 'COOP_MANAGER' }
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.edit-coop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
color: $color-navy;
|
||||
font-size: $xxl;
|
||||
margin-bottom: 50px;
|
||||
text-align: left;
|
||||
@include desktop {
|
||||
width: 40%;
|
||||
}
|
||||
@include tablet {
|
||||
width: 60%;
|
||||
}
|
||||
@include mobile {
|
||||
width: 90%;
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -6,12 +6,14 @@
|
||||
<h1 class="title">Editar perfil</h1>
|
||||
<FormInput
|
||||
v-model="form.full_name"
|
||||
:value="form.full_name ? form.full_name : ''"
|
||||
type="text"
|
||||
label-text="Nombre de usuario"
|
||||
@input="form.full_name = $event"
|
||||
/>
|
||||
<FormInput
|
||||
v-model="form.email"
|
||||
:value="form.email ? form.email : ''"
|
||||
type="text"
|
||||
label-text="Email"
|
||||
@input="form.email = $event"
|
||||
@@ -55,26 +57,28 @@ export default {
|
||||
success: false,
|
||||
}
|
||||
},
|
||||
async fetch() {
|
||||
computed: {
|
||||
...mapState(useAuthStore, ['id', 'access']),
|
||||
},
|
||||
async created() {
|
||||
const config = useRuntimeConfig()
|
||||
try {
|
||||
await $fetch(`/my_user/`, {
|
||||
const response = await $fetch(`/my_user/`, {
|
||||
baseURL: config.public.baseURL,
|
||||
method: 'GET',
|
||||
body: JSON.stringify(this.form),
|
||||
headers: {
|
||||
Authorization: `Bearer ${this.access}`
|
||||
}
|
||||
})
|
||||
//console.log('User data fetched successfully:', response)
|
||||
this.form.full_name = response.full_name
|
||||
this.form.email = response.email
|
||||
this.form.notify = response.notify
|
||||
} catch (err) {
|
||||
console.error('Error fetching user data:', err)
|
||||
this.error = true
|
||||
return
|
||||
}
|
||||
this.form.full_name = response.full_name
|
||||
this.form.email = response.email
|
||||
this.form.notify = response.notify
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAuthStore, ['id', 'access']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions( useAuthStore, ['setUser']),
|
||||
|
||||
@@ -79,8 +79,9 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const config = useRuntimeConfig()
|
||||
const response = await $fetch('/initial', {
|
||||
baseURL: this.$config.public.baseURL,
|
||||
baseURL: config.public.baseURL,
|
||||
method: 'GET'
|
||||
})
|
||||
this.cards = response.cards
|
||||
|
||||
@@ -29,7 +29,7 @@ export const useAuthStore = defineStore('auth', {
|
||||
method: 'POST',
|
||||
body: { email, password }
|
||||
})
|
||||
console.log('Login payload:', payload)
|
||||
//console.log('Login payload:', payload)
|
||||
this.setPayload(payload)
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user