first commit

common/resources/client/admin/custom-pages/custom-page-datatable-columns.tsx

@@ -0,0 +1,70 @@
+import {ColumnConfig} from '@common/datatable/column-config';
+import {CustomPage} from '@common/admin/custom-pages/custom-page';
+import {Trans} from '@common/i18n/trans';
+import {Link} from 'react-router-dom';
+import {LinkStyle} from '@common/ui/buttons/external-link';
+import {NameWithAvatar} from '@common/datatable/column-templates/name-with-avatar';
+import {FormattedDate} from '@common/i18n/formatted-date';
+import React from 'react';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {EditIcon} from '@common/icons/material/Edit';
+
+export const CustomPageDatatableColumns: ColumnConfig<CustomPage>[] = [
+  {
+    key: 'slug',
+    allowsSorting: true,
+    width: 'flex-2 min-w-200',
+    visibleInMode: 'all',
+    header: () => <Trans message="Slug" />,
+    body: page => (
+      <Link target="_blank" to={`/pages/${page.slug}`} className={LinkStyle}>
+        {page.slug}
+      </Link>
+    ),
+  },
+  {
+    key: 'user_id',
+    allowsSorting: true,
+    width: 'flex-2 min-w-140',
+    header: () => <Trans message="Owner" />,
+    body: page =>
+      page.user && (
+        <NameWithAvatar
+          image={page.user.avatar}
+          label={page.user.display_name}
+          description={page.user.email}
+        />
+      ),
+  },
+  {
+    key: 'type',
+    maxWidth: 'max-w-100',
+    header: () => <Trans message="Type" />,
+    body: page => <Trans message={page.type} />,
+  },
+  {
+    key: 'updated_at',
+    allowsSorting: true,
+    width: 'w-100',
+    header: () => <Trans message="Last updated" />,
+    body: page => <FormattedDate date={page.updated_at} />,
+  },
+  {
+    key: 'actions',
+    header: () => <Trans message="Actions" />,
+    hideHeader: true,
+    align: 'end',
+    width: 'w-84 flex-shrink-0',
+    visibleInMode: 'all',
+    body: page => (
+      <IconButton
+        size="md"
+        className="text-muted"
+        elementType={Link}
+        to={`${page.id}/edit`}
+      >
+        <EditIcon />
+      </IconButton>
+    ),
+  },
+];