Introduce group basic federation, event new page and notifications
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
@@ -1,52 +1,57 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1 class="title">{{ $t('Administration') }}</h1>
|
||||
<div class="tile is-ancestor" v-if="dashboard">
|
||||
<div class="tile is-vertical">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical is-6">
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ dashboard.numberOfEvents }}</p>
|
||||
<p>{{ $t('Published events')}}</p>
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ dashboard.numberOfComments}}</p>
|
||||
<p>{{ $t('Comments')}}</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ dashboard.numberOfUsers }}</p>
|
||||
<p>{{ $t('Users')}}</p>
|
||||
</article>
|
||||
<router-link :to="{ name: RouteName.REPORTS}">
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ dashboard.numberOfReports }}</p>
|
||||
<p>{{ $t('Opened reports')}}</p>
|
||||
</article>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent" v-if="dashboard.lastPublicEventPublished">
|
||||
<router-link :to="{ name: RouteName.EVENT, params: { uuid: dashboard.lastPublicEventPublished.uuid } }">
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ $t('Last published event') }}</p>
|
||||
<p class="subtitle">{{ dashboard.lastPublicEventPublished.title }}</p>
|
||||
<figure class="image is-4by3" v-if="dashboard.lastPublicEventPublished.picture">
|
||||
<img :src="dashboard.lastPublicEventPublished.picture.url" />
|
||||
</figure>
|
||||
</article>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<h1 class="title">{{ $t("Administration") }}</h1>
|
||||
<div class="tile is-ancestor" v-if="dashboard">
|
||||
<div class="tile is-vertical">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical is-6">
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ dashboard.numberOfEvents }}</p>
|
||||
<p>{{ $t("Published events") }}</p>
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ dashboard.numberOfComments }}</p>
|
||||
<p>{{ $t("Comments") }}</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ dashboard.numberOfUsers }}</p>
|
||||
<p>{{ $t("Users") }}</p>
|
||||
</article>
|
||||
<router-link :to="{ name: RouteName.REPORTS }">
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ dashboard.numberOfReports }}</p>
|
||||
<p>{{ $t("Opened reports") }}</p>
|
||||
</article>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="tile is-parent" v-if="dashboard.lastPublicEventPublished">
|
||||
<router-link
|
||||
:to="{
|
||||
name: RouteName.EVENT,
|
||||
params: { uuid: dashboard.lastPublicEventPublished.uuid },
|
||||
}"
|
||||
>
|
||||
<article class="tile is-child box">
|
||||
<p class="dashboard-number">{{ $t("Last published event") }}</p>
|
||||
<p class="subtitle">{{ dashboard.lastPublicEventPublished.title }}</p>
|
||||
<figure class="image is-4by3" v-if="dashboard.lastPublicEventPublished.picture">
|
||||
<img :src="dashboard.lastPublicEventPublished.picture.url" />
|
||||
</figure>
|
||||
</article>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { DASHBOARD } from '@/graphql/admin';
|
||||
import { IDashboard } from '@/types/admin.model';
|
||||
import { RouteName } from '@/router';
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import { DASHBOARD } from "@/graphql/admin";
|
||||
import { IDashboard } from "@/types/admin.model";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
@@ -56,22 +61,23 @@ import { RouteName } from '@/router';
|
||||
},
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$t('Administration') as string,
|
||||
titleTemplate: '%s | Mobilizon',
|
||||
title: this.$t("Administration") as string,
|
||||
titleTemplate: "%s | Mobilizon",
|
||||
};
|
||||
},
|
||||
})
|
||||
export default class Dashboard extends Vue {
|
||||
dashboard!: IDashboard;
|
||||
|
||||
RouteName = RouteName;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-number {
|
||||
color: #3C376E;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
line-height: 1.125;
|
||||
}
|
||||
</style>
|
||||
.dashboard-number {
|
||||
color: #3c376e;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
line-height: 1.125;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,57 +1,75 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1 class="title">{{ $t('Instances') }}</h1>
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<router-link tag="li" active-class="is-active" :to="{name: RouteName.RELAY_FOLLOWINGS}" exact>
|
||||
<a>
|
||||
<b-icon icon="inbox-arrow-down"></b-icon>
|
||||
<span>{{ $t('Followings') }} <b-tag rounded> {{ relayFollowings.total }} </b-tag> </span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" active-class="is-active" :to="{name: RouteName.RELAY_FOLLOWERS}" exact>
|
||||
<a>
|
||||
<b-icon icon="inbox-arrow-up"></b-icon>
|
||||
<span>{{ $t('Followers') }} <b-tag rounded> {{ relayFollowers.total }} </b-tag> </span>
|
||||
</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="title">{{ $t("Instances") }}</h1>
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<router-link
|
||||
tag="li"
|
||||
active-class="is-active"
|
||||
:to="{ name: RouteName.RELAY_FOLLOWINGS }"
|
||||
exact
|
||||
>
|
||||
<a>
|
||||
<b-icon icon="inbox-arrow-down"></b-icon>
|
||||
<span>
|
||||
{{ $t("Followings") }}
|
||||
<b-tag rounded>{{ relayFollowings.total }}</b-tag>
|
||||
</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link
|
||||
tag="li"
|
||||
active-class="is-active"
|
||||
:to="{ name: RouteName.RELAY_FOLLOWERS }"
|
||||
exact
|
||||
>
|
||||
<a>
|
||||
<b-icon icon="inbox-arrow-up"></b-icon>
|
||||
<span>
|
||||
{{ $t("Followers") }}
|
||||
<b-tag rounded>{{ relayFollowers.total }}</b-tag>
|
||||
</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { RouteName } from '@/router';
|
||||
import { RELAY_FOLLOWERS, RELAY_FOLLOWINGS } from '@/graphql/admin';
|
||||
import { Paginate } from '@/types/paginate';
|
||||
import { IFollower } from '@/types/actor/follower.model';
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import { RELAY_FOLLOWERS, RELAY_FOLLOWINGS } from "@/graphql/admin";
|
||||
import { Paginate } from "@/types/paginate";
|
||||
import { IFollower } from "@/types/actor/follower.model";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
relayFollowings: {
|
||||
query: RELAY_FOLLOWINGS,
|
||||
fetchPolicy: 'cache-and-network',
|
||||
fetchPolicy: "cache-and-network",
|
||||
},
|
||||
relayFollowers: {
|
||||
query: RELAY_FOLLOWERS,
|
||||
fetchPolicy: 'cache-and-network',
|
||||
fetchPolicy: "cache-and-network",
|
||||
},
|
||||
},
|
||||
})
|
||||
export default class Follows extends Vue {
|
||||
RouteName = RouteName;
|
||||
activeTab: number = 0;
|
||||
|
||||
activeTab = 0;
|
||||
|
||||
relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
|
||||
|
||||
relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.tab-item {
|
||||
form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.tab-item {
|
||||
form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,64 +1,112 @@
|
||||
<template>
|
||||
<section v-if="adminSettings">
|
||||
<form @submit.prevent="updateSettings">
|
||||
<b-field :label="$t('Instance Name')">
|
||||
<b-input v-model="adminSettings.instanceName" />
|
||||
<section v-if="adminSettings">
|
||||
<form @submit.prevent="updateSettings">
|
||||
<b-field :label="$t('Instance Name')">
|
||||
<b-input v-model="adminSettings.instanceName" />
|
||||
</b-field>
|
||||
<b-field :label="$t('Instance Description')">
|
||||
<b-input type="textarea" v-model="adminSettings.instanceDescription" />
|
||||
</b-field>
|
||||
<b-field :label="$t('Allow registrations')">
|
||||
<b-switch v-model="adminSettings.registrationsOpen">
|
||||
<p class="content" v-if="adminSettings.registrationsOpen">
|
||||
{{ $t("Registration is allowed, anyone can register.") }}
|
||||
</p>
|
||||
<p class="content" v-else>{{ $t("Registration is closed.") }}</p>
|
||||
</b-switch>
|
||||
</b-field>
|
||||
<b-field :label="$t('Instance Terms Source')">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third-desktop">
|
||||
<b-field>
|
||||
<b-radio
|
||||
v-model="adminSettings.instanceTermsType"
|
||||
name="instanceTermsType"
|
||||
:native-value="InstanceTermsType.DEFAULT"
|
||||
>{{ $t("Default Mobilizon.org terms") }}</b-radio
|
||||
>
|
||||
</b-field>
|
||||
<b-field :label="$t('Instance Description')">
|
||||
<b-input type="textarea" v-model="adminSettings.instanceDescription" />
|
||||
<b-field>
|
||||
<b-radio
|
||||
v-model="adminSettings.instanceTermsType"
|
||||
name="instanceTermsType"
|
||||
:native-value="InstanceTermsType.URL"
|
||||
>{{ $t("Custom URL") }}</b-radio
|
||||
>
|
||||
</b-field>
|
||||
<b-field :label="$t('Allow registrations')">
|
||||
<b-switch v-model="adminSettings.registrationsOpen">
|
||||
<p class="content" v-if="adminSettings.registrationsOpen">{{ $t('Registration is allowed, anyone can register.')}}</p>
|
||||
<p class="content" v-else>{{ $t('Registration is closed.')}}</p>
|
||||
</b-switch>
|
||||
<b-field>
|
||||
<b-radio
|
||||
v-model="adminSettings.instanceTermsType"
|
||||
name="instanceTermsType"
|
||||
:native-value="InstanceTermsType.CUSTOM"
|
||||
>{{ $t("Custom text") }}</b-radio
|
||||
>
|
||||
</b-field>
|
||||
<b-field :label="$t('Instance Terms Source')">
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter-desktop">
|
||||
<b-field>
|
||||
<b-radio v-model="adminSettings.instanceTermsType" name="instanceTermsType" :native-value="InstanceTermsType.DEFAULT">{{ $t('Default Mobilizon.org terms')}}</b-radio>
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-radio v-model="adminSettings.instanceTermsType" name="instanceTermsType" :native-value="InstanceTermsType.URL">{{ $t('Custom URL')}}</b-radio>
|
||||
</b-field>
|
||||
<b-field>
|
||||
<b-radio v-model="adminSettings.instanceTermsType" name="instanceTermsType" :native-value="InstanceTermsType.CUSTOM">{{ $t('Custom text')}}</b-radio>
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="notification" v-if="adminSettings.instanceTermsType === InstanceTermsType.DEFAULT">
|
||||
<b>{{ $t('Default')}}</b>
|
||||
<i18n tag="p" class="content" path="The {default_terms} will be used. They will be translated in the user's language.">
|
||||
<a slot="default_terms" href="https://mobilizon.org/terms" target="_blank" rel="noopener">{{ $t('default Mobilizon terms')}}</a>
|
||||
</i18n>
|
||||
</div>
|
||||
<div class="notification" v-if="adminSettings.instanceTermsType === InstanceTermsType.URL">
|
||||
<b>{{ $t('URL')}}</b>
|
||||
<p class="content">{{ $t("Set an URL to a page with your own terms.") }}</p>
|
||||
</div>
|
||||
<div class="notification" v-if="adminSettings.instanceTermsType === InstanceTermsType.CUSTOM">
|
||||
<b>{{ $t('Custom')}}</b>
|
||||
<p class="content">{{ $t("Enter your own terms. HTML tags allowed. Mobilizon.org's terms are provided as template.") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-field>
|
||||
<b-field :label="$t('Instance Terms URL')" v-if="adminSettings.instanceTermsType === InstanceTermsType.URL">
|
||||
<b-input type="URL" v-model="adminSettings.instanceTermsUrl" />
|
||||
</b-field>
|
||||
<b-field :label="$t('Instance Terms')" v-if="adminSettings.instanceTermsType === InstanceTermsType.CUSTOM">
|
||||
<b-input type="textarea" v-model="adminSettings.instanceTerms" />
|
||||
</b-field>
|
||||
<b-button native-type="submit" type="is-primary">{{ $t('Save')}}</b-button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div
|
||||
class="notification"
|
||||
v-if="adminSettings.instanceTermsType === InstanceTermsType.DEFAULT"
|
||||
>
|
||||
<b>{{ $t("Default") }}</b>
|
||||
<i18n
|
||||
tag="p"
|
||||
class="content"
|
||||
path="The {default_terms} will be used. They will be translated in the user's language."
|
||||
>
|
||||
<a
|
||||
slot="default_terms"
|
||||
href="https://mobilizon.org/terms"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>{{ $t("default Mobilizon terms") }}</a
|
||||
>
|
||||
</i18n>
|
||||
</div>
|
||||
<div
|
||||
class="notification"
|
||||
v-if="adminSettings.instanceTermsType === InstanceTermsType.URL"
|
||||
>
|
||||
<b>{{ $t("URL") }}</b>
|
||||
<p class="content">{{ $t("Set an URL to a page with your own terms.") }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="notification"
|
||||
v-if="adminSettings.instanceTermsType === InstanceTermsType.CUSTOM"
|
||||
>
|
||||
<b>{{ $t("Custom") }}</b>
|
||||
<p class="content">
|
||||
{{
|
||||
$t(
|
||||
"Enter your own terms. HTML tags allowed. Mobilizon.org's terms are provided as template."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-field>
|
||||
<b-field
|
||||
:label="$t('Instance Terms URL')"
|
||||
v-if="adminSettings.instanceTermsType === InstanceTermsType.URL"
|
||||
>
|
||||
<b-input type="URL" v-model="adminSettings.instanceTermsUrl" />
|
||||
</b-field>
|
||||
<b-field
|
||||
:label="$t('Instance Terms')"
|
||||
v-if="adminSettings.instanceTermsType === InstanceTermsType.CUSTOM"
|
||||
>
|
||||
<b-input type="textarea" v-model="adminSettings.instanceTerms" />
|
||||
</b-field>
|
||||
<b-button native-type="submit" type="is-primary">{{ $t("Save") }}</b-button>
|
||||
</form>
|
||||
</section>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { ADMIN_SETTINGS, SAVE_ADMIN_SETTINGS } from '@/graphql/admin';
|
||||
import { IAdminSettings, InstanceTermsType } from '@/types/admin.model';
|
||||
import { RouteName } from '@/router';
|
||||
import { Component, Vue } from "vue-property-decorator";
|
||||
import { ADMIN_SETTINGS, SAVE_ADMIN_SETTINGS } from "@/graphql/admin";
|
||||
import { IAdminSettings, InstanceTermsType } from "@/types/admin.model";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@Component({
|
||||
apollo: {
|
||||
@@ -67,7 +115,9 @@ import { RouteName } from '@/router';
|
||||
})
|
||||
export default class Settings extends Vue {
|
||||
adminSettings!: IAdminSettings;
|
||||
|
||||
InstanceTermsType = InstanceTermsType;
|
||||
|
||||
RouteName = RouteName;
|
||||
|
||||
async updateSettings() {
|
||||
@@ -78,11 +128,11 @@ export default class Settings extends Vue {
|
||||
...this.adminSettings,
|
||||
},
|
||||
});
|
||||
this.$notifier.success(this.$t('Admin settings successfully saved.') as string);
|
||||
this.$notifier.success(this.$t("Admin settings successfully saved.") as string);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
this.$notifier.error(this.$t('Failed to save admin settings') as string);
|
||||
this.$notifier.error(this.$t("Failed to save admin settings") as string);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user