Merge branch 'allow-group-creation-with-HTML-description-and-location' into 'main'

improve group creation view

See merge request framasoft/mobilizon!1248
This commit is contained in:
Thomas Citharel 2023-09-01 14:06:44 +00:00
commit 4fb1282e76
6 changed files with 156 additions and 13 deletions

View file

@ -295,6 +295,10 @@ export const CREATE_GROUP = gql`
$summary: String
$avatar: MediaInput
$banner: MediaInput
$physicalAddress: AddressInput
$visibility: GroupVisibility
$openness: Openness
$manuallyApprovesFollowers: Boolean
) {
createGroup(
preferredUsername: $preferredUsername
@ -302,6 +306,10 @@ export const CREATE_GROUP = gql`
summary: $summary
banner: $banner
avatar: $avatar
physicalAddress: $physicalAddress
visibility: $visibility
openness: $openness
manuallyApprovesFollowers: $manuallyApprovesFollowers
) {
...ActorFragment
banner {

View file

@ -5,8 +5,7 @@ import type { IResource } from "../resource";
import type { IEvent } from "../event.model";
import type { IDiscussion } from "../discussions";
import type { IPost } from "../post.model";
import type { IAddress } from "../address.model";
import { Address } from "../address.model";
import { Address, type IAddress } from "../address.model";
import { ActorType, GroupVisibility, Openness } from "../enums";
import type { IMember } from "./member.model";
import type { ITodoList } from "../todolist";
@ -53,11 +52,11 @@ export class Group extends Actor implements IGroup {
visibility: GroupVisibility = GroupVisibility.PUBLIC;
activity: Paginate<IActivity> = { elements: [], total: 0 };
openness: Openness = Openness.INVITE_ONLY;
openness: Openness = Openness.MODERATED;
physicalAddress: IAddress = new Address();
manuallyApprovesFollowers = true;
manuallyApprovesFollowers = false;
patch(hash: IGroup | Record<string, unknown>): void {
Object.assign(this, hash);

View file

@ -120,7 +120,7 @@ import {
} from "vue-use-route-query";
import { useI18n } from "vue-i18n";
import { useHead } from "@vueuse/head";
import { computed, ref } from "vue";
import { computed } from "vue";
import { Paginate } from "@/types/paginate";
import { IGroup } from "@/types/actor";
import AccountGroup from "vue-material-design-icons/AccountGroup.vue";

View file

@ -69,11 +69,25 @@
:message="summaryErrors[0]"
:type="summaryErrors[1]"
>
<o-input v-model="group.summary" type="textarea" id="group-summary" />
<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>
<div>
<b>{{ t("Avatar") }}</b>
<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"
@ -81,8 +95,8 @@
/>
</div>
<div>
<b>{{ t("Banner") }}</b>
<div class="field">
<b class="field-label">{{ t("Banner") }}</b>
<picture-upload
:textFallback="t('Banner')"
v-model="bannerFile"
@ -90,7 +104,101 @@
/>
</div>
<o-button variant="primary" native-type="submit">
<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>
@ -105,7 +213,14 @@ 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, inject, reactive, ref, watch } from "vue";
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";
@ -116,6 +231,12 @@ import {
} 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();
@ -156,10 +277,20 @@ 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) {

View file

@ -305,6 +305,10 @@ defmodule Mobilizon.GraphQL.Schema.Actors.GroupType do
description: "Whether the group can be join freely, with approval or is invite-only."
)
arg(:manually_approves_followers, :boolean,
description: "Whether this group approves new followers manually"
)
arg(:avatar, :media_input,
description:
"The avatar for the group, either as an object or directly the ID of an existing media"

View file

@ -146,7 +146,8 @@ defmodule Mobilizon.Actors.Actor do
:domain,
:summary,
:visibility,
:openness
:openness,
:manually_approves_followers
]
@group_creation_attrs @group_creation_required_attrs ++ @group_creation_optional_attrs