106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<template>
|
|
<modals-modal ref="modal" v-model="show" name="custom-metadata-provider" :width="600" :height="'unset'" :processing="processing">
|
|
<template #outer>
|
|
<div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
|
|
<p class="text-3xl text-white truncate">{{ $strings.HeaderAddCustomMetadataProvider }}</p>
|
|
</div>
|
|
</template>
|
|
<form @submit.prevent="submitForm">
|
|
<div class="px-4 w-full flex items-center text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
|
|
<div class="w-full p-8">
|
|
<div class="flex mb-2">
|
|
<div class="w-3/4 p-1">
|
|
<ui-text-input-with-label v-model="newName" :label="$strings.LabelName" />
|
|
</div>
|
|
<div class="w-1/4 p-1">
|
|
<ui-text-input-with-label value="Book" readonly :label="$strings.LabelMediaType" />
|
|
</div>
|
|
</div>
|
|
<div class="w-full mb-2 p-1">
|
|
<ui-text-input-with-label v-model="newUrl" label="URL" />
|
|
</div>
|
|
<div class="w-full mb-2 p-1">
|
|
<ui-text-input-with-label v-model="newAuthHeaderValue" :label="$strings.LabelProviderAuthorizationValue" type="password" />
|
|
</div>
|
|
<div class="flex px-1 pt-4">
|
|
<div class="flex-grow" />
|
|
<ui-btn color="success" type="submit">{{ $strings.ButtonAdd }}</ui-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</modals-modal>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
value: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
processing: false,
|
|
newName: '',
|
|
newUrl: '',
|
|
newAuthHeaderValue: ''
|
|
}
|
|
},
|
|
watch: {
|
|
show: {
|
|
handler(newVal) {
|
|
if (newVal) {
|
|
this.init()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
show: {
|
|
get() {
|
|
return this.value
|
|
},
|
|
set(val) {
|
|
this.$emit('input', val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
submitForm() {
|
|
if (!this.newName || !this.newUrl) {
|
|
this.$toast.error(this.$strings.ToastProviderNameAndUrlRequired)
|
|
return
|
|
}
|
|
|
|
this.processing = true
|
|
this.$axios
|
|
.$post('/api/custom-metadata-providers', {
|
|
name: this.newName,
|
|
url: this.newUrl,
|
|
mediaType: 'book', // Currently only supporting book mediaType
|
|
authHeaderValue: this.newAuthHeaderValue
|
|
})
|
|
.then((data) => {
|
|
this.$emit('added', data.provider)
|
|
this.$toast.success(this.$strings.ToastProviderCreatedSuccess)
|
|
this.show = false
|
|
})
|
|
.catch((error) => {
|
|
const errorMsg = error.response?.data || 'Unknown error'
|
|
console.error('Failed to add provider', error)
|
|
this.$toast.error(this.$strings.ToastProviderCreatedFailed + ': ' + errorMsg)
|
|
})
|
|
.finally(() => {
|
|
this.processing = false
|
|
})
|
|
},
|
|
init() {
|
|
this.processing = false
|
|
this.newName = ''
|
|
this.newUrl = ''
|
|
this.newAuthHeaderValue = ''
|
|
}
|
|
},
|
|
mounted() {}
|
|
}
|
|
</script>
|