Introduce typescript

frontend/.eslintrc.js

@@ -4,14 +4,11 @@ module.exports = {
     browser: true,
     node: true
   },
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
   extends: [
     '@nuxtjs',
-    'plugin:nuxt/recommended'
+    'plugin:nuxt/recommended',
+    '@nuxtjs/eslint-config-typescript'
   ],
-  // add your custom rules here
   rules: {
     'no-console': 'off',
     'no-restricted-syntax': [
@@ -22,6 +19,11 @@ module.exports = {
       }
     ],
     'vue/valid-template-root': 'off',
-    'space-before-function-paren': ['error', 'never']
+    'space-before-function-paren': ['error', 'never'],
+    'no-useless-constructor': 'off',
+    '@typescript-eslint/no-useless-constructor': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    camelcase: 'off'
   }
 }

frontend/components/containers/settings/ConfigList.vue

@@ -1,14 +1,13 @@
 <template>
   <v-data-table
-    :value="selected"
+    v-model="selected"
     :headers="headers"
-    :items="items"
+    :items="items.toArray()"
     :loading="loading"
     :no-data-text="$t('vuetify.noDataAvailable')"
     item-key="id"
     :loading-text="$t('generic.loading')"
     show-select
-    @input="updateSelected"
   >
     <template v-slot:top>
       <v-dialog
@@ -19,7 +18,7 @@
           <v-btn
             color="primary"
             dark
-            class="mb-2"
+            class="ma-4 text-capitalize"
             v-bind="attrs"
             v-on="on"
           >
@@ -31,73 +30,41 @@
         </v-card>
       </v-dialog>
     </template>
-    <template v-slot:item.model_attrs="{ item }">
-      <pre>{{ JSON.stringify(item.model_attrs, null, 4) }}</pre>
+    <template v-slot:item.modelAttrs="{ item }">
+      <pre>{{ JSON.stringify(item.modelAttrs, null, 4) }}</pre>
     </template>
-    <template v-slot:item.label_mapping="{ item }">
-      <pre>{{ JSON.stringify(item.label_mapping, null, 4) }}</pre>
+    <template v-slot:item.labelMapping="{ item }">
+      <pre>{{ JSON.stringify(item.labelMapping, null, 4) }}</pre>
     </template>
   </v-data-table>
 </template>
 
-<script>
-import { mapActions, mapMutations } from 'vuex'
-import ConfigService from '@/services/config.service'
+<script lang="ts">
+import Vue from 'vue'
+import { headers, ConfigItemList } from '@/models/config/config-item-list'
+import { FromApiConfigItemListRepository } from '@/repositories/config/api'
 
-export default {
-  fetch() {
-    this.loading = true
-    ConfigService.getConfigList({
-      projectId: this.$route.params.id
-    }).then((response) => {
-      this.items = response.data
-    }).catch((error) => {
-      alert(error)
-    })
-    this.loading = false
-  },
+export default Vue.extend({
 
   data() {
     return {
       loading: false,
       options: {},
-      items: [],
+      items: ConfigItemList.valueOf([]),
       selected: [],
       dialog: false,
-      headers: [
-        {
-          text: 'Model name',
-          align: 'left',
-          value: 'model_name',
-          sortable: false
-        },
-        {
-          text: 'Attributes',
-          align: 'left',
-          value: 'model_attrs',
-          sortable: false
-        },
-        {
-          text: 'Mapping',
-          align: 'left',
-          value: 'label_mapping',
-          sortable: false
-        }
-      ]
+      headers
     }
   },
 
-  methods: {
-    ...mapActions('documents', ['getDocumentList', 'updateDocument']),
-    ...mapMutations('documents', ['updateSelected']),
+  async created() {
+    this.loading = true
+    const configRepository = new FromApiConfigItemListRepository()
+    this.items = await configRepository.list(this.$route.params.id)
+    this.loading = false
+  },
 
-    handleUpdateDocument(payload) {
-      const data = {
-        projectId: this.$route.params.id,
-        ...payload
-      }
-      this.updateDocument(data)
-    }
+  methods: {
   }
-}
+})
 </script>

frontend/nuxt.config.js

@@ -64,6 +64,7 @@ export default {
   ],
 
   buildModules: [
+    '@nuxt/typescript-build',
     ['@nuxtjs/google-analytics', {
       id: process.env.GOOGLE_TRACKING_ID
     }]

frontend/package.json

@@ -5,8 +5,8 @@
   "author": "Hironsan",
   "private": true,
   "scripts": {
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
+    "lint": "eslint --ext .ts .js,.vue --ignore-path .gitignore .",
+    "lintfix": "eslint --fix --ext .ts .js,.vue --ignore-path .gitignore .",
     "precommit": "yarn lint",
     "test": "jest",
     "dev": "nuxt",
@@ -33,7 +33,10 @@
     "yarn": "^1.22.4"
   },
   "devDependencies": {
+    "@nuxt/types": "^2.14.12",
+    "@nuxt/typescript-build": "^2.0.4",
     "@nuxtjs/eslint-config": "^3.0.0",
+    "@nuxtjs/eslint-config-typescript": "^5.0.0",
     "@nuxtjs/eslint-module": "^2.0.0",
     "@nuxtjs/google-analytics": "^2.3.0",
     "@vue/test-utils": "^1.0.3",
@@ -41,7 +44,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.1.0",
-    "eslint": "^7.4.0",
+    "eslint": "^7.19.0",
     "eslint-config-standard": ">=14.1.1",
     "eslint-plugin-import": ">=2.22.0",
     "eslint-plugin-jest": ">=23.18.0",

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "ESNext.AsyncIterable",
+      "DOM"
+    ],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": [
+        "./*"
+      ],
+      "@/*": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@types/node",
+      "@nuxt/types"
+    ]
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

frontend/vue-shim.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from 'vue'
+  export default Vue
+}