select/unselect all uploaded files in file import

src/components/Imports/Files/Selector.vue

@@ -2,7 +2,12 @@
   <div v-if="files">
     <Uploader :corpus-id="corpusId" v-if="isVerified && canWrite(corpus)" />
     <br />
+    <div class="control 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>
+    </div>
     <h2 class="subtitle is-marginless">Available files to import</h2>
+    <br />
     <div class="columns is-multiline is-vcentered">
       <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" />
@@ -18,7 +23,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
+import { mapState, mapGetters, mapMutations } from 'vuex'
 import { corporaMixin } from '@/mixins.js'
 import Uploader from './Uploader'
 import File from './File'
@@ -45,9 +50,14 @@ export default {
   },
   computed: {
     ...mapGetters('auth', ['isVerified']),
-    ...mapState('files', ['files', 'loaded'])
+    ...mapState('files', ['files', 'loaded']),
+    filesSelected () {
+      if (!this.files) return false
+      return Object.values(this.files).some(file => file.selected)
+    }
   },
   methods: {
+    ...mapMutations('files', ['setAllSelected']),
     list () {
       this.$store.dispatch('files/list', { corpus: this.corpusId })
     },

src/store/files.js

@@ -22,6 +22,12 @@ export const mutations = {
   },
   reset (state) {
     assign(state, initialState())
+  },
+  setAllSelected (state, selected) {
+    if (typeof (selected) !== 'boolean') {
+      throw new Error('"selected" value must be a boolean.')
+    }
+    state.files = Object.fromEntries(Object.values(state.files).map(file => [file.id, { ...file, selected }]))
   }
 }
 

tests/unit/store/files.spec.js

@@ -48,6 +48,77 @@ describe('files', () => {
       mutations.reset(state)
       assert.deepStrictEqual(state, { files: {}, loaded: false })
     })
+
+    describe('setAllSelected', () => {
+      it('selects all files', () => {
+        const state = {
+          files: { file1, file2 },
+          loaded: true
+        }
+        const expectedState = {
+          files: {
+            file1: {
+              id: 'file1',
+              name: 'lol.json',
+              selected: true
+            },
+            file2: {
+              id: 'file2',
+              name: 'image.jpg',
+              selected: true
+            }
+          },
+          loaded: true
+        }
+        mutations.setAllSelected(state, true)
+        assert.deepStrictEqual(state, expectedState)
+      })
+      it('unselects all files', () => {
+        const state = {
+          files: {
+            file1: {
+              id: 'file1',
+              name: 'lol.json',
+              selected: true
+            },
+            file2: {
+              id: 'file2',
+              name: 'image.jpg',
+              selected: true
+            }
+          },
+          loaded: true
+        }
+        const expectedState = {
+          files: {
+            file1: {
+              id: 'file1',
+              name: 'lol.json',
+              selected: false
+            },
+            file2: {
+              id: 'file2',
+              name: 'image.jpg',
+              selected: false
+            }
+          },
+          loaded: true
+        }
+        mutations.setAllSelected(state, false)
+        assert.deepStrictEqual(state, expectedState)
+      })
+      it('requires a boolean value', () => {
+        const state = {
+          files: { file1, file2 },
+          loaded: true
+        }
+        assert.throws(
+          () => mutations.setAllSelected(2),
+          '"selected" value must be a boolean.'
+        )
+        assert.deepStrictEqual(state, state)
+      })
+    })
   })
 
   describe('actions', () => {