2020-08-27 11:53:24 +02:00
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<nav class="breadcrumb" aria-label="breadcrumbs">
|
|
|
|
<ul>
|
|
|
|
<li>
|
2020-11-30 10:24:11 +01:00
|
|
|
<router-link :to="{ name: RouteName.MODERATION }">{{
|
|
|
|
$t("Moderation")
|
|
|
|
}}</router-link>
|
2020-08-27 11:53:24 +02:00
|
|
|
</li>
|
|
|
|
<li class="is-active">
|
2020-11-30 10:24:11 +01:00
|
|
|
<router-link :to="{ name: RouteName.PROFILES }">{{
|
|
|
|
$t("Groups")
|
|
|
|
}}</router-link>
|
2020-08-27 11:53:24 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
2021-10-06 18:00:50 +02:00
|
|
|
<div class="buttons" v-if="showCreateGroupsButton">
|
|
|
|
<router-link
|
|
|
|
class="button is-primary"
|
|
|
|
:to="{ name: RouteName.CREATE_GROUP }"
|
|
|
|
>{{ $t("Create group") }}</router-link
|
|
|
|
>
|
|
|
|
</div>
|
2020-08-27 11:53:24 +02:00
|
|
|
<div v-if="groups">
|
|
|
|
<b-switch v-model="local">{{ $t("Local") }}</b-switch>
|
|
|
|
<b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
|
|
|
|
<b-table
|
|
|
|
:data="groups.elements"
|
|
|
|
:loading="$apollo.queries.groups.loading"
|
|
|
|
paginated
|
|
|
|
backend-pagination
|
|
|
|
backend-filtering
|
2021-05-12 18:10:07 +02:00
|
|
|
:debounce-search="200"
|
|
|
|
:current-page.sync="page"
|
|
|
|
:aria-next-label="$t('Next page')"
|
|
|
|
:aria-previous-label="$t('Previous page')"
|
|
|
|
:aria-page-label="$t('Page')"
|
|
|
|
:aria-current-label="$t('Current page')"
|
2020-08-27 11:53:24 +02:00
|
|
|
:total="groups.total"
|
|
|
|
:per-page="PROFILES_PER_PAGE"
|
|
|
|
@page-change="onPageChange"
|
|
|
|
@filters-change="onFiltersChange"
|
|
|
|
>
|
2020-11-30 10:24:11 +01:00
|
|
|
<b-table-column
|
|
|
|
field="preferredUsername"
|
|
|
|
:label="$t('Username')"
|
|
|
|
searchable
|
|
|
|
>
|
2021-04-16 18:13:17 +02:00
|
|
|
<template #searchable="props">
|
2020-08-27 11:53:24 +02:00
|
|
|
<b-input
|
2021-09-07 17:52:34 +02:00
|
|
|
:aria-label="$t('Filter')"
|
2020-08-27 11:53:24 +02:00
|
|
|
v-model="props.filters.preferredUsername"
|
2021-09-07 17:52:34 +02:00
|
|
|
:placeholder="$t('Filter')"
|
2020-08-27 11:53:24 +02:00
|
|
|
icon="magnify"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
<template v-slot:default="props">
|
|
|
|
<router-link
|
|
|
|
class="profile"
|
2020-11-30 10:24:11 +01:00
|
|
|
:to="{
|
|
|
|
name: RouteName.ADMIN_GROUP_PROFILE,
|
|
|
|
params: { id: props.row.id },
|
|
|
|
}"
|
2020-08-27 11:53:24 +02:00
|
|
|
>
|
|
|
|
<article class="media">
|
|
|
|
<figure class="media-left" v-if="props.row.avatar">
|
|
|
|
<p class="image is-48x48">
|
2021-09-07 17:52:34 +02:00
|
|
|
<img
|
|
|
|
:src="props.row.avatar.url"
|
|
|
|
:alt="props.row.avatar.alt || ''"
|
|
|
|
/>
|
2020-08-27 11:53:24 +02:00
|
|
|
</p>
|
|
|
|
</figure>
|
|
|
|
<div class="media-content">
|
|
|
|
<div class="content">
|
|
|
|
<strong v-if="props.row.name">{{ props.row.name }}</strong
|
|
|
|
><br v-if="props.row.name" />
|
|
|
|
<small>@{{ props.row.preferredUsername }}</small>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</article>
|
|
|
|
</router-link>
|
|
|
|
</template>
|
|
|
|
</b-table-column>
|
|
|
|
|
|
|
|
<b-table-column field="domain" :label="$t('Domain')" searchable>
|
2021-04-16 18:13:17 +02:00
|
|
|
<template #searchable="props">
|
2020-08-27 11:53:24 +02:00
|
|
|
<b-input
|
2021-09-07 17:52:34 +02:00
|
|
|
:aria-label="$t('Filter')"
|
2020-08-27 11:53:24 +02:00
|
|
|
v-model="props.filters.domain"
|
2021-09-07 17:52:34 +02:00
|
|
|
:placeholder="$t('Filter')"
|
2020-08-27 11:53:24 +02:00
|
|
|
icon="magnify"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
<template v-slot:default="props">
|
|
|
|
{{ props.row.domain }}
|
|
|
|
</template>
|
|
|
|
</b-table-column>
|
|
|
|
<template slot="empty">
|
2021-05-12 18:10:07 +02:00
|
|
|
<empty-content icon="account-group" :inline="true">
|
|
|
|
{{ $t("No group matches the filters") }}
|
|
|
|
</empty-content>
|
2020-08-27 11:53:24 +02:00
|
|
|
</template>
|
|
|
|
</b-table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script lang="ts">
|
2021-05-12 18:10:07 +02:00
|
|
|
import { Component, Vue } from "vue-property-decorator";
|
2021-10-06 18:00:50 +02:00
|
|
|
import { CONFIG } from "@/graphql/config";
|
|
|
|
import { IConfig } from "@/types/config.model";
|
2020-08-31 12:40:30 +02:00
|
|
|
import { LIST_GROUPS } from "@/graphql/group";
|
2020-08-27 11:53:24 +02:00
|
|
|
import RouteName from "../../router/name";
|
2021-05-12 18:10:07 +02:00
|
|
|
import EmptyContent from "../../components/Utils/EmptyContent.vue";
|
|
|
|
import VueRouter from "vue-router";
|
|
|
|
const { isNavigationFailure, NavigationFailureType } = VueRouter;
|
2020-08-27 11:53:24 +02:00
|
|
|
|
|
|
|
const PROFILES_PER_PAGE = 10;
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
apollo: {
|
2021-10-06 18:00:50 +02:00
|
|
|
config: CONFIG,
|
2020-08-27 11:53:24 +02:00
|
|
|
groups: {
|
|
|
|
query: LIST_GROUPS,
|
|
|
|
variables() {
|
|
|
|
return {
|
|
|
|
preferredUsername: this.preferredUsername,
|
|
|
|
name: this.name,
|
|
|
|
domain: this.domain,
|
|
|
|
local: this.local,
|
|
|
|
suspended: this.suspended,
|
2021-05-12 18:10:07 +02:00
|
|
|
page: this.page,
|
2020-08-27 11:53:24 +02:00
|
|
|
limit: PROFILES_PER_PAGE,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-05-25 16:21:29 +02:00
|
|
|
metaInfo() {
|
|
|
|
return {
|
|
|
|
title: this.$t("Groups") as string,
|
|
|
|
};
|
|
|
|
},
|
2021-05-12 18:10:07 +02:00
|
|
|
components: {
|
|
|
|
EmptyContent,
|
|
|
|
},
|
2020-08-27 11:53:24 +02:00
|
|
|
})
|
|
|
|
export default class GroupProfiles extends Vue {
|
2021-05-12 18:10:07 +02:00
|
|
|
name = "";
|
2020-08-27 11:53:24 +02:00
|
|
|
|
2021-05-12 18:10:07 +02:00
|
|
|
PROFILES_PER_PAGE = PROFILES_PER_PAGE;
|
2020-08-27 11:53:24 +02:00
|
|
|
|
2021-10-06 18:00:50 +02:00
|
|
|
config!: IConfig;
|
2021-05-12 18:10:07 +02:00
|
|
|
RouteName = RouteName;
|
2020-08-27 11:53:24 +02:00
|
|
|
|
2021-05-12 18:10:07 +02:00
|
|
|
async onPageChange(): Promise<void> {
|
|
|
|
await this.doFetchMore();
|
|
|
|
}
|
2020-08-27 11:53:24 +02:00
|
|
|
|
2021-05-12 18:10:07 +02:00
|
|
|
get page(): number {
|
|
|
|
return parseInt((this.$route.query.page as string) || "1", 10);
|
|
|
|
}
|
2020-08-27 11:53:24 +02:00
|
|
|
|
2021-05-12 18:10:07 +02:00
|
|
|
set page(page: number) {
|
|
|
|
this.pushRouter({ page: page.toString() });
|
|
|
|
}
|
2020-08-27 11:53:24 +02:00
|
|
|
|
2021-05-12 18:10:07 +02:00
|
|
|
get domain(): string {
|
|
|
|
return (this.$route.query.domain as string) || "";
|
|
|
|
}
|
2020-08-27 11:53:24 +02:00
|
|
|
|
2021-05-12 18:10:07 +02:00
|
|
|
set domain(domain: string) {
|
|
|
|
this.pushRouter({ domain });
|
|
|
|
}
|
2020-08-27 11:53:24 +02:00
|
|
|
|
2021-05-12 18:10:07 +02:00
|
|
|
get preferredUsername(): string {
|
|
|
|
return (this.$route.query.preferredUsername as string) || "";
|
|
|
|
}
|
|
|
|
|
|
|
|
set preferredUsername(preferredUsername: string) {
|
|
|
|
this.pushRouter({ preferredUsername });
|
|
|
|
}
|
|
|
|
|
|
|
|
get local(): boolean {
|
|
|
|
return this.$route.query.local === "1";
|
|
|
|
}
|
|
|
|
|
|
|
|
set local(local: boolean) {
|
|
|
|
this.pushRouter({ local: local ? "1" : "0" });
|
|
|
|
}
|
|
|
|
|
|
|
|
get suspended(): boolean {
|
|
|
|
return this.$route.query.suspended === "1";
|
|
|
|
}
|
|
|
|
|
|
|
|
set suspended(suspended: boolean) {
|
|
|
|
this.pushRouter({ suspended: suspended ? "1" : "0" });
|
2020-08-27 11:53:24 +02:00
|
|
|
}
|
|
|
|
|
2021-10-06 18:00:50 +02:00
|
|
|
get showCreateGroupsButton(): boolean {
|
|
|
|
return !!this.config?.restrictions?.onlyAdminCanCreateGroups;
|
|
|
|
}
|
|
|
|
|
2020-11-27 19:27:44 +01:00
|
|
|
onFiltersChange({
|
|
|
|
preferredUsername,
|
|
|
|
domain,
|
|
|
|
}: {
|
|
|
|
preferredUsername: string;
|
|
|
|
domain: string;
|
|
|
|
}): void {
|
2020-08-27 11:53:24 +02:00
|
|
|
this.preferredUsername = preferredUsername;
|
|
|
|
this.domain = domain;
|
2021-05-12 18:10:07 +02:00
|
|
|
this.doFetchMore();
|
|
|
|
}
|
|
|
|
|
|
|
|
private async pushRouter(args: Record<string, string>): Promise<void> {
|
|
|
|
try {
|
|
|
|
await this.$router.push({
|
|
|
|
name: RouteName.ADMIN_GROUPS,
|
|
|
|
query: { ...this.$route.query, ...args },
|
|
|
|
});
|
|
|
|
} catch (e) {
|
|
|
|
if (isNavigationFailure(e, NavigationFailureType.redirected)) {
|
|
|
|
throw Error(e.toString());
|
|
|
|
}
|
|
|
|
}
|
2020-08-27 11:53:24 +02:00
|
|
|
}
|
|
|
|
|
2021-05-12 18:10:07 +02:00
|
|
|
private async doFetchMore(): Promise<void> {
|
|
|
|
await this.$apollo.queries.groups.fetchMore({
|
|
|
|
variables: {
|
|
|
|
preferredUsername: this.preferredUsername,
|
|
|
|
name: this.name,
|
|
|
|
domain: this.domain,
|
|
|
|
local: this.local,
|
|
|
|
suspended: this.suspended,
|
|
|
|
page: this.page,
|
|
|
|
limit: PROFILES_PER_PAGE,
|
|
|
|
},
|
|
|
|
});
|
2020-08-27 11:53:24 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
a.profile {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
</style>
|