Delete all uploaded files

src/components/Imports/Files/Selector.vue

@@ -2,13 +2,21 @@
   <div v-if="files">
     <Uploader :corpus-id="corpusId" v-if="isVerified && canWrite(corpus)" />
     <br />
-    <div class="control is-pulled-right">
+    <div class="buttons is-pulled-right">
       <button v-if="filesSelected" class="button" v-on:click="setAllSelected(false)">Unselect all</button>
       <button v-else class="button" v-on:click="setAllSelected(true)">Select all</button>
+      <button
+        class="button is-danger is-outlined"
+        :class="{ 'is-loading': removing }"
+        :disabled="removing || null"
+        v-on:click="removeAll"
+      >
+        Delete all
+      </button>
     </div>
     <h2 class="subtitle is-marginless">Available files to import</h2>
-    <br />
-    <div class="columns is-multiline is-vcentered">
+    <div class="is-clearfix"></div>
+    <div class="columns is-multiline is-vcentered is-marginless">
       <div class="column is-one-quarter-fullhd is-one-third-widescreen is-half-tablet" v-for="file in files" :key="file.id">
         <File :file="file" />
       </div>
@@ -48,6 +56,9 @@ export default {
       immediate: true
     }
   },
+  data: () => ({
+    removing: false
+  }),
   computed: {
     ...mapGetters('auth', ['isVerified']),
     ...mapState('files', ['files', 'loaded']),
@@ -61,21 +72,15 @@ export default {
     list () {
       this.$store.dispatch('files/list', { corpus: this.corpusId })
     },
-    isSelected (file) {
-      return this.selectedfiles.indexOf(file) >= 0
-    },
-    updateValue (f) {
-      const fileIndex = this.selectedfiles.indexOf(f)
-      if (fileIndex >= 0) this.selectedfiles.splice(fileIndex, 1)
-      else this.selectedfiles.push(f)
-      this.$emit('change', this.selectedfiles)
-    },
-    async remove (f) {
-      await this.$store.dispatch('files/delete', { id: f.id })
-      this.list()
-      const fileIndex = this.selectedfiles.indexOf(f)
-      if (fileIndex >= 0) this.selectedfiles.splice(fileIndex, 1)
-      this.$emit('change', this.selectedfiles)
+    async removeAll () {
+      this.removing = true
+      try {
+        for (const id in this.files) {
+          await this.$store.dispatch('files/delete', { id })
+        }
+      } finally {
+        this.removing = false
+      }
     }
   }
 }