first commit

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

@@ -0,0 +1,87 @@
+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 {FormattedNumber} from '@common/i18n/formatted-number';
+import {Tooltip} from '@common/ui/tooltip/tooltip';
+import {PersonPoster} from '@app/people/person-poster/person-poster';
+import {Person} from '@app/titles/models/person';
+import {PersonLink} from '@app/people/person-link';
+import {KnownForCompact} from '@app/people/known-for-compact';
+
+export const PeopleDatatableColumns: ColumnConfig<Person>[] = [
+  {
+    key: 'name',
+    allowsSorting: true,
+    width: 'flex-3',
+    visibleInMode: 'all',
+    header: () => <Trans message="Person" />,
+    body: person => (
+      <div className="flex items-center gap-12">
+        <PersonPoster person={person} srcSize="sm" size="w-32" rounded />
+        <div className="overflow-hidden min-w-0">
+          <div className="overflow-hidden overflow-ellipsis">
+            <PersonLink person={person} target="_blank" />
+          </div>
+          <div className="text-muted text-xs overflow-hidden overflow-ellipsis">
+            <KnownForCompact
+              person={person}
+              linkTarget="_blank"
+              linkColor="inherit"
+            />
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    key: 'birth_date',
+    allowsSorting: true,
+    header: () => <Trans message="Birth date" />,
+    body: person => <FormattedDate date={person.birth_date} />,
+  },
+  {
+    key: 'views',
+    allowsSorting: true,
+    header: () => <Trans message="Page views" />,
+    body: person =>
+      person.views ? <FormattedNumber value={person.views} /> : null,
+    width: 'w-124 flex-shrink-0',
+  },
+  {
+    key: 'popularity',
+    allowsSorting: true,
+    header: () => <Trans message="Popularity" />,
+    body: person =>
+      person.popularity ? <FormattedNumber value={person.popularity} /> : null,
+    width: 'w-124 flex-shrink-0',
+  },
+  {
+    key: 'updated_at',
+    allowsSorting: true,
+    width: 'w-124 flex-shrink-0',
+    header: () => <Trans message="Last updated" />,
+    body: person =>
+      person.updated_at ? <FormattedDate date={person.updated_at} /> : '',
+  },
+  {
+    key: 'actions',
+    header: () => <Trans message="Actions" />,
+    hideHeader: true,
+    visibleInMode: 'all',
+    align: 'end',
+    width: 'w-42 flex-shrink-0',
+    body: video => (
+      <Link to={`${video.id}/edit/primary-facts`} className="text-muted">
+        <Tooltip label={<Trans message="Edit" />}>
+          <IconButton size="md">
+            <EditIcon />
+          </IconButton>
+        </Tooltip>
+      </Link>
+    ),
+  },
+];