Enable to order examples by score in frontend

frontend/components/tasks/toolbar/ToolbarLaptop.vue

@@ -6,6 +6,8 @@
 
         <button-filter :value="filterOption" @click:filter="changeFilter" />
 
+        <button-order :value="orderOption" @click:order="changeOrder" />
+
         <button-guideline @click:guideline="dialogGuideline = true" />
         <v-dialog v-model="dialogGuideline">
           <form-guideline :guideline-text="guidelineText" @click:close="dialogGuideline = false" />
@@ -64,6 +66,7 @@ import ButtonClear from './buttons/ButtonClear.vue'
 import ButtonComment from './buttons/ButtonComment.vue'
 import ButtonFilter from './buttons/ButtonFilter.vue'
 import ButtonGuideline from './buttons/ButtonGuideline.vue'
+import ButtonOrder from './buttons/ButtonOrder.vue'
 import ButtonPagination from './buttons/ButtonPagination.vue'
 import ButtonReview from './buttons/ButtonReview.vue'
 import ButtonKeyboardShortcut from './buttons/ButtonKeyboardShortcut.vue'
@@ -80,6 +83,7 @@ export default Vue.extend({
     ButtonComment,
     ButtonFilter,
     ButtonGuideline,
+    ButtonOrder,
     ButtonKeyboardShortcut,
     ButtonPagination,
     ButtonReview,
@@ -134,6 +138,10 @@ export default Vue.extend({
     filterOption(): string {
       // @ts-ignore
       return this.$route.query.isChecked
+    },
+    orderOption(): string {
+      // @ts-ignore
+      return this.$route.query.ordering
     }
   },
 
@@ -143,6 +151,7 @@ export default Vue.extend({
         query: {
           page: page.toString(),
           isChecked: this.filterOption,
+          ordering: this.$route.query.ordering,
           q: this.$route.query.q
         }
       })
@@ -153,11 +162,23 @@ export default Vue.extend({
         query: {
           page: '1',
           isChecked,
+          ordering: this.$route.query.ordering,
           q: this.$route.query.q
         }
       })
     },
 
+    changeOrder(ordering: string) {
+      this.$router.push({
+        query: {
+          page: '1',
+          isChecked: this.filterOption,
+          q: this.$route.query.q,
+          ordering
+        }
+      })
+    },
+
     updateAutoLabeling(isEnable: boolean) {
       if (isEnable) {
         this.$emit('update:enable-auto-labeling', true)

frontend/composables/useExampleItem.ts

@@ -14,9 +14,14 @@ export const useExampleItem = () => {
 
   const getExample = async (
     projectId: string,
-    { page, q, isChecked }: { page: string; q: string; isChecked: string }
+    {
+      page,
+      q,
+      isChecked,
+      ordering
+    }: { page: string; q: string; isChecked: string; ordering: string }
   ) => {
-    const examples = await exampleService.fetchOne(projectId, page, q, isChecked)
+    const examples = await exampleService.fetchOne(projectId, page, q, isChecked, ordering)
     state.totalExample = examples.count
     if (!_.isEmpty(examples) && examples.items.length !== 0) {
       state.example = examples.items[0]

frontend/pages/projects/_id/image-captioning/index.vue

@@ -112,7 +112,8 @@ export default {
       this.projectId,
       this.$route.query.page,
       this.$route.query.q,
-      this.$route.query.isChecked
+      this.$route.query.isChecked,
+      this.$route.query.ordering
     )
     const image = this.images.items[0]
     this.setImageSize(image)

frontend/pages/projects/_id/image-classification/index.vue

@@ -115,7 +115,8 @@ export default {
       this.projectId,
       this.$route.query.page,
       this.$route.query.q,
-      this.$route.query.isChecked
+      this.$route.query.isChecked,
+      this.$route.query.ordering
     )
     const image = this.images.items[0]
     this.setImageSize(image)

frontend/pages/projects/_id/intent-detection-and-slot-filling/index.vue

@@ -91,7 +91,8 @@ export default {
       this.projectId,
       this.$route.query.page,
       this.$route.query.q,
-      this.$route.query.isChecked
+      this.$route.query.isChecked,
+      this.$route.query.ordering
     )
     const doc = this.docs.items[0]
     await this.listSpan(doc.id)

frontend/pages/projects/_id/object-detection/index.vue

@@ -134,7 +134,8 @@ export default {
       this.projectId,
       this.$route.query.page,
       this.$route.query.q,
-      this.$route.query.isChecked
+      this.$route.query.isChecked,
+      this.$route.query.ordering
     )
     const image = this.images.items[0]
     if (this.enableAutoLabeling) {

frontend/pages/projects/_id/segmentation/index.vue

@@ -135,7 +135,8 @@ export default {
       this.projectId,
       this.$route.query.page,
       this.$route.query.q,
-      this.$route.query.isChecked
+      this.$route.query.isChecked,
+      this.$route.query.ordering
     )
     const image = this.images.items[0]
     if (this.enableAutoLabeling) {

frontend/pages/projects/_id/sequence-labeling/index.vue

@@ -124,7 +124,8 @@ export default {
       this.projectId,
       this.$route.query.page,
       this.$route.query.q,
-      this.$route.query.isChecked
+      this.$route.query.isChecked,
+      this.$route.query.ordering
     )
     const doc = this.docs.items[0]
     if (this.enableAutoLabeling && !doc.isConfirmed) {

frontend/pages/projects/_id/sequence-to-sequence/index.vue

@@ -71,7 +71,8 @@ export default {
       this.projectId,
       this.$route.query.page,
       this.$route.query.q,
-      this.$route.query.isChecked
+      this.$route.query.isChecked,
+      this.$route.query.ordering
     )
     const doc = this.docs.items[0]
     if (this.enableAutoLabeling) {

frontend/pages/projects/_id/speech-to-text/index.vue

@@ -76,7 +76,8 @@ export default {
       this.projectId,
       this.$route.query.page,
       this.$route.query.q,
-      this.$route.query.isChecked
+      this.$route.query.isChecked,
+      this.$route.query.ordering
     )
     const item = this.items.items[0]
     if (this.enableAutoLabeling) {

frontend/repositories/example/apiDocumentRepository.ts

@@ -30,9 +30,9 @@ export class APIExampleRepository implements ExampleRepository {
 
   async list(
     projectId: string,
-    { limit = '10', offset = '0', q = '', isChecked = '' }: SearchOption
+    { limit = '10', offset = '0', q = '', isChecked = '', ordering = '' }: SearchOption
   ): Promise<ExampleItemList> {
-    const url = `/projects/${projectId}/examples?limit=${limit}&offset=${offset}&q=${q}&confirmed=${isChecked}`
+    const url = `/projects/${projectId}/examples?limit=${limit}&offset=${offset}&q=${q}&confirmed=${isChecked}&ordering=${ordering}`
     const response = await this.request.get(url)
     return new ExampleItemList(
       response.data.count,

frontend/services/application/example/exampleApplicationService.ts

@@ -19,14 +19,16 @@ export class ExampleApplicationService {
     projectId: string,
     page: string,
     q: string,
-    isChecked: string
+    isChecked: string,
+    ordering: string
   ): Promise<ExampleListDTO> {
     const offset = (parseInt(page, 10) - 1).toString()
     const options: SearchOption = {
       limit: '1',
       offset,
       q,
-      isChecked
+      isChecked,
+      ordering
     }
     return await this.list(projectId, options)
   }