Merge pull request #25186 from NeOMakinG/migrate-app

Refacto stock page using TypeScript

admin-dev/themes/new-theme/.eslintrc.js

@@ -57,14 +57,23 @@ module.exports = {
   },
   overrides: [
     {
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        project: './tsconfig.json',
+        ecmaFeatures: {
+          jsx: false,
+        },
+      },
       files: ['*.vue'],
       rules: {
         indent: 0,
         'vue/no-mutating-props': 0,
+        'no-undef': 0,
         'vue/no-template-shadow': 0,
       },
-      extends: ['plugin:vue/strongly-recommended'],
-      plugins: ['vue'],
+      extends: ['plugin:vue/strongly-recommended', '@vue/typescript'],
+      plugins: ['vue', '@typescript-eslint'],
     },
     {
       files: ['*.ts'],

admin-dev/themes/new-theme/.webpack/common.js

@@ -77,7 +77,8 @@ module.exports = {
     main: './js/theme',
     maintenance: './js/pages/maintenance',
     manufacturer: './js/pages/manufacturer',
-    manufacturer_address_form: './js/pages/manufacturer/manufacturer_address_form',
+    manufacturer_address_form:
+      './js/pages/manufacturer/manufacturer_address_form',
     merchandise_return: './js/pages/merchandise-return',
     meta: './js/pages/meta',
     module: './js/pages/module',
@@ -159,7 +160,10 @@ module.exports = {
       },
       {
         test: /\.ts?$/,
-        use: 'ts-loader',
+        loader: 'ts-loader',
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+        },
         exclude: /node_modules/,
       },
       {

admin-dev/themes/new-theme/js/app/pages/stock/components/app.vue

@@ -53,38 +53,39 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+  import Vue from 'vue';
   import PSPagination from '@app/widgets/ps-pagination';
   import StockHeader from './header/stock-header';
   import Search from './header/search';
   import LowFilter from './header/filters/low-filter';
 
   const FIRST_PAGE = 1;
 
-  export default {
+  export default Vue.extend({
     name: 'App',
     computed: {
-      isReady() {
+      isReady(): boolean {
         return this.$store.state.isReady;
       },
-      pagesCount() {
+      pagesCount(): number {
         return this.$store.state.totalPages;
       },
-      currentPagination() {
+      currentPagination(): number {
         return this.$store.state.pageIndex;
       },
-      isOverview() {
+      isOverview(): boolean {
         return this.$route.name === 'overview';
       },
     },
     methods: {
-      onPageChanged(pageIndex) {
+      onPageChanged(pageIndex: number): void {
         this.$store.dispatch('updatePageIndex', pageIndex);
         this.fetch('asc');
       },
-      fetch(sortDirection) {
+      fetch(sortDirection?: string): void {
         const action = this.$route.name === 'overview' ? 'getStock' : 'getMovements';
-        const sorting = (sortDirection === 'desc') ? ' desc' : '';
+        const sorting = sortDirection === 'desc' ? ' desc' : '';
         this.$store.dispatch('isLoading');
 
         this.filters = {
@@ -97,23 +98,23 @@
 
         this.$store.dispatch(action, this.filters);
       },
-      onSearch(keywords) {
+      onSearch(keywords: any): void {
         this.$store.dispatch('updateKeywords', keywords);
         this.resetPagination();
         this.fetch();
       },
-      applyFilter(filters) {
+      applyFilter(filters: Record<string, any>): void {
         this.filters = filters;
         this.resetPagination();
         this.fetch();
       },
-      resetFilters() {
+      resetFilters(): void {
         this.filters = {};
       },
-      resetPagination() {
+      resetPagination(): void {
         this.$store.dispatch('updatePageIndex', FIRST_PAGE);
       },
-      onLowStockChecked(isChecked) {
+      onLowStockChecked(isChecked: boolean): void {
         this.filters = {...this.filters, low_stock: isChecked};
         this.fetch();
       },
@@ -127,13 +128,13 @@
     data: () => ({
       filters: {},
     }),
-  };
+  });
 </script>
 
 <style lang="scss" type="text/scss">
-  // hide the layout header
-  #main-div > .header-toolbar {
-    height: 0;
-    display: none;
-  }
+// hide the layout header
+#main-div > .header-toolbar {
+  height: 0;
+  display: none;
+}
 </style>

admin-dev/themes/new-theme/js/app/pages/stock/components/header/breadcrumb.vue

@@ -39,18 +39,20 @@
   </nav>
 </template>
 
-<script>
-  export default {
+<script lang="ts">
+  import Vue from 'vue';
+
+  export default Vue.extend({
     computed: {
-      isOverview() {
+      isOverview(): boolean {
         return this.$route.name === 'overview';
       },
-      catalogLink() {
+      catalogLink(): string {
         return window.data.catalogUrl;
       },
-      stockLink() {
+      stockLink(): string {
         return window.data.stockUrl;
       },
     },
-  };
+  });
 </script>

admin-dev/themes/new-theme/js/app/pages/stock/components/header/filters.vue

@@ -147,39 +147,40 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+  import Vue from 'vue';
   import PSSelect from '@app/widgets/ps-select';
   import PSDatePicker from '@app/widgets/ps-datepicker';
   import PSRadio from '@app/widgets/ps-radio';
   import FilterComponent from './filters/filter-component';
 
-  export default {
+  export default Vue.extend({
     computed: {
-      locale() {
+      locale(): string {
         return window.data.locale;
       },
-      isOverview() {
+      isOverview(): boolean {
         return this.$route.name === 'overview';
       },
-      employees() {
+      employees(): Record<string, any> {
         return this.$store.state.employees;
       },
-      movementsTypes() {
+      movementsTypes(): Record<string, any> {
         return this.$store.state.movementsTypes;
       },
-      categoriesList() {
+      categoriesList(): Record<string, any> {
         return this.$store.getters.categories;
       },
     },
     methods: {
-      onClear(event) {
-        delete this.date_add[event.dateType];
+      onClear(event: any): void {
+        delete this.date_add[<number>event.dateType];
         this.applyFilter();
       },
-      onClick() {
+      onClick(): void {
         this.applyFilter();
       },
-      onFilterActive(list, type) {
+      onFilterActive(list: Array<any>, type: string): void {
         if (type === 'supplier') {
           this.suppliers = list;
         } else {
@@ -188,7 +189,7 @@
         this.disabled = !this.suppliers.length && !this.categories.length;
         this.applyFilter();
       },
-      applyFilter() {
+      applyFilter(): void {
         this.$store.dispatch('isLoading');
         this.$emit('applyFilter', {
           suppliers: this.suppliers,
@@ -199,21 +200,21 @@
           active: this.active,
         });
       },
-      onChange(item) {
+      onChange(item: any): void {
         if (item.itemId === 'id_stock_mvt_reason') {
           this.id_stock_mvt_reason = item.value === 'default' ? [] : item.value;
         } else {
           this.id_employee = item.value === 'default' ? [] : item.value;
         }
         this.applyFilter();
       },
-      onDpChange(event) {
-        this.date_add[event.dateType] = event.date.unix();
+      onDpChange(event: any) {
+        this.date_add[<number>event.dateType] = event.date.unix();
         if (event.oldDate) {
           this.applyFilter();
         }
       },
-      onRadioChange(value) {
+      onRadioChange(value: any): void {
         this.active = value;
         this.applyFilter();
       },
@@ -225,18 +226,20 @@
       PSRadio,
     },
     mounted() {
-      this.date_add = {};
+      this.date_add = [];
       this.$store.dispatch('getSuppliers');
       this.$store.dispatch('getCategories');
     },
-    data: () => ({
-      disabled: true,
-      suppliers: [],
-      categories: [],
-      id_stock_mvt_reason: [],
-      id_employee: [],
-      date_add: {},
-      active: null,
-    }),
-  };
+    data() {
+      return {
+        disabled: true,
+        suppliers: [] as Array<any>,
+        categories: [] as Array<any>,
+        id_stock_mvt_reason: [] as Array<any>,
+        id_employee: [] as Array<any>,
+        date_add: [] as Array<any>,
+        active: null,
+      };
+    },
+  });
 </script>