Files
synapse-admin/src/resources/user_media_statistics.tsx
Aine abc922c956 Enable visual customization (#81)
* Enable visual customization

* update readme
2024-10-23 00:03:06 +03:00

57 lines
1.5 KiB
TypeScript

import PermMediaIcon from "@mui/icons-material/PermMedia";
import {
Datagrid,
DatagridConfigurable,
ExportButton,
List,
ListProps,
NumberField,
Pagination,
ResourceProps,
SearchInput,
TextField,
TopToolbar,
useListContext,
} from "react-admin";
import { DeleteMediaButton } from "../components/media";
const ListActions = () => {
const { isLoading, total } = useListContext();
return (
<TopToolbar>
<DeleteMediaButton />
<ExportButton disabled={isLoading || total === 0} />
</TopToolbar>
);
};
const UserMediaStatsPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
const userMediaStatsFilters = [<SearchInput source="search_term" alwaysOn />];
export const UserMediaStatsList = (props: ListProps) => (
<List
{...props}
actions={<ListActions />}
filters={userMediaStatsFilters}
pagination={<UserMediaStatsPagination />}
sort={{ field: "media_length", order: "DESC" }}
>
<DatagridConfigurable rowClick={id => "/users/" + id + "/media"} bulkActionButtons={false}>
<TextField source="user_id" label="resources.users.fields.id" />
<TextField source="displayname" label="resources.users.fields.displayname" />
<NumberField source="media_count" />
<NumberField source="media_length" />
</DatagridConfigurable>
</List>
);
const resource: ResourceProps = {
name: "user_media_statistics",
icon: PermMediaIcon,
list: UserMediaStatsList,
};
export default resource;