mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2025-08-03 17:54:54 +02:00
Add: Experimental collections add/remove & db #151
This commit is contained in:
advplyr
parent
3d35b7dc3d
commit
bf0893d759
27 changed files with 784 additions and 62 deletions
166
client/components/modals/UserCollectionsModal.vue
Normal file
166
client/components/modals/UserCollectionsModal.vue
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<modals-modal v-model="show" name="collections" :processing="processing" :width="500" :height="'unset'">
|
||||
<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">Add to Collection</h1>
|
||||
</div>
|
||||
<div class="w-full overflow-y-auto overflow-x-hidden max-h-96">
|
||||
<transition-group name="list-complete" tag="div">
|
||||
<template v-for="collection in sortedCollections">
|
||||
<modals-collections-user-collection-item :key="collection.id" :collection="collection" class="list-complete-item" @add="addToCollection" @remove="removeFromCollection" />
|
||||
</template>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div v-if="!collections.length" class="flex h-32 items-center justify-center">
|
||||
<p class="text-xl">No Collections</p>
|
||||
</div>
|
||||
<div class="w-full h-px bg-white bg-opacity-10" />
|
||||
<form @submit.prevent="submitCreateCollection">
|
||||
<div class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
|
||||
<div class="flex-grow px-2">
|
||||
<ui-text-input v-model="newCollectionName" placeholder="New Collection" class="w-full" />
|
||||
</div>
|
||||
<ui-btn type="submit" color="success" :padding-x="4" class="h-10">Create</ui-btn>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</modals-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
newCollectionName: '',
|
||||
processing: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newVal) {
|
||||
if (newVal) {
|
||||
this.loadCollections()
|
||||
this.newCollectionName = ''
|
||||
} else {
|
||||
this.$store.commit('setSelectedAudiobook', null)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
show: {
|
||||
get() {
|
||||
return this.$store.state.globals.showUserCollectionsModal
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit('globals/setShowUserCollectionsModal', val)
|
||||
}
|
||||
},
|
||||
selectedAudiobook() {
|
||||
return this.$store.state.selectedAudiobook
|
||||
},
|
||||
selectedAudiobookId() {
|
||||
return this.selectedAudiobook ? this.selectedAudiobook.id : null
|
||||
},
|
||||
collections() {
|
||||
return this.$store.state.user.collections || []
|
||||
},
|
||||
sortedCollections() {
|
||||
return this.collections
|
||||
.map((c) => {
|
||||
var includesBook = !!c.books.find((b) => b.id === this.selectedAudiobookId)
|
||||
return {
|
||||
isBookIncluded: includesBook,
|
||||
...c
|
||||
}
|
||||
})
|
||||
.sort((a, b) => (a.isBookIncluded ? -1 : 1))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadCollections() {
|
||||
this.$store.dispatch('user/loadUserCollections')
|
||||
},
|
||||
removeFromCollection(collection) {
|
||||
if (!this.selectedAudiobookId) return
|
||||
|
||||
this.processing = true
|
||||
|
||||
this.$axios
|
||||
.$delete(`/api/collection/${collection.id}/book/${this.selectedAudiobookId}`)
|
||||
.then((updatedCollection) => {
|
||||
console.log(`Book removed from collection`, updatedCollection)
|
||||
this.$toast.success('Book removed from collection')
|
||||
this.processing = false
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to remove book from collection', error)
|
||||
this.$toast.error('Failed to remove book from collection')
|
||||
this.processing = false
|
||||
})
|
||||
},
|
||||
addToCollection(collection) {
|
||||
if (!this.selectedAudiobookId) return
|
||||
|
||||
this.processing = true
|
||||
|
||||
this.$axios
|
||||
.$post(`/api/collection/${collection.id}/book`, { id: this.selectedAudiobookId })
|
||||
.then((updatedCollection) => {
|
||||
console.log(`Book added to collection`, updatedCollection)
|
||||
this.$toast.success('Book added to collection')
|
||||
this.processing = false
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to add book to collection', error)
|
||||
this.$toast.error('Failed to add book to collection')
|
||||
this.processing = false
|
||||
})
|
||||
},
|
||||
submitCreateCollection() {
|
||||
if (!this.newCollectionName || !this.selectedAudiobook) {
|
||||
return
|
||||
}
|
||||
this.processing = true
|
||||
var newCollection = {
|
||||
books: [this.selectedAudiobook.id],
|
||||
libraryId: this.selectedAudiobook.libraryId,
|
||||
name: this.newCollectionName
|
||||
}
|
||||
this.$axios
|
||||
.$post('/api/collection', newCollection)
|
||||
.then((data) => {
|
||||
console.log('New Collection Created', data)
|
||||
this.$toast.success(`Collection "${data.name}" created`)
|
||||
this.processing = false
|
||||
this.newCollectionName = ''
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to create collection', error)
|
||||
var errMsg = error.response ? error.response.data || '' : ''
|
||||
this.$toast.error(`Failed to create collection: ${errMsg}`)
|
||||
this.processing = false
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list-complete-item {
|
||||
transition: all 0.8s ease;
|
||||
/* display: block;
|
||||
margin-right: 10px; */
|
||||
}
|
||||
|
||||
.list-complete-enter-from,
|
||||
.list-complete-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.list-complete-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-4 py-4 justify-start relative hover:bg-bg" :class="wrapperClass" @click="click" @mouseover="mouseover" @mouseleave="mouseleave">
|
||||
<div class="flex items-center px-4 py-4 justify-start relative hover:bg-bg" :class="wrapperClass" @click="click" @mouseover="mouseover" @mouseleave="mouseleave">
|
||||
<!-- <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-80'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> -->
|
||||
<div class="w-16 max-w-16 text-center">
|
||||
<p class="text-sm font-mono text-gray-400">
|
||||
|
|
|
|||
91
client/components/modals/collections/UserCollectionItem.vue
Normal file
91
client/components/modals/collections/UserCollectionItem.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div class="flex items-center px-4 py-2 justify-start relative hover:bg-bg" :class="wrapperClass" @mouseover="mouseover" @mouseleave="mouseleave">
|
||||
<div v-if="isBookIncluded" class="absolute top-0 left-0 h-full w-1 bg-success z-10" />
|
||||
<!-- <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-80'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> -->
|
||||
<div class="w-16 max-w-16 text-center">
|
||||
<!-- <img src="/Logo.png" /> -->
|
||||
<cards-group-cover :name="collection.name" :book-items="books" :width="64" :height="64" type="collection" />
|
||||
</div>
|
||||
<div class="flex-grow overflow-hidden px-2">
|
||||
<!-- <template v-if="isEditing">
|
||||
<form @submit.prevent="submitUpdate">
|
||||
<div class="flex items-center">
|
||||
<div class="flex-grow pr-2">
|
||||
<ui-text-input v-model="newBookmarkTitle" placeholder="Note" class="w-full" />
|
||||
</div>
|
||||
<ui-btn type="submit" color="success" :padding-x="4" class="h-10"><span class="material-icons -mt-px">forward</span></ui-btn>
|
||||
<div class="pl-2 flex items-center">
|
||||
<span class="material-icons text-3xl text-white text-opacity-70 hover:text-opacity-95 cursor-pointer" @click.stop.prevent="cancelEditing">close</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template> -->
|
||||
<p class="pl-2 pr-2 truncate">{{ collection.name }}</p>
|
||||
</div>
|
||||
<div v-if="!isEditing" class="h-full flex items-center justify-end transform" :class="isHovering ? 'transition-transform translate-0 w-16' : 'translate-x-40 w-0'">
|
||||
<ui-btn v-if="!isBookIncluded" color="success" :padding-x="3" small class="h-9" @click.stop="clickAdd"><span class="material-icons pt-px">add</span></ui-btn>
|
||||
<ui-btn v-else color="error" :padding-x="3" class="h-9" small @click.stop="clickRem"><span class="material-icons pt-px">remove</span></ui-btn>
|
||||
<!-- <span class="material-icons text-xl mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
|
||||
<span class="material-icons text-xl text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
collection: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
highlight: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isHovering: false,
|
||||
isEditing: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isBookIncluded() {
|
||||
return !!this.collection.isBookIncluded
|
||||
},
|
||||
wrapperClass() {
|
||||
var classes = []
|
||||
if (this.highlight) classes.push('bg-bg bg-opacity-60')
|
||||
if (!this.isEditing) classes.push('cursor-pointer')
|
||||
return classes.join(' ')
|
||||
},
|
||||
books() {
|
||||
return this.collection.books || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
mouseover() {
|
||||
if (this.isEditing) return
|
||||
this.isHovering = true
|
||||
},
|
||||
mouseleave() {
|
||||
this.isHovering = false
|
||||
},
|
||||
clickAdd() {
|
||||
this.$emit('add', this.collection)
|
||||
},
|
||||
clickRem() {
|
||||
this.$emit('remove', this.collection)
|
||||
},
|
||||
deleteClick() {
|
||||
if (this.isEditing) return
|
||||
this.$emit('delete', this.collection)
|
||||
},
|
||||
editClick() {
|
||||
this.isEditing = true
|
||||
this.isHovering = false
|
||||
},
|
||||
cancelEditing() {
|
||||
this.isEditing = false
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue