161 lines
5.0 KiB
Vue
161 lines
5.0 KiB
Vue
<script setup lang="ts">
|
|
import EventEditorDateTimeField from './EventEditorDateTimeField.vue'
|
|
|
|
interface Props {
|
|
mode: 'edit' | 'view'
|
|
notifications: Record<string, any>
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{
|
|
'add-notification': []
|
|
'remove-notification': [key: string]
|
|
}>()
|
|
|
|
const typeOptions = [
|
|
{ title: 'Email', value: 'email' },
|
|
{ title: 'Display', value: 'visual' }
|
|
]
|
|
|
|
const patternOptions = [
|
|
{ title: 'Relative', value: 'relative' },
|
|
{ title: 'Absolute', value: 'absolute' },
|
|
]
|
|
|
|
const anchorOptions = [
|
|
{ title: 'Start Time', value: 'start' },
|
|
{ title: 'End Time', value: 'end' }
|
|
]
|
|
|
|
const offsetPresets = [
|
|
{ title: '5 minutes before', value: 'PT5M' },
|
|
{ title: '10 minutes before', value: 'PT10M' },
|
|
{ title: '15 minutes before', value: 'PT15M' },
|
|
{ title: '30 minutes before', value: 'PT30M' },
|
|
{ title: '1 hour before', value: 'PT1H' },
|
|
{ title: '2 hours before', value: 'PT2H' },
|
|
{ title: '1 day before', value: 'P1D' },
|
|
{ title: '2 days before', value: 'P2D' },
|
|
{ title: '1 week before', value: 'P1W' },
|
|
]
|
|
|
|
const formatNotification = (notification: any) => {
|
|
if (notification.pattern === 'absolute' && notification.when) {
|
|
return `At ${new Date(notification.when).toLocaleString()}`
|
|
} else if (notification.pattern === 'relative' && notification.offset) {
|
|
const anchor = notification.anchor === 'end' ? 'end' : 'start'
|
|
return `${notification.offset} before ${anchor}`
|
|
}
|
|
return 'Custom notification'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="Object.keys(notifications || {}).length > 0 || mode === 'edit'" class="event-editor-section">
|
|
<div class="d-flex align-center justify-space-between mb-2">
|
|
<div class="text-subtitle-1">Notifications</div>
|
|
<v-btn v-if="mode === 'edit'"
|
|
size="small"
|
|
variant="outlined"
|
|
@click="$emit('add-notification')">
|
|
<v-icon left>mdi-plus</v-icon>
|
|
Add
|
|
</v-btn>
|
|
</div>
|
|
|
|
<!-- Read-only view -->
|
|
<div v-if="mode === 'view'">
|
|
<div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div>
|
|
<div class="mb-1">
|
|
<v-icon :icon="notification.type === 'email' ? 'mdi-email' : notification.type === 'audible' ? 'mdi-bell-ring' : 'mdi-bell'" size="small" class="mr-2" />
|
|
<strong>{{ notification.type || 'Notification' }}</strong>
|
|
</div>
|
|
<div class="text-caption text-grey">{{ formatNotification(notification) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit view -->
|
|
<div v-else>
|
|
<div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
|
|
<div class="d-flex align-center ga-2">
|
|
<v-row dense class="flex-grow-1">
|
|
<v-col cols="6" sm="3">
|
|
<v-select
|
|
v-model="notification.type"
|
|
:items="typeOptions"
|
|
label="Type"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
:rules="[v => !!v || 'Type is required']"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="6" sm="3">
|
|
<v-select
|
|
v-model="notification.pattern"
|
|
:items="patternOptions"
|
|
label="Pattern"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
:rules="[v => !!v || 'Pattern is required']"
|
|
/>
|
|
</v-col>
|
|
|
|
<v-col v-if="notification.pattern === 'absolute'" cols="12" sm="6">
|
|
<EventEditorDateTimeField
|
|
:model-value="notification.when"
|
|
@update:model-value="notification.when = $event"
|
|
/>
|
|
</v-col>
|
|
|
|
<template v-else-if="notification.pattern === 'relative'">
|
|
<v-col cols="6" sm="3">
|
|
<v-select
|
|
v-model="notification.anchor"
|
|
:items="anchorOptions"
|
|
label="Anchor"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
/>
|
|
</v-col>
|
|
<v-col cols="6" sm="3">
|
|
<v-combobox
|
|
v-model="notification.offset"
|
|
:items="offsetPresets"
|
|
item-title="title"
|
|
item-value="value"
|
|
label="Offset"
|
|
variant="outlined"
|
|
density="compact"
|
|
hide-details
|
|
/>
|
|
</v-col>
|
|
</template>
|
|
</v-row>
|
|
|
|
<v-btn
|
|
icon="mdi-delete"
|
|
size="small"
|
|
color="error"
|
|
variant="text"
|
|
@click="$emit('remove-notification', key)">
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.event-editor-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
</style>
|