first commit

common/resources/client/admin/custom-pages/custom-page-datable-page.tsx

@@ -0,0 +1,45 @@
+import React, {useContext, useMemo} from 'react';
+import {Link} from 'react-router-dom';
+import {DataTablePage} from '../../datatable/page/data-table-page';
+import {Trans} from '../../i18n/trans';
+import {DataTableEmptyStateMessage} from '../../datatable/page/data-table-emty-state-message';
+import articlesSvg from './articles.svg';
+import {DataTableAddItemButton} from '../../datatable/data-table-add-item-button';
+import {CustomPageDatatableFilters} from './custom-page-datatable-filters';
+import {DeleteSelectedItemsAction} from '../../datatable/page/delete-selected-items-action';
+import {CustomPageDatatableColumns} from '@common/admin/custom-pages/custom-page-datatable-columns';
+import {SiteConfigContext} from '@common/core/settings/site-config-context';
+
+export function CustomPageDatablePage() {
+  const config = useContext(SiteConfigContext);
+  const filters = useMemo(() => {
+    return CustomPageDatatableFilters(config);
+  }, [config]);
+
+  return (
+    <DataTablePage
+      endpoint="custom-pages"
+      title={<Trans message="Custom pages" />}
+      filters={filters}
+      columns={CustomPageDatatableColumns}
+      queryParams={{with: 'user'}}
+      actions={<Actions />}
+      selectedActions={<DeleteSelectedItemsAction />}
+      emptyStateMessage={
+        <DataTableEmptyStateMessage
+          image={articlesSvg}
+          title={<Trans message="No pages have been created yet" />}
+          filteringTitle={<Trans message="No matching pages" />}
+        />
+      }
+    />
+  );
+}
+
+function Actions() {
+  return (
+    <DataTableAddItemButton elementType={Link} to="new">
+      <Trans message="New page" />
+    </DataTableAddItemButton>
+  );
+}