From 88c7c1632e3cd13d4030f9dd4a10e46b7be1e2d0 Mon Sep 17 00:00:00 2001 From: Mark Cooper Date: Thu, 26 Aug 2021 18:32:05 -0500 Subject: [PATCH] Batch updating and deleting, multi-select --- client/assets/app.css | 4 + client/components/app/Appbar.vue | 66 +++++++++- client/components/app/BookShelf.vue | 7 +- client/components/app/StreamContainer.vue | 2 +- client/components/cards/BookCard.vue | 62 ++++++++-- client/components/ui/InputDropdown.vue | 12 +- client/layouts/default.vue | 3 + client/middleware/authenticated.js | 1 + client/package.json | 2 +- client/pages/batch/index.vue | 142 ++++++++++++++++++++++ client/store/index.js | 25 +++- package.json | 2 +- server/ApiController.js | 63 +++++++++- 13 files changed, 358 insertions(+), 33 deletions(-) create mode 100644 client/pages/batch/index.vue diff --git a/client/assets/app.css b/client/assets/app.css index a90e5a7a..328fb97b 100644 --- a/client/assets/app.css +++ b/client/assets/app.css @@ -75,6 +75,10 @@ box-shadow: 2px 8px 6px #111111aa; } +.box-shadow-lg-up { + box-shadow: 0px -12px 8px #111111ee; +} + .box-shadow-xl { box-shadow: 2px 14px 8px #111111aa; } \ No newline at end of file diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue index 0346c859..1e06bc26 100644 --- a/client/components/app/Appbar.vue +++ b/client/components/app/Appbar.vue @@ -17,6 +17,16 @@ + +
+

{{ numAudiobooksSelected }} Selected

+ {{ isAllSelected ? 'Select None' : 'Select All' }} + +
+ edit + delete + close +
@@ -35,7 +45,8 @@ export default { value: 'logout', text: 'Logout' } - ] + ], + processingBatchDelete: false } }, computed: { @@ -47,6 +58,18 @@ export default { }, username() { return this.user ? this.user.username : 'err' + }, + numAudiobooksSelected() { + return this.selectedAudiobooks.length + }, + selectedAudiobooks() { + return this.$store.state.selectedAudiobooks + }, + isAllSelected() { + return this.audiobooksShowing.length === this.selectedAudiobooks.length + }, + audiobooksShowing() { + return this.$store.getters['audiobooks/getFiltered']() } }, methods: { @@ -57,10 +80,6 @@ export default { this.$router.push('/') } }, - scan() { - console.log('Call Start Init') - this.$root.socket.emit('scan') - }, logout() { this.$axios.$post('/logout').catch((error) => { console.error(error) @@ -74,6 +93,43 @@ export default { if (action === 'logout') { this.logout() } + }, + cancelSelectionMode() { + if (this.processingBatchDelete) return + this.$store.commit('setSelectedAudiobooks', []) + }, + toggleSelectAll() { + if (this.isAllSelected) { + this.cancelSelectionMode() + } else { + var audiobookIds = this.audiobooksShowing.map((a) => a.id) + this.$store.commit('setSelectedAudiobooks', audiobookIds) + } + }, + batchDeleteClick() { + if (confirm(`Are you sure you want to delete these ${this.numAudiobooksSelected} audiobook(s)?`)) { + this.processingBatchDelete = true + this.$store.commit('setProcessingBatch', true) + this.$axios + .$post(`/api/audiobooks/delete`, { + audiobookIds: this.selectedAudiobooks + }) + .then(() => { + this.$toast.success('Batch delete success!') + this.processingBatchDelete = false + this.$store.commit('setProcessingBatch', false) + this.$store.commit('setSelectedAudiobooks', []) + }) + .catch((error) => { + this.$toast.error('Batch delete failed') + console.error('Failed to batch delete', error) + this.processingBatchDelete = false + this.$store.commit('setProcessingBatch', false) + }) + } + }, + batchEditClick() { + this.$router.push('/batch') } }, mounted() {} diff --git a/client/components/app/BookShelf.vue b/client/components/app/BookShelf.vue index c6bada15..6a7a96a6 100644 --- a/client/components/app/BookShelf.vue +++ b/client/components/app/BookShelf.vue @@ -1,7 +1,7 @@