feat(admin): add group filter in chat list

Author: moonrailgun

server/admin/app/ra/components/GroupField.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReferenceField, ReferenceFieldProps, TextField } from 'react-admin';
+
+export const GroupField: React.FC<Omit<ReferenceFieldProps, 'reference'>> =
+  React.memo((props) => {
+    return (
+      <ReferenceField link="show" {...props} reference="groups">
+        <TextField source="name" />
+      </ReferenceField>
+    );
+  });
+GroupField.displayName = 'GroupField';

server/admin/app/ra/components/PostListActionToolbar.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Box } from '@mui/material';
+
+export const PostListActionToolbar = ({ children, ...props }) => (
+  <Box sx={{ alignItems: 'center', display: 'flex' }}>{children}</Box>
+);

server/admin/app/ra/resources/chat.tsx

@@ -4,12 +4,17 @@ import {
   Datagrid,
   DateField,
   List,
-  ReferenceField,
   TextField,
   SearchInput,
   useTranslate,
   BulkDeleteButton,
+  ShowButton,
+  EditButton,
+  ReferenceInput,
+  SelectInput,
 } from 'react-admin';
+import { GroupField } from '../components/GroupField';
+import { PostListActionToolbar } from '../components/PostListActionToolbar';
 import { UserField } from '../components/UserField';
 
 export const MessageList: React.FC = () => {
@@ -24,6 +29,9 @@ export const MessageList: React.FC = () => {
           alwaysOn
           placeholder={translate('custom.users.search')}
         />,
+        <ReferenceInput key="groupID" source="groupId" reference="groups">
+          <SelectInput optionText="name" />
+        </ReferenceInput>,
       ]}
     >
       <Datagrid
@@ -33,11 +41,14 @@ export const MessageList: React.FC = () => {
         <TextField source="id" sortable={true} sortByOrder="DESC" />
         <TextField source="content" />
         <UserField source="author" />
-        <ReferenceField source="groupId" reference="groups" />
+        <GroupField source="groupId" />
         <TextField source="converseId" />
         <BooleanField source="hasRecall" />
         <TextField source="reactions" />
         <DateField source="createdAt" />
+        <PostListActionToolbar>
+          <ShowButton />
+        </PostListActionToolbar>
       </Datagrid>
     </List>
   );

server/admin/app/ra/resources/user.tsx

@@ -21,13 +21,9 @@ import {
   Labeled,
 } from 'react-admin';
 import React from 'react';
-import { Box } from '@mui/material';
 import { DangerButton } from '../components/DangerButton';
 import { ButtonWithConfirm } from '../components/ButtonWithConfirm';
-
-const PostListActionToolbar = ({ children, ...props }) => (
-  <Box sx={{ alignItems: 'center', display: 'flex' }}>{children}</Box>
-);
+import { PostListActionToolbar } from '../components/PostListActionToolbar';
 
 export const UserList: React.FC = () => {
   const translate = useTranslate();