Add RandomOrderField component

frontend/components/project/FormUpdate.vue

@@ -100,7 +100,7 @@
         <v-row>
           <v-col cols="12" sm="6">
             <h3>Shuffle</h3>
-            <v-checkbox v-model="project.randomOrder" :label="$t('overview.randomizeDocOrder')" />
+            <random-order-field v-model="project.enableRandomOrder" />
           </v-col>
         </v-row>
         <v-row>
@@ -118,12 +118,14 @@
 import { mdiPlusCircle } from '@mdi/js'
 import ProjectDescriptionField from './ProjectDescriptionField.vue'
 import ProjectNameField from './ProjectNameField.vue'
+import RandomOrderField from './RandomOrderField.vue'
 import SharingModeField from './SharingModeField.vue'
 
 export default {
   components: {
     ProjectNameField,
     ProjectDescriptionField,
+    RandomOrderField,
     SharingModeField
   },
 
@@ -143,6 +145,7 @@ export default {
   },
   async fetch() {
     this.project = await this.$services.project.findById(this.projectId)
+    console.log(this.project)
     this.getTags()
   },
 
@@ -156,7 +159,7 @@ export default {
   },
 
   watch: {
-    'project.randomOrder'() {
+    'project.enableRandomOrder'() {
       this.doneEdit()
     },
     'project.enableSharingMode'() {

frontend/components/project/RandomOrderField.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-checkbox
+    v-bind="$attrs"
+    :value="value"
+    :label="$t('overview.randomizeDocOrder')"
+    @change="$emit('input', $event === true)"
+  />
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  }
+})
+</script>

frontend/domain/models/project/project.ts

@@ -41,7 +41,7 @@ export class Project {
     readonly _description: string,
     readonly guideline: string,
     readonly _projectType: string,
-    readonly randomOrder: boolean,
+    readonly enableRandomOrder: boolean,
     readonly enableSharingMode: boolean,
     readonly exclusiveCategories: boolean,
     readonly allowOverlappingSpans: boolean,
@@ -77,7 +77,7 @@ export class Project {
     description: string,
     guideline: string,
     projectType: string,
-    randomOrder: boolean,
+    enableRandomOrder: boolean,
     enableSharingMode: boolean,
     exclusiveCategories: boolean,
     allowOverlappingSpans: boolean,
@@ -91,7 +91,7 @@ export class Project {
       description,
       guideline,
       projectType,
-      randomOrder,
+      enableRandomOrder,
       enableSharingMode,
       exclusiveCategories,
       allowOverlappingSpans,

frontend/pages/projects/create.vue

@@ -53,10 +53,7 @@
             </template>
           </v-checkbox>
         </template>
-        <v-checkbox
-          v-model="editedItem.enableRandomOrder"
-          :label="$t('overview.randomizeDocOrder')"
-        />
+        <random-order-field v-model="editedItem.enableRandomOrder" />
         <sharing-mode-field v-model="editedItem.enableSharingMode" />
       </v-form>
     </v-card-text>
@@ -78,6 +75,7 @@ import Vue from 'vue'
 import ProjectDescriptionField from '~/components/project/ProjectDescriptionField.vue'
 import ProjectNameField from '~/components/project/ProjectNameField.vue'
 import ProjectTypeField from '~/components/project/ProjectTypeField.vue'
+import RandomOrderField from '~/components/project/RandomOrderField.vue'
 import SharingModeField from '~/components/project/SharingModeField.vue'
 import {
   DocumentClassification,
@@ -106,6 +104,7 @@ export default Vue.extend({
     ProjectTypeField,
     ProjectNameField,
     ProjectDescriptionField,
+    RandomOrderField,
     SharingModeField
   },
 

frontend/repositories/project/apiProjectRepository.ts

@@ -52,7 +52,7 @@ function toPayload(item: Project): { [key: string]: any } {
     description: item.description,
     guideline: item.guideline,
     project_type: item.projectType,
-    random_order: item.randomOrder,
+    random_order: item.enableRandomOrder,
     collaborative_annotation: item.enableSharingMode,
     single_class_classification: item.exclusiveCategories,
     allow_overlapping: item.allowOverlappingSpans,