Extract validation rules from each components

frontend/components/organisms/LabelCreationForm.vue

@@ -14,7 +14,7 @@
       >
         <v-text-field
           v-model="labelName"
-          :rules="nameRules"
+          :rules="labelNameRules"
           label="Label name"
           prepend-icon="label"
         />
@@ -40,6 +40,7 @@
 
 <script>
 import BaseCard from '@/components/molecules/BaseCard'
+import { colorRules, labelNameRules } from '@/rules/index'
 
 export default {
   components: {
@@ -62,14 +63,8 @@ export default {
       labelName: '',
       suffixKey: '',
       color: '',
-      nameRules: [
-        v => !!v || 'Label name is required',
-        v =>
-          (v && v.length <= 30) || 'Label name must be less than 30 characters'
-      ],
-      colorRules: [
-        v => !!v || 'Color is required'
-      ]
+      labelNameRules,
+      colorRules
     }
   },
 

frontend/components/organisms/LabelList.vue

@@ -26,6 +26,7 @@
         <template v-slot:input>
           <v-text-field
             :value="item.text"
+            :rules="labelNameRules"
             label="Edit"
             single-line
             @change="updateLabel({ id: item.id, text: $event })"
@@ -54,6 +55,7 @@
         <template v-slot:input>
           <v-color-picker
             :value="item.backgroundColor"
+            :rules="colorRules"
             show-swatches
             hide-mode-switch
             width="800"
@@ -68,6 +70,8 @@
 </template>
 
 <script>
+import { colorRules, labelNameRules } from '@/rules/index'
+
 export default {
   props: {
     headers: {
@@ -97,7 +101,9 @@ export default {
   },
   data() {
     return {
-      search: ''
+      search: '',
+      colorRules,
+      labelNameRules
     }
   },
   methods: {

frontend/components/organisms/MemberAdditionForm.vue

@@ -17,7 +17,7 @@
           :items="items"
           :loading="isLoading"
           :search-input.sync="username"
-          :rules="userRules"
+          :rules="userNameRules"
           color="white"
           hide-no-data
           hide-selected
@@ -41,6 +41,7 @@
 
 <script>
 import BaseCard from '@/components/molecules/BaseCard'
+import { userNameRules, roleRules } from '@/rules/index'
 
 export default {
   components: {
@@ -66,12 +67,8 @@ export default {
       isLoading: false,
       selectedUser: null,
       roles: ['Admin', 'Member'],
-      userRules: [
-        v => !!v || 'User is required'
-      ],
-      roleRules: [
-        v => !!v || 'Role is required'
-      ]
+      userNameRules,
+      roleRules
     }
   },
 

frontend/components/organisms/MemberList.vue

@@ -37,6 +37,7 @@
           <v-select
             :value="item.role"
             :items="roles"
+            :rules="roleRules"
             label="Role"
             @input="setNewRole"
           />
@@ -47,6 +48,8 @@
 </template>
 
 <script>
+import { roleRules } from '@/rules/index'
+
 export default {
   props: {
     headers: {
@@ -80,7 +83,8 @@ export default {
   data() {
     return {
       search: '',
-      newRole: null
+      newRole: null,
+      roleRules
     }
   },
   methods: {

frontend/components/organisms/ProjectCreationForm.vue

@@ -14,7 +14,7 @@
       >
         <v-text-field
           v-model="name"
-          :rules="nameRules"
+          :rules="projectNameRules"
           label="Project name"
           prepend-icon="mdi-account-multiple"
           data-test="project-name"
@@ -32,7 +32,7 @@
         <v-select
           v-model="projectType"
           :items="projectTypes"
-          :rules="[v => !!v || 'Type is required']"
+          :rules="projectTypeRules"
           label="projectType"
           prepend-icon="mdi-keyboard"
           data-test="project-type"
@@ -45,6 +45,7 @@
 
 <script>
 import BaseCard from '@/components/molecules/BaseCard'
+import { projectNameRules, descriptionRules, projectTypeRules } from '@/rules/index'
 
 export default {
   components: {
@@ -71,16 +72,9 @@ export default {
       name: '',
       description: '',
       projectType: null,
-      nameRules: [
-        v => !!v || 'Project name is required',
-        v =>
-          (v && v.length <= 30) || 'Project name must be less than 30 characters'
-      ],
-      descriptionRules: [
-        v => !!v || 'Description is required',
-        v =>
-          (v && v.length <= 100) || 'Description must be less than 100 characters'
-      ]
+      projectNameRules,
+      projectTypeRules,
+      descriptionRules
     }
   },
 

frontend/rules/index.js

@@ -0,0 +1,33 @@
+// Rules for project label.
+export const colorRules = [
+  v => !!v || 'Color is required'
+]
+
+export const labelNameRules = [
+  v => !!v || 'Label name is required',
+  v => (v && v.length <= 30) || 'Label name must be less than 30 characters'
+]
+
+// Rules for project member.
+export const userNameRules = [
+  v => !!v || 'User is required'
+]
+
+export const roleRules = [
+  v => !!v || 'Role is required'
+]
+
+// Rules for a project.
+export const projectNameRules = [
+  v => !!v || 'Project name is required',
+  v => (v && v.length <= 30) || 'Project name must be less than 30 characters'
+]
+
+export const descriptionRules = [
+  v => !!v || 'Description is required',
+  v => (v && v.length <= 100) || 'Description must be less than 100 characters'
+]
+
+export const projectTypeRules = [
+  v => !!v || 'Project type is required'
+]