From f2aa7e34c7a135740795aa51347c64cf199f503b Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 8 Mar 2021 11:48:42 +0900
Subject: [PATCH] Remove document components

---
 .../documents/DocumentActionMenu.vue          |  69 --------
 .../documents/DocumentBulkDeletionButton.vue  |  50 ------
 .../documents/DocumentDeletionButton.vue      |  58 -------
 .../containers/documents/DocumentList.vue     | 161 ------------------
 .../documents/DocumentExportForm.vue          | 118 -------------
 .../documents/DocumentUploadForm.vue          | 143 ----------------
 6 files changed, 599 deletions(-)
 delete mode 100644 frontend/components/containers/documents/DocumentActionMenu.vue
 delete mode 100644 frontend/components/containers/documents/DocumentBulkDeletionButton.vue
 delete mode 100644 frontend/components/containers/documents/DocumentDeletionButton.vue
 delete mode 100644 frontend/components/containers/documents/DocumentList.vue
 delete mode 100644 frontend/components/organisms/documents/DocumentExportForm.vue
 delete mode 100644 frontend/components/organisms/documents/DocumentUploadForm.vue

diff --git a/frontend/components/containers/documents/DocumentActionMenu.vue b/frontend/components/containers/documents/DocumentActionMenu.vue
deleted file mode 100644
index e52c3e0d..00000000
--- a/frontend/components/containers/documents/DocumentActionMenu.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <div>
-    <action-menu
-      :items="menuItems"
-      :text="$t('dataset.actions')"
-      @upload="importDialog=true"
-      @download="exportDialog=true"
-    />
-    <v-dialog
-      v-model="importDialog"
-      width="800"
-    >
-      <document-upload-form
-        :upload-document="uploadDocument"
-        :formats="getImportFormat"
-        @close="importDialog=false"
-      />
-    </v-dialog>
-    <v-dialog
-      v-model="exportDialog"
-      width="800"
-    >
-      <document-export-form
-        :export-document="exportDocument"
-        :formats="getExportFormat"
-        @close="exportDialog=false"
-      />
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-import { mapActions, mapGetters } from 'vuex'
-import ActionMenu from '@/components/molecules/ActionMenu'
-import DocumentUploadForm from '@/components/organisms/documents/DocumentUploadForm'
-import DocumentExportForm from '@/components/organisms/documents/DocumentExportForm'
-
-export default {
-  components: {
-    ActionMenu,
-    DocumentUploadForm,
-    DocumentExportForm
-  },
-
-  data() {
-    return {
-      importDialog: false,
-      exportDialog: false,
-      menuItems: [
-        { title: this.$t('dataset.importDataset'), icon: 'mdi-upload', event: 'upload' },
-        { title: this.$t('dataset.exportDataset'), icon: 'mdi-download', event: 'download' }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapGetters('projects', ['getImportFormat', 'getExportFormat'])
-  },
-
-  created() {
-    this.setCurrentProject(this.$route.params.id)
-  },
-
-  methods: {
-    ...mapActions('documents', ['uploadDocument', 'exportDocument']),
-    ...mapActions('projects', ['setCurrentProject'])
-  }
-}
-</script>
diff --git a/frontend/components/containers/documents/DocumentBulkDeletionButton.vue b/frontend/components/containers/documents/DocumentBulkDeletionButton.vue
deleted file mode 100644
index 6b7638c1..00000000
--- a/frontend/components/containers/documents/DocumentBulkDeletionButton.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div>
-    <v-btn
-      :disabled="!total"
-      class="text-capitalize"
-      color="error"
-      @click="dialog=true"
-    >
-      {{ $t('generic.deleteAll') }}
-    </v-btn>
-    <v-dialog
-      v-model="dialog"
-      width="800"
-    >
-      <confirm-form
-        :title="$t('dataset.deleteBulkDocumentsTitle')"
-        :message="$t('dataset.deleteBulkDocumentsMessage')"
-        :button-true-text="$t('generic.yes')"
-        :button-false-text="$t('generic.cancel')"
-        @ok="deleteAllDocuments($route.params.id);dialog=false"
-        @cancel="dialog=false"
-      />
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-import { mapState, mapActions } from 'vuex'
-import ConfirmForm from '@/components/organisms/utils/ConfirmForm'
-
-export default {
-  components: {
-    ConfirmForm
-  },
-
-  data() {
-    return {
-      dialog: false
-    }
-  },
-
-  computed: {
-    ...mapState('documents', ['total'])
-  },
-
-  methods: {
-    ...mapActions('documents', ['deleteAllDocuments'])
-  }
-}
-</script>
diff --git a/frontend/components/containers/documents/DocumentDeletionButton.vue b/frontend/components/containers/documents/DocumentDeletionButton.vue
deleted file mode 100644
index e201416f..00000000
--- a/frontend/components/containers/documents/DocumentDeletionButton.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div>
-    <v-btn
-      :disabled="!isDocumentSelected"
-      class="text-capitalize"
-      outlined
-      @click="dialog=true"
-    >
-      {{ $t('generic.delete') }}
-    </v-btn>
-    <v-dialog
-      v-model="dialog"
-      width="800"
-    >
-      <confirm-form
-        :items="selected"
-        :title="$t('dataset.deleteDocumentsTitle')"
-        :message="$t('dataset.deleteDocumentsMessage')"
-        :button-true-text="$t('generic.yes')"
-        :button-false-text="$t('generic.cancel')"
-        item-key="text"
-        @ok="deleteDocument($route.params.id);dialog=false"
-        @cancel="dialog=false"
-      />
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-import { mapState, mapGetters, mapActions } from 'vuex'
-import ConfirmForm from '@/components/organisms/utils/ConfirmForm'
-
-export default {
-  components: {
-    ConfirmForm
-  },
-
-  data() {
-    return {
-      dialog: false
-    }
-  },
-
-  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/components/containers/documents/DocumentList.vue b/frontend/components/containers/documents/DocumentList.vue
deleted file mode 100644
index baa2a54c..00000000
--- a/frontend/components/containers/documents/DocumentList.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-  <v-data-table
-    :value="selected"
-    :headers="headers"
-    :items="items"
-    :options.sync="options"
-    :server-items-length="total"
-    :search="search"
-    :loading="loading"
-    :no-data-text="$t('vuetify.noDataAvailable')"
-    :footer-props="{
-      'showFirstLastPage': true,
-      'items-per-page-options': [10, 50, 100],
-      'items-per-page-text': $t('vuetify.itemsPerPageText')
-    }"
-    item-key="id"
-    :loading-text="$t('generic.loading')"
-    show-select
-    @input="updateSelected"
-  >
-    <template v-slot:top>
-      <v-text-field
-        v-model="search"
-        prepend-inner-icon="search"
-        :label="$t('generic.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="$t('generic.edit')"
-            autofocus
-            @change="handleUpdateDocument({ id: item.id, text: $event })"
-          />
-        </template>
-      </v-edit-dialog>
-    </template>
-    <template v-slot:item.comment_count="{ item }">
-      <span> {{ item.comment_count }} </span>
-    </template>
-    <template v-slot:item.action="{ item }">
-      <v-btn
-        small
-        color="primary text-capitalize"
-        @click="toLabeling(item)"
-      >
-        {{ $t('dataset.annotate') }}
-      </v-btn>
-    </template>
-  </v-data-table>
-</template>
-
-<script>
-import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
-
-export default {
-  async fetch() {
-    await this.getDocumentList({
-      projectId: this.$route.params.id,
-      ...this.$route.query
-    })
-  },
-
-  data() {
-    return {
-      search: this.$route.query.q,
-      options: {},
-      headers: [
-        {
-          text: this.$t('dataset.text'),
-          align: 'left',
-          value: 'text',
-          sortable: false
-        },
-        {
-          text: this.$t('dataset.metadata'),
-          align: 'left',
-          value: 'meta',
-          sortable: false
-        },
-        {
-          text: this.$t('comments.comments'),
-          align: 'left',
-          value: 'comment_count',
-          sortable: true
-        },
-        {
-          text: this.$t('dataset.action'),
-          align: 'left',
-          value: 'action',
-          sortable: false
-        }
-      ]
-    }
-  },
-
-  computed: {
-    ...mapState('documents', ['items', 'selected', 'loading', 'total']),
-    ...mapGetters('projects', ['getLink'])
-  },
-
-  watch: {
-    '$route.query': '$fetch',
-    options: {
-      handler(newvalue, oldvalue) {
-        this.$router.push({
-          query: {
-            limit: this.options.itemsPerPage,
-            offset: (this.options.page - 1) * this.options.itemsPerPage,
-            q: this.search
-          }
-        })
-      },
-      deep: true
-    },
-    search() {
-      this.$router.push({
-        query: {
-          limit: this.options.itemsPerPage,
-          offset: 0,
-          q: this.search
-        }
-      })
-      this.options.page = 1
-    }
-  },
-
-  methods: {
-    ...mapActions('documents', ['getDocumentList', 'updateDocument']),
-    ...mapMutations('documents', ['updateSelected']),
-
-    handleUpdateDocument(payload) {
-      const data = {
-        projectId: this.$route.params.id,
-        ...payload
-      }
-      this.updateDocument(data)
-    },
-
-    toLabeling(doc) {
-      const index = this.items.findIndex(item => item.id === doc.id)
-      const offset = (this.options.page - 1) * this.options.itemsPerPage
-      const page = offset + index + 1
-      this.$router.push({
-        path: this.localePath(`/projects/${this.$route.params.id}/${this.getLink}`),
-        query: {
-          page,
-          q: this.search
-        }
-      })
-    }
-  }
-}
-</script>
diff --git a/frontend/components/organisms/documents/DocumentExportForm.vue b/frontend/components/organisms/documents/DocumentExportForm.vue
deleted file mode 100644
index a3c96ad1..00000000
--- a/frontend/components/organisms/documents/DocumentExportForm.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-  <base-card
-    :disabled="!valid"
-    title="Export Data"
-    agree-text="Export"
-    cancel-text="Cancel"
-    @agree="download"
-    @cancel="cancel"
-  >
-    <template #content>
-      <v-form
-        ref="form"
-        v-model="valid"
-      >
-        <h2>{{ $t('dataset.importDataMessage1') }}</h2>
-        <v-radio-group
-          ref="format"
-          v-model="selectedFormat"
-          :rules="fileFormatRules($t('rules.fileFormatRules'))"
-        >
-          <v-radio
-            v-for="(format, i) in formats"
-            :key="i"
-            :label="format.text"
-            :value="format"
-          />
-        </v-radio-group>
-        <v-sheet
-          v-if="selectedFormat"
-          :dark="!$vuetify.theme.dark"
-          :light="$vuetify.theme.dark"
-          class="mb-5 pa-5"
-        >
-          <span v-for="(example, index) in selectedFormat.examples" :key="index">
-            {{ example }}<br>
-          </span>
-        </v-sheet>
-        <h2>{{ $t('dataset.exportDataMessage2') }}</h2>
-        <v-text-field v-model="selectedFileName" placeholder="Name the file" />
-        <v-checkbox
-          v-model="onlyApproved"
-          label="Export only approved documents"
-          color="success"
-          hide-details
-        />
-      </v-form>
-    </template>
-  </base-card>
-</template>
-
-<script>
-import BaseCard from '@/components/molecules/BaseCard'
-import { fileFormatRules, uploadFileRules } from '@/rules/index'
-
-export default {
-  components: {
-    BaseCard
-  },
-  props: {
-    exportDocument: {
-      type: Function,
-      default: () => {},
-      required: true
-    },
-    formats: {
-      type: Array,
-      default: () => [],
-      required: true
-    }
-  },
-  data() {
-    return {
-      valid: false,
-      file: null,
-      selectedFormat: null,
-      selectedFileName: 'project_' + this.$route.params.id + '_dataset',
-      onlyApproved: false,
-      fileFormatRules,
-      uploadFileRules
-    }
-  },
-
-  computed: {
-    acceptType() {
-      if (this.selectedFormat) {
-        return this.selectedFormat.accept
-      } else {
-        return '.txt,.csv,.json,.jsonl'
-      }
-    }
-  },
-
-  methods: {
-    cancel() {
-      this.$emit('close')
-    },
-    validate() {
-      return this.$refs.form.validate()
-    },
-    reset() {
-      this.$refs.format.reset()
-    },
-    download() {
-      if (this.validate()) {
-        this.exportDocument({
-          projectId: this.$route.params.id,
-          fileName: this.selectedFileName,
-          format: this.selectedFormat.type,
-          onlyApproved: this.onlyApproved,
-          suffix: this.selectedFormat.suffix
-        })
-        this.reset()
-        this.cancel()
-      }
-    }
-  }
-}
-</script>
diff --git a/frontend/components/organisms/documents/DocumentUploadForm.vue b/frontend/components/organisms/documents/DocumentUploadForm.vue
deleted file mode 100644
index 6159728a..00000000
--- a/frontend/components/organisms/documents/DocumentUploadForm.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <base-card
-    :disabled="!valid"
-    :title="$t('dataset.importDataTitle')"
-    :agree-text="$t('generic.upload')"
-    :cancel-text="$t('generic.cancel')"
-    @agree="create"
-    @cancel="cancel"
-  >
-    <template #content>
-      <v-form
-        ref="form"
-        v-model="valid"
-      >
-        <v-alert
-          v-show="showError"
-          v-model="showError"
-          type="error"
-          dismissible
-        >
-          {{ $t('errors.fileCannotUpload') + errorMsg }}
-        </v-alert>
-        <h2>{{ $t('dataset.importDataMessage1') }}</h2>
-        <v-radio-group
-          v-model="selectedFormat"
-          :rules="fileFormatRules($t('rules.fileFormatRules'))"
-        >
-          <v-radio
-            v-for="(format, i) in formats"
-            :key="i"
-            :label="format.text"
-            :value="format"
-          />
-        </v-radio-group>
-        <v-sheet
-          v-if="selectedFormat"
-          :dark="!$vuetify.theme.dark"
-          :light="$vuetify.theme.dark"
-          class="mb-5 pa-5"
-        >
-          <span v-for="(example, index) in selectedFormat.examples" :key="index">
-            {{ example }}<br>
-          </span>
-        </v-sheet>
-        <h2>{{ $t('dataset.importDataMessage2') }}</h2>
-        <v-file-input
-          v-model="file"
-          multiple
-          :accept="acceptType"
-          :rules="uploadFileRules($t('rules.uploadFileRules'))"
-          :label="$t('labels.filePlaceholder')"
-        />
-      </v-form>
-    </template>
-  </base-card>
-</template>
-
-<script>
-import BaseCard from '@/components/molecules/BaseCard'
-import { fileFormatRules, uploadFileRules } from '@/rules/index'
-
-export default {
-  components: {
-    BaseCard
-  },
-  props: {
-    uploadDocument: {
-      type: Function,
-      default: () => {},
-      required: true
-    },
-    formats: {
-      type: Array,
-      default: () => [],
-      required: true
-    }
-  },
-  data() {
-    return {
-      valid: false,
-      file: null,
-      selectedFormat: null,
-      fileFormatRules,
-      uploadFileRules,
-      showError: false,
-      errors: [],
-      errorMsg: ''
-    }
-  },
-
-  computed: {
-    acceptType() {
-      if (this.selectedFormat) {
-        return this.selectedFormat.accept
-      } else {
-        return '.txt,.csv,.json,.jsonl'
-      }
-    }
-  },
-
-  methods: {
-    cancel() {
-      this.$emit('close')
-    },
-    validate() {
-      return this.$refs.form.validate()
-    },
-    reset() {
-      this.$refs.form.reset()
-    },
-    create() {
-      if (this.validate()) {
-        this.errors = []
-        const promises = []
-        const id = this.$route.params.id
-        const type = this.selectedFormat.type
-        this.file.forEach((item) => {
-          promises.push({
-            projectId: id,
-            format: type,
-            file: item
-          })
-        })
-        let p = Promise.resolve()
-        promises.forEach((item) => {
-          p = p.then(() => this.uploadDocument(item)).catch(() => {
-            this.errors.push(item.file.name)
-            this.showError = true
-          })
-        })
-        p.finally(() => {
-          if (!this.errors.length) {
-            this.reset()
-            this.cancel()
-          } else {
-            this.errorMsg = this.errors.join(', ')
-          }
-        })
-      }
-    }
-  }
-}
-</script>