From 2633959ce8afbd0f74062c91c24b4110df36ddff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Wed, 20 Aug 2025 15:08:53 +0200
Subject: [PATCH] wip editar producto page

---
 components/ProductForm.vue      | 346 ++++++++++++++++++++++++++++++++
 pages/editar/productos/[id].vue | 153 +++++++++++++-
 2 files changed, 492 insertions(+), 7 deletions(-)
 create mode 100644 components/ProductForm.vue

diff --git a/components/ProductForm.vue b/components/ProductForm.vue
new file mode 100644
index 0000000..22c3781
--- /dev/null
+++ b/components/ProductForm.vue
@@ -0,0 +1,346 @@
+<template>
+  <form class="form" @submit.prevent="sendProduct">
+    {{ form }}
+    <div class="cont-col">
+      <BFormCheckbox
+          id="customSwitch1"
+          v-model="form.active"
+          class="label"
+          :value="form.active"
+        >Activo
+          <span class="help-text"
+          >Desactiva el producto si quieres paralizar temporalmente su
+          venta</span
+        >
+      </BFormCheckbox>
+    </div>
+    <br />
+    <FormHeader title="general" />
+    <p class="help-text">
+      Estos son los datos básicos de un producto. Procura completar el mayor
+      número de campos posible. Los campos señalados con asterisco (*) son
+      obligatorios, los demás son opcionales. Si el producto o servicio no tiene
+      precio asignado, aparecerá "Consultar precio".
+    </p>
+    <fieldset class="fieldset">
+      <div class="cont">
+        <FormInput
+          v-model="form.name"
+          :value="form.name ? form.name : ''"
+          type="text"
+          label-text="Nombre"
+          required
+          @input="form.name = $event"
+        />
+        <FormInput
+          v-model="form.price"
+          min="0"
+          step="0.01"
+          type="number"
+          label-text="Precio"
+          placeholder="precio + iva"
+        />
+      </div>
+      <div class="cont">
+        <FormInput
+          v-model="form.url"
+          type="text"
+          label-text="Url"
+          placeholder="enlace directo al producto en tu tienda o web"
+        />
+        <small class="error" v-if="form.url && !isValidUrl(form.url)"
+          >La url no es válida</small
+        >
+        <br />
+        <FormInput
+          v-model="form.sku"
+          type="text"
+          label-text="SKU o identificador"
+        />
+      </div>
+      <div class="cont-col">
+        <label for="imagen">Imagen</label>
+        <client-only>
+          <FormInputImage :imageUrl="form.image" @change="handleImage" />
+        </client-only>
+      </div>
+      <!-- <div class="cont-col">
+        <input
+          id="imagen"
+          type="file"
+          accept="image/*"
+          class="imagenInput"
+          placeholder="Elige una imagen"
+          @change="handleImage"
+        />
+      </div> -->
+      <div class="cont-col">
+        <label for="">Descripción del producto</label>
+        <textarea v-model="form.description" class="textarea" type="text" />
+      </div>
+      <div class="cont">
+        <FormInput v-model="form.stock" type="number" label-text="Stock" />
+        <FormInput
+          v-model="form.discount"
+          step="0.01"
+          type="number"
+          label-text="Descuento"
+        />
+      </div>
+      <div class="cont-col">
+        <FormInput v-model="form.identifiers" label-text="Identificador único" />
+      </div>
+    </fieldset>
+    <fieldset class="fieldset">
+      <FormHeader title="categorías" />
+      <p class="help-text">
+        Estos datos ayudan a que tu producto sea encontrado por los clientes.
+        Procura completar el mayor número de campos posibles. Los campos
+        señalados con asterisco (*) son obligatorios, los demás son opcionales.
+      </p>
+
+      <div class="cont-col">
+        <label for="category">Categoría*</label>
+        <b-form-input
+          v-model="form.category"
+          autocomplete="off"
+          list="my-list-id"
+          id="category"
+        ></b-form-input>
+
+        <datalist id="my-list-id">
+          <option v-for="(choice, index) in categories" :key="index">
+            {{ choice }}
+          </option>
+        </datalist>
+        <!-- <b-form-select required v-model="form.category" name="" id="category">
+          <option disabled value="">Categoría</option>
+          <option
+            v-for="(category, key) in categories"
+            :key="key"
+            :value="category"
+          >
+            {{ category }}
+          </option>
+        </b-form-select> -->
+      </div>
+      <div class="cont-col">
+        <label for="tags-basic">Palabras clave</label>
+        <b-form-tags
+          v-model="form.tags"
+          placeholder="Añade palabras clave (moda, complementos...)"
+          input-id="tags-basic"
+        ></b-form-tags>
+      </div>
+      <div class="cont-col">
+        <label for="tags-basic">Atributos</label>
+        <b-form-tags
+          v-model="form.attributes"
+          placeholder="Añade características del producto (talla, color...)"
+          input-id="tags-basic"
+        ></b-form-tags>
+      </div>
+    </fieldset>
+    <FormHeader title="envío" />
+    <fieldset class="fieldset">
+      <div class="cont-col">
+        <label for="">Condiciones de envío</label>
+        <p class="help-text">
+          Aquí podrás indicar las condiciones de envío específicas para este
+          producto. Si no lo rellenas se mostrarán las opciones por defecto que
+          puedes editar en tu formulario de edición de la Cooperativa en el
+          apartado condiciones de envío.
+        </p>
+        <textarea v-model="form.shipping_terms" class="textarea" type="text" />
+      </div>
+      <div class="cont-col">
+        <FormInput
+          v-model="form.shipping_cost"
+          step="0.01"
+          type="number"
+          label-text="Gastos de envío"
+          placeholder="ej. 4,50"
+        />
+      </div>
+    </fieldset>
+    <div class="submit-btn" align="center">
+      <SubmitButton text="guardar" imageUrl="" />
+    </div>
+  </form>
+</template>
+
+<script>
+import FormInputImage from './FormInputImage.vue'
+import dataProcessing from '~/utils/dataProcessing'
+export default {
+  components: { FormInputImage },
+  props: ['productForm'],
+  data() {
+    return {
+      form: {
+        sku: '',
+        name: '',
+        description: '',
+        image: null,
+        url: '',
+        price: '',
+        shipping_cost: '',
+        shipping_terms: '',
+        source: 'MANUAL',
+        active: true,
+        discount: '',
+        stock: null,
+        category: '',
+        tags: [],
+        attributes: [],
+        identifiers: '',
+      },
+      // tagsArray: ['tag1', 'tag2', 'tag3', 'tag33'],
+      categories: [
+        'Alimentación, bebida y tabaco',
+        'Arte y ocio',
+        'Bebés y niños pequeños',
+        'Bricolaje',
+        'Cámaras y ópticas',
+        'Casa y jardín',
+        'Economía e industria',
+        'Electrónica',
+        'Elementos religiosos y ceremoniales',
+        'Equipamiento deportivo',
+        'Juegos y juguetes',
+        'Maletas y bolsos de viaje',
+        'Material de oficina',
+        'Mobiliario',
+        'Multimedia',
+        'Productos para adultos',
+        'Productos para mascotas y animales',
+        'Ropa y accesorios',
+        'Salud y belleza',
+        'Software',
+        'Vehículos y recambios',
+      ],
+    }
+  },
+
+  mounted() {
+    if (this.productForm) {
+      Object.keys(this.form).forEach((key) => {
+        this.form[key] = this.productForm[key]
+      })
+    }
+    this.getAllCategories()
+  },
+
+  methods: {
+    isValidUrl: dataProcessing.isValidUrl,
+    async getAllCategories() {
+      const { data } = await this.$api.get(`/products/all_categories/`)
+      this.categories = data
+    },
+    parseForm() {
+      const formData = new FormData()
+
+      Object.keys(this.form).forEach((key) => {
+        if ((key === 'tags') | (key === 'attributes')) {
+          formData.append(key, JSON.stringify(this.form[key]))
+        } else if (this.form[key] || this.form[key] === '')
+          formData.append(key, this.form[key])
+      })
+      if (typeof formData.get('image') === 'string') {
+        formData.delete('image')
+      }
+
+      return formData
+    },
+
+    async handleImage(e) {
+      this.form.image = e
+    },
+
+    sendProduct() {
+      const formData = this.parseForm()
+      this.$emit('send', formData)
+    },
+  },
+}
+</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-top: 40px;
+  margin-bottom: 40px;
+}
+.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: 10px 0 15px 0;
+  }
+}
+.submit-btn {
+  margin-top: 20px;
+}
+.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 {
+    text-decoration: underline;
+    color: $color-greytext;
+  }
+}
+.error {
+  color: $color-error;
+}
+</style>
diff --git a/pages/editar/productos/[id].vue b/pages/editar/productos/[id].vue
index 72aa402..2ad8a48 100644
--- a/pages/editar/productos/[id].vue
+++ b/pages/editar/productos/[id].vue
@@ -1,15 +1,154 @@
 <template>
-  <div>
-    <h1>Editar producto /editar/productos/:id</h1>
-  </div>
+  <BContainer class="container">
+    <BRow align-h="center">
+      <BCol class="edit-product">
+        <h1 class="title">Editar producto</h1>
+        <ProductForm :product-form="form" @send="submitProduct" />
+        <div v-if="form.source !== 'MANUAL'" class="data">
+          <dl class="creation-data">
+            <dt>Fecha de creación:</dt>
+            <dd>{{ formatDatetime(form.created) }}</dd>
+
+            <dt>Fecha de actualización:</dt>
+            <dd>{{ formatDatetime(form.updated) }}</dd>
+          </dl>
+          <dl class="import-data">
+            <dt>Fecha de importación:</dt>
+            <dd>{{ formatDatetime(form.sync_date) }}</dd>
+
+            <dt>Importado desde:</dt>
+            <dd>{{ form.source }}</dd>
+          </dl>
+        </div>
+      </BCol>
+    </BRow>
+  </BContainer>
 </template>
 
 <script>
-  export default {
-    
-  }
+import dataProcessing from '~/utils/dataProcessing'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'editar',
+      middleware: 'auth',
+      auth: { authority: 'COOP_MANAGER' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
+  },
+
+  data() {
+    return {
+      form: {},
+    }
+  },
+
+  async created() {
+    try {
+      const config = useRuntimeConfig()
+      const form = await $fetch(`my_products/${this.$route.params.id}/`, {
+        baseURL: config.public.baseURL,
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${this.auth.access}`,
+        },
+      })
+      if (form.source !== 'MANUAL') {
+        try {
+          const result = await $fetch(`history/${form.history}/`, {
+            baseURL: config.public.baseURL,
+            method: 'GET',
+            headers: {
+              Authorization: `Bearer ${this.auth.access}`,
+            },
+          })
+          form.sync_date = result.data.sync_date
+        } catch (error) {
+          console.error(error)
+          form.sync_date = null
+        }
+      }
+      return { form }
+    } catch (error) {
+      console.error(error)
+    }
+  },
+
+  methods: {
+    formatDatetime: dataProcessing.formatDatetime,
+
+    async submitProduct(value) {
+      try {
+        await this.$api.put(`/my_products/${this.$route.params.id}/`, value, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        })
+        this.$bvToast.toast(`Producto actualizado correctamente`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+        })
+      } catch {
+        this.$bvToast.toast(`Ha habido un error`, {
+          title: 'latienda.coop',
+          autoHideDelay: 5000,
+          appendToast: true,
+          variant: 'danger',
+        })
+      }
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.edit-product {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 60px;
+  width: 60%;
+}
+.help-text {
+  border: 1px solid $color-greylayout;
+  border-radius: 8px;
+  padding: 12px;
+  text-align: justify;
+  hyphens: auto;
+  font-size: $xs;
+  font-weight: $regular;
+  color: $color-greylayout;
+  font-family: $font-secondary;
+  background-color: $color-light;
 
-</style>
\ No newline at end of file
+  a {
+    text-decoration: underline;
+    color: $color-greytext;
+  }
+}
+
+.data {
+  margin: 0 100px;
+  margin-top: 80px;
+  font-size: $xs;
+  display: flex;
+  justify-content: space-between;
+  color: $color-greytext;
+}
+.creation-data,
+.import-data {
+  padding: 20px;
+}
+</style>