2nd Version with the complete UI and the first Version of cc+ .so

vrpmdvfrontend/src/pages/monitorings/list.tsx

@@ -11,12 +11,16 @@ import {
 } 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: "monitorings",
+    dataProviderName: dataProvider,
     pagination: {
       mode: "client",
       pageSize: 10,
@@ -34,6 +38,9 @@ export const MonitoringList = () => {
   //   },
   // });
 
+  const { mutate } = useUpdate();
+  
+
   const columns = React.useMemo<GridColDef<IMonitoring>[]>(
     () => [
       {
@@ -43,12 +50,6 @@ export const MonitoringList = () => {
         type:"string",
         minWidth: 250,
       },
-      {
-        field: "id",
-        headerName: "ID",
-        type: "string",
-        minWidth: 300,
-      },
       {
         field: "created_at",
         flex: 1,
@@ -61,7 +62,7 @@ export const MonitoringList = () => {
       {
         field: "samplerate",
         flex: 0.3,
-        headerName: "Samplerate in Hz",
+        headerName: "Samplerate/Hz",
         renderCell: function render({ row }) {
           return (
             <NumberField
@@ -79,7 +80,7 @@ export const MonitoringList = () => {
       {
         field: "sampleperiod",
         flex: 0.3,
-        headerName: "Period in s",
+        headerName: "Period/s",
         renderCell: function render({ row }) {
           return (
             <NumberField
@@ -97,7 +98,7 @@ export const MonitoringList = () => {
       {
         field: "downtime",
         flex: 0.3,
-        headerName: "Downtime in s",
+        headerName: "Downtime/s",
         renderCell: function render({ row }) {
           return (
             <NumberField
@@ -119,6 +120,25 @@ export const MonitoringList = () => {
         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",
@@ -145,3 +165,21 @@ export const MonitoringList = () => {
     </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} />;
+// },
+
+