Merge pull request #1926 from doccano/refactor/frontendModels

[Refactoring] frontend models

frontend/components/project/FormUpdate.vue

@@ -99,8 +99,8 @@
               v-model="tagInput"
               clearable
               :prepend-icon="mdiPlusCircle"
-              @keyup.enter="addTag()"
-              @click:prepend="addTag()"
+              @keyup.enter="addTag"
+              @click:prepend="addTag"
             >
             </v-text-field>
           </v-col>
@@ -212,8 +212,8 @@ export default {
       this.tags = await this.$services.tag.list(this.projectId)
     },
 
-    addTag() {
-      this.$services.tag.create(this.projectId, this.tagInput)
+    async addTag() {
+      await this.$services.tag.create(this.projectId, this.tagInput)
       this.tagInput = ''
       this.getTags()
     },

frontend/domain/models/comment/comment.ts

@@ -1,38 +1,23 @@
-import 'reflect-metadata'
-import { Expose, Type } from 'class-transformer'
-
 export class CommentItem {
-  id: number
-  user: number
-  username: string
-  example: number
-  text: string
-
-  @Expose({ name: 'created_at' })
-  createdAt: string
+  constructor(
+    readonly id: number,
+    readonly user: number,
+    readonly username: string,
+    readonly example: number,
+    readonly text: string,
+    readonly createdAt: string
+  ) {}
 
   by(userId: number) {
     return this.user === userId
   }
-
-  toObject(): Object {
-    return {
-      id: this.id,
-      user: this.user,
-      username: this.username,
-      document: this.example,
-      text: this.text,
-      created_at: this.createdAt
-    }
-  }
 }
 
 export class CommentItemList {
-  count: number
-  next: string | null
-  prev: string | null
-
-  @Type(() => CommentItem)
-  @Expose({ name: 'results' })
-  items: CommentItem[]
+  constructor(
+    readonly count: number,
+    readonly next: string | null,
+    readonly prev: string | null,
+    readonly items: CommentItem[]
+  ) {}
 }

frontend/domain/models/example/example.ts

@@ -1,49 +1,27 @@
-import 'reflect-metadata'
-import { Expose, Type } from 'class-transformer'
-
 export class ExampleItem {
-  id: number
-  text: string
-  meta: object
-
-  @Expose({ name: 'annotation_approver' })
-  annotationApprover: boolean | null
-
-  @Expose({ name: 'comment_count' })
-  commentCount: number
-
-  @Expose({ name: 'filename' })
-  fileUrl: string
-
-  @Expose({ name: 'is_confirmed' })
-  isConfirmed: boolean
-
-  @Expose({ name: 'upload_name' })
-  filename: string
+  constructor(
+    readonly id: number,
+    readonly text: string,
+    readonly meta: object,
+    readonly annotationApprover: boolean | null,
+    readonly commentCount: number,
+    readonly fileUrl: string,
+    readonly isConfirmed: boolean,
+    readonly filename: string
+  ) {}
 
   get url() {
     const l = this.fileUrl.indexOf('media/')
     const r = this.fileUrl.indexOf('media/', l + 1)
     return this.fileUrl.slice(0, l) + this.fileUrl.slice(r)
   }
-
-  toObject(): Object {
-    return {
-      id: this.id,
-      text: this.text,
-      meta: this.meta,
-      annotation_approver: this.annotationApprover,
-      comment_count: this.commentCount
-    }
-  }
 }
 
 export class ExampleItemList {
-  count: number
-  next: string | null
-  prev: string | null
-
-  @Type(() => ExampleItem)
-  @Expose({ name: 'results' })
-  items: ExampleItem[]
+  constructor(
+    readonly count: number,
+    readonly next: string | null,
+    readonly prev: string | null,
+    readonly items: ExampleItem[]
+  ) {}
 }

frontend/domain/models/label/label.ts

@@ -1,32 +1,19 @@
-import { Expose } from 'class-transformer'
-
 export class LabelItem {
-  id: number
-  text: string
-
-  @Expose({ name: 'prefix_key' })
-  prefixKey: string | null
-
-  @Expose({ name: 'suffix_key' })
-  suffixKey: string | null
+  constructor(
+    readonly id: number,
+    readonly text: string,
+    readonly prefixKey: string | null,
+    readonly suffixKey: string | null,
+    readonly backgroundColor: string,
+    readonly textColor: string = '#ffffff'
+  ) {}
 
-  @Expose({ name: 'background_color' })
-  backgroundColor: string
-
-  @Expose({ name: 'text_color' })
-  textColor: string = '#ffffff'
-
-  toObject() {
-    return {
-      id: this.id,
-      text: this.text,
-      prefix_key: this.prefixKey,
-      suffix_key: this.suffixKey,
-      background_color: this.backgroundColor,
-      text_color: this.textColor
-    }
+  static create(
+    text: string,
+    prefixKey: string | null,
+    suffixKey: string | null,
+    backgroundColor: string
+  ): LabelItem {
+    return new LabelItem(0, text, prefixKey, suffixKey, backgroundColor)
   }
 }
-
-export class DocTypeItem extends LabelItem {}
-export class SpanTypeItem extends LabelItem {}

frontend/domain/models/member/member.ts

@@ -1,21 +1,15 @@
+import { RoleName } from '../role/role'
+
 export class MemberItem {
-  id: number
-  user: number
-  role: number
-  username: string
-  rolename: string
+  constructor(
+    readonly id: number,
+    readonly user: number,
+    readonly role: number,
+    readonly username: string,
+    readonly rolename: RoleName
+  ) {}
 
   get isProjectAdmin(): boolean {
     return this.rolename === 'project_admin'
   }
-
-  toObject(): Object {
-    return {
-      id: this.id,
-      user: this.user,
-      role: this.role,
-      username: this.username,
-      rolename: this.rolename
-    }
-  }
 }

frontend/domain/models/option/option.ts

@@ -1,37 +1,3 @@
-export class PageNumber {
-  num: number
-
-  constructor(public page: number) {
-    if (typeof page === 'string' && /^\d+$/.test(page)) {
-      this.num = parseInt(page, 10)
-    }
-    if (typeof page === 'number' && page > 0) {
-      this.num = page
-    }
-    this.num = 1
-  }
-}
-
 export class OptionItem {
-  constructor(public page: number, public q?: string, public isChecked?: string) {}
-
-  static valueOf({
-    page,
-    q = '',
-    isChecked = ''
-  }: {
-    page: number
-    q?: string
-    isChecked?: string
-  }): OptionItem {
-    return new OptionItem(page, q, isChecked)
-  }
-
-  toObject(): Object {
-    return {
-      page: this.page,
-      q: this.q,
-      isChecked: this.isChecked
-    }
-  }
+  constructor(public page: number, public q = '', public isChecked = '') {}
 }