feat(editor): improve desing
Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import EventEditorDateTimeField from './EventEditorDateTimeField.vue'
|
||||
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
notifications: Record<string, any>
|
||||
@@ -13,14 +15,12 @@ const emit = defineEmits<{
|
||||
|
||||
const typeOptions = [
|
||||
{ title: 'Email', value: 'email' },
|
||||
{ title: 'Visual (Display)', value: 'visual' },
|
||||
{ title: 'Audible (Sound)', value: 'audible' }
|
||||
{ title: 'Display', value: 'visual' }
|
||||
]
|
||||
|
||||
const patternOptions = [
|
||||
{ title: 'Absolute (Specific Time)', value: 'absolute' },
|
||||
{ title: 'Relative (Before Event)', value: 'relative' },
|
||||
{ title: 'Unknown', value: 'unknown' }
|
||||
{ title: 'Relative', value: 'relative' },
|
||||
{ title: 'Absolute', value: 'absolute' },
|
||||
]
|
||||
|
||||
const anchorOptions = [
|
||||
@@ -28,6 +28,18 @@ const anchorOptions = [
|
||||
{ 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()}`
|
||||
@@ -48,7 +60,7 @@ const formatNotification = (notification: any) => {
|
||||
variant="outlined"
|
||||
@click="$emit('add-notification')">
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add Notification
|
||||
Add
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
@@ -69,9 +81,65 @@ const formatNotification = (notification: any) => {
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<div v-for="(notification, key) in notifications" :key="key" class="mb-3 pa-3 border rounded">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>Notification</strong>
|
||||
<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"
|
||||
@@ -80,63 +148,6 @@ const formatNotification = (notification: any) => {
|
||||
@click="$emit('remove-notification', key)">
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-row dense class="mb-2">
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="notification.type"
|
||||
:items="typeOptions"
|
||||
label="Type"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[v => !!v || 'Type is required']"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="notification.pattern"
|
||||
:items="patternOptions"
|
||||
label="Pattern"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[v => !!v || 'Pattern is required']"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div v-if="notification.pattern === 'absolute'">
|
||||
<v-text-field
|
||||
v-model="notification.when"
|
||||
label="When (ISO Date)"
|
||||
type="datetime-local"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hint="Specific date and time for notification"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="notification.pattern === 'relative'">
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="notification.offset"
|
||||
label="Offset (e.g., PT15M)"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hint="ISO 8601 duration before event"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="notification.anchor"
|
||||
:items="anchorOptions"
|
||||
label="Anchor"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user