Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import Typography from '@mui/material/Typography';
import Select from '@mui/material/Select';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Box from '@mui/material/Box';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { prefsQueryOptions, prefsMutationOptions } from '../../queries/options';
import { useSnackbar } from '../../contexts/SnackbarContext';
function PrefsAdvanced() {
const queryClient = useQueryClient();
const { addSnackMessage } = useSnackbar();
// Query: Fetch all effective preferences using unified config API
const { data: prefs } = useQuery(prefsQueryOptions.all());
// Mutation: Save preference using unified config API
const savePrefMutation = useMutation(prefsMutationOptions.save(queryClient));
const applicationRole = (prefs?.applicationRole as string | undefined) ?? 'contentEditor';
const handleRoleChange = (value: string) => {
savePrefMutation.mutate({ prefKey: 'applicationRole', prefValue: value }, {
onSuccess: () => {
const roleName = value === 'contentEditor' ? 'Content Editor' : 'Site Developer';
addSnackMessage(`Application role changed to ${roleName}. Please reload workspace to see changes.`, { severity: 'success', autoHideDuration: 5000 });
}
});
};
return (
<Box sx={{ padding: '20px', height: '100%' }}>
<Typography variant="h4">Behaviour</Typography>
<Box my={2}>
<FormControl variant="outlined" sx={{ m: 1, minWidth: 400 }}>
<InputLabel>Application Role</InputLabel>
<Select
value={applicationRole}
onChange={(e) => handleRoleChange(e.target.value)}
label="Application Role"
sx={{ minWidth: 400 }}
>
<MenuItem value="contentEditor">Content Editor</MenuItem>
<MenuItem value="siteDeveloper">Site Developer</MenuItem>
</Select>
</FormControl>
<Typography variant="caption" color="text.secondary" sx={{ ml: 1, display: 'block' }}>
Controls which menu items and features are visible in the workspace. Site Developer role shows all features including advanced development tools.
</Typography>
</Box>
</Box>
);
}
export default PrefsAdvanced;
|