Initial commit

client/components/app/Appbar.vue

@@ -49,6 +49,9 @@
       <div v-show="numLibraryItemsSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
         <h1 class="text-2xl px-4">{{ numLibraryItemsSelected }} Selected</h1>
         <div class="flex-grow" />
+        <ui-tooltip v-if="userIsAdminOrUp && !isPodcastLibrary" text="Quick Match Selected" direction="bottom">
+          <ui-icon-btn :disabled="processingBatch" icon="auto_awesome" @click="batchAutoMatchClick" class="mx-1.5" />
+        </ui-tooltip>
         <ui-tooltip v-if="!isPodcastLibrary" :text="`Mark as ${selectedIsFinished ? 'Not Finished' : 'Finished'}`" direction="bottom">
           <ui-read-icon-btn :disabled="processingBatch" :is-read="selectedIsFinished" @click="toggleBatchRead" class="mx-1.5" />
         </ui-tooltip>
@@ -210,7 +213,10 @@ export default {
     },
     setBookshelfTotalEntities(totalEntities) {
       this.totalEntities = totalEntities
-    }
+    },
+    batchAutoMatchClick() {
+      this.$store.commit('globals/setShowBatchQuickMatchModal', true)
+    },
   },
   mounted() {
     this.$eventBus.$on('bookshelf-total-entities', this.setBookshelfTotalEntities)

client/components/modals/BatchQuickMatchModel.vue

@@ -0,0 +1,70 @@
+<template>
+  <modals-modal v-model="show" name="batchQuickMatch" :processing="processing" :width="500" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
+      <div v-if="show" class="w-full h-full">
+        <div class="py-4 px-4">
+          <h1 class="text-2xl">Quick Match {{ selectedBookIds.length }} Books</h1>
+        </div>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      processing: false
+    }
+  },
+  computed: {
+    show: {
+      get() {
+		  console.log("Getter")
+        return this.$store.state.globals.showBatchQuickMatchModal
+      },
+      set(val) {
+		  console.log("Setter")
+        this.$store.commit('globals/setShowBatchQuickMatchModal', val)
+      }
+    },
+    title() {
+      return `${this.selectedBookIds.length} Items Selected`
+    },
+    showBatchQuickMatchModal() {
+      return this.$store.state.globals.showBatchQuickMatchModal
+    },
+    selectedBookIds() {
+      return this.$store.state.selectedLibraryItems || []
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+  },
+  mounted() {}
+}
+</script>
+
+<style>
+.list-complete-item {
+  transition: all 0.8s ease;
+}
+
+.list-complete-enter-from,
+.list-complete-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-complete-leave-active {
+  position: absolute;
+}
+</style>

client/store/globals.js

@@ -14,6 +14,7 @@ export const state = () => ({
   selectedAuthor: null,
   isCasting: false, // Actively casting
   isChromecastInitialized: false, // Script loaded
+  showBatchQuickMatchModal: false,
   dateFormats: [
     {
       text: 'MM/DD/YYYY',
@@ -108,5 +109,9 @@ export const mutations = {
   },
   setCasting(state, val) {
     state.isCasting = val
+  },
+  setShowBatchQuickMatchModal(state, val) {
+	  console.log("setShowBatchQuickMatchModal: " + val)
+    state.showBatchQuickMatchModal = val
   }
 }