2021-10-05 05:11:42 +02:00
|
|
|
<template>
|
2021-10-13 03:07:42 +02:00
|
|
|
<div id="librariesTable" class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
|
2021-10-05 05:11:42 +02:00
|
|
|
<div class="flex items-center mb-2">
|
|
|
|
<h1 class="text-xl">Libraries</h1>
|
|
|
|
<div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddLibrary">
|
|
|
|
<span class="material-icons" style="font-size: 1.4rem">add</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-12-05 16:52:23 +01:00
|
|
|
<draggable :list="libraryCopies" v-bind="dragOptions" class="list-group" draggable=".item" tag="div" @start="startDrag" @end="endDrag">
|
2021-10-13 03:07:42 +02:00
|
|
|
<template v-for="library in libraryCopies">
|
2021-12-05 16:52:23 +01:00
|
|
|
<div :key="library.id" class="item">
|
2022-01-10 01:37:16 +01:00
|
|
|
<modals-libraries-library-item :library="library" :selected="currentLibraryId === library.id" :show-edit="true" :dragging="drag" @edit="editLibrary" @click="setLibrary" />
|
2021-12-05 16:52:23 +01:00
|
|
|
</div>
|
2021-10-13 03:07:42 +02:00
|
|
|
</template>
|
|
|
|
</draggable>
|
2021-10-05 05:11:42 +02:00
|
|
|
<modals-edit-library-modal v-model="showLibraryModal" :library="selectedLibrary" />
|
2021-12-06 02:21:06 +01:00
|
|
|
|
|
|
|
<p class="text-xs mt-4 text-gray-200">*<strong>Force Re-Scan</strong> will scan all files again like a fresh scan. Audio file ID3 tags, OPF files, and text files will be probed/parsed and used for book details.</p>
|
2021-10-05 05:11:42 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-10-13 03:07:42 +02:00
|
|
|
import draggable from 'vuedraggable'
|
|
|
|
|
2021-10-05 05:11:42 +02:00
|
|
|
export default {
|
2021-10-13 03:07:42 +02:00
|
|
|
components: {
|
|
|
|
draggable
|
|
|
|
},
|
2021-10-05 05:11:42 +02:00
|
|
|
data() {
|
|
|
|
return {
|
2021-10-13 03:07:42 +02:00
|
|
|
libraryCopies: [],
|
|
|
|
currentOrder: [],
|
2021-10-05 05:11:42 +02:00
|
|
|
showLibraryModal: false,
|
2021-10-13 03:07:42 +02:00
|
|
|
selectedLibrary: null,
|
|
|
|
drag: false,
|
|
|
|
dragOptions: {
|
|
|
|
animation: 200,
|
|
|
|
group: 'description',
|
|
|
|
ghostClass: 'ghost'
|
|
|
|
},
|
|
|
|
orderTimeout: null
|
2021-10-05 05:11:42 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
currentLibrary() {
|
|
|
|
return this.$store.getters['libraries/getCurrentLibrary']
|
|
|
|
},
|
|
|
|
currentLibraryId() {
|
|
|
|
return this.currentLibrary ? this.currentLibrary.id : null
|
|
|
|
},
|
|
|
|
libraries() {
|
2021-10-13 03:07:42 +02:00
|
|
|
return this.$store.getters['libraries/getSortedLibraries']()
|
2021-12-05 16:52:23 +01:00
|
|
|
},
|
|
|
|
libraryScans() {
|
|
|
|
return this.$store.state.scanners.libraryScans
|
2021-10-05 05:11:42 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2021-10-13 03:07:42 +02:00
|
|
|
startDrag() {
|
|
|
|
this.drag = true
|
|
|
|
clearTimeout(this.orderTimeout)
|
|
|
|
},
|
2021-12-05 16:52:23 +01:00
|
|
|
endDrag(e) {
|
2021-10-13 03:07:42 +02:00
|
|
|
this.drag = false
|
|
|
|
this.checkOrder()
|
|
|
|
},
|
|
|
|
checkOrder() {
|
|
|
|
clearTimeout(this.orderTimeout)
|
|
|
|
this.orderTimeout = setTimeout(() => {
|
|
|
|
this.saveOrder()
|
|
|
|
}, 500)
|
|
|
|
},
|
|
|
|
saveOrder() {
|
|
|
|
var _newOrder = 1
|
|
|
|
var currOrder = this.libraries.map((lib) => lib.id).join(',')
|
|
|
|
var libraryOrderData = this.libraryCopies.map((library) => {
|
|
|
|
return {
|
|
|
|
newOrder: _newOrder++,
|
|
|
|
oldOrder: library.displayOrder,
|
|
|
|
id: library.id
|
|
|
|
}
|
|
|
|
})
|
|
|
|
var newOrder = libraryOrderData.map((lib) => lib.id).join(',')
|
|
|
|
if (currOrder !== newOrder) {
|
2021-12-05 16:52:23 +01:00
|
|
|
this.$axios.$post('/api/libraries/order', libraryOrderData).then((libraries) => {
|
2021-10-13 03:07:42 +02:00
|
|
|
if (libraries && libraries.length) {
|
|
|
|
this.$toast.success('Library order saved', { timeout: 1500 })
|
|
|
|
this.$store.commit('libraries/set', libraries)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async setLibrary(library) {
|
2021-10-05 05:11:42 +02:00
|
|
|
await this.$store.dispatch('libraries/fetch', library.id)
|
|
|
|
this.$router.push(`/library/${library.id}`)
|
|
|
|
},
|
|
|
|
clickAddLibrary() {
|
|
|
|
this.selectedLibrary = null
|
|
|
|
this.showLibraryModal = true
|
|
|
|
},
|
|
|
|
editLibrary(library) {
|
|
|
|
this.selectedLibrary = library
|
|
|
|
this.showLibraryModal = true
|
|
|
|
},
|
2021-10-13 03:07:42 +02:00
|
|
|
init() {
|
|
|
|
this.libraryCopies = this.libraries.map((lib) => {
|
|
|
|
return { ...lib }
|
|
|
|
})
|
2021-10-23 23:49:34 +02:00
|
|
|
},
|
|
|
|
librariesUpdated() {
|
|
|
|
this.init()
|
2021-10-13 03:07:42 +02:00
|
|
|
}
|
2021-10-05 05:11:42 +02:00
|
|
|
},
|
|
|
|
mounted() {
|
2021-10-23 23:49:34 +02:00
|
|
|
this.$store.commit('libraries/addListener', { id: 'libraries-table', meth: this.librariesUpdated })
|
2021-10-05 05:11:42 +02:00
|
|
|
this.init()
|
|
|
|
},
|
2021-10-23 23:49:34 +02:00
|
|
|
beforeDestroy() {
|
|
|
|
this.$store.commit('libraries/removeListener', 'libraries-table')
|
|
|
|
}
|
2021-10-05 05:11:42 +02:00
|
|
|
}
|
|
|
|
</script>
|