edit cooperative page and functionality

components/CompanyForm.vue

@@ -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>

components/FormInput.vue

@@ -4,6 +4,7 @@
       >{{ labelText + (required ? '*' : '') }}
       <input
         v-model="inputValue"
+        :value="value ? value : inputValue"
         :required="required"
         :type="type"
         :step="step"

components/FormInputImage.vue

@@ -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>

components/NavBarEditar.vue

@@ -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
     },
   },
 }

package-lock.json

@@ -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",

package.json

@@ -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"
   },

pages/editar/cooperativa/index.vue

@@ -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>

pages/editar/perfil/index.vue

@@ -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']),

pages/index.vue

@@ -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

stores/auth.ts

@@ -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)
     },