diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue index 96063fe78..d142c50a2 100644 --- a/js/src/components/Event/OrganizerPickerWrapper.vue +++ b/js/src/components/Event/OrganizerPickerWrapper.vue @@ -77,12 +77,12 @@

{{ actor.name }}

-

- {{ `@${actor.preferredUsername}` }} +

+ {{ `@${usernameWithDomain(actor)}` }}

- {{ `@${actor.preferredUsername}` }} + {{ `@${usernameWithDomain(actor)}` }}
@@ -167,6 +167,8 @@ export default class OrganizerPickerWrapper extends Vue { isComponentModalActive = false; + usernameWithDomain = usernameWithDomain; + @Prop({ type: Array, required: false, default: () => [] }) contacts!: IActor[]; members: Paginate = { elements: [], total: 0 }; diff --git a/js/src/components/Participation/ParticipationSection.vue b/js/src/components/Participation/ParticipationSection.vue index 5be6e1bfd..31eaaf7b3 100644 --- a/js/src/components/Participation/ParticipationSection.vue +++ b/js/src/components/Participation/ParticipationSection.vue @@ -192,9 +192,6 @@ export default class ParticipationSection extends Vue { if (this.event.draft || this.event.status === EventStatus.CANCELLED) return false; - // Organizer can't participate - if (this.actorIsOrganizer) return false; - // If capacity is OK if (this.eventCapacityOK) return true; diff --git a/js/src/filters/datetime.ts b/js/src/filters/datetime.ts index 076121d98..4211375f8 100644 --- a/js/src/filters/datetime.ts +++ b/js/src/filters/datetime.ts @@ -21,19 +21,52 @@ function formatTimeString(value: string): string { }); } -function formatDateTimeString(value: string, showTime = true): string { - const options: DateTimeFormatOptions = { - weekday: undefined, - year: "numeric", - month: "long", - day: "numeric", - hour: undefined, - minute: undefined, - }; +// TODO: These can be removed in favor of dateStyle/timeStyle when those two have sufficient support +// https://caniuse.com/mdn-javascript_builtins_intl_datetimeformat_datetimeformat_datestyle +const LONG_DATE_FORMAT_OPTIONS: DateTimeFormatOptions = { + weekday: undefined, + year: "numeric", + month: "long", + day: "numeric", + hour: undefined, + minute: undefined, +}; + +const LONG_TIME_FORMAT_OPTIONS: DateTimeFormatOptions = { + weekday: "long", + hour: "numeric", + minute: "numeric", +}; + +const SHORT_DATE_FORMAT_OPTIONS: DateTimeFormatOptions = { + weekday: undefined, + year: "numeric", + month: "short", + day: "numeric", + hour: undefined, + minute: undefined, +}; + +const SHORT_TIME_FORMAT_OPTIONS: DateTimeFormatOptions = { + weekday: "short", + hour: "numeric", + minute: "numeric", +}; + +function formatDateTimeString( + value: string, + showTime = true, + dateFormat = "long" +): string { + const isLongFormat = dateFormat === "long"; + let options = isLongFormat + ? LONG_DATE_FORMAT_OPTIONS + : SHORT_DATE_FORMAT_OPTIONS; if (showTime) { - options.weekday = "long"; - options.hour = "numeric"; - options.minute = "numeric"; + options = { + ...options, + ...(isLongFormat ? LONG_TIME_FORMAT_OPTIONS : SHORT_TIME_FORMAT_OPTIONS), + }; } const format = new Intl.DateTimeFormat(locale(), options); return format.format(parseDateTime(value)); diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue index d0a617f19..941a27117 100644 --- a/js/src/views/Event/Edit.vue +++ b/js/src/views/Event/Edit.vue @@ -1,6 +1,6 @@ -