Validate project name field

frontend/components/layout/TheSideBar.vue

@@ -5,7 +5,6 @@
         {{ mdiPlayCircleOutline }}
       </v-icon>
       {{ $t('home.startAnnotation') }}
-      {{ project }}
     </v-btn>
     <v-list-item-group v-model="selected" mandatory>
       <v-list-item

frontend/components/project/ProjectNameField.vue

@@ -2,7 +2,7 @@
   <v-text-field
     v-bind="$attrs"
     :value="value"
-    :rules="projectNameRules($t('rules.projectNameRules'))"
+    :rules="projectNameRules"
     :label="$t('overview.projectName')"
     required
     @input="$emit('input', $event)"
@@ -10,8 +10,11 @@
 </template>
 
 <script lang="ts">
-import { projectNameRules } from '@/rules/index'
 import Vue from 'vue'
+import {
+  isEmptyText,
+  projectNameMustBeLessThan100Characters
+} from '~/domain/models/project/project'
 
 export default Vue.extend({
   props: {
@@ -23,7 +26,13 @@ export default Vue.extend({
   },
   data() {
     return {
-      projectNameRules
+      projectNameRules: [
+        (text: string) =>
+          !isEmptyText(text) || this.$t('rules.projectNameRules.projectNameRequired'),
+        (text: string) =>
+          projectNameMustBeLessThan100Characters(text) ||
+          this.$t('rules.projectNameRules.projectNameLessThan100Chars')
+      ]
     }
   }
 })

frontend/domain/models/project/project.ts

@@ -21,12 +21,23 @@ export const allProjectTypes = <const>[
 ]
 export type ProjectType = typeof allProjectTypes[number]
 
+export const isEmptyText = (text: string): boolean => {
+  return text.trim() === ''
+}
+
+const MAX_PROJECT_NAME_LENGTH = 100
+export const projectNameMustBeLessThan100Characters = (name: string): boolean => {
+  return name.trim().length <= MAX_PROJECT_NAME_LENGTH
+}
+
 export class Project {
+  name: string
+  description: string
   projectType: ProjectType
   constructor(
     readonly id: number,
-    readonly name: string,
-    readonly description: string,
+    readonly _name: string,
+    readonly _description: string,
     readonly guideline: string,
     readonly _projectType: string,
     readonly randomOrder: boolean,
@@ -42,9 +53,20 @@ export class Project {
     readonly author: string = '',
     readonly isTextProject: boolean = false
   ) {
+    if (isEmptyText(_name)) {
+      throw new Error('Project name is required')
+    }
+    if (!projectNameMustBeLessThan100Characters(_name)) {
+      throw new Error('Project name must be less than 100 characters')
+    }
+    if (isEmptyText(_description)) {
+      throw new Error('Project description is required')
+    }
     if (!allProjectTypes.includes(_projectType as ProjectType)) {
       throw new Error(`Invalid project type: ${_projectType}`)
     }
+    this.name = _name.trim()
+    this.description = _description.trim()
     this.projectType = _projectType as ProjectType
   }
 

frontend/i18n/de/rules.js

@@ -15,7 +15,7 @@ export default {
   },
   projectNameRules: {
     projectNameRequired: 'Projektname wird benötigt',
-    projectNameLessThan30Chars: 'Projektname muss kürzer als 30 Zeichen sein'
+    projectNameLessThan100Chars: 'Projektname muss kürzer als 100 Zeichen sein'
   },
   descriptionRules: {
     descriptionRequired: 'Beschreibung wird benötigt',

frontend/i18n/en/rules.js

@@ -19,7 +19,7 @@ export default {
   },
   projectNameRules: {
     projectNameRequired: 'Project name is required',
-    projectNameLessThan30Chars: 'Project name must be less than 30 characters'
+    projectNameLessThan100Chars: 'Project name must be less than 100 characters'
   },
   descriptionRules: {
     descriptionRequired: 'Description is required',

frontend/i18n/fr/rules.js

@@ -19,7 +19,7 @@ export default {
   },
   projectNameRules: {
     projectNameRequired: 'Le nom du projet est requis',
-    projectNameLessThan30Chars: 'Le nom du projet doit comporter moins de 30 caractères'
+    projectNameLessThan100Chars: 'Le nom du projet doit comporter moins de 100 caractères'
   },
   descriptionRules: {
     descriptionRequired: 'Une description est requise',

frontend/i18n/zh/rules.js

@@ -19,7 +19,7 @@ export default {
   },
   projectNameRules: {
     projectNameRequired: '请输入项目名称',
-    projectNameLessThan30Chars: '项目名称必须少于30个字符'
+    projectNameLessThan100Chars: '项目名称必须少于100个字符'
   },
   descriptionRules: {
     descriptionRequired: '请输入描述',

frontend/rules/index.js

@@ -20,13 +20,6 @@ export const roleRules = (msg) => {
 }
 
 // Rules for a project.
-export const projectNameRules = (msg) => {
-  return [
-    (v) => !!v || msg.projectNameRequired,
-    (v) => (v && v.length <= 30) || msg.projectNameLessThan30Chars
-  ]
-}
-
 export const descriptionRules = (msg) => {
   return [
     (v) => !!v || msg.descriptionRequired,