From c45d54cc0e6eab48c2017b99f30ff5c9f059670a Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Tue, 10 Sep 2019 13:28:46 +0900
Subject: [PATCH] Extract validation rules from each components

---
 .../organisms/LabelCreationForm.vue           | 13 +++-----
 frontend/components/organisms/LabelList.vue   |  8 ++++-
 .../organisms/MemberAdditionForm.vue          | 11 +++----
 frontend/components/organisms/MemberList.vue  |  6 +++-
 .../organisms/ProjectCreationForm.vue         | 18 ++++------
 frontend/rules/index.js                       | 33 +++++++++++++++++++
 6 files changed, 59 insertions(+), 30 deletions(-)
 create mode 100644 frontend/rules/index.js

diff --git a/frontend/components/organisms/LabelCreationForm.vue b/frontend/components/organisms/LabelCreationForm.vue
index 8817e994..6791ee89 100644
--- a/frontend/components/organisms/LabelCreationForm.vue
+++ b/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
     }
   },
 
diff --git a/frontend/components/organisms/LabelList.vue b/frontend/components/organisms/LabelList.vue
index fa5e0872..9c6a0a77 100644
--- a/frontend/components/organisms/LabelList.vue
+++ b/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: {
diff --git a/frontend/components/organisms/MemberAdditionForm.vue b/frontend/components/organisms/MemberAdditionForm.vue
index b60e94b2..c67182ca 100644
--- a/frontend/components/organisms/MemberAdditionForm.vue
+++ b/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
     }
   },
 
diff --git a/frontend/components/organisms/MemberList.vue b/frontend/components/organisms/MemberList.vue
index b23fd7ae..91a6691e 100644
--- a/frontend/components/organisms/MemberList.vue
+++ b/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: {
diff --git a/frontend/components/organisms/ProjectCreationForm.vue b/frontend/components/organisms/ProjectCreationForm.vue
index 826f9c0f..7aa34db3 100644
--- a/frontend/components/organisms/ProjectCreationForm.vue
+++ b/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
     }
   },
 
diff --git a/frontend/rules/index.js b/frontend/rules/index.js
new file mode 100644
index 00000000..5eccc323
--- /dev/null
+++ b/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'
+]