feat: rename catalog list and card components

weni-ai · Nov 16, 2023 · ca94a8f · ca94a8f
1 parent 8bd56f4
commit ca94a8f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/src/components/whatsAppCatalogs/Card.vue → ...mponents/whatsAppCatalogs/CatalogCard.vue b/src/components/whatsAppCatalogs/Card.vue → ...mponents/whatsAppCatalogs/CatalogCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="whatsapp-catalog-card">
-    <div class="whatsapp-catalog-card__wrapper">
+    <div class="whatsapp-catalog-card__wrapper" @click="$emit('redirectClick')">
       <div class="whatsapp-catalog-card__wrapper__header">
         <div class="whatsapp-catalog-card__wrapper__header__title">
           <span class="u font secondary body-lg color-neutral-darkest bold">
@@ -17,7 +17,7 @@
         </div>
       </div>
 
-      <div class="whatsapp-catalog-card__wrapper__actions">
+      <div class="whatsapp-catalog-card__wrapper__actions" @click.stop>
         <unnnic-switch
           ref="catalogConnectSwitch"
           :value="catalog.is_connected"
@@ -52,7 +52,7 @@
   import { mapActions, mapState } from 'vuex';
 
   export default {
-    name: 'Card',
+    name: 'CatalogCard',
     props: {
       catalog: {
         type: Object,
@@ -99,10 +99,17 @@
       border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
       border-radius: $unnnic-border-radius-md;
       padding: $unnnic-spacing-md;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+
+      &:hover {
+        background-color: $unnnic-color-neutral-lightest;
+      }
 
       &__actions {
         display: flex;
         gap: $unnnic-spacing-xs;
+        cursor: auto;
       }
     }
   }

diff --git a/src/components/whatsAppCatalogs/List.vue → ...mponents/whatsAppCatalogs/CatalogList.vue b/src/components/whatsAppCatalogs/List.vue → ...mponents/whatsAppCatalogs/CatalogList.vue
@@ -33,14 +33,15 @@
       class="whatsapp-catalog-list__cards"
       v-if="whatsAppCloudCatalogs || (!loadingWhatsAppCloudCatalogs && !errorWhatsAppCloudCatalogs)"
     >
-      <Card
+      <CatalogCard
         v-for="(catalog, index) in listItems"
         :key="index"
         :catalog="catalog"
         :enabledCart="commerceSettings.is_cart_enabled"
         @enable="handleEnableCatalog(catalog)"
         @disable="handleDisableCatalog()"
         @toggleCart="toggleCart"
+        @redirectClick="redirectToCatalogProducts(catalog.uuid, catalog.name)"
       />
     </div>
     <div class="whatsapp-catalog-list__pagination">
@@ -84,15 +85,15 @@
 </template>
 
 <script>
-  import Card from '@/components/whatsAppCatalogs/Card';
+  import CatalogCard from '@/components/whatsAppCatalogs/CatalogCard';
   import { mapActions, mapState } from 'vuex';
   import debounce from 'lodash.debounce';
   import { unnnicCallAlert } from '@weni/unnnic-system';
 
   export default {
-    name: 'List',
+    name: 'CatalogList',
     components: {
-      Card,
+      CatalogCard,
     },
     data() {
       return {
@@ -277,6 +278,19 @@
 
         this.fetchData(this.page);
       },
+      redirectToCatalogProducts(catalogUuid, catalogName) {
+        console.log('redirect', catalogUuid);
+        this.$router.push({
+          name: 'WhatsApp Catalog Products',
+          params: {
+            appUuid: this.$route.params.appUuid,
+            catalogUuid,
+          },
+          query: {
+            catalogName,
+          },
+        });
+      },
     },
     watch: {
       page: {

diff --git a/src/views/whatsAppCatalogs/List.vue b/src/views/whatsAppCatalogs/List.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="whatsapp-catalogs">
-    <List v-if="$route.name === 'WhatsApp Catalogs List'" />
+    <CatalogList v-if="$route.name === 'WhatsApp Catalogs List'" />
 
     <router-view v-else />
   </div>
 </template>
 
 <script>
-  import List from '@/components/whatsAppCatalogs/List';
+  import CatalogList from '@/components/whatsAppCatalogs/CatalogList';
 
   export default {
     name: 'WhatsAppCatalogsList',
     components: {
-      List,
+      CatalogList,
     },
   };
 </script>