Feature/support settings per device (#640)
* Optionally prevent deletion and mutation of "MutableListSetting" items * Save server metadata per device This makes it possible to e.g. have different settings on a desktop and a smartphone.
This commit is contained in:
schroda
94
src/components/settings/DeviceSetting.tsx
Normal file
94
src/components/settings/DeviceSetting.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { List, ListItem, ListItemText, MenuItem, Select } from '@mui/material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useContext, useEffect } from 'react';
|
||||
import { convertSettingsToMetadata, useMetadataServerSettings } from '@/util/metadataServerSettings.ts';
|
||||
import { MetadataServerSettingKeys, MetadataServerSettings } from '@/typings.ts';
|
||||
import { convertToGqlMeta, requestUpdateServerMetadata } from '@/util/metadata.ts';
|
||||
import { makeToast } from '@/components/util/Toast.tsx';
|
||||
import { MutableListSetting } from '@/components/settings/MutableListSetting.tsx';
|
||||
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
|
||||
import { DEFAULT_DEVICE } from '@/util/device.ts';
|
||||
|
||||
export const DeviceSetting = () => {
|
||||
const { t } = useTranslation();
|
||||
const { setTitle, setAction } = useContext(NavBarContext);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle(t('settings.device.title.settings'));
|
||||
setAction(null);
|
||||
|
||||
return () => {
|
||||
setTitle('');
|
||||
setAction(null);
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
const {
|
||||
metadata,
|
||||
settings: { devices, activeDevice },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const updateMetadataSetting = async <Setting extends MetadataServerSettingKeys>(
|
||||
setting: Setting,
|
||||
value: MetadataServerSettings[Setting],
|
||||
) => {
|
||||
if (!metadata) {
|
||||
return;
|
||||
}
|
||||
|
||||
const wasActiveDeviceDeleted = setting === 'devices' && !(value as string[]).includes(activeDevice);
|
||||
if (wasActiveDeviceDeleted) {
|
||||
try {
|
||||
await requestUpdateServerMetadata(convertToGqlMeta(metadata) ?? [], [
|
||||
['activeDevice', convertSettingsToMetadata({ activeDevice: DEFAULT_DEVICE }).activeDevice],
|
||||
]);
|
||||
} catch (e) {
|
||||
makeToast(t('global.error.label.failed_to_save_changes'), 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
requestUpdateServerMetadata(convertToGqlMeta(metadata) ?? [], [
|
||||
[setting, convertSettingsToMetadata({ [setting]: value })[setting]],
|
||||
]).catch(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
|
||||
};
|
||||
|
||||
return (
|
||||
<List>
|
||||
<MutableListSetting
|
||||
settingName={t('settings.device.devices.label.title')}
|
||||
description={t('settings.device.devices.label.description')}
|
||||
handleChange={(deviceList) => {
|
||||
updateMetadataSetting('devices', [...new Set([DEFAULT_DEVICE, ...deviceList])]);
|
||||
}}
|
||||
valueInfos={devices.map((device) => [device, { mutable: false, deletable: device !== DEFAULT_DEVICE }])}
|
||||
addItemButtonTitle={t('global.button.create')}
|
||||
/>
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={t('settings.device.active_device.label.title')}
|
||||
secondary={t('settings.device.active_device.label.description')}
|
||||
/>
|
||||
<Select
|
||||
MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}
|
||||
value={activeDevice}
|
||||
onChange={({ target: { value: device } }) => updateMetadataSetting('activeDevice', device)}
|
||||
>
|
||||
{devices.map((device) => (
|
||||
<MenuItem key={device} value={device}>
|
||||
{device}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</ListItem>
|
||||
</List>
|
||||
);
|
||||
};
|
||||
@@ -6,7 +6,17 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Button, Dialog, DialogTitle, ListItemButton, ListItemText, Stack, Tooltip, Typography } from '@mui/material';
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
Stack,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { useEffect, useState } from 'react';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
@@ -22,15 +32,27 @@ import { makeToast } from '@/components/util/Toast.tsx';
|
||||
|
||||
const MutableListItem = ({
|
||||
handleDelete,
|
||||
mutable = true,
|
||||
deletable = true,
|
||||
...textSettingProps
|
||||
}: Omit<TextSettingProps, 'isPassword' | 'disabled'> & { handleDelete: () => void }) => {
|
||||
}: Omit<TextSettingProps, 'isPassword' | 'disabled'> & {
|
||||
handleDelete: () => void;
|
||||
mutable?: boolean;
|
||||
deletable?: boolean;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Stack direction="row">
|
||||
<TextSetting {...textSettingProps} dialogTitle="" />
|
||||
{mutable ? (
|
||||
<TextSetting {...textSettingProps} dialogTitle="" />
|
||||
) : (
|
||||
<ListItem>
|
||||
<ListItemText secondary={textSettingProps.value} />
|
||||
</ListItem>
|
||||
)}
|
||||
<Tooltip title={t('chapter.action.download.delete.label.action')}>
|
||||
<IconButton size="large" onClick={handleDelete}>
|
||||
<IconButton disabled={!deletable} size="large" onClick={handleDelete}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
@@ -39,7 +61,10 @@ const MutableListItem = ({
|
||||
};
|
||||
|
||||
type MutableListSettingProps = Pick<TextSettingProps, 'settingName' | 'placeholder'> & {
|
||||
values?: string[];
|
||||
valueInfos?: (
|
||||
| [value: string]
|
||||
| [value: string, Pick<React.ComponentProps<typeof MutableListItem>, 'mutable' | 'deletable'>]
|
||||
)[];
|
||||
description?: string;
|
||||
dialogDisclaimer?: JSX.Element | string;
|
||||
addItemButtonTitle?: string;
|
||||
@@ -49,11 +74,14 @@ type MutableListSettingProps = Pick<TextSettingProps, 'settingName' | 'placehold
|
||||
invalidItemError?: string;
|
||||
};
|
||||
|
||||
const getValues = (valueInfos: MutableListSettingProps['valueInfos']): string[] =>
|
||||
valueInfos?.map((valueInfo) => valueInfo[0]) ?? [];
|
||||
|
||||
export const MutableListSetting = ({
|
||||
settingName,
|
||||
description,
|
||||
dialogDisclaimer,
|
||||
values,
|
||||
valueInfos,
|
||||
handleChange,
|
||||
addItemButtonTitle,
|
||||
placeholder,
|
||||
@@ -63,22 +91,24 @@ export const MutableListSetting = ({
|
||||
}: MutableListSettingProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const values = getValues(valueInfos);
|
||||
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [dialogValues, setDialogValues] = useState(values ?? []);
|
||||
const [dialogValues, setDialogValues] = useState(values);
|
||||
|
||||
const [isAddItemDialogOpen, setIsAddItemDialogOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!values) {
|
||||
if (!valueInfos) {
|
||||
return;
|
||||
}
|
||||
|
||||
setDialogValues(values);
|
||||
}, [values]);
|
||||
}, [valueInfos]);
|
||||
|
||||
const closeDialog = (resetValue: boolean = true) => {
|
||||
if (resetValue) {
|
||||
setDialogValues(values ?? []);
|
||||
setDialogValues(values);
|
||||
}
|
||||
|
||||
setIsDialogOpen(false);
|
||||
@@ -165,6 +195,8 @@ export const MutableListSetting = ({
|
||||
handleChange={(newValue: string) => updateSetting(index, newValue)}
|
||||
handleDelete={() => updateSetting(index, undefined)}
|
||||
value={dialogValue}
|
||||
mutable={valueInfos?.find(([value]) => value === dialogValue)?.[1]?.mutable}
|
||||
deletable={valueInfos?.find(([value]) => value === dialogValue)?.[1]?.deletable}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
|
||||
Reference in New Issue
Block a user