Enable to create tags on project creation

backend/projects/serializers.py

@@ -74,9 +74,15 @@ class ProjectSerializer(serializers.ModelSerializer):
             "can_define_relation",
             "can_define_category",
             "can_define_span",
-            "tags",
         )
 
+    def create(self, validated_data):
+        tags = TagSerializer(data=validated_data.pop("tags", []), many=True)
+        project = self.Meta.model.objects.create(**validated_data)
+        tags.is_valid()
+        tags.save(project=project)
+        return project
+
 
 class TextClassificationProjectSerializer(ProjectSerializer):
     class Meta(ProjectSerializer.Meta):

frontend/components/project/FormCreate.vue

@@ -51,6 +51,18 @@
           required
           @input="updateValue('description', $event)"
         />
+        <v-combobox
+          :value="tags"
+          :items="tags"
+          label="Tags"
+          multiple
+          chips
+          outlined
+          dense
+          deletable-chips
+          hide-selected
+          @input="updateValue('tags', $event)"
+        />
         <v-checkbox
           v-if="hasSingleLabelOption"
           :value="singleClassClassification"
@@ -175,6 +187,10 @@ export default Vue.extend({
     useRelation: {
       type: Boolean,
       default: false
+    },
+    tags: {
+      type: Array,
+      default: () => [],
     }
   },
 

frontend/domain/models/project/project.ts

@@ -101,6 +101,7 @@ export class ProjectWriteItem {
     public allow_overlapping:           boolean,
     public grapheme_mode:               boolean,
     public use_relation:                boolean,
+    public tags:                        string[],
   ) {}
 
   get resourceType(): string {
@@ -128,6 +129,7 @@ export class ProjectWriteItem {
       allow_overlapping: this.allow_overlapping,
       grapheme_mode: this.grapheme_mode,
       use_relation: this.use_relation,
+      tags: this.tags.map(tag => ({text: tag})),
       resourcetype: this.resourceType
     }
   }

frontend/pages/projects/create.vue

@@ -31,6 +31,7 @@ export default Vue.extend({
         allowOverlapping: false,
         graphemeMode: false,
         useRelation: false,
+        tags: [] as string[],
       } as ProjectWriteDTO,
       defaultItem: {
         name: '',
@@ -42,6 +43,7 @@ export default Vue.extend({
         allowOverlapping: false,
         graphemeMode: false,
         useRelation: false,
+        tags: [] as string[],
       } as ProjectWriteDTO,
     }
   },

frontend/services/application/project/projectApplicationService.ts

@@ -58,7 +58,8 @@ export class ProjectApplicationService {
       item.singleClassClassification,
       item.allowOverlapping,
       item.graphemeMode,
-      item.useRelation
+      item.useRelation,
+      item.tags
     )
   }
 }

frontend/services/application/project/projectData.ts

@@ -11,7 +11,7 @@ export class ProjectDTO {
   enableShareAnnotation: boolean
   singleClassClassification: boolean
   pageLink: string
-  tags: Object[]
+  tags: Object[] | string[]
   canDefineLabel: boolean
   canDefineRelation: boolean
   isTextProject: boolean
@@ -46,7 +46,7 @@ export class ProjectDTO {
   }
 }
 
-export type ProjectWriteDTO = Pick<ProjectDTO, 'id' | 'name' | 'description' | 'guideline' | 'projectType' | 'enableRandomOrder' | 'enableShareAnnotation' | 'singleClassClassification' | 'allowOverlapping' | 'graphemeMode' | 'tags' | 'useRelation'>
+export type ProjectWriteDTO = Pick<ProjectDTO, 'id' | 'name' | 'description' | 'guideline' | 'projectType' | 'enableRandomOrder' | 'enableShareAnnotation' | 'singleClassClassification' | 'allowOverlapping' | 'graphemeMode' | 'useRelation'> & { tags: string[] }
 
 export class ProjectListDTO {
   count: number