Update:Notification system descriptions #996

This commit is contained in:
advplyr 2022-09-25 09:46:45 -05:00
parent a35b35c062
commit 88726bed86
7 changed files with 25 additions and 10 deletions

View file

@ -76,7 +76,7 @@ export default {
},
sendTestClick() {
const payload = {
message: `Send a test notification to event ${this.eventName}?`,
message: `Trigger this notification with test data?`,
callback: (confirmed) => {
if (confirmed) {
this.sendTest()

View file

@ -16,6 +16,8 @@
<ui-textarea-with-label v-model="newNotification.bodyTemplate" label="Body Template" class="mb-2" />
<p v-if="availableVariables" class="text-sm text-gray-300"><strong>Available variables:</strong> {{ availableVariables.join(', ') }}</p>
<div class="flex items-center pt-4">
<div class="flex items-center">
<ui-toggle-switch v-model="newNotification.enabled" />
@ -73,7 +75,7 @@ export default {
return this.notificationData.events || []
},
eventOptions() {
return this.notificationEvents.map((e) => ({ value: e.name, text: e.name }))
return this.notificationEvents.map((e) => ({ value: e.name, text: e.name, subtext: e.description }))
},
selectedEventData() {
return this.notificationEvents.find((e) => e.name === this.newNotification.eventName)
@ -83,6 +85,9 @@ export default {
},
title() {
return this.isNew ? 'Create Notification' : 'Update Notification'
},
availableVariables() {
return this.selectedEventData ? this.selectedEventData.variables || null : null
}
},
methods: {

View file

@ -3,7 +3,9 @@
<p class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
<button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
<span class="flex items-center">
<span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
<span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
<span v-if="selectedSubtext">:&nbsp;</span>
<span v-if="selectedSubtext" class="font-normal block truncate font-sans text-sm text-gray-400">{{ selectedSubtext }}</span>
</span>
<span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<span class="material-icons">expand_more</span>
@ -15,7 +17,9 @@
<template v-for="item in items">
<li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
<div class="flex items-center">
<span class="font-normal ml-3 block truncate font-sans text-sm">{{ item.text }}</span>
<span class="ml-3 block truncate font-sans text-sm" :class="{ 'font-semibold': item.subtext }">{{ item.text }}</span>
<span v-if="item.subtext">:&nbsp;</span>
<span v-if="item.subtext" class="font-normal block truncate font-sans text-sm text-gray-400">{{ item.subtext }}</span>
</div>
</li>
</template>
@ -64,6 +68,9 @@ export default {
selectedText() {
return this.selectedItem ? this.selectedItem.text : ''
},
selectedSubtext() {
return this.selectedItem ? this.selectedItem.subtext : ''
},
buttonClass() {
var classes = []
if (this.small) classes.push('h-9')