2021-10-05 05:11:42 +02:00
|
|
|
<template>
|
2023-10-18 23:47:56 +02:00
|
|
|
<modals-modal v-model="show" name="edit-library" :width="800" :height="'unset'" :processing="processing">
|
2021-10-05 05:11:42 +02:00
|
|
|
<template #outer>
|
|
|
|
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
|
2023-02-11 22:02:56 +01:00
|
|
|
<p class="text-xl md:text-3xl text-white truncate">{{ title }}</p>
|
2021-10-05 05:11:42 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
2022-04-15 00:15:52 +02:00
|
|
|
<div class="absolute -top-10 left-0 z-10 w-full flex">
|
|
|
|
<template v-for="tab in tabs">
|
2023-02-11 22:02:56 +01:00
|
|
|
<div :key="tab.id" class="w-28 rounded-t-lg flex items-center justify-center mr-1 cursor-pointer hover:bg-bg border-t border-l border-r border-black-300 tab text-xs sm:text-base" :class="selectedTab === tab.id ? 'tab-selected bg-bg pb-px' : 'bg-primary text-gray-400'" @click="selectTab(tab.id)">{{ tab.title }}</div>
|
2022-04-15 00:15:52 +02:00
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
|
2022-12-15 23:51:37 +01:00
|
|
|
<div class="px-2 md:px-4 w-full text-sm pt-2 md:pt-6 pb-20 rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden" style="min-height: 400px; max-height: 80vh">
|
2023-10-18 00:46:43 +02:00
|
|
|
<component v-if="libraryCopy && show" ref="tabComponent" :is="tabName" :is-new="!library" :library="libraryCopy" :library-id="libraryId" :processing.sync="processing" @update="updateLibrary" @close="show = false" />
|
2022-04-15 00:15:52 +02:00
|
|
|
|
2023-10-18 00:46:43 +02:00
|
|
|
<div v-show="selectedTab !== 'tools'" class="absolute bottom-0 left-0 w-full px-4 py-4 border-t border-white border-opacity-10">
|
2022-04-15 00:15:52 +02:00
|
|
|
<div class="flex justify-end">
|
|
|
|
<ui-btn @click="submit">{{ buttonText }}</ui-btn>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-10-05 05:11:42 +02:00
|
|
|
</div>
|
|
|
|
</modals-modal>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
value: Boolean,
|
|
|
|
library: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
2022-04-15 00:15:52 +02:00
|
|
|
processing: false,
|
|
|
|
selectedTab: 'details',
|
|
|
|
libraryCopy: null
|
2021-10-05 05:11:42 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
show: {
|
|
|
|
get() {
|
|
|
|
return this.value
|
|
|
|
},
|
|
|
|
set(val) {
|
|
|
|
this.$emit('input', val)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
title() {
|
2022-11-08 01:27:17 +01:00
|
|
|
return this.library ? this.$strings.HeaderUpdateLibrary : this.$strings.HeaderNewLibrary
|
2022-04-15 00:15:52 +02:00
|
|
|
},
|
|
|
|
buttonText() {
|
2022-11-08 01:27:17 +01:00
|
|
|
return this.library ? this.$strings.ButtonSave : this.$strings.ButtonCreate
|
|
|
|
},
|
2023-10-09 00:10:43 +02:00
|
|
|
mediaType() {
|
|
|
|
return this.libraryCopy?.mediaType
|
|
|
|
},
|
2023-10-18 00:46:43 +02:00
|
|
|
libraryId() {
|
|
|
|
return this.library?.id
|
|
|
|
},
|
2022-11-08 01:27:17 +01:00
|
|
|
tabs() {
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
id: 'details',
|
|
|
|
title: this.$strings.HeaderDetails,
|
|
|
|
component: 'modals-libraries-edit-library'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'settings',
|
|
|
|
title: this.$strings.HeaderSettings,
|
|
|
|
component: 'modals-libraries-library-settings'
|
|
|
|
},
|
2023-10-09 00:10:43 +02:00
|
|
|
{
|
|
|
|
id: 'scanner',
|
|
|
|
title: this.$strings.HeaderSettingsScanner,
|
|
|
|
component: 'modals-libraries-library-scanner-settings'
|
|
|
|
},
|
2022-11-08 01:27:17 +01:00
|
|
|
{
|
|
|
|
id: 'schedule',
|
|
|
|
title: this.$strings.HeaderSchedule,
|
|
|
|
component: 'modals-libraries-schedule-scan'
|
2023-10-18 00:46:43 +02:00
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'tools',
|
|
|
|
title: this.$strings.HeaderTools,
|
|
|
|
component: 'modals-libraries-library-tools'
|
2022-11-08 01:27:17 +01:00
|
|
|
}
|
2023-10-09 00:10:43 +02:00
|
|
|
].filter((tab) => {
|
2023-10-21 20:00:41 +02:00
|
|
|
// Do not show tools tab for new libraries
|
|
|
|
if (tab.id === 'tools' && !this.library) return false
|
2023-10-09 00:10:43 +02:00
|
|
|
return tab.id !== 'scanner' || this.mediaType === 'book'
|
|
|
|
})
|
2022-04-15 00:15:52 +02:00
|
|
|
},
|
|
|
|
tabName() {
|
|
|
|
var _tab = this.tabs.find((t) => t.id === this.selectedTab)
|
|
|
|
return _tab ? _tab.component : ''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
show: {
|
|
|
|
handler(newVal) {
|
|
|
|
if (newVal) this.init()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
selectTab(tab) {
|
|
|
|
this.selectedTab = tab
|
|
|
|
},
|
|
|
|
updateLibrary(library) {
|
|
|
|
this.mapLibraryToCopy(library)
|
2022-08-17 01:24:47 +02:00
|
|
|
console.log('Updated library', this.libraryCopy)
|
2022-04-15 00:15:52 +02:00
|
|
|
},
|
|
|
|
getNewLibraryData() {
|
|
|
|
return {
|
|
|
|
name: '',
|
|
|
|
provider: 'google',
|
|
|
|
folders: [],
|
|
|
|
icon: 'database',
|
|
|
|
mediaType: 'book',
|
|
|
|
settings: {
|
2022-08-17 01:24:47 +02:00
|
|
|
coverAspectRatio: this.$constants.BookCoverAspectRatio.SQUARE,
|
2022-04-27 02:36:29 +02:00
|
|
|
disableWatcher: false,
|
|
|
|
skipMatchingMediaWithAsin: false,
|
2022-08-17 01:24:47 +02:00
|
|
|
skipMatchingMediaWithIsbn: false,
|
2023-10-09 00:10:43 +02:00
|
|
|
autoScanCronExpression: null,
|
|
|
|
hideSingleBookSeries: false,
|
2023-11-12 14:30:23 +01:00
|
|
|
metadataPrecedence: ['folderStructure', 'audioMetatags', 'nfoFile', 'txtFiles', 'opfFile', 'absMetadata']
|
2022-04-15 00:15:52 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
init() {
|
|
|
|
this.selectedTab = 'details'
|
|
|
|
this.libraryCopy = this.getNewLibraryData()
|
|
|
|
if (this.library) {
|
|
|
|
this.mapLibraryToCopy(this.library)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mapLibraryToCopy(library) {
|
|
|
|
for (const key in this.libraryCopy) {
|
|
|
|
if (library[key] !== undefined) {
|
|
|
|
if (key === 'folders') {
|
2023-09-28 00:50:32 +02:00
|
|
|
this.libraryCopy.folders = library.folders.map((f) => ({ ...f })).filter((f) => !!f.fullPath?.trim())
|
2022-04-15 00:15:52 +02:00
|
|
|
} else if (key === 'settings') {
|
2022-08-17 01:24:47 +02:00
|
|
|
for (const settingKey in library.settings) {
|
|
|
|
this.libraryCopy.settings[settingKey] = library.settings[settingKey]
|
|
|
|
}
|
2022-04-15 00:15:52 +02:00
|
|
|
} else {
|
|
|
|
this.libraryCopy[key] = library[key]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
validate() {
|
|
|
|
if (!this.libraryCopy.name) {
|
|
|
|
this.$toast.error('Library must have a name')
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
if (!this.libraryCopy.folders.length) {
|
|
|
|
this.$toast.error('Library must have at least 1 path')
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
|
|
|
return true
|
|
|
|
},
|
|
|
|
submit() {
|
2022-08-18 01:44:21 +02:00
|
|
|
// If custom expression input is focused then unfocus it instead of submitting
|
|
|
|
if (this.$refs.tabComponent && this.$refs.tabComponent.checkBlurExpressionInput) {
|
|
|
|
if (this.$refs.tabComponent.checkBlurExpressionInput()) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-01-31 23:04:30 +01:00
|
|
|
if (!this.validate()) return
|
|
|
|
|
2022-04-15 00:15:52 +02:00
|
|
|
if (this.library) {
|
|
|
|
this.submitUpdateLibrary()
|
|
|
|
} else {
|
|
|
|
this.submitCreateLibrary()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
getLibraryUpdatePayload() {
|
|
|
|
var updatePayload = {}
|
|
|
|
for (const key in this.libraryCopy) {
|
|
|
|
if (key === 'folders') {
|
2022-04-21 00:49:34 +02:00
|
|
|
if (this.libraryCopy.folders.map((f) => f.fullPath).join(',') !== this.library.folders.map((f) => f.fullPath).join(',')) {
|
2022-04-15 00:15:52 +02:00
|
|
|
updatePayload.folders = [...this.libraryCopy.folders]
|
|
|
|
}
|
|
|
|
} else if (key === 'settings') {
|
|
|
|
for (const settingsKey in this.libraryCopy.settings) {
|
|
|
|
if (this.libraryCopy.settings[settingsKey] !== this.library.settings[settingsKey]) {
|
|
|
|
if (!updatePayload.settings) updatePayload.settings = {}
|
|
|
|
updatePayload.settings[settingsKey] = this.libraryCopy.settings[settingsKey]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (key !== 'mediaType' && this.libraryCopy[key] !== this.library[key]) {
|
|
|
|
updatePayload[key] = this.libraryCopy[key]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return updatePayload
|
|
|
|
},
|
|
|
|
submitUpdateLibrary() {
|
|
|
|
var newLibraryPayload = this.getLibraryUpdatePayload()
|
|
|
|
if (!Object.keys(newLibraryPayload).length) {
|
|
|
|
this.$toast.info('No updates are necessary')
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
this.processing = true
|
|
|
|
this.$axios
|
|
|
|
.$patch(`/api/libraries/${this.library.id}`, newLibraryPayload)
|
|
|
|
.then((res) => {
|
|
|
|
this.processing = false
|
|
|
|
this.show = false
|
2022-11-09 00:10:08 +01:00
|
|
|
this.$toast.success(this.$getString('ToastLibraryUpdateSuccess', [res.name]))
|
2022-04-15 00:15:52 +02:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error(error)
|
|
|
|
if (error.response && error.response.data) {
|
|
|
|
this.$toast.error(error.response.data)
|
|
|
|
} else {
|
2022-11-09 00:10:08 +01:00
|
|
|
this.$toast.error(this.$strings.ToastLibraryUpdateFailed)
|
2022-04-15 00:15:52 +02:00
|
|
|
}
|
|
|
|
this.processing = false
|
|
|
|
})
|
|
|
|
},
|
|
|
|
submitCreateLibrary() {
|
|
|
|
this.processing = true
|
|
|
|
this.$axios
|
|
|
|
.$post('/api/libraries', this.libraryCopy)
|
|
|
|
.then((res) => {
|
|
|
|
this.processing = false
|
|
|
|
this.show = false
|
2022-11-09 00:10:08 +01:00
|
|
|
this.$toast.success(this.$getString('ToastLibraryCreateSuccess', [res.name]))
|
2022-05-15 00:23:22 +02:00
|
|
|
if (!this.$store.state.libraries.currentLibraryId) {
|
|
|
|
console.log('Setting initially library id', res.id)
|
|
|
|
// First library added
|
|
|
|
this.$store.dispatch('libraries/fetch', res.id)
|
|
|
|
}
|
2022-04-15 00:15:52 +02:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error(error)
|
|
|
|
if (error.response && error.response.data) {
|
|
|
|
this.$toast.error(error.response.data)
|
|
|
|
} else {
|
2022-11-09 00:10:08 +01:00
|
|
|
this.$toast.error(this.$strings.ToastLibraryCreateFailed)
|
2022-04-15 00:15:52 +02:00
|
|
|
}
|
|
|
|
this.processing = false
|
|
|
|
})
|
2021-10-05 05:11:42 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {},
|
|
|
|
beforeDestroy() {}
|
|
|
|
}
|
|
|
|
</script>
|
2022-04-15 00:15:52 +02:00
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.tab {
|
|
|
|
height: 40px;
|
|
|
|
}
|
|
|
|
.tab.tab-selected {
|
|
|
|
height: 41px;
|
|
|
|
}
|
|
|
|
</style>
|