@@ -80,7 +80,7 @@
|
||||
<img
|
||||
class="w-12"
|
||||
v-if="instance.hasRelay"
|
||||
src="../../../public/img/logo.svg"
|
||||
src="/img/logo.svg"
|
||||
alt=""
|
||||
/>
|
||||
<CloudQuestion v-else :size="36" />
|
||||
|
||||
@@ -44,19 +44,28 @@
|
||||
<script lang="ts" setup>
|
||||
import RouteName from "../../router/name";
|
||||
import { useQuery } from "@vue/apollo-composable";
|
||||
import { computed, defineAsyncComponent, ref } from "vue";
|
||||
import { computed, defineAsyncComponent, ref, watchEffect } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { integerTransformer, useRouteQuery } from "vue-use-route-query";
|
||||
import {
|
||||
booleanTransformer,
|
||||
integerTransformer,
|
||||
useRouteQuery,
|
||||
} from "vue-use-route-query";
|
||||
import { PROFILE_CONVERSATIONS } from "@/graphql/event";
|
||||
import ConversationListItem from "../../components/Conversations/ConversationListItem.vue";
|
||||
import EmptyContent from "../../components/Utils/EmptyContent.vue";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { IPerson } from "@/types/actor";
|
||||
import { useProgrammatic } from "@oruga-ui/oruga-next";
|
||||
import { arrayTransformer } from "@/utils/route";
|
||||
|
||||
const page = useRouteQuery("page", 1, integerTransformer);
|
||||
const CONVERSATIONS_PER_PAGE = 10;
|
||||
|
||||
const showModal = useRouteQuery("newMessage", false, booleanTransformer);
|
||||
const personMentions = useRouteQuery("personMentions", [], arrayTransformer);
|
||||
const groupMentions = useRouteQuery("groupMentions", [], arrayTransformer);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
@@ -69,6 +78,7 @@ const { result: conversationsResult } = useQuery<{
|
||||
loggedPerson: Pick<IPerson, "conversations">;
|
||||
}>(PROFILE_CONVERSATIONS, () => ({
|
||||
page: page.value,
|
||||
limit: CONVERSATIONS_PER_PAGE,
|
||||
}));
|
||||
|
||||
const conversations = computed(
|
||||
@@ -88,7 +98,17 @@ const NewConversation = defineAsyncComponent(
|
||||
const openNewMessageModal = () => {
|
||||
oruga.modal.open({
|
||||
component: NewConversation,
|
||||
props: {
|
||||
personMentions: personMentions.value,
|
||||
groupMentions: groupMentions.value,
|
||||
},
|
||||
trapFocus: true,
|
||||
});
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
if (showModal.value) {
|
||||
openNewMessageModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -14,13 +14,13 @@
|
||||
]"
|
||||
/>
|
||||
<div
|
||||
v-if="conversation.event"
|
||||
class="bg-mbz-yellow p-6 mb-6 rounded flex gap-2 items-center"
|
||||
v-if="conversation.event && !isCurrentActorAuthor"
|
||||
class="bg-mbz-yellow p-6 mb-3 rounded flex gap-2 items-center"
|
||||
>
|
||||
<Calendar :size="36" />
|
||||
<i18n-t
|
||||
tag="p"
|
||||
keypath="This is a announcement from the organizers of event {event}"
|
||||
keypath="This is a announcement from the organizers of event {event}. You can't reply to it, but you can send a private message to event organizers."
|
||||
>
|
||||
<template #event>
|
||||
<b>
|
||||
@@ -35,10 +35,7 @@
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
<div
|
||||
v-if="currentActor && currentActor.id !== conversation.actor?.id"
|
||||
class="bg-mbz-info p-6 rounded flex gap-2 items-center my-3"
|
||||
>
|
||||
<o-notification v-if="isCurrentActorAuthor" variant="info" closable>
|
||||
<i18n-t
|
||||
keypath="You have access to this conversation as a member of the {group} group"
|
||||
tag="p"
|
||||
@@ -55,7 +52,36 @@
|
||||
>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
</o-notification>
|
||||
<o-notification
|
||||
v-else-if="groupParticipants.length > 0 && !conversation.event"
|
||||
variant="info"
|
||||
closable
|
||||
>
|
||||
<p>
|
||||
{{
|
||||
t(
|
||||
"The following participants are groups, which means group members are able to reply to this conversation:"
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<ul class="list-disc">
|
||||
<li
|
||||
v-for="groupParticipant in groupParticipants"
|
||||
:key="groupParticipant.id"
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
name: RouteName.GROUP,
|
||||
params: {
|
||||
preferredUsername: usernameWithDomain(groupParticipant),
|
||||
},
|
||||
}"
|
||||
><b>{{ displayName(groupParticipant) }}</b></router-link
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</o-notification>
|
||||
<o-notification v-if="error" variant="danger">
|
||||
{{ error }}
|
||||
</o-notification>
|
||||
@@ -107,7 +133,7 @@
|
||||
</form>
|
||||
<div
|
||||
v-else-if="conversation.event"
|
||||
class="bg-mbz-yellow p-6 rounded flex gap-2 items-center mt-6"
|
||||
class="bg-mbz-yellow p-6 rounded flex gap-2 items-center mt-3"
|
||||
>
|
||||
<Calendar :size="36" />
|
||||
<i18n-t
|
||||
@@ -239,6 +265,12 @@ const otherParticipants = computed(
|
||||
) ?? []
|
||||
);
|
||||
|
||||
const groupParticipants = computed(() => {
|
||||
return otherParticipants.value.filter(
|
||||
(participant) => participant.type === ActorType.GROUP
|
||||
);
|
||||
});
|
||||
|
||||
const Editor = defineAsyncComponent(
|
||||
() => import("../../components/TextEditor.vue")
|
||||
);
|
||||
@@ -253,8 +285,15 @@ const title = computed(() =>
|
||||
})
|
||||
);
|
||||
|
||||
const isCurrentActorAuthor = computed(
|
||||
() =>
|
||||
currentActor.value &&
|
||||
conversation.value &&
|
||||
currentActor.value.id !== conversation.value?.actor?.id
|
||||
);
|
||||
|
||||
useHead({
|
||||
title: title.value,
|
||||
title: () => title.value,
|
||||
});
|
||||
|
||||
const newComment = ref("");
|
||||
|
||||
@@ -650,12 +650,6 @@ const FullAddressAutoComplete = defineAsyncComponent(
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: computed(() =>
|
||||
props.isUpdate ? t("Event edition") : t("Event creation")
|
||||
),
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
eventId?: undefined | string;
|
||||
@@ -667,6 +661,12 @@ const props = withDefaults(
|
||||
|
||||
const eventId = computed(() => props.eventId);
|
||||
|
||||
useHead({
|
||||
title: computed(() =>
|
||||
props.isUpdate ? t("Event edition") : t("Event creation")
|
||||
),
|
||||
});
|
||||
|
||||
const event = ref<IEditableEvent>(new EventModel());
|
||||
const unmodifiedEvent = ref<IEditableEvent>(new EventModel());
|
||||
|
||||
|
||||
@@ -225,6 +225,7 @@
|
||||
@click="acceptParticipants(checkedRows)"
|
||||
variant="success"
|
||||
:disabled="!canAcceptParticipants"
|
||||
outlined
|
||||
>
|
||||
{{
|
||||
t(
|
||||
@@ -238,6 +239,7 @@
|
||||
@click="refuseParticipants(checkedRows)"
|
||||
variant="danger"
|
||||
:disabled="!canRefuseParticipants"
|
||||
outlined
|
||||
>
|
||||
{{
|
||||
t(
|
||||
|
||||
@@ -266,6 +266,21 @@
|
||||
: t("Deactivate notifications")
|
||||
}}</span>
|
||||
</o-button>
|
||||
<o-button
|
||||
outlined
|
||||
tag="router-link"
|
||||
:to="{
|
||||
name: RouteName.CONVERSATION_LIST,
|
||||
query: {
|
||||
newMessage: 'true',
|
||||
groupMentions: usernameWithDomain(group),
|
||||
},
|
||||
}"
|
||||
icon-left="email"
|
||||
v-if="!isCurrentActorAGroupMember || previewPublic"
|
||||
>
|
||||
{{ t("Contact") }}
|
||||
</o-button>
|
||||
<o-button
|
||||
outlined
|
||||
icon-left="share"
|
||||
|
||||
@@ -5,19 +5,19 @@
|
||||
<div class="-z-10 overflow-hidden">
|
||||
<img
|
||||
alt=""
|
||||
src="../../public/img/shape-1.svg"
|
||||
src="/img/shape-1.svg"
|
||||
class="-z-10 absolute left-[2%] top-36"
|
||||
width="300"
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
src="../../public/img/shape-2.svg"
|
||||
src="/img/shape-2.svg"
|
||||
class="-z-10 absolute left-[50%] top-[5%] -translate-x-2/4 opacity-60"
|
||||
width="800"
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
src="../../public/img/shape-3.svg"
|
||||
src="/img/shape-3.svg"
|
||||
class="-z-10 absolute top-0 right-36"
|
||||
width="200"
|
||||
/>
|
||||
|
||||
@@ -749,7 +749,6 @@ import {
|
||||
useRouteQuery,
|
||||
enumTransformer,
|
||||
booleanTransformer,
|
||||
RouteQueryTransformer,
|
||||
} from "vue-use-route-query";
|
||||
import Calendar from "vue-material-design-icons/Calendar.vue";
|
||||
import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
|
||||
@@ -776,6 +775,7 @@ import lodashSortBy from "lodash/sortBy";
|
||||
import EmptyContent from "@/components/Utils/EmptyContent.vue";
|
||||
import SkeletonGroupResultList from "@/components/Group/SkeletonGroupResultList.vue";
|
||||
import SkeletonEventResultList from "@/components/Event/SkeletonEventResultList.vue";
|
||||
import { arrayTransformer } from "@/utils/route";
|
||||
|
||||
const EventMarkerMap = defineAsyncComponent(
|
||||
() => import("@/components/Search/EventMarkerMap.vue")
|
||||
@@ -840,15 +840,6 @@ enum SortValues {
|
||||
MEMBER_COUNT_DESC = "MEMBER_COUNT_DESC",
|
||||
}
|
||||
|
||||
const arrayTransformer: RouteQueryTransformer<string[]> = {
|
||||
fromQuery(query: string) {
|
||||
return query.split(",");
|
||||
},
|
||||
toQuery(value: string[]) {
|
||||
return value.join(",");
|
||||
},
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
tag?: string;
|
||||
}>();
|
||||
|
||||
Reference in New Issue
Block a user