hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Allow to filter reports by domain

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-01-10 10:17:50 +01:00
parent 26b1ea401a
commit 193fcde123
7 changed files with 104 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
js/src/graphql/report.ts
View File

@@ -2,8 +2,13 @@ import gql from "graphql-tag";
import { ACTOR_FRAGMENT } from "./actor";
export const REPORTS = gql`
query Reports($status: ReportStatus, $page: Int, $limit: Int) {
reports(status: $status, page: $page, limit: $limit) {
query Reports(
$status: ReportStatus
$domain: String
$page: Int
$limit: Int
) {
reports(status: $status, domain: $domain, page: $page, limit: $limit) {
total
elements {
id

4
js/src/router/settings.ts
View File

@@ -20,7 +20,7 @@ export enum SettingsRouteName {
ADMIN_GROUPS = "ADMIN_GROUPS",
ADMIN_GROUP_PROFILE = "ADMIN_GROUP_PROFILE",
MODERATION = "MODERATION",
REPORTS = "Reports",
REPORTS = "REPORTS",
REPORT = "Report",
REPORT_LOGS = "Logs",
CREATE_IDENTITY = "CreateIdentity",
@@ -234,7 +234,7 @@ export const settingsRoutes: RouteConfig[] = [
meta: { requiredAuth: true, announcer: { skip: true } },
},
{
path: "/moderation/reports/:filter?",
path: "/moderation/reports",
name: SettingsRouteName.REPORTS,
component: (): Promise<ImportedComponent> =>
import(

5
js/src/views/Admin/Instance.vue
View File

@@ -70,7 +70,10 @@
<span class="text-sm block">{{ $t("Followers") }}</span>
</div>
<div class="bg-gray-50 rounded-xl p-8 dark:bg-gray-800">
<router-link to="/" class="dark:text-white hover:dark:text-slate-300">
<router-link
:to="{ name: RouteName.REPORTS, query: { domain: instance.domain } }"
class="dark:text-white hover:dark:text-slate-300"
>
<span class="mb-4 text-xl font-semibold block">{{
instance.reportsCount
}}</span>

84
js/src/views/Moderation/ReportList.vue
View File

@@ -15,23 +15,37 @@
</ul>
</nav>
<section>
<b-field>
<b-radio-button
v-model="status"
:native-value="ReportStatusEnum.OPEN"
>{{ $t("Open") }}</b-radio-button
<div class="flex flex-wrap gap-2">
<b-field :label="$t('Report status')">
<b-radio-button
v-model="status"
:native-value="ReportStatusEnum.OPEN"
>{{ $t("Open") }}</b-radio-button
>
<b-radio-button
v-model="status"
:native-value="ReportStatusEnum.RESOLVED"
>{{ $t("Resolved") }}</b-radio-button
>
<b-radio-button
v-model="status"
:native-value="ReportStatusEnum.CLOSED"
>{{ $t("Closed") }}</b-radio-button
>
</b-field>
<b-field
:label="$t('Domain')"
label-for="domain-filter"
class="flex-auto"
>
<b-radio-button
v-model="status"
:native-value="ReportStatusEnum.RESOLVED"
>{{ $t("Resolved") }}</b-radio-button
>
<b-radio-button
v-model="status"
:native-value="ReportStatusEnum.CLOSED"
>{{ $t("Closed") }}</b-radio-button
>
</b-field>
<b-input
id="domain-filter"
:placeholder="$t('mobilizon-instance.tld')"
:value="filterDomain"
@input="debouncedUpdateDomainFilter"
/>
</b-field>
</div>
<ul v-if="reports.elements.length > 0">
<li v-for="report in reports.elements" :key="report.id">
<router-link
@@ -79,7 +93,7 @@
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component, Ref, Vue } from "vue-property-decorator";
import { IReport } from "@/types/report.model";
import { REPORTS } from "@/graphql/report";
import ReportCard from "@/components/Report/ReportCard.vue";
@@ -88,6 +102,7 @@ import { ReportStatusEnum } from "@/types/enums";
import RouteName from "../../router/name";
import VueRouter from "vue-router";
import { Paginate } from "@/types/paginate";
import debounce from "lodash/debounce";
const { isNavigationFailure, NavigationFailureType } = VueRouter;
const REPORT_PAGE_LIMIT = 10;
@@ -106,6 +121,7 @@ const REPORT_PAGE_LIMIT = 10;
page: this.page,
status: this.status,
limit: REPORT_PAGE_LIMIT,
domain: this.filterDomain,
};
},
pollInterval: 120000, // 2 minutes
@@ -128,18 +144,28 @@ export default class ReportList extends Vue {
REPORT_PAGE_LIMIT = REPORT_PAGE_LIMIT;
data(): Record<string, unknown> {
return {
debouncedUpdateDomainFilter: debounce(this.updateDomainFilter, 500),
};
}
async updateDomainFilter(domain: string) {
this.filterDomain = domain;
}
get page(): number {
return parseInt((this.$route.query.page as string) || "1", 10);
}
set page(page: number) {
this.pushRouter(RouteName.REPORTS, {
this.pushRouter({
page: page.toString(),
});
}
get status(): ReportStatusEnum {
const filter = this.$route.params.filter?.toUpperCase();
const filter = (this.$route.query.status || "") as string;
if (filter in ReportStatusEnum) {
return filter as ReportStatusEnum;
}
@@ -147,19 +173,21 @@ export default class ReportList extends Vue {
}
set status(status: ReportStatusEnum) {
this.$router.push({
name: RouteName.REPORTS,
params: { filter: status.toLowerCase() },
});
this.pushRouter({ status });
}
protected async pushRouter(
routeName: string,
args: Record<string, string>
): Promise<void> {
get filterDomain(): string {
return (this.$route.query.domain as string) || "";
}
set filterDomain(domain: string) {
this.pushRouter({ domain });
}
protected async pushRouter(args: Record<string, string>): Promise<void> {
try {
await this.$router.push({
name: routeName,
name: RouteName.REPORTS,
params: this.$route.params,
query: { ...this.$route.query, ...args },
});