LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-25 22:01:13 +00:00
Code Issues Projects Releases Wiki Activity

Add support for filtering mod logs

Browse source
This commit is contained in:
Anon 2022-06-04 11:47:10 -05:00
parent c2c98ac638
commit a8ab4e0558
5 changed files with 281 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lemmy-translations

@ -1 +1 @@
Subproject commit 7c1b691af63845a2fe2f8219b4620b8db3c9c3ba
Subproject commit 29c689af8d16417c1b84d9491f6bcea888720a87

4
src/assets/css/main.css
View file

@ -375,6 +375,10 @@ br.big {
border-radius: 4px;
}
.modlog-choices-font-size {
font-size: .9375rem !important;
}
.preview-lines {
overflow: hidden;
text-overflow: ellipsis;

27
src/shared/components/home/site-form.tsx
View file

@ -54,6 +54,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
description: None,
community_creation_admin_only: None,
auth: undefined,
hide_modlog_mod_names: Some(true),
}),
loading: false,
themeList: None,
@ -98,6 +99,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
default_theme: Some(site.default_theme),
default_post_listing_type: Some(site.default_post_listing_type),
legal_information: site.legal_information,
hide_modlog_mod_names: site.hide_modlog_mod_names,
auth: undefined,
});
},
@ -437,6 +439,25 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<div class="form-check">
<input
class="form-check-input"
id="create-site-hide-modlog-mod-names"
type="checkbox"
checked={toUndefined(this.state.siteForm.hide_modlog_mod_names)}
onChange={linkEvent(this, this.handleSiteHideModlogModNames)}
/>
<label
class="form-check-label"
htmlFor="create-site-hide-modlog-mod-names"
>
{i18n.t("hide_modlog_mod_names")}
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<button
@ -495,6 +516,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
default_theme: sForm.default_theme,
default_post_listing_type: sForm.default_post_listing_type,
auth: auth().unwrap(),
hide_modlog_mod_names: sForm.hide_modlog_mod_names
});
WebSocketService.Instance.send(wsClient.createSite(form));
}
@ -561,6 +583,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
i.setState(i.state);
}
handleSiteHideModlogModNames(i: SiteForm, event: any) {
i.state.siteForm.hide_modlog_mod_names = Some(event.target.checked);
i.setState(i.state);
}
handleSiteDefaultTheme(i: SiteForm, event: any) {
i.state.siteForm.default_theme = Some(event.target.value);
i.setState(i.state);

294
src/shared/components/modlog.tsx
View file

@ -1,5 +1,5 @@
import { None, Option, Some } from "@sniptt/monads";
import { Component } from "inferno";
import { Component, linkEvent } from "inferno";
import { Link } from "inferno-router";
import {
AdminPurgeCommentView,
@ -17,12 +17,14 @@ import {
ModBanFromCommunityView,
ModBanView,
ModLockPostView,
ModlogActionType,
ModRemoveCommentView,
ModRemoveCommunityView,
ModRemovePostView,
ModStickyPostView,
ModTransferCommunityView,
PersonSafe,
toUndefined,
UserOperation,
wsJsonToRes,
wsUserOp,
@ -36,7 +38,11 @@ import {
amAdmin,
amMod,
auth,
choicesConfig,
choicesModLogConfig,
debounce,
fetchLimit,
fetchUsers,
isBrowser,
setIsoData,
toast,
@ -49,53 +55,43 @@ import { MomentTime } from "./common/moment-time";
import { Paginator } from "./common/paginator";
import { CommunityLink } from "./community/community-link";
import { PersonListing } from "./person/person-listing";
enum ModlogEnum {
ModRemovePost,
ModLockPost,
ModStickyPost,
ModRemoveComment,
ModRemoveCommunity,
ModBanFromCommunity,
ModAddCommunity,
ModTransferCommunity,
ModAdd,
ModBan,
AdminPurgePerson,
AdminPurgeCommunity,
AdminPurgePost,
AdminPurgeComment,
}
type ModlogType = {
id: number;
type_: ModlogEnum;
moderator: PersonSafe;
type_: ModlogActionType;
moderator: Option<PersonSafe>;
view:
| ModRemovePostView
| ModLockPostView
| ModStickyPostView
| ModRemoveCommentView
| ModRemoveCommunityView
| ModBanFromCommunityView
| ModBanView
| ModAddCommunityView
| ModTransferCommunityView
| ModAddView
| AdminPurgePersonView
| AdminPurgeCommunityView
| AdminPurgePostView
| AdminPurgeCommentView;
| ModRemovePostView
| ModLockPostView
| ModStickyPostView
| ModRemoveCommentView
| ModRemoveCommunityView
| ModBanFromCommunityView
| ModBanView
| ModAddCommunityView
| ModTransferCommunityView
| ModAddView
| AdminPurgePersonView
| AdminPurgeCommunityView
| AdminPurgePostView
| AdminPurgeCommentView;
when_: string;
};
var Choices: any;
if (isBrowser()) {
Choices = require("choices.js");
}
interface ModlogState {
res: Option<GetModlogResponse>;
communityId: Option<number>;
communityMods: Option<CommunityModeratorView[]>;
communityName: Option<string>,
page: number;
siteRes: GetSiteResponse;
loading: boolean;
filter_action: ModlogActionType,
filter_user: Option<number>,
filter_mod: Option<number>,
}
export class Modlog extends Component<any, ModlogState> {
@ -105,18 +101,22 @@ export class Modlog extends Component<any, ModlogState> {
GetCommunityResponse
);
private subscription: Subscription;
private userChoices: any;
private modChoices: any;
private emptyState: ModlogState = {
res: None,
communityId: None,
communityMods: None,
communityName: None,
page: 1,
loading: true,
siteRes: this.isoData.site_res,
filter_action: ModlogActionType.All,
filter_user: None,
filter_mod: None,
};
constructor(props: any, context: any) {
super(props, context);
this.state = this.emptyState;
this.handlePageChange = this.handlePageChange.bind(this);
@ -145,6 +145,11 @@ export class Modlog extends Component<any, ModlogState> {
}
}
componentDidMount() {
this.setupUserFilter();
this.setupModFilter();
}
componentWillUnmount() {
if (isBrowser()) {
this.subscription.unsubscribe();
@ -154,7 +159,7 @@ export class Modlog extends Component<any, ModlogState> {
buildCombined(res: GetModlogResponse): ModlogType[] {
let removed_posts: ModlogType[] = res.removed_posts.map(r => ({
id: r.mod_remove_post.id,
type_: ModlogEnum.ModRemovePost,
type_: ModlogActionType.ModRemovePost,
view: r,
moderator: r.moderator,
when_: r.mod_remove_post.when_,
@ -162,7 +167,7 @@ export class Modlog extends Component<any, ModlogState> {
let locked_posts: ModlogType[] = res.locked_posts.map(r => ({
id: r.mod_lock_post.id,
type_: ModlogEnum.ModLockPost,
type_: ModlogActionType.ModLockPost,
view: r,
moderator: r.moderator,
when_: r.mod_lock_post.when_,
@ -170,7 +175,7 @@ export class Modlog extends Component<any, ModlogState> {
let stickied_posts: ModlogType[] = res.stickied_posts.map(r => ({
id: r.mod_sticky_post.id,
type_: ModlogEnum.ModStickyPost,
type_: ModlogActionType.ModStickyPost,
view: r,
moderator: r.moderator,
when_: r.mod_sticky_post.when_,
@ -178,7 +183,7 @@ export class Modlog extends Component<any, ModlogState> {
let removed_comments: ModlogType[] = res.removed_comments.map(r => ({
id: r.mod_remove_comment.id,
type_: ModlogEnum.ModRemoveComment,
type_: ModlogActionType.ModRemoveComment,
view: r,
moderator: r.moderator,
when_: r.mod_remove_comment.when_,
@ -186,7 +191,7 @@ export class Modlog extends Component<any, ModlogState> {
let removed_communities: ModlogType[] = res.removed_communities.map(r => ({
id: r.mod_remove_community.id,
type_: ModlogEnum.ModRemoveCommunity,
type_: ModlogActionType.ModRemoveCommunity,
view: r,
moderator: r.moderator,
when_: r.mod_remove_community.when_,
@ -195,7 +200,7 @@ export class Modlog extends Component<any, ModlogState> {
let banned_from_community: ModlogType[] = res.banned_from_community.map(
r => ({
id: r.mod_ban_from_community.id,
type_: ModlogEnum.ModBanFromCommunity,
type_: ModlogActionType.ModBanFromCommunity,
view: r,
moderator: r.moderator,
when_: r.mod_ban_from_community.when_,
@ -204,7 +209,7 @@ export class Modlog extends Component<any, ModlogState> {
let added_to_community: ModlogType[] = res.added_to_community.map(r => ({
id: r.mod_add_community.id,
type_: ModlogEnum.ModAddCommunity,
type_: ModlogActionType.ModAddCommunity,
view: r,
moderator: r.moderator,
when_: r.mod_add_community.when_,
@ -213,7 +218,7 @@ export class Modlog extends Component<any, ModlogState> {
let transferred_to_community: ModlogType[] =
res.transferred_to_community.map(r => ({
id: r.mod_transfer_community.id,
type_: ModlogEnum.ModTransferCommunity,
type_: ModlogActionType.ModTransferCommunity,
view: r,
moderator: r.moderator,
when_: r.mod_transfer_community.when_,
@ -221,7 +226,7 @@ export class Modlog extends Component<any, ModlogState> {
let added: ModlogType[] = res.added.map(r => ({
id: r.mod_add.id,
type_: ModlogEnum.ModAdd,
type_: ModlogActionType.ModAdd,
view: r,
moderator: r.moderator,
when_: r.mod_add.when_,
@ -229,7 +234,7 @@ export class Modlog extends Component<any, ModlogState> {
let banned: ModlogType[] = res.banned.map(r => ({
id: r.mod_ban.id,
type_: ModlogEnum.ModBan,
type_: ModlogActionType.ModBan,
view: r,
moderator: r.moderator,
when_: r.mod_ban.when_,
@ -237,7 +242,7 @@ export class Modlog extends Component<any, ModlogState> {
let purged_persons: ModlogType[] = res.admin_purged_persons.map(r => ({
id: r.admin_purge_person.id,
type_: ModlogEnum.AdminPurgePerson,
type_: ModlogActionType.AdminPurgePerson,
view: r,
moderator: r.admin,
when_: r.admin_purge_person.when_,
@ -246,7 +251,7 @@ export class Modlog extends Component<any, ModlogState> {
let purged_communities: ModlogType[] = res.admin_purged_communities.map(
r => ({
id: r.admin_purge_community.id,
type_: ModlogEnum.AdminPurgeCommunity,
type_: ModlogActionType.AdminPurgeCommunity,
view: r,
moderator: r.admin,
when_: r.admin_purge_community.when_,
@ -255,7 +260,7 @@ export class Modlog extends Component<any, ModlogState> {
let purged_posts: ModlogType[] = res.admin_purged_posts.map(r => ({
id: r.admin_purge_post.id,
type_: ModlogEnum.AdminPurgePost,
type_: ModlogActionType.AdminPurgePost,
view: r,
moderator: r.admin,
when_: r.admin_purge_post.when_,
@ -263,7 +268,7 @@ export class Modlog extends Component<any, ModlogState> {
let purged_comments: ModlogType[] = res.admin_purged_comments.map(r => ({
id: r.admin_purge_comment.id,
type_: ModlogEnum.AdminPurgeComment,
type_: ModlogActionType.AdminPurgeComment,
view: r,
moderator: r.admin,
when_: r.admin_purge_comment.when_,
@ -294,7 +299,7 @@ export class Modlog extends Component<any, ModlogState> {
renderModlogType(i: ModlogType) {
switch (i.type_) {
case ModlogEnum.ModRemovePost: {
case ModlogActionType.ModRemovePost: {
let mrpv = i.view as ModRemovePostView;
return [
mrpv.mod_remove_post.removed.unwrapOr(false)
@ -309,7 +314,7 @@ export class Modlog extends Component<any, ModlogState> {
}),
];
}
case ModlogEnum.ModLockPost: {
case ModlogActionType.ModLockPost: {
let mlpv = i.view as ModLockPostView;
return [
mlpv.mod_lock_post.locked.unwrapOr(false) ? "Locked " : "Unlocked ",
@ -318,7 +323,7 @@ export class Modlog extends Component<any, ModlogState> {
</span>,
];
}
case ModlogEnum.ModStickyPost: {
case ModlogActionType.ModStickyPost: {
let mspv = i.view as ModStickyPostView;
return [
mspv.mod_sticky_post.stickied.unwrapOr(false)
@ -329,7 +334,7 @@ export class Modlog extends Component<any, ModlogState> {
</span>,
];
}
case ModlogEnum.ModRemoveComment: {
case ModlogActionType.ModRemoveComment: {
let mrc = i.view as ModRemoveCommentView;
return [
mrc.mod_remove_comment.removed.unwrapOr(false)
@ -351,7 +356,7 @@ export class Modlog extends Component<any, ModlogState> {
}),
];
}
case ModlogEnum.ModRemoveCommunity: {
case ModlogActionType.ModRemoveCommunity: {
let mrco = i.view as ModRemoveCommunityView;
return [
mrco.mod_remove_community.removed.unwrapOr(false)
@ -372,7 +377,7 @@ export class Modlog extends Component<any, ModlogState> {
}),
];
}
case ModlogEnum.ModBanFromCommunity: {
case ModlogActionType.ModBanFromCommunity: {
let mbfc = i.view as ModBanFromCommunityView;
return [
<span>
@ -399,7 +404,7 @@ export class Modlog extends Component<any, ModlogState> {
}),
];
}
case ModlogEnum.ModAddCommunity: {
case ModlogActionType.ModAddCommunity: {
let mac = i.view as ModAddCommunityView;
return [
<span>
@ -416,7 +421,7 @@ export class Modlog extends Component<any, ModlogState> {
</span>,
];
}
case ModlogEnum.ModTransferCommunity: {
case ModlogActionType.ModTransferCommunity: {
let mtc = i.view as ModTransferCommunityView;
return [
<span>
@ -433,7 +438,7 @@ export class Modlog extends Component<any, ModlogState> {
</span>,
];
}
case ModlogEnum.ModBan: {
case ModlogActionType.ModBan: {
let mb = i.view as ModBanView;
return [
<span>
@ -454,7 +459,7 @@ export class Modlog extends Component<any, ModlogState> {
}),
];
}
case ModlogEnum.ModAdd: {
case ModlogActionType.ModAdd: {
let ma = i.view as ModAddView;
return [
<span>
@ -466,7 +471,7 @@ export class Modlog extends Component<any, ModlogState> {
<span> as an admin </span>,
];
}
case ModlogEnum.AdminPurgePerson: {
case ModlogActionType.AdminPurgePerson: {
let ap = i.view as AdminPurgePersonView;
return [
<span>Purged a Person</span>,
@ -476,7 +481,7 @@ export class Modlog extends Component<any, ModlogState> {
}),
];
}
case ModlogEnum.AdminPurgeCommunity: {
case ModlogActionType.AdminPurgeCommunity: {
let ap = i.view as AdminPurgeCommunityView;
return [
<span>Purged a Community</span>,
@ -486,7 +491,7 @@ export class Modlog extends Component<any, ModlogState> {
}),
];
}
case ModlogEnum.AdminPurgePost: {
case ModlogActionType.AdminPurgePost: {
let ap = i.view as AdminPurgePostView;
return [
<span>Purged a Post from from </span>,
@ -497,7 +502,7 @@ export class Modlog extends Component<any, ModlogState> {
}),
];
}
case ModlogEnum.AdminPurgeComment: {
case ModlogActionType.AdminPurgeComment: {
let ap = i.view as AdminPurgeCommentView;
return [
<span>
@ -527,7 +532,7 @@ export class Modlog extends Component<any, ModlogState> {
</td>
<td>
{this.amAdminOrMod ? (
<PersonListing person={i.moderator} />
<PersonListing person={i.moderator.unwrap()} />
) : (
<div>{this.modOrAdminText(i.moderator)}</div>
)}
@ -546,14 +551,11 @@ export class Modlog extends Component<any, ModlogState> {
);
}
modOrAdminText(person: PersonSafe): string {
if (
this.isoData.site_res.admins.map(a => a.person.id).includes(person.id)
) {
return i18n.t("admin");
} else {
return i18n.t("mod");
}
modOrAdminText(person: Option<PersonSafe>): string {
return person.match({
some: res => this.isoData.site_res.admins.map(a => a.person.id).includes(res.id) ? i18n.t("admin") : i18n.t("mod"),
none: i18n.t("mod"),
});
}
get documentTitle(): string {
@ -565,7 +567,7 @@ export class Modlog extends Component<any, ModlogState> {
render() {
return (
<div class="container">
<div className="container">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
@ -578,9 +580,57 @@ export class Modlog extends Component<any, ModlogState> {
</h5>
) : (
<div>
<div class="table-responsive">
<table id="modlog_table" class="table table-sm table-hover">
<thead class="pointer">
<h5>
{this.state.communityName.isSome() && (
<Link
className="text-body"
to={`/c/${this.state.communityName}`}
>
/c/{this.state.communityName}{" "}
</Link>
)}
<span>{i18n.t("modlog")}</span>
</h5>
<form className="form-inline mr-2">
<select
value={this.state.filter_action}
onChange={linkEvent(this, this.handleFilterActionChange)}
className="custom-select col-4 mb-2"
aria-label="action">
<option disabled aria-hidden="true">{i18n.t("filter_by_action")}</option>
<option value={ModlogActionType.All}>{i18n.t("all")}</option>
<option value={ModlogActionType.ModRemovePost}>Removing Posts</option>
<option value={ModlogActionType.ModLockPost}>Locking Posts</option>
<option value={ModlogActionType.ModStickyPost}>Stickying Posts</option>
<option value={ModlogActionType.ModRemoveComment}>Removing Comments</option>
<option value={ModlogActionType.ModRemoveCommunity}>Removing Communities</option>
<option value={ModlogActionType.ModBanFromCommunity}>Banning From Communities</option>
<option value={ModlogActionType.ModAddCommunity}>Adding Mod to Community</option>
<option value={ModlogActionType.ModTransferCommunity}>Transfering Communities</option>
<option value={ModlogActionType.ModAdd}>Adding Mod to Site</option>
<option value={ModlogActionType.ModBan}>Banning From Site</option>
</select>
{
this.state.siteRes.site_view.match({
some: site_view => !site_view.site.hide_modlog_mod_names.unwrapOr(false) && (
<select
id="filter-mod"
value={toUndefined(this.state.filter_mod)}>
<option>{i18n.t("filter_by_mod")}</option>
</select>
),
none: <></>,
})
}
<select
id="filter-user"
value={toUndefined(this.state.filter_user)}>
<option>{i18n.t("filter_by_user")}</option>
</select>
</form>
<div className="table-responsive">
<table id="modlog_table" className="table table-sm table-hover">
<thead className="pointer">
<tr>
<th> {i18n.t("time")}</th>
<th>{i18n.t("mod")}</th>
@ -600,6 +650,11 @@ export class Modlog extends Component<any, ModlogState> {
);
}
handleFilterActionChange(i: Modlog, event: any) {
i.setState({ filter_action: event.target.value });
i.refetch();
}
handlePageChange(val: number) {
this.setState({ page: val });
this.refetch();
@ -608,10 +663,12 @@ export class Modlog extends Component<any, ModlogState> {
refetch() {
let modlogForm = new GetModlog({
community_id: this.state.communityId,
mod_person_id: None,
page: Some(this.state.page),
limit: Some(fetchLimit),
auth: auth(false).ok(),
type_: this.state.filter_action,
other_person_id: this.state.filter_user,
mod_person_id: this.state.filter_mod,
});
WebSocketService.Instance.send(wsClient.getModlog(modlogForm));
@ -628,6 +685,82 @@ export class Modlog extends Component<any, ModlogState> {
});
}
setupUserFilter() {
if (isBrowser()) {
let selectId: any = document.getElementById("filter-user");
if (selectId) {
this.userChoices = new Choices(selectId, choicesModLogConfig);
this.userChoices.passedElement.element.addEventListener(
"choice",
(e: any) => {
this.state.filter_user = Some(Number(e.detail.choice.value));
this.setState(this.state);
this.refetch();
},
false
);
this.userChoices.passedElement.element.addEventListener(
"search",
debounce(async (e: any) => {
try {
let users = (await fetchUsers(e.detail.value)).users;
this.userChoices.setChoices(
users.map(u => {return {
value: u.person.id.toString(),
label: u.person.name,
}}),
"value",
"label",
true
);
} catch (err) {
console.log(err);
}
}),
false
);
}
}
}
setupModFilter() {
if (isBrowser()) {
let selectId: any = document.getElementById("filter-mod");
if (selectId) {
this.modChoices = new Choices(selectId, choicesModLogConfig);
this.modChoices.passedElement.element.addEventListener(
"choice",
(e: any) => {
this.state.filter_mod = Some(Number(e.detail.choice.value));
this.setState(this.state);
this.refetch();
},
false
);
this.modChoices.passedElement.element.addEventListener(
"search",
debounce(async (e: any) => {
try {
let mods = (await fetchUsers(e.detail.value)).users;
this.modChoices.setChoices(
mods.map(u => {return {
value: u.person.id.toString(),
label: u.person.name,
}}),
"value",
"label",
true
);
} catch (err) {
console.log(err);
}
}),
false
);
}
}
}
static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
let pathSplit = req.path.split("/");
let communityId = Some(pathSplit[3]).map(Number);
@ -639,6 +772,8 @@ export class Modlog extends Component<any, ModlogState> {
community_id: communityId,
mod_person_id: None,
auth: req.auth,
type_: ModlogActionType.All,
other_person_id: None
});
promises.push(req.client.getModlog(modlogForm));
@ -671,6 +806,7 @@ export class Modlog extends Component<any, ModlogState> {
} else if (op == UserOperation.GetCommunity) {
let data = wsJsonToRes<GetCommunityResponse>(msg, GetCommunityResponse);
this.state.communityMods = Some(data.moderators);
this.state.communityName = Some(data.community_view.community.name);
}
}
}

35
src/shared/utils.ts
View file

@ -1292,7 +1292,7 @@ export function showLocal(isoData: IsoData): boolean {
.unwrapOr(false);
}
interface ChoicesValue {
export interface ChoicesValue {
value: string;
label: string;
}
@ -1380,6 +1380,39 @@ export const choicesConfig = {
},
};
export const choicesModLogConfig = {
shouldSort: false,
searchResultLimit: fetchLimit,
classNames: {
containerOuter: "choices mb-2 custom-select col-4 px-0",
containerInner: "choices__inner bg-secondary border-0 py-0 modlog-choices-font-size",
input: "form-control",
inputCloned: "choices__input--cloned w-100",
list: "choices__list",
listItems: "choices__list--multiple",
listSingle: "choices__list--single py-0",
listDropdown: "choices__list--dropdown",
item: "choices__item bg-secondary",
itemSelectable: "choices__item--selectable",
itemDisabled: "choices__item--disabled",
itemChoice: "choices__item--choice",
placeholder: "choices__placeholder",
group: "choices__group",
groupHeading: "choices__heading",
button: "choices__button",
activeState: "is-active",
focusState: "is-focused",
openState: "is-open",
disabledState: "is-disabled",
highlightedState: "text-info",
selectedState: "text-info",
flippedState: "is-flipped",
loadingState: "is-loading",
noResults: "has-no-results",
noChoices: "has-no-choices",
},
};
export function communitySelectName(cv: CommunityView): string {
return cv.community.local
? cv.community.title