hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add global search

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-08-26 16:08:58 +02:00
parent bfc936f57c
commit 48935e2168
216 changed files with 3646 additions and 2806 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
js/src/views/Group/Create.vue → js/src/views/Group/CreateView.vue
View File

@@ -1,6 +1,6 @@
<template>
<section class="container mx-auto">
<h1>{{ $t("Create a new group") }}</h1>
<h1>{{ t("Create a new group") }}</h1>
<o-notification
variant="danger"
@@ -11,7 +11,7 @@
</o-notification>
<form @submit.prevent="createGroup">
<o-field :label="$t('Group display name')" label-for="group-display-name">
<o-field :label="t('Group display name')" label-for="group-display-name">
<o-input
aria-required="true"
required
@@ -22,7 +22,7 @@
<div class="field">
<label class="label" for="group-preferred-username">{{
$t("Federated Group Name")
t("Federated Group Name")
}}</label>
<div class="field-body">
<o-field
@@ -40,7 +40,7 @@
:useHtml5Validation="true"
:validation-message="
group.preferredUsername
? $t(
? t(
'Only alphanumeric lowercased characters and underscores are supported.'
)
: null
@@ -64,7 +64,7 @@
</div>
<o-field
:label="$t('Description')"
:label="t('Description')"
label-for="group-summary"
:message="summaryErrors[0]"
:type="summaryErrors[1]"
@@ -73,26 +73,26 @@
</o-field>
<div>
<b>{{ $t("Avatar") }}</b>
<b>{{ t("Avatar") }}</b>
<picture-upload
:textFallback="$t('Avatar')"
:textFallback="t('Avatar')"
v-model="avatarFile"
:maxSize="avatarMaxSize"
/>
</div>
<div>
<b>{{ $t("Banner") }}</b>
<b>{{ t("Banner") }}</b>
<picture-upload
:textFallback="$t('Banner')"
:textFallback="t('Banner')"
v-model="bannerFile"
:maxSize="bannerMaxSize"
/>
</div>
<button class="button is-primary" native-type="submit">
{{ $t("Create my group") }}
</button>
<o-button variant="primary" native-type="submit">
{{ t("Create my group") }}
</o-button>
</form>
</section>
</template>
@@ -105,7 +105,6 @@ import PictureUpload from "../../components/PictureUpload.vue";
import { ErrorResponse } from "@/types/errors.model";
import { ServerParseError } from "@apollo/client/link/http";
import { useCurrentActorClient } from "@/composition/apollo/actor";
import { useUploadLimits } from "@/composition/apollo/config";
import { computed, inject, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
@@ -116,9 +115,9 @@ import {
useHost,
} from "@/composition/config";
import { Notifier } from "@/plugins/notifier";
import { useHead } from "@vueuse/head";
const { currentActor } = useCurrentActorClient();
const { uploadLimits } = useUploadLimits();
const { t } = useI18n({ useScope: "global" });
@@ -146,34 +145,14 @@ const bannerMaxSize = useBannerMaxSize();
const notifier = inject<Notifier>("notifier");
const createGroup = async (): Promise<void> => {
errors.value = [];
fieldErrors.preferred_username = undefined;
fieldErrors.summary = undefined;
const variables = buildVariables();
const { onDone, onError } = useCreateGroup(variables);
watch(
() => group.value.name,
(newGroupName) => {
group.value.preferredUsername = convertToUsername(newGroupName);
}
);
onDone(() => {
notifier?.success(
t("Group {displayName} created", {
displayName: displayName(group),
})
);
router.push({
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(group.value) },
});
});
onError((err) => handleError(err as unknown as ErrorResponse));
};
watch(group, (newGroup) => {
group.value.preferredUsername = convertToUsername(newGroup.name);
});
const buildVariables = () => {
const buildVariables = computed(() => {
let avatarObj = {};
let bannerObj = {};
@@ -212,7 +191,7 @@ const buildVariables = () => {
...avatarObj,
...bannerObj,
};
};
});
const handleError = (err: ErrorResponse) => {
if (err?.networkError?.name === "ServerParseError") {
@@ -241,7 +220,7 @@ const handleError = (err: ErrorResponse) => {
const summaryErrors = computed(() => {
const message = fieldErrors.summary ? fieldErrors.summary : undefined;
const type = fieldErrors.summary ? "is-danger" : undefined;
const type = fieldErrors.summary ? "danger" : undefined;
return [message, type];
});
@@ -251,9 +230,33 @@ const preferredUsernameErrors = computed(() => {
: t(
"Only alphanumeric lowercased characters and underscores are supported."
);
const type = fieldErrors.preferred_username ? "is-danger" : undefined;
const type = fieldErrors.preferred_username ? "danger" : undefined;
return [message, type];
});
const { onDone, onError, mutate } = useCreateGroup();
onDone(() => {
notifier?.success(
t("Group {displayName} created", {
displayName: displayName(group.value),
})
);
router.push({
name: RouteName.GROUP,
params: { preferredUsername: usernameWithDomain(group.value) },
});
});
onError((err) => handleError(err as unknown as ErrorResponse));
const createGroup = async (): Promise<void> => {
errors.value = [];
fieldErrors.preferred_username = undefined;
fieldErrors.summary = undefined;
mutate(buildVariables.value);
};
</script>
<style>

81
js/src/views/Group/GroupMembers.vue
View File

@@ -25,6 +25,7 @@
class="container mx-auto section"
v-if="group && isCurrentActorAGroupAdmin"
>
<h1>{{ t("Group Members") }} ({{ group.members.total }})</h1>
<form @submit.prevent="inviteMember">
<o-field
:label="t('Invite a new member')"
@@ -54,14 +55,14 @@
</o-field>
</o-field>
</form>
<h1>{{ t("Group Members") }} ({{ group.members.total }})</h1>
<o-field
class="my-2"
:label="t('Status')"
horizontal
label-for="group-members-status-filter"
>
<o-select v-model="roles" id="group-members-status-filter">
<option value="">
<option :value="undefined">
{{ t("Everything") }}
</option>
<option :value="MemberRole.ADMINISTRATOR">
@@ -103,7 +104,7 @@
:default-sort-direction="'desc'"
:default-sort="['insertedAt', 'desc']"
@page-change="loadMoreMembers"
@sort="(field, order) => $emit('sort', field, order)"
@sort="(field: string, order: string) => emit('sort', field, order)"
>
<o-table-column
field="actor.preferredUsername"
@@ -123,7 +124,7 @@
<AccountCircle v-else :size="48" />
<div class="">
<div class="">
<div class="text-start">
<span v-if="props.row.actor.name">{{
props.row.actor.name
}}</span
@@ -134,39 +135,39 @@
</article>
</o-table-column>
<o-table-column field="role" :label="t('Role')" v-slot="props">
<b-tag
<tag
variant="info"
v-if="props.row.role === MemberRole.ADMINISTRATOR"
>
{{ t("Administrator") }}
</b-tag>
<b-tag
</tag>
<tag
variant="info"
v-else-if="props.row.role === MemberRole.MODERATOR"
>
{{ t("Moderator") }}
</b-tag>
<b-tag v-else-if="props.row.role === MemberRole.MEMBER">
</tag>
<tag v-else-if="props.row.role === MemberRole.MEMBER">
{{ t("Member") }}
</b-tag>
<b-tag
</tag>
<tag
variant="warning"
v-else-if="props.row.role === MemberRole.NOT_APPROVED"
>
{{ t("Not approved") }}
</b-tag>
<b-tag
</tag>
<tag
variant="danger"
v-else-if="props.row.role === MemberRole.REJECTED"
>
{{ t("Rejected") }}
</b-tag>
<b-tag
</tag>
<tag
variant="warning"
v-else-if="props.row.role === MemberRole.INVITED"
>
{{ t("Invited") }}
</b-tag>
</tag>
</o-table-column>
<o-table-column field="insertedAt" :label="t('Date')" v-slot="props">
<span class="has-text-centered">
@@ -253,13 +254,12 @@ import EmptyContent from "@/components/Utils/EmptyContent.vue";
import { useHead } from "@vueuse/head";
import { useI18n } from "vue-i18n";
import { useMutation, useQuery } from "@vue/apollo-composable";
import { computed, inject, ref, watch } from "vue";
import { computed, inject, ref } from "vue";
import {
enumTransformer,
integerTransformer,
useRouteQuery,
} from "vue-use-route-query";
import { useRoute, useRouter } from "vue-router";
import {
useCurrentActorClient,
usePersonStatusGroup,
@@ -267,6 +267,7 @@ import {
import { formatTimeString, formatDateString } from "@/filters/datetime";
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
import { Notifier } from "@/plugins/notifier";
import Tag from "@/components/Tag.vue";
const { t } = useI18n({ useScope: "global" });
@@ -276,9 +277,10 @@ useHead({
const props = defineProps<{ preferredUsername: string }>();
const emit = defineEmits(["sort"]);
const { currentActor } = useCurrentActorClient();
const loading = ref(true);
const newMemberUsername = ref("");
const inviteError = ref("");
const page = useRouteQuery("page", 1, integerTransformer);
@@ -339,9 +341,6 @@ const inviteMember = async (): Promise<void> => {
});
};
const router = useRouter();
const route = useRoute();
const loadMoreMembers = async (): Promise<void> => {
await fetchMoreGroupMembers({
// New variables
@@ -368,13 +367,13 @@ const {
],
}));
onRemoveMemberDone(() => {
onRemoveMemberDone(({ context }) => {
let message = t("The member was removed from the group {group}", {
group: displayName(group.value),
}) as string;
if (oldMember.role === MemberRole.NOT_APPROVED) {
if (context?.oldMember.role === MemberRole.NOT_APPROVED) {
message = t("The membership request from {profile} was rejected", {
group: displayName(oldMember.actor),
group: displayName(context?.oldMember.actor),
}) as string;
}
notifier?.success(message);
@@ -388,10 +387,15 @@ onRemoveMemberError((error) => {
});
const removeMember = (oldMember: IMember) => {
mutateRemoveMember({
groupId: group.value?.id,
memberId: oldMember.id,
});
mutateRemoveMember(
{
groupId: group.value?.id,
memberId: oldMember.id,
},
{
context: { oldMember },
}
);
};
const promoteMember = (member: IMember): void => {
@@ -465,7 +469,7 @@ onUpdateMutationDone(({ data, context }) => {
successMessage = "The member role was updated to administrator";
break;
case MemberRole.MEMBER:
if (oldMember.role === MemberRole.NOT_APPROVED) {
if (context?.oldMember.role === MemberRole.NOT_APPROVED) {
successMessage = "The member was approved";
} else {
successMessage = "The member role was updated to simple member";
@@ -488,11 +492,14 @@ const updateMember = async (
oldMember: IMember,
role: MemberRole
): Promise<void> => {
updateMemberMutation({
memberId: oldMember.id as string,
role,
oldRole: oldMember.role,
});
updateMemberMutation(
{
memberId: oldMember.id as string,
role,
oldRole: oldMember.role,
},
{ context: { oldMember } }
);
};
const isCurrentActorAGroupAdmin = computed((): boolean => {
@@ -500,10 +507,10 @@ const isCurrentActorAGroupAdmin = computed((): boolean => {
});
const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
const rolesToConsider = Array.isArray(givenRole) ? givenRole : [givenRole];
return (
personMemberships.value?.total > 0 &&
roles.includes(personMemberships.value?.elements[0].role)
rolesToConsider.includes(personMemberships.value?.elements[0].role)
);
};

157
js/src/views/Group/GroupSettings.vue
View File

@@ -11,60 +11,60 @@
{
name: RouteName.GROUP_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
text: $t('Settings'),
text: t('Settings'),
},
{
name: RouteName.GROUP_PUBLIC_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
text: $t('Group settings'),
text: t('Group settings'),
},
]"
/>
<o-loading :active="loading" />
<section
class="container mx-auto section"
class="container mx-auto mb-6"
v-if="group && isCurrentActorAGroupAdmin"
>
<form @submit.prevent="updateGroup">
<o-field :label="$t('Group name')" label-for="group-settings-name">
<form @submit.prevent="updateGroup(buildVariables)" v-if="editableGroup">
<o-field :label="t('Group name')" label-for="group-settings-name">
<o-input v-model="editableGroup.name" id="group-settings-name" />
</o-field>
<o-field :label="$t('Group short description')">
<o-field :label="t('Group short description')">
<Editor
mode="basic"
v-model="editableGroup.summary"
:maxSize="500"
:aria-label="$t('Group description body')"
:aria-label="t('Group description body')"
v-if="currentActor"
:currentActor="currentActor"
/></o-field>
<o-field :label="$t('Avatar')">
<o-field :label="t('Avatar')">
<picture-upload
:textFallback="$t('Avatar')"
:textFallback="t('Avatar')"
v-model="avatarFile"
:defaultImage="group.avatar"
:maxSize="avatarMaxSize"
/>
</o-field>
<o-field :label="$t('Banner')">
<o-field :label="t('Banner')">
<picture-upload
:textFallback="$t('Banner')"
:textFallback="t('Banner')"
v-model="bannerFile"
:defaultImage="group.banner"
:maxSize="bannerMaxSize"
/>
</o-field>
<p class="label">{{ $t("Group visibility") }}</p>
<p class="label">{{ t("Group visibility") }}</p>
<div class="field">
<o-radio
v-model="editableGroup.visibility"
name="groupVisibility"
:native-value="GroupVisibility.PUBLIC"
>
{{ $t("Visible everywhere on the web") }}<br />
{{ t("Visible everywhere on the web") }}<br />
<small>{{
$t(
t(
"The group will be publicly listed in search results and may be suggested in the explore section. Only public informations will be shown on it's page."
)
}}</small>
@@ -75,9 +75,9 @@
v-model="editableGroup.visibility"
name="groupVisibility"
:native-value="GroupVisibility.UNLISTED"
>{{ $t("Only accessible through link") }}<br />
>{{ t("Only accessible through link") }}<br />
<small>{{
$t(
t(
"You'll need to transmit the group URL so people may access the group's profile. The group won't be findable in Mobilizon's search or regular search engines."
)
}}</small>
@@ -86,7 +86,7 @@
<code>{{ group.url }}</code>
<o-tooltip
v-if="canShowCopyButton"
:label="$t('URL copied to clipboard')"
:label="t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
variant="success"
@@ -103,16 +103,16 @@
</p>
</div>
<p class="label">{{ $t("New members") }}</p>
<p class="label">{{ t("New members") }}</p>
<div class="field">
<o-radio
v-model="editableGroup.openness"
name="groupOpenness"
:native-value="Openness.OPEN"
>
{{ $t("Anyone can join freely") }}<br />
{{ t("Anyone can join freely") }}<br />
<small>{{
$t(
t(
"Anyone wanting to be a member from your group will be able to from your group page."
)
}}</small>
@@ -123,9 +123,9 @@
v-model="editableGroup.openness"
name="groupOpenness"
:native-value="Openness.MODERATED"
>{{ $t("Moderate new members") }}<br />
>{{ t("Moderate new members") }}<br />
<small>{{
$t(
t(
"Anyone can request being a member, but an administrator needs to approve the membership."
)
}}</small>
@@ -136,9 +136,9 @@
v-model="editableGroup.openness"
name="groupOpenness"
:native-value="Openness.INVITE_ONLY"
>{{ $t("Manually invite new members") }}<br />
>{{ t("Manually invite new members") }}<br />
<small>{{
$t(
t(
"The only way for your group to get new members is if an admininistrator invites them."
)
}}</small>
@@ -146,26 +146,26 @@
</div>
<o-field
:label="$t('Followers')"
:message="$t('Followers will receive new public events and posts.')"
:label="t('Followers')"
:message="t('Followers will receive new public events and posts.')"
>
<o-checkbox v-model="editableGroup.manuallyApprovesFollowers">
{{ $t("Manually approve new followers") }}
{{ t("Manually approve new followers") }}
</o-checkbox>
</o-field>
<full-address-auto-complete
:label="$t('Group address')"
:label="t('Group address')"
v-model="currentAddress"
:hideMap="true"
/>
<div class="flex flex-wrap gap-2 my-2">
<o-button native-type="submit" variant="primary">{{
$t("Update group")
t("Update group")
}}</o-button>
<o-button @click="confirmDeleteGroup" variant="danger">{{
$t("Delete group")
t("Delete group")
}}</o-button>
</div>
</form>
@@ -178,7 +178,7 @@
</o-notification>
</section>
<o-notification v-else-if="!loading">
{{ $t("You are not an administrator for this group.") }}
{{ t("You are not an administrator for this group.") }}
</o-notification>
</div>
</template>
@@ -187,7 +187,7 @@
import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
import PictureUpload from "@/components/PictureUpload.vue";
import { GroupVisibility, MemberRole, Openness } from "@/types/enums";
import { Group, IGroup, usernameWithDomain, displayName } from "@/types/actor";
import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
import { Address, IAddress } from "@/types/address.model";
import { ServerParseError } from "@apollo/client/link/http";
import { ErrorResponse } from "@apollo/client/link/error";
@@ -208,13 +208,19 @@ import { Dialog } from "@/plugins/dialog";
import { useHead } from "@vueuse/head";
import { Notifier } from "@/plugins/notifier";
const Editor = defineAsyncComponent(() => import("@/components/Editor.vue"));
const Editor = defineAsyncComponent(
() => import("@/components/TextEditor.vue")
);
const props = defineProps<{ preferredUsername: string }>();
const { currentActor } = useCurrentActorClient();
const { group, loading } = useGroup(props.preferredUsername);
const {
group,
loading,
onResult: onGroupResult,
} = useGroup(props.preferredUsername);
const { t } = useI18n({ useScope: "global" });
@@ -231,20 +237,17 @@ const errors = ref<string[]>([]);
const showCopiedTooltip = ref(false);
const editableGroup = ref<IGroup>(new Group());
const editableGroup = ref<IGroup>();
const updateGroup = async (): Promise<void> => {
const variables = buildVariables();
const { onDone, onError } = useUpdateGroup(variables);
const { onDone, onError, mutate: updateGroup } = useUpdateGroup();
onDone(() => {
notifier?.success(t("Group settings saved") as string);
});
onDone(() => {
notifier?.success(t("Group settings saved"));
});
onError((err) => {
handleError(err as unknown as ErrorResponse);
});
};
onError((err) => {
handleError(err as unknown as ErrorResponse);
});
const copyURL = async (): Promise<void> => {
await window.navigator.clipboard.writeText(group.value?.url ?? "");
@@ -254,28 +257,40 @@ const copyURL = async (): Promise<void> => {
}, 2000);
};
watch(group, async (oldGroup: IGroup, newGroup: IGroup) => {
try {
if (
oldGroup?.avatar !== undefined &&
oldGroup?.avatar !== newGroup?.avatar
) {
avatarFile.value = await buildFileFromIMedia(group.value?.avatar);
}
if (
oldGroup?.banner !== undefined &&
oldGroup?.banner !== newGroup?.banner
) {
bannerFile.value = await buildFileFromIMedia(group.value?.banner);
}
} catch (e) {
// Catch errors while building media
console.error(e);
}
editableGroup.value = { ...group.value };
onGroupResult(({ data }) => {
editableGroup.value = data.group;
});
const buildVariables = () => {
watch(
group,
async (newGroup: IGroup, oldGroup: IGroup) => {
console.debug("watching group");
if (!newGroup) return;
try {
if (
oldGroup?.avatar !== undefined &&
oldGroup?.avatar !== newGroup?.avatar
) {
avatarFile.value = await buildFileFromIMedia(newGroup?.avatar);
}
if (
oldGroup?.banner !== undefined &&
oldGroup?.banner !== newGroup?.banner
) {
bannerFile.value = await buildFileFromIMedia(newGroup?.banner);
}
} catch (e) {
// Catch errors while building media
console.error(e);
}
editableGroup.value = { ...newGroup };
},
{
immediate: true,
}
);
const buildVariables = computed(() => {
let avatarObj = {};
let bannerObj = {};
const variables = { ...editableGroup.value };
@@ -309,7 +324,7 @@ const buildVariables = () => {
media: {
name: avatarFile.value?.name,
alt: `${editableGroup.value?.preferredUsername}'s avatar`,
file: avatarFile,
file: avatarFile.value,
},
},
};
@@ -321,13 +336,13 @@ const buildVariables = () => {
media: {
name: bannerFile.value?.name,
alt: `${editableGroup.value?.preferredUsername}'s banner`,
file: bannerFile,
file: bannerFile.value,
},
},
};
}
return {
id: group.value?.id,
id: group.value?.id ?? "",
name: editableGroup.value?.name,
summary: editableGroup.value?.summary,
visibility: editableGroup.value?.visibility,
@@ -337,7 +352,7 @@ const buildVariables = () => {
...avatarObj,
...bannerObj,
};
};
});
const canShowCopyButton = computed((): boolean => {
return window.isSecureContext;
@@ -348,7 +363,9 @@ const currentAddress = computed({
return new Address(editableGroup.value?.physicalAddress);
},
set(address: IAddress) {
editableGroup.value.physicalAddress = address;
if (editableGroup.value) {
editableGroup.value.physicalAddress = address;
}
},
});

85
js/src/views/Group/Group.vue → js/src/views/Group/GroupView.vue
View File

@@ -21,7 +21,7 @@
<div class="flex self-center h-0 mt-4 items-end">
<figure class="" v-if="group.avatar">
<img
class="rounded-full border"
class="rounded-full border h-32 w-32"
:src="group.avatar.url"
alt=""
width="128"
@@ -382,7 +382,7 @@
</header>
</div>
<div
v-if="isCurrentActorAGroupMember && !previewPublic"
v-if="isCurrentActorAGroupMember && !previewPublic && group"
class="block-container flex gap-2 flex-wrap mt-3"
>
<!-- Private things -->
@@ -419,14 +419,20 @@
<aside class="group-metadata">
<div class="sticky">
<o-notification v-if="group.domain && !isCurrentActorAGroupMember">
{{
t(
"This profile is from another instance, the informations shown here may be incomplete."
)
}}
<a :href="group.url" rel="noopener noreferrer external">{{
t("View full profile")
}}</a>
<p>
{{
t(
"This profile is from another instance, the informations shown here may be incomplete."
)
}}
</p>
<o-button
variant="text"
tag="a"
:href="group.url"
rel="noopener noreferrer external"
>{{ t("View full profile") }}</o-button
>
</o-notification>
<event-metadata-block
:title="t('About')"
@@ -480,7 +486,7 @@
</div>
<o-button
class="map-show-button"
type="is-text"
variant="text"
@click="showMap = !showMap"
@keyup.enter="showMap = !showMap"
v-if="physicalAddress.geom"
@@ -528,7 +534,7 @@
<o-button
tag="router-link"
class="my-2 self-center"
type="is-text"
variant="text"
:to="{
name: RouteName.GROUP_EVENTS,
params: { preferredUsername: usernameWithDomain(group) },
@@ -543,7 +549,7 @@
<o-button
tag="router-link"
class="my-4"
type="is-text"
variant="text"
v-if="organizedEvents.total > 0"
:to="{
name: RouteName.GROUP_EVENTS,
@@ -579,7 +585,7 @@
class="self-center my-2"
v-if="posts.total > 0"
tag="router-link"
type="is-text"
variant="text"
:to="{
name: RouteName.POSTS,
params: { preferredUsername: usernameWithDomain(group) },
@@ -606,6 +612,7 @@
</div>
<o-modal v-if="group" v-model:active="isReportModalActive">
<report-modal
ref="reportModalRef"
:on-confirm="reportGroup"
:title="t('Report this group')"
:outside-domain="group.domain"
@@ -637,7 +644,7 @@ import { JOIN_GROUP } from "@/graphql/member";
import { MemberRole, Openness, PostVisibility } from "@/types/enums";
import { IMember } from "@/types/actor/member.model";
import RouteName from "../../router/name";
import ReportModal from "../../components/Report/ReportModal.vue";
import ReportModal from "@/components/Report/ReportModal.vue";
import {
GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
PERSON_STATUS_GROUP,
@@ -648,11 +655,7 @@ import EmptyContent from "../../components/Utils/EmptyContent.vue";
import { Paginate } from "@/types/paginate";
import { IEvent } from "@/types/event.model";
import { IPost } from "@/types/post.model";
import {
FOLLOW_GROUP,
UNFOLLOW_GROUP,
UPDATE_GROUP_FOLLOW,
} from "@/graphql/followers";
import { FOLLOW_GROUP, UPDATE_GROUP_FOLLOW } from "@/graphql/followers";
import { useAnonymousReportsConfig } from "../../composition/apollo/config";
import { computed, defineAsyncComponent, inject, ref, watch } from "vue";
import { useCurrentActorClient } from "@/composition/apollo/actor";
@@ -670,10 +673,10 @@ import AccountMultiplePlus from "vue-material-design-icons/AccountMultiplePlus.v
import { useI18n } from "vue-i18n";
import { useCreateReport } from "@/composition/apollo/report";
import { useHead } from "@vueuse/head";
import Discussions from "@/components/Group/Sections/Discussions.vue";
import Resources from "@/components/Group/Sections/Resources.vue";
import Posts from "@/components/Group/Sections/Posts.vue";
import Events from "@/components/Group/Sections/Events.vue";
import Discussions from "@/components/Group/Sections/DiscussionsSection.vue";
import Resources from "@/components/Group/Sections/ResourcesSection.vue";
import Posts from "@/components/Group/Sections/PostsSection.vue";
import Events from "@/components/Group/Sections/EventsSection.vue";
import { Dialog } from "@/plugins/dialog";
import { Notifier } from "@/plugins/notifier";
@@ -718,28 +721,32 @@ subscribeToMore<{ actorId: string; group: string }>({
const person = computed(() => result.value?.person);
const MapLeaflet = defineAsyncComponent(
() => import("../../components/Map.vue")
() => import("@/components/LeafletMap.vue")
);
const ShareGroupModal = defineAsyncComponent(
() => import("../../components/Group/ShareGroupModal.vue")
() => import("@/components/Group/ShareGroupModal.vue")
);
const showMap = ref(false);
const isReportModalActive = ref(false);
const reportModalRef = ref();
const isShareModalActive = ref(false);
const previewPublic = ref(false);
const notifier = inject<Notifier>("notifier");
watch(currentActor, (watchedCurrentActor: IActor, oldActor: IActor) => {
if (
watchedCurrentActor.id &&
oldActor &&
watchedCurrentActor.id !== oldActor.id
) {
refetchGroup();
watch(
currentActor,
(watchedCurrentActor: IActor | undefined, oldActor: IActor | undefined) => {
if (
watchedCurrentActor?.id &&
oldActor &&
watchedCurrentActor?.id !== oldActor.id
) {
refetchGroup();
}
}
});
);
const { mutate: joinGroupMutation, onError: onJoinGroupError } =
useMutation(JOIN_GROUP);
@@ -785,7 +792,7 @@ const dialog = inject<Dialog>("dialog");
const openLeaveGroupModal = async (): Promise<void> => {
dialog?.confirm({
type: "danger",
variant: "danger",
title: t("Leave group"),
message: t(
"Are you sure you want to leave the group {groupName}? You'll loose access to this group's private content. This action cannot be undone.",
@@ -902,7 +909,7 @@ const toggleFollowNotify = () => {
const reportGroup = async (content: string, forward: boolean) => {
isReportModalActive.value = false;
reportModal.value.close();
reportModalRef.value.close();
const {
mutate: createReportMutation,
@@ -937,8 +944,8 @@ const triggerShare = (): void => {
title: displayName(group.value),
url: group.value?.url,
})
.then(() => console.log("Successful share"))
.catch((error: any) => console.log("Error sharing", error));
.then(() => console.debug("Successful share"))
.catch((error: any) => console.debug("Error sharing", error));
} else {
isShareModalActive.value = true;
// send popup
@@ -1100,7 +1107,7 @@ const isCurrentActorAPendingGroupMember = computed((): boolean => {
});
const currentActorFollow = computed((): IFollower | undefined => {
if (person?.value && person?.value?.follows?.total > 0) {
if (person?.value?.follows?.total && person?.value?.follows?.total > 0) {
return person?.value?.follows?.elements[0];
}
return undefined;

2
js/src/views/Group/Settings.vue → js/src/views/Group/SettingsView.vue
View File

@@ -2,7 +2,7 @@
<div class="container mx-auto">
<h1 class="">{{ t("Settings") }}</h1>
<div class="flex flex-wrap gap-2">
<aside class="max-w-xs flex-1">
<aside class="sm:max-w-xs flex-1 min-w-[320px]">
<ul>
<SettingMenuSection
:title="t('Settings')"

65
js/src/views/Group/Timeline.vue → js/src/views/Group/TimelineView.vue
View File

@@ -11,7 +11,7 @@
{
name: RouteName.TIMELINE,
params: { preferredUsername: usernameWithDomain(group) },
text: $t('Activity'),
text: t('Activity'),
},
]"
/>
@@ -20,51 +20,51 @@
<o-field>
<o-radio v-model="activityType" :native-value="undefined">
<TimelineText />
{{ $t("All activities") }}</o-radio
{{ t("All activities") }}</o-radio
>
<o-radio v-model="activityType" :native-value="ActivityType.MEMBER">
<o-icon icon="account-multiple-plus"></o-icon>
{{ $t("Members") }}</o-radio
{{ t("Members") }}</o-radio
>
<o-radio v-model="activityType" :native-value="ActivityType.GROUP">
<o-icon icon="cog"></o-icon>
{{ $t("Settings") }}</o-radio
{{ t("Settings") }}</o-radio
>
<o-radio v-model="activityType" :native-value="ActivityType.EVENT">
<o-icon icon="calendar"></o-icon>
{{ $t("Events") }}</o-radio
{{ t("Events") }}</o-radio
>
<o-radio v-model="activityType" :native-value="ActivityType.POST">
<o-icon icon="bullhorn"></o-icon>
{{ $t("Posts") }}</o-radio
{{ t("Posts") }}</o-radio
>
<o-radio v-model="activityType" :native-value="ActivityType.DISCUSSION">
<o-icon icon="chat"></o-icon>
{{ $t("Discussions") }}</o-radio
{{ t("Discussions") }}</o-radio
>
<o-radio v-model="activityType" :native-value="ActivityType.RESOURCE">
<o-icon icon="link"></o-icon>
{{ $t("Resources") }}</o-radio
{{ t("Resources") }}</o-radio
>
</o-field>
<o-field>
<o-radio v-model="activityAuthor" :native-value="undefined">
<TimelineText />
{{ $t("All activities") }}</o-radio
{{ t("All activities") }}</o-radio
>
<o-radio
v-model="activityAuthor"
:native-value="ActivityAuthorFilter.SELF"
>
<o-icon icon="account"></o-icon>
{{ $t("From yourself") }}</o-radio
{{ t("From yourself") }}</o-radio
>
<o-radio
v-model="activityAuthor"
:native-value="ActivityAuthorFilter.BY"
>
<o-icon icon="account-multiple"></o-icon>
{{ $t("By others") }}</o-radio
{{ t("By others") }}</o-radio
>
</o-field>
<transition-group name="timeline-list" tag="div">
@@ -78,25 +78,20 @@
width="300px"
height="48px"
/>
<h2 class="is-size-3 has-text-weight-bold" v-else-if="isToday(date)">
<h2 v-else-if="isToday(date)">
<span v-tooltip="formatDateString(date)">
{{ $t("Today") }}
{{ t("Today") }}
</span>
</h2>
<h2
class="is-size-3 has-text-weight-bold"
v-else-if="isYesterday(date)"
>
<span v-tooltip="formatDateString(date)">{{
$t("Yesterday")
}}</span>
<h2 v-else-if="isYesterday(date)">
<span v-tooltip="formatDateString(date)">{{ t("Yesterday") }}</span>
</h2>
<h2 v-else class="is-size-3 has-text-weight-bold">
<h2 v-else>
{{ formatDateString(date) }}
</h2>
<ul>
<li v-for="activityItem in activityItems" :key="activityItem.id">
<skeleton-activity-item v-if="activityItem.skeleton" />
<skeleton-activity-item v-if="activityItem.type === 'skeleton'" />
<component
v-else
:is="component(activityItem.type)"
@@ -113,14 +108,14 @@
activity.elements.length >= activity.total
"
>
{{ $t("No more activity to display.") }}
{{ t("No more activity to display.") }}
</empty-content>
<empty-content
v-if="!loading && activity.total === 0"
icon="timeline-text"
>
{{
$t(
t(
"There is no activity yet. Start doing some things to see activity appear here."
)
}}
@@ -129,7 +124,7 @@
<o-button
v-if="activity.elements.length < activity.total"
@click="loadMore"
>{{ $t("Load more activities") }}</o-button
>{{ t("Load more activities") }}</o-button
>
</section>
</div>
@@ -154,14 +149,16 @@ import { formatDateString } from "@/filters/datetime";
const PAGINATION_LIMIT = 25;
const SKELETON_DAY_ITEMS = 2;
const SKELETON_ITEMS_PER_DAY = 5;
type IActivitySkeleton = IActivity | { skeleton: string };
type IActivitySkeleton =
| IActivity
| { skeleton: string; id: string; type: "skeleton" };
enum ActivityAuthorFilter {
SELF = "SELF",
BY = "BY",
}
type ActivityFilter = ActivityType | ActivityAuthorFilter | null;
// type ActivityFilter = ActivityType | ActivityAuthorFilter | null;
const props = defineProps<{ preferredUsername: string }>();
@@ -230,12 +227,12 @@ const activity = computed((): Paginate<IActivitySkeleton> => {
total: 0,
elements: skeletons.value.map((skeleton) => ({
skeleton,
id: skeleton,
type: "skeleton",
})),
};
});
const limit = PAGINATION_LIMIT;
const component = (type: ActivityType): any | undefined => {
switch (type) {
case ActivityType.EVENT:
@@ -309,11 +306,11 @@ const activities = computed((): Record<string, IActivitySkeleton[]> => {
const isIActivity = (object: IActivitySkeleton): object is IActivity => {
return !("skeleton" in object);
};
const getRandomInt = (min: number, max: number): number => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
};
// const getRandomInt = (min: number, max: number): number => {
// min = Math.ceil(min);
// max = Math.floor(max);
// return Math.floor(Math.random() * (max - min) + min);
// };
const isToday = (dateString: string): boolean => {
const now = new Date();