Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sebastian
|
7b56a76147 |
Generated
+65
-65
@@ -159,12 +159,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.29.8",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz",
|
||||
"integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==",
|
||||
"version": "7.29.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
|
||||
"integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.29.8"
|
||||
"@babel/types": "^7.29.7"
|
||||
},
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
@@ -174,9 +174,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.29.8",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
|
||||
"integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
|
||||
"version": "7.29.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
|
||||
"integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.29.7",
|
||||
@@ -1032,39 +1032,39 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-core": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz",
|
||||
"integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.40.tgz",
|
||||
"integrity": "sha512-39E8IgOhTbVDnoJFMKc2DvYnypcZwUqgUhQkccva/0m6FUwtIKSGV7n1hpVmYcFaoRAwf9pBcwnKlCEsN63ZEQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.29.8",
|
||||
"@vue/shared": "3.5.41",
|
||||
"@babel/parser": "^7.29.7",
|
||||
"@vue/shared": "3.5.40",
|
||||
"entities": "^7.0.1",
|
||||
"estree-walker": "^2.0.2",
|
||||
"source-map-js": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-dom": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz",
|
||||
"integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.40.tgz",
|
||||
"integrity": "sha512-pwkx4vqlqOspFstrcmzwkKLePVMD3PT65imRzLhanU2V1Fj4K13g6OXjanOyzw3aTAuRk84BOmY8f3rEHqPaVA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/compiler-core": "3.5.41",
|
||||
"@vue/shared": "3.5.41"
|
||||
"@vue/compiler-core": "3.5.40",
|
||||
"@vue/shared": "3.5.40"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-sfc": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz",
|
||||
"integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.40.tgz",
|
||||
"integrity": "sha512-gIf497P4kpuALcvs5n3AEg1Vdn0pSY4XbjASIfHNYF1/MP3T2Mf2STERTubysBxCRxzJGJYtF/O7vwJrxFB3Vw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.29.8",
|
||||
"@vue/compiler-core": "3.5.41",
|
||||
"@vue/compiler-dom": "3.5.41",
|
||||
"@vue/compiler-ssr": "3.5.41",
|
||||
"@vue/shared": "3.5.41",
|
||||
"@babel/parser": "^7.29.7",
|
||||
"@vue/compiler-core": "3.5.40",
|
||||
"@vue/compiler-dom": "3.5.40",
|
||||
"@vue/compiler-ssr": "3.5.40",
|
||||
"@vue/shared": "3.5.40",
|
||||
"estree-walker": "^2.0.2",
|
||||
"magic-string": "^0.30.21",
|
||||
"postcss": "^8.5.19",
|
||||
@@ -1072,13 +1072,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-ssr": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz",
|
||||
"integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.40.tgz",
|
||||
"integrity": "sha512-rrE5xiXG663+vHCHa3J9p2z5OcBRjXmoqenprJxAFQxg5pSshzeBiCE6pu46axapRJ2Adk0YDA2BRZVjiHXnhg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.41",
|
||||
"@vue/shared": "3.5.41"
|
||||
"@vue/compiler-dom": "3.5.40",
|
||||
"@vue/shared": "3.5.40"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
@@ -1125,51 +1125,51 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz",
|
||||
"integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.40.tgz",
|
||||
"integrity": "sha512-B7ot9UlUZOi1zbq61/LvE88ZLTV8IlajTdiZTAEiDQgrnIMIZoPr9kGw0Zw46ObW62O9+H/Be3kMbfb7kYPQZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/shared": "3.5.41"
|
||||
"@vue/shared": "3.5.40"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/runtime-core": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz",
|
||||
"integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.40.tgz",
|
||||
"integrity": "sha512-KAZLweuZ6uUJPK1PMSQPgBU5gCjgrrfjUhSglmU9NhH+Zjepa8cnwSydPWDWHDwOgY4g3VcZ+PljbiHlURNCbw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.5.41",
|
||||
"@vue/shared": "3.5.41"
|
||||
"@vue/reactivity": "3.5.40",
|
||||
"@vue/shared": "3.5.40"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/runtime-dom": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz",
|
||||
"integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.40.tgz",
|
||||
"integrity": "sha512-ZfrX8ssZQds900L9pr8AuK05ddnMsR4MPMZr8cPN9GoqoPWcXLhjvvbIA2SMv+7a97sJ1vv9pj/zxK0Cq/eEFQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/reactivity": "3.5.41",
|
||||
"@vue/runtime-core": "3.5.41",
|
||||
"@vue/shared": "3.5.41",
|
||||
"@vue/reactivity": "3.5.40",
|
||||
"@vue/runtime-core": "3.5.40",
|
||||
"@vue/shared": "3.5.40",
|
||||
"csstype": "^3.2.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/server-renderer": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz",
|
||||
"integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.40.tgz",
|
||||
"integrity": "sha512-XNJym9WpevhTVt1HuwOrCRJ5Q+9z4BjTMrDtjTrvx74SmUll8spNTw6whWJa9mEkO4PKn5TihI/bm/8ds2QVJw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/compiler-ssr": "3.5.41",
|
||||
"@vue/runtime-dom": "3.5.41",
|
||||
"@vue/shared": "3.5.41"
|
||||
"@vue/compiler-ssr": "3.5.40",
|
||||
"@vue/runtime-dom": "3.5.40",
|
||||
"@vue/shared": "3.5.40"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/shared": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz",
|
||||
"integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.40.tgz",
|
||||
"integrity": "sha512-WxnBtruIqOoV3rA4jeKDWzrYI5h7Cp4+pjwDi8kWGHz+IslhiN+wguLVVhtv2l8VoU02rzDCVfDjgCl1lNpZVg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/test-utils": {
|
||||
@@ -3183,16 +3183,16 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "3.5.41",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz",
|
||||
"integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==",
|
||||
"version": "3.5.40",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.40.tgz",
|
||||
"integrity": "sha512-+8PJ4SJXdn/cHGImF4CKdxlWHIN5Dkt7DoufRREM6h6uVCx2m7QxgcEQmmzyOK8A9mcafg7sFbJFYsdFVubTig==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.41",
|
||||
"@vue/compiler-sfc": "3.5.41",
|
||||
"@vue/runtime-dom": "3.5.41",
|
||||
"@vue/server-renderer": "3.5.41",
|
||||
"@vue/shared": "3.5.41"
|
||||
"@vue/compiler-dom": "3.5.40",
|
||||
"@vue/compiler-sfc": "3.5.40",
|
||||
"@vue/runtime-dom": "3.5.40",
|
||||
"@vue/server-renderer": "3.5.40",
|
||||
"@vue/shared": "3.5.40"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "*"
|
||||
@@ -3278,9 +3278,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vuetify": {
|
||||
"version": "4.1.6",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.1.6.tgz",
|
||||
"integrity": "sha512-VOsRTsNfs+FE4JXMONZkqX2yznSqC/FXG9/pgVVjsoqIjUvJg+CfFTuOlgyWVFrZYY+crk7LV9uaiN8bZREV/g==",
|
||||
"version": "4.1.7",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-4.1.7.tgz",
|
||||
"integrity": "sha512-07qxu0S1oxPjmknP/Yn5276PtIhlCvHnpcp7HuOKEHni89/6BGiM2aVdKlEGeyM5RfytDkiv0SNieabGT2D8qQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
|
||||
@@ -148,8 +148,8 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-sheet class="text-start overflow-auto" color="surface" min-height="84vh" max-height="84vh">
|
||||
<v-sheet class="event-editor-header d-flex justify-space-between pa-4" color="surface">
|
||||
<v-sheet class="pa-2 text-start overflow-auto" min-height="84vh" max-height="84vh">
|
||||
<div class="event-editor-header d-flex justify-space-between pa-4">
|
||||
<div>
|
||||
<v-icon :icon="entityIcon" class="mr-2" />
|
||||
{{ entityObject?.label || 'Nothing Selected' }}
|
||||
@@ -180,7 +180,7 @@ watch(
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</div>
|
||||
|
||||
<div class="event-editor-fields">
|
||||
<v-divider />
|
||||
@@ -215,12 +215,6 @@ watch(
|
||||
@update:description="entityObject!.description = $event"
|
||||
/>
|
||||
|
||||
<EventEditorTags
|
||||
:mode="mode"
|
||||
:tags="entityObject!.tags"
|
||||
@update:tags="entityObject!.tags = $event"
|
||||
/>
|
||||
|
||||
<EventEditorDates
|
||||
:mode="mode"
|
||||
:starts-on="entityObject!.startsOn"
|
||||
@@ -266,6 +260,12 @@ watch(
|
||||
@remove-notification="removeNotification"
|
||||
/>
|
||||
|
||||
<EventEditorTags
|
||||
:mode="mode"
|
||||
:tags="entityObject!.tags"
|
||||
@update:tags="entityObject!.tags = $event"
|
||||
/>
|
||||
|
||||
<!-- Metadata for view mode -->
|
||||
<div v-if="mode === 'view' && entityObject!.created" class="event-editor-section">
|
||||
<v-divider class="mb-4"></v-divider>
|
||||
@@ -285,7 +285,7 @@ watch(
|
||||
<v-divider/>
|
||||
</div>
|
||||
|
||||
<v-sheet class="event-editor-footer d-flex text-end justify-space-between pa-4" color="surface">
|
||||
<div class="event-editor-footer d-flex text-end justify-space-between pa-4">
|
||||
<v-btn v-if="mode === 'edit'"
|
||||
variant="text"
|
||||
@click="cancelEdit"
|
||||
@@ -301,7 +301,7 @@ watch(
|
||||
:loading="saving">
|
||||
Save
|
||||
</v-btn>
|
||||
</v-sheet>
|
||||
</div>
|
||||
</v-sheet>
|
||||
</template>
|
||||
|
||||
@@ -309,18 +309,4 @@ watch(
|
||||
.event-editor-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.event-editor-header,
|
||||
.event-editor-footer {
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.event-editor-header {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.event-editor-footer {
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,96 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { formatDisplayDate, formatDisplayTime, formatLocalIsoDate, formatLocalIsoTime } from '@/utils/format'
|
||||
|
||||
interface Props {
|
||||
modelValue?: string | null
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string | null]
|
||||
}>()
|
||||
|
||||
const dateValue = ref('')
|
||||
const timeValue = ref('')
|
||||
const dateMenu = ref(false)
|
||||
const timeMenu = ref(false)
|
||||
|
||||
watch(() => props.modelValue, (value) => {
|
||||
const date = value ? new Date(value) : new Date()
|
||||
dateValue.value = formatLocalIsoDate(date)
|
||||
timeValue.value = formatLocalIsoTime(date)
|
||||
}, { immediate: true })
|
||||
|
||||
const emitValue = () => {
|
||||
if (!dateValue.value || !timeValue.value) return
|
||||
emit('update:modelValue', new Date(`${dateValue.value}T${timeValue.value}`).toISOString())
|
||||
}
|
||||
|
||||
const pickerDate = (value: string): Date | null => value ? new Date(`${value}T00:00:00`) : null
|
||||
|
||||
const normalizePickerDate = (value: unknown): string => {
|
||||
const selected = Array.isArray(value) ? value[0] : value
|
||||
const date = selected instanceof Date ? selected : new Date(String(selected))
|
||||
return Number.isNaN(date.getTime()) ? '' : formatLocalIsoDate(date)
|
||||
}
|
||||
|
||||
const selectDate = (value: unknown) => {
|
||||
const date = normalizePickerDate(value)
|
||||
if (date) dateValue.value = date
|
||||
dateMenu.value = false
|
||||
emitValue()
|
||||
}
|
||||
|
||||
watch(timeValue, () => emitValue())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-row dense>
|
||||
<v-col cols="6">
|
||||
<v-menu v-model="dateMenu" :close-on-content-click="false" location="bottom start">
|
||||
<template #activator="{ props: activatorProps }">
|
||||
<v-text-field
|
||||
v-bind="activatorProps"
|
||||
:model-value="formatDisplayDate(dateValue)"
|
||||
label="Date"
|
||||
prepend-inner-icon="mdi-calendar"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details
|
||||
readonly
|
||||
/>
|
||||
</template>
|
||||
<v-date-picker
|
||||
:model-value="pickerDate(dateValue)"
|
||||
color="primary"
|
||||
show-adjacent-months
|
||||
@update:model-value="selectDate"
|
||||
/>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-menu v-model="timeMenu" :close-on-content-click="false" location="bottom start">
|
||||
<template #activator="{ props: activatorProps }">
|
||||
<v-text-field
|
||||
v-bind="activatorProps"
|
||||
:model-value="formatDisplayTime(timeValue)"
|
||||
label="Time"
|
||||
prepend-inner-icon="mdi-clock-outline"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details
|
||||
readonly
|
||||
/>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-time-picker v-model="timeValue" color="primary" format="ampm" />
|
||||
<v-card-actions class="justify-end">
|
||||
<v-btn variant="text" @click="timeMenu = false">Done</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
@@ -137,6 +137,8 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
|
||||
|
||||
<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">
|
||||
@@ -162,6 +164,7 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
|
||||
/>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="text-subtitle-2 mb-2">Start</div>
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-menu v-model="startDateMenu" :close-on-content-click="false" location="bottom start">
|
||||
@@ -209,6 +212,7 @@ watch([startDate, startTime, endDate, endTime, timelessValue], () => {
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="text-subtitle-2 mb-2">End</div>
|
||||
<v-row dense>
|
||||
<v-col cols="12" md="6">
|
||||
<v-menu v-model="endDateMenu" :close-on-content-click="false" location="bottom start">
|
||||
|
||||
@@ -20,6 +20,7 @@ const descriptionValue = computed({
|
||||
|
||||
<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>
|
||||
|
||||
@@ -20,6 +20,7 @@ const labelValue = computed({
|
||||
|
||||
<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>
|
||||
|
||||
@@ -27,7 +27,7 @@ const hasLocations = () => {
|
||||
<!-- 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</div>
|
||||
<div class="text-subtitle-2">Physical Locations</div>
|
||||
<v-btn v-if="mode === 'edit'"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@@ -49,7 +49,8 @@ const hasLocations = () => {
|
||||
<!-- 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 justify-end mb-2">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>{{ location.label || 'Physical Location' }}</strong>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="small"
|
||||
@@ -101,7 +102,7 @@ const hasLocations = () => {
|
||||
<!-- 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</div>
|
||||
<div class="text-subtitle-2">Virtual Locations</div>
|
||||
<v-btn v-if="mode === 'edit'"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@@ -125,7 +126,8 @@ const hasLocations = () => {
|
||||
<!-- 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 justify-end mb-2">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>{{ location.label || 'Virtual Location' }}</strong>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="small"
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import EventEditorDateTimeField from './EventEditorDateTimeField.vue'
|
||||
|
||||
interface Props {
|
||||
mode: 'edit' | 'view'
|
||||
notifications: Record<string, any>
|
||||
@@ -15,12 +13,14 @@ const emit = defineEmits<{
|
||||
|
||||
const typeOptions = [
|
||||
{ title: 'Email', value: 'email' },
|
||||
{ title: 'Display', value: 'visual' }
|
||||
{ title: 'Visual (Display)', value: 'visual' },
|
||||
{ title: 'Audible (Sound)', value: 'audible' }
|
||||
]
|
||||
|
||||
const patternOptions = [
|
||||
{ title: 'Relative', value: 'relative' },
|
||||
{ title: 'Absolute', value: 'absolute' },
|
||||
{ title: 'Absolute (Specific Time)', value: 'absolute' },
|
||||
{ title: 'Relative (Before Event)', value: 'relative' },
|
||||
{ title: 'Unknown', value: 'unknown' }
|
||||
]
|
||||
|
||||
const anchorOptions = [
|
||||
@@ -28,18 +28,6 @@ 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()}`
|
||||
@@ -60,7 +48,7 @@ const formatNotification = (notification: any) => {
|
||||
variant="outlined"
|
||||
@click="$emit('add-notification')">
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add
|
||||
Add Notification
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
@@ -81,65 +69,9 @@ const formatNotification = (notification: any) => {
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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"
|
||||
@@ -148,6 +80,63 @@ 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>
|
||||
|
||||
@@ -90,7 +90,7 @@ const hasParticipants = () => {
|
||||
variant="outlined"
|
||||
@click="$emit('add-participant')">
|
||||
<v-icon left>mdi-plus</v-icon>
|
||||
Add
|
||||
Add Participant
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
@@ -131,7 +131,8 @@ const hasParticipants = () => {
|
||||
<!-- 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 justify-end mb-2">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<strong>{{ participant.name || 'Participant' }}</strong>
|
||||
<v-btn
|
||||
icon="mdi-delete"
|
||||
size="small"
|
||||
|
||||
@@ -20,6 +20,8 @@ const tagsValue = computed({
|
||||
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user