Delete organisms/DocumentList

frontend/components/containers/DocumentList.vue

@@ -1,23 +1,56 @@
 <template>
-  <document-list
+  <v-data-table
+    :value="selected"
     :headers="headers"
-    :docs="items"
-    :selected="selected"
+    :items="items"
+    item-key="id"
+    :options.sync="options"
+    :server-items-length="total"
+    :search="search"
     :loading="loading"
-    :total="total"
-    @update-selected="updateSelected"
-    @update-doc="handleUpdateDoc"
-    @change-option="handleChangeOption"
-  />
+    :footer-props="{
+      'items-per-page-options': [10, 50, 100]
+    }"
+    loading-text="Loading... Please wait"
+    show-select
+    @input="updateSelected"
+  >
+    <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="handleUpdateDocument({ id: item.id, text: $event })"
+          />
+        </template>
+      </v-edit-dialog>
+    </template>
+  </v-data-table>
 </template>
 
 <script>
 import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
-import DocumentList from '@/components/organisms/DocumentList'
 
 export default {
-  components: {
-    DocumentList
+  data() {
+    return {
+      search: '',
+      options: {}
+    }
   },
 
   computed: {
@@ -25,6 +58,19 @@ export default {
     ...mapGetters('documents', ['headers'])
   },
 
+  watch: {
+    options: {
+      handler() {
+        this.getDocumentList({
+          projectId: this.$route.params.id,
+          limit: this.options.itemsPerPage,
+          offset: (this.options.page - 1) * this.options.itemsPerPage
+        })
+      },
+      deep: true
+    }
+  },
+
   created() {
     this.getDocumentList({
       projectId: this.$route.params.id
@@ -35,20 +81,12 @@ export default {
     ...mapActions('documents', ['getDocumentList', 'updateDocument']),
     ...mapMutations('documents', ['updateSelected']),
 
-    handleUpdateDoc(payload) {
+    handleUpdateDocument(payload) {
       const data = {
         projectId: this.$route.params.id,
         ...payload
       }
       this.updateDocument(data)
-    },
-
-    handleChangeOption(option) {
-      this.getDocumentList({
-        projectId: this.$route.params.id,
-        limit: option.itemsPerPage,
-        offset: (option.page - 1) * option.itemsPerPage
-      })
     }
   }
 }

frontend/components/organisms/DocumentList.vue

@@ -1,97 +0,0 @@
-<template>
-  <v-data-table
-    :value="selected"
-    :headers="headers"
-    :items="docs"
-    item-key="id"
-    :options.sync="options"
-    :server-items-length="total"
-    :search="search"
-    :loading="loading"
-    :footer-props="{
-      'items-per-page-options': [10, 50, 100]
-    }"
-    loading-text="Loading... Please wait"
-    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
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-      required: true
-    },
-    total: {
-      type: Number,
-      default: 0,
-      required: true
-    }
-  },
-  data() {
-    return {
-      search: '',
-      options: {}
-    }
-  },
-  watch: {
-    options: {
-      handler() {
-        this.$emit('change-option', this.options)
-      },
-      deep: true
-    }
-  },
-  methods: {
-    update(selected) {
-      this.$emit('update-selected', selected)
-    },
-    updateDocument(payload) {
-      this.$emit('update-doc', payload)
-    }
-  }
-}
-</script>