Change the project list's frontend

frontend/components/project/ProjectList.vue

@@ -3,12 +3,15 @@
     :value="value"
     :headers="headers"
     :items="items"
+    :options.sync="options"
+    :server-items-length="total"
     :search="search"
     :loading="isLoading"
     :loading-text="$t('generic.loading')"
     :no-data-text="$t('vuetify.noDataAvailable')"
     :footer-props="{
       'showFirstLastPage': true,
+      'items-per-page-options': [10, 50, 100],
       'items-per-page-text': $t('vuetify.itemsPerPageText'),
       'page-text': $t('dataset.pageText')
     }"
@@ -36,19 +39,21 @@
     </template>
     <template #[`item.tags`]="{ item }">
       <v-chip
-      v-for="tag in item.tags"
-      :key="tag.id"
-      outlined>{{tag.text}}
-      </v-chip>
+        v-for="tag in item.tags"
+        :key="tag.id"
+        outlined v-text="tag.text"
+      />
     </template>
   </v-data-table>
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
 import { mdiMagnify } from '@mdi/js'
+import { DataOptions } from 'vuetify/types'
 import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
 import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse'
+import { ProjectDTO } from '~/services/application/project/projectData'
 Vue.use(VueFilterDateFormat)
 Vue.use(VueFilterDateParse)
 
@@ -60,19 +65,26 @@ export default Vue.extend({
       required: true
     },
     items: {
-      type: Array,
+      type: Array as PropType<ProjectDTO[]>,
       default: () => [],
       required: true
     },
     value: {
-      type: Array,
+      type: Array as PropType<ProjectDTO[]>,
       default: () => [],
       required: true
+    },
+    total: {
+      type: Number,
+      default: 0,
+      required: true
     }
   },
+
   data() {
     return {
-      search: '',
+      search: this.$route.query.q,
+      options: {} as DataOptions,
       mdiMagnify
     }
   },
@@ -87,6 +99,39 @@ export default Vue.extend({
         { text: 'Tags', value: 'tags'}
       ]
     }
+  },
+
+  watch: {
+    options: {
+      handler() {
+        const self: any = this
+        self.updateQuery({
+          query: {
+            limit: self.options.itemsPerPage.toString(),
+            offset: ((self.options.page - 1) * self.options.itemsPerPage).toString(),
+            q: self.search
+          }
+        })
+      },
+      deep: true
+    },
+    search() {
+      const self: any = this
+      self.updateQuery({
+        query: {
+          limit: self.options.itemsPerPage.toString(),
+          offset: '0',
+          q: self.search
+        }
+      })
+      self.options.page = 1
+    }
+  },
+
+  methods: {
+    updateQuery(payload: any) {
+      this.$emit('update:query', payload)
+    }
   }
 })
 </script>

frontend/domain/models/project/project.ts

@@ -1,4 +1,5 @@
-import { Expose } from 'class-transformer'
+import "reflect-metadata"
+import { Expose, Type } from 'class-transformer'
 
 export type ProjectType = 'DocumentClassification' | 'SequenceLabeling' | 'Seq2seq' | 'IntentDetectionAndSlotFilling' | 'ImageClassification' | 'Speech2text'
 
@@ -74,6 +75,16 @@ export class ProjectReadItem {
   }
 }
 
+export class ProjectItemList {
+  count: number;
+  next: string | null;
+  prev: string | null;
+
+  @Type(() => ProjectReadItem)
+  @Expose({ name: 'results' })
+  items: ProjectReadItem[];
+}
+
 export class ProjectWriteItem {
   constructor(
     public id:                          number,

frontend/domain/models/project/projectRepository.ts

@@ -1,8 +1,9 @@
-import { ProjectReadItem, ProjectWriteItem } from '~/domain/models/project/project'
+import { ProjectReadItem, ProjectWriteItem, ProjectItemList } from '~/domain/models/project/project'
 
+export type SearchOption = {[key: string]: string | (string | null)[]}
 
 export interface ProjectRepository {
-  list(): Promise<ProjectReadItem[]>
+  list({ limit, offset, q }: SearchOption): Promise<ProjectItemList>
 
   findById(id: string): Promise<ProjectReadItem>
 

frontend/pages/projects/index.vue

@@ -33,17 +33,20 @@
     </v-card-title>
     <project-list
       v-model="selected"
-      :items="items"
+      :items="projects.items"
       :is-loading="isLoading"
-      />
+      :total="projects.count"
+      @update:query="updateQuery"
+    />
   </v-card>
 </template>
 
 <script lang="ts">
+import _ from 'lodash'
 import Vue from 'vue'
 import { mapGetters } from 'vuex'
 import ProjectList from '@/components/project/ProjectList.vue'
-import { ProjectDTO, ProjectWriteDTO } from '~/services/application/project/projectData'
+import { ProjectDTO, ProjectWriteDTO, ProjectListDTO } from '~/services/application/project/projectData'
 import FormDelete from '~/components/project/FormDelete.vue'
 import FormCreate from '~/components/project/FormCreate.vue'
 
@@ -82,7 +85,7 @@ export default Vue.extend({
         allowOverlapping: false,
         graphemeMode: false
       } as ProjectWriteDTO,
-      items: [] as ProjectDTO[],
+      projects: {} as ProjectListDTO,
       selected: [] as ProjectDTO[],
       isLoading: false
     }
@@ -90,7 +93,7 @@ export default Vue.extend({
 
   async fetch() {
     this.isLoading = true
-    this.items = await this.$services.project.list()
+    this.projects = await this.$services.project.list(this.$route.query)
     this.isLoading = false
   },
 
@@ -101,6 +104,14 @@ export default Vue.extend({
     },
   },
 
+  watch: {
+    '$route.query': _.debounce(function() {
+        // @ts-ignore
+        this.$fetch()
+      }, 1000
+    ),
+  },
+
   methods: {
     async create() {
       const project = await this.$services.project.create(this.editedItem)
@@ -114,12 +125,17 @@ export default Vue.extend({
         this.editedItem = Object.assign({}, this.defaultItem)
       })
     },
+
     async remove() {
       await this.$services.project.bulkDelete(this.selected)
       this.$fetch()
       this.dialogDelete = false
       this.selected = []
     },
+
+    updateQuery(query: object) {
+      this.$router.push(query)
+    }
   }
 })
 </script>

frontend/repositories/project/apiProjectRepository.ts

@@ -1,7 +1,7 @@
 import { plainToInstance } from 'class-transformer'
 import ApiService from '@/services/api.service'
-import { ProjectRepository } from '@/domain/models/project/projectRepository'
-import { ProjectReadItem, ProjectWriteItem } from '~/domain/models/project/project'
+import { ProjectRepository, SearchOption } from '@/domain/models/project/projectRepository'
+import { ProjectReadItem, ProjectWriteItem, ProjectItemList } from '~/domain/models/project/project'
 
 
 export class APIProjectRepository implements ProjectRepository {
@@ -9,10 +9,10 @@ export class APIProjectRepository implements ProjectRepository {
     private readonly request = ApiService
   ) {}
 
-  async list(): Promise<ProjectReadItem[]> {
-    const url = `/projects`
+  async list({ limit = '10', offset = '0', q = '' }: SearchOption): Promise<ProjectItemList> {
+    const url = `/projects?limit=${limit}&offset=${offset}&q=${q}`
     const response = await this.request.get(url)
-    return response.data.map((item: any) => plainToInstance(ProjectReadItem, item))
+    return plainToInstance(ProjectItemList, response.data)
   }
 
   async findById(id: string): Promise<ProjectReadItem> {

frontend/services/application/project/projectApplicationService.ts

@@ -1,5 +1,5 @@
-import { ProjectDTO, ProjectWriteDTO } from './projectData'
-import { ProjectRepository } from '~/domain/models/project/projectRepository'
+import { ProjectDTO, ProjectWriteDTO, ProjectListDTO } from './projectData'
+import { ProjectRepository, SearchOption } from '~/domain/models/project/projectRepository'
 import { ProjectWriteItem } from '~/domain/models/project/project'
 
 
@@ -8,10 +8,10 @@ export class ProjectApplicationService {
     private readonly repository: ProjectRepository
   ) {}
 
-  public async list(): Promise<ProjectDTO[]> {
+  public async list(options: SearchOption): Promise<ProjectListDTO> {
     try {
-      const items = await this.repository.list()
-      return items.map(item => new ProjectDTO(item))
+      const items = await this.repository.list(options)
+      return new ProjectListDTO(items)
     } catch(e: any) {
       throw new Error(e.response.data.detail)
     }

frontend/services/application/project/projectData.ts

@@ -1,4 +1,4 @@
-import { ProjectReadItem, ProjectType } from '~/domain/models/project/project'
+import { ProjectReadItem, ProjectType, ProjectItemList } from '~/domain/models/project/project'
 
 export class ProjectDTO {
   id: number
@@ -45,3 +45,17 @@ export class ProjectDTO {
 }
 
 export type ProjectWriteDTO = Pick<ProjectDTO, 'id' | 'name' | 'description' | 'guideline' | 'projectType' | 'enableRandomOrder' | 'enableShareAnnotation' | 'singleClassClassification' | 'allowOverlapping' | 'graphemeMode' | 'tags'>
+
+export class ProjectListDTO {
+  count: number
+  next : string | null
+  prev : string | null
+  items: ProjectDTO[]
+
+  constructor(item: ProjectItemList) {
+    this.count = item.count
+    this.next = item.next
+    this.prev = item.prev
+    this.items = item.items.map(_ => new ProjectDTO(_))
+  }
+}