87 lines
3.2 KiB
TypeScript
87 lines
3.2 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, IconButton, Tooltip, Typography } from "@material-ui/core";
|
|
import MaterialTable, { Column } from "material-table";
|
|
import { Edition } from "@/data/edition";
|
|
import { FileFind } from "mdi-material-ui";
|
|
import { Management } from "../main";
|
|
import { useHistory } from "react-router-dom";
|
|
import { route } from "@/routing";
|
|
import { actionsColumn } from "@/management/common/helpers";
|
|
|
|
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 ManageEditionAction = ({ edition }: { edition: Edition }) => {
|
|
const history = useHistory();
|
|
const handlePagePreview = async () => history.push(route('management:edition_manage', { edition: edition.id || "" }));
|
|
|
|
return <Tooltip title={ t("actions.manage") as string }>
|
|
<IconButton onClick={ handlePagePreview }><FileFind/></IconButton>
|
|
</Tooltip>;
|
|
}
|
|
|
|
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,
|
|
},
|
|
actionsColumn(edition => <>
|
|
<ManageEditionAction edition={ edition }/>
|
|
</>),
|
|
]
|
|
|
|
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 }
|
|
detailPanel={ edition => <EditionDetails edition={ edition.id as string }/> }
|
|
title={ t("edition.index.title") }
|
|
options={ { search: false } }
|
|
/>
|
|
}
|
|
</Async>
|
|
</Container>
|
|
</Page>;
|
|
}
|