2020-02-18 07:57:00 +00:00
|
|
|
<template>
|
2022-07-12 08:55:28 +00:00
|
|
|
<section class="container mx-auto">
|
2020-02-18 07:57:00 +00:00
|
|
|
<h1 class="title">{{ $t("My groups") }}</h1>
|
2020-08-31 10:40:30 +00:00
|
|
|
<p>
|
|
|
|
{{
|
|
|
|
$t(
|
|
|
|
"Groups are spaces for coordination and preparation to better organize events and manage your community."
|
|
|
|
)
|
|
|
|
}}
|
|
|
|
</p>
|
2022-07-12 08:55:28 +00:00
|
|
|
<div class="flex my-3" v-if="!hideCreateGroupButton">
|
|
|
|
<o-button
|
|
|
|
tag="router-link"
|
|
|
|
variant="primary"
|
2020-11-30 09:24:11 +00:00
|
|
|
:to="{ name: RouteName.CREATE_GROUP }"
|
2022-07-12 08:55:28 +00:00
|
|
|
>{{ $t("Create group") }}</o-button
|
2020-11-30 09:24:11 +00:00
|
|
|
>
|
2020-09-29 07:53:48 +00:00
|
|
|
</div>
|
2022-07-12 08:55:28 +00:00
|
|
|
<o-loading v-model:active="loading"></o-loading>
|
2022-07-12 08:55:28 +00:00
|
|
|
<InvitationsList
|
2020-08-14 09:32:23 +00:00
|
|
|
:invitations="invitations"
|
2020-10-02 14:19:15 +00:00
|
|
|
@accept-invitation="acceptInvitation"
|
|
|
|
@reject-invitation="rejectInvitation"
|
2020-08-14 09:32:23 +00:00
|
|
|
/>
|
2020-02-18 07:57:00 +00:00
|
|
|
<section v-if="memberships && memberships.length > 0">
|
2020-09-29 07:53:48 +00:00
|
|
|
<GroupMemberCard
|
|
|
|
class="group-member-card"
|
|
|
|
v-for="member in memberships"
|
|
|
|
:key="member.id"
|
|
|
|
:member="member"
|
2022-07-12 08:55:28 +00:00
|
|
|
@leave="leaveGroup({ groupId: member.parent.id })"
|
2020-09-29 07:53:48 +00:00
|
|
|
/>
|
2022-07-12 08:55:28 +00:00
|
|
|
<o-pagination
|
2020-11-06 10:34:32 +00:00
|
|
|
:total="membershipsPages.total"
|
2022-07-12 08:55:28 +00:00
|
|
|
v-show="membershipsPages.total > limit"
|
2020-11-06 10:34:32 +00:00
|
|
|
v-model="page"
|
|
|
|
:per-page="limit"
|
|
|
|
:aria-next-label="$t('Next page')"
|
|
|
|
:aria-previous-label="$t('Previous page')"
|
|
|
|
:aria-page-label="$t('Page')"
|
|
|
|
:aria-current-label="$t('Current page')"
|
|
|
|
>
|
2022-07-12 08:55:28 +00:00
|
|
|
</o-pagination>
|
2020-02-18 07:57:00 +00:00
|
|
|
</section>
|
2020-12-09 18:09:31 +00:00
|
|
|
<section
|
2022-07-12 08:55:28 +00:00
|
|
|
class="text-center not-found"
|
|
|
|
v-if="memberships.length === 0 && !loading"
|
2020-11-30 09:24:11 +00:00
|
|
|
>
|
2022-07-12 08:55:28 +00:00
|
|
|
<div class="">
|
|
|
|
<div class="">
|
2020-12-11 14:27:04 +00:00
|
|
|
<div class="img-container" :class="{ webp: supportsWebPFormat }" />
|
2022-07-12 08:55:28 +00:00
|
|
|
<div class="text-center">
|
2020-12-09 18:09:31 +00:00
|
|
|
<p>
|
|
|
|
{{ $t("You are not part of any group.") }}
|
2022-07-12 08:55:28 +00:00
|
|
|
<i18n-t
|
|
|
|
keypath="Do you wish to {create_group} or {explore_groups}?"
|
|
|
|
>
|
|
|
|
<template #create_group>
|
|
|
|
<o-button
|
|
|
|
tag="router-link"
|
|
|
|
:to="{ name: RouteName.CREATE_GROUP }"
|
|
|
|
>{{ $t("create a group") }}</o-button
|
|
|
|
>
|
|
|
|
</template>
|
|
|
|
<template #explore_groups>
|
|
|
|
<o-button
|
|
|
|
tag="router-link"
|
|
|
|
:to="{ name: RouteName.SEARCH }"
|
|
|
|
>{{ $t("explore the groups") }}</o-button
|
|
|
|
>
|
|
|
|
</template>
|
|
|
|
</i18n-t>
|
2020-12-09 18:09:31 +00:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
2020-02-18 07:57:00 +00:00
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
|
2022-07-12 08:55:28 +00:00
|
|
|
<script lang="ts" setup>
|
2020-02-18 07:57:00 +00:00
|
|
|
import { LOGGED_USER_MEMBERSHIPS } from "@/graphql/actor";
|
2020-09-29 07:53:48 +00:00
|
|
|
import { LEAVE_GROUP } from "@/graphql/group";
|
2020-08-05 12:39:17 +00:00
|
|
|
import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
|
2022-07-12 08:55:28 +00:00
|
|
|
import InvitationsList from "@/components/Group/InvitationsList.vue";
|
|
|
|
import { usernameWithDomain } from "@/types/actor";
|
2020-11-27 18:27:44 +00:00
|
|
|
import { IMember } from "@/types/actor/member.model";
|
|
|
|
import { MemberRole } from "@/types/enums";
|
2020-12-11 14:27:04 +00:00
|
|
|
import { supportsWebPFormat } from "@/utils/support";
|
2020-02-18 07:57:00 +00:00
|
|
|
import RouteName from "../../router/name";
|
2022-07-12 08:55:28 +00:00
|
|
|
import { useRestrictions } from "@/composition/apollo/config";
|
|
|
|
import { useMutation, useQuery } from "@vue/apollo-composable";
|
|
|
|
import { IUser } from "@/types/current-user.model";
|
|
|
|
import { integerTransformer, useRouteQuery } from "vue-use-route-query";
|
|
|
|
import { computed, inject } from "vue";
|
|
|
|
import { useHead } from "@vueuse/head";
|
|
|
|
import { useI18n } from "vue-i18n";
|
|
|
|
import { useRouter } from "vue-router";
|
|
|
|
import { Notifier } from "@/plugins/notifier";
|
|
|
|
|
|
|
|
const page = useRouteQuery("page", 1, integerTransformer);
|
|
|
|
const limit = 10;
|
|
|
|
|
|
|
|
const { result: membershipsResult, loading } = useQuery<{
|
|
|
|
loggedUser: Pick<IUser, "memberships">;
|
|
|
|
}>(LOGGED_USER_MEMBERSHIPS, () => ({
|
|
|
|
page: page.value,
|
|
|
|
limit,
|
|
|
|
}));
|
|
|
|
|
|
|
|
const membershipsPages = computed(
|
|
|
|
() =>
|
|
|
|
membershipsResult.value?.loggedUser?.memberships ?? {
|
|
|
|
total: 0,
|
|
|
|
elements: [],
|
|
|
|
}
|
|
|
|
);
|
2020-02-18 07:57:00 +00:00
|
|
|
|
2022-07-12 08:55:28 +00:00
|
|
|
const { t } = useI18n({ useScope: "global" });
|
2020-08-14 09:32:23 +00:00
|
|
|
|
2022-07-12 08:55:28 +00:00
|
|
|
useHead({
|
|
|
|
title: t("My groups"),
|
|
|
|
});
|
2020-08-14 09:32:23 +00:00
|
|
|
|
2022-07-12 08:55:28 +00:00
|
|
|
const notifier = inject<Notifier>("notifier");
|
2020-09-29 07:53:48 +00:00
|
|
|
|
2022-07-12 08:55:28 +00:00
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
const acceptInvitation = (member: IMember) => {
|
|
|
|
return router.push({
|
|
|
|
name: RouteName.GROUP,
|
|
|
|
params: { preferredUsername: usernameWithDomain(member.parent) },
|
|
|
|
});
|
|
|
|
};
|
2020-02-18 07:57:00 +00:00
|
|
|
|
2022-07-12 08:55:28 +00:00
|
|
|
const rejectInvitation = ({ id: memberId }: { id: string }) => {
|
|
|
|
const index = membershipsPages.value.elements.findIndex(
|
|
|
|
(membership) =>
|
|
|
|
membership.role === MemberRole.INVITED && membership.id === memberId
|
|
|
|
);
|
|
|
|
if (index > -1) {
|
|
|
|
membershipsPages.value.elements.splice(index, 1);
|
|
|
|
membershipsPages.value.total -= 1;
|
2020-02-18 07:57:00 +00:00
|
|
|
}
|
2022-07-12 08:55:28 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const { mutate: leaveGroup, onError: onLeaveGroupError } = useMutation(
|
|
|
|
LEAVE_GROUP,
|
|
|
|
() => ({
|
|
|
|
refetchQueries: [
|
|
|
|
{
|
|
|
|
query: LOGGED_USER_MEMBERSHIPS,
|
|
|
|
variables: {
|
|
|
|
page,
|
|
|
|
limit,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
})
|
|
|
|
);
|
2021-10-06 16:00:50 +00:00
|
|
|
|
2022-07-12 08:55:28 +00:00
|
|
|
onLeaveGroupError((error) => {
|
|
|
|
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
|
|
|
|
notifier?.error(error.graphQLErrors[0].message);
|
2021-10-06 16:00:50 +00:00
|
|
|
}
|
2022-07-12 08:55:28 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const invitations = computed((): IMember[] => {
|
|
|
|
if (!membershipsPages.value) return [];
|
|
|
|
return membershipsPages.value.elements.filter(
|
|
|
|
(member: IMember) => member.role === MemberRole.INVITED
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
const memberships = computed((): IMember[] => {
|
|
|
|
if (!membershipsPages.value) return [];
|
|
|
|
return membershipsPages.value.elements.filter(
|
|
|
|
(member: IMember) =>
|
|
|
|
![MemberRole.INVITED, MemberRole.REJECTED].includes(member.role)
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
const { restrictions } = useRestrictions();
|
|
|
|
|
|
|
|
const hideCreateGroupButton = computed((): boolean => {
|
|
|
|
return restrictions.value?.onlyAdminCanCreateGroups === true;
|
|
|
|
});
|
2020-02-18 07:57:00 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.participation {
|
|
|
|
margin: 1rem auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
section {
|
|
|
|
.upcoming-month {
|
|
|
|
text-transform: capitalize;
|
|
|
|
}
|
|
|
|
}
|
2020-09-29 07:53:48 +00:00
|
|
|
|
|
|
|
.group-member-card {
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
}
|
2020-12-09 18:09:31 +00:00
|
|
|
|
|
|
|
.not-found {
|
|
|
|
.img-container {
|
2022-08-12 14:40:04 +00:00
|
|
|
background-image: url("../../../public/img/pics/group-480w.webp");
|
2020-12-11 14:27:04 +00:00
|
|
|
|
|
|
|
@media (min-resolution: 2dppx) {
|
|
|
|
& {
|
2022-08-12 14:40:04 +00:00
|
|
|
background-image: url("../../../public/img/pics/group-1024w.webp");
|
2020-12-11 14:27:04 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
&.webp {
|
2021-05-06 15:20:54 +00:00
|
|
|
background-image: url("../../../public/img/pics/group-480w.webp");
|
2020-12-11 14:27:04 +00:00
|
|
|
@media (min-resolution: 2dppx) {
|
|
|
|
& {
|
2021-05-06 15:20:54 +00:00
|
|
|
background-image: url("../../../public/img/pics/group-1024w.webp");
|
2020-12-11 14:27:04 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-12-09 18:09:31 +00:00
|
|
|
max-width: 450px;
|
|
|
|
height: 300px;
|
|
|
|
box-shadow: 0 0 8px 8px white inset;
|
|
|
|
background-size: cover;
|
|
|
|
border-radius: 10px;
|
|
|
|
margin: auto auto 1rem;
|
|
|
|
}
|
|
|
|
}
|
2020-02-18 07:57:00 +00:00
|
|
|
</style>
|