Add:Language and ASIN id3 tag parse, language filter, asin search, asin audible match, add fields to details #305

client/components/app/LazyBookshelf.vue

@@ -18,6 +18,9 @@
     </div>
     <div v-else-if="!totalShelves && initialized" class="w-full py-16">
       <p class="text-xl text-center">{{ emptyMessage }}</p>
+      <div class="flex justify-center mt-2">
+        <ui-btn v-if="hasFilter" color="primary" @click="clearFilter">Clear Filter</ui-btn>
+      </div>
     </div>
 
     <widgets-cover-size-widget class="fixed bottom-4 right-4 z-30" />
@@ -86,6 +89,7 @@ export default {
     emptyMessage() {
       if (this.page === 'series') return `You have no series`
       if (this.page === 'collections') return "You haven't made any collections yet"
+      if (this.hasFilter) return `No Results for filter "${this.filterValue}"`
       return 'No results'
     },
     entityName() {
@@ -120,6 +124,17 @@ export default {
     hasFilter() {
       return this.filterBy && this.filterBy !== 'all'
     },
+    filterName() {
+      if (!this.filterBy) return ''
+      var filter = this.filterBy.split('.')[0]
+      filter = filter.substr(0, 1).toUpperCase() + filter.substr(1)
+      return filter
+    },
+    filterValue() {
+      if (!this.filterBy) return ''
+      if (!this.filterBy.includes('.')) return ''
+      return this.$decode(this.filterBy.split('.')[1])
+    },
     currentLibraryId() {
       return this.$store.state.libraries.currentLibraryId
     },
@@ -175,6 +190,9 @@ export default {
     showBookshelfTextureModal() {
       this.$store.commit('globals/setShowBookshelfTextureModal', true)
     },
+    clearFilter() {
+      this.$store.dispatch('user/updateUserSettings', { filterBy: 'all' })
+    },
     editEntity(entity) {
       if (this.entityName === 'books' || this.entityName === 'series-books') {
         var bookIds = this.entities.map((e) => e.id)

client/components/cards/AudiobookSearchCard.vue

@@ -10,7 +10,7 @@
       <p v-if="matchKey !== 'authorFL'" class="text-xs text-gray-200 truncate">by {{ authorFL }}</p>
       <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
 
-      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
+      <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
     </div>
   </div>
 </template>
@@ -71,6 +71,7 @@ export default {
       if (this.matchKey === 'tags') return `<p class="truncate">Tags: ${html}</p>`
       if (this.matchKey === 'authorFL') return `by ${html}`
       if (this.matchKey === 'isbn') return `<p class="truncate">ISBN: ${html}</p>`
+      if (this.matchKey === 'asin') return `<p class="truncate">ASIN: ${html}</p>`
       if (this.matchKey === 'series') return `<p class="truncate">Series: ${html}</p>`
       return `${html}`
     }

client/components/controls/FilterSelect.vue

@@ -14,7 +14,7 @@
       </div>
     </button>
 
-    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
       <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in items">
           <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
@@ -97,6 +97,11 @@ export default {
           value: 'narrators',
           sublist: true
         },
+        {
+          text: 'Language',
+          value: 'languages',
+          sublist: true
+        },
         {
           text: 'Progress',
           value: 'progress',
@@ -155,6 +160,9 @@ export default {
     narrators() {
       return this.filterData.narrators || []
     },
+    languages() {
+      return this.filterData.languages || []
+    },
     progress() {
       return ['Read', 'Unread', 'In Progress']
     },

client/components/modals/edit-tabs/Details.vue

@@ -2,9 +2,14 @@
   <div class="w-full h-full relative">
     <form class="w-full h-full" @submit.prevent="submitForm">
       <div ref="formWrapper" class="px-4 py-6 details-form-wrapper w-full overflow-hidden overflow-y-auto">
-        <ui-text-input-with-label v-model="details.title" label="Title" />
-
-        <ui-text-input-with-label v-model="details.subtitle" label="Subtitle" class="mt-2" />
+        <div class="flex -mx-1">
+          <div class="w-1/2 px-1">
+            <ui-text-input-with-label v-model="details.title" label="Title" />
+          </div>
+          <div class="flex-grow px-1">
+            <ui-text-input-with-label v-model="details.subtitle" label="Subtitle" />
+          </div>
+        </div>
 
         <div class="flex mt-2 -mx-1">
           <div class="w-3/4 px-1">
@@ -43,8 +48,17 @@
             <ui-text-input-with-label v-model="details.publisher" label="Publisher" />
           </div>
           <div class="flex-grow px-1">
+            <ui-text-input-with-label v-model="details.language" label="Language" />
+          </div>
+        </div>
+
+        <div class="flex mt-2 -mx-1">
+          <div class="w-1/3 px-1">
             <ui-text-input-with-label v-model="details.isbn" label="ISBN" />
           </div>
+          <div class="w-1/3 px-1">
+            <ui-text-input-with-label v-model="details.asin" label="ASIN" />
+          </div>
         </div>
       </div>
 
@@ -90,7 +104,9 @@ export default {
         volumeNumber: null,
         publishYear: null,
         publisher: null,
+        language: null,
         isbn: null,
+        asin: null,
         genres: []
       },
       newTags: [],
@@ -231,7 +247,9 @@ export default {
       this.details.volumeNumber = this.book.volumeNumber
       this.details.publishYear = this.book.publishYear
       this.details.publisher = this.book.publisher || null
+      this.details.language = this.book.language || null
       this.details.isbn = this.book.isbn || null
+      this.details.asin = this.book.asin || null
 
       this.newTags = this.audiobook.tags || []
     },

client/components/modals/edit-tabs/Match.vue

@@ -65,10 +65,7 @@
           <ui-checkbox v-model="selectedMatchUsage.publishYear" />
           <ui-text-input-with-label v-model="selectedMatch.publishYear" :disabled="!selectedMatchUsage.publishYear" label="Publish Year" class="flex-grow ml-4" />
         </div>
-        <div v-if="selectedMatch.isbn" class="flex items-center py-2">
-          <ui-checkbox v-model="selectedMatchUsage.isbn" />
-          <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" class="flex-grow ml-4" />
-        </div>
+
         <div v-if="selectedMatch.series" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.series" />
           <ui-text-input-with-label v-model="selectedMatch.series" :disabled="!selectedMatchUsage.series" label="Series" class="flex-grow ml-4" />
@@ -77,10 +74,14 @@
           <ui-checkbox v-model="selectedMatchUsage.volumeNumber" />
           <ui-text-input-with-label v-model="selectedMatch.volumeNumber" :disabled="!selectedMatchUsage.volumeNumber" label="Volume Number" class="flex-grow ml-4" />
         </div>
-        <!-- <div v-if="selectedMatch.asin" class="flex items-center py-2">
+        <div v-if="selectedMatch.isbn" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.isbn" />
+          <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.asin" class="flex items-center py-2">
           <ui-checkbox v-model="selectedMatchUsage.asin" />
           <ui-text-input-with-label v-model="selectedMatch.asin" :disabled="!selectedMatchUsage.asin" label="ASIN" class="flex-grow ml-4" />
-        </div> -->
+        </div>
         <div class="flex items-center justify-end py-2">
           <ui-btn color="success" type="submit">Update</ui-btn>
         </div>
@@ -115,11 +116,12 @@ export default {
         author: true,
         narrator: true,
         description: true,
-        isbn: true,
         publisher: true,
         publishYear: true,
         series: true,
-        volumeNumber: true
+        volumeNumber: true,
+        asin: true,
+        isbn: true
       }
     }
   },
@@ -194,11 +196,12 @@ export default {
         author: true,
         narrator: true,
         description: true,
-        isbn: true,
         publisher: true,
         publishYear: true,
         series: true,
-        volumeNumber: true
+        volumeNumber: true,
+        asin: true,
+        isbn: true
       }
 
       if (this.audiobook.id !== this.audiobookId) {

client/components/tables/LibrariesTable.vue

@@ -9,7 +9,7 @@
     <draggable :list="libraryCopies" v-bind="dragOptions" class="list-group" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
       <template v-for="library in libraryCopies">
         <div :key="library.id" class="item">
-          <modals-libraries-library-item :library="library" :selected="currentLibraryId === library.id" :show-edit="true" :dragging="drag" @edit="editLibrary" @sort="draggableSort" @click="setLibrary" />
+          <modals-libraries-library-item :library="library" :selected="currentLibraryId === library.id" :show-edit="true" :dragging="drag" @edit="editLibrary" @click="setLibrary" />
         </div>
       </template>
     </draggable>