create product functionality and page

pages/editar/productos/[id].vue

@@ -1,5 +1,12 @@
 <template>
   <BContainer class="container">
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        :ok-variant="modalColor"> {{ modalText }}
+    </BModal>
     <BRow align-h="center">
       <BCol class="edit-product">
         <h1 class="title">Editar producto</h1>
@@ -27,6 +34,7 @@
 
 <script>
 import dataProcessing from '~/utils/dataProcessing'
+import { useAuthStore } from '@/stores/auth'
 export default {
   setup() {
     definePageMeta({
@@ -43,22 +51,26 @@ export default {
   data() {
     return {
       form: {},
+      activeModal: false,
+      modalText: '',
+      modalColor: '',
     }
   },
 
   async created() {
     try {
       const config = useRuntimeConfig()
-      const form = await $fetch(`my_products/${this.$route.params.id}/`, {
+      const route = useRoute()
+      this.form = await $fetch(`my_products/${route.params.id}/`, {
         baseURL: config.public.baseURL,
         method: 'GET',
         headers: {
           Authorization: `Bearer ${this.auth.access}`,
         },
       })
-      if (form.source !== 'MANUAL') {
+      if (this.form.source !== 'MANUAL' && this.form.history) {
         try {
-          const result = await $fetch(`history/${form.history}/`, {
+          const result = await $fetch(`history/${this.form.history}/`, {
             baseURL: config.public.baseURL,
             method: 'GET',
             headers: {
@@ -71,7 +83,6 @@ export default {
           form.sync_date = null
         }
       }
-      return { form }
     } catch (error) {
       console.error(error)
     }
@@ -81,24 +92,27 @@ export default {
     formatDatetime: dataProcessing.formatDatetime,
 
     async submitProduct(value) {
+      console.log('Submitting product:', value)
+      const config = useRuntimeConfig()
+      const route = useRoute()
+      //TODO: review PUT method, its sending 200 status but not updating the product
       try {
-        await this.$api.put(`/my_products/${this.$route.params.id}/`, value, {
+        await $fetch(`/my_products/${route.params.id}/`, {
+          baseURL: config.public.baseURL,
+          method: 'PUT',
+          body: value,
           headers: {
-            'Content-Type': 'multipart/form-data',
+            Authorization: `Bearer ${this.auth.access}`,
           },
         })
-        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',
-        })
+        this.modalText = 'Producto 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 updating product:', error)
       }
     },
   },

pages/editar/productos/crear.vue

@@ -1,15 +1,118 @@
 <template>
-  <div>
-    <h1>Crear producto /editar/productos/crear</h1>
-  </div>
+  <BContainer class="container">
+    <BModal 
+        id="modal-center" 
+        v-model="activeModal" 
+        centered 
+        title="latienda.coop" 
+        ok-variant="danger"> {{ modalText }}
+    </BModal>
+    <BRow align-h="center">
+      <BCol class="add-product">
+        <h1 class="title">Añadir producto</h1>
+        <ProductForm @send="submitProduct" />
+      </BCol>
+    </BRow>
+  </BContainer>
 </template>
 
 <script>
-  export default {
-    
-  }
+import { useAuthStore } from '@/stores/auth'
+export default {
+  setup() {
+    definePageMeta({
+      layout: 'editar',
+      middleware: 'auth',
+      auth: { authority: 'COOP_MANAGER' },
+    })
+    const auth = useAuthStore();
+    return {
+      auth
+    }
+  },
+  data() {
+    return {
+      activeModal: false,
+      modalText: '',
+    }
+  },
+  methods: {
+    async submitProduct(value) {
+      console.log('Creating product:', value)
+      const config = useRuntimeConfig()
+      try {
+        await $fetch(`/products/`, {
+          baseURL: config.public.baseURL,
+          method: 'POST',
+          body: value,
+          headers: {
+            Authorization: `Bearer ${this.auth.access}`,
+          },
+        })
+        this.$router.push({
+          name: 'editar-productos',
+          params: { action: 'created' },
+        })
+      } catch (error) {
+        this.modalText = 'Ha habido un error'
+        this.activeModal = true
+        console.error('Error updating product:', error)
+      }
+    }
+  },
+}
 </script>
 
 <style lang="scss" scoped>
+.container {
+  margin-top: 40px;
+  margin-bottom: 80px;
+}
+.add-product {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title {
+  color: $color-navy;
+  font-size: $xxl;
+  margin-bottom: 60px;
+  text-align: left;
+  @include desktop {
+    width: 40%;
+  }
+  @include tablet {
+    width: 60%;
+  }
+  @include mobile {
+    width: 90%;
+    margin-top: 70px;
+  }
+}
+.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-evenly;
+  color: $color-greytext;
+}
+</style>