first commit

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

@@ -0,0 +1,109 @@
+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, {Fragment} from 'react';
+import {FormattedNumber} from '@common/i18n/formatted-number';
+import {TitlePoster} from '@app/titles/title-poster/title-poster';
+import {Title} from '@app/titles/models/title';
+import {TitleRating} from '@app/reviews/title-rating';
+import {Tooltip} from '@common/ui/tooltip/tooltip';
+import {TitleLink} from '@app/titles/title-link';
+import {BarChartIcon} from '@common/icons/material/BarChart';
+
+export const TitlesDatatableColumns: ColumnConfig<Title>[] = [
+  {
+    key: 'name',
+    allowsSorting: true,
+    width: 'flex-3',
+    visibleInMode: 'all',
+    header: () => <Trans message="Title" />,
+    body: title => (
+      <div className="flex items-center gap-12">
+        <TitlePoster
+          title={title}
+          srcSize="sm"
+          size="w-32"
+          aspect="aspect-square"
+        />
+        <div className="overflow-hidden min-w-0">
+          <div className="overflow-hidden overflow-ellipsis">
+            <TitleLink title={title} target="_blank" />
+          </div>
+          <div className="text-muted text-xs overflow-hidden overflow-ellipsis">
+            {title.is_series ? (
+              <Trans message="Series" />
+            ) : (
+              <Trans message="Movie" />
+            )}
+          </div>
+        </div>
+      </div>
+    ),
+  },
+  {
+    key: 'release_date',
+    allowsSorting: true,
+    header: () => <Trans message="Release date" />,
+    body: title => <FormattedDate date={title.release_date} />,
+  },
+  {
+    key: 'rating',
+    allowsSorting: true,
+    header: () => <Trans message="Rating" />,
+    body: title => <TitleRating score={title.rating} />,
+    width: 'w-124 flex-shrink-0',
+  },
+  {
+    key: 'views',
+    allowsSorting: true,
+    header: () => <Trans message="Page views" />,
+    body: title => <FormattedNumber value={title.views} />,
+    width: 'w-124 flex-shrink-0',
+  },
+  {
+    key: 'popularity',
+    allowsSorting: true,
+    header: () => <Trans message="Popularity" />,
+    body: title =>
+      title.popularity ? <FormattedNumber value={title.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: title =>
+      title.updated_at ? <FormattedDate date={title.updated_at} /> : '',
+  },
+  {
+    key: 'actions',
+    header: () => <Trans message="Actions" />,
+    hideHeader: true,
+    visibleInMode: 'all',
+    align: 'end',
+    width: 'w-84 flex-shrink-0',
+    body: title => (
+      <Fragment>
+        <IconButton
+          size="md"
+          className="text-muted"
+          elementType={Link}
+          to={`${title.id}/insights`}
+        >
+          <BarChartIcon />
+        </IconButton>
+        <Link to={`${title.id}/edit/primary-facts`} className="text-muted">
+          <Tooltip label={<Trans message="Edit" />}>
+            <IconButton size="md">
+              <EditIcon />
+            </IconButton>
+          </Tooltip>
+        </Link>
+      </Fragment>
+    ),
+  },
+];