Implement document list components

frontend/api/routes/docs.js

@@ -22,6 +22,17 @@ router.post('/', (req, res) => {
   res.json(doc)
 })
 
+// Update a document partially.
+router.patch('/:docId', (req, res) => {
+  const docIndex = db.findIndex(item => item.id === parseInt(req.params.docId))
+  if (docIndex !== -1) {
+    Object.assign(db[docIndex], req.body)
+    res.json(db[docIndex])
+  } else {
+    res.status(404).json({ detail: 'Not found.' })
+  }
+})
+
 // Get a doc.
 router.get('/:docId', (req, res) => {
   const doc = db.find(item => item.id === parseInt(req.params.docId))

frontend/components/containers/DocumentList.vue

@@ -0,0 +1,52 @@
+<template>
+  <document-list
+    :headers="headers"
+    :docs="items"
+    :selected="selected"
+    @update-selected="updateSelected"
+    @update-doc="handleUpdateDoc"
+  />
+</template>
+
+<script>
+import { mapState, mapActions, mapMutations } from 'vuex'
+import DocumentList from '@/components/organisms/DocumentList'
+
+export default {
+  components: {
+    DocumentList
+  },
+  data() {
+    return {
+      headers: [
+        {
+          text: 'Text',
+          align: 'left',
+          value: 'text'
+        }
+      ]
+    }
+  },
+
+  computed: {
+    ...mapState('documents', ['items', 'selected'])
+  },
+
+  created() {
+    this.getDocumentList()
+  },
+
+  methods: {
+    ...mapActions('documents', ['getDocumentList', 'updateDocument']),
+    ...mapMutations('documents', ['updateSelected']),
+
+    handleUpdateDoc(payload) {
+      const data = {
+        projectId: this.$route.params.id,
+        ...payload
+      }
+      this.updateDocument(data)
+    }
+  }
+}
+</script>

frontend/components/organisms/DocumentList.vue

@@ -0,0 +1,71 @@
+<template>
+  <v-data-table
+    v-model="selected"
+    :headers="headers"
+    :items="docs"
+    item-key="id"
+    :search="search"
+    show-select
+    @input="update"
+  >
+    <template v-slot:top>
+      <v-text-field
+        v-model="search"
+        prepend-inner-icon="search"
+        label="Search"
+        single-line
+        hide-details
+        filled
+      />
+    </template>
+    <template v-slot:item.text="{ item }">
+      <v-edit-dialog>
+        <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span>
+        <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span>
+        <template v-slot:input>
+          <v-textarea
+            :value="item.text"
+            label="Edit"
+            autofocus
+            @change="updateDocument({ id: item.id, text: $event })"
+          />
+        </template>
+      </v-edit-dialog>
+    </template>
+  </v-data-table>
+</template>
+
+<script>
+export default {
+  props: {
+    headers: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    docs: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    selected: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  },
+  data() {
+    return {
+      search: ''
+    }
+  },
+  methods: {
+    update(selected) {
+      this.$emit('update-selected', selected)
+    },
+    updateDocument(payload) {
+      this.$emit('update-doc', payload)
+    }
+  }
+}
+</script>

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

@@ -1,4 +1,14 @@
 <template>
+  <v-card>
+    <v-card-title>
+    <!--
+      <label-creation-button />
+      <label-deletion-button />
+      -->
+    </v-card-title>
+    <document-list />
+  </v-card>
+  <!--
   <v-content>
     <v-container
       fluid
@@ -58,7 +68,6 @@
                 >
                   <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span>
                   <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span>
-                  <!--{{ item.text | truncate(200) }}-->
                   <template v-slot:input>
                     <v-textarea
                       v-model="item.text"
@@ -73,70 +82,23 @@
       </v-layout>
     </v-container>
   </v-content>
+  -->
 </template>
 
 <script>
-import Modal from '~/components/Modal'
+import DocumentList from '@/components/containers/DocumentList'
+// import DocumentCreationButton from '@/components/containers/DocumentCreationButton'
+// import DocumentDeletionButton from '@/components/containers/DocumentDeletionButton'
 
 export default {
   layout: 'project',
   components: {
-    Modal
+    DocumentList
+    // LabelCreationButton,
+    // LabelDeletionButton
   },
-  data: () => ({
-    search: '',
-    selected: [],
-    removeModal: {
-      title: 'Remove Document',
-      button: 'Yes, remove'
-    },
-    headers: [
-      {
-        text: 'Text',
-        align: 'left',
-        value: 'text'
-      }
-    ],
-    docs: [
-      {
-        id: 1,
-        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
-      },
-      {
-        id: 2,
-        text: 'Text 1'
-      },
-      {
-        id: 3,
-        text: 'Text 2'
-      },
-      {
-        id: 4,
-        text: 'Text 3'
-      },
-      {
-        id: 5,
-        text: 'Text 4'
-      }
-    ]
-  }),
-
-  methods: {
-    save() {
-      // send server
-    },
-    cancel() {
-    },
-    open() {
-    },
-    close() {
-    },
-    openAddModal() {
-      this.$refs.childDialogue.open()
-    },
-    openRemoveModal() {
-      this.$refs.removeDialogue.open()
-    }
+  validate({ params }) {
+    return /^\d+$/.test(params.id)
   }
 }
 </script>

frontend/services/document.service.js

@@ -0,0 +1,25 @@
+import ApiService from '@/services/api.service'
+
+class DocumentService {
+  constructor() {
+    this.request = new ApiService()
+  }
+
+  getDocumentList(projectId) {
+    return this.request.get(`/projects/${projectId}/docs`)
+  }
+
+  addDocument(projectId, payload) {
+    return this.request.post(`/projects/${projectId}/docs`, payload)
+  }
+
+  deleteDocument(projectId, docId) {
+    return this.request.delete(`/projects/${projectId}/docs/${docId}`)
+  }
+
+  updateDocument(projectId, docId, payload) {
+    return this.request.patch(`/projects/${projectId}/docs/${docId}`, payload)
+  }
+}
+
+export default new DocumentService()

frontend/store/documents.js

@@ -0,0 +1,76 @@
+import DocumentService from '@/services/document.service'
+
+export const state = () => ({
+  items: [],
+  selected: []
+})
+
+export const getters = {
+  isDocumentSelected(state) {
+    return state.selected.length > 0
+  }
+}
+
+export const mutations = {
+  setDocumentList(state, payload) {
+    state.items = payload
+  },
+  addDocument(state, document) {
+    state.items.unshift(document)
+  },
+  deleteDocument(state, documentId) {
+    state.items = state.items.filter(item => item.id !== documentId)
+  },
+  updateSelected(state, selected) {
+    state.selected = selected
+  },
+  updateDocument(state, document) {
+    const item = state.items.find(item => item.id === document.id)
+    Object.assign(item, document)
+  },
+  resetSelected(state) {
+    state.selected = []
+  }
+}
+
+export const actions = {
+  getDocumentList(context, config) {
+    return DocumentService.getDocumentList()
+      .then((response) => {
+        context.commit('setDocumentList', response)
+      })
+      .catch((error) => {
+        alert(error)
+      })
+  },
+  createDocument({ commit }, data) {
+    DocumentService.addDocument(data.projectId, data)
+      .then((response) => {
+        commit('addDocument', response)
+      })
+      .catch((error) => {
+        alert(error)
+      })
+  },
+  updateDocument({ commit }, data) {
+    DocumentService.updateDocument(data.projectId, data.id, data)
+      .then((response) => {
+        commit('updateDocument', response)
+      })
+      .catch((error) => {
+        alert(error)
+      })
+  },
+  deleteDocument({ commit, state }, projectId) {
+    for (const document of state.selected) {
+      DocumentService.deleteDocument(projectId, document.id)
+        .then((response) => {
+          commit('deleteDocument', document.id)
+        })
+        .catch((error) => {
+          alert(error)
+        })
+    }
+    commit('resetSelected')
+  }
+}