Rename folder "modules" to "features"
This commit is contained in:
26
src/features/migration/Migration.constants.ts
Normal file
26
src/features/migration/Migration.constants.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
/*
|
||||
* 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 { SortBy, SortOrder } from '@/features/migration/Migration.types.ts';
|
||||
|
||||
import { TranslationKey } from '@/Base.types.ts';
|
||||
|
||||
export const sortByToTranslationKey: Record<SortBy, TranslationKey> = {
|
||||
[SortBy.SOURCE_NAME]: 'migrate.sort.by_source_name',
|
||||
[SortBy.MANGA_COUNT]: 'migrate.sort.by_manga_count',
|
||||
};
|
||||
|
||||
export const sortOrderToTranslationKey: Record<SortBy, TranslationKey> = {
|
||||
[SortOrder.ASC]: 'global.sort.label.asc',
|
||||
[SortOrder.DESC]: 'global.sort.label.desc',
|
||||
};
|
||||
|
||||
export const DEFAULT_SORT_SETTINGS = {
|
||||
sortBy: SortBy.SOURCE_NAME,
|
||||
sortOrder: SortOrder.ASC,
|
||||
};
|
||||
34
src/features/migration/Migration.types.ts
Normal file
34
src/features/migration/Migration.types.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
* 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 { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
|
||||
|
||||
export enum SortBy {
|
||||
SOURCE_NAME,
|
||||
MANGA_COUNT,
|
||||
}
|
||||
|
||||
export enum SortOrder {
|
||||
ASC,
|
||||
DESC,
|
||||
}
|
||||
|
||||
export interface SortSettings {
|
||||
sortBy: SortBy;
|
||||
sortOrder: SortOrder;
|
||||
}
|
||||
|
||||
export type TMigratableSourcesResult = GetMigratableSourcesQuery['mangas']['nodes'];
|
||||
|
||||
export type MetadataMigrationSettings = {
|
||||
migrateChapters: boolean;
|
||||
migrateCategories: boolean;
|
||||
migrateTracking: boolean;
|
||||
deleteChapters: boolean;
|
||||
migrateSortSettings: SortSettings;
|
||||
};
|
||||
134
src/features/migration/components/MigrateDialog.tsx
Normal file
134
src/features/migration/components/MigrateDialog.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
/*
|
||||
* 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 Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import Button from '@mui/material/Button';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { useState } from 'react';
|
||||
import FormGroup from '@mui/material/FormGroup';
|
||||
import { CheckboxInput } from '@/features/core/components/inputs/CheckboxInput.tsx';
|
||||
import { Mangas } from '@/features/manga/services/Mangas.ts';
|
||||
import { makeToast } from '@/features/core/utils/Toast.ts';
|
||||
import {
|
||||
createUpdateMetadataServerSettings,
|
||||
useMetadataServerSettings,
|
||||
} from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { MetadataMigrationSettings } from '@/features/migration/Migration.types.ts';
|
||||
import { MigrateMode } from '@/features/manga/Manga.types.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
|
||||
export const MigrateDialog = ({ mangaIdToMigrateTo, onClose }: { mangaIdToMigrateTo: number; onClose: () => void }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { mangaId: mangaIdAsString } = useParams<{ mangaId: string }>();
|
||||
const mangaId = Number(mangaIdAsString);
|
||||
|
||||
const {
|
||||
settings: { migrateChapters, migrateCategories, migrateTracking, deleteChapters },
|
||||
} = useMetadataServerSettings();
|
||||
|
||||
const [isMigrationInProcess, setIsMigrationInProcess] = useState(false);
|
||||
|
||||
const setMigrationFlag = createUpdateMetadataServerSettings<keyof MetadataMigrationSettings>(
|
||||
defaultPromiseErrorHandler('MigrateDialog::updateSetting'),
|
||||
);
|
||||
|
||||
const migrate = async (mode: MigrateMode) => {
|
||||
if (mangaId == null) {
|
||||
throw new Error(`MigrateDialog::migrate: unexpected mangaId "${mangaId}"`);
|
||||
}
|
||||
|
||||
makeToast(t('migrate.label.info'), 'info');
|
||||
|
||||
setIsMigrationInProcess(true);
|
||||
|
||||
try {
|
||||
await Mangas.migrate(mangaId, mangaIdToMigrateTo, {
|
||||
mode,
|
||||
migrateChapters,
|
||||
migrateCategories,
|
||||
migrateTracking,
|
||||
deleteChapters,
|
||||
});
|
||||
|
||||
navigate(AppRoutes.manga.path(mangaIdToMigrateTo), { replace: true });
|
||||
} catch (e) {
|
||||
setIsMigrationInProcess(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open fullWidth onClose={onClose}>
|
||||
<DialogTitle>{t('migrate.dialog.title')}</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<FormGroup>
|
||||
<CheckboxInput
|
||||
disabled={isMigrationInProcess}
|
||||
label={t('chapter.title_one')}
|
||||
checked={migrateChapters}
|
||||
onChange={(_, checked) => setMigrationFlag('migrateChapters', checked)}
|
||||
/>
|
||||
<CheckboxInput
|
||||
disabled={isMigrationInProcess}
|
||||
label={t('category.title.category_one')}
|
||||
checked={migrateCategories}
|
||||
onChange={(_, checked) => setMigrationFlag('migrateCategories', checked)}
|
||||
/>
|
||||
<CheckboxInput
|
||||
disabled={isMigrationInProcess}
|
||||
label={t('tracking.title')}
|
||||
checked={migrateTracking}
|
||||
onChange={(_, checked) => setMigrationFlag('migrateTracking', checked)}
|
||||
/>
|
||||
<CheckboxInput
|
||||
disabled={isMigrationInProcess}
|
||||
label={t('migrate.dialog.label.delete_downloaded')}
|
||||
checked={deleteChapters}
|
||||
onChange={(_, checked) => setMigrationFlag('deleteChapters', checked)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
disabled={isMigrationInProcess}
|
||||
component={Link}
|
||||
to={AppRoutes.manga.path(mangaIdToMigrateTo)}
|
||||
>
|
||||
{t('migrate.dialog.action.button.show_entry')}
|
||||
</Button>
|
||||
<Stack direction="row">
|
||||
<Button disabled={isMigrationInProcess} onClick={onClose}>
|
||||
{t('global.button.cancel')}
|
||||
</Button>
|
||||
<Button disabled={isMigrationInProcess} onClick={() => migrate('copy')}>
|
||||
{t('global.button.copy')}
|
||||
</Button>
|
||||
<Button disabled={isMigrationInProcess} onClick={() => migrate('migrate')}>
|
||||
{t('global.button.migrate')}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
59
src/features/migration/components/MigrationCard.tsx
Normal file
59
src/features/migration/components/MigrationCard.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
/*
|
||||
* 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 Card from '@mui/material/Card';
|
||||
import Box from '@mui/material/Box';
|
||||
import CardActionArea from '@mui/material/CardActionArea';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { GetMigratableSourcesQuery } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { translateExtensionLanguage } from '@/features/extension/Extensions.utils.ts';
|
||||
import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
|
||||
import { ListCardAvatar } from '@/features/core/components/lists/cards/ListCardAvatar.tsx';
|
||||
import { ListCardContent } from '@/features/core/components/lists/cards/ListCardContent.tsx';
|
||||
|
||||
export type TMigratableSource = NonNullable<GetMigratableSourcesQuery['mangas']['nodes'][number]['source']> & {
|
||||
mangaCount: number;
|
||||
};
|
||||
|
||||
// TODO - cleanup source/extension components
|
||||
export const MigrationCard = ({ id, name, lang, iconUrl, mangaCount }: TMigratableSource) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const isLocalSource = Number(id) === 0;
|
||||
const sourceName = isLocalSource ? t('source.local_source.title') : name;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardActionArea component={Link} to={AppRoutes.migrate.path(id)}>
|
||||
<ListCardContent sx={{ justifyContent: 'space-between' }}>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<ListCardAvatar iconUrl={requestManager.getValidImgUrlFor(iconUrl)} alt={sourceName} />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<Typography variant="h6" component="h3">
|
||||
{sourceName}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
display: 'block',
|
||||
}}
|
||||
>
|
||||
{translateExtensionLanguage(lang)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Chip sx={{ borderRadius: 1 }} size="small" label={mangaCount} />
|
||||
</ListCardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
124
src/features/migration/screens/Migrate.tsx
Normal file
124
src/features/migration/screens/Migrate.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
/*
|
||||
* 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 { useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { TMigratableSource } from '@/features/migration/components/MigrationCard.tsx';
|
||||
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
||||
import { GridLayouts } from '@/features/core/components/GridLayouts.tsx';
|
||||
import { useLocalStorage } from '@/features/core/hooks/useStorage.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { GetSourceMigratableQuery, GetSourceMigratableQueryVariables } from '@/lib/graphql/generated/graphql.ts';
|
||||
import { GET_SOURCE_MIGRATABLE } from '@/lib/graphql/queries/SourceQuery.ts';
|
||||
import { SOURCE_BASE_FIELDS } from '@/lib/graphql/fragments/SourceFragments.ts';
|
||||
import { BaseMangaGrid } from '@/features/manga/components/BaseMangaGrid.tsx';
|
||||
import { GridLayout } from '@/features/core/Core.types.ts';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
import { useAppTitleAndAction } from '@/features/navigation-bar/hooks/useAppTitleAndAction.ts';
|
||||
|
||||
export const Migrate = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { sourceId: paramSourceId } = useParams<{ sourceId: string }>();
|
||||
|
||||
const [gridLayout, setGridLayout] = useLocalStorage('migrateGridLayout', GridLayout.List);
|
||||
|
||||
const fragmentSource = requestManager.graphQLClient.client.cache.readFragment<
|
||||
Pick<TMigratableSource, 'id' | 'name'>
|
||||
>({
|
||||
id: requestManager.graphQLClient.client.cache.identify({ __typename: 'SourceType', id: paramSourceId }),
|
||||
fragment: SOURCE_BASE_FIELDS,
|
||||
});
|
||||
|
||||
const [isKnownSource, setIsKnownSource] = useState(fragmentSource !== null ? true : undefined);
|
||||
const {
|
||||
data: migratableSourceData,
|
||||
loading: isSourceLoading,
|
||||
error: sourceError,
|
||||
refetch: refetchSource,
|
||||
} = requestManager.useGetSource<GetSourceMigratableQuery, GetSourceMigratableQueryVariables>(
|
||||
GET_SOURCE_MIGRATABLE,
|
||||
paramSourceId,
|
||||
{ skip: !!isKnownSource, notifyOnNetworkStatusChange: true },
|
||||
);
|
||||
|
||||
const { sourceId, name } = {
|
||||
sourceId: paramSourceId,
|
||||
name: paramSourceId,
|
||||
...fragmentSource,
|
||||
...migratableSourceData?.source,
|
||||
};
|
||||
|
||||
const {
|
||||
data: migratableSourceMangasData,
|
||||
loading: areMangasLoading,
|
||||
error: mangasError,
|
||||
refetch: refetchMangas,
|
||||
} = requestManager.useGetMigratableSourceMangas(sourceId, {
|
||||
skip: !isKnownSource,
|
||||
notifyOnNetworkStatusChange: true,
|
||||
});
|
||||
|
||||
useAppTitleAndAction(
|
||||
name ?? sourceId ?? t('migrate.title'),
|
||||
<GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />,
|
||||
[gridLayout],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSourceLoading || isKnownSource) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsKnownSource(
|
||||
!!migratableSourceData ||
|
||||
!!sourceError?.message.includes("The field at path '/source' was declared as a non null type"),
|
||||
);
|
||||
}, [isSourceLoading, sourceError]);
|
||||
|
||||
const isLoadingSource = isSourceLoading || (!sourceError && !isKnownSource);
|
||||
const isLoading = isLoadingSource || areMangasLoading;
|
||||
if (isLoading) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
const hasErrorSource = sourceError && isKnownSource === false;
|
||||
const hasError = hasErrorSource || mangasError;
|
||||
if (hasError) {
|
||||
const error = (hasErrorSource ? sourceError : mangasError)!;
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={getErrorMessage(error)}
|
||||
retry={() => {
|
||||
if (hasErrorSource) {
|
||||
refetchSource().catch(defaultPromiseErrorHandler('Migrate::refetchSource'));
|
||||
}
|
||||
|
||||
if (mangasError) {
|
||||
refetchMangas().catch(defaultPromiseErrorHandler('Migrate::refetchMangas'));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseMangaGrid
|
||||
hasNextPage={false}
|
||||
loadMore={() => {}}
|
||||
isLoading={areMangasLoading}
|
||||
mangas={migratableSourceMangasData?.mangas.nodes ?? []}
|
||||
gridLayout={gridLayout}
|
||||
mode="migrate.search"
|
||||
/>
|
||||
);
|
||||
};
|
||||
159
src/features/migration/screens/Migration.tsx
Normal file
159
src/features/migration/screens/Migration.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
/*
|
||||
* 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 { useTranslation } from 'react-i18next';
|
||||
import { useMemo } from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import SortByAlphaIcon from '@mui/icons-material/SortByAlpha';
|
||||
import TagIcon from '@mui/icons-material/Tag';
|
||||
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
|
||||
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
|
||||
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { requestManager } from '@/lib/requests/RequestManager.ts';
|
||||
import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
|
||||
import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
|
||||
import { MigrationCard, TMigratableSource } from '@/features/migration/components/MigrationCard.tsx';
|
||||
import { StyledGroupItemWrapper } from '@/features/core/components/virtuoso/StyledGroupItemWrapper.tsx';
|
||||
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
|
||||
import { SortBy, SortOrder, SortSettings, TMigratableSourcesResult } from '@/features/migration/Migration.types.ts';
|
||||
import { sortByToTranslationKey, sortOrderToTranslationKey } from '@/features/migration/Migration.constants.ts';
|
||||
import {
|
||||
createUpdateMetadataServerSettings,
|
||||
useMetadataServerSettings,
|
||||
} from '@/features/settings/services/ServerSettingsMetadata.ts';
|
||||
import { makeToast } from '@/features/core/utils/Toast.ts';
|
||||
import { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
|
||||
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
|
||||
|
||||
const getMigratableSources = (
|
||||
mangas: TMigratableSourcesResult | undefined,
|
||||
{ sortBy, sortOrder }: SortSettings,
|
||||
): TMigratableSource[] => {
|
||||
if (!mangas) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const sourceBySourceId: Record<string, TMigratableSource> = {};
|
||||
|
||||
mangas.forEach(({ sourceId, source }) => {
|
||||
const uniqueSource = sourceBySourceId[sourceId] ?? {
|
||||
...{ id: sourceId, name: sourceId, lang: 'unknown', iconUrl: null, mangaCount: 0, ...source },
|
||||
};
|
||||
|
||||
sourceBySourceId[sourceId] = {
|
||||
...uniqueSource,
|
||||
mangaCount: uniqueSource.mangaCount + 1,
|
||||
};
|
||||
});
|
||||
|
||||
const sourcesSortedBy = Object.values(sourceBySourceId).toSorted((a, b) => {
|
||||
switch (sortBy) {
|
||||
case SortBy.SOURCE_NAME:
|
||||
return a.name.localeCompare(b.name);
|
||||
case SortBy.MANGA_COUNT:
|
||||
return a.mangaCount - b.mangaCount;
|
||||
default:
|
||||
throw new Error(`Unexpected "sortBy" "${sortBy}"`);
|
||||
}
|
||||
});
|
||||
|
||||
switch (sortOrder) {
|
||||
case SortOrder.ASC:
|
||||
return sourcesSortedBy;
|
||||
case SortOrder.DESC:
|
||||
return sourcesSortedBy.toReversed();
|
||||
default:
|
||||
throw new Error(`Unexpected "sortOrder" "${sortOrder}"`);
|
||||
}
|
||||
};
|
||||
|
||||
export const Migration = ({ tabsMenuHeight }: { tabsMenuHeight: number }) => {
|
||||
const { t } = useTranslation();
|
||||
const { appBarHeight } = useNavBarContext();
|
||||
|
||||
const {
|
||||
settings: { migrateSortSettings },
|
||||
} = useMetadataServerSettings();
|
||||
const updateMetadataServerSettings = createUpdateMetadataServerSettings<'migrateSortSettings'>((e) =>
|
||||
makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
|
||||
);
|
||||
const { sortBy, sortOrder } = migrateSortSettings;
|
||||
|
||||
const { data, loading, error, refetch } = requestManager.useGetMigratableSources({
|
||||
notifyOnNetworkStatusChange: true,
|
||||
});
|
||||
const migratableSources = useMemo(
|
||||
() => getMigratableSources(data?.mangas.nodes, migrateSortSettings),
|
||||
[data?.mangas.nodes, migrateSortSettings],
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return <LoadingPlaceholder />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<EmptyViewAbsoluteCentered
|
||||
message={t('global.error.label.failed_to_load_data')}
|
||||
messageExtra={getErrorMessage(error)}
|
||||
retry={() => refetch().catch(defaultPromiseErrorHandler('Migration::refetch'))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
sx={{
|
||||
position: 'sticky',
|
||||
top: `${appBarHeight + tabsMenuHeight}px`,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'end',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
p: 1,
|
||||
backgroundColor: 'background.default',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<CustomTooltip title={t(sortByToTranslationKey[sortBy])}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={() =>
|
||||
updateMetadataServerSettings('migrateSortSettings', { sortBy: (sortBy + 1) % 2, sortOrder })
|
||||
}
|
||||
>
|
||||
{sortBy ? <TagIcon /> : <SortByAlphaIcon />}
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
<CustomTooltip title={t(sortOrderToTranslationKey[sortOrder])}>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
onClick={() =>
|
||||
updateMetadataServerSettings('migrateSortSettings', {
|
||||
sortBy,
|
||||
sortOrder: (sortOrder + 1) % 2,
|
||||
})
|
||||
}
|
||||
>
|
||||
{sortOrder ? <ArrowDownwardIcon /> : <ArrowUpwardIcon />}
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
</Stack>
|
||||
<List sx={{ p: 0 }}>
|
||||
{migratableSources.map((migratableSource) => (
|
||||
<StyledGroupItemWrapper key={migratableSource.id}>
|
||||
<MigrationCard {...migratableSource} />
|
||||
</StyledGroupItemWrapper>
|
||||
))}
|
||||
</List>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user