first commit

common/resources/client/admin/roles/roles-index-page.tsx

@@ -0,0 +1,96 @@
+import React, {Fragment} from 'react';
+import {Link} from 'react-router-dom';
+import {DataTablePage} from '../../datatable/page/data-table-page';
+import {IconButton} from '../../ui/buttons/icon-button';
+import {EditIcon} from '../../icons/material/Edit';
+import {FormattedDate} from '../../i18n/formatted-date';
+import {ColumnConfig} from '../../datatable/column-config';
+import {Trans} from '../../i18n/trans';
+import {Role} from '../../auth/role';
+import teamSvg from './team.svg';
+import {DeleteSelectedItemsAction} from '../../datatable/page/delete-selected-items-action';
+import {DataTableEmptyStateMessage} from '../../datatable/page/data-table-emty-state-message';
+import {RoleIndexPageFilters} from './role-index-page-filters';
+import {DataTableExportCsvButton} from '../../datatable/csv-export/data-table-export-csv-button';
+import {DataTableAddItemButton} from '../../datatable/data-table-add-item-button';
+
+const columnConfig: ColumnConfig<Role>[] = [
+  {
+    key: 'name',
+    allowsSorting: true,
+    visibleInMode: 'all',
+    header: () => <Trans message="Role" />,
+    body: role => (
+      <div>
+        <div>
+          <Trans message={role.name} />
+        </div>
+        <div className="text-muted text-xs overflow-x-hidden overflow-ellipsis">
+          {role.description ? <Trans message={role.description} /> : undefined}
+        </div>
+      </div>
+    ),
+  },
+  {
+    key: 'type',
+    maxWidth: 'max-w-100',
+    allowsSorting: true,
+    header: () => <Trans message="Type" />,
+    body: role => <Trans message={role.type} />,
+  },
+  {
+    key: 'updated_at',
+    maxWidth: 'max-w-100',
+    allowsSorting: true,
+    header: () => <Trans message="Last updated" />,
+    body: role => <FormattedDate date={role.updated_at} />,
+  },
+  {
+    key: 'actions',
+    header: () => <Trans message="Actions" />,
+    hideHeader: true,
+    visibleInMode: 'all',
+    align: 'end',
+    width: 'w-42 flex-shrink-0',
+    body: role => {
+      return (
+        <Link to={`${role.id}/edit`}>
+          <IconButton size="md" className="text-muted">
+            <EditIcon />
+          </IconButton>
+        </Link>
+      );
+    },
+  },
+];
+
+export function RolesIndexPage() {
+  return (
+    <DataTablePage
+      endpoint="roles"
+      title={<Trans message="Roles" />}
+      columns={columnConfig}
+      filters={RoleIndexPageFilters}
+      actions={<Actions />}
+      selectedActions={<DeleteSelectedItemsAction />}
+      emptyStateMessage={
+        <DataTableEmptyStateMessage
+          image={teamSvg}
+          title={<Trans message="No roles have been created yet" />}
+          filteringTitle={<Trans message="No matching roles" />}
+        />
+      }
+    />
+  );
+}
+
+function Actions() {
+  return (
+    <Fragment>
+      <DataTableExportCsvButton endpoint="roles/csv/export" />
+      <DataTableAddItemButton elementType={Link} to="new">
+        <Trans message="Add new role" />
+      </DataTableAddItemButton>
+    </Fragment>
+  );
+}