186 lines
4.4 KiB
TypeScript
186 lines
4.4 KiB
TypeScript
import { DataGrid, GridColDef } from "@mui/x-data-grid";
|
|
import {
|
|
DateField,
|
|
DeleteButton,
|
|
EditButton,
|
|
List,
|
|
MarkdownField,
|
|
NumberField,
|
|
ShowButton,
|
|
useDataGrid,
|
|
} from "@refinedev/mui";
|
|
import React from "react";
|
|
import { IMonitoring } from "./monitorings.types";
|
|
import { MonitoringStatus } from "./status/monitoringstatus";
|
|
import { MonitoringStatusEditChip } from "./status/monitoringstatusedit";
|
|
import { useUpdate } from "@refinedev/core";
|
|
|
|
|
|
export const MonitoringList = () => {
|
|
const dataProvider = "monitorings";
|
|
const { dataGridProps } = useDataGrid<IMonitoring>({
|
|
syncWithLocation: true,
|
|
dataProviderName: dataProvider,
|
|
pagination: {
|
|
mode: "client",
|
|
pageSize: 10,
|
|
},
|
|
});
|
|
|
|
// const { data: categoryData, isLoading: categoryIsLoading } = useMany({
|
|
// resource: "categories",
|
|
// ids:
|
|
// dataGridProps?.rows
|
|
// ?.map((item: any) => item?.category?.id)
|
|
// .filter(Boolean) ?? [],
|
|
// queryOptions: {
|
|
// enabled: !!dataGridProps?.rows,
|
|
// },
|
|
// });
|
|
|
|
const { mutate } = useUpdate();
|
|
|
|
|
|
const columns = React.useMemo<GridColDef<IMonitoring>[]>(
|
|
() => [
|
|
{
|
|
field: "name",
|
|
flex: 1,
|
|
headerName: "Name",
|
|
type:"string",
|
|
minWidth: 250,
|
|
},
|
|
{
|
|
field: "created_at",
|
|
flex: 1,
|
|
headerName: "Created at",
|
|
minWidth: 30,
|
|
renderCell: function render({ value }) {
|
|
return <DateField value={value} />;
|
|
},
|
|
},
|
|
{
|
|
field: "samplerate",
|
|
flex: 0.3,
|
|
headerName: "Samplerate/Hz",
|
|
renderCell: function render({ row }) {
|
|
return (
|
|
<NumberField
|
|
value={row.samplerate}
|
|
options={{
|
|
minimumIntegerDigits: 1,
|
|
minimumFractionDigits:0,
|
|
maximumFractionDigits: 0,
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
minWidth: 120,
|
|
},
|
|
{
|
|
field: "sampleperiod",
|
|
flex: 0.3,
|
|
headerName: "Period/s",
|
|
renderCell: function render({ row }) {
|
|
return (
|
|
<NumberField
|
|
value={row.sampleperiod}
|
|
options={{
|
|
minimumIntegerDigits: 1,
|
|
minimumFractionDigits:1,
|
|
maximumFractionDigits: 3,
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
minWidth: 120,
|
|
},
|
|
{
|
|
field: "downtime",
|
|
flex: 0.3,
|
|
headerName: "Downtime/s",
|
|
renderCell: function render({ row }) {
|
|
return (
|
|
<NumberField
|
|
value={row.downtime}
|
|
options={{
|
|
minimumIntegerDigits: 1,
|
|
minimumFractionDigits:1,
|
|
maximumFractionDigits: 3,
|
|
}}
|
|
/>
|
|
);
|
|
},
|
|
minWidth: 120,
|
|
},
|
|
{
|
|
field: "owner",
|
|
flex: 1,
|
|
headerName: "Owner",
|
|
type:"string",
|
|
minWidth: 80,
|
|
},
|
|
{
|
|
field: "status",
|
|
headerName: "Status",
|
|
width: 124,
|
|
editable: true,
|
|
renderCell: function render({ row }) {
|
|
return <MonitoringStatus key="MonStatus1" objId={row.id} status={row.status}
|
|
onChange={ (value) => {
|
|
mutate({
|
|
resource: dataProvider,
|
|
id: row.id,
|
|
values: {
|
|
status: value,
|
|
},
|
|
});
|
|
}}
|
|
/>;
|
|
},
|
|
},
|
|
{
|
|
field: "actions",
|
|
headerName: "Actions",
|
|
sortable: false,
|
|
renderCell: function render({ row }) {
|
|
return (
|
|
<>
|
|
<EditButton hideText recordItemId={row.id} />
|
|
<DeleteButton hideText recordItemId={row.id} />
|
|
</>
|
|
);
|
|
},
|
|
align: "center",
|
|
headerAlign: "center",
|
|
minWidth: 80,
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<List>
|
|
<DataGrid {...dataGridProps} columns={columns} autoHeight />
|
|
</List>
|
|
);
|
|
};
|
|
|
|
|
|
|
|
// {
|
|
// field: "monstate",
|
|
// headerName: t("orders.fields.status"),
|
|
// width: 124,
|
|
// renderCell: function render({ row }) {
|
|
// return <MonitoringStatus status={row.monstate} />;
|
|
// },
|
|
// },
|
|
|
|
|
|
// renderEditCell: function render({ row }) {
|
|
// return <MonitoringStatusEditChip value={row.status} />;
|
|
// },
|
|
|
|
|