86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Page } from "@/pages/base";
|
|
import { Management } from "@/management/main";
|
|
import { Box, Container, IconButton, Tooltip, Typography } from "@material-ui/core";
|
|
import { useTranslation } from "react-i18next";
|
|
import { sampleReportSchema } from "@/provider/dummy/report";
|
|
import MaterialTable, { Column } from "material-table";
|
|
import { actionsColumn, fieldComparator, multilingualStringComparator } from "@/management/common/helpers";
|
|
import { MultilingualCell } from "@/management/common/MultilangualCell";
|
|
import { ReportFieldDefinition } from "@/data/report";
|
|
import { Formik } from "formik";
|
|
import { CustomField } from "@/forms/report";
|
|
import { Edit } from "@material-ui/icons";
|
|
import { createPortal } from "react-dom";
|
|
import { createDeleteAction } from "@/management/common/DeleteResourceAction";
|
|
import { EditFieldDefinitionDialog } from "@/management/edition/report/fields/edit";
|
|
import { EditionManagement } from "../../manage";
|
|
|
|
const title = "edition.report-fields.title";
|
|
|
|
export const FieldPreview = ({ field }: { field: ReportFieldDefinition }) => {
|
|
return <Formik initialValues={{}} onSubmit={() => {}}>
|
|
<CustomField field={ field }/>
|
|
</Formik>
|
|
}
|
|
|
|
export const EditionReportFields = () => {
|
|
const { t } = useTranslation("management");
|
|
const schema = sampleReportSchema;
|
|
|
|
const handleFieldDeletion = () => {}
|
|
|
|
const DeleteFieldAction = createDeleteAction<ReportFieldDefinition>({ label: field => field.label.pl, onDelete: handleFieldDeletion })
|
|
const EditFieldAction = ({ field }: { field: ReportFieldDefinition }) => {
|
|
const [ open, setOpen ] = useState<boolean>(false);
|
|
|
|
const handleFieldSave = async (field: ReportFieldDefinition) => {
|
|
}
|
|
|
|
return <>
|
|
<Tooltip title={ t("actions.edit") as any }>
|
|
<IconButton onClick={ () => setOpen(true) }><Edit /></IconButton>
|
|
</Tooltip>
|
|
{ open && createPortal(
|
|
<EditFieldDefinitionDialog open={ open } onSave={ handleFieldSave } field={ field } onClose={ () => setOpen(false) }/>,
|
|
document.getElementById("modals") as Element
|
|
) }
|
|
</>
|
|
}
|
|
|
|
const columns: Column<ReportFieldDefinition>[] = [
|
|
{
|
|
title: t("report-field.field.label"),
|
|
customSort: fieldComparator('label', multilingualStringComparator),
|
|
cellStyle: { whiteSpace: "nowrap" },
|
|
render: field => <MultilingualCell value={ field.label }/>,
|
|
},
|
|
{
|
|
title: t("report-field.field.type"),
|
|
cellStyle: { whiteSpace: "nowrap" },
|
|
render: field => t(`report-field.type.${field.type}`),
|
|
},
|
|
actionsColumn(field => <>
|
|
<EditFieldAction field={ field }/>
|
|
<DeleteFieldAction resource={ field }/>
|
|
</>),
|
|
]
|
|
|
|
return <Page>
|
|
<Page.Header maxWidth="lg">
|
|
<EditionManagement.Breadcrumbs>
|
|
<Typography color="textPrimary">{ t(title) }</Typography>
|
|
</EditionManagement.Breadcrumbs>
|
|
<Page.Title>{ t(title) }</Page.Title>
|
|
</Page.Header>
|
|
<Container maxWidth="lg">
|
|
<MaterialTable
|
|
columns={ columns }
|
|
data={ schema }
|
|
title={ t(title) }
|
|
detailPanel={ field => <Box p={3}><FieldPreview field={ field } /></Box> }
|
|
/>
|
|
</Container>
|
|
</Page>
|
|
}
|