Add a repository and a corresponding service

frontend/.eslintrc.js

@@ -7,7 +7,8 @@ module.exports = {
   extends: [
     '@nuxtjs',
     'plugin:nuxt/recommended',
-    '@nuxtjs/eslint-config-typescript'
+    '@nuxtjs/eslint-config-typescript',
+    'prettier/@typescript-eslint'
   ],
   rules: {
     'no-console': 'off',

frontend/components/containers/settings/ConfigList.vue

@@ -3,38 +3,23 @@
     v-model="selected"
     :headers="headers"
     :items="items.toArray()"
-    :loading="loading"
+    :loading="isLoading"
     :no-data-text="$t('vuetify.noDataAvailable')"
     item-key="id"
     :loading-text="$t('generic.loading')"
     show-select
   >
     <template v-slot:top>
-      <v-dialog
-        v-model="dialog"
-        max-width="500px"
-      >
-        <template v-slot:activator="{ on, attrs }">
-          <v-btn
-            color="primary"
-            dark
-            class="ma-4 text-capitalize"
-            v-bind="attrs"
-            v-on="on"
-          >
-            Create
-          </v-btn>
-        </template>
-        <v-card>
-          hoge
-        </v-card>
-      </v-dialog>
-    </template>
-    <template v-slot:item.modelAttrs="{ item }">
-      <pre>{{ JSON.stringify(item.modelAttrs, null, 4) }}</pre>
-    </template>
-    <template v-slot:item.labelMapping="{ item }">
-      <pre>{{ JSON.stringify(item.labelMapping, null, 4) }}</pre>
+      <confirm-dialog
+        :disabled="!isDeletable()"
+        :items="selected"
+        :title="$t('overview.deleteProjectTitle')"
+        :message="$t('overview.deleteProjectMessage')"
+        :button-true-text="$t('generic.yes')"
+        :button-false-text="$t('generic.cancel')"
+        item-key="modelName"
+        @ok="remove"
+      />
     </template>
   </v-data-table>
 </template>
@@ -42,29 +27,51 @@
 <script lang="ts">
 import Vue from 'vue'
 import { headers, ConfigItemList } from '@/models/config/config-item-list'
+import { ConfigApplicationService } from '@/services/application/config.service'
 import { FromApiConfigItemListRepository } from '@/repositories/config/api'
+import ConfirmDialog from '@/components/organisms/utils/ConfirmDialog'
 
 export default Vue.extend({
+  components: {
+    ConfirmDialog
+  },
 
   data() {
     return {
-      loading: false,
-      options: {},
+      isLoading: false,
       items: ConfigItemList.valueOf([]),
       selected: [],
-      dialog: false,
       headers
     }
   },
 
-  async created() {
-    this.loading = true
-    const configRepository = new FromApiConfigItemListRepository()
-    this.items = await configRepository.list(this.$route.params.id)
-    this.loading = false
+  computed: {
+    configService(): ConfigApplicationService {
+      const configRepository = new FromApiConfigItemListRepository()
+      const configService = new ConfigApplicationService(configRepository)
+      return configService
+    }
+  },
+
+  async created(): Promise<void> {
+    this.isLoading = true
+    this.items = await this.configService.list(this.$route.params.id)
+    this.isLoading = false
   },
 
   methods: {
+    async remove(): Promise<void> {
+      this.isLoading = true
+      const projectId = this.$route.params.id
+      for (const item of this.selected) {
+        await this.configService.delete(projectId, item.id)
+      }
+      this.items = await this.configService.list(projectId)
+      this.isLoading = false
+    },
+    isDeletable(): boolean {
+      return this.selected.length > 0
+    }
   }
 })
 </script>

frontend/models/config/config-item-list.ts

@@ -0,0 +1,47 @@
+export class ConfigItemList {
+  constructor(public configItems: ConfigItem[]) {}
+
+  static valueOf(items: ConfigItem[]): ConfigItemList {
+    return new ConfigItemList(items)
+  }
+
+  toArray(): Object[] {
+    return this.configItems.map(item => item.toObject())
+  }
+}
+
+export class ConfigItem {
+  constructor(
+    public id: number,
+    public modelName: string,
+    public modelAttrs: object,
+    public template: string,
+    public labelMapping: object
+  ) {}
+
+  static valueOf(
+    { id, model_name, model_attrs, template, label_mapping }:
+    { id: number, model_name: string, model_attrs: object, template: string, label_mapping: object }
+  ): ConfigItem {
+    return new ConfigItem(id, model_name, model_attrs, template, label_mapping)
+  }
+
+  toObject(): Object {
+    return {
+      id: this.id,
+      modelName: this.modelName,
+      modelAttrs: this.modelAttrs,
+      template: this.template,
+      labelMapping: this.labelMapping
+    }
+  }
+}
+
+export const headers = [
+  {
+    text: 'Model name',
+    align: 'left',
+    value: 'modelName',
+    sortable: false
+  }
+]

frontend/repositories/config/api.ts

@@ -0,0 +1,56 @@
+import ApiService from '@/services/api.service'
+import { ConfigItemListRepository } from '@/repositories/config/interface'
+import { ConfigItemList, ConfigItem } from '@/models/config/config-item-list'
+
+interface ConfigItemResponse {
+  id: number,
+  model_name: string,
+  model_attrs: object,
+  template: string,
+  label_mapping: object
+}
+
+export class FromApiConfigItemListRepository implements ConfigItemListRepository {
+  constructor(
+    private readonly request = ApiService
+  ) {}
+
+  async list(projectId: string): Promise<ConfigItemList> {
+    const url = `/projects/${projectId}/auto-labeling-configs`
+    const response = await this.request.get(url)
+    const responseItems: ConfigItemResponse[] = response.data
+    return ConfigItemList.valueOf(
+      responseItems.map(item => ConfigItem.valueOf(item))
+    )
+  }
+
+  async create(projectId: string, item: ConfigItem): Promise<ConfigItem> {
+    const url = `/projects/${projectId}/auto-labeling-configs`
+    const response = await this.request.post(url, {
+      model_name: item.modelName,
+      model_attrs: item.modelAttrs,
+      template: item.template,
+      label_mapping: item.labelMapping
+    })
+    const responseItem: ConfigItemResponse = response.data
+    return ConfigItem.valueOf(responseItem)
+  }
+
+  async update(projectId: string, item: ConfigItem): Promise<ConfigItem> {
+    const url = `/projects/${projectId}/auto-labeling-configs/${item.id}`
+    const response = await this.request.put(url, {
+      id: item.id,
+      model_name: item.modelName,
+      model_attrs: item.modelAttrs,
+      template: item.template,
+      label_mapping: item.labelMapping
+    })
+    const responseItem: ConfigItemResponse = response.data
+    return ConfigItem.valueOf(responseItem)
+  }
+
+  async delete(projectId: string, itemId: number): Promise<void> {
+    const url = `/projects/${projectId}/auto-labeling-configs/${itemId}`
+    await this.request.delete(url)
+  }
+}

frontend/repositories/config/interface.ts

@@ -0,0 +1,11 @@
+import { ConfigItem, ConfigItemList } from '@/models/config/config-item-list'
+
+export interface ConfigItemListRepository {
+  list(projectId: string): Promise<ConfigItemList>
+
+  create(projectId: string, item: ConfigItem): Promise<ConfigItem>
+
+  delete(projectId: string, itemId: number): Promise<void>
+
+  update(projectId: string, item: ConfigItem): Promise<ConfigItem>
+}

frontend/services/application/config.service.ts

@@ -0,0 +1,16 @@
+import { ConfigItemList } from '@/models/config/config-item-list'
+import { ConfigItemListRepository } from '@/repositories/config/interface'
+
+export class ConfigApplicationService {
+  constructor(
+    private readonly configRepository: ConfigItemListRepository
+  ) {}
+
+  public list(id: string): Promise<ConfigItemList> {
+    return this.configRepository.list(id)
+  }
+
+  public delete(projectId: string, itemId: number) {
+    return this.configRepository.delete(projectId, itemId)
+  }
+}