Reserved topics dialog

This commit is contained in:
binwiederhier 2023-01-02 10:46:37 -05:00
parent 7487b0da58
commit 1256ba0429
2 changed files with 97 additions and 17 deletions

View file

@ -250,6 +250,10 @@
"prefs_access_table_perms_private": "Only I can publish and subscribe", "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_read": "I can publish, everyone can subscribe",
"prefs_access_table_perms_public": "Everyone can publish and 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_min": "min",
"priority_low": "low", "priority_low": "low",
"priority_default": "default", "priority_default": "default",

View file

@ -5,7 +5,7 @@ import {
CardContent, CardContent,
FormControl, FormControl,
Select, Select,
Stack, Stack, styled,
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
@ -41,6 +41,9 @@ import accountApi, {UnauthorizedError} from "../app/AccountApi";
import {Pref, PrefGroup} from "./Pref"; import {Pref, PrefGroup} from "./Pref";
import {useOutletContext} from "react-router-dom"; import {useOutletContext} from "react-router-dom";
import LockIcon from "@mui/icons-material/Lock"; 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 = () => { const Preferences = () => {
return ( return (
@ -515,14 +518,14 @@ const Access = () => {
</CardContent> </CardContent>
<CardActions> <CardActions>
<Button onClick={handleAddClick}>{t("prefs_access_add_button")}</Button> <Button onClick={handleAddClick}>{t("prefs_access_add_button")}</Button>
{/*<UserDialog <AccessDialog
key={`userEditDialog${dialogKey}`} key={`accessAddDialog${dialogKey}`}
open={dialogOpen} open={dialogOpen}
user={dialogUser} entry={null}
users={props.users} entries={account.access}
onCancel={handleDialogCancel} onCancel={handleDialogCancel}
onSubmit={handleDialogSubmit} onSubmit={handleDialogSubmit}
/>*/} />
</CardActions> </CardActions>
</Card> </Card>
); );
@ -532,11 +535,11 @@ const AccessTable = (props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [dialogKey, setDialogKey] = useState(0); const [dialogKey, setDialogKey] = useState(0);
const [dialogOpen, setDialogOpen] = useState(false); 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); setDialogKey(prev => prev+1);
setDialogUser(user); setDialogEntry(entry);
setDialogOpen(true); setDialogOpen(true);
}; };
@ -584,18 +587,91 @@ const AccessTable = (props) => {
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
{/*<UserDialog <AccessDialog
key={`userEditDialog${dialogKey}`} key={`accessEditDialog${dialogKey}`}
open={dialogOpen} open={dialogOpen}
user={dialogUser} entry={dialogEntry}
users={props.users} entries={props.entries}
onCancel={handleDialogCancel} onCancel={handleDialogCancel}
onSubmit={handleDialogSubmit} onSubmit={handleDialogSubmit}
/>*/} />
</Table> </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) => { const maybeUpdateAccountSettings = async (payload) => {
if (!session.exists()) { if (!session.exists()) {
return; return;