From 1256ba042993018cadfae0b20b15a11e9998165d Mon Sep 17 00:00:00 2001
From: binwiederhier <pheckel@datto.com>
Date: Mon, 2 Jan 2023 10:46:37 -0500
Subject: [PATCH] Reserved topics dialog
---
web/public/static/langs/en.json | 4 ++
web/src/components/Preferences.js | 110 +++++++++++++++++++++++++-----
2 files changed, 97 insertions(+), 17 deletions(-)
diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json
index b9d261a3..e4982fe7 100644
--- a/web/public/static/langs/en.json
+++ b/web/public/static/langs/en.json
@@ -250,6 +250,10 @@
"prefs_access_table_perms_private": "Only I can publish and subscribe",
"prefs_access_table_perms_public_read": "I can publish, everyone can subscribe",
"prefs_access_table_perms_public": "Everyone can publish and subscribe",
+ "prefs_access_dialog_title_add": "Reserve topic",
+ "prefs_access_dialog_title_edit": "Edit reserved topic",
+ "prefs_access_dialog_topic_label": "Topic",
+ "prefs_access_dialog_access_label": "Access",
"priority_min": "min",
"priority_low": "low",
"priority_default": "default",
diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js
index 54628fcd..49d54889 100644
--- a/web/src/components/Preferences.js
+++ b/web/src/components/Preferences.js
@@ -5,7 +5,7 @@ import {
CardContent,
FormControl,
Select,
- Stack,
+ Stack, styled,
Table,
TableBody,
TableCell,
@@ -41,6 +41,9 @@ import accountApi, {UnauthorizedError} from "../app/AccountApi";
import {Pref, PrefGroup} from "./Pref";
import {useOutletContext} from "react-router-dom";
import LockIcon from "@mui/icons-material/Lock";
+import {Public, PublicOff} from "@mui/icons-material";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
const Preferences = () => {
return (
@@ -515,14 +518,14 @@ const Access = () => {
</CardContent>
<CardActions>
<Button onClick={handleAddClick}>{t("prefs_access_add_button")}</Button>
- {/*<UserDialog
- key={`userEditDialog${dialogKey}`}
- open={dialogOpen}
- user={dialogUser}
- users={props.users}
- onCancel={handleDialogCancel}
- onSubmit={handleDialogSubmit}
- />*/}
+ <AccessDialog
+ key={`accessAddDialog${dialogKey}`}
+ open={dialogOpen}
+ entry={null}
+ entries={account.access}
+ onCancel={handleDialogCancel}
+ onSubmit={handleDialogSubmit}
+ />
</CardActions>
</Card>
);
@@ -532,11 +535,11 @@ const AccessTable = (props) => {
const { t } = useTranslation();
const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false);
- const [dialogUser, setDialogUser] = useState(null);
+ const [dialogEntry, setDialogEntry] = useState(null);
- const handleEditClick = (user) => {
+ const handleEditClick = (entry) => {
setDialogKey(prev => prev+1);
- setDialogUser(user);
+ setDialogEntry(entry);
setDialogOpen(true);
};
@@ -584,18 +587,91 @@ const AccessTable = (props) => {
</TableRow>
))}
</TableBody>
- {/*<UserDialog
- key={`userEditDialog${dialogKey}`}
+ <AccessDialog
+ key={`accessEditDialog${dialogKey}`}
open={dialogOpen}
- user={dialogUser}
- users={props.users}
+ entry={dialogEntry}
+ entries={props.entries}
onCancel={handleDialogCancel}
onSubmit={handleDialogSubmit}
- />*/}
+ />
</Table>
);
};
+const AccessDialog = (props) => {
+ const { t } = useTranslation();
+ const [topic, setTopic] = useState("");
+ const [access, setAccess] = useState("private");
+ const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+ const editMode = props.entry !== null;
+ const addButtonEnabled = (() => {
+ // FIXME
+ })();
+ const handleSubmit = async () => {
+ props.onSubmit({
+ topic: topic,
+ // FIXME
+ })
+ };
+ useEffect(() => {
+ if (editMode) {
+ setTopic(props.topic);
+ //setAccess(props.access);
+ }
+ }, [editMode, props]);
+ return (
+ <Dialog open={props.open} onClose={props.onCancel} maxWidth="xs" fullWidth fullScreen={fullScreen}>
+ <DialogTitle>{editMode ? t("prefs_access_dialog_title_edit") : t("prefs_access_dialog_title_add")}</DialogTitle>
+ <DialogContent>
+ {!editMode && <TextField
+ autoFocus
+ margin="dense"
+ id="topic"
+ label={t("prefs_access_dialog_topic_label")}
+ aria-label={t("prefs_access_dialog_topic_label")}
+ value={topic}
+ onChange={ev => setTopic(ev.target.value)}
+ type="url"
+ fullWidth
+ variant="standard"
+ />}
+ <FormControl fullWidth variant="standard">
+ <Select
+ value={access}
+ onChange={(ev) => setAccess(ev.target.value)}
+ aria-label={t("prefs_access_dialog_access_label")}
+ sx={{
+ marginTop: 1,
+ "& .MuiSelect-select": {
+ display: 'flex',
+ alignItems: 'center'
+ }
+ }}
+ >
+ <MenuItem value="private">
+ <ListItemIcon><LockIcon /></ListItemIcon>
+ <ListItemText primary={t("prefs_access_table_perms_private")} />
+ </MenuItem>
+ <MenuItem value="public-read">
+ <ListItemIcon><PublicOff /></ListItemIcon>
+ <ListItemText primary={t("prefs_access_table_perms_public_read")} />
+ </MenuItem>
+ <MenuItem value="public">
+ <ListItemIcon><Public /></ListItemIcon>
+ <ListItemText primary={t("prefs_access_table_perms_public")} />
+ </MenuItem>
+ </Select>
+ </FormControl>
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={props.onCancel}>{t("prefs_users_dialog_button_cancel")}</Button>
+ <Button onClick={handleSubmit} disabled={!addButtonEnabled}>{editMode ? t("prefs_users_dialog_button_save") : t("prefs_users_dialog_button_add")}</Button>
+ </DialogActions>
+ </Dialog>
+ );
+};
+
const maybeUpdateAccountSettings = async (payload) => {
if (!session.exists()) {
return;