catalogo y producto page

2025-09-15 09:08:01 +02:00
parent 25f3b60abe
commit 048d679917
12 changed files with 489 additions and 265 deletions
--- a/pages/admin/cooperativas.vue
+++ b/pages/admin/cooperativas.vue
@@ -37,7 +37,7 @@
          </v-toolbar>
        </template>
        <template #[`item.company_name`]="item">
-          <a :href="`/c/${item.item.id}`" target="_blank" class="mr-2">
+          <a :href="`/productoras/${item.item.id}`" target="_blank" class="mr-2">
            {{ item.item.company_name }}
          </a>
        </template>
--- a/pages/busqueda.vue
+++ b/pages/busqueda.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="container mt-5">
-    <div class="row">
+  <div class="">
+    <HeroWithSearch 
+        title="Encuentra tu entidad aliada"
+        subtitle="Colabora, compra o aprende con la economía social"
+      />
+    <div class="c-container row">
      <div class="col-md-3">
        <ProductFilter
        :filters="filters"
@@ -14,12 +18,28 @@
        <BSpinner />
        <span>Cargando productos...</span>
      </div>
-      <div v-if="!loadingProducts" class="col-md-9">
-        <div class="carousel">
-          <h2 class="title">Últimos productos</h2>
-          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" />
+      <!-- <div class="items">
+        <div class="title-container">
+          <div class="title-lines"></div>
+          <h5 class="items-title">Últimos productos</h5>
+          <div class="title-lines"></div>
        </div>
-        <div v-if="hasFilterTags" class="applied-filters">
+        <div class="items-container">
+          <ItemsRow :type="`product`" :items="carouselProducts" />
+          <NuxtLink to="/busqueda" class="link">
+            <ButtonCTA class="button">Ver todos los servicios</ButtonCTA>
+          </NuxtLink>
+        </div>
+      </div> -->
+      <div v-if="!loadingProducts" class="col-md-9 container-fluid">
+        <div class="carousel">
+          <div class="title-container">
+            <h5 class="items-title">Últimos productos y servicios</h5>
+            <div class="title-lines"></div>
+          </div>
+          <ItemsRow class="items" :type="`product`" :items="carouselProducts.results" :items-to-show="3" />
+        </div>
+        <!-- <div v-if="hasFilterTags" class="applied-filters">
          <h2 class="title">FILTROS APLICADOS</h2>
          <div class="filter-buttons">
            <button
@@ -53,31 +73,37 @@
              </button>
            </div>
          </div>
-        </div>
+        </div> -->
        <div class="results">
-          <h2 class="title"></h2>
-          <p class="count">Hay {{ count }} productos</p>
-        </div>
-        
-        <div v-if="products.length !== 0">
-          <div v-for="product in products" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
+          <div class="title-container">
+            <h5 class="items-title">Catálogo</h5>
+            <div class="title-lines"></div>
          </div>
-          <BPagination
-            v-model="currentPage"
-            class="pagination"
-            :total-rows="count"
-            :per-page="perPage"
-            @change="handlePageChange"
-          />
-        </div>
-        <div v-else class="no-results">
-          <p>
-            No hemos encontrado resultados para su búsqueda... pero puede buscar
-            otro o consultar estos productos.
-          </p>
-          <div v-for="product in defaultProducts" :key="product.id">
-            <ProductCard :key="product.key" :product="product" />
+          <p class="count">Resultados de búsqueda: {{ count }} resultados</p>
+          <div v-if="products.length !== 0">
+            <ProductsRelated :related-products="products" :products-per-page="12" />
+            <!-- <div v-for="product in products" :key="product.id">
+              <ProductCard :key="product.key" :product="product" />
+            </div> -->
+            <!-- <BPagination
+              v-model="currentPage"
+              class="pagination"
+              :total-rows="count"
+              :per-page="perPage"
+              @change="handlePageChange"
+            /> -->
+          </div>
+          <div v-else class="no-results">
+            <p class="query-text">
+              No encontramos "{{ queryText }}" en Consumo Cuidado.
+            </p>
+            <p>
+              Prueba un término más general, revisa la ortografía o 
+              <span class="link" @click="clearFilters">limpia los filtros</span>.
+            </p>
+            <!-- <div v-for="product in defaultProducts" :key="product.id">
+              <ProductCard :key="product.key" :product="product" />
+            </div> -->
          </div>
        </div>
      </div>
@@ -112,6 +138,7 @@ export default {
  data() {
    return {
      searchText: '',
+      queryText: '',
      currentPage: 1,
      perPage: 10,
      filterTags: {
@@ -146,12 +173,16 @@ export default {

  watch: {
    '$route.query'(newValue) {
-      //console.log('New Value:', newValue)
+      console.log('New Value:', newValue)
      //console.log('Route changed:', this.$route.fullPath)
      //console.log('Current params:', this.$route.query)
-      this.updateData(newValue)
+      this.queryText = newValue.q || ''
+      if (newValue.q) {
+        this.updateData(newValue)
+      } else {
+        window.location.reload()
+      }
      Object.assign(this.$data, this.$options.data())
-      
    }
  },

@@ -328,11 +359,27 @@ export default {
        })
      }
    },
+
+    clearFilters() {
+      this.currentFilters = null
+      this.appliedFilters = null
+      this.queryText = ''
+      this.$router.push({ 
+        name: 'busqueda'
+      })
+
+    },
  },
 }
 </script>

 <style lang="scss" scoped>
+.c-container {
+  contain: content;
+  width: 100%;
+  min-height: 100dvh;
+  margin-bottom: 2rem;
+}
 .ad {
  margin: 40px auto;
  width: 100%;
@@ -376,10 +423,44 @@ export default {
  }
 }

+.container-fluid {
+  background-color: $color-bg-light;
+  margin-top: 2rem;
+  border-radius: 24px;
+}
+
 .carousel {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2rem;
+  padding: 8rem 8rem 8rem 8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
+  &-title {
+    text-align: center;
+  }
  @include mobile {
    display: none;
  }
+}
+.title-container {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding: 0 1rem;
+  .title-lines {
+    width: 34px;
+    height: 2px;
+    background: $color-consumo-base;
+    margin: 0 8px;
+  }
+  .items-title {
+    font-size: $h5;
+    text-transform: uppercase;
+    padding-top: 10px;
+  }
  .title {
    font-size: $xl;
    color: $color-navy;
@@ -392,13 +473,18 @@ export default {
  }
 }
 .results {
-  .title {
-    font-size: $xl;
-    color: $color-navy;
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1rem;
+  padding: 8rem8rem;
+  border-radius: 24px;
+  padding: 2rem 0;
+  margin-top: 2rem;
  .count {
-    font-size: $xs;
-    color: $color-greytext;
+    padding: 0 1rem;
+    font-size: $s;
+    font-weight: $medium;
  }
 }
 .pagination {
@@ -410,12 +496,26 @@ export default {
 }

 .no-results {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  .query-text {
+    font-size: $xxl;
+    color: $color-primary;
+    font-weight: $medium;
+  }
  p {
    text-align: center;
    font-size: $xl;
-    color: $color-navy;
-    margin-top: 100px;
-    margin-bottom: 100px;
+    color: $color-primary;
+    font-weight: $medium;
+  }
+  .link {
+    color: $color-button;
+    text-decoration: none;
+    cursor: pointer;
  }
 }

@@ -426,5 +526,16 @@ export default {
  align-items: center;
  justify-content: center;
  height: 100%;
+  min-height: 100dvh;
+ background-color: $color-bg-light;
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-top: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
 }
 </style>
--- a/pages/editar/productos/index.vue
+++ b/pages/editar/productos/index.vue
@@ -5,7 +5,7 @@
        <h1 class="title">
          Productos
          <button
-            class="ml-4 mb-1 btn btn-outline-primary btn-sm"
+            class="btn-add"
            @click="redirectToNewProduct"
          >
            +
@@ -14,7 +14,7 @@
      </BCol>
    </BRow>
    <BRow>
-      <BCol class="d-flex flex-row-reverse">
+      <BCol class="d-flex flex-row-reverse mb-3">
        <button class="btn btn-secondary" :disabled="selectedItemsIndexes.length === 0" @click="desactivateProducts">
          Desactivar
        </button>
@@ -26,7 +26,7 @@
        </div>
      </BCol>
    </BRow>
-    <BRow>
+    <BRow class="table-consumo">
      <template v-if="products">
        <v-data-table
          v-model="selectedItemsIndexes"
@@ -37,9 +37,10 @@
          :search="search"
          :loading="loading"
          loading-text="Cargando productos..."
+          rounded
        >
          <template #top>
-            <v-toolbar flat color="white">
+            <v-toolbar flat color="#FDFCFB" rounded>
              <!-- Search -->
              <v-text-field
                v-model="search"
@@ -257,21 +258,46 @@ export default {
  margin-top: 40px;
  margin-bottom: 80px;
 }
+
 .title {
-  color: $color-navy;
-  font-size: $xxl;
-  margin-bottom: 60px;
+  font-size: $h2;
+  color: $color-primary;
+  margin-bottom: 10px;
  @include mobile {
    margin-top: 70px;
  }
 }
-v-toolbar {
-  padding: 0;
+.table-consumo {
+  background-color: $color-bg-light;
+  width: 100%;
+  border-radius: 1rem;
+  
+  .v-toolbar {
+    padding: 0 16px;
+    margin: 10px 0;
+  }
 }
+
 .selected-products {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
 }
+
+.btn-add {
+  background: $color-button;
+  color: #fff;
+  padding: 0rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  text-transform: uppercase;
+  &:hover {
+    background: white;
+    color: $color-button;
+    border: 1px solid $color-button;
+  }
+}
 </style>
--- a/pages/productos/[id].vue
+++ b/pages/productos/[id].vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="">
    <ProductCardDetails
      :product="product"
      :related="related"