wip editar producto page

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