feat(admin-events): form layout overhaul + agenda input + date input rewrite
Admin event create form: - Wraps body in a form-layout/form-main container for upcoming sidebar work. - Bigger autoresize textareas for description/content; adds an Agenda textarea (one item per line, persisted as event.agenda). - Reorganises settings into Event Settings + conditional Cancellation Message sections. - Pulls event-type options from EVENT_TYPES; location becomes optional; passes displayTimezone through to NaturalDateInput. NaturalDateInput: rewritten to a single always-visible UInput with chrono parsing and trailing status icon, instead of toggling between input and parsed-summary blocks. Cleaner state model (rawInput / parsedDate / isValid / hasError) and timezone-aware update emission.
This commit is contained in:
parent
622cc8e53b
commit
4a05e91715
2 changed files with 474 additions and 514 deletions
|
|
@ -1,80 +1,40 @@
|
|||
<template>
|
||||
<div class="space-y-2">
|
||||
<div v-if="!parsedDate || hasError || isEditing" class="relative">
|
||||
<div class="natural-date-input">
|
||||
<UInput
|
||||
:model-value="naturalInput"
|
||||
:model-value="rawInput"
|
||||
:placeholder="placeholder"
|
||||
:color="
|
||||
hasError && naturalInput.trim()
|
||||
? 'error'
|
||||
: isValidParse && naturalInput.trim()
|
||||
? 'success'
|
||||
: undefined
|
||||
"
|
||||
@update:model-value="onNaturalInputChange"
|
||||
@blur="onBlur"
|
||||
:color="trailingState"
|
||||
@update:model-value="onInputChange"
|
||||
>
|
||||
<template #trailing>
|
||||
<Icon
|
||||
v-if="isValidParse && naturalInput.trim()"
|
||||
v-if="isValid && rawInput.trim()"
|
||||
name="heroicons:check-circle"
|
||||
class="w-5 h-5"
|
||||
style="color: var(--candle)"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="hasError && naturalInput.trim()"
|
||||
v-else-if="hasError && rawInput.trim()"
|
||||
name="heroicons:exclamation-circle"
|
||||
class="w-5 h-5"
|
||||
style="color: var(--ember)"
|
||||
/>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="parsedDate && isValidParse && !isEditing"
|
||||
class="text-sm px-3 py-2"
|
||||
style="color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
|
||||
<p
|
||||
v-if="rawInput.trim() && isValid"
|
||||
class="preview-line"
|
||||
style="color: var(--candle)"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="heroicons:calendar" class="w-4 h-4" />
|
||||
<span>{{ formatParsedDate(parsedDate) }}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-link"
|
||||
@click="clearAndEdit"
|
||||
→ {{ previewText }}
|
||||
</p>
|
||||
<p
|
||||
v-else-if="rawInput.trim() && hasError"
|
||||
class="preview-line"
|
||||
style="color: var(--ember)"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="hasError && naturalInput.trim()"
|
||||
class="text-sm px-3 py-2"
|
||||
style="color: var(--ember); background: color-mix(in srgb, var(--ember) 15%, transparent); border: 1px solid var(--ember)"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="heroicons:exclamation-triangle" class="w-4 h-4" />
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fallback datetime-local input -->
|
||||
<details class="text-sm">
|
||||
<summary class="cursor-pointer" style="color: var(--text-dim)">
|
||||
Use traditional date picker
|
||||
</summary>
|
||||
<div class="mt-2">
|
||||
<UInput
|
||||
v-model="datetimeValue"
|
||||
type="datetime-local"
|
||||
@change="onDatetimeChange"
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -82,227 +42,197 @@
|
|||
import * as chrono from "chrono-node";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
modelValue: { type: String, default: "" },
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'e.g., "tomorrow at 3pm", "next Friday at 9am", "in 2 hours"',
|
||||
},
|
||||
inputClass: {
|
||||
type: [String, Object],
|
||||
default: "",
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: 'e.g., "tomorrow at 3pm", "Nov 22 at 3pm"',
|
||||
},
|
||||
displayTimezone: { type: String, default: "" },
|
||||
required: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const naturalInput = ref("");
|
||||
const parsedDate = ref(null);
|
||||
const isValidParse = ref(false);
|
||||
const rawInput = ref("");
|
||||
const isValid = ref(false);
|
||||
const hasError = ref(false);
|
||||
const errorMessage = ref("");
|
||||
const datetimeValue = ref("");
|
||||
const isEditing = ref(false);
|
||||
// previewDate holds the parsed value as a UTC Date so we can format it in
|
||||
// arbitrary timezones without re-parsing. Source of truth for the preview.
|
||||
const previewDate = ref(null);
|
||||
|
||||
// Initialize with current value
|
||||
onMounted(() => {
|
||||
if (props.modelValue) {
|
||||
const date = new Date(props.modelValue);
|
||||
if (!isNaN(date.getTime())) {
|
||||
parsedDate.value = date;
|
||||
datetimeValue.value = formatForDatetimeLocal(date);
|
||||
isValidParse.value = true;
|
||||
}
|
||||
}
|
||||
const trailingState = computed(() => {
|
||||
if (!rawInput.value.trim()) return undefined;
|
||||
if (hasError.value) return "error";
|
||||
if (isValid.value) return "success";
|
||||
return undefined;
|
||||
});
|
||||
|
||||
// Watch for external changes to modelValue
|
||||
const previewText = computed(() => {
|
||||
if (!previewDate.value) return "";
|
||||
const tz = activeTZ();
|
||||
const date = new Intl.DateTimeFormat("en-US", {
|
||||
timeZone: tz,
|
||||
weekday: "short",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
}).format(previewDate.value);
|
||||
const abbr = shortTimezoneName(previewDate.value, tz);
|
||||
return abbr ? `${date} ${abbr}` : date;
|
||||
});
|
||||
|
||||
const activeTZ = () =>
|
||||
props.displayTimezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
|
||||
// Seed the input from modelValue without triggering chrono. The parent's
|
||||
// value is canonical — we just render it as a chrono-friendly readable
|
||||
// string so the user can backspace and tweak in place.
|
||||
const seedFromModelValue = () => {
|
||||
if (!props.modelValue) {
|
||||
rawInput.value = "";
|
||||
isValid.value = false;
|
||||
hasError.value = false;
|
||||
errorMessage.value = "";
|
||||
previewDate.value = null;
|
||||
return;
|
||||
}
|
||||
const tz = activeTZ();
|
||||
const utc = zonedLocalToUTC(props.modelValue, tz);
|
||||
if (!utc) return;
|
||||
previewDate.value = utc;
|
||||
isValid.value = true;
|
||||
hasError.value = false;
|
||||
errorMessage.value = "";
|
||||
rawInput.value = readableSeed(utc, tz);
|
||||
};
|
||||
|
||||
onMounted(seedFromModelValue);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (newValue && newValue !== formatForDatetimeLocal(parsedDate.value)) {
|
||||
const date = new Date(newValue);
|
||||
if (!isNaN(date.getTime())) {
|
||||
parsedDate.value = date;
|
||||
datetimeValue.value = formatForDatetimeLocal(date);
|
||||
isValidParse.value = true;
|
||||
naturalInput.value = ""; // Clear natural input when set externally
|
||||
isEditing.value = false;
|
||||
}
|
||||
} else if (!newValue) {
|
||||
reset();
|
||||
}
|
||||
(next) => {
|
||||
const tz = activeTZ();
|
||||
const expected = previewDate.value
|
||||
? utcToZonedLocal(previewDate.value, tz)
|
||||
: "";
|
||||
if (next === expected) return;
|
||||
seedFromModelValue();
|
||||
},
|
||||
);
|
||||
|
||||
const parseNaturalInput = () => {
|
||||
const input = naturalInput.value.trim();
|
||||
|
||||
if (!input) {
|
||||
reset();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Parse with chrono-node
|
||||
const results = chrono.parse(input);
|
||||
|
||||
if (results.length > 0) {
|
||||
const result = results[0];
|
||||
const date = result.date();
|
||||
|
||||
// Validate the parsed date
|
||||
if (date && !isNaN(date.getTime())) {
|
||||
parsedDate.value = date;
|
||||
isValidParse.value = true;
|
||||
hasError.value = false;
|
||||
datetimeValue.value = formatForDatetimeLocal(date);
|
||||
emit("update:modelValue", formatForDatetimeLocal(date));
|
||||
} else {
|
||||
setError("Could not parse this date format");
|
||||
}
|
||||
} else {
|
||||
setError(
|
||||
'Could not understand this date format. Try something like "tomorrow at 3pm" or "next Friday"',
|
||||
watch(
|
||||
() => props.displayTimezone,
|
||||
() => {
|
||||
// Re-interpret the current input under the new TZ so the preview and
|
||||
// emitted value reflect the new timezone semantics.
|
||||
if (rawInput.value.trim()) parse(rawInput.value);
|
||||
},
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
setError("Error parsing date");
|
||||
}
|
||||
|
||||
const onInputChange = (value) => {
|
||||
rawInput.value = value;
|
||||
parse(value);
|
||||
};
|
||||
|
||||
// UInput's fall-through @input listener fires unreliably (the Nuxt UI Input
|
||||
// template merges $attrs with an explicit @input and can drop keystrokes).
|
||||
// update:model-value is a declared emit and fires for every change.
|
||||
const onNaturalInputChange = (value) => {
|
||||
naturalInput.value = value;
|
||||
parseNaturalInput();
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
// Always re-parse on blur so the final typed value wins, even if an
|
||||
// intermediate state produced a stale parse.
|
||||
if (naturalInput.value.trim()) {
|
||||
parseNaturalInput();
|
||||
}
|
||||
if (isValidParse.value) {
|
||||
isEditing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onDatetimeChange = () => {
|
||||
if (datetimeValue.value) {
|
||||
const date = new Date(datetimeValue.value);
|
||||
if (!isNaN(date.getTime())) {
|
||||
parsedDate.value = date;
|
||||
isValidParse.value = true;
|
||||
hasError.value = false;
|
||||
naturalInput.value = ""; // Clear natural input when using traditional picker
|
||||
isEditing.value = false;
|
||||
emit("update:modelValue", datetimeValue.value);
|
||||
}
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
parsedDate.value = null;
|
||||
isValidParse.value = false;
|
||||
const parse = (input) => {
|
||||
const trimmed = input.trim();
|
||||
if (!trimmed) {
|
||||
isValid.value = false;
|
||||
hasError.value = false;
|
||||
errorMessage.value = "";
|
||||
previewDate.value = null;
|
||||
emit("update:modelValue", "");
|
||||
return;
|
||||
}
|
||||
const tz = activeTZ();
|
||||
let results;
|
||||
try {
|
||||
results = chrono.parse(trimmed, referenceNowInTZ(tz));
|
||||
} catch {
|
||||
setError("Couldn't read that — try \"tomorrow 3pm\" or \"Nov 22 3pm\"");
|
||||
return;
|
||||
}
|
||||
if (!results.length) {
|
||||
setError("Couldn't read that — try \"tomorrow 3pm\" or \"Nov 22 3pm\"");
|
||||
return;
|
||||
}
|
||||
const date = results[0].date();
|
||||
if (!date || Number.isNaN(date.getTime())) {
|
||||
setError("Couldn't read that date");
|
||||
return;
|
||||
}
|
||||
// chrono returned a Date whose browser-local components match what the
|
||||
// user typed in the event timezone (because we shifted the reference).
|
||||
// Read those components as wall-clock in displayTimezone.
|
||||
const localStr = browserComponentsToString(date);
|
||||
const utc = zonedLocalToUTC(localStr, tz);
|
||||
if (!utc) {
|
||||
setError("Couldn't parse this date");
|
||||
return;
|
||||
}
|
||||
isValid.value = true;
|
||||
hasError.value = false;
|
||||
errorMessage.value = "";
|
||||
previewDate.value = utc;
|
||||
emit("update:modelValue", localStr);
|
||||
};
|
||||
|
||||
const setError = (msg) => {
|
||||
isValid.value = false;
|
||||
hasError.value = true;
|
||||
errorMessage.value = msg;
|
||||
previewDate.value = null;
|
||||
emit("update:modelValue", "");
|
||||
};
|
||||
|
||||
const setError = (message) => {
|
||||
isValidParse.value = false;
|
||||
hasError.value = true;
|
||||
errorMessage.value = message;
|
||||
parsedDate.value = null;
|
||||
// Build a Date object whose browser-local components equal the current
|
||||
// wall-clock in the given IANA timezone, so chrono's "tomorrow"/"next
|
||||
// Friday" anchor to the event TZ rather than the editor's browser TZ.
|
||||
const referenceNowInTZ = (tz) => {
|
||||
const nowStr = utcToZonedLocal(new Date(), tz);
|
||||
if (!nowStr) return new Date();
|
||||
const [d, t] = nowStr.split("T");
|
||||
const [y, mo, day] = d.split("-").map(Number);
|
||||
const [h, mi] = t.split(":").map(Number);
|
||||
return new Date(y, mo - 1, day, h, mi);
|
||||
};
|
||||
|
||||
const clearAndEdit = () => {
|
||||
// Pre-fill the input with a readable string so the user doesn't start over.
|
||||
naturalInput.value = parsedDate.value
|
||||
? parsedDate.value.toLocaleString("en-US", {
|
||||
month: "long",
|
||||
const browserComponentsToString = (date) => {
|
||||
const y = date.getFullYear();
|
||||
const mo = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
const h = String(date.getHours()).padStart(2, "0");
|
||||
const mi = String(date.getMinutes()).padStart(2, "0");
|
||||
return `${y}-${mo}-${d}T${h}:${mi}`;
|
||||
};
|
||||
|
||||
const readableSeed = (utc, tz) => {
|
||||
// Format chosen to round-trip cleanly through chrono.parse.
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
timeZone: tz,
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
})
|
||||
: "";
|
||||
parsedDate.value = null;
|
||||
isValidParse.value = false;
|
||||
hasError.value = false;
|
||||
// Prevent auto-hide while editing: chrono re-parses the pre-filled string
|
||||
// on the first keystroke, which would otherwise hide the input.
|
||||
isEditing.value = true;
|
||||
};
|
||||
|
||||
const formatForDatetimeLocal = (date) => {
|
||||
if (!date) return "";
|
||||
// Format as YYYY-MM-DDTHH:MM for datetime-local input
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const formatParsedDate = (date) => {
|
||||
if (!date) return "";
|
||||
|
||||
const now = new Date();
|
||||
const isToday = date.toDateString() === now.toDateString();
|
||||
const tomorrow = new Date(now);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
const isTomorrow = date.toDateString() === tomorrow.toDateString();
|
||||
|
||||
const timeStr = date.toLocaleString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
});
|
||||
|
||||
if (isToday) {
|
||||
return `Today at ${timeStr}`;
|
||||
} else if (isTomorrow) {
|
||||
return `Tomorrow at ${timeStr}`;
|
||||
} else {
|
||||
return date.toLocaleString("en-US", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
hour12: true,
|
||||
});
|
||||
}
|
||||
}).format(utc);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.edit-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--candle);
|
||||
cursor: pointer;
|
||||
font-family: "Commit Mono", monospace;
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
.natural-date-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.edit-link:hover {
|
||||
color: var(--ember);
|
||||
|
||||
.preview-line {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@
|
|||
</div>
|
||||
|
||||
<form @submit.prevent="saveEvent">
|
||||
<div class="form-layout">
|
||||
<div class="form-main">
|
||||
<!-- Basic Information -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Basic Information</h2>
|
||||
|
|
@ -38,6 +40,7 @@
|
|||
placeholder="Enter a clear, descriptive event title"
|
||||
required
|
||||
:color="fieldErrors.title ? 'error' : undefined"
|
||||
:ui="{ base: 'title-input' }"
|
||||
class="w-full"
|
||||
/>
|
||||
<p v-if="fieldErrors.title" class="field-error">
|
||||
|
|
@ -60,7 +63,8 @@
|
|||
v-model="eventForm.description"
|
||||
placeholder="Provide a clear description of what attendees can expect from this event"
|
||||
required
|
||||
:rows="4"
|
||||
:rows="8"
|
||||
autoresize
|
||||
:color="fieldErrors.description ? 'error' : undefined"
|
||||
class="w-full"
|
||||
/>
|
||||
|
|
@ -77,7 +81,8 @@
|
|||
<UTextarea
|
||||
v-model="eventForm.content"
|
||||
placeholder="Add detailed information, agenda, requirements, or other important details"
|
||||
:rows="6"
|
||||
:rows="12"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
|
|
@ -85,6 +90,21 @@
|
|||
requirements
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Event Agenda</label>
|
||||
<UTextarea
|
||||
v-model="agendaText"
|
||||
placeholder="Introduction and welcome - 10 mins Main talk - 30 mins Q&A - 15 mins"
|
||||
:rows="6"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
One agenda item per line. Help attendees know what to expect
|
||||
during the event.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Details -->
|
||||
|
|
@ -97,12 +117,7 @@
|
|||
<USelect
|
||||
v-model="eventForm.eventType"
|
||||
aria-label="Event type"
|
||||
:items="[
|
||||
{ label: 'Community Meetup', value: 'community' },
|
||||
{ label: 'Workshop', value: 'workshop' },
|
||||
{ label: 'Social Event', value: 'social' },
|
||||
{ label: 'Showcase', value: 'showcase' },
|
||||
]"
|
||||
:items="EVENT_TYPES"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
|
|
@ -128,18 +143,13 @@
|
|||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label> Location <span class="required">*</span> </label>
|
||||
<label>Location</label>
|
||||
<UInput
|
||||
v-model="eventForm.location"
|
||||
placeholder="e.g., https://zoom.us/j/123..., #channel-name, or TBD"
|
||||
required
|
||||
:color="fieldErrors.location ? 'error' : undefined"
|
||||
class="w-full"
|
||||
/>
|
||||
<p v-if="fieldErrors.location" class="field-error">
|
||||
{{ fieldErrors.location }}
|
||||
</p>
|
||||
<p v-if="!fieldErrors.location" class="help-text">
|
||||
<p class="help-text">
|
||||
Video conference link, Slack channel (#channel-name), or 'TBD' if
|
||||
the platform is undecided
|
||||
</p>
|
||||
|
|
@ -149,6 +159,7 @@
|
|||
<label> Start Date & Time <span class="required">*</span> </label>
|
||||
<NaturalDateInput
|
||||
v-model="eventForm.startDate"
|
||||
:display-timezone="eventForm.displayTimezone"
|
||||
placeholder="e.g., 'tomorrow at 3pm', 'next Friday at 9am'"
|
||||
:required="true"
|
||||
/>
|
||||
|
|
@ -161,6 +172,7 @@
|
|||
<label> End Date & Time <span class="required">*</span> </label>
|
||||
<NaturalDateInput
|
||||
v-model="eventForm.endDate"
|
||||
:display-timezone="eventForm.displayTimezone"
|
||||
placeholder="e.g., 'tomorrow at 5pm', 'next Friday at 11am'"
|
||||
:required="true"
|
||||
/>
|
||||
|
|
@ -187,6 +199,7 @@
|
|||
<label>Registration Deadline</label>
|
||||
<NaturalDateInput
|
||||
v-model="eventForm.registrationDeadline"
|
||||
:display-timezone="eventForm.displayTimezone"
|
||||
placeholder="e.g., 'tomorrow at noon', '1 hour before event'"
|
||||
/>
|
||||
<p class="help-text">
|
||||
|
|
@ -196,6 +209,87 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Settings -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Event Settings</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="check-group">
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isOnline" type="checkbox" >
|
||||
<div>
|
||||
<strong>Online Event</strong>
|
||||
<span class="help-text">
|
||||
Event will be conducted virtually
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input
|
||||
v-model="eventForm.registrationRequired"
|
||||
type="checkbox"
|
||||
>
|
||||
<div>
|
||||
<strong>Registration Required</strong>
|
||||
<span class="help-text">
|
||||
Attendees must register before attending
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isVisible" type="checkbox" >
|
||||
<div>
|
||||
<strong>Visible on Public Calendar</strong>
|
||||
<span class="help-text">
|
||||
Event will appear on the public events page
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isCancelled" type="checkbox" >
|
||||
<div>
|
||||
<strong>Event Cancelled</strong>
|
||||
<span class="help-text"> Mark this event as cancelled </span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.membersOnly" type="checkbox" >
|
||||
<div>
|
||||
<strong>Members Only</strong>
|
||||
<span class="help-text">
|
||||
Hide this event from the public; only members can see it
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cancellation Message (conditional) -->
|
||||
<div v-if="eventForm.isCancelled" class="form-section">
|
||||
<div class="field">
|
||||
<label>Cancellation Message</label>
|
||||
<UTextarea
|
||||
v-model="eventForm.cancellationMessage"
|
||||
placeholder="Explain why the event was cancelled and any next steps..."
|
||||
:rows="3"
|
||||
color="error"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
This message will be displayed to users viewing the event page
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="form-aside">
|
||||
<!-- Target Audience -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Target Audience</h2>
|
||||
|
|
@ -208,39 +302,24 @@
|
|||
v-model="eventForm.targetCircles"
|
||||
value="community"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
>
|
||||
<strong>Community Circle</strong>
|
||||
<span class="help-text">
|
||||
New members and those exploring the community
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="check-label">
|
||||
<input
|
||||
v-model="eventForm.targetCircles"
|
||||
value="founder"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
>
|
||||
<strong>Founder Circle</strong>
|
||||
<span class="help-text">
|
||||
Entrepreneurs and business leaders
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="check-label">
|
||||
<input
|
||||
v-model="eventForm.targetCircles"
|
||||
value="practitioner"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
>
|
||||
<strong>Practitioner Circle</strong>
|
||||
<span class="help-text">
|
||||
Experts and professionals sharing knowledge
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<p class="help-text">
|
||||
|
|
@ -261,11 +340,30 @@
|
|||
:items="tagOptions"
|
||||
value-key="value"
|
||||
multiple
|
||||
placeholder="Select tags..."
|
||||
searchable
|
||||
create-item
|
||||
placeholder="Select or type to add tags..."
|
||||
class="w-full"
|
||||
@create="onTagCreate"
|
||||
/>
|
||||
<div class="field new-tag-pool">
|
||||
<label>New tag pool</label>
|
||||
<USelect
|
||||
v-model="newTagPool"
|
||||
:items="[
|
||||
{ label: 'Cooperative', value: 'cooperative' },
|
||||
{ label: 'Craft', value: 'craft' },
|
||||
]"
|
||||
value-key="value"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
Tag this event to help with discovery and recommendations
|
||||
Pool assigned to any new tag you create from this field.
|
||||
</p>
|
||||
</div>
|
||||
<p class="help-text">
|
||||
Tag this event to help with discovery and recommendations. Type a
|
||||
new tag and press enter to add it.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -275,7 +373,7 @@
|
|||
<h2 class="section-heading">Ticketing</h2>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.tickets.enabled" type="checkbox" />
|
||||
<input v-model="eventForm.tickets.enabled" type="checkbox" >
|
||||
<div>
|
||||
<strong>Enable Ticketing</strong>
|
||||
<span class="help-text"> Allow ticket sales for this event </span>
|
||||
|
|
@ -287,7 +385,7 @@
|
|||
<input
|
||||
v-model="eventForm.tickets.public.available"
|
||||
type="checkbox"
|
||||
/>
|
||||
>
|
||||
<div>
|
||||
<strong>Public Tickets Available</strong>
|
||||
<span class="help-text">
|
||||
|
|
@ -369,6 +467,7 @@
|
|||
<label>Early Bird Deadline</label>
|
||||
<NaturalDateInput
|
||||
v-model="eventForm.tickets.public.earlyBirdDeadline"
|
||||
:display-timezone="eventForm.displayTimezone"
|
||||
placeholder="e.g., '1 week before event', 'next Monday'"
|
||||
/>
|
||||
<p class="help-text">
|
||||
|
|
@ -384,7 +483,7 @@
|
|||
<h2 class="section-heading">Series Management</h2>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.series.isSeriesEvent" type="checkbox" />
|
||||
<input v-model="eventForm.series.isSeriesEvent" type="checkbox" >
|
||||
<div>
|
||||
<strong>Part of Event Series</strong>
|
||||
<span class="help-text">
|
||||
|
|
@ -400,7 +499,6 @@
|
|||
<USelect
|
||||
v-model="selectedSeriesId"
|
||||
aria-label="Select series"
|
||||
@update:model-value="onSeriesSelect"
|
||||
:items="
|
||||
availableSeries.map((series) => ({
|
||||
label: `${series.title} (${series.eventCount || 0} events)`,
|
||||
|
|
@ -410,6 +508,7 @@
|
|||
placeholder="Choose existing series or create new..."
|
||||
value-key="value"
|
||||
class="w-full"
|
||||
@update:model-value="onSeriesSelect"
|
||||
/>
|
||||
<NuxtLink to="/admin/series/create" class="btn btn-primary">
|
||||
New Series
|
||||
|
|
@ -467,123 +566,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Agenda -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Event Agenda</h2>
|
||||
|
||||
<div class="agenda-items">
|
||||
<div
|
||||
v-for="(item, index) in eventForm.agenda"
|
||||
:key="index"
|
||||
class="agenda-row"
|
||||
>
|
||||
<UInput
|
||||
v-model="eventForm.agenda[index]"
|
||||
placeholder="Enter agenda item (e.g., 'Introduction and welcome - 10 mins')"
|
||||
class="w-full"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="removeAgendaItem(index)"
|
||||
class="link-btn link-btn-danger"
|
||||
>
|
||||
<Icon name="heroicons:trash" class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="addAgendaItem"
|
||||
class="btn add-agenda-btn"
|
||||
>
|
||||
+ Add Agenda Item
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="help-text">
|
||||
Add agenda items to help attendees know what to expect during the
|
||||
event
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Event Settings -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Event Settings</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="check-group">
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isOnline" type="checkbox" />
|
||||
<div>
|
||||
<strong>Online Event</strong>
|
||||
<span class="help-text">
|
||||
Event will be conducted virtually
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input
|
||||
v-model="eventForm.registrationRequired"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
<strong>Registration Required</strong>
|
||||
<span class="help-text">
|
||||
Attendees must register before attending
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isVisible" type="checkbox" />
|
||||
<div>
|
||||
<strong>Visible on Public Calendar</strong>
|
||||
<span class="help-text">
|
||||
Event will appear on the public events page
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isCancelled" type="checkbox" />
|
||||
<div>
|
||||
<strong>Event Cancelled</strong>
|
||||
<span class="help-text"> Mark this event as cancelled </span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.membersOnly" type="checkbox" />
|
||||
<div>
|
||||
<strong>Members Only</strong>
|
||||
<span class="help-text">
|
||||
Hide this event from the public; only members can see it
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cancellation Message (conditional) -->
|
||||
<div v-if="eventForm.isCancelled" class="form-section">
|
||||
<div class="field">
|
||||
<label>Cancellation Message</label>
|
||||
<UTextarea
|
||||
v-model="eventForm.cancellationMessage"
|
||||
placeholder="Explain why the event was cancelled and any next steps..."
|
||||
:rows="3"
|
||||
color="error"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
This message will be displayed to users viewing the event page
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
|
|
@ -594,9 +577,9 @@
|
|||
<button
|
||||
v-if="!editingEvent"
|
||||
type="button"
|
||||
@click="saveAndCreateAnother"
|
||||
:disabled="creating"
|
||||
class="btn"
|
||||
@click="saveAndCreateAnother"
|
||||
>
|
||||
{{ creating ? "Saving..." : "Save & Create Another" }}
|
||||
</button>
|
||||
|
|
@ -619,6 +602,7 @@
|
|||
|
||||
<script setup>
|
||||
import { TIMEZONE_OPTIONS } from "~/config/timezones";
|
||||
import { EVENT_TYPES } from "~/config/eventTypes";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
|
|
@ -638,9 +622,32 @@ const availableSeries = ref([]);
|
|||
const availableTags = ref([]);
|
||||
|
||||
const tagOptions = computed(() =>
|
||||
availableTags.value.map((t) => ({ label: t.label, value: t.slug }))
|
||||
availableTags.value.map((t) => ({ label: t.label, value: t.slug })),
|
||||
);
|
||||
|
||||
const newTagPool = ref("cooperative");
|
||||
|
||||
const onTagCreate = async (item) => {
|
||||
const label = typeof item === "string" ? item : item?.label || item?.value;
|
||||
if (!label?.trim()) return;
|
||||
try {
|
||||
const { tag } = await $fetch("/api/admin/tags", {
|
||||
method: "POST",
|
||||
body: { label: label.trim(), pool: newTagPool.value },
|
||||
});
|
||||
if (!availableTags.value.some((t) => t.slug === tag.slug)) {
|
||||
availableTags.value.push({ slug: tag.slug, label: tag.label });
|
||||
}
|
||||
if (!eventForm.tags.includes(tag.slug)) {
|
||||
eventForm.tags.push(tag.slug);
|
||||
}
|
||||
} catch (err) {
|
||||
formErrors.value.push(
|
||||
`Failed to create tag "${label}": ${err?.data?.statusMessage || err?.statusMessage || err?.message || "unknown error"}`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const eventForm = reactive({
|
||||
title: "",
|
||||
description: "",
|
||||
|
|
@ -648,7 +655,7 @@ const eventForm = reactive({
|
|||
featureImage: null,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
eventType: "community",
|
||||
eventType: "community-meetup",
|
||||
displayTimezone: "America/Toronto",
|
||||
location: "",
|
||||
isOnline: true,
|
||||
|
|
@ -724,14 +731,14 @@ const timezoneItems = computed(() => {
|
|||
return list;
|
||||
});
|
||||
|
||||
// Agenda management functions
|
||||
const addAgendaItem = () => {
|
||||
eventForm.agenda.push("");
|
||||
};
|
||||
|
||||
const removeAgendaItem = (index) => {
|
||||
eventForm.agenda.splice(index, 1);
|
||||
};
|
||||
const agendaText = computed({
|
||||
get() {
|
||||
return (eventForm.agenda || []).join("\n");
|
||||
},
|
||||
set(v) {
|
||||
eventForm.agenda = v.split("\n");
|
||||
},
|
||||
});
|
||||
|
||||
// Load available series and tags
|
||||
onMounted(async () => {
|
||||
|
|
@ -895,12 +902,6 @@ const validateForm = () => {
|
|||
fieldErrors.value.endDate = "Please select when the event ends";
|
||||
}
|
||||
|
||||
if (!eventForm.location.trim()) {
|
||||
formErrors.value.push("Location is required");
|
||||
fieldErrors.value.location =
|
||||
"Please enter a URL, Slack channel, or 'TBD'";
|
||||
}
|
||||
|
||||
// Date validation
|
||||
if (eventForm.startDate && eventForm.endDate) {
|
||||
const startDate = new Date(eventForm.startDate);
|
||||
|
|
@ -917,22 +918,6 @@ const validateForm = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Location format validation
|
||||
if (eventForm.location.trim()) {
|
||||
const value = eventForm.location.trim();
|
||||
const urlPattern = /^https?:\/\/.+/;
|
||||
const slackPattern = /^#[a-zA-Z0-9-_]+$/;
|
||||
const isTbd = value.toUpperCase() === "TBD";
|
||||
|
||||
if (!isTbd && !urlPattern.test(value) && !slackPattern.test(value)) {
|
||||
formErrors.value.push(
|
||||
"Location must be a valid URL, Slack channel (starting with #), or 'TBD'",
|
||||
);
|
||||
fieldErrors.value.location =
|
||||
"Enter a URL (https://...), Slack channel (#channel-name), or 'TBD' if undecided";
|
||||
}
|
||||
}
|
||||
|
||||
// Registration deadline validation
|
||||
if (eventForm.registrationDeadline && eventForm.startDate) {
|
||||
const regDeadline = new Date(eventForm.registrationDeadline);
|
||||
|
|
@ -979,6 +964,9 @@ const saveEvent = async (redirect = true) => {
|
|||
registrationDeadline: eventForm.registrationDeadline
|
||||
? toUTC(eventForm.registrationDeadline)
|
||||
: eventForm.registrationDeadline,
|
||||
agenda: (eventForm.agenda || [])
|
||||
.map((l) => l.trim())
|
||||
.filter(Boolean),
|
||||
tickets: {
|
||||
...eventForm.tickets,
|
||||
public: {
|
||||
|
|
@ -1036,7 +1024,7 @@ const saveAndCreateAnother = async () => {
|
|||
featureImage: null,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
eventType: "community",
|
||||
eventType: "community-meetup",
|
||||
displayTimezone: "America/Toronto",
|
||||
location: "",
|
||||
isOnline: true,
|
||||
|
|
@ -1082,7 +1070,42 @@ const saveAndCreateAnother = async () => {
|
|||
|
||||
<style scoped>
|
||||
.create-form {
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Vertical divider between main + aside, full viewport height */
|
||||
.create-form::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 340px;
|
||||
border-left: 1px dashed var(--border);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.form-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 340px;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-main {
|
||||
min-width: 0;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.form-aside {
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.form-aside .form-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
|
|
@ -1119,7 +1142,21 @@ const saveAndCreateAnother = async () => {
|
|||
}
|
||||
|
||||
.form-body {
|
||||
padding: 24px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-body > .error-box,
|
||||
.form-body > .success-box {
|
||||
margin: 24px 28px 0;
|
||||
}
|
||||
|
||||
.form-body > form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
|
|
@ -1127,7 +1164,9 @@ const saveAndCreateAnother = async () => {
|
|||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
padding-bottom: 10px;
|
||||
margin-left: -28px;
|
||||
margin-right: -28px;
|
||||
padding: 0 28px 10px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -1225,7 +1264,7 @@ const saveAndCreateAnother = async () => {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
padding: 20px 28px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
|
|
@ -1258,59 +1297,50 @@ const saveAndCreateAnother = async () => {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.agenda-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agenda-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.agenda-row .w-full {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--candle);
|
||||
cursor: pointer;
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-btn-danger {
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.add-agenda-btn {
|
||||
align-self: flex-start;
|
||||
color: var(--candle);
|
||||
border-color: var(--candle);
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.btn:disabled,
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:deep(.title-input) {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 24px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.create-form::after {
|
||||
display: none;
|
||||
}
|
||||
.form-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.form-aside {
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
padding: 24px 20px 16px;
|
||||
}
|
||||
.form-body {
|
||||
padding: 20px;
|
||||
.form-main,
|
||||
.form-aside,
|
||||
.form-actions {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.form-body > .error-box,
|
||||
.form-body > .success-box {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.section-heading {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue