Add SharingModeField component

frontend/components/project/FormUpdate.vue

@@ -106,10 +106,7 @@
         <v-row>
           <v-col cols="12" sm="6">
             <h3>Collaboration</h3>
-            <v-checkbox
-              v-model="project.enableSharingMode"
-              :label="$t('overview.shareAnnotations')"
-            />
+            <sharing-mode-field v-model="project.enableSharingMode" />
           </v-col>
         </v-row>
       </v-form>
@@ -121,11 +118,13 @@
 import { mdiPlusCircle } from '@mdi/js'
 import ProjectDescriptionField from './ProjectDescriptionField.vue'
 import ProjectNameField from './ProjectNameField.vue'
+import SharingModeField from './SharingModeField.vue'
 
 export default {
   components: {
     ProjectNameField,
-    ProjectDescriptionField
+    ProjectDescriptionField,
+    SharingModeField
   },
 
   data() {

frontend/components/project/SharingModeField.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-checkbox
+    v-bind="$attrs"
+    :value="value"
+    :label="$t('overview.shareAnnotations')"
+    @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/pages/projects/create.vue

@@ -57,10 +57,7 @@
           v-model="editedItem.enableRandomOrder"
           :label="$t('overview.randomizeDocOrder')"
         />
-        <v-checkbox
-          v-model="editedItem.enableSharingMode"
-          :label="$t('overview.shareAnnotations')"
-        />
+        <sharing-mode-field v-model="editedItem.enableSharingMode" />
       </v-form>
     </v-card-text>
     <v-card-actions class="ps-4">
@@ -81,6 +78,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 SharingModeField from '~/components/project/SharingModeField.vue'
 import {
   DocumentClassification,
   ImageClassification,
@@ -107,7 +105,8 @@ export default Vue.extend({
   components: {
     ProjectTypeField,
     ProjectNameField,
-    ProjectDescriptionField
+    ProjectDescriptionField,
+    SharingModeField
   },
 
   layout: 'projects',