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

Add pagination to moderation logs

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2021-04-27 17:53:11 +02:00
parent 6646391558
commit 495fbda330
11 changed files with 231 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
js/src/views/Moderation/Logs.vue
View File

@@ -14,9 +14,9 @@
</li>
</ul>
</nav>
<section>
<ul v-if="actionLogs.length > 0">
<li v-for="log in actionLogs" :key="log.id">
<section v-if="actionLogs.total > 0 && actionLogs.elements.length > 0">
<ul>
<li v-for="log in actionLogs.elements" :key="log.id">
<div class="box">
<img
class="image"
@@ -147,7 +147,10 @@
<b slot="title">{{ log.object.title }}</b>
</i18n>
<i18n
v-else-if="log.action === ActionLogAction.ACTOR_SUSPENSION"
v-else-if="
log.action === ActionLogAction.ACTOR_SUSPENSION &&
log.object.__typename == 'Person'
"
tag="span"
path="{moderator} suspended profile {profile}"
>
@@ -169,7 +172,10 @@
</router-link>
</i18n>
<i18n
v-else-if="log.action === ActionLogAction.ACTOR_UNSUSPENSION"
v-else-if="
log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
log.object.__typename == 'Person'
"
tag="span"
path="{moderator} has unsuspended profile {profile}"
>
@@ -190,6 +196,56 @@
>{{ displayNameAndUsername(log.object) }}
</router-link>
</i18n>
<i18n
v-else-if="
log.action === ActionLogAction.ACTOR_SUSPENSION &&
log.object.__typename == 'Group'
"
tag="span"
path="{moderator} suspended group {profile}"
>
<router-link
slot="moderator"
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
<router-link
slot="profile"
:to="{
name: RouteName.ADMIN_GROUP_PROFILE,
params: { id: log.object.id },
}"
>{{ displayNameAndUsername(log.object) }}
</router-link>
</i18n>
<i18n
v-else-if="
log.action === ActionLogAction.ACTOR_UNSUSPENSION &&
log.object.__typename == 'Group'
"
tag="span"
path="{moderator} has unsuspended group {profile}"
>
<router-link
slot="moderator"
:to="{
name: RouteName.ADMIN_PROFILE,
params: { id: log.actor.id },
}"
>@{{ log.actor.preferredUsername }}</router-link
>
<router-link
slot="profile"
:to="{
name: RouteName.ADMIN_GROUP_PROFILE,
params: { id: log.object.id },
}"
>{{ displayNameAndUsername(log.object) }}
</router-link>
</i18n>
<i18n
v-else-if="log.action === ActionLogAction.USER_DELETION"
tag="span"
@@ -219,20 +275,31 @@
</div>
</li>
</ul>
<div v-else>
<b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
</div>
<b-pagination
:total="actionLogs.total"
v-model="page"
:per-page="LOGS_PER_PAGE"
:aria-next-label="$t('Next page')"
:aria-previous-label="$t('Previous page')"
:aria-page-label="$t('Page')"
:aria-current-label="$t('Current page')"
>
</b-pagination>
</section>
<div v-else>
<b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component, Vue, Watch } from "vue-property-decorator";
import { IActionLog } from "@/types/report.model";
import { LOGS } from "@/graphql/report";
import ReportCard from "@/components/Report/ReportCard.vue";
import { ActionLogAction } from "@/types/enums";
import RouteName from "../../router/name";
import { displayNameAndUsername } from "../../types/actor";
import { Paginate } from "@/types/paginate";
@Component({
components: {
@@ -242,17 +309,39 @@ import { displayNameAndUsername } from "../../types/actor";
actionLogs: {
fetchPolicy: "cache-and-network",
query: LOGS,
variables() {
return {
page: this.page,
limit: this.LOGS_PER_PAGE,
};
},
},
},
})
export default class ReportList extends Vue {
actionLogs?: IActionLog[] = [];
actionLogs?: Paginate<IActionLog> = { total: 0, elements: [] };
page = parseInt((this.$route.query.page as string) || "1", 10);
LOGS_PER_PAGE = 10;
ActionLogAction = ActionLogAction;
RouteName = RouteName;
displayNameAndUsername = displayNameAndUsername;
mounted(): void {
this.page = parseInt((this.$route.query.page as string) || "1", 10);
}
@Watch("page")
triggerLoadMoreMemberPageChange(page: string): void {
this.$router.replace({
name: RouteName.REPORT_LOGS,
query: { ...this.$route.query, page },
});
}
}
</script>
<style lang="scss" scoped>
@@ -265,4 +354,8 @@ img.image {
a {
text-decoration: none;
}
section ul li {
margin: 0.5rem auto;
}
</style>