From 528fcf9f59b5d204768247378a402640cee50dab Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Wed, 28 Aug 2019 15:35:04 +0900
Subject: [PATCH] Add nuxt-link for each project

---
 frontend/components/FormProjectCreation.vue | 13 +++++++++----
 frontend/pages/projects/index.vue           |  5 +++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/components/FormProjectCreation.vue b/frontend/components/FormProjectCreation.vue
index 268e9f11..e0b78737 100644
--- a/frontend/components/FormProjectCreation.vue
+++ b/frontend/components/FormProjectCreation.vue
@@ -14,15 +14,15 @@
               v-model="name"
               :rules="nameRules"
               label="Project name"
-              prepend-icon="label"
+              prepend-icon="mdi-account-multiple"
               required
               autofocus
             />
             <v-text-field
               v-model="description"
-              :rules="nameRules"
+              :rules="descriptionRules"
               label="Description"
-              prepend-icon="label"
+              prepend-icon="mdi-clipboard-text"
               required
             />
             <v-select
@@ -74,7 +74,12 @@ export default {
       'Sequence to sequence'
     ], // Todo: Get project types from backend server.
     nameRules: [
-      v => !!v || 'Name is required'
+      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'
     ]
   }),
 
diff --git a/frontend/pages/projects/index.vue b/frontend/pages/projects/index.vue
index e1d0217a..81ce2551 100644
--- a/frontend/pages/projects/index.vue
+++ b/frontend/pages/projects/index.vue
@@ -65,6 +65,11 @@
                   filled
                 />
               </template>
+              <template v-slot:item.name="{ item }">
+                <nuxt-link :to="`/projects/${item.id}`">
+                  <span>{{ item.name }}</span>
+                </nuxt-link>
+              </template>
             </v-data-table>
           </v-card>
         </v-flex>