Integrate guideline page with backend API

frontend/api/routes/projects.js

@@ -54,6 +54,17 @@ router.put('/:projectId', (req, res) => {
   }
 })
 
+// Partially update a project user.
+router.patch('/:projectId', (req, res) => {
+  const projectIndex = db.findIndex(item => item.id === parseInt(req.params.projectId))
+  if (projectIndex !== -1) {
+    Object.assign(db[projectIndex], req.body)
+    res.json(db[projectIndex])
+  } else {
+    res.status(404).json({ detail: 'Not found.' })
+  }
+})
+
 // Delete a project.
 router.delete('/:projectId', (req, res, next) => {
   const project = db.find(item => item.id === parseInt(req.params.projectId))

frontend/layouts/project.vue

@@ -24,7 +24,7 @@
           <v-layout
             justify-center
           >
-            <v-flex>
+            <v-flex fill-height>
               <nuxt />
             </v-flex>
           </v-layout>

frontend/pages/projects/_id/guideline/index.vue

@@ -1,24 +1,10 @@
 <template>
-  <v-content>
-    <v-container
-      fluid
-      fill-height
-    >
-      <v-layout
-        justify-center
-      >
-        <v-flex fill-height>
-          <editor
-            v-model="editorText"
-            :options="editorOptions"
-            :visible="editorVisible"
-            preview-style="vertical"
-            height="inherit"
-          />
-        </v-flex>
-      </v-layout>
-    </v-container>
-  </v-content>
+  <editor
+    v-model="editorText"
+    preview-style="vertical"
+    height="inherit"
+    @change="onEditorChange"
+  />
 </template>
 
 <script>
@@ -26,18 +12,42 @@ import 'tui-editor/dist/tui-editor.css'
 import 'tui-editor/dist/tui-editor-contents.css'
 import 'codemirror/lib/codemirror.css'
 import { Editor } from '@toast-ui/vue-editor'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   layout: 'project',
   components: {
     Editor
   },
+
+  validate({ params }) {
+    return /^\d+$/.test(params.id)
+  },
+
   data() {
     return {
-      editorText: 'Write annotation guideline.',
-      editorOptions: {
-      },
-      editorVisible: true
+      editorText: ''
+    }
+  },
+
+  computed: {
+    ...mapState('projects', ['current'])
+  },
+
+  async created() {
+    await this.setCurrentProject(this.$route.params.id)
+    this.editorText = this.current.guideline
+  },
+
+  methods: {
+    ...mapActions('projects', ['setCurrentProject', 'updateCurrentProject']),
+
+    onEditorChange() {
+      const data = {
+        projectId: this.$route.params.id,
+        guideline: this.editorText
+      }
+      this.updateCurrentProject(data)
     }
   }
 }

frontend/services/project.service.js

@@ -13,9 +13,17 @@ class ProjectService {
     return this.request.post('/projects', data)
   }
 
+  updateProject(projectId, payload) {
+    return this.request.patch(`/projects/${projectId}`, payload)
+  }
+
   deleteProject(projectId) {
     return this.request.delete(`/projects/${projectId}`)
   }
+
+  fetchProjectById(projectId) {
+    return this.request.get(`/projects/${projectId}`)
+  }
 }
 
 export default new ProjectService()

frontend/store/projects.js

@@ -3,6 +3,7 @@ import ProjectService from '@/services/project.service'
 export const state = () => ({
   projects: [],
   selected: [],
+  current: null,
   loading: false
 })
 
@@ -19,6 +20,10 @@ export const mutations = {
   createProject(state, project) {
     state.projects.unshift(project)
   },
+  updateProject(state, project) {
+    const item = state.projects.find(item => item.id === project.id)
+    Object.assign(item, project)
+  },
   deleteProject(state, projectId) {
     state.projects = state.projects.filter(item => item.id !== projectId)
   },
@@ -30,13 +35,16 @@ export const mutations = {
   },
   setLoading(state, payload) {
     state.loading = payload
+  },
+  setCurrent(state, payload) {
+    state.current = payload
   }
 }
 
 export const actions = {
   getProjectList({ commit }, config) {
     commit('setLoading', true)
-    return ProjectService.getProjectList()
+    ProjectService.getProjectList()
       .then((response) => {
         commit('setProjectList', response)
       })
@@ -56,6 +64,15 @@ export const actions = {
         alert(error)
       })
   },
+  updateProject({ commit }, data) {
+    ProjectService.updateProject(data.projectId, data)
+      .then((response) => {
+        commit('updateProject', response)
+      })
+      .catch((error) => {
+        alert(error)
+      })
+  },
   deleteProject({ commit, state }, config) {
     for (const project of state.selected) {
       ProjectService.deleteProject(project.id)
@@ -67,5 +84,23 @@ export const actions = {
         })
     }
     commit('resetSelected')
+  },
+  setCurrentProject({ commit }, projectId) {
+    return ProjectService.fetchProjectById(projectId)
+      .then((response) => {
+        commit('setCurrent', response)
+      })
+      .catch((error) => {
+        alert(error)
+      })
+  },
+  updateCurrentProject({ commit }, data) {
+    ProjectService.updateProject(data.projectId, data)
+      .then((response) => {
+        commit('setCurrent', response)
+      })
+      .catch((error) => {
+        alert(error)
+      })
   }
 }