107 lines
3.5 KiB
TypeScript
Executable File
107 lines
3.5 KiB
TypeScript
Executable File
import React, {Fragment, useMemo} from 'react';
|
|
import {DataTablePage} from '@common/datatable/page/data-table-page';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {DeleteSelectedItemsAction} from '@common/datatable/page/delete-selected-items-action';
|
|
import {DataTableEmptyStateMessage} from '@common/datatable/page/data-table-emty-state-message';
|
|
import movieNightImage from './movie-night.svg';
|
|
import {DataTableAddItemButton} from '@common/datatable/data-table-add-item-button';
|
|
import {Link} from 'react-router-dom';
|
|
import {TitlesDatatableColumns} from '@app/admin/titles/titles-datatable-columns';
|
|
import {useTitleIndexFilters} from '@app/titles/use-title-index-filters';
|
|
import {TitlesDatatableFilters} from '@app/admin/titles/titles-datatable-filters';
|
|
import {useSettings} from '@common/core/settings/use-settings';
|
|
import {useNavigate} from '@common/utils/hooks/use-navigate';
|
|
import {Tooltip} from '@common/ui/tooltip/tooltip';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {PublishIcon} from '@common/icons/material/Publish';
|
|
import {ImportSingleFromTmdbDialog} from '@app/admin/titles/import/import-single-from-tmdb-dialog';
|
|
import {TITLE_MODEL} from '@app/titles/models/title';
|
|
import {
|
|
Menu,
|
|
MenuItem,
|
|
MenuTrigger,
|
|
} from '@common/ui/navigation/menu/menu-trigger';
|
|
import {openDialog} from '@common/ui/overlays/store/dialog-store';
|
|
import {ImportMultipleFromTmdbDialog} from '@app/admin/titles/import/import-multiple-from-tmdb-dialog';
|
|
|
|
export function TitlesDatatablePage() {
|
|
const {filters, filtersLoading} = useTitleIndexFilters();
|
|
|
|
const mergedFilters = useMemo(() => {
|
|
return [...filters, ...TitlesDatatableFilters];
|
|
}, [filters]);
|
|
|
|
return (
|
|
<DataTablePage
|
|
endpoint="titles"
|
|
title={<Trans message="Titles" />}
|
|
columns={TitlesDatatableColumns}
|
|
filters={mergedFilters}
|
|
filtersLoading={filtersLoading}
|
|
actions={<Actions />}
|
|
selectedActions={<DeleteSelectedItemsAction />}
|
|
emptyStateMessage={
|
|
<DataTableEmptyStateMessage
|
|
image={movieNightImage}
|
|
title={<Trans message="No titles have been created yet" />}
|
|
filteringTitle={<Trans message="No matching titles" />}
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function Actions() {
|
|
const {tmdb_is_setup} = useSettings();
|
|
|
|
return (
|
|
<Fragment>
|
|
{tmdb_is_setup && <ImportButton />}
|
|
<DataTableAddItemButton elementType={Link} to="new">
|
|
<Trans message="Add title" />
|
|
</DataTableAddItemButton>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
function ImportButton() {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<MenuTrigger>
|
|
<Tooltip label={<Trans message="Import from TheMovieDB" />}>
|
|
<IconButton
|
|
variant="outline"
|
|
color="primary"
|
|
className="flex-shrink-0"
|
|
size="sm"
|
|
>
|
|
<PublishIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Menu>
|
|
<MenuItem
|
|
value="single"
|
|
onSelected={async () => {
|
|
const title = await openDialog(ImportSingleFromTmdbDialog, {
|
|
modelType: TITLE_MODEL,
|
|
});
|
|
if (title) {
|
|
navigate(`/admin/titles/${title.id}/edit/primary-facts`);
|
|
}
|
|
}}
|
|
>
|
|
<Trans message="Import single title by ID" />
|
|
</MenuItem>
|
|
<MenuItem
|
|
value="multiple"
|
|
onSelected={() => {
|
|
openDialog(ImportMultipleFromTmdbDialog);
|
|
}}
|
|
>
|
|
<Trans message="Import multiple titles" />
|
|
</MenuItem>
|
|
</Menu>
|
|
</MenuTrigger>
|
|
);
|
|
}
|