Initial commit
This commit is contained in:
root
@@ -0,0 +1,190 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
startsOn?: string | null
|
||||
endsOn?: string | null
|
||||
timeless?: boolean | null
|
||||
timeZone?: string | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:startsOn': [date: string | null]
|
||||
'update:endsOn': [date: string | null]
|
||||
'update:timeless': [timeless: boolean | null]
|
||||
'update:timeZone': [timeZone: string | null]
|
||||
}>()
|
||||
|
||||
const timelessValue = computed({
|
||||
get: () => props.timeless ?? false,
|
||||
set: (value) => emit('update:timeless', value)
|
||||
})
|
||||
|
||||
const timeZoneValue = computed({
|
||||
get: () => props.timeZone ?? '',
|
||||
set: (value) => emit('update:timeZone', value || null)
|
||||
})
|
||||
|
||||
// Format helpers
|
||||
const formatDate = (date: Date): string => {
|
||||
return date.toISOString().split('T')[0]
|
||||
}
|
||||
|
||||
const formatTime = (date: Date): string => {
|
||||
return date.toTimeString().slice(0, 5)
|
||||
}
|
||||
|
||||
const formatDateTime = (isoString: string | null | undefined): string => {
|
||||
if (!isoString) return 'Not set'
|
||||
const date = new Date(isoString)
|
||||
return date.toLocaleString()
|
||||
}
|
||||
|
||||
const parseDateTime = (date: string, time: string): Date => {
|
||||
if (timelessValue.value) {
|
||||
return new Date(date)
|
||||
}
|
||||
return new Date(`${date}T${time}`)
|
||||
}
|
||||
|
||||
// Date/time fields
|
||||
const startDate = ref('')
|
||||
const startTime = ref('')
|
||||
const endDate = ref('')
|
||||
const endTime = ref('')
|
||||
|
||||
// Initialize date/time from props
|
||||
watch(() => props.startsOn, (newValue) => {
|
||||
if (newValue) {
|
||||
const start = new Date(newValue)
|
||||
startDate.value = formatDate(start)
|
||||
startTime.value = formatTime(start)
|
||||
} else {
|
||||
const now = new Date()
|
||||
startDate.value = formatDate(now)
|
||||
startTime.value = formatTime(now)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
watch(() => props.endsOn, (newValue) => {
|
||||
if (newValue) {
|
||||
const end = new Date(newValue)
|
||||
endDate.value = formatDate(end)
|
||||
endTime.value = formatTime(end)
|
||||
} else {
|
||||
const later = new Date(Date.now() + 60 * 60 * 1000)
|
||||
endDate.value = formatDate(later)
|
||||
endTime.value = formatTime(later)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Update parent when date/time changes
|
||||
watch([startDate, startTime], () => {
|
||||
if (props.mode === 'edit') {
|
||||
emit('update:startsOn', parseDateTime(startDate.value, startTime.value).toISOString())
|
||||
}
|
||||
})
|
||||
|
||||
watch([endDate, endTime], () => {
|
||||
if (props.mode === 'edit') {
|
||||
emit('update:endsOn', parseDateTime(endDate.value, endTime.value).toISOString())
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="event-editor-section">
|
||||
<div class="text-subtitle-1 mb-2">Date & Time</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view'">
|
||||
<div class="mb-2 pa-2">
|
||||
<div class="mb-1"><strong>Starts:</strong> {{ formatDateTime(startsOn) }}</div>
|
||||
<div class="mb-1"><strong>Ends:</strong> {{ formatDateTime(endsOn) }}</div>
|
||||
<div v-if="timelessValue" class="mb-1">
|
||||
<v-chip size="small" color="info" variant="tonal">
|
||||
<v-icon start size="small">mdi-calendar-blank</v-icon>
|
||||
All Day Event
|
||||
</v-chip>
|
||||
</div>
|
||||
<div v-if="timeZoneValue" class="text-caption text-grey">Time Zone: {{ timeZoneValue }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<v-checkbox
|
||||
v-model="timelessValue"
|
||||
label="All day event"
|
||||
density="compact"
|
||||
class="mb-2"
|
||||
/>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="text-subtitle-2 mb-2">Start</div>
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="startDate"
|
||||
label="Start Date"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col v-if="!timelessValue" cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="startTime"
|
||||
label="Start Time"
|
||||
type="time"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="text-subtitle-2 mb-2">End</div>
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="endDate"
|
||||
label="End Date"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col v-if="!timelessValue" cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="endTime"
|
||||
label="End Time"
|
||||
type="time"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<v-text-field
|
||||
v-model="timeZoneValue"
|
||||
label="Time Zone"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hint="e.g., America/New_York"
|
||||
persistent-hint
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
description?: string | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:description': [description: string | null]
|
||||
}>()
|
||||
|
||||
const descriptionValue = computed({
|
||||
get: () => props.description ?? '',
|
||||
set: (value) => emit('update:description', value || null)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="descriptionValue || mode === 'edit'" class="event-editor-section">
|
||||
<div class="text-subtitle-1 mb-2">Description</div>
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view'" class="mb-4">
|
||||
<div class="mb-2 pa-2 white-space-pre-wrap">{{ descriptionValue || 'No description' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<v-textarea
|
||||
v-model="descriptionValue"
|
||||
label="Description"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
rows="3"
|
||||
auto-grow
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.white-space-pre-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
label?: string | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:label': [label: string | null]
|
||||
}>()
|
||||
|
||||
const labelValue = computed({
|
||||
get: () => props.label ?? '',
|
||||
set: (value) => emit('update:label', value || null)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="event-editor-section">
|
||||
<div class="text-subtitle-1 mb-2">Title</div>
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view'" class="mb-4">
|
||||
<div class="mb-2 pa-2">{{ labelValue || 'Untitled Event' }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<v-text-field
|
||||
v-model="labelValue"
|
||||
label="Title"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[v => !!v || 'Title is required']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
locationsPhysical: Record<string, any>
|
||||
locationsVirtual: Record<string, any>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'add-location-physical': []
|
||||
'remove-location-physical': [key: string]
|
||||
'add-location-virtual': []
|
||||
'remove-location-virtual': [key: string]
|
||||
}>()
|
||||
|
||||
const hasLocations = () => {
|
||||
return Object.keys(props.locationsPhysical || {}).length > 0 ||
|
||||
Object.keys(props.locationsVirtual || {}).length > 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasLocations() || mode === 'edit'" class="event-editor-section">
|
||||
<div class="text-subtitle-1 mb-2">Locations</div>
|
||||
|
||||
<!-- Physical Locations -->
|
||||
<div v-if="Object.keys(locationsPhysical || {}).length > 0 || mode === 'edit'" class="mb-4">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<div class="text-subtitle-2">Physical Locations</div>
|
||||
<v-btn v-if="mode === 'edit'"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@click="$emit('add-location-physical')">
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view'">
|
||||
<div v-for="(location, key) in locationsPhysical" :key="key" class="mb-2 pa-2 border rounded">
|
||||
<div class="mb-1"><strong>{{ location.label || 'Location' }}</strong></div>
|
||||
<div v-if="location.timeZone" class="text-caption text-grey">Time Zone: {{ location.timeZone }}</div>
|
||||
<div v-if="location.description" class="text-caption">{{ location.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<div v-for="(location, key) in locationsPhysical" :key="key" class="mb-3 pa-3 border rounded">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>{{ location.label || 'Physical Location' }}</strong>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="small"
|
||||
color="error"
|
||||
variant="text"
|
||||
@click="$emit('remove-location-physical', key)">
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="location.label"
|
||||
label="Label"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="location.timeZone"
|
||||
label="Time Zone"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-textarea
|
||||
v-model="location.description"
|
||||
label="Description"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
rows="2"
|
||||
/>
|
||||
|
||||
<v-select
|
||||
v-model="location.relation"
|
||||
:items="['start', 'end']"
|
||||
label="Relation"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Virtual Locations -->
|
||||
<div v-if="Object.keys(locationsVirtual || {}).length > 0 || mode === 'edit'">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<div class="text-subtitle-2">Virtual Locations</div>
|
||||
<v-btn v-if="mode === 'edit'"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@click="$emit('add-location-virtual')">
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view'">
|
||||
<div v-for="(location, key) in locationsVirtual" :key="key" class="mb-2 pa-2 border rounded">
|
||||
<div class="mb-1"><strong>{{ location.label || 'Virtual Location' }}</strong></div>
|
||||
<div class="text-caption">
|
||||
<a :href="location.location" target="_blank" class="text-primary">{{ location.location }}</a>
|
||||
</div>
|
||||
<div v-if="location.description" class="text-caption text-grey mt-1">{{ location.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<div v-for="(location, key) in locationsVirtual" :key="key" class="mb-3 pa-3 border rounded">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>{{ location.label || 'Virtual Location' }}</strong>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="small"
|
||||
color="error"
|
||||
variant="text"
|
||||
@click="$emit('remove-location-virtual', key)">
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-text-field
|
||||
v-model="location.label"
|
||||
label="Label"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mb-2"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="location.location"
|
||||
label="URL"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
class="mb-2"
|
||||
:rules="[v => !!v || 'URL is required']"
|
||||
/>
|
||||
|
||||
<v-textarea
|
||||
v-model="location.description"
|
||||
label="Description"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
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: 'Visual (Display)', value: 'visual' },
|
||||
{ title: 'Audible (Sound)', value: 'audible' }
|
||||
]
|
||||
|
||||
const patternOptions = [
|
||||
{ title: 'Absolute (Specific Time)', value: 'absolute' },
|
||||
{ title: 'Relative (Before Event)', value: 'relative' },
|
||||
{ title: 'Unknown', value: 'unknown' }
|
||||
]
|
||||
|
||||
const anchorOptions = [
|
||||
{ title: 'Start Time', value: 'start' },
|
||||
{ title: 'End Time', value: 'end' }
|
||||
]
|
||||
|
||||
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 Notification
|
||||
</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-3 pa-3 border rounded">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>Notification</strong>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="small"
|
||||
color="error"
|
||||
variant="text"
|
||||
@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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
pattern: any | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:pattern': [pattern: any | null]
|
||||
}>()
|
||||
|
||||
const precisionOptions = [
|
||||
{ title: 'Yearly', value: 'yearly' },
|
||||
{ title: 'Monthly', value: 'monthly' },
|
||||
{ title: 'Weekly', value: 'weekly' },
|
||||
{ title: 'Daily', value: 'daily' },
|
||||
{ title: 'Hourly', value: 'hourly' },
|
||||
{ title: 'Minutely', value: 'minutely' },
|
||||
{ title: 'Secondly', value: 'secondly' }
|
||||
]
|
||||
|
||||
const patternTypeOptions = [
|
||||
{ title: 'Absolute', value: 'absolute' },
|
||||
{ title: 'Relative', value: 'relative' }
|
||||
]
|
||||
|
||||
const formatRecurrence = (pattern: any) => {
|
||||
if (!pattern) return 'No recurrence'
|
||||
|
||||
const parts = []
|
||||
parts.push(`Every ${pattern.interval || 1}`)
|
||||
parts.push(pattern.precision || 'day')
|
||||
|
||||
if (pattern.iterations) {
|
||||
parts.push(`(${pattern.iterations} times)`)
|
||||
} else if (pattern.concludes) {
|
||||
parts.push(`until ${new Date(pattern.concludes).toLocaleDateString()}`)
|
||||
}
|
||||
|
||||
return parts.join(' ')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="pattern || mode === 'edit'" class="event-editor-section">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<div class="text-subtitle-1">Recurrence</div>
|
||||
<v-btn v-if="mode === 'edit' && !pattern"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@click="$emit('update:pattern', { pattern: 'absolute', precision: 'daily', interval: 1 })">
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add Recurrence
|
||||
</v-btn>
|
||||
<v-btn v-else-if="mode === 'edit' && pattern"
|
||||
size="small"
|
||||
variant="text"
|
||||
color="error"
|
||||
@click="$emit('update:pattern', null)">
|
||||
Remove
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view' && pattern" class="mb-4">
|
||||
<div class="pa-2 border rounded">
|
||||
<div class="mb-1"><strong>{{ formatRecurrence(pattern) }}</strong></div>
|
||||
<div v-if="pattern.onDayOfWeek && pattern.onDayOfWeek.length > 0" class="text-caption text-grey">
|
||||
Days: {{ pattern.onDayOfWeek.join(', ') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else-if="mode === 'edit' && pattern" class="pa-3 border rounded">
|
||||
<v-row dense class="mb-2">
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="pattern.pattern"
|
||||
:items="patternTypeOptions"
|
||||
label="Pattern Type"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="pattern.precision"
|
||||
:items="precisionOptions"
|
||||
label="Frequency"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense class="mb-2">
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model.number="pattern.interval"
|
||||
label="Interval"
|
||||
type="number"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[v => v > 0 || 'Must be greater than 0']"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model.number="pattern.iterations"
|
||||
label="Iterations"
|
||||
type="number"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hint="Leave empty for infinite"
|
||||
clearable
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
v-model="pattern.concludes"
|
||||
label="End Date"
|
||||
type="date"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
clearable
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="text-caption text-grey mt-2">
|
||||
Advanced recurrence rules (like specific days of week) can be added to the pattern object
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,206 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
organizer: any | null
|
||||
participants: Record<string, any>
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:organizer': [organizer: any | null]
|
||||
'add-participant': []
|
||||
'remove-participant': [key: string]
|
||||
}>()
|
||||
|
||||
const roleOptions = [
|
||||
{ title: 'Owner', value: 'owner' },
|
||||
{ title: 'Chair', value: 'chair' },
|
||||
{ title: 'Attendee', value: 'attendee' },
|
||||
{ title: 'Optional', value: 'optional' },
|
||||
{ title: 'Informational', value: 'informational' },
|
||||
{ title: 'Contact', value: 'contact' }
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ title: 'None', value: 'none' },
|
||||
{ title: 'Accepted', value: 'accepted' },
|
||||
{ title: 'Declined', value: 'declined' },
|
||||
{ title: 'Tentative', value: 'tentative' },
|
||||
{ title: 'Delegated', value: 'delegated' }
|
||||
]
|
||||
|
||||
const typeOptions = [
|
||||
{ title: 'Unknown', value: 'unknown' },
|
||||
{ title: 'Individual', value: 'individual' },
|
||||
{ title: 'Group', value: 'group' },
|
||||
{ title: 'Resource', value: 'resource' },
|
||||
{ title: 'Location', value: 'location' }
|
||||
]
|
||||
|
||||
const hasParticipants = () => {
|
||||
return props.organizer || Object.keys(props.participants || {}).length > 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasParticipants() || mode === 'edit'" class="event-editor-section">
|
||||
<div class="text-subtitle-1 mb-2">Participants</div>
|
||||
|
||||
<!-- Organizer -->
|
||||
<div v-if="organizer || mode === 'edit'" class="mb-4">
|
||||
<div class="text-subtitle-2 mb-2">Organizer</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view' && organizer" class="pa-2 border rounded">
|
||||
<div class="mb-1"><strong>{{ organizer.name || organizer.address }}</strong></div>
|
||||
<div class="text-caption text-grey">{{ organizer.address }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else-if="mode === 'edit'" class="pa-3 border rounded">
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="organizer.name"
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="organizer.address"
|
||||
label="Email/Address"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[v => !!v || 'Address is required']"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Participants List -->
|
||||
<div v-if="Object.keys(participants || {}).length > 0 || mode === 'edit'">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<div class="text-subtitle-2">Attendees</div>
|
||||
<v-btn v-if="mode === 'edit'"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@click="$emit('add-participant')">
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add Participant
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view'">
|
||||
<div v-for="(participant, key) in participants" :key="key" class="mb-2 pa-2 border rounded">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<div class="mb-1"><strong>{{ participant.name || participant.address }}</strong></div>
|
||||
<div class="text-caption text-grey">
|
||||
{{ participant.address }}
|
||||
<span v-if="participant.type"> | {{ participant.type }}</span>
|
||||
</div>
|
||||
<div v-if="participant.roles && participant.roles.length > 0" class="mt-1">
|
||||
<v-chip
|
||||
v-for="role in participant.roles"
|
||||
:key="role"
|
||||
size="x-small"
|
||||
class="mr-1"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ role }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
<v-chip
|
||||
v-if="participant.status && participant.status !== 'none'"
|
||||
:color="participant.status === 'accepted' ? 'success' : participant.status === 'declined' ? 'error' : 'warning'"
|
||||
size="small"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ participant.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<div v-for="(participant, key) in participants" :key="key" class="mb-3 pa-3 border rounded">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>{{ participant.name || 'Participant' }}</strong>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="small"
|
||||
color="error"
|
||||
variant="text"
|
||||
@click="$emit('remove-participant', key)">
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-row dense class="mb-2">
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="participant.name"
|
||||
label="Name"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="participant.address"
|
||||
label="Email/Address"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[v => !!v || 'Address is required']"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense class="mb-2">
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="participant.type"
|
||||
:items="typeOptions"
|
||||
label="Type"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="participant.status"
|
||||
:items="statusOptions"
|
||||
label="Status"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-select
|
||||
v-model="participant.roles"
|
||||
:items="roleOptions"
|
||||
label="Roles"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
tags?: string[]
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:tags': [tags: string[]]
|
||||
}>()
|
||||
|
||||
const tagsValue = computed({
|
||||
get: () => props.tags ?? [],
|
||||
set: (value) => emit('update:tags', value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="tagsValue.length > 0 || mode === 'edit'" class="event-editor-section">
|
||||
<div class="text-subtitle-1 mb-2">Tags</div>
|
||||
|
||||
<!-- Read-only view -->
|
||||
<div v-if="mode === 'view'" class="mb-4">
|
||||
<div v-if="tagsValue.length > 0" class="pa-2">
|
||||
<v-chip
|
||||
v-for="(tag, index) in tagsValue"
|
||||
:key="index"
|
||||
size="small"
|
||||
class="mr-1 mb-1"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ tag }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<div v-else class="pa-2 text-grey">No tags</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit view -->
|
||||
<div v-else>
|
||||
<v-combobox
|
||||
v-model="tagsValue"
|
||||
label="Tags"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
hint="Press Enter to add tags"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user