build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
397
src/views/Group/CreateView.vue
Normal file
397
src/views/Group/CreateView.vue
Normal file
@@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<section class="container mx-auto">
|
||||
<h1>{{ t("Create a new group") }}</h1>
|
||||
|
||||
<o-notification
|
||||
variant="danger"
|
||||
v-for="(value, index) in errors"
|
||||
:key="index"
|
||||
>
|
||||
{{ value }}
|
||||
</o-notification>
|
||||
|
||||
<form @submit.prevent="createGroup">
|
||||
<o-field :label="t('Group display name')" label-for="group-display-name">
|
||||
<o-input
|
||||
aria-required="true"
|
||||
required
|
||||
v-model="group.name"
|
||||
id="group-display-name"
|
||||
/>
|
||||
</o-field>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="group-preferred-username">{{
|
||||
t("Federated Group Name")
|
||||
}}</label>
|
||||
<div class="field-body">
|
||||
<o-field
|
||||
:message="preferredUsernameErrors[0]"
|
||||
:type="preferredUsernameErrors[1]"
|
||||
>
|
||||
<o-input
|
||||
ref="preferredUsernameInput"
|
||||
aria-required="true"
|
||||
required
|
||||
expanded
|
||||
v-model="group.preferredUsername"
|
||||
pattern="[a-z0-9_]+"
|
||||
id="group-preferred-username"
|
||||
:useHtml5Validation="true"
|
||||
:validation-message="
|
||||
group.preferredUsername
|
||||
? t(
|
||||
'Only alphanumeric lowercased characters and underscores are supported.'
|
||||
)
|
||||
: null
|
||||
"
|
||||
/>
|
||||
<p class="control">
|
||||
<span class="button is-static">@{{ host }}</span>
|
||||
</p>
|
||||
</o-field>
|
||||
</div>
|
||||
<i18n-t
|
||||
v-if="currentActor"
|
||||
keypath="This is like your federated username ({username}) for groups. It will allow the group to be found on the federation, and is guaranteed to be unique."
|
||||
>
|
||||
<template #username>
|
||||
<code>
|
||||
{{ usernameWithDomain(currentActor, true) }}
|
||||
</code>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
|
||||
<o-field
|
||||
:label="t('Description')"
|
||||
label-for="group-summary"
|
||||
:message="summaryErrors[0]"
|
||||
:type="summaryErrors[1]"
|
||||
>
|
||||
<editor
|
||||
v-if="currentActor"
|
||||
id="group-summary"
|
||||
mode="basic"
|
||||
class="mb-3"
|
||||
v-model="group.summary"
|
||||
:maxSize="500"
|
||||
:aria-label="$t('Group description body')"
|
||||
:current-actor="currentActor"
|
||||
/>
|
||||
</o-field>
|
||||
|
||||
<full-address-auto-complete
|
||||
:label="$t('Group address')"
|
||||
v-model="group.physicalAddress"
|
||||
/>
|
||||
|
||||
<div class="field">
|
||||
<b class="field-label">{{ t("Avatar") }}</b>
|
||||
<picture-upload
|
||||
:textFallback="t('Avatar')"
|
||||
v-model="avatarFile"
|
||||
:maxSize="avatarMaxSize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<b class="field-label">{{ t("Banner") }}</b>
|
||||
<picture-upload
|
||||
:textFallback="t('Banner')"
|
||||
v-model="bannerFile"
|
||||
:maxSize="bannerMaxSize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<fieldset>
|
||||
<legend class="field-label !mb-0 mt-2">
|
||||
{{ t("Group visibility") }}
|
||||
</legend>
|
||||
<o-radio
|
||||
v-model="group.visibility"
|
||||
name="groupVisibility"
|
||||
:native-value="GroupVisibility.PUBLIC"
|
||||
>
|
||||
{{ $t("Visible everywhere on the web") }}<br />
|
||||
<small>{{
|
||||
$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>
|
||||
</o-radio>
|
||||
<o-radio
|
||||
v-model="group.visibility"
|
||||
name="groupVisibility"
|
||||
:native-value="GroupVisibility.UNLISTED"
|
||||
>{{ $t("Only accessible through link") }}<br />
|
||||
<small>{{
|
||||
$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>
|
||||
</o-radio>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend class="mt-2">
|
||||
<span class="field-label !mb-0">{{ t("New members") }} </span>
|
||||
<span>
|
||||
{{
|
||||
t(
|
||||
"Members will also access private sections like discussions, resources and restricted posts."
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</legend>
|
||||
<o-field>
|
||||
<o-radio
|
||||
v-model="group.openness"
|
||||
name="groupOpenness"
|
||||
:native-value="Openness.OPEN"
|
||||
>
|
||||
{{ $t("Anyone can join freely") }}<br />
|
||||
<small>{{
|
||||
$t(
|
||||
"Anyone wanting to be a member from your group will be able to from your group page."
|
||||
)
|
||||
}}</small>
|
||||
</o-radio>
|
||||
</o-field>
|
||||
<o-field>
|
||||
<o-radio
|
||||
v-model="group.openness"
|
||||
name="groupOpenness"
|
||||
:native-value="Openness.MODERATED"
|
||||
>{{ $t("Moderate new members") }}<br />
|
||||
<small>{{
|
||||
$t(
|
||||
"Anyone can request being a member, but an administrator needs to approve the membership."
|
||||
)
|
||||
}}</small>
|
||||
</o-radio>
|
||||
</o-field>
|
||||
<o-field>
|
||||
<o-radio
|
||||
v-model="group.openness"
|
||||
name="groupOpenness"
|
||||
:native-value="Openness.INVITE_ONLY"
|
||||
>{{ $t("Manually invite new members") }}<br />
|
||||
<small>{{
|
||||
$t(
|
||||
"The only way for your group to get new members is if an admininistrator invites them."
|
||||
)
|
||||
}}</small>
|
||||
</o-radio>
|
||||
</o-field>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend class="mt-2">
|
||||
<span class="field-label !mb-0">
|
||||
{{ t("Followers") }}
|
||||
</span>
|
||||
<span>
|
||||
{{ t("Followers will receive new public events and posts.") }}
|
||||
</span>
|
||||
</legend>
|
||||
<o-checkbox v-model="group.manuallyApprovesFollowers">
|
||||
{{ t("Manually approve new followers") }}
|
||||
</o-checkbox>
|
||||
</fieldset>
|
||||
|
||||
<o-button variant="primary" native-type="submit" class="mt-3">
|
||||
{{ t("Create my group") }}
|
||||
</o-button>
|
||||
</form>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Group, usernameWithDomain, displayName } from "@/types/actor";
|
||||
import RouteName from "../../router/name";
|
||||
import { convertToUsername } from "../../utils/username";
|
||||
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 {
|
||||
computed,
|
||||
defineAsyncComponent,
|
||||
inject,
|
||||
reactive,
|
||||
ref,
|
||||
watch,
|
||||
} from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useCreateGroup } from "@/composition/apollo/group";
|
||||
import {
|
||||
useAvatarMaxSize,
|
||||
useBannerMaxSize,
|
||||
useHost,
|
||||
} from "@/composition/config";
|
||||
import { Notifier } from "@/plugins/notifier";
|
||||
import { useHead } from "@vueuse/head";
|
||||
import { Openness, GroupVisibility } from "@/types/enums";
|
||||
import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
|
||||
|
||||
const Editor = defineAsyncComponent(
|
||||
() => import("@/components/TextEditor.vue")
|
||||
);
|
||||
|
||||
const { currentActor } = useCurrentActorClient();
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: computed(() => t("Create a new group")),
|
||||
});
|
||||
|
||||
const group = ref(new Group());
|
||||
|
||||
const avatarFile = ref<File | null>(null);
|
||||
const bannerFile = ref<File | null>(null);
|
||||
|
||||
const errors = ref<string[]>([]);
|
||||
|
||||
const fieldErrors = reactive<Record<string, string | undefined>>({
|
||||
preferred_username: undefined,
|
||||
summary: undefined,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const host = useHost();
|
||||
const avatarMaxSize = useAvatarMaxSize();
|
||||
const bannerMaxSize = useBannerMaxSize();
|
||||
|
||||
const notifier = inject<Notifier>("notifier");
|
||||
|
||||
watch(
|
||||
() => group.value.name,
|
||||
(newGroupName) => {
|
||||
group.value.preferredUsername = convertToUsername(newGroupName);
|
||||
}
|
||||
);
|
||||
|
||||
const buildVariables = computed(() => {
|
||||
let avatarObj = {};
|
||||
let bannerObj = {};
|
||||
|
||||
const cloneGroup = group.value;
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
delete cloneGroup.physicalAddress.__typename;
|
||||
delete cloneGroup.physicalAddress.pictureInfo;
|
||||
|
||||
const groupBasic = {
|
||||
preferredUsername: group.value.preferredUsername,
|
||||
name: group.value.name,
|
||||
summary: group.value.summary,
|
||||
physicalAddress: cloneGroup.physicalAddress,
|
||||
visibility: group.value.visibility,
|
||||
openness: group.value.openness,
|
||||
manuallyApprovesFollowers: group.value.manuallyApprovesFollowers,
|
||||
};
|
||||
|
||||
if (avatarFile.value) {
|
||||
avatarObj = {
|
||||
avatar: {
|
||||
media: {
|
||||
name: avatarFile.value?.name,
|
||||
alt: `${group.value.preferredUsername}'s avatar`,
|
||||
file: avatarFile.value,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (bannerFile.value) {
|
||||
bannerObj = {
|
||||
banner: {
|
||||
media: {
|
||||
name: bannerFile.value?.name,
|
||||
alt: `${group.value.preferredUsername}'s banner`,
|
||||
file: bannerFile.value,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...groupBasic,
|
||||
...avatarObj,
|
||||
...bannerObj,
|
||||
};
|
||||
});
|
||||
|
||||
const handleError = (err: ErrorResponse) => {
|
||||
if (err?.networkError?.name === "ServerParseError") {
|
||||
const error = err?.networkError as ServerParseError;
|
||||
|
||||
if (error?.response?.status === 413) {
|
||||
errors.value.push(
|
||||
t(
|
||||
"Unable to create the group. One of the pictures may be too heavy."
|
||||
) as string
|
||||
);
|
||||
}
|
||||
}
|
||||
err.graphQLErrors?.forEach((error) => {
|
||||
if (error.field) {
|
||||
if (Array.isArray(error.message)) {
|
||||
fieldErrors[error.field] = error.message[0];
|
||||
} else {
|
||||
fieldErrors[error.field] = error.message;
|
||||
}
|
||||
} else {
|
||||
errors.value.push(error.message);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const summaryErrors = computed(() => {
|
||||
const message = fieldErrors.summary ? fieldErrors.summary : undefined;
|
||||
const type = fieldErrors.summary ? "danger" : undefined;
|
||||
return [message, type];
|
||||
});
|
||||
|
||||
const preferredUsernameErrors = computed(() => {
|
||||
const message = fieldErrors.preferred_username
|
||||
? fieldErrors.preferred_username
|
||||
: t(
|
||||
"Only alphanumeric lowercased characters and underscores are supported."
|
||||
);
|
||||
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>
|
||||
.markdown-render h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user