From 68d53f684899ae7e063d14afa8024f06f7d5cb67 Mon Sep 17 00:00:00 2001
From: Thomas Nabord <thomas.nabord@prestashop.com>
Date: Wed, 3 Jan 2024 10:21:12 +0100
Subject: [PATCH] Remove use of  and

---
 .../campaign/campaign-table-list.spec.ts      |  8 +++---
 .../campaign/campaign-table-list.vue          |  8 ++----
 .../commons/page-number-selector.vue          | 28 +++++++++++--------
 .../commons/result-number-selector.vue        |  2 +-
 .../commons/table-page-controls.vue           | 17 +++++++----
 .../non-compliant-products-details-page.vue   |  8 ++----
 6 files changed, 36 insertions(+), 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
index c52192e336..73e0042cf1 100644
--- 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
index 6dfb97495b..4546e527bd 100644
--- 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
index a4b1a18641..dd2662fe52 100644
--- 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
index 1ae40f0e97..7e1e50bf87 100644
--- 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
index ba50a9085f..8d59c2022c 100644
--- 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/_dev/apps/ui/src/components/product-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue b/_dev/apps/ui/src/components/product-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue
index 5d52fd170b..42c09e45ed 100644
--- a/_dev/apps/ui/src/components/product-feed-page/non-compliant-products-details-page/non-compliant-products-details-page.vue
+++ b/_dev/apps/ui/src/components/product-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>