mirror of
https://github.com/UA-Fediland/synapse-admin.git
synced 2024-11-22 06:21:28 +00:00
Upgrade to React-Admin 4 (#332)
Change-Id: Ia03486edfd934438580e614af754a0966f6fd6e3
This commit is contained in:
parent
9f03ec9b0f
commit
b70ee7c55d
14 changed files with 601 additions and 1066 deletions
|
@ -18,12 +18,9 @@
|
||||||
"eslint-config-react-app": "^7.0.1",
|
"eslint-config-react-app": "^7.0.1",
|
||||||
"eslint-plugin-prettier": "^4.2.1",
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"jest-fetch-mock": "^3.0.3",
|
"jest-fetch-mock": "^3.0.3",
|
||||||
"prettier": "^2.2.0",
|
"prettier": "^2.2.0"
|
||||||
"ra-test": "^3.19.12"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "^11.11.1",
|
|
||||||
"@emotion/styled": "^11.10.6",
|
|
||||||
"@mui/icons-material": "^5.14.19",
|
"@mui/icons-material": "^5.14.19",
|
||||||
"@mui/material": "^5.14.8",
|
"@mui/material": "^5.14.8",
|
||||||
"@mui/styles": "5.14.10",
|
"@mui/styles": "5.14.10",
|
||||||
|
@ -34,7 +31,7 @@
|
||||||
"ra-language-german": "^3.13.4",
|
"ra-language-german": "^3.13.4",
|
||||||
"ra-language-italian": "^3.13.1",
|
"ra-language-italian": "^3.13.1",
|
||||||
"react": "^17.0.0",
|
"react": "^17.0.0",
|
||||||
"react-admin": "^3.19.12",
|
"react-admin": "^4.16.9",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-scripts": "^5.0.1"
|
"react-scripts": "^5.0.1"
|
||||||
},
|
},
|
||||||
|
|
13
src/App.js
13
src/App.js
|
@ -1,5 +1,10 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Admin, Resource, resolveBrowserLocale } from "react-admin";
|
import {
|
||||||
|
Admin,
|
||||||
|
CustomRoutes,
|
||||||
|
Resource,
|
||||||
|
resolveBrowserLocale,
|
||||||
|
} from "react-admin";
|
||||||
import polyglotI18nProvider from "ra-i18n-polyglot";
|
import polyglotI18nProvider from "ra-i18n-polyglot";
|
||||||
import authProvider from "./synapse/authProvider";
|
import authProvider from "./synapse/authProvider";
|
||||||
import dataProvider from "./synapse/dataProvider";
|
import dataProvider from "./synapse/dataProvider";
|
||||||
|
@ -50,10 +55,10 @@ const App = () => (
|
||||||
authProvider={authProvider}
|
authProvider={authProvider}
|
||||||
dataProvider={dataProvider}
|
dataProvider={dataProvider}
|
||||||
i18nProvider={i18nProvider}
|
i18nProvider={i18nProvider}
|
||||||
customRoutes={[
|
|
||||||
<Route key="userImport" path="/import_users" component={ImportFeature} />,
|
|
||||||
]}
|
|
||||||
>
|
>
|
||||||
|
<CustomRoutes>
|
||||||
|
<Route path="/import_users" element={<ImportFeature />} />
|
||||||
|
</CustomRoutes>
|
||||||
<Resource
|
<Resource
|
||||||
name="users"
|
name="users"
|
||||||
list={UserList}
|
list={UserList}
|
||||||
|
|
12
src/components/AvatarField.js
Normal file
12
src/components/AvatarField.js
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import React from "react";
|
||||||
|
import get from "lodash/get";
|
||||||
|
import { Avatar } from "@mui/material";
|
||||||
|
import { useRecordContext } from "react-admin";
|
||||||
|
|
||||||
|
const AvatarField = ({ source, ...rest }) => {
|
||||||
|
const record = useRecordContext(rest);
|
||||||
|
const src = get(record, source)?.toString();
|
||||||
|
return <Avatar src={src} {...rest} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AvatarField;
|
|
@ -1,19 +1,21 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
fetchUtils,
|
fetchUtils,
|
||||||
|
Form,
|
||||||
FormDataConsumer,
|
FormDataConsumer,
|
||||||
Notification,
|
Notification,
|
||||||
|
required,
|
||||||
useLogin,
|
useLogin,
|
||||||
useNotify,
|
useNotify,
|
||||||
useLocale,
|
useLocaleState,
|
||||||
useSetLocale,
|
|
||||||
useTranslate,
|
useTranslate,
|
||||||
PasswordInput,
|
PasswordInput,
|
||||||
TextInput,
|
TextInput,
|
||||||
} from "react-admin";
|
} from "react-admin";
|
||||||
import { Form, useForm } from "react-final-form";
|
import { useFormContext } from "react-hook-form";
|
||||||
import {
|
import {
|
||||||
Avatar,
|
Avatar,
|
||||||
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
CardActions,
|
CardActions,
|
||||||
|
@ -21,66 +23,64 @@ import {
|
||||||
MenuItem,
|
MenuItem,
|
||||||
Select,
|
Select,
|
||||||
TextField,
|
TextField,
|
||||||
|
Typography,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
import { styled } from "@mui/material/styles";
|
||||||
import LockIcon from "@mui/icons-material/Lock";
|
import LockIcon from "@mui/icons-material/Lock";
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
const FormBox = styled(Box)(({ theme }) => ({
|
||||||
main: {
|
display: "flex",
|
||||||
display: "flex",
|
flexDirection: "column",
|
||||||
flexDirection: "column",
|
minHeight: "calc(100vh - 1em)",
|
||||||
minHeight: "calc(100vh - 1em)",
|
alignItems: "center",
|
||||||
alignItems: "center",
|
justifyContent: "flex-start",
|
||||||
justifyContent: "flex-start",
|
background: "url(./images/floating-cogs.svg)",
|
||||||
background: "url(./images/floating-cogs.svg)",
|
backgroundColor: "#f9f9f9",
|
||||||
backgroundColor: "#f9f9f9",
|
backgroundRepeat: "no-repeat",
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundSize: "cover",
|
||||||
backgroundSize: "cover",
|
|
||||||
},
|
[`& .card`]: {
|
||||||
card: {
|
|
||||||
minWidth: "30em",
|
minWidth: "30em",
|
||||||
marginTop: "6em",
|
marginTop: "6em",
|
||||||
marginBottom: "6em",
|
marginBottom: "6em",
|
||||||
},
|
},
|
||||||
avatar: {
|
[`& .avatar`]: {
|
||||||
margin: "1em",
|
margin: "1em",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
},
|
},
|
||||||
icon: {
|
[`& .icon`]: {
|
||||||
backgroundColor: theme.palette.secondary.main,
|
backgroundColor: theme.palette.grey[500],
|
||||||
},
|
},
|
||||||
hint: {
|
[`& .hint`]: {
|
||||||
marginTop: "1em",
|
marginTop: "1em",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
color: theme.palette.grey[500],
|
color: theme.palette.grey[600],
|
||||||
},
|
},
|
||||||
form: {
|
[`& .form`]: {
|
||||||
padding: "0 1em 1em 1em",
|
padding: "0 1em 1em 1em",
|
||||||
},
|
},
|
||||||
input: {
|
[`& .input`]: {
|
||||||
marginTop: "1em",
|
marginTop: "1em",
|
||||||
},
|
},
|
||||||
actions: {
|
[`& .actions`]: {
|
||||||
padding: "0 1em 1em 1em",
|
padding: "0 1em 1em 1em",
|
||||||
},
|
},
|
||||||
serverVersion: {
|
[`& .serverVersion`]: {
|
||||||
color: "#9e9e9e",
|
color: theme.palette.grey[500],
|
||||||
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
fontFamily: "Roboto, Helvetica, Arial, sans-serif",
|
||||||
marginBottom: "1em",
|
marginBottom: "1em",
|
||||||
marginLeft: "0.5em",
|
marginLeft: "0.5em",
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const LoginPage = ({ theme }) => {
|
const LoginPage = () => {
|
||||||
const classes = useStyles({ theme });
|
|
||||||
const login = useLogin();
|
const login = useLogin();
|
||||||
const notify = useNotify();
|
const notify = useNotify();
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [supportPassAuth, setSupportPassAuth] = useState(true);
|
const [supportPassAuth, setSupportPassAuth] = useState(true);
|
||||||
var locale = useLocale();
|
const [locale, setLocale] = useLocaleState();
|
||||||
const setLocale = useSetLocale();
|
|
||||||
const translate = useTranslate();
|
const translate = useTranslate();
|
||||||
const base_url = localStorage.getItem("base_url");
|
const base_url = localStorage.getItem("base_url");
|
||||||
const cfg_base_url = process.env.REACT_APP_SERVER;
|
const cfg_base_url = process.env.REACT_APP_SERVER;
|
||||||
|
@ -135,28 +135,16 @@ const LoginPage = ({ theme }) => {
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
const validate = values => {
|
const validateBaseUrl = value => {
|
||||||
const errors = {};
|
if (!value.match(/^(http|https):\/\//)) {
|
||||||
if (!values.username) {
|
return translate("synapseadmin.auth.protocol_error");
|
||||||
errors.username = translate("ra.validation.required");
|
} else if (
|
||||||
}
|
!value.match(/^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?[^?&\s]*$/)
|
||||||
if (!values.password) {
|
) {
|
||||||
errors.password = translate("ra.validation.required");
|
return translate("synapseadmin.auth.url_error");
|
||||||
}
|
|
||||||
if (!values.base_url) {
|
|
||||||
errors.base_url = translate("ra.validation.required");
|
|
||||||
} else {
|
} else {
|
||||||
if (!values.base_url.match(/^(http|https):\/\//)) {
|
return undefined;
|
||||||
errors.base_url = translate("synapseadmin.auth.protocol_error");
|
|
||||||
} else if (
|
|
||||||
!values.base_url.match(
|
|
||||||
/^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?[^?&\s]*$/
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
errors.base_url = translate("synapseadmin.auth.url_error");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return errors;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = auth => {
|
const handleSubmit = auth => {
|
||||||
|
@ -191,7 +179,7 @@ const LoginPage = ({ theme }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const UserData = ({ formData }) => {
|
const UserData = ({ formData }) => {
|
||||||
const form = useForm();
|
const form = useFormContext();
|
||||||
const [serverVersion, setServerVersion] = useState("");
|
const [serverVersion, setServerVersion] = useState("");
|
||||||
|
|
||||||
const handleUsernameChange = _ => {
|
const handleUsernameChange = _ => {
|
||||||
|
@ -204,11 +192,11 @@ const LoginPage = ({ theme }) => {
|
||||||
fetchUtils
|
fetchUtils
|
||||||
.fetchJson(wellKnownUrl, { method: "GET" })
|
.fetchJson(wellKnownUrl, { method: "GET" })
|
||||||
.then(({ json }) => {
|
.then(({ json }) => {
|
||||||
form.change("base_url", json["m.homeserver"].base_url);
|
form.setValue("base_url", json["m.homeserver"].base_url);
|
||||||
})
|
})
|
||||||
.catch(_ => {
|
.catch(_ => {
|
||||||
// if there is no .well-known entry, try the home server name
|
// if there is no .well-known entry, try the home server name
|
||||||
form.change("base_url", `https://${home_server}`);
|
form.setValue("base_url", `https://${home_server}`);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -265,8 +253,8 @@ const LoginPage = ({ theme }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<div className={classes.input}>
|
<Box>
|
||||||
<TextInput
|
<TextInput
|
||||||
autoFocus
|
autoFocus
|
||||||
name="username"
|
name="username"
|
||||||
|
@ -276,9 +264,11 @@ const LoginPage = ({ theme }) => {
|
||||||
onBlur={handleUsernameChange}
|
onBlur={handleUsernameChange}
|
||||||
resettable
|
resettable
|
||||||
fullWidth
|
fullWidth
|
||||||
|
className="input"
|
||||||
|
validate={required()}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Box>
|
||||||
<div className={classes.input}>
|
<Box>
|
||||||
<PasswordInput
|
<PasswordInput
|
||||||
name="password"
|
name="password"
|
||||||
component={renderInput}
|
component={renderInput}
|
||||||
|
@ -287,9 +277,11 @@ const LoginPage = ({ theme }) => {
|
||||||
disabled={loading || !supportPassAuth}
|
disabled={loading || !supportPassAuth}
|
||||||
resettable
|
resettable
|
||||||
fullWidth
|
fullWidth
|
||||||
|
className="input"
|
||||||
|
validate={required()}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Box>
|
||||||
<div className={classes.input}>
|
<Box>
|
||||||
<TextInput
|
<TextInput
|
||||||
name="base_url"
|
name="base_url"
|
||||||
component={renderInput}
|
component={renderInput}
|
||||||
|
@ -297,79 +289,75 @@ const LoginPage = ({ theme }) => {
|
||||||
disabled={cfg_base_url || loading}
|
disabled={cfg_base_url || loading}
|
||||||
resettable
|
resettable
|
||||||
fullWidth
|
fullWidth
|
||||||
|
className="input"
|
||||||
|
validate={[required(), validateBaseUrl]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Box>
|
||||||
<div className={classes.serverVersion}>{serverVersion}</div>
|
<Typography className="serverVersion">{serverVersion}</Typography>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
initialValues={{ base_url: cfg_base_url || base_url }}
|
defaultValues={{ base_url: cfg_base_url || base_url }}
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
validate={validate}
|
mode="onTouched"
|
||||||
render={({ handleSubmit }) => (
|
>
|
||||||
<form onSubmit={handleSubmit} noValidate>
|
<FormBox>
|
||||||
<div className={classes.main}>
|
<Card className="card">
|
||||||
<Card className={classes.card}>
|
<Box className="avatar">
|
||||||
<div className={classes.avatar}>
|
<Avatar className="icon">
|
||||||
<Avatar className={classes.icon}>
|
<LockIcon />
|
||||||
<LockIcon />
|
</Avatar>
|
||||||
</Avatar>
|
</Box>
|
||||||
</div>
|
<Box className="hint">{translate("synapseadmin.auth.welcome")}</Box>
|
||||||
<div className={classes.hint}>
|
<Box className="form">
|
||||||
{translate("synapseadmin.auth.welcome")}
|
<Select
|
||||||
</div>
|
value={locale}
|
||||||
<div className={classes.form}>
|
onChange={e => {
|
||||||
<div className={classes.input}>
|
setLocale(e.target.value);
|
||||||
<Select
|
}}
|
||||||
value={locale}
|
fullWidth
|
||||||
onChange={e => {
|
disabled={loading}
|
||||||
setLocale(e.target.value);
|
className="input"
|
||||||
}}
|
>
|
||||||
fullWidth
|
<MenuItem value="de">Deutsch</MenuItem>
|
||||||
disabled={loading}
|
<MenuItem value="en">English</MenuItem>
|
||||||
>
|
<MenuItem value="fr">Français</MenuItem>
|
||||||
<MenuItem value="de">Deutsch</MenuItem>
|
<MenuItem value="it">Italiano</MenuItem>
|
||||||
<MenuItem value="en">English</MenuItem>
|
<MenuItem value="zh">简体中文</MenuItem>
|
||||||
<MenuItem value="fr">Français</MenuItem>
|
</Select>
|
||||||
<MenuItem value="it">Italiano</MenuItem>
|
<FormDataConsumer>
|
||||||
<MenuItem value="zh">简体中文</MenuItem>
|
{formDataProps => <UserData {...formDataProps} />}
|
||||||
</Select>
|
</FormDataConsumer>
|
||||||
</div>
|
<CardActions className="actions">
|
||||||
<FormDataConsumer>
|
<Button
|
||||||
{formDataProps => <UserData {...formDataProps} />}
|
variant="contained"
|
||||||
</FormDataConsumer>
|
type="submit"
|
||||||
</div>
|
color="primary"
|
||||||
<CardActions className={classes.actions}>
|
disabled={loading || !supportPassAuth}
|
||||||
<Button
|
fullWidth
|
||||||
variant="contained"
|
>
|
||||||
type="submit"
|
{loading && <CircularProgress size={25} thickness={2} />}
|
||||||
color="primary"
|
{translate("ra.auth.sign_in")}
|
||||||
disabled={loading || !supportPassAuth}
|
</Button>
|
||||||
fullWidth
|
<Button
|
||||||
>
|
variant="contained"
|
||||||
{loading && <CircularProgress size={25} thickness={2} />}
|
color="secondary"
|
||||||
{translate("ra.auth.sign_in")}
|
onClick={handleSSO}
|
||||||
</Button>
|
disabled={loading || ssoBaseUrl === ""}
|
||||||
<Button
|
fullWidth
|
||||||
variant="contained"
|
>
|
||||||
color="secondary"
|
{loading && <CircularProgress size={25} thickness={2} />}
|
||||||
onClick={handleSSO}
|
{translate("synapseadmin.auth.sso_sign_in")}
|
||||||
disabled={loading || ssoBaseUrl === ""}
|
</Button>
|
||||||
fullWidth
|
</CardActions>
|
||||||
>
|
</Box>
|
||||||
{loading && <CircularProgress size={25} thickness={2} />}
|
</Card>
|
||||||
{translate("synapseadmin.auth.sso_sign_in")}
|
</FormBox>
|
||||||
</Button>
|
<Notification />
|
||||||
</CardActions>
|
</Form>
|
||||||
</Card>
|
|
||||||
<Notification />
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { render } from "@testing-library/react";
|
import { render } from "@testing-library/react";
|
||||||
import { TestContext } from "ra-test";
|
import { AdminContext } from "react-admin";
|
||||||
import LoginPage from "./LoginPage";
|
import LoginPage from "./LoginPage";
|
||||||
|
|
||||||
describe("LoginForm", () => {
|
describe("LoginForm", () => {
|
||||||
it("renders", () => {
|
it("renders", () => {
|
||||||
render(
|
render(
|
||||||
<TestContext>
|
<AdminContext>
|
||||||
<LoginPage />
|
<LoginPage />
|
||||||
</TestContext>
|
</AdminContext>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,26 +1,28 @@
|
||||||
import React, { Fragment } from "react";
|
import React, { Fragment } from "react";
|
||||||
import { Avatar, Chip } from "@mui/material";
|
|
||||||
import { connect } from "react-redux";
|
|
||||||
import FolderSharedIcon from "@mui/icons-material/FolderShared";
|
import FolderSharedIcon from "@mui/icons-material/FolderShared";
|
||||||
import {
|
import {
|
||||||
BooleanField,
|
BooleanField,
|
||||||
BulkDeleteButton,
|
BulkDeleteButton,
|
||||||
Button,
|
Button,
|
||||||
Datagrid,
|
DatagridConfigurable,
|
||||||
|
ExportButton,
|
||||||
DeleteButton,
|
DeleteButton,
|
||||||
Filter,
|
|
||||||
List,
|
List,
|
||||||
NumberField,
|
NumberField,
|
||||||
Pagination,
|
Pagination,
|
||||||
|
SelectColumnsButton,
|
||||||
TextField,
|
TextField,
|
||||||
|
TopToolbar,
|
||||||
useCreate,
|
useCreate,
|
||||||
useMutation,
|
useListContext,
|
||||||
useNotify,
|
useNotify,
|
||||||
useTranslate,
|
useTranslate,
|
||||||
useRecordContext,
|
useRecordContext,
|
||||||
useRefresh,
|
useRefresh,
|
||||||
useUnselectAll,
|
useUnselectAll,
|
||||||
} from "react-admin";
|
} from "react-admin";
|
||||||
|
import { useMutation } from "react-query";
|
||||||
|
import AvatarField from "./AvatarField";
|
||||||
|
|
||||||
const RoomDirectoryPagination = props => (
|
const RoomDirectoryPagination = props => (
|
||||||
<Pagination {...props} rowsPerPageOptions={[100, 500, 1000, 2000]} />
|
<Pagination {...props} rowsPerPageOptions={[100, 500, 1000, 2000]} />
|
||||||
|
@ -59,26 +61,23 @@ export const RoomDirectoryBulkDeleteButton = props => (
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const RoomDirectoryBulkSaveButton = ({ selectedIds }) => {
|
export const RoomDirectoryBulkSaveButton = () => {
|
||||||
|
const { selectedIds } = useListContext();
|
||||||
const notify = useNotify();
|
const notify = useNotify();
|
||||||
const refresh = useRefresh();
|
const refresh = useRefresh();
|
||||||
const unselectAll = useUnselectAll();
|
const unselectAll = useUnselectAll();
|
||||||
const [createMany, { loading }] = useMutation();
|
const { createMany, isloading } = useMutation();
|
||||||
|
|
||||||
const handleSend = values => {
|
const handleSend = values => {
|
||||||
createMany(
|
createMany(
|
||||||
|
["room_directory", "createMany", { ids: selectedIds, data: {} }],
|
||||||
{
|
{
|
||||||
type: "createMany",
|
onSuccess: data => {
|
||||||
resource: "room_directory",
|
|
||||||
payload: { ids: selectedIds, data: {} },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
onSuccess: ({ data }) => {
|
|
||||||
notify("resources.room_directory.action.send_success");
|
notify("resources.room_directory.action.send_success");
|
||||||
unselectAll("rooms");
|
unselectAll("rooms");
|
||||||
refresh();
|
refresh();
|
||||||
},
|
},
|
||||||
onFailure: error =>
|
onError: error =>
|
||||||
notify("resources.room_directory.action.send_failure", {
|
notify("resources.room_directory.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
@ -90,30 +89,29 @@ export const RoomDirectoryBulkSaveButton = ({ selectedIds }) => {
|
||||||
<Button
|
<Button
|
||||||
label="resources.room_directory.action.create"
|
label="resources.room_directory.action.create"
|
||||||
onClick={handleSend}
|
onClick={handleSend}
|
||||||
disabled={loading}
|
disabled={isloading}
|
||||||
>
|
>
|
||||||
<FolderSharedIcon />
|
<FolderSharedIcon />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const RoomDirectorySaveButton = props => {
|
export const RoomDirectorySaveButton = () => {
|
||||||
const record = useRecordContext();
|
const record = useRecordContext();
|
||||||
const notify = useNotify();
|
const notify = useNotify();
|
||||||
const refresh = useRefresh();
|
const refresh = useRefresh();
|
||||||
const [create, { loading }] = useCreate("room_directory");
|
const [create, { isloading }] = useCreate();
|
||||||
|
|
||||||
const handleSend = values => {
|
const handleSend = values => {
|
||||||
create(
|
create(
|
||||||
|
"room_directory",
|
||||||
|
{ data: { id: record.id } },
|
||||||
{
|
{
|
||||||
payload: { data: { id: record.id } },
|
onSuccess: data => {
|
||||||
},
|
|
||||||
{
|
|
||||||
onSuccess: ({ data }) => {
|
|
||||||
notify("resources.room_directory.action.send_success");
|
notify("resources.room_directory.action.send_success");
|
||||||
refresh();
|
refresh();
|
||||||
},
|
},
|
||||||
onFailure: error =>
|
onError: error =>
|
||||||
notify("resources.room_directory.action.send_failure", {
|
notify("resources.room_directory.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
@ -125,127 +123,78 @@ export const RoomDirectorySaveButton = props => {
|
||||||
<Button
|
<Button
|
||||||
label="resources.room_directory.action.create"
|
label="resources.room_directory.action.create"
|
||||||
onClick={handleSend}
|
onClick={handleSend}
|
||||||
disabled={loading}
|
disabled={isloading}
|
||||||
>
|
>
|
||||||
<FolderSharedIcon />
|
<FolderSharedIcon />
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const RoomDirectoryBulkActionButtons = props => (
|
const RoomDirectoryBulkActionButtons = () => (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<RoomDirectoryBulkDeleteButton {...props} />
|
<RoomDirectoryBulkDeleteButton />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
const AvatarField = ({ source, className, record = {} }) => (
|
const RoomDirectoryListActions = () => (
|
||||||
<Avatar src={record[source]} className={className} />
|
<TopToolbar>
|
||||||
|
<SelectColumnsButton />
|
||||||
|
<ExportButton />
|
||||||
|
</TopToolbar>
|
||||||
);
|
);
|
||||||
|
|
||||||
const RoomDirectoryFilter = ({ ...props }) => {
|
export const RoomDirectoryList = () => (
|
||||||
const translate = useTranslate();
|
<List
|
||||||
return (
|
pagination={<RoomDirectoryPagination />}
|
||||||
<Filter {...props}>
|
perPage={100}
|
||||||
<Chip
|
actions={<RoomDirectoryListActions />}
|
||||||
label={translate("resources.rooms.fields.room_id")}
|
>
|
||||||
source="room_id"
|
<DatagridConfigurable
|
||||||
defaultValue={false}
|
rowClick={(id, resource, record) => "/rooms/" + id + "/show"}
|
||||||
sx={{ marginBottom: "8px" }}
|
|
||||||
/>
|
|
||||||
<Chip
|
|
||||||
label={translate("resources.rooms.fields.topic")}
|
|
||||||
source="topic"
|
|
||||||
defaultValue={false}
|
|
||||||
sx={{ marginBottom: "8px" }}
|
|
||||||
/>
|
|
||||||
<Chip
|
|
||||||
label={translate("resources.rooms.fields.canonical_alias")}
|
|
||||||
source="canonical_alias"
|
|
||||||
defaultValue={false}
|
|
||||||
sx={{ marginBottom: "8px" }}
|
|
||||||
/>
|
|
||||||
</Filter>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FilterableRoomDirectoryList = ({
|
|
||||||
roomDirectoryFilters,
|
|
||||||
dispatch,
|
|
||||||
...props
|
|
||||||
}) => {
|
|
||||||
const filter = roomDirectoryFilters;
|
|
||||||
const roomIdFilter = filter && filter.room_id ? true : false;
|
|
||||||
const topicFilter = filter && filter.topic ? true : false;
|
|
||||||
const canonicalAliasFilter = filter && filter.canonical_alias ? true : false;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<List
|
|
||||||
{...props}
|
|
||||||
pagination={<RoomDirectoryPagination />}
|
|
||||||
bulkActionButtons={<RoomDirectoryBulkActionButtons />}
|
bulkActionButtons={<RoomDirectoryBulkActionButtons />}
|
||||||
filters={<RoomDirectoryFilter />}
|
omit={["room_id", "canonical_alias", "topic"]}
|
||||||
perPage={100}
|
|
||||||
>
|
>
|
||||||
<Datagrid rowClick={(id, basePath, record) => "/rooms/" + id + "/show"}>
|
<AvatarField
|
||||||
<AvatarField
|
source="avatar_src"
|
||||||
source="avatar_src"
|
sortable={false}
|
||||||
sortable={false}
|
sx={{ height: "40px", width: "40px" }}
|
||||||
sx={{ height: "40px", width: "40px" }}
|
label="resources.rooms.fields.avatar"
|
||||||
label="resources.rooms.fields.avatar"
|
/>
|
||||||
/>
|
<TextField
|
||||||
<TextField
|
source="name"
|
||||||
source="name"
|
sortable={false}
|
||||||
sortable={false}
|
label="resources.rooms.fields.name"
|
||||||
label="resources.rooms.fields.name"
|
/>
|
||||||
/>
|
<TextField
|
||||||
{roomIdFilter && (
|
source="room_id"
|
||||||
<TextField
|
sortable={false}
|
||||||
source="room_id"
|
label="resources.rooms.fields.room_id"
|
||||||
sortable={false}
|
/>
|
||||||
label="resources.rooms.fields.room_id"
|
<TextField
|
||||||
/>
|
source="canonical_alias"
|
||||||
)}
|
sortable={false}
|
||||||
{canonicalAliasFilter && (
|
label="resources.rooms.fields.canonical_alias"
|
||||||
<TextField
|
/>
|
||||||
source="canonical_alias"
|
<TextField
|
||||||
sortable={false}
|
source="topic"
|
||||||
label="resources.rooms.fields.canonical_alias"
|
sortable={false}
|
||||||
/>
|
label="resources.rooms.fields.topic"
|
||||||
)}
|
/>
|
||||||
{topicFilter && (
|
<NumberField
|
||||||
<TextField
|
source="num_joined_members"
|
||||||
source="topic"
|
sortable={false}
|
||||||
sortable={false}
|
label="resources.rooms.fields.joined_members"
|
||||||
label="resources.rooms.fields.topic"
|
/>
|
||||||
/>
|
<BooleanField
|
||||||
)}
|
source="world_readable"
|
||||||
<NumberField
|
sortable={false}
|
||||||
source="num_joined_members"
|
label="resources.room_directory.fields.world_readable"
|
||||||
sortable={false}
|
/>
|
||||||
label="resources.rooms.fields.joined_members"
|
<BooleanField
|
||||||
/>
|
source="guest_can_join"
|
||||||
<BooleanField
|
sortable={false}
|
||||||
source="world_readable"
|
label="resources.room_directory.fields.guest_can_join"
|
||||||
sortable={false}
|
/>
|
||||||
label="resources.room_directory.fields.world_readable"
|
</DatagridConfigurable>
|
||||||
/>
|
</List>
|
||||||
<BooleanField
|
|
||||||
source="guest_can_join"
|
|
||||||
sortable={false}
|
|
||||||
label="resources.room_directory.fields.guest_can_join"
|
|
||||||
/>
|
|
||||||
</Datagrid>
|
|
||||||
</List>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
function mapStateToProps(state) {
|
|
||||||
return {
|
|
||||||
roomDirectoryFilters:
|
|
||||||
state.admin.resources.room_directory.list.params.displayedFilters,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const RoomDirectoryList = connect(mapStateToProps)(
|
|
||||||
FilterableRoomDirectoryList
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -7,12 +7,13 @@ import {
|
||||||
Toolbar,
|
Toolbar,
|
||||||
required,
|
required,
|
||||||
useCreate,
|
useCreate,
|
||||||
useMutation,
|
useListContext,
|
||||||
useNotify,
|
useNotify,
|
||||||
useRecordContext,
|
useRecordContext,
|
||||||
useTranslate,
|
useTranslate,
|
||||||
useUnselectAll,
|
useUnselectAll,
|
||||||
} from "react-admin";
|
} from "react-admin";
|
||||||
|
import { useMutation } from "react-query";
|
||||||
import MessageIcon from "@mui/icons-material/Message";
|
import MessageIcon from "@mui/icons-material/Message";
|
||||||
import IconCancel from "@mui/icons-material/Cancel";
|
import IconCancel from "@mui/icons-material/Cancel";
|
||||||
import {
|
import {
|
||||||
|
@ -48,7 +49,6 @@ const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
|
||||||
</DialogContentText>
|
</DialogContentText>
|
||||||
<SimpleForm
|
<SimpleForm
|
||||||
toolbar={<ServerNoticeToolbar />}
|
toolbar={<ServerNoticeToolbar />}
|
||||||
submitOnEnter={false}
|
|
||||||
redirect={false}
|
redirect={false}
|
||||||
save={onSend}
|
save={onSend}
|
||||||
>
|
>
|
||||||
|
@ -67,11 +67,11 @@ const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ServerNoticeButton = props => {
|
export const ServerNoticeButton = () => {
|
||||||
const record = useRecordContext();
|
const record = useRecordContext();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const notify = useNotify();
|
const notify = useNotify();
|
||||||
const [create, { loading }] = useCreate("servernotices");
|
const [create, { isloading }] = useCreate("servernotices");
|
||||||
|
|
||||||
const handleDialogOpen = () => setOpen(true);
|
const handleDialogOpen = () => setOpen(true);
|
||||||
const handleDialogClose = () => setOpen(false);
|
const handleDialogClose = () => setOpen(false);
|
||||||
|
@ -84,7 +84,7 @@ export const ServerNoticeButton = props => {
|
||||||
notify("resources.servernotices.action.send_success");
|
notify("resources.servernotices.action.send_success");
|
||||||
handleDialogClose();
|
handleDialogClose();
|
||||||
},
|
},
|
||||||
onFailure: () =>
|
onError: () =>
|
||||||
notify("resources.servernotices.action.send_failure", {
|
notify("resources.servernotices.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
@ -97,7 +97,7 @@ export const ServerNoticeButton = props => {
|
||||||
<Button
|
<Button
|
||||||
label="resources.servernotices.send"
|
label="resources.servernotices.send"
|
||||||
onClick={handleDialogOpen}
|
onClick={handleDialogOpen}
|
||||||
disabled={loading}
|
disabled={isloading}
|
||||||
>
|
>
|
||||||
<MessageIcon />
|
<MessageIcon />
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -110,29 +110,26 @@ export const ServerNoticeButton = props => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ServerNoticeBulkButton = ({ selectedIds }) => {
|
export const ServerNoticeBulkButton = () => {
|
||||||
|
const { selectedIds } = useListContext();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const notify = useNotify();
|
const notify = useNotify();
|
||||||
const unselectAll = useUnselectAll();
|
const unselectAll = useUnselectAll();
|
||||||
const [createMany, { loading }] = useMutation();
|
const { createMany, isloading } = useMutation();
|
||||||
|
|
||||||
const handleDialogOpen = () => setOpen(true);
|
const handleDialogOpen = () => setOpen(true);
|
||||||
const handleDialogClose = () => setOpen(false);
|
const handleDialogClose = () => setOpen(false);
|
||||||
|
|
||||||
const handleSend = values => {
|
const handleSend = values => {
|
||||||
createMany(
|
createMany(
|
||||||
|
["servernotices", "createMany", { ids: selectedIds, data: values }],
|
||||||
{
|
{
|
||||||
type: "createMany",
|
onSuccess: data => {
|
||||||
resource: "servernotices",
|
|
||||||
payload: { ids: selectedIds, data: values },
|
|
||||||
},
|
|
||||||
{
|
|
||||||
onSuccess: ({ data }) => {
|
|
||||||
notify("resources.servernotices.action.send_success");
|
notify("resources.servernotices.action.send_success");
|
||||||
unselectAll("users");
|
unselectAll("users");
|
||||||
handleDialogClose();
|
handleDialogClose();
|
||||||
},
|
},
|
||||||
onFailure: error =>
|
onError: error =>
|
||||||
notify("resources.servernotices.action.send_failure", {
|
notify("resources.servernotices.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
@ -145,7 +142,7 @@ export const ServerNoticeBulkButton = ({ selectedIds }) => {
|
||||||
<Button
|
<Button
|
||||||
label="resources.servernotices.send"
|
label="resources.servernotices.send"
|
||||||
onClick={handleDialogOpen}
|
onClick={handleDialogOpen}
|
||||||
disabled={loading}
|
disabled={isloading}
|
||||||
>
|
>
|
||||||
<MessageIcon />
|
<MessageIcon />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -37,11 +37,11 @@ const date_format = {
|
||||||
second: "2-digit",
|
second: "2-digit",
|
||||||
};
|
};
|
||||||
|
|
||||||
const destinationRowStyle = (record, index) => ({
|
const destinationRowSx = (record, _index) => ({
|
||||||
backgroundColor: record.retry_last_ts > 0 ? "#ffcccc" : "white",
|
backgroundColor: record.retry_last_ts > 0 ? "#ffcccc" : "white",
|
||||||
});
|
});
|
||||||
|
|
||||||
const DestinationFilter = ({ ...props }) => {
|
const DestinationFilter = props => {
|
||||||
return (
|
return (
|
||||||
<Filter {...props}>
|
<Filter {...props}>
|
||||||
<SearchInput source="destination" alwaysOn />
|
<SearchInput source="destination" alwaysOn />
|
||||||
|
@ -71,7 +71,7 @@ export const DestinationReconnectButton = props => {
|
||||||
});
|
});
|
||||||
refresh();
|
refresh();
|
||||||
},
|
},
|
||||||
onFailure: () => {
|
onError: () => {
|
||||||
notify("ra.message.error", { type: "error" });
|
notify("ra.message.error", { type: "error" });
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
@ -112,11 +112,11 @@ export const DestinationList = props => {
|
||||||
filters={<DestinationFilter />}
|
filters={<DestinationFilter />}
|
||||||
pagination={<DestinationPagination />}
|
pagination={<DestinationPagination />}
|
||||||
sort={{ field: "destination", order: "ASC" }}
|
sort={{ field: "destination", order: "ASC" }}
|
||||||
bulkActionButtons={false}
|
|
||||||
>
|
>
|
||||||
<Datagrid
|
<Datagrid
|
||||||
rowStyle={destinationRowStyle}
|
rowSx={destinationRowSx}
|
||||||
rowClick={(id, basePath, record) => `${basePath}/${id}/show/rooms`}
|
rowClick={(id, _resource, _record) => `${id}/show/rooms`}
|
||||||
|
bulkActionButtons={false}
|
||||||
>
|
>
|
||||||
<TextField source="destination" />
|
<TextField source="destination" />
|
||||||
<DateField source="failure_ts" showTime options={date_format} />
|
<DateField source="failure_ts" showTime options={date_format} />
|
||||||
|
@ -160,7 +160,7 @@ export const DestinationShow = props => {
|
||||||
>
|
>
|
||||||
<Datagrid
|
<Datagrid
|
||||||
style={{ width: "100%" }}
|
style={{ width: "100%" }}
|
||||||
rowClick={(id, basePath, record) => `/rooms/${id}/show`}
|
rowClick={(id, resource, record) => `/rooms/${id}/show`}
|
||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
source="room_id"
|
source="room_id"
|
||||||
|
|
|
@ -8,29 +8,11 @@ import {
|
||||||
useRefresh,
|
useRefresh,
|
||||||
} from "react-admin";
|
} from "react-admin";
|
||||||
import ActionDelete from "@mui/icons-material/Delete";
|
import ActionDelete from "@mui/icons-material/Delete";
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
import { alpha, useTheme } from "@mui/material/styles";
|
||||||
import { alpha } from "@mui/material/styles";
|
|
||||||
import classnames from "classnames";
|
|
||||||
|
|
||||||
const useStyles = makeStyles(
|
|
||||||
theme => ({
|
|
||||||
deleteButton: {
|
|
||||||
color: theme.palette.error.main,
|
|
||||||
"&:hover": {
|
|
||||||
backgroundColor: alpha(theme.palette.error.main, 0.12),
|
|
||||||
// Reset on mouse devices
|
|
||||||
"@media (hover: none)": {
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ name: "RaDeleteDeviceButton" }
|
|
||||||
);
|
|
||||||
|
|
||||||
export const DeviceRemoveButton = props => {
|
export const DeviceRemoveButton = props => {
|
||||||
|
const theme = useTheme();
|
||||||
const record = useRecordContext();
|
const record = useRecordContext();
|
||||||
const classes = useStyles(props);
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const refresh = useRefresh();
|
const refresh = useRefresh();
|
||||||
const notify = useNotify();
|
const notify = useNotify();
|
||||||
|
@ -63,7 +45,16 @@ export const DeviceRemoveButton = props => {
|
||||||
<Button
|
<Button
|
||||||
label="ra.action.remove"
|
label="ra.action.remove"
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
className={classnames("ra-delete-button", classes.deleteButton)}
|
sx={{
|
||||||
|
color: theme.palette.error.main,
|
||||||
|
"&:hover": {
|
||||||
|
backgroundColor: alpha(theme.palette.error.main, 0.12),
|
||||||
|
// Reset on mouse devices
|
||||||
|
"@media (hover: none)": {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<ActionDelete />
|
<ActionDelete />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -1,7 +1,4 @@
|
||||||
import React, { Fragment, useState } from "react";
|
import React, { Fragment, useState } from "react";
|
||||||
import classnames from "classnames";
|
|
||||||
import { alpha } from "@mui/material/styles";
|
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
|
||||||
import {
|
import {
|
||||||
BooleanInput,
|
BooleanInput,
|
||||||
Button,
|
Button,
|
||||||
|
@ -30,22 +27,7 @@ import {
|
||||||
import IconCancel from "@mui/icons-material/Cancel";
|
import IconCancel from "@mui/icons-material/Cancel";
|
||||||
import LockIcon from "@mui/icons-material/Lock";
|
import LockIcon from "@mui/icons-material/Lock";
|
||||||
import LockOpenIcon from "@mui/icons-material/LockOpen";
|
import LockOpenIcon from "@mui/icons-material/LockOpen";
|
||||||
|
import { alpha, useTheme } from "@mui/material/styles";
|
||||||
const useStyles = makeStyles(
|
|
||||||
theme => ({
|
|
||||||
deleteButton: {
|
|
||||||
color: theme.palette.error.main,
|
|
||||||
"&:hover": {
|
|
||||||
backgroundColor: alpha(theme.palette.error.main, 0.12),
|
|
||||||
// Reset on mouse devices
|
|
||||||
"@media (hover: none)": {
|
|
||||||
backgroundColor: "transparent",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{ name: "RaDeleteDeviceButton" }
|
|
||||||
);
|
|
||||||
|
|
||||||
const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
|
const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
|
||||||
const translate = useTranslate();
|
const translate = useTranslate();
|
||||||
|
@ -81,7 +63,6 @@ const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
|
||||||
</DialogContentText>
|
</DialogContentText>
|
||||||
<SimpleForm
|
<SimpleForm
|
||||||
toolbar={<DeleteMediaToolbar />}
|
toolbar={<DeleteMediaToolbar />}
|
||||||
submitOnEnter={false}
|
|
||||||
redirect={false}
|
redirect={false}
|
||||||
save={onSend}
|
save={onSend}
|
||||||
>
|
>
|
||||||
|
@ -113,10 +94,10 @@ const DeleteMediaDialog = ({ open, loading, onClose, onSend }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DeleteMediaButton = props => {
|
export const DeleteMediaButton = props => {
|
||||||
const classes = useStyles(props);
|
const theme = useTheme();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const notify = useNotify();
|
const notify = useNotify();
|
||||||
const [deleteOne, { loading }] = useDelete("delete_media");
|
const [deleteOne, { isLoading }] = useDelete("delete_media");
|
||||||
|
|
||||||
const handleDialogOpen = () => setOpen(true);
|
const handleDialogOpen = () => setOpen(true);
|
||||||
const handleDialogClose = () => setOpen(false);
|
const handleDialogClose = () => setOpen(false);
|
||||||
|
@ -129,7 +110,7 @@ export const DeleteMediaButton = props => {
|
||||||
notify("resources.delete_media.action.send_success");
|
notify("resources.delete_media.action.send_success");
|
||||||
handleDialogClose();
|
handleDialogClose();
|
||||||
},
|
},
|
||||||
onFailure: () =>
|
onError: () =>
|
||||||
notify("resources.delete_media.action.send_failure", {
|
notify("resources.delete_media.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
@ -142,8 +123,17 @@ export const DeleteMediaButton = props => {
|
||||||
<Button
|
<Button
|
||||||
label="resources.delete_media.action.send"
|
label="resources.delete_media.action.send"
|
||||||
onClick={handleDialogOpen}
|
onClick={handleDialogOpen}
|
||||||
disabled={loading}
|
disabled={isLoading}
|
||||||
className={classnames("ra-delete-button", classes.deleteButton)}
|
sx={{
|
||||||
|
color: theme.palette.error.main,
|
||||||
|
"&:hover": {
|
||||||
|
backgroundColor: alpha(theme.palette.error.main, 0.12),
|
||||||
|
// Reset on mouse devices
|
||||||
|
"@media (hover: none)": {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<DeleteSweepIcon />
|
<DeleteSweepIcon />
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -174,7 +164,7 @@ export const ProtectMediaButton = props => {
|
||||||
notify("resources.protect_media.action.send_success");
|
notify("resources.protect_media.action.send_success");
|
||||||
refresh();
|
refresh();
|
||||||
},
|
},
|
||||||
onFailure: () =>
|
onError: () =>
|
||||||
notify("resources.protect_media.action.send_failure", {
|
notify("resources.protect_media.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
@ -190,7 +180,7 @@ export const ProtectMediaButton = props => {
|
||||||
notify("resources.protect_media.action.send_success");
|
notify("resources.protect_media.action.send_success");
|
||||||
refresh();
|
refresh();
|
||||||
},
|
},
|
||||||
onFailure: () =>
|
onError: () =>
|
||||||
notify("resources.protect_media.action.send_failure", {
|
notify("resources.protect_media.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
@ -270,7 +260,7 @@ export const QuarantineMediaButton = props => {
|
||||||
notify("resources.quarantine_media.action.send_success");
|
notify("resources.quarantine_media.action.send_success");
|
||||||
refresh();
|
refresh();
|
||||||
},
|
},
|
||||||
onFailure: () =>
|
onError: () =>
|
||||||
notify("resources.quarantine_media.action.send_failure", {
|
notify("resources.quarantine_media.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
@ -286,7 +276,7 @@ export const QuarantineMediaButton = props => {
|
||||||
notify("resources.quarantine_media.action.send_success");
|
notify("resources.quarantine_media.action.send_success");
|
||||||
refresh();
|
refresh();
|
||||||
},
|
},
|
||||||
onFailure: () =>
|
onError: () =>
|
||||||
notify("resources.quarantine_media.action.send_failure", {
|
notify("resources.quarantine_media.action.send_failure", {
|
||||||
type: "error",
|
type: "error",
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -1,18 +1,21 @@
|
||||||
import React, { Fragment } from "react";
|
import React, { Fragment } from "react";
|
||||||
import { connect } from "react-redux";
|
|
||||||
import {
|
import {
|
||||||
BooleanField,
|
BooleanField,
|
||||||
BulkDeleteButton,
|
BulkDeleteButton,
|
||||||
DateField,
|
DateField,
|
||||||
Datagrid,
|
Datagrid,
|
||||||
|
DatagridConfigurable,
|
||||||
DeleteButton,
|
DeleteButton,
|
||||||
|
ExportButton,
|
||||||
Filter,
|
Filter,
|
||||||
|
FunctionField,
|
||||||
List,
|
List,
|
||||||
NumberField,
|
NumberField,
|
||||||
Pagination,
|
Pagination,
|
||||||
ReferenceField,
|
ReferenceField,
|
||||||
ReferenceManyField,
|
ReferenceManyField,
|
||||||
SearchInput,
|
SearchInput,
|
||||||
|
SelectColumnsButton,
|
||||||
SelectField,
|
SelectField,
|
||||||
Show,
|
Show,
|
||||||
Tab,
|
Tab,
|
||||||
|
@ -22,9 +25,7 @@ import {
|
||||||
useRecordContext,
|
useRecordContext,
|
||||||
useTranslate,
|
useTranslate,
|
||||||
} from "react-admin";
|
} from "react-admin";
|
||||||
import get from "lodash/get";
|
import { useTheme } from "@mui/material/styles";
|
||||||
import PropTypes from "prop-types";
|
|
||||||
import { Tooltip, Typography, Chip } from "@mui/material";
|
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import FastForwardIcon from "@mui/icons-material/FastForward";
|
import FastForwardIcon from "@mui/icons-material/FastForward";
|
||||||
import HttpsIcon from "@mui/icons-material/Https";
|
import HttpsIcon from "@mui/icons-material/Https";
|
||||||
|
@ -54,32 +55,6 @@ const RoomPagination = props => (
|
||||||
<Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
|
<Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
|
||||||
);
|
);
|
||||||
|
|
||||||
const EncryptionField = ({ source, record = {}, emptyText }) => {
|
|
||||||
const translate = useTranslate();
|
|
||||||
const value = get(record, source);
|
|
||||||
let ariaLabel = value === false ? "ra.boolean.false" : "ra.boolean.true";
|
|
||||||
|
|
||||||
if (value === false || value === true) {
|
|
||||||
return (
|
|
||||||
<Typography component="span" variant="body2">
|
|
||||||
<Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
|
|
||||||
{value === true ? (
|
|
||||||
<HttpsIcon data-testid="true" htmlColor="limegreen" />
|
|
||||||
) : (
|
|
||||||
<NoEncryptionIcon data-testid="false" color="error" />
|
|
||||||
)}
|
|
||||||
</Tooltip>
|
|
||||||
</Typography>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Typography component="span" variant="body2">
|
|
||||||
{emptyText}
|
|
||||||
</Typography>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const RoomTitle = props => {
|
const RoomTitle = props => {
|
||||||
const record = useRecordContext();
|
const record = useRecordContext();
|
||||||
const translate = useTranslate();
|
const translate = useTranslate();
|
||||||
|
@ -95,7 +70,7 @@ const RoomTitle = props => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const RoomShowActions = ({ basePath, data, resource }) => {
|
const RoomShowActions = ({ data, resource }) => {
|
||||||
var roomDirectoryStatus = "";
|
var roomDirectoryStatus = "";
|
||||||
if (data) {
|
if (data) {
|
||||||
roomDirectoryStatus = data.public;
|
roomDirectoryStatus = data.public;
|
||||||
|
@ -110,7 +85,6 @@ const RoomShowActions = ({ basePath, data, resource }) => {
|
||||||
<RoomDirectoryDeleteButton record={data} />
|
<RoomDirectoryDeleteButton record={data} />
|
||||||
)}
|
)}
|
||||||
<DeleteButton
|
<DeleteButton
|
||||||
basePath={basePath}
|
|
||||||
record={data}
|
record={data}
|
||||||
resource={resource}
|
resource={resource}
|
||||||
mutationMode="pessimistic"
|
mutationMode="pessimistic"
|
||||||
|
@ -163,7 +137,7 @@ export const RoomShow = props => {
|
||||||
>
|
>
|
||||||
<Datagrid
|
<Datagrid
|
||||||
style={{ width: "100%" }}
|
style={{ width: "100%" }}
|
||||||
rowClick={(id, basePath, record) => "/users/" + id}
|
rowClick={(id, resource, record) => "/users/" + id}
|
||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
source="id"
|
source="id"
|
||||||
|
@ -304,12 +278,11 @@ export const RoomShow = props => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const RoomBulkActionButtons = props => (
|
const RoomBulkActionButtons = () => (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<RoomDirectoryBulkSaveButton {...props} />
|
<RoomDirectoryBulkSaveButton />
|
||||||
<RoomDirectoryBulkDeleteButton {...props} />
|
<RoomDirectoryBulkDeleteButton />
|
||||||
<BulkDeleteButton
|
<BulkDeleteButton
|
||||||
{...props}
|
|
||||||
confirmTitle="resources.rooms.action.erase.title"
|
confirmTitle="resources.rooms.action.erase.title"
|
||||||
confirmContent="resources.rooms.action.erase.content"
|
confirmContent="resources.rooms.action.erase.content"
|
||||||
mutationMode="pessimistic"
|
mutationMode="pessimistic"
|
||||||
|
@ -317,91 +290,63 @@ const RoomBulkActionButtons = props => (
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
const RoomFilter = ({ ...props }) => {
|
const RoomFilter = props => (
|
||||||
const translate = useTranslate();
|
<Filter {...props}>
|
||||||
return (
|
<SearchInput source="search_term" alwaysOn />
|
||||||
<Filter {...props}>
|
</Filter>
|
||||||
<SearchInput source="search_term" alwaysOn />
|
);
|
||||||
<Chip
|
|
||||||
label={translate("resources.rooms.fields.joined_local_members")}
|
|
||||||
source="joined_local_members"
|
|
||||||
defaultValue={false}
|
|
||||||
sx={{ marginBottom: "8px" }}
|
|
||||||
/>
|
|
||||||
<Chip
|
|
||||||
label={translate("resources.rooms.fields.state_events")}
|
|
||||||
source="state_events"
|
|
||||||
defaultValue={false}
|
|
||||||
sx={{ marginBottom: "8px" }}
|
|
||||||
/>
|
|
||||||
<Chip
|
|
||||||
label={translate("resources.rooms.fields.version")}
|
|
||||||
source="version"
|
|
||||||
defaultValue={false}
|
|
||||||
sx={{ marginBottom: "8px" }}
|
|
||||||
/>
|
|
||||||
<Chip
|
|
||||||
label={translate("resources.rooms.fields.federatable")}
|
|
||||||
source="federatable"
|
|
||||||
defaultValue={false}
|
|
||||||
sx={{ marginBottom: "8px" }}
|
|
||||||
/>
|
|
||||||
</Filter>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const RoomNameField = props => {
|
const RoomListActions = () => (
|
||||||
const { source } = props;
|
<TopToolbar>
|
||||||
const record = useRecordContext();
|
<SelectColumnsButton />
|
||||||
return (
|
<ExportButton />
|
||||||
<span>{record[source] || record["canonical_alias"] || record["id"]}</span>
|
</TopToolbar>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
RoomNameField.propTypes = {
|
export const RoomList = () => {
|
||||||
label: PropTypes.string,
|
const theme = useTheme();
|
||||||
record: PropTypes.object,
|
|
||||||
source: PropTypes.string.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
const FilterableRoomList = ({ roomFilters, dispatch, ...props }) => {
|
|
||||||
const filter = roomFilters;
|
|
||||||
const localMembersFilter =
|
|
||||||
filter && filter.joined_local_members ? true : false;
|
|
||||||
const stateEventsFilter = filter && filter.state_events ? true : false;
|
|
||||||
const versionFilter = filter && filter.version ? true : false;
|
|
||||||
const federateableFilter = filter && filter.federatable ? true : false;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List
|
<List
|
||||||
{...props}
|
|
||||||
pagination={<RoomPagination />}
|
pagination={<RoomPagination />}
|
||||||
sort={{ field: "name", order: "ASC" }}
|
sort={{ field: "name", order: "ASC" }}
|
||||||
filters={<RoomFilter />}
|
filters={<RoomFilter />}
|
||||||
bulkActionButtons={<RoomBulkActionButtons />}
|
actions={<RoomListActions />}
|
||||||
>
|
>
|
||||||
<Datagrid rowClick="show">
|
<DatagridConfigurable
|
||||||
<EncryptionField
|
rowClick="show"
|
||||||
|
bulkActionButtons={<RoomBulkActionButtons />}
|
||||||
|
omit={[
|
||||||
|
"joined_local_members",
|
||||||
|
"state_events",
|
||||||
|
"version",
|
||||||
|
"federatable",
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<BooleanField
|
||||||
source="is_encrypted"
|
source="is_encrypted"
|
||||||
sortBy="encryption"
|
sortBy="encryption"
|
||||||
|
TrueIcon={HttpsIcon}
|
||||||
|
FalseIcon={NoEncryptionIcon}
|
||||||
label={<HttpsIcon />}
|
label={<HttpsIcon />}
|
||||||
|
sx={{
|
||||||
|
[`& [data-testid="true"]`]: { color: theme.palette.success.main },
|
||||||
|
[`& [data-testid="false"]`]: { color: theme.palette.error.main },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<FunctionField
|
||||||
|
source="name"
|
||||||
|
render={record =>
|
||||||
|
record["name"] || record["canonical_alias"] || record["id"]
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
<RoomNameField source="name" />
|
|
||||||
<TextField source="joined_members" />
|
<TextField source="joined_members" />
|
||||||
{localMembersFilter && <TextField source="joined_local_members" />}
|
<TextField source="joined_local_members" />
|
||||||
{stateEventsFilter && <TextField source="state_events" />}
|
<TextField source="state_events" />
|
||||||
{versionFilter && <TextField source="version" />}
|
<TextField source="version" />
|
||||||
{federateableFilter && <BooleanField source="federatable" />}
|
<BooleanField source="federatable" />
|
||||||
<BooleanField source="public" />
|
<BooleanField source="public" />
|
||||||
</Datagrid>
|
</DatagridConfigurable>
|
||||||
</List>
|
</List>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
function mapStateToProps(state) {
|
|
||||||
return {
|
|
||||||
roomFilters: state.admin.resources.rooms.list.params.displayedFilters,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export const RoomList = connect(mapStateToProps)(FilterableRoomList);
|
|
||||||
|
|
|
@ -65,9 +65,11 @@ export const UserMediaStatsList = props => {
|
||||||
filters={<UserMediaStatsFilter />}
|
filters={<UserMediaStatsFilter />}
|
||||||
pagination={<UserMediaStatsPagination />}
|
pagination={<UserMediaStatsPagination />}
|
||||||
sort={{ field: "media_length", order: "DESC" }}
|
sort={{ field: "media_length", order: "DESC" }}
|
||||||
bulkActionButtons={false}
|
|
||||||
>
|
>
|
||||||
<Datagrid rowClick={(id, basePath, record) => "/users/" + id + "/media"}>
|
<Datagrid
|
||||||
|
rowClick={(id, resource, record) => "/users/" + id + "/media"}
|
||||||
|
bulkActionButtons={false}
|
||||||
|
>
|
||||||
<TextField source="user_id" label="resources.users.fields.id" />
|
<TextField source="user_id" label="resources.users.fields.id" />
|
||||||
<TextField
|
<TextField
|
||||||
source="displayname"
|
source="displayname"
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import React, { cloneElement, Fragment } from "react";
|
import React, { cloneElement, Fragment } from "react";
|
||||||
import Avatar from "@mui/material/Avatar";
|
|
||||||
import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
|
import AssignmentIndIcon from "@mui/icons-material/AssignmentInd";
|
||||||
import ContactMailIcon from "@mui/icons-material/ContactMail";
|
import ContactMailIcon from "@mui/icons-material/ContactMail";
|
||||||
import DevicesIcon from "@mui/icons-material/Devices";
|
import DevicesIcon from "@mui/icons-material/Devices";
|
||||||
|
@ -49,16 +48,11 @@ import {
|
||||||
NumberField,
|
NumberField,
|
||||||
} from "react-admin";
|
} from "react-admin";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
import AvatarField from "./AvatarField";
|
||||||
import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
|
import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
|
||||||
import { DeviceRemoveButton } from "./devices";
|
import { DeviceRemoveButton } from "./devices";
|
||||||
import { ProtectMediaButton, QuarantineMediaButton } from "./media";
|
import { ProtectMediaButton, QuarantineMediaButton } from "./media";
|
||||||
|
|
||||||
const redirect = () => {
|
|
||||||
return {
|
|
||||||
pathname: "/import_users",
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const choices_medium = [
|
const choices_medium = [
|
||||||
{ id: "email", name: "resources.users.email" },
|
{ id: "email", name: "resources.users.email" },
|
||||||
{ id: "msisdn", name: "resources.users.msisdn" },
|
{ id: "msisdn", name: "resources.users.msisdn" },
|
||||||
|
@ -88,7 +82,6 @@ const UserListActions = ({
|
||||||
filterValues,
|
filterValues,
|
||||||
permanentFilter,
|
permanentFilter,
|
||||||
hasCreate, // you can hide CreateButton if hasCreate = false
|
hasCreate, // you can hide CreateButton if hasCreate = false
|
||||||
basePath,
|
|
||||||
selectedIds,
|
selectedIds,
|
||||||
onUnselectItems,
|
onUnselectItems,
|
||||||
showFilter,
|
showFilter,
|
||||||
|
@ -106,7 +99,7 @@ const UserListActions = ({
|
||||||
filterValues,
|
filterValues,
|
||||||
context: "button",
|
context: "button",
|
||||||
})}
|
})}
|
||||||
<CreateButton basePath={basePath} />
|
<CreateButton />
|
||||||
<ExportButton
|
<ExportButton
|
||||||
disabled={total === 0}
|
disabled={total === 0}
|
||||||
resource={resource}
|
resource={resource}
|
||||||
|
@ -116,7 +109,7 @@ const UserListActions = ({
|
||||||
maxResults={maxResults}
|
maxResults={maxResults}
|
||||||
/>
|
/>
|
||||||
{/* Add your custom actions */}
|
{/* Add your custom actions */}
|
||||||
<Button component={Link} to={redirect} label="CSV Import">
|
<Button component={Link} to="/import_users" label="CSV Import">
|
||||||
<GetAppIcon sx={{ transform: "rotate(180deg)", fontSize: "20px" }} />
|
<GetAppIcon sx={{ transform: "rotate(180deg)", fontSize: "20px" }} />
|
||||||
</Button>
|
</Button>
|
||||||
</TopToolbar>
|
</TopToolbar>
|
||||||
|
@ -156,10 +149,6 @@ const UserBulkActionButtons = props => (
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
const AvatarField = ({ source, record = {}, sx }) => (
|
|
||||||
<Avatar src={record[source]} sx={sx} />
|
|
||||||
);
|
|
||||||
|
|
||||||
export const UserList = props => {
|
export const UserList = props => {
|
||||||
return (
|
return (
|
||||||
<List
|
<List
|
||||||
|
@ -168,10 +157,9 @@ export const UserList = props => {
|
||||||
filterDefaultValues={{ guests: true, deactivated: false }}
|
filterDefaultValues={{ guests: true, deactivated: false }}
|
||||||
sort={{ field: "name", order: "ASC" }}
|
sort={{ field: "name", order: "ASC" }}
|
||||||
actions={<UserListActions maxResults={10000} />}
|
actions={<UserListActions maxResults={10000} />}
|
||||||
bulkActionButtons={<UserBulkActionButtons />}
|
|
||||||
pagination={<UserPagination />}
|
pagination={<UserPagination />}
|
||||||
>
|
>
|
||||||
<Datagrid rowClick="edit">
|
<Datagrid rowClick="edit" bulkActionButtons={<UserBulkActionButtons />}>
|
||||||
<AvatarField
|
<AvatarField
|
||||||
source="avatar_src"
|
source="avatar_src"
|
||||||
sx={{ height: "40px", width: "40px" }}
|
sx={{ height: "40px", width: "40px" }}
|
||||||
|
@ -248,7 +236,7 @@ export function generateRandomUser() {
|
||||||
|
|
||||||
const UserEditToolbar = props => (
|
const UserEditToolbar = props => (
|
||||||
<Toolbar {...props}>
|
<Toolbar {...props}>
|
||||||
<SaveButton submitOnEnter={true} disabled={props.pristine} />
|
<SaveButton disabled={props.pristine} />
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -288,7 +276,6 @@ export const UserCreate = props => (
|
||||||
source="user_type"
|
source="user_type"
|
||||||
choices={choices_type}
|
choices={choices_type}
|
||||||
translateChoice={false}
|
translateChoice={false}
|
||||||
allowEmpty={true}
|
|
||||||
resettable
|
resettable
|
||||||
/>
|
/>
|
||||||
<BooleanInput source="admin" />
|
<BooleanInput source="admin" />
|
||||||
|
@ -354,7 +341,6 @@ export const UserEdit = props => {
|
||||||
source="user_type"
|
source="user_type"
|
||||||
choices={choices_type}
|
choices={choices_type}
|
||||||
translateChoice={false}
|
translateChoice={false}
|
||||||
allowEmpty={true}
|
|
||||||
resettable
|
resettable
|
||||||
/>
|
/>
|
||||||
<BooleanInput source="admin" />
|
<BooleanInput source="admin" />
|
||||||
|
@ -498,7 +484,7 @@ export const UserEdit = props => {
|
||||||
>
|
>
|
||||||
<Datagrid
|
<Datagrid
|
||||||
style={{ width: "100%" }}
|
style={{ width: "100%" }}
|
||||||
rowClick={(id, basePath, record) => "/rooms/" + id + "/show"}
|
rowClick={(id, resource, record) => "/rooms/" + id + "/show"}
|
||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
source="id"
|
source="id"
|
||||||
|
|
Loading…
Reference in a new issue