diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue
index 96063fe7..d142c50a 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 5be6e1bf..31eaaf7b 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 076121d9..4211375f 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 d0a617f1..941a2711 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -1,6 +1,6 @@
-
+
{{ $t("Update event {name}", { name: event.title }) }}
@@ -269,6 +269,11 @@
+
+
+ {{ $t("Only group moderators can create, edit and delete events.") }}
+
+