first commit

resources/client/admin/titles/titles-datatable-page.tsx

@@ -0,0 +1,106 @@
+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>
+  );
+}