Basic modal for switching extension settings (#907)
* Basic modal for switching extension settings * Improve network usage by including field in query directly Requesting individually is stupid, when it's a field that is already available on the server * Improve extension slider usability - Always render the element, fixes animations - Store the selected item in state, allows the back-button to re-open dialog * Update src/modules/extension/components/ExtensionOptions.tsx Co-authored-by: schroda <50052685+schroda@users.noreply.github.com> * Update src/modules/extension/components/ExtensionOptions.tsx Co-authored-by: schroda <50052685+schroda@users.noreply.github.com> * Fix suggestions * Use dialog instead of optionsPanel * Extension options remove redundant NSFW info * Apply suggestions from code review Co-authored-by: schroda <50052685+schroda@users.noreply.github.com> * Use proper dialog title and content for settings dialog * Use `string | undefined` instead of `string | null` to satisfy `tsc` --------- Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
This commit is contained in:
Constantin Piber
@@ -14,6 +14,8 @@ import Avatar from '@mui/material/Avatar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { makeToast } from '@/modules/core/utils/Toast.ts';
|
||||
@@ -33,12 +35,14 @@ import {
|
||||
} from '@/modules/extension/Extensions.constants.ts';
|
||||
import { getInstalledState } from '@/modules/extension/Extensions.utils.ts';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
|
||||
|
||||
interface IProps {
|
||||
extension: TExtension;
|
||||
handleUpdate: () => void;
|
||||
showSourceRepo: boolean;
|
||||
forcedState?: ExtensionState;
|
||||
showOptions: () => void;
|
||||
}
|
||||
|
||||
export function ExtensionCard(props: IProps) {
|
||||
@@ -47,6 +51,7 @@ export function ExtensionCard(props: IProps) {
|
||||
const {
|
||||
extension: { name, lang, versionName, isInstalled, hasUpdate, isObsolete, pkgName, iconUrl, isNsfw, repo },
|
||||
handleUpdate,
|
||||
showOptions,
|
||||
showSourceRepo,
|
||||
forcedState,
|
||||
} = props;
|
||||
@@ -185,6 +190,19 @@ export function ExtensionCard(props: IProps) {
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
{isInstalled && (
|
||||
<CustomTooltip title={t('settings.title')}>
|
||||
<IconButton
|
||||
onClick={showOptions}
|
||||
aria-label="display more actions"
|
||||
edge="end"
|
||||
color="inherit"
|
||||
size="large"
|
||||
>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
)}
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
|
||||
110
src/modules/extension/components/ExtensionOptions.tsx
Normal file
110
src/modules/extension/components/ExtensionOptions.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
/*
|
||||
* 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 Box from '@mui/material/Box';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder';
|
||||
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions';
|
||||
import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
|
||||
import { AppRoutes } from '@/modules/core/AppRoute.constants';
|
||||
import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils';
|
||||
|
||||
interface IExtensionOptions {
|
||||
extensionId: string | undefined;
|
||||
closeDialog: () => void;
|
||||
}
|
||||
|
||||
export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {
|
||||
data,
|
||||
loading: isLoading,
|
||||
error,
|
||||
refetch,
|
||||
} = requestManager.useGetSourceList({ notifyOnNetworkStatusChange: true });
|
||||
|
||||
if (error) {
|
||||
return <Dialog open={!!extensionId} onClose={closeDialog} />;
|
||||
}
|
||||
|
||||
const relevantSources = data?.sources.nodes.filter((s) => s.extension.pkgName === extensionId);
|
||||
|
||||
return (
|
||||
<Dialog open={!!extensionId} onClose={closeDialog}>
|
||||
<DialogTitle>{t('extension.settings.dialog.title')}</DialogTitle>
|
||||
<DialogContent>
|
||||
{isLoading && <LoadingPlaceholder />}
|
||||
{error && (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={getErrorMessage(error)}
|
||||
retry={() => refetch().catch(defaultPromiseErrorHandler('ExtensionOptions::refetch'))}
|
||||
/>
|
||||
)}
|
||||
{!isLoading && !error && (
|
||||
<Box
|
||||
sx={{
|
||||
pb: 2,
|
||||
pt: 2,
|
||||
mx: 2,
|
||||
}}
|
||||
>
|
||||
{relevantSources?.map((source) => (
|
||||
<Card key={source.id}>
|
||||
<CardContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
p: 1.5,
|
||||
'&:last-child': {
|
||||
paddingBottom: 1.5,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
|
||||
{translateExtensionLanguage(source.lang)}
|
||||
</Typography>
|
||||
{source.isConfigurable && (
|
||||
<CustomTooltip title={t('settings.title')}>
|
||||
<IconButton
|
||||
onClick={() =>
|
||||
navigate(AppRoutes.sources.childRoutes.configure.path(source.id))
|
||||
}
|
||||
aria-label="display more actions"
|
||||
edge="end"
|
||||
color="inherit"
|
||||
size="large"
|
||||
>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user