Remove use of and

PrestaShopCorp · Jan 3, 2024 · 68d53f6 · 68d53f6
1 parent d450006
commit 68d53f6
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 35 deletions.
diff --git a/_dev/apps/ui/src/components/campaign/campaign-table-list.spec.ts b/_dev/apps/ui/src/components/campaign/campaign-table-list.spec.ts
@@ -412,7 +412,7 @@ describe('CampaignTableList', () => {
       expect(wrapper.findComponent(tablePageControlsVue).exists()).toBe(true);
       expect(wrapper.vm.activePage).toBe(1);
 
-      await wrapper.vm.$root.$emit('changePage', 3);
+      await wrapper.findComponent(tablePageControlsVue).vm.$emit('changePage', 3);
 
       expect(wrapper.vm.activePage).toBe(3);
     });
@@ -427,7 +427,7 @@ describe('CampaignTableList', () => {
       expect(wrapper.findComponent(tablePageControlsVue).exists()).toBe(true);
       expect(wrapper.vm.totalPages).toBe(13);
 
-      await wrapper.vm.$root.$emit('changeLimit', 50);
+      await wrapper.findComponent(tablePageControlsVue).vm.$emit('changeLimit', 50);
 
       expect(wrapper.vm.totalPages).toBe(3);
     });
@@ -445,10 +445,10 @@ describe('CampaignTableList', () => {
 
       expect(campaignsListAction).toHaveBeenCalledTimes(1);
 
-      await wrapper.vm.$root.$emit('changeLimit', 50);
+      await wrapper.findComponent(tablePageControlsVue).vm.$emit('changeLimit', 50);
       expect(campaignsListAction).toHaveBeenCalledTimes(2);
 
-      await wrapper.vm.$root.$emit('changePage', 3);
+      await wrapper.findComponent(tablePageControlsVue).vm.$emit('changePage', 3);
       expect(campaignsListAction).toHaveBeenCalledTimes(3);
     });
   });

diff --git a/_dev/apps/ui/src/components/campaign/campaign-table-list.vue b/_dev/apps/ui/src/components/campaign/campaign-table-list.vue
@@ -107,6 +107,8 @@
           :total-pages="totalPages"
           :active-page="activePage"
           :selected-filter-quantity-to-show="pageSize"
+          @changeLimit="changeLimit"
+          @changePage="changePageTo"
         />
       </b-card-body>
     </b-card>
@@ -248,15 +250,9 @@ export default defineComponent({
     },
   },
   mounted() {
-    this.$root.$on('changeLimit', this.changeLimit);
-    this.$root.$on('changePage', this.changePageTo);
     this.fetchCampaigns();
     this.$store.dispatch('campaigns/GET_DIMENSIONS_FILTERS', null);
   },
-  beforeDestroy() {
-    this.$root.$off('changeLimit', this.changeLimit);
-    this.$root.$off('changePage', this.changePageTo);
-  },
   googleUrl,
   CampaignTypes,
 });

diff --git a/_dev/apps/ui/src/components/commons/page-number-selector.vue b/_dev/apps/ui/src/components/commons/page-number-selector.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="ps_gs-table-controls__go-to d-flex align-items-center">
     <span class="flex-shrink-0">{{ $t('productFeedPage.approvalTable.goToLabel') }}</span>
-    <b-form-input
-      class="ml-2 maxw-sm-72 flex-grow-0"
-      type="text"
-      size="sm"
-      pattern="[0-9]*"
-      v-model.number="nbPageToGo"
-    />
+    <b-form @submit.prevent="goToPage">
+      <b-form-input
+        class="ml-2 maxw-sm-72 flex-grow-0"
+        type="text"
+        size="sm"
+        pattern="[0-9]*"
+        v-model.number="nbPageToGo"
+      />
+    </b-form>
     <b-button
       variant="primary"
       class="ml-2"
@@ -19,18 +21,20 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import {defineComponent} from 'vue';
+
+export default defineComponent({
   name: 'PageNumberSelector',
   data() {
     return {
-      nbPageToGo: null,
+      nbPageToGo: null as number|null,
     };
   },
   methods: {
     goToPage() {
-      this.$root.$emit('changePage', this.nbPageToGo);
+      this.$emit('changePage', this.nbPageToGo);
     },
   },
-};
+});
 </script>
diff --git a/_dev/apps/ui/src/components/commons/result-number-selector.vue b/_dev/apps/ui/src/components/commons/result-number-selector.vue
@@ -32,7 +32,7 @@ export default {
   methods: {
     onChangeLimit(limitChosen) {
       this.selectedFilterQuantityToShow = limitChosen;
-      this.$root.$emit('changeLimit', Number(limitChosen));
+      this.$emit('changeLimit', Number(limitChosen));
     },
 
   },

diff --git a/_dev/apps/ui/src/components/commons/table-page-controls.vue b/_dev/apps/ui/src/components/commons/table-page-controls.vue
@@ -14,6 +14,7 @@
   >
     <ResultNumberSelector
       :selected-filter-quantity-to-show="selectedFilterQuantityToShow"
+      @changeLimit="$emit('changeLimit', $event)"
     />
 
     <nav
@@ -30,15 +31,19 @@
         class="mb-0"
       />
     </nav>
-    <PageNumberSelector v-if="needPageSelector" />
+    <PageNumberSelector
+      v-if="needPageSelector"
+      @changePage="goToPage($event)"
+    />
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import {defineComponent} from 'vue';
 import PageNumberSelector from './page-number-selector.vue';
 import ResultNumberSelector from './result-number-selector.vue';
 
-export default {
+export default defineComponent({
   name: 'TableControls',
   components: {
     PageNumberSelector,
@@ -66,11 +71,11 @@ export default {
     },
   },
   methods: {
-    goToPage(page) {
+    goToPage(page: number) {
       if (page > 0 && page <= this.totalPages) {
-        this.$root.$emit('changePage', page);
+        this.$emit('changePage', page);
       }
     },
   },
-};
+});
 </script>
diff --git a/...uct-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue b/...uct-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue
@@ -120,6 +120,8 @@
           :total-pages="totalPages"
           :active-page="activePage+1"
           :selected-filter-quantity-to-show="pageSize"
+          @changeLimit="pageChanged"
+          @changePage="limitChanged"
         />
       </b-card-body>
     </b-card>
@@ -212,12 +214,6 @@ export default defineComponent({
   },
   mounted() {
     this.getIssues();
-    this.$root.$on('changePage', this.pageChanged);
-    this.$root.$on('changeLimit', this.limitChanged);
-  },
-  beforeDestroy() {
-    this.$root.$off('changePage', this.pageChanged);
-    this.$root.$off('changeLimit', this.limitChanged);
   },
 });
 </script>