first commit

resources/client/admin/lists/lists-datatable-columns.tsx

@@ -0,0 +1,113 @@
+import {ColumnConfig} from '@common/datatable/column-config';
+import {Trans} from '@common/i18n/trans';
+import {FormattedDate} from '@common/i18n/formatted-date';
+import {Link} from 'react-router-dom';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {EditIcon} from '@common/icons/material/Edit';
+import React from 'react';
+import {NameWithAvatar} from '@common/datatable/column-templates/name-with-avatar';
+import {CheckIcon} from '@common/icons/material/Check';
+import {CloseIcon} from '@common/icons/material/Close';
+import {Channel} from '@common/channels/channel';
+import {FormattedNumber} from '@common/i18n/formatted-number';
+
+export const ListsDatatableColumns: ColumnConfig<Channel>[] = [
+  {
+    key: 'name',
+    allowsSorting: true,
+    width: 'flex-3',
+    visibleInMode: 'all',
+    header: () => <Trans message="Name" />,
+    body: list => {
+      return (
+        <a
+          className="outline-none hover:underline focus-visible:underline"
+          href={`lists/${list.id}`}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {list.name}
+        </a>
+      );
+    },
+  },
+  {
+    key: 'user_id',
+    allowsSorting: true,
+    width: 'flex-2 min-w-140',
+    header: () => <Trans message="Owner" />,
+    body: list =>
+      list.user && (
+        <NameWithAvatar
+          image={list.user.avatar}
+          label={list.user.display_name}
+          description={list.user.email}
+        />
+      ),
+  },
+  {
+    key: 'items_count',
+    width: 'w-96',
+    header: () => <Trans message="Items" />,
+    body: list =>
+      list.items_count && <FormattedNumber value={list.items_count} />,
+  },
+  {
+    key: 'public',
+    header: () => <Trans message="Public" />,
+    width: 'w-96',
+    body: list =>
+      list.public ? (
+        <CheckIcon className="text-positive" />
+      ) : (
+        <CloseIcon className="text-danger" />
+      ),
+  },
+  {
+    key: 'content_type',
+    allowsSorting: false,
+    header: () => <Trans message="Content type" />,
+    body: list => (
+      <span className="capitalize">
+        {list.config.contentModel ? (
+          <Trans message={list.config.contentModel} />
+        ) : undefined}
+      </span>
+    ),
+  },
+  {
+    key: 'layout',
+    allowsSorting: false,
+    header: () => <Trans message="Layout" />,
+    body: list => (
+      <span className="capitalize">
+        {list.config.layout ? (
+          <Trans message={list.config.layout} />
+        ) : undefined}
+      </span>
+    ),
+  },
+  {
+    key: 'updated_at',
+    allowsSorting: true,
+    maxWidth: 'max-w-100',
+    header: () => <Trans message="Last updated" />,
+    body: list =>
+      list.updated_at ? <FormattedDate date={list.updated_at} /> : '',
+  },
+  {
+    key: 'actions',
+    header: () => <Trans message="Actions" />,
+    hideHeader: true,
+    visibleInMode: 'all',
+    align: 'end',
+    width: 'w-42 flex-shrink-0',
+    body: list => (
+      <Link to={`${list.id}/edit`} className="text-muted">
+        <IconButton size="md">
+          <EditIcon />
+        </IconButton>
+      </Link>
+    ),
+  },
+];

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

@@ -0,0 +1,36 @@
+import React 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 todoImage from './todo.svg';
+import {DataTableAddItemButton} from '@common/datatable/data-table-add-item-button';
+import {Link} from 'react-router-dom';
+import {ListsDatatableColumns} from '@app/admin/lists/lists-datatable-columns';
+
+export function ListsDatatablePage() {
+  return (
+    <DataTablePage
+      endpoint="lists"
+      title={<Trans message="User lists" />}
+      columns={ListsDatatableColumns}
+      actions={<Actions />}
+      selectedActions={<DeleteSelectedItemsAction />}
+      emptyStateMessage={
+        <DataTableEmptyStateMessage
+          image={todoImage}
+          title={<Trans message="No lists have been created yet" />}
+          filteringTitle={<Trans message="No matching lists" />}
+        />
+      }
+    />
+  );
+}
+
+function Actions() {
+  return (
+    <DataTableAddItemButton elementType={Link} to="new">
+      <Trans message="Add new list" />
+    </DataTableAddItemButton>
+  );
+}