Remove deprecated vue apis

_dev/apps/ui/.storybook/preview.js

@@ -46,7 +46,6 @@ initialize({
 
 // import showdown extension
 import '../showdown.js';
-import '../src/utils/Filters';
 
  // app.scss all the styles for the module
  import '../src/assets/scss/app.scss';

_dev/apps/ui/src/components/campaign-creation/campaign-creation-filter-popin/campaign-creation-popin-recap.vue

@@ -28,7 +28,7 @@
                 $t('smartShoppingCampaignCreation.inputDurationLabel1')
               }} </span><br>
             <span class="text-secondary">
-              {{ newCampaign.startDate | timeConverterToDate }}
+              {{ startDate }}
             </span>
           </b-col>
           <b-col
@@ -74,7 +74,7 @@
         {{ $t('smartShoppingCampaignCreation.inputBudgetFeedback') }}
       </dt>
       <dd class="text-secondary mb-2">
-        {{ newCampaign.dailyBudget|formatPrice(newCampaign.currencyCode) }}
+        {{ dailyBudget }}
       </dd>
     </dl>
     <p>
@@ -111,6 +111,8 @@ import PsModal from '@/components/commons/ps-modal.vue';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import compareYears from '@/utils/CompareYears';
 import {changeCountryNameToCode} from '@/utils/Countries';
+import {timeConverterToDate} from '@/utils/Dates';
+import {formatPrice} from '@/utils/Price';
 
 export default defineComponent({
   name: 'SSCCreationPopinRecap',
@@ -149,16 +151,25 @@ export default defineComponent({
     dimensionName() {
       return this.$store.state.campaigns.dimensionChosen.name;
     },
+    startDate(): string {
+      return timeConverterToDate(this.newCampaign.startDate);
+    },
     endDate() {
       if (this.newCampaign.endDate) {
         const isThereAnEndDate = compareYears(this.newCampaign.endDate);
 
         return isThereAnEndDate
-          ? this.$options.filters.timeConverterToDate(this.newCampaign.endDate)
+          ? timeConverterToDate(this.newCampaign.endDate)
           : null;
       }
       return '-';
     },
+    dailyBudget(): string {
+      return formatPrice(
+        this.newCampaign.dailyBudget,
+        this.newCampaign.currencyCode,
+      );
+    },
   },
 
   methods: {

_dev/apps/ui/src/components/campaign-creation/campaign-creation.vue

@@ -631,7 +631,7 @@ export default defineComponent({
         ?.currencyCode;
     },
     currencySymbol(): string {
-      return this.$options.filters.formatPrice(0, this.currency).replace(/[\s.,0]*/g, '');
+      return formatPrice(0, this.currency).replace(/[\s.,0]*/g, '');
     },
     finalCampaignFilters() {
       // IMPORTANT: Do not send the filters property if the campaign has unhandled filters

_dev/apps/ui/src/components/campaign/campaign-table-list-row.vue

@@ -100,9 +100,10 @@ import CampaignStatus, {CampaignStatusToggle} from '@/enums/reporting/CampaignSt
 import compareYears from '@/utils/CompareYears';
 import {CampaignPerformanceObject, CampaignStatusPayload} from '@/store/modules/campaigns/state';
 import {timeConverterToDate} from '@/utils/Dates';
-import {formatPrice} from '../../utils/Price';
+import {formatPrice} from '@/utils/Price';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import AlertLowBudget from './alert-low-budget.vue';
+import {changeCountriesCodesToNames} from '@/utils/Countries';
 
 export default defineComponent({
   name: 'CampaignTableListRow',
@@ -130,7 +131,7 @@ export default defineComponent({
       return this.$t('campaigns.dateLabel.from', {startDate: timeConverterToDate(this.campaign.startDate)});
     },
     campaignCountryName() {
-      return this.$options.filters.changeCountriesCodesToNames([this.campaign.targetCountry])[0];
+      return changeCountriesCodesToNames([this.campaign.targetCountry])[0];
     },
     currencyCode(): string {
       return this.campaign.currencyCode || this.$store.getters['googleAds/GET_GOOGLE_ADS_ACCOUNT_CHOSEN']?.currencyCode;

_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);
     });
   });

_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,
 });

_dev/apps/ui/src/components/campaign/reporting/key-metrics/key-metrics-chart-wrapper.vue

@@ -44,6 +44,7 @@ import KpiType from '@/enums/reporting/KpiType';
 import ChartCanvas from '@/components/chart/chart-canvas.vue';
 import {Kpis, DailyResultTypes} from '@/store/modules/campaigns/state';
 import {timeConverterToDate} from '@/utils/Dates';
+import {formatPrice} from '@/utils/Price';
 import {externalTooltipHandler} from '@/utils/ChartTooltip';
 
 const skipped = (
@@ -215,7 +216,7 @@ export default defineComponent({
         || type === KpiType.COSTS;
     },
     getFormattedValue(value: string|number|Point|null) {
-      return this.$options.filters.formatPrice(value, this.currencyCode);
+      return formatPrice(value, this.currencyCode);
     },
   },
 });

_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>

_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));
     },
 
   },

_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>

_dev/apps/ui/src/components/google-ads-account/google-ads-account-popin-new.vue

@@ -209,6 +209,7 @@ import SelectCountry from '../commons/select-country.vue';
 import SegmentGenericParams from '@/utils/SegmentGenericParams';
 import {GoogleAccountContext} from '@/store/modules/accounts/state';
 import BannerAds from '../commons/banner-ads.vue';
+import {changeCountryCodeToName} from '@/utils/Countries';
 
 export default defineComponent({
   name: 'GoogleAdsAccountPopinNew',
@@ -261,13 +262,13 @@ export default defineComponent({
     saveCountrySelected(value) {
       this.newAccountInfos.country = value;
     },
-    defaultCountry() {
+    defaultCountry(): string {
       if (!this.$store.state.app.psxMtgWithGoogleDefaultShopCountry) {
         return '';
       }
-      return this.$options.filters.changeCountriesCodesToNames(
-        [this.$store.state.app.psxMtgWithGoogleDefaultShopCountry],
-      )[0];
+      return changeCountryCodeToName(
+        this.$store.state.app.psxMtgWithGoogleDefaultShopCountry,
+      );
     },
   },
   props: {

_dev/apps/ui/src/components/product-feed-page/dashboard/sync-history/sync-history.vue

@@ -4,10 +4,11 @@
   </ul>
 </template>
 
-<script>
+<script lang="ts">
 import {
   SyncHystoryType,
 } from '@/enums/product-feed/sync-history.ts';
+import {timeConverterToDate, timeConverterToHour} from '@/utils/Dates';
 
 export default {
   props: {
@@ -40,7 +41,7 @@ export default {
             ),
             description: this.$i18n.t(
               'productFeedPage.syncSummary.syncHistory.subtitle.happenedOnDate',
-              {date: this.$options.filters.timeConverterToDate(this.syncInfos.lastUpdatedAt)},
+              {date: timeConverterToDate(this.syncInfos.lastUpdatedAt)},
             ),
             icon: 'change_circle',
           },
@@ -56,8 +57,8 @@ export default {
             ),
             description: this.$i18n.t(
               'productFeedPage.syncSummary.syncHistory.subtitle.willHappenOnDate', [
-                this.$options.filters.timeConverterToDate(this.syncInfos.nextJobAt),
-                this.$options.filters.timeConverterToHour(this.syncInfos.nextJobAt),
+                timeConverterToDate(this.syncInfos.nextJobAt),
+                timeConverterToHour(this.syncInfos.nextJobAt),
               ]),
             icon: 'schedule',
           },
@@ -72,7 +73,7 @@ export default {
             description: this.$i18n.t(
               'productFeedPage.syncSummary.syncHistory.subtitle.happenedOnDate',
               {
-                date: this.$options.filters.timeConverterToDate(
+                date: timeConverterToDate(
                   this.syncInfos.lastUpdatedAt ?? this.syncInfos.jobEndedAt,
                 ),
               },
@@ -86,9 +87,9 @@ export default {
             ),
             description: this.$i18n.t(
               'productFeedPage.syncSummary.syncHistory.subtitle.error', [
-                this.$options.filters.timeConverterToDate(this.syncInfos.lastUpdatedAt
+                timeConverterToDate(this.syncInfos.lastUpdatedAt
                 ?? this.syncInfos.jobEndedAt),
-                this.$options.filters.timeConverterToHour(this.syncInfos.lastUpdatedAt
+                timeConverterToHour(this.syncInfos.lastUpdatedAt
                 ?? this.syncInfos.jobEndedAt),
               ],
             ),
@@ -106,7 +107,7 @@ export default {
           ),
           description: this.$i18n.t(
             'productFeedPage.syncSummary.syncHistory.subtitle.happenedOnDate',
-            {date: this.$options.filters.timeConverterToDate(this.syncInfos.lastUpdatedAt)},
+            {date: timeConverterToDate(this.syncInfos.lastUpdatedAt)},
           ),
           icon: 'check_circle',
           lineColor: 'info',
@@ -117,7 +118,7 @@ export default {
           ),
           description: this.$i18n.t(
             'productFeedPage.syncSummary.syncHistory.subtitle.happenedOnDate',
-            {date: this.$options.filters.timeConverterToDate(this.syncInfos.jobEndedAt)},
+            {date: timeConverterToDate(this.syncInfos.jobEndedAt)},
           ),
           icon: 'check_circle',
           lineColor: 'info',
@@ -128,8 +129,8 @@ export default {
           ),
           description: this.$i18n.t(
             'productFeedPage.syncSummary.syncHistory.subtitle.willHappenOnDate', [
-              this.$options.filters.timeConverterToDate(this.syncInfos.nextJobAt),
-              this.$options.filters.timeConverterToHour(this.syncInfos.nextJobAt),
+              timeConverterToDate(this.syncInfos.nextJobAt),
+              timeConverterToHour(this.syncInfos.nextJobAt),
             ],
 
           ),

_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>