Migrate to Vue 3 and Vite
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -20,42 +20,44 @@
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<b-loading :active="$apollo.loading" />
|
||||
<o-loading :active="loading" />
|
||||
<section
|
||||
class="container section"
|
||||
class="container mx-auto section"
|
||||
v-if="group && isCurrentActorAGroupAdmin"
|
||||
>
|
||||
<form @submit.prevent="updateGroup">
|
||||
<b-field :label="$t('Group name')" label-for="group-settings-name">
|
||||
<b-input v-model="editableGroup.name" id="group-settings-name" />
|
||||
</b-field>
|
||||
<b-field :label="$t('Group short description')">
|
||||
<editor
|
||||
<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')">
|
||||
<Editor
|
||||
mode="basic"
|
||||
v-model="editableGroup.summary"
|
||||
:maxSize="500"
|
||||
:aria-label="$t('Group description body')"
|
||||
/></b-field>
|
||||
<b-field :label="$t('Avatar')">
|
||||
v-if="currentActor"
|
||||
:currentActor="currentActor"
|
||||
/></o-field>
|
||||
<o-field :label="$t('Avatar')">
|
||||
<picture-upload
|
||||
:textFallback="$t('Avatar')"
|
||||
v-model="avatarFile"
|
||||
:defaultImage="group.avatar"
|
||||
:maxSize="avatarMaxSize"
|
||||
/>
|
||||
</b-field>
|
||||
</o-field>
|
||||
|
||||
<b-field :label="$t('Banner')">
|
||||
<o-field :label="$t('Banner')">
|
||||
<picture-upload
|
||||
:textFallback="$t('Banner')"
|
||||
v-model="bannerFile"
|
||||
:defaultImage="group.banner"
|
||||
:maxSize="bannerMaxSize"
|
||||
/>
|
||||
</b-field>
|
||||
</o-field>
|
||||
<p class="label">{{ $t("Group visibility") }}</p>
|
||||
<div class="field">
|
||||
<b-radio
|
||||
<o-radio
|
||||
v-model="editableGroup.visibility"
|
||||
name="groupVisibility"
|
||||
:native-value="GroupVisibility.PUBLIC"
|
||||
@@ -66,10 +68,10 @@
|
||||
"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>
|
||||
</b-radio>
|
||||
</o-radio>
|
||||
</div>
|
||||
<div class="field">
|
||||
<b-radio
|
||||
<o-radio
|
||||
v-model="editableGroup.visibility"
|
||||
name="groupVisibility"
|
||||
:native-value="GroupVisibility.UNLISTED"
|
||||
@@ -79,31 +81,31 @@
|
||||
"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>
|
||||
</b-radio>
|
||||
<p class="control">
|
||||
</o-radio>
|
||||
<p class="pl-6">
|
||||
<code>{{ group.url }}</code>
|
||||
<b-tooltip
|
||||
<o-tooltip
|
||||
v-if="canShowCopyButton"
|
||||
:label="$t('URL copied to clipboard')"
|
||||
:active="showCopiedTooltip"
|
||||
always
|
||||
type="is-success"
|
||||
position="is-left"
|
||||
variant="success"
|
||||
position="left"
|
||||
>
|
||||
<b-button
|
||||
type="is-primary"
|
||||
<o-button
|
||||
variant="primary"
|
||||
icon-right="content-paste"
|
||||
native-type="button"
|
||||
@click="copyURL"
|
||||
@keyup.enter="copyURL"
|
||||
/>
|
||||
</b-tooltip>
|
||||
</o-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="label">{{ $t("New members") }}</p>
|
||||
<div class="field">
|
||||
<b-radio
|
||||
<o-radio
|
||||
v-model="editableGroup.openness"
|
||||
name="groupOpenness"
|
||||
:native-value="Openness.OPEN"
|
||||
@@ -114,10 +116,10 @@
|
||||
"Anyone wanting to be a member from your group will be able to from your group page."
|
||||
)
|
||||
}}</small>
|
||||
</b-radio>
|
||||
</o-radio>
|
||||
</div>
|
||||
<div class="field">
|
||||
<b-radio
|
||||
<o-radio
|
||||
v-model="editableGroup.openness"
|
||||
name="groupOpenness"
|
||||
:native-value="Openness.MODERATED"
|
||||
@@ -127,10 +129,10 @@
|
||||
"Anyone can request being a member, but an administrator needs to approve the membership."
|
||||
)
|
||||
}}</small>
|
||||
</b-radio>
|
||||
</o-radio>
|
||||
</div>
|
||||
<div class="field">
|
||||
<b-radio
|
||||
<o-radio
|
||||
v-model="editableGroup.openness"
|
||||
name="groupOpenness"
|
||||
:native-value="Openness.INVITE_ONLY"
|
||||
@@ -140,17 +142,17 @@
|
||||
"The only way for your group to get new members is if an admininistrator invites them."
|
||||
)
|
||||
}}</small>
|
||||
</b-radio>
|
||||
</o-radio>
|
||||
</div>
|
||||
|
||||
<b-field
|
||||
<o-field
|
||||
:label="$t('Followers')"
|
||||
:message="$t('Followers will receive new public events and posts.')"
|
||||
>
|
||||
<b-checkbox v-model="editableGroup.manuallyApprovesFollowers">
|
||||
<o-checkbox v-model="editableGroup.manuallyApprovesFollowers">
|
||||
{{ $t("Manually approve new followers") }}
|
||||
</b-checkbox>
|
||||
</b-field>
|
||||
</o-checkbox>
|
||||
</o-field>
|
||||
|
||||
<full-address-auto-complete
|
||||
:label="$t('Group address')"
|
||||
@@ -158,229 +160,265 @@
|
||||
:hideMap="true"
|
||||
/>
|
||||
|
||||
<div class="buttons">
|
||||
<b-button native-type="submit" type="is-primary">{{
|
||||
<div class="flex flex-wrap gap-2 my-2">
|
||||
<o-button native-type="submit" variant="primary">{{
|
||||
$t("Update group")
|
||||
}}</b-button>
|
||||
<b-button @click="confirmDeleteGroup" type="is-danger">{{
|
||||
}}</o-button>
|
||||
<o-button @click="confirmDeleteGroup" variant="danger">{{
|
||||
$t("Delete group")
|
||||
}}</b-button>
|
||||
}}</o-button>
|
||||
</div>
|
||||
</form>
|
||||
<b-message type="is-danger" v-for="(value, index) in errors" :key="index">
|
||||
<o-notification
|
||||
variant="danger"
|
||||
v-for="(value, index) in errors"
|
||||
:key="index"
|
||||
>
|
||||
{{ value }}
|
||||
</b-message>
|
||||
</o-notification>
|
||||
</section>
|
||||
<b-message v-else-if="!$apollo.loading">
|
||||
<o-notification v-else-if="!loading">
|
||||
{{ $t("You are not an administrator for this group.") }}
|
||||
</b-message>
|
||||
</o-notification>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Watch } from "vue-property-decorator";
|
||||
<script lang="ts" setup>
|
||||
import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
|
||||
import PictureUpload from "@/components/PictureUpload.vue";
|
||||
import { mixins } from "vue-class-component";
|
||||
import GroupMixin from "@/mixins/group";
|
||||
import { GroupVisibility, Openness } from "@/types/enums";
|
||||
import { UPDATE_GROUP } from "../../graphql/group";
|
||||
import {
|
||||
Group,
|
||||
IGroup,
|
||||
usernameWithDomain,
|
||||
displayName,
|
||||
} from "../../types/actor";
|
||||
import { Address, IAddress } from "../../types/address.model";
|
||||
import { CONFIG } from "@/graphql/config";
|
||||
import { IConfig } from "@/types/config.model";
|
||||
import { GroupVisibility, MemberRole, Openness } from "@/types/enums";
|
||||
import { Group, 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";
|
||||
import RouteName from "@/router/name";
|
||||
import { buildFileFromIMedia } from "@/utils/image";
|
||||
import { useAvatarMaxSize, useBannerMaxSize } from "@/composition/config";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { computed, ref, watch, defineAsyncComponent, inject } from "vue";
|
||||
import { useGroup, useUpdateGroup } from "@/composition/apollo/group";
|
||||
import {
|
||||
useCurrentActorClient,
|
||||
usePersonStatusGroup,
|
||||
} from "@/composition/apollo/actor";
|
||||
import { DELETE_GROUP } from "@/graphql/group";
|
||||
import { useMutation } from "@vue/apollo-composable";
|
||||
import { useRouter } from "vue-router";
|
||||
import { Dialog } from "@/plugins/dialog";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { Notifier } from "@/plugins/notifier";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
FullAddressAutoComplete,
|
||||
PictureUpload,
|
||||
editor: () => import("../../components/Editor.vue"),
|
||||
},
|
||||
apollo: {
|
||||
config: CONFIG,
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$t("Group settings") as string,
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class GroupSettings extends mixins(GroupMixin) {
|
||||
RouteName = RouteName;
|
||||
const Editor = defineAsyncComponent(() => import("@/components/Editor.vue"));
|
||||
|
||||
config!: IConfig;
|
||||
const props = defineProps<{ preferredUsername: string }>();
|
||||
|
||||
errors: string[] = [];
|
||||
const { currentActor } = useCurrentActorClient();
|
||||
|
||||
avatarFile: File | null = null;
|
||||
const { group, loading } = useGroup(props.preferredUsername);
|
||||
|
||||
bannerFile: File | null = null;
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
usernameWithDomain = usernameWithDomain;
|
||||
useHead({
|
||||
title: computed(() => t("Group settings")),
|
||||
});
|
||||
|
||||
displayName = displayName;
|
||||
const notifier = inject<Notifier>("notifier");
|
||||
|
||||
GroupVisibility = GroupVisibility;
|
||||
const avatarFile = ref<File | null>(null);
|
||||
const bannerFile = ref<File | null>(null);
|
||||
|
||||
Openness = Openness;
|
||||
const errors = ref<string[]>([]);
|
||||
|
||||
showCopiedTooltip = false;
|
||||
const showCopiedTooltip = ref(false);
|
||||
|
||||
editableGroup: IGroup = new Group();
|
||||
const editableGroup = ref<IGroup>(new Group());
|
||||
|
||||
async updateGroup(): Promise<void> {
|
||||
try {
|
||||
const variables = this.buildVariables();
|
||||
await this.$apollo.mutate<{ updateGroup: IGroup }>({
|
||||
mutation: UPDATE_GROUP,
|
||||
variables,
|
||||
});
|
||||
this.$notifier.success(this.$t("Group settings saved") as string);
|
||||
} catch (err: any) {
|
||||
this.handleError(err);
|
||||
const updateGroup = async (): Promise<void> => {
|
||||
const variables = buildVariables();
|
||||
const { onDone, onError } = useUpdateGroup(variables);
|
||||
|
||||
onDone(() => {
|
||||
notifier?.success(t("Group settings saved") as string);
|
||||
});
|
||||
|
||||
onError((err) => {
|
||||
handleError(err as unknown as ErrorResponse);
|
||||
});
|
||||
};
|
||||
|
||||
const copyURL = async (): Promise<void> => {
|
||||
await window.navigator.clipboard.writeText(group.value?.url ?? "");
|
||||
showCopiedTooltip.value = true;
|
||||
setTimeout(() => {
|
||||
showCopiedTooltip.value = false;
|
||||
}, 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);
|
||||
}
|
||||
async copyURL(): Promise<void> {
|
||||
await window.navigator.clipboard.writeText(this.group.url);
|
||||
this.showCopiedTooltip = true;
|
||||
setTimeout(() => {
|
||||
this.showCopiedTooltip = false;
|
||||
}, 2000);
|
||||
editableGroup.value = { ...group.value };
|
||||
});
|
||||
|
||||
const buildVariables = () => {
|
||||
let avatarObj = {};
|
||||
let bannerObj = {};
|
||||
const variables = { ...editableGroup.value };
|
||||
let physicalAddress;
|
||||
if (variables.physicalAddress) {
|
||||
physicalAddress = { ...variables.physicalAddress };
|
||||
} else {
|
||||
physicalAddress = variables.physicalAddress;
|
||||
}
|
||||
|
||||
@Watch("group")
|
||||
async watchUpdateGroup(oldGroup: IGroup, newGroup: IGroup): Promise<void> {
|
||||
try {
|
||||
if (
|
||||
oldGroup?.avatar !== undefined &&
|
||||
oldGroup?.avatar !== newGroup?.avatar
|
||||
) {
|
||||
this.avatarFile = await buildFileFromIMedia(this.group.avatar);
|
||||
}
|
||||
if (
|
||||
oldGroup?.banner !== undefined &&
|
||||
oldGroup?.banner !== newGroup?.banner
|
||||
) {
|
||||
this.bannerFile = await buildFileFromIMedia(this.group.banner);
|
||||
}
|
||||
} catch (e) {
|
||||
// Catch errors while building media
|
||||
console.error(e);
|
||||
}
|
||||
this.editableGroup = { ...this.group };
|
||||
}
|
||||
|
||||
private buildVariables() {
|
||||
let avatarObj = {};
|
||||
let bannerObj = {};
|
||||
const variables = { ...this.editableGroup };
|
||||
let physicalAddress;
|
||||
if (variables.physicalAddress) {
|
||||
physicalAddress = { ...variables.physicalAddress };
|
||||
} else {
|
||||
physicalAddress = variables.physicalAddress;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line
|
||||
// @ts-ignore
|
||||
if (variables.__typename) {
|
||||
// eslint-disable-next-line
|
||||
// @ts-ignore
|
||||
if (variables.__typename) {
|
||||
// eslint-disable-next-line
|
||||
// @ts-ignore
|
||||
delete variables.__typename;
|
||||
}
|
||||
delete variables.__typename;
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
// @ts-ignore
|
||||
if (physicalAddress && physicalAddress.__typename) {
|
||||
// eslint-disable-next-line
|
||||
// @ts-ignore
|
||||
if (physicalAddress && physicalAddress.__typename) {
|
||||
// eslint-disable-next-line
|
||||
// @ts-ignore
|
||||
delete physicalAddress.__typename;
|
||||
}
|
||||
delete variables.avatar;
|
||||
delete variables.banner;
|
||||
delete physicalAddress.__typename;
|
||||
}
|
||||
delete variables.avatar;
|
||||
delete variables.banner;
|
||||
|
||||
if (this.avatarFile) {
|
||||
avatarObj = {
|
||||
avatar: {
|
||||
media: {
|
||||
name: this.avatarFile.name,
|
||||
alt: `${this.editableGroup.preferredUsername}'s avatar`,
|
||||
file: this.avatarFile,
|
||||
},
|
||||
if (avatarFile.value) {
|
||||
avatarObj = {
|
||||
avatar: {
|
||||
media: {
|
||||
name: avatarFile.value?.name,
|
||||
alt: `${editableGroup.value?.preferredUsername}'s avatar`,
|
||||
file: avatarFile,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (this.bannerFile) {
|
||||
bannerObj = {
|
||||
banner: {
|
||||
media: {
|
||||
name: this.bannerFile.name,
|
||||
alt: `${this.editableGroup.preferredUsername}'s banner`,
|
||||
file: this.bannerFile,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
id: this.group.id,
|
||||
name: this.editableGroup.name,
|
||||
summary: this.editableGroup.summary,
|
||||
visibility: this.editableGroup.visibility,
|
||||
openness: this.editableGroup.openness,
|
||||
manuallyApprovesFollowers: this.editableGroup.manuallyApprovesFollowers,
|
||||
physicalAddress,
|
||||
...avatarObj,
|
||||
...bannerObj,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
get canShowCopyButton(): boolean {
|
||||
return window.isSecureContext;
|
||||
if (bannerFile.value) {
|
||||
bannerObj = {
|
||||
banner: {
|
||||
media: {
|
||||
name: bannerFile.value?.name,
|
||||
alt: `${editableGroup.value?.preferredUsername}'s banner`,
|
||||
file: bannerFile,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
id: group.value?.id,
|
||||
name: editableGroup.value?.name,
|
||||
summary: editableGroup.value?.summary,
|
||||
visibility: editableGroup.value?.visibility,
|
||||
openness: editableGroup.value?.openness,
|
||||
manuallyApprovesFollowers: editableGroup.value?.manuallyApprovesFollowers,
|
||||
physicalAddress,
|
||||
...avatarObj,
|
||||
...bannerObj,
|
||||
};
|
||||
};
|
||||
|
||||
get currentAddress(): IAddress {
|
||||
return new Address(this.editableGroup.physicalAddress);
|
||||
}
|
||||
const canShowCopyButton = computed((): boolean => {
|
||||
return window.isSecureContext;
|
||||
});
|
||||
|
||||
set currentAddress(address: IAddress) {
|
||||
this.editableGroup.physicalAddress = address;
|
||||
}
|
||||
const currentAddress = computed({
|
||||
get(): IAddress {
|
||||
return new Address(editableGroup.value?.physicalAddress);
|
||||
},
|
||||
set(address: IAddress) {
|
||||
editableGroup.value.physicalAddress = address;
|
||||
},
|
||||
});
|
||||
|
||||
get avatarMaxSize(): number | undefined {
|
||||
return this?.config?.uploadLimits?.avatar;
|
||||
}
|
||||
const avatarMaxSize = useAvatarMaxSize();
|
||||
const bannerMaxSize = useBannerMaxSize();
|
||||
|
||||
get bannerMaxSize(): number | undefined {
|
||||
return this?.config?.uploadLimits?.banner;
|
||||
}
|
||||
const handleError = (err: ErrorResponse) => {
|
||||
if (err?.networkError?.name === "ServerParseError") {
|
||||
const error = err?.networkError as ServerParseError;
|
||||
|
||||
private handleError(err: ErrorResponse) {
|
||||
if (err?.networkError?.name === "ServerParseError") {
|
||||
const error = err?.networkError as ServerParseError;
|
||||
|
||||
if (error?.response?.status === 413) {
|
||||
this.errors.push(
|
||||
this.$t(
|
||||
"Unable to create the group. One of the pictures may be too heavy."
|
||||
) as string
|
||||
);
|
||||
}
|
||||
if (error?.response?.status === 413) {
|
||||
errors.value.push(
|
||||
t(
|
||||
"Unable to create the group. One of the pictures may be too heavy."
|
||||
) as string
|
||||
);
|
||||
}
|
||||
this.errors.push(
|
||||
...(err.graphQLErrors || []).map(
|
||||
({ message }: { message: string }) => message
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
errors.value.push(
|
||||
...(err.graphQLErrors || []).map(
|
||||
({ message }: { message: string }) => message
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const isCurrentActorAGroupAdmin = computed((): boolean => {
|
||||
return hasCurrentActorThisRole(MemberRole.ADMINISTRATOR);
|
||||
});
|
||||
|
||||
const hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {
|
||||
const roles = Array.isArray(givenRole) ? givenRole : [givenRole];
|
||||
return (
|
||||
personMemberships.value?.total > 0 &&
|
||||
roles.includes(personMemberships.value?.elements[0].role)
|
||||
);
|
||||
};
|
||||
|
||||
const personMemberships = computed(
|
||||
() => person.value?.memberships ?? { total: 0, elements: [] }
|
||||
);
|
||||
|
||||
const { person } = usePersonStatusGroup(props.preferredUsername);
|
||||
|
||||
const dialog = inject<Dialog>("dialog");
|
||||
|
||||
const confirmDeleteGroup = (): void => {
|
||||
console.debug("confirm delete group", dialog);
|
||||
dialog?.confirm({
|
||||
title: t("Delete group"),
|
||||
message: t(
|
||||
"Are you sure you want to <b>completely delete</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
|
||||
),
|
||||
confirmText: t("Delete group"),
|
||||
cancelText: t("Cancel"),
|
||||
type: "danger",
|
||||
hasIcon: true,
|
||||
onConfirm: () =>
|
||||
deleteGroupMutation({
|
||||
groupId: group.value?.id,
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
const { mutate: deleteGroupMutation, onDone: deleteGroupDone } = useMutation<{
|
||||
deleteGroup: IGroup;
|
||||
}>(DELETE_GROUP);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
deleteGroupDone(() => {
|
||||
router.push({ name: RouteName.MY_GROUPS });
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user