From 53c5c760268cc35e9e92f436465af04d6ca94a33 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 9 Sep 2019 11:11:45 +0900
Subject: [PATCH] Implement document deletion button

---
 .../containers/DocumentDeletionButton.vue     | 35 ++++++++
 frontend/pages/projects/_id/dataset/index.vue | 88 ++-----------------
 2 files changed, 40 insertions(+), 83 deletions(-)
 create mode 100644 frontend/components/containers/DocumentDeletionButton.vue

diff --git a/frontend/components/containers/DocumentDeletionButton.vue b/frontend/components/containers/DocumentDeletionButton.vue
new file mode 100644
index 00000000..0f73961d
--- /dev/null
+++ b/frontend/components/containers/DocumentDeletionButton.vue
@@ -0,0 +1,35 @@
+<template>
+  <confirm-dialog
+    title="Delete Document"
+    message="Are you sure you want to delete these documents from this project?"
+    item-key="text"
+    :disabled="!isDocumentSelected"
+    :items="selected"
+    @ok="handleDeleteDocument()"
+  />
+</template>
+
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex'
+import ConfirmDialog from '@/components/organisms/ConfirmDialog'
+
+export default {
+  components: {
+    ConfirmDialog
+  },
+
+  computed: {
+    ...mapState('documents', ['selected']),
+    ...mapGetters('documents', ['isDocumentSelected'])
+  },
+
+  methods: {
+    ...mapActions('documents', ['deleteDocument']),
+
+    handleDeleteDocument() {
+      const projectId = this.$route.params.id
+      this.deleteDocument(projectId)
+    }
+  }
+}
+</script>
diff --git a/frontend/pages/projects/_id/dataset/index.vue b/frontend/pages/projects/_id/dataset/index.vue
index 51c4bce6..f213259f 100644
--- a/frontend/pages/projects/_id/dataset/index.vue
+++ b/frontend/pages/projects/_id/dataset/index.vue
@@ -1,101 +1,23 @@
 <template>
   <v-card>
     <v-card-title>
-    <!--
-      <label-creation-button />
-      <label-deletion-button />
-      -->
+      <document-deletion-button />
     </v-card-title>
     <document-list />
   </v-card>
-  <!--
-  <v-content>
-    <v-container
-      fluid
-      fill-height
-    >
-      <v-layout
-        justify-center
-      >
-        <v-flex>
-          <v-card>
-            <v-card-title>
-              <v-btn
-                class="mb-2 text-capitalize"
-                outlined
-                :disabled="selected.length === 0"
-                @click="openRemoveModal"
-              >
-                Remove
-              </v-btn>
-              <Modal
-                ref="removeDialogue"
-                :title="removeModal.title"
-                :button="removeModal.button"
-              >
-                Are you sure you want to remove these documents from this project?
-                <v-list dense>
-                  <v-list-item v-for="(doc, i) in selected" :key="i">
-                    <v-list-item-content>
-                      <v-list-item-title>{{ doc.text | truncate(50) }}</v-list-item-title>
-                    </v-list-item-content>
-                  </v-list-item>
-                </v-list>
-              </Modal>
-            </v-card-title>
-            <v-data-table
-              v-model="selected"
-              :headers="headers"
-              :items="docs"
-              item-key="id"
-              :search="search"
-              show-select
-            >
-              <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
-                  :return-value.sync="item.text"
-                  large
-                >
-                  <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
-                      v-model="item.text"
-                      label="Edit"
-                    />
-                  </template>
-                </v-edit-dialog>
-              </template>
-            </v-data-table>
-          </v-card>
-        </v-flex>
-      </v-layout>
-    </v-container>
-  </v-content>
-  -->
 </template>
 
 <script>
 import DocumentList from '@/components/containers/DocumentList'
 // import DocumentCreationButton from '@/components/containers/DocumentCreationButton'
-// import DocumentDeletionButton from '@/components/containers/DocumentDeletionButton'
+import DocumentDeletionButton from '@/components/containers/DocumentDeletionButton'
 
 export default {
   layout: 'project',
   components: {
-    DocumentList
-    // LabelCreationButton,
-    // LabelDeletionButton
+    DocumentList,
+    // DocumentCreationButton,
+    DocumentDeletionButton
   },
   validate({ params }) {
     return /^\d+$/.test(params.id)