80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import React, { useCallback } from "react";
|
|
import { Page } from "@/pages/base";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAsync } from "@/hooks";
|
|
import api from "@/management/api";
|
|
import { Async } from "@/components/async";
|
|
import { Container, Typography } from "@material-ui/core";
|
|
import MaterialTable, { Action, Column } from "material-table";
|
|
import { Edition } from "@/data/edition";
|
|
import { Pencil } from "mdi-material-ui";
|
|
import { Management } from "../main";
|
|
|
|
export type EditionDetailsProps = {
|
|
edition: string;
|
|
}
|
|
|
|
export function EditionDetails({ edition, ...props }: EditionDetailsProps) {
|
|
const result = useAsync(useCallback(() => api.edition.details(edition), [ edition ]));
|
|
|
|
return <Async async={ result }>{ edition => <pre>{ JSON.stringify(edition, null, 2) }</pre> }</Async>
|
|
}
|
|
|
|
export function EditionsManagement() {
|
|
const { t } = useTranslation("management");
|
|
const editions = useAsync(useCallback(api.edition.all, []));
|
|
|
|
const columns: Column<Edition>[] = [
|
|
{
|
|
title: t("edition.field.id"),
|
|
field: "id",
|
|
cellStyle: { whiteSpace: "nowrap" }
|
|
},
|
|
{
|
|
title: t("edition.field.start"),
|
|
render: edition => edition.startDate.format("DD.MM.yyyy"),
|
|
customSort: (a, b) => b.startDate.unix() - a.startDate.unix(),
|
|
},
|
|
{
|
|
title: t("edition.field.end"),
|
|
render: edition => edition.endDate.format("DD.MM.yyyy"),
|
|
customSort: (a, b) => b.endDate.unix() - a.endDate.unix(),
|
|
},
|
|
{
|
|
title: t("edition.field.course"),
|
|
customSort: (a, b) => a.course.name.localeCompare(b.course.name),
|
|
render: edition => edition.course.name,
|
|
},
|
|
]
|
|
|
|
const actions: Action<Edition>[] = [
|
|
{
|
|
icon: () => <Pencil />,
|
|
onClick: () => {},
|
|
}
|
|
]
|
|
|
|
return <Page>
|
|
<Page.Header maxWidth="lg">
|
|
<Management.Breadcrumbs>
|
|
<Typography color="textPrimary">{ t("edition.index.title") }</Typography>
|
|
</Management.Breadcrumbs>
|
|
<Page.Title>{ t("edition.index.title") }</Page.Title>
|
|
</Page.Header>
|
|
<Container maxWidth="lg">
|
|
<Async async={ editions }>
|
|
{ editions =>
|
|
<MaterialTable
|
|
columns={ columns }
|
|
data={ editions }
|
|
actions={ actions }
|
|
detailPanel={ edition => <EditionDetails edition={ edition.id as string } /> }
|
|
title={ t("edition.index.title") }
|
|
options={{ search: false, actionsColumnIndex: -1 }}
|
|
/>
|
|
}
|
|
</Async>
|
|
</Container>
|
|
</Page>;
|
|
}
|