feat: Add catalog page idea

Reviewed-on: #25

src/assets/icons/tryton-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" version="1.0"><path d="M256 196.25c0 40.122-21.534 60.038-64.603 59.747H67.495C22.498 255.997 0 236.663 0 197.994V60.184C0 20.06 22.016 0 66.049 0h124.384C234.144 0 256 20.206 256 60.62v135.63" style="text-align:start;line-height:125%;-inkscape-font-specification:Kimberley" font-size="108.872" font-weight="400" fill="#1b2019" font-family="Kimberley"/><path d="M19.006 169.515c5.949-3.124 17.076 1.966 22.115 10.12 4.518 7.31 27.406 14.114 35.516 10.558 5.412-2.372 6.779-5.378 7.202-15.844.798-19.685-3.636-35.098-17.99-62.536-7.205-13.77-14.753-29-16.775-33.835C47.052 73.14 41.601 64.6 36.961 59c-9.876-11.91-10.183-15.164-2.078-22.074C47.02 26.581 67.52 43.327 63.095 59.97c-2.178 8.191 2.003 20.14 15.85 45.295 16.431 29.85 33.084 41.94 43.03 31.243 2.57-2.763 5.759-18.178 8.698-42.04 4.421-35.889 4.399-38.037-.47-45.252-8.418-12.475-.48-25.42 12.84-20.943 13.43 4.513 22.192 22.778 13.775 28.714-3.735 2.633-4.942 10.29-6.636 42.097-2.173 40.785-.53 51.7 8.609 57.187 8.121 4.876 10.946 3.885 28.067-9.889 18.167-14.612 25.636-24.069 26.115-33.067.446-8.37 5.992-12.847 14.832-11.972 5.635.56 8.15 2.41 11.3 8.312 6.431 12.053 4.589 19.71-5.212 21.667-7.987 1.592-21.708 19.27-42.815 55.16-22.288 37.897-27.173 41.845-52.152 42.147-10.268.123-24.634-3.295-58.453-13.914-24.663-7.746-48.043-14.468-51.957-14.943-14.142-1.708-21.187-24.12-9.51-30.257z" fill="#ededed"/></svg>

src/components/AdminPurchase.vue

@@ -16,7 +16,7 @@
                 required
                 class="mr-4"
             ></v-autocomplete>
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+            <!-- <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn> -->
             <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
       </v-col>
       <v-col lg="4">

src/components/NavBar.vue

@@ -40,6 +40,7 @@
 </template>
 
 <script>
+ import trytonIcon from '../assets/icons/tryton-icon.svg';
  export default {
      name: 'NavBar',
      data: () => ({
@@ -55,6 +56,9 @@
              { title: 'Cuadres de tarro', route: '/cuadres_de_tarro', icon: 'mdi-chart-bar'},
              { title: 'CSV Tryton', route: '/ventas_para_tryton', icon: 'mdi-file-table'},
              { title: 'Compra adm', route: '/compra_admin', icon: 'mdi-cart'},
+             { title: 'Actualizar Productos De Tryton', route: '/sincronizar_productos_tryton', icon: 'trytonIcon'},
+             { title: 'Actualizar Clientes De Tryton', route: '/sincronizar_clientes_tryton', icon: 'trytonIcon'},
+             { title: 'Actualizar Ventas Tryton', route: '/sincronizar_ventas_tryton', icon: 'trytonIcon'}
          ],
      }),
      watch: {

src/components/Purchase.vue

@@ -16,7 +16,7 @@
                 required
                 class="mr-4"
             ></v-autocomplete>
-            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+            <!--<v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>-->
             <CreateCustomerModal ref="customerModal" @customerCreated="handleNewCustomer"/>
       </v-col>
       <v-col lg="4">

src/pages/catalog.vue

@@ -0,0 +1,130 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title>
+        <span class="headline">Catálogo</span>
+      </v-card-title>
+      <v-card-text>
+        <v-list two-line>
+          <v-list-item v-for="item in items" :key="item.id" class="catalog-item">
+            <v-row no-gutters align="center" class="w-100">
+              <v-col cols="12" md="3" class="d-flex">
+                <v-img :src="item.img" class="product-img" contain></v-img>
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <v-list-item-title class="title">{{ item.name }}</v-list-item-title>
+                <v-list-item-subtitle class="subtitle">{{ item.description }}</v-list-item-subtitle>
+                <div class="prices mt-2">
+                  <div class="price-line">Precio unitario: <strong>{{ currency(item.price) }}</strong></div>
+                  <div class="price-line">Precio total: <strong>{{ currency(item.price * item.quantity) }}</strong></div>
+                </div>
+              </v-col>
+
+              <v-col cols="12" md="3" class="d-flex align-center justify-end">
+                <div class="quantity-controls">
+                  <v-btn small text class="qty-btn" @click="decrease(item)"><v-icon small>mdi-minus</v-icon></v-btn>
+                  <v-text-field
+                    v-model.number="item.quantity"
+                    type="number"
+                    min="0"
+                    class="quantity-input"
+                    dense
+                    outlined
+                    hide-details
+                    aria-label="Cantidad"
+                  />
+                  <v-btn small text class="qty-btn" @click="increase(item)"><v-icon small>mdi-plus</v-icon></v-btn>
+                </div>
+              </v-col>
+            </v-row>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="primary">Ver más</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      items: [
+        { id: 1, name: 'Producto 1', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 2', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 3', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 4', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 5', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 6', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 7', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 8', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 9', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 10', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 11', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 12', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 13', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 14', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 15', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+        { id: 1, name: 'Producto 16', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
+      ],
+    };
+  },
+  methods: {
+    increase(item) {
+      item.quantity = Number(item.quantity) + 1;
+    },
+    decrease(item) {
+      item.quantity = Math.max(0, Number(item.quantity) - 1);
+    },
+    currency(val) {
+      if (val == null) return '-';
+      return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 0 }).format(val);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.headline {
+  font-weight: bold;
+}
+.catalog-item {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.product-img {
+  width: 150px;
+  height: 100px;
+  border-radius: 6px;
+  object-fit: cover;
+}
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.prices .price-line {
+  margin-bottom: 4px;
+}
+.quantity-input {
+  max-width: 90px;
+}
+.quantity-input input {
+  text-align: center;
+}
+.qty-btn {
+  min-width: 36px !important;
+  height: 36px !important;
+  border-radius: 18px !important;
+}
+@media (max-width: 600px) {
+  .product-img {
+    width: 120px;
+    height: 80px;
+  }
+}
+</style>

src/pages/sincronizar_clientes_tryton.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
+      <v-card-title class="text-h5 font-weight-bold text-center">
+        🔄 Sincronización de Clientes
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Esta acción sincronizará los <strong>clientes</strong> desde el sistema
+          <strong>Tryton</strong> hacia la plataforma.
+        </p>
+        <v-alert type="warning" dense border="start" border-color="warning">
+          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
+          y reemplazar datos existentes en la plataforma.  
+          Asegúrese de que la información en Tryton esté actualizada antes de
+          continuar.
+        </v-alert>
+        <p class="mt-4">
+          Durante la sincronización, no se podrán modificar productos en la
+          plataforma para evitar conflictos.
+        </p>
+      </v-card-text>
+
+      <v-card-actions class="justify-center">
+        <v-btn color="primary" @click="startSync">
+          Iniciar Sincronización
+        </v-btn>
+        <v-btn text @click="$router.push('/')">
+          Cancelar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+
+
+    <v-data-table :items="checked_tryton_parties"></v-data-table>
+    <v-data-table :items="created_customers"></v-data-table>
+    <v-data-table :items="failed_parties"></v-data-table>
+    <v-data-table :items="untouched_customers"></v-data-table>
+  </v-container>
+</template>
+
+<script>
+  import CodeDialog from '../components/CodeDialog.vue'
+  import { inject } from 'vue';
+
+  export default {
+    name: 'CustomersFromTryton',
+    data() {
+      return {
+        api: inject('api'),
+        checked_tryton_parties: [],
+        created_customers: [],
+        failed_parties: [],
+        untouched_customers: [],
+        updated_customers: [],
+      }
+    },
+    methods: {
+      startSync() {
+        this.api.getCustomersFromTryton()
+          .then(response => {
+            // Manejar la respuesta exitosa
+            this.checked_tryton_parties = response.checked_tryton_parties.map(id => ({ id }));
+            this.created_customers = response.created_customers.map(id => ({ id }));
+            this.failed_parties = response.failed_parties.map(id => ({ id }));
+            this.untouched_customers = response.untouched_customers.map(id => ({ id }));
+          })
+          .catch(error => {
+            // Manejar el error
+            console.error("Error al sincronizar clientes:", error);
+          });
+      }
+    }
+  }
+ </script>

src/pages/sincronizar_productos_tryton.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
+      <v-card-title class="text-h5 font-weight-bold text-center">
+        🔄 Sincronización de Productos
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Esta acción sincronizará los <strong>productos</strong> desde el sistema
+          <strong>Tryton</strong> hacia la plataforma.
+        </p>
+        <v-alert type="warning" dense border="start" border-color="warning">
+          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
+          y reemplazar datos existentes en la plataforma.  
+          Asegúrese de que la información en Tryton esté actualizada antes de
+          continuar.
+        </v-alert>
+        <p class="mt-4">
+          Durante la sincronización, no se podrán modificar productos en la
+          plataforma para evitar conflictos.
+        </p>
+      </v-card-text>
+
+      <v-card-actions class="justify-center">
+        <v-btn color="primary" @click="startSync">
+          Iniciar Sincronización
+        </v-btn>
+        <v-btn text @click="$router.push('/')">
+          Cancelar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-data-table :items="productos_tryton"></v-data-table>
+  </v-container>
+</template>
+
+<script>
+  import CodeDialog from '../components/CodeDialog.vue'
+  import { inject } from 'vue';
+
+  export default {
+    name: 'ProductsFromTryton',
+    data() {
+      return {
+        api: inject('api'),
+        productos_tryton: [{}],
+        showComponent: false,
+      }
+    },
+    methods: {
+      startSync() {
+        this.productos_tryton = this.api.getProductsFromTryton()
+      }
+    }
+  }
+ </script>

src/pages/sincronizar_ventas_tryton.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified"/>
+  </div>
+  <v-container class="fill-height d-flex align-center justify-center">
+    <v-card class="pa-6" max-width="600" elevation="4">
+      <v-card-title class="text-h5 font-weight-bold text-center">
+        🔄 Sincronización de Ventas
+      </v-card-title>
+
+      <v-card-text>
+        <p>
+          Esta acción sincronizará las <strong>ventas</strong> desde el sistema
+          <strong>Tryton</strong> hacia la plataforma.
+        </p>
+        <v-alert type="warning" dense border="start" border-color="warning">
+          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
+          y reemplazar datos existentes en la plataforma.  
+          Asegúrese de que la información en Tryton esté actualizada antes de
+          continuar.
+        </v-alert>
+      </v-card-text>
+
+      <v-card-actions class="justify-center">
+        <v-btn color="primary" @click="startSync">
+          Iniciar Sincronización
+        </v-btn>
+        <v-btn text @click="$router.push('/')">
+          Cancelar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+    <v-data-table :items="ventas_tryton_failed"></v-data-table>
+    <v-data-table :items="ventas_tryton_successful"></v-data-table>
+  </v-container>
+</template>
+<script>
+  import CodeDialog from '../components/CodeDialog.vue';
+  import { inject } from 'vue';
+
+  export default {
+    name: 'SalesToTryton',
+    data() {
+      return {
+        api: inject('api'),
+        ventas_tryton: [],
+        showComponent: false,
+      }
+    },
+    methods: {
+      startSync() {
+        this.api.sendSalesToTryton()
+          .then(response => {
+            this.ventas_tryton_failed = response.failed.map(id => ({ id }));
+            this.ventas_tryton_successful = response.successful.map(id => ({ id }));
+          })
+          .catch(error => {
+            console.error("Error al sincronizar las ventas", error);
+          });
+      }
+    }
+  }
+</script>

src/services/api.js

@@ -50,6 +50,18 @@ class Api {
   getCSVForTryton() {
     return this.apiImplementation.getCSVForTryton();
   }
+
+  getProductsFromTryton() {
+    return this.apiImplementation.getProductsFromTryton();
+  }
+
+  getCustomersFromTryton() {
+    return this.apiImplementation.getCustomersFromTryton();
+  }
+
+  sendSalesToTryton(){
+    return this.apiImplementation.sendSalesToTryton();
+  }
 }
 
 export default Api;

src/services/django-api.js

@@ -63,6 +63,21 @@ class DjangoApi {
     return this.getRequest(url);
   }
 
+  getProductsFromTryton(){
+    const url = this.base + '/don_confiao/api/importar_productos_de_tryton';
+    return this.postRequest(url, {});
+  }
+
+  getCustomersFromTryton(){
+    const url = this.base + '/don_confiao/api/importar_clientes_de_tryton';
+    return this.postRequest(url, {});
+  }
+
+  sendSalesToTryton(){
+    const url = this.base + '/don_confiao/api/enviar_ventas_a_tryton';
+    return this.postRequest(url, {});
+  }
+
   getRequest(url) {
     return new Promise ((resolve, reject) => {
       fetch(url)