2022-09-23 01:12:48 +02:00
|
|
|
<template>
|
|
|
|
<modals-modal ref="modal" v-model="show" name="notification-edit" :width="800" :height="'unset'" :processing="processing">
|
|
|
|
<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-3xl text-white truncate">{{ title }}</p>
|
2022-09-23 01:12:48 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<form @submit.prevent="submitForm">
|
2022-09-25 18:50:41 +02:00
|
|
|
<div class="w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300">
|
|
|
|
<div class="w-full px-3 py-5 md:p-12">
|
2022-11-08 01:27:17 +01:00
|
|
|
<ui-dropdown v-model="newNotification.eventName" :label="$strings.LabelNotificationEvent" :items="eventOptions" class="mb-4" @input="eventOptionUpdated" />
|
2022-09-23 01:12:48 +02:00
|
|
|
|
2023-04-17 16:25:20 +02:00
|
|
|
<ui-multi-select ref="urlsInput" v-model="newNotification.urls" :label="$strings.LabelNotificationAppriseURL" class="mb-2" />
|
2022-09-23 01:12:48 +02:00
|
|
|
|
2022-11-08 01:27:17 +01:00
|
|
|
<ui-text-input-with-label v-model="newNotification.titleTemplate" :label="$strings.LabelNotificationTitleTemplate" class="mb-2" />
|
2022-09-23 01:12:48 +02:00
|
|
|
|
2022-11-08 01:27:17 +01:00
|
|
|
<ui-textarea-with-label v-model="newNotification.bodyTemplate" :label="$strings.LabelNotificationBodyTemplate" :rows="4" class="mb-2" />
|
2022-09-23 01:12:48 +02:00
|
|
|
|
2022-11-08 01:27:17 +01:00
|
|
|
<p v-if="availableVariables" class="text-sm text-gray-300">
|
|
|
|
<strong>{{ $strings.LabelNotificationAvailableVariables }}:</strong> {{ availableVariables.join(', ') }}
|
|
|
|
</p>
|
2022-09-25 16:46:45 +02:00
|
|
|
|
2022-09-24 23:15:16 +02:00
|
|
|
<div class="flex items-center pt-4">
|
2022-09-23 01:12:48 +02:00
|
|
|
<div class="flex items-center">
|
|
|
|
<ui-toggle-switch v-model="newNotification.enabled" />
|
2022-11-08 01:27:17 +01:00
|
|
|
<p class="text-lg pl-2">{{ $strings.LabelEnable }}</p>
|
2022-09-23 01:12:48 +02:00
|
|
|
</div>
|
|
|
|
<div class="flex-grow" />
|
2022-11-08 01:27:17 +01:00
|
|
|
<ui-btn color="success" type="submit">{{ $strings.ButtonSubmit }}</ui-btn>
|
2022-09-23 01:12:48 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</modals-modal>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
value: Boolean,
|
|
|
|
notification: {
|
|
|
|
type: Object,
|
|
|
|
default: () => null
|
|
|
|
},
|
|
|
|
notificationData: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
processing: false,
|
|
|
|
newNotification: {},
|
|
|
|
isNew: true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
show: {
|
|
|
|
handler(newVal) {
|
|
|
|
if (newVal) {
|
|
|
|
this.init()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
show: {
|
|
|
|
get() {
|
|
|
|
return this.value
|
|
|
|
},
|
|
|
|
set(val) {
|
|
|
|
this.$emit('input', val)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
notificationEvents() {
|
|
|
|
if (!this.notificationData) return []
|
|
|
|
return this.notificationData.events || []
|
|
|
|
},
|
|
|
|
eventOptions() {
|
2022-09-25 16:46:45 +02:00
|
|
|
return this.notificationEvents.map((e) => ({ value: e.name, text: e.name, subtext: e.description }))
|
2022-09-23 01:12:48 +02:00
|
|
|
},
|
|
|
|
selectedEventData() {
|
|
|
|
return this.notificationEvents.find((e) => e.name === this.newNotification.eventName)
|
|
|
|
},
|
|
|
|
showLibrarySelectInput() {
|
|
|
|
return this.selectedEventData && this.selectedEventData.requiresLibrary
|
|
|
|
},
|
|
|
|
title() {
|
|
|
|
return this.isNew ? 'Create Notification' : 'Update Notification'
|
2022-09-25 16:46:45 +02:00
|
|
|
},
|
|
|
|
availableVariables() {
|
|
|
|
return this.selectedEventData ? this.selectedEventData.variables || null : null
|
2022-09-23 01:12:48 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
eventOptionUpdated() {
|
|
|
|
if (!this.selectedEventData) return
|
|
|
|
this.newNotification.titleTemplate = this.selectedEventData.defaults.title || ''
|
|
|
|
this.newNotification.bodyTemplate = this.selectedEventData.defaults.body || ''
|
|
|
|
},
|
|
|
|
close() {
|
|
|
|
// Force close when navigating - used in UsersTable
|
|
|
|
if (this.$refs.modal) this.$refs.modal.setHide()
|
|
|
|
},
|
|
|
|
submitForm() {
|
2023-04-17 16:25:20 +02:00
|
|
|
this.$ref.urlsInput.blur()
|
|
|
|
|
2022-09-24 23:15:16 +02:00
|
|
|
if (!this.newNotification.urls.length) {
|
|
|
|
this.$toast.error('Must enter an Apprise URL')
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2022-09-23 01:12:48 +02:00
|
|
|
if (this.isNew) {
|
|
|
|
this.submitCreate()
|
|
|
|
} else {
|
|
|
|
this.submitUpdate()
|
|
|
|
}
|
|
|
|
},
|
2022-09-24 21:03:14 +02:00
|
|
|
submitUpdate() {
|
|
|
|
this.processing = true
|
|
|
|
|
|
|
|
const payload = {
|
|
|
|
...this.newNotification
|
|
|
|
}
|
|
|
|
console.log('Sending update notification', payload)
|
|
|
|
this.$axios
|
|
|
|
.$patch(`/api/notifications/${payload.id}`, payload)
|
|
|
|
.then((updatedSettings) => {
|
|
|
|
this.$emit('update', updatedSettings)
|
|
|
|
this.$toast.success('Notification updated')
|
|
|
|
this.show = false
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed to update notification', error)
|
|
|
|
this.$toast.error('Failed to update notification')
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
this.processing = false
|
|
|
|
})
|
|
|
|
},
|
2022-09-23 01:12:48 +02:00
|
|
|
submitCreate() {
|
|
|
|
this.processing = true
|
|
|
|
|
|
|
|
const payload = {
|
|
|
|
...this.newNotification
|
|
|
|
}
|
|
|
|
console.log('Sending create notification', payload)
|
|
|
|
this.$axios
|
2022-09-24 01:10:03 +02:00
|
|
|
.$post('/api/notifications', payload)
|
2022-09-24 21:03:14 +02:00
|
|
|
.then((updatedSettings) => {
|
|
|
|
this.$emit('update', updatedSettings)
|
2022-09-23 01:12:48 +02:00
|
|
|
this.$toast.success('Notification created')
|
2022-09-24 21:03:14 +02:00
|
|
|
this.show = false
|
2022-09-23 01:12:48 +02:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.error('Failed to create notification', error)
|
|
|
|
this.$toast.error('Failed to create notification')
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
this.processing = false
|
|
|
|
})
|
|
|
|
},
|
|
|
|
init() {
|
|
|
|
this.isNew = !this.notification
|
|
|
|
if (this.notification) {
|
|
|
|
this.newNotification = {
|
|
|
|
id: this.notification.id,
|
|
|
|
libraryId: this.notification.libraryId,
|
|
|
|
eventName: this.notification.eventName,
|
|
|
|
urls: [...this.notification.urls],
|
|
|
|
titleTemplate: this.notification.titleTemplate,
|
|
|
|
bodyTemplate: this.notification.bodyTemplate,
|
|
|
|
enabled: this.notification.enabled,
|
|
|
|
type: this.notification.type
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.newNotification = {
|
|
|
|
libraryId: null,
|
|
|
|
eventName: 'onTest',
|
|
|
|
urls: [],
|
2022-09-24 23:15:16 +02:00
|
|
|
titleTemplate: '',
|
|
|
|
bodyTemplate: '',
|
2022-09-23 01:12:48 +02:00
|
|
|
enabled: true,
|
|
|
|
type: null
|
|
|
|
}
|
2022-09-24 23:15:16 +02:00
|
|
|
this.eventOptionUpdated()
|
2022-09-23 01:12:48 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {}
|
|
|
|
}
|
|
|
|
</script>
|