Save reservation
This commit is contained in:
		
							parent
							
								
									1e16545517
								
							
						
					
					
						commit
						1a87e5c3d4
					
				
					 1 changed files with 74 additions and 5 deletions
				
			
		| 
						 | 
				
			
			@ -6,30 +6,48 @@ import Dialog from '@mui/material/Dialog';
 | 
			
		|||
import DialogContent from '@mui/material/DialogContent';
 | 
			
		||||
import DialogContentText from '@mui/material/DialogContentText';
 | 
			
		||||
import DialogTitle from '@mui/material/DialogTitle';
 | 
			
		||||
import {Autocomplete, Checkbox, FormControlLabel, useMediaQuery} from "@mui/material";
 | 
			
		||||
import {Checkbox, FormControl, FormControlLabel, Select, useMediaQuery} from "@mui/material";
 | 
			
		||||
import theme from "./theme";
 | 
			
		||||
import api from "../app/Api";
 | 
			
		||||
import {topicUrl, validTopic, validUrl} from "../app/utils";
 | 
			
		||||
import userManager from "../app/UserManager";
 | 
			
		||||
import subscriptionManager from "../app/SubscriptionManager";
 | 
			
		||||
import poller from "../app/Poller";
 | 
			
		||||
import DialogFooter from "./DialogFooter";
 | 
			
		||||
import {useTranslation} from "react-i18next";
 | 
			
		||||
import accountApi, {UnauthorizedError} from "../app/AccountApi";
 | 
			
		||||
import session from "../app/Session";
 | 
			
		||||
import routes from "./routes";
 | 
			
		||||
import MenuItem from "@mui/material/MenuItem";
 | 
			
		||||
import ListItemIcon from "@mui/material/ListItemIcon";
 | 
			
		||||
import LockIcon from "@mui/icons-material/Lock";
 | 
			
		||||
import ListItemText from "@mui/material/ListItemText";
 | 
			
		||||
import {Public, PublicOff} from "@mui/icons-material";
 | 
			
		||||
 | 
			
		||||
const SubscriptionSettingsDialog = (props) => {
 | 
			
		||||
    const { t } = useTranslation();
 | 
			
		||||
    const subscription = props.subscription;
 | 
			
		||||
    const [reserveTopicVisible, setReserveTopicVisible] = useState(!!subscription.reservation);
 | 
			
		||||
    const [everyone, setEveryone] = useState(subscription.reservation?.everyone || "deny-all");
 | 
			
		||||
    const [displayName, setDisplayName] = useState(subscription.displayName ?? "");
 | 
			
		||||
    const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
 | 
			
		||||
 | 
			
		||||
    const handleSave = async () => {
 | 
			
		||||
        // Apply locally
 | 
			
		||||
        await subscriptionManager.setDisplayName(subscription.id, displayName);
 | 
			
		||||
 | 
			
		||||
        // Apply remotely
 | 
			
		||||
        if (session.exists() && subscription.remoteId) {
 | 
			
		||||
            try {
 | 
			
		||||
                // Display name
 | 
			
		||||
                console.log(`[SubscriptionSettingsDialog] Updating subscription display name to ${displayName}`);
 | 
			
		||||
                await accountApi.updateSubscription(subscription.remoteId, { display_name: displayName });
 | 
			
		||||
 | 
			
		||||
                // Reservation
 | 
			
		||||
                if (reserveTopicVisible) {
 | 
			
		||||
                    await accountApi.upsertAccess(subscription.topic, everyone);
 | 
			
		||||
                } else if (!reserveTopicVisible && subscription.reservation) { // Was removed
 | 
			
		||||
                    await accountApi.deleteAccess(subscription.topic);
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                // Sync account
 | 
			
		||||
                await accountApi.sync();
 | 
			
		||||
            } catch (e) {
 | 
			
		||||
                console.log(`[SubscriptionSettingsDialog] Error updating subscription`, e);
 | 
			
		||||
                if ((e instanceof UnauthorizedError)) {
 | 
			
		||||
| 
						 | 
				
			
			@ -39,6 +57,7 @@ const SubscriptionSettingsDialog = (props) => {
 | 
			
		|||
        }
 | 
			
		||||
        props.onClose();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
        <Dialog open={props.open} onClose={props.onClose} fullScreen={fullScreen}>
 | 
			
		||||
            <DialogTitle>{t("subscription_settings_dialog_title")}</DialogTitle>
 | 
			
		||||
| 
						 | 
				
			
			@ -61,6 +80,56 @@ const SubscriptionSettingsDialog = (props) => {
 | 
			
		|||
                        "aria-label": t("subscription_settings_dialog_display_name_placeholder")
 | 
			
		||||
                    }}
 | 
			
		||||
                />
 | 
			
		||||
 | 
			
		||||
                <FormControlLabel
 | 
			
		||||
                    fullWidth
 | 
			
		||||
                    variant="standard"
 | 
			
		||||
                    sx={{pt: 1}}
 | 
			
		||||
                    control={
 | 
			
		||||
                        <Checkbox
 | 
			
		||||
                            checked={reserveTopicVisible}
 | 
			
		||||
                            onChange={(ev) => setReserveTopicVisible(ev.target.checked)}
 | 
			
		||||
                            inputProps={{
 | 
			
		||||
                                "aria-label": t("xxxxxxxxxxxxxxxxxx")
 | 
			
		||||
                            }}
 | 
			
		||||
                        />
 | 
			
		||||
                    }
 | 
			
		||||
                    label={t("Reserve topic and configure custom access:")}
 | 
			
		||||
                />
 | 
			
		||||
                {reserveTopicVisible &&
 | 
			
		||||
                    <FormControl variant="standard">
 | 
			
		||||
                        <Select
 | 
			
		||||
                            value={everyone}
 | 
			
		||||
                            onChange={(ev) => setEveryone(ev.target.value)}
 | 
			
		||||
                            aria-label={t("prefs_reservations_dialog_access_label")}
 | 
			
		||||
                            sx={{
 | 
			
		||||
                                "& .MuiSelect-select": {
 | 
			
		||||
                                    display: 'flex',
 | 
			
		||||
                                    alignItems: 'center',
 | 
			
		||||
                                    paddingTop: "4px",
 | 
			
		||||
                                    paddingBottom: "4px",
 | 
			
		||||
                                }
 | 
			
		||||
                            }}
 | 
			
		||||
                        >
 | 
			
		||||
                            <MenuItem value="deny-all">
 | 
			
		||||
                                <ListItemIcon><LockIcon/></ListItemIcon>
 | 
			
		||||
                                <ListItemText primary={t("prefs_reservations_table_everyone_deny_all")}/>
 | 
			
		||||
                            </MenuItem>
 | 
			
		||||
                            <MenuItem value="read-only">
 | 
			
		||||
                                <ListItemIcon><PublicOff/></ListItemIcon>
 | 
			
		||||
                                <ListItemText primary={t("prefs_reservations_table_everyone_read_only")}/>
 | 
			
		||||
                            </MenuItem>
 | 
			
		||||
                            <MenuItem value="write-only">
 | 
			
		||||
                                <ListItemIcon><PublicOff/></ListItemIcon>
 | 
			
		||||
                                <ListItemText primary={t("prefs_reservations_table_everyone_write_only")}/>
 | 
			
		||||
                            </MenuItem>
 | 
			
		||||
                            <MenuItem value="read-write">
 | 
			
		||||
                                <ListItemIcon><Public/></ListItemIcon>
 | 
			
		||||
                                <ListItemText primary={t("prefs_reservations_table_everyone_read_write")}/>
 | 
			
		||||
                            </MenuItem>
 | 
			
		||||
                        </Select>
 | 
			
		||||
                    </FormControl>
 | 
			
		||||
                }
 | 
			
		||||
            </DialogContent>
 | 
			
		||||
            <DialogFooter>
 | 
			
		||||
                <Button onClick={props.onClose}>{t("subscription_settings_button_cancel")}</Button>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue