2021-10-05 05:11:42 +02:00
|
|
|
<template>
|
2023-01-08 00:14:55 +01:00
|
|
|
<div class="w-full pl-2 pr-4 md:px-4 h-12 border border-white border-opacity-10 flex items-center relative -mt-px" :class="selected ? 'bg-primary bg-opacity-50' : 'hover:bg-primary hover:bg-opacity-25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
|
2021-10-05 05:11:42 +02:00
|
|
|
<div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
|
2023-01-08 00:14:55 +01:00
|
|
|
<ui-library-icon v-if="!libraryScan" :icon="library.icon" :size="6" font-size="lg md:text-xl" class="text-white" :class="isHovering ? 'text-opacity-90' : 'text-opacity-50'" />
|
2021-10-05 05:11:42 +02:00
|
|
|
<svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white text-opacity-50 animate-spin">
|
|
|
|
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
|
|
|
|
</svg>
|
2023-01-08 00:14:55 +01:00
|
|
|
<p class="text-base md:text-xl font-book pl-2 md:pl-4 hover:underline cursor-pointer" @click.stop="$emit('click', library)">{{ library.name }}</p>
|
|
|
|
|
2021-10-05 05:11:42 +02:00
|
|
|
<div class="flex-grow" />
|
2022-02-16 01:33:33 +01:00
|
|
|
|
2023-01-08 00:14:55 +01:00
|
|
|
<!-- Desktop context menu icon -->
|
|
|
|
<ui-context-menu-dropdown v-if="!libraryScan && !isDeleting" :items="contextMenuItems" :icon-class="`text-1.5xl text-gray-${isHovering ? 50 : 400}`" class="!hidden md:!block" @action="contextMenuAction" />
|
2022-02-16 01:33:33 +01:00
|
|
|
|
2023-01-08 00:14:55 +01:00
|
|
|
<!-- Mobile context menu icon -->
|
|
|
|
<span v-if="!libraryScan && !isDeleting" class="!block md:!hidden material-icons text-xl text-gray-300 ml-3 cursor-pointer" @click.stop="showMenu">more_vert</span>
|
2022-07-02 16:10:47 +02:00
|
|
|
|
2021-10-13 03:07:42 +02:00
|
|
|
<div v-show="isDeleting" class="text-xl text-gray-300 ml-3 animate-spin">
|
2021-10-10 23:36:21 +02:00
|
|
|
<svg viewBox="0 0 24 24" class="w-6 h-6">
|
|
|
|
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
|
|
|
|
</svg>
|
|
|
|
</div>
|
2023-01-08 00:14:55 +01:00
|
|
|
<span class="material-icons drag-handle text-xl text-gray-400 hover:text-gray-50 ml-2 md:ml-4">reorder</span>
|
2022-07-02 16:10:47 +02:00
|
|
|
|
|
|
|
<!-- For mobile -->
|
2023-01-08 00:14:55 +01:00
|
|
|
<modals-dialog v-model="showMobileMenu" :title="menuTitle" :items="contextMenuItems" @action="contextMenuAction" />
|
2021-10-05 05:11:42 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
library: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {}
|
|
|
|
},
|
|
|
|
selected: Boolean,
|
2021-10-13 03:07:42 +02:00
|
|
|
dragging: Boolean
|
2021-10-05 05:11:42 +02:00
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
2021-10-10 23:36:21 +02:00
|
|
|
mouseover: false,
|
2022-07-02 16:10:47 +02:00
|
|
|
isDeleting: false,
|
|
|
|
showMobileMenu: false
|
2021-10-05 05:11:42 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
2021-10-13 03:07:42 +02:00
|
|
|
isHovering() {
|
|
|
|
return this.mouseover && !this.dragging
|
|
|
|
},
|
2021-10-05 05:11:42 +02:00
|
|
|
libraryScan() {
|
|
|
|
return this.$store.getters['scanners/getLibraryScan'](this.library.id)
|
2022-04-21 01:05:09 +02:00
|
|
|
},
|
|
|
|
mediaType() {
|
|
|
|
return this.library.mediaType
|
|
|
|
},
|
|
|
|
isBookLibrary() {
|
|
|
|
return this.mediaType === 'book'
|
2022-07-02 16:10:47 +02:00
|
|
|
},
|
|
|
|
menuTitle() {
|
|
|
|
return this.library.name
|
|
|
|
},
|
2023-01-08 00:14:55 +01:00
|
|
|
contextMenuItems() {
|
2022-07-02 16:10:47 +02:00
|
|
|
const items = [
|
2023-01-08 00:14:55 +01:00
|
|
|
{
|
|
|
|
text: this.$strings.ButtonEdit,
|
|
|
|
action: 'edit',
|
|
|
|
value: 'edit'
|
|
|
|
},
|
2022-07-02 16:10:47 +02:00
|
|
|
{
|
2022-11-09 00:10:08 +01:00
|
|
|
text: this.$strings.ButtonScan,
|
2023-01-08 00:14:55 +01:00
|
|
|
action: 'scan',
|
2022-07-02 16:10:47 +02:00
|
|
|
value: 'scan'
|
|
|
|
},
|
|
|
|
{
|
2022-11-09 00:10:08 +01:00
|
|
|
text: this.$strings.ButtonForceReScan,
|
2023-01-08 00:14:55 +01:00
|
|
|
action: 'force-scan',
|
2022-07-02 16:10:47 +02:00
|
|
|
value: 'force-scan'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
if (this.isBookLibrary) {
|
|
|
|
items.push({
|
2022-11-09 00:10:08 +01:00
|
|
|
text: this.$strings.ButtonMatchBooks,
|
2023-01-08 00:14:55 +01:00
|
|
|
action: 'match-books',
|
2022-07-02 16:10:47 +02:00
|
|
|
value: 'match-books'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
items.push({
|
2022-11-09 00:10:08 +01:00
|
|
|
text: this.$strings.ButtonDelete,
|
2023-01-08 00:14:55 +01:00
|
|
|
action: 'delete',
|
2022-07-02 16:10:47 +02:00
|
|
|
value: 'delete'
|
|
|
|
})
|
|
|
|
return items
|
2021-10-05 05:11:42 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2023-01-08 00:14:55 +01:00
|
|
|
contextMenuAction(action) {
|
2022-07-02 16:10:47 +02:00
|
|
|
this.showMobileMenu = false
|
2023-01-08 00:14:55 +01:00
|
|
|
if (action === 'edit') {
|
|
|
|
this.editClick()
|
|
|
|
} else if (action === 'scan') {
|
2022-07-02 16:10:47 +02:00
|
|
|
this.scan()
|
|
|
|
} else if (action === 'force-scan') {
|
|
|
|
this.forceScan()
|
|
|
|
} else if (action === 'match-books') {
|
|
|
|
this.matchAll()
|
|
|
|
} else if (action === 'delete') {
|
|
|
|
this.deleteClick()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
showMenu() {
|
|
|
|
this.showMobileMenu = true
|
|
|
|
},
|
2022-02-16 01:33:33 +01:00
|
|
|
matchAll() {
|
|
|
|
this.$axios
|
2022-07-30 22:52:13 +02:00
|
|
|
.$get(`/api/libraries/${this.library.id}/matchall`)
|
2022-02-16 01:33:33 +01:00
|
|
|
.then(() => {
|
|
|
|
console.log('Starting scan for matches')
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed', error)
|
|
|
|
var errorMsg = err.response ? err.response.data : ''
|
|
|
|
this.$toast.error(errorMsg || 'Match all failed')
|
|
|
|
})
|
|
|
|
},
|
2021-10-05 05:11:42 +02:00
|
|
|
editClick() {
|
|
|
|
this.$emit('edit', this.library)
|
|
|
|
},
|
|
|
|
scan() {
|
2022-05-18 23:33:24 +02:00
|
|
|
this.$store
|
|
|
|
.dispatch('libraries/requestLibraryScan', { libraryId: this.library.id })
|
|
|
|
.then(() => {
|
2022-11-09 00:10:08 +01:00
|
|
|
this.$toast.success(this.$strings.ToastLibraryScanStarted)
|
2022-05-18 23:33:24 +02:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed to start scan', error)
|
2022-11-09 00:10:08 +01:00
|
|
|
this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
|
2022-05-18 23:33:24 +02:00
|
|
|
})
|
2021-10-10 23:36:21 +02:00
|
|
|
},
|
2021-12-05 00:57:47 +01:00
|
|
|
forceScan() {
|
2023-01-08 00:14:55 +01:00
|
|
|
const payload = {
|
|
|
|
message: this.$strings.MessageConfirmForceReScan,
|
|
|
|
callback: (confirmed) => {
|
|
|
|
if (confirmed) {
|
|
|
|
this.$store
|
|
|
|
.dispatch('libraries/requestLibraryScan', { libraryId: this.library.id, force: 1 })
|
|
|
|
.then(() => {
|
|
|
|
this.$toast.success(this.$strings.ToastLibraryScanStarted)
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed to start scan', error)
|
|
|
|
this.$toast.error(this.$strings.ToastLibraryScanFailedToStart)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
type: 'yesNo'
|
2022-05-18 23:36:54 +02:00
|
|
|
}
|
2023-01-08 00:14:55 +01:00
|
|
|
this.$store.commit('globals/setConfirmPrompt', payload)
|
2021-12-05 00:57:47 +01:00
|
|
|
},
|
2021-10-10 23:36:21 +02:00
|
|
|
deleteClick() {
|
2023-01-08 00:14:55 +01:00
|
|
|
const payload = {
|
|
|
|
message: this.$getString('MessageConfirmDeleteLibrary', [this.library.name]),
|
|
|
|
callback: (confirmed) => {
|
|
|
|
if (confirmed) {
|
|
|
|
this.isDeleting = true
|
|
|
|
this.$axios
|
|
|
|
.$delete(`/api/libraries/${this.library.id}`)
|
|
|
|
.then((data) => {
|
|
|
|
if (data.error) {
|
|
|
|
this.$toast.error(data.error)
|
|
|
|
} else {
|
|
|
|
this.$toast.success(this.$strings.ToastLibraryDeleteSuccess)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed to delete library', error)
|
|
|
|
this.$toast.error(this.$strings.ToastLibraryDeleteFailed)
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
this.isDeleting = false
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
type: 'yesNo'
|
2021-10-10 23:36:21 +02:00
|
|
|
}
|
2023-01-08 00:14:55 +01:00
|
|
|
this.$store.commit('globals/setConfirmPrompt', payload)
|
2021-10-05 05:11:42 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {}
|
|
|
|
}
|
|
|
|
</script>
|