Docker für Keykloak Test

buildtime/client/material-editor/src/api/language/propertyGroup.api.ts

@@ -0,0 +1,22 @@
+import ky from 'ky'
+import type { propertyGroup } from '../../data/propertyGroup'
+
+export const getPropertyGroups = async (): Promise<propertyGroup[]> => {
+  return ky.get(`http://localhost:8088/propertygroups`).json<propertyGroup[]>()
+}   
+
+export const getPropertyGroupById = async (id: number): Promise<propertyGroup> => {
+  return ky.get(`http://localhost:8088/propertygroup/${id}`).json<propertyGroup>()
+}
+
+export const createPropertyGroup = async (propertyGroup: propertyGroup): Promise<propertyGroup> => {
+  return ky.post(`http://localhost:8088/propertygroup`, { json: propertyGroup }).json<propertyGroup>()
+}
+
+export const updatePropertyGroup = async (propertyGroup: propertyGroup): Promise<propertyGroup> => {
+  return ky.put(`http://localhost:8088/propertygroup`, { json: propertyGroup }).json<propertyGroup>()
+}   
+
+export const deletePropertyGroup = async (id: number): Promise<void> => {
+  return ky.delete(`http://localhost:8088/propertygroup/${id}`).json<void>()
+}

buildtime/client/material-editor/src/components/PropertyGroupsTableView.tsx

@@ -0,0 +1,87 @@
+import Tooltip from '@mui/material/Tooltip';
+import { ExportCsv } from '@mui/x-data-grid';
+import type {propertyGroup} from '../data/propertyGroup';
+
+import { DataGrid, Toolbar, ToolbarButton} from '@mui/x-data-grid';
+import Paper from '@mui/material/Paper';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import { updatePropertyGroup } from '../api/language/propertyGroup.api';
+import Typography from '@mui/material/Typography';
+
+const PropertyGroupsTableView = ({ propertyGroups, setSelectedRow }: { propertyGroups: propertyGroup[]; setSelectedRow: (id: number) => void }) => {
+    // const [languages, setLanguages] = useState<Language[]>([]);
+
+    function CustomToolbar() {
+        return (
+            <Toolbar>
+                <Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>
+                    Available PropertyGroups.
+                </Typography>
+                <Tooltip title="Download as CSV">
+                    <ExportCsv render={<ToolbarButton />}>
+                        <FileDownloadIcon fontSize="small" />
+                    </ExportCsv>
+                </Tooltip>
+                <ToolbarButton onClick={() => console.log('Delete Row clicked')}>
+                    <DeleteIcon fontSize="small" sx={{ ml: 'auto' }} />
+                </ToolbarButton>
+                <ToolbarButton onClick={() => console.log('Add Row clicked')}>
+                    <AddIcon fontSize="small" sx={{ ml: 'auto' }} /> 
+                </ToolbarButton>
+            </Toolbar>
+        )
+    }
+
+
+    return (
+        <div>
+            <Paper sx={{ height: 600, width: '30vw', marginRight: 2 }}>
+                <DataGrid
+                    sx={{ border: 1, borderRadius: 2, 
+                        boxShadow: 2, 
+                        borderColor: 'primary.main', 
+                        '& .MuiDataGrid-cell:hover': { color: 'primary.main' },
+                        '& .even-row': { backgroundColor: 'rgba(0, 0, 1, 0.02)' },
+                        '& .odd-row': { backgroundColor: 'rgba(0, 0, 20, 0.04)' },
+                    }}
+
+                    columnHeaderHeight={36}
+                    rowHeight={25}
+                    rowSpacingType="margin"
+                    initialState={{
+                            sorting: {
+                            sortModel: [{ field: 'label', sort: 'asc' }],
+                        },
+                    }}
+                    rows={propertyGroups}
+                    columns={[
+                        { field: 'id', headerName: 'ID', width: 100 ,align: 'right', headerAlign: 'right', editable: false},
+                        { field: 'label', headerName: 'Label', width: 200, editable: true },
+                        { field: 'description', headerName: 'Description', width: 200 , editable: true},
+                    ]}
+                     slots={{
+                        toolbar: CustomToolbar,
+                    }}
+                    processRowUpdate={(updatedRow, originalRow) => {
+                        updatePropertyGroup({id: updatedRow.id, label: updatedRow.label, description: updatedRow.description});
+                        return updatedRow;
+                    }}
+                    getRowClassName={(params) =>
+                        params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
+                    }  
+                    onCellClick={(params) => {
+                        const selectedRowId = params.id as number;
+                        const selectedRow = propertyGroups.find((row) => row.id === selectedRowId);
+                        setSelectedRow(selectedRow ? selectedRow.id : 0);
+                    }}
+
+                    showToolbar
+                />
+            </Paper>
+        </div>
+    );
+};
+
+export default PropertyGroupsTableView;

buildtime/client/material-editor/src/data/propertyGroup.ts

@@ -0,0 +1,6 @@
+export type propertyGroup = {
+  id: number;
+  label: string;
+  description: string;
+};
+

buildtime/client/material-editor/src/keycloak.ts

@@ -1,7 +1,8 @@
 import Keycloak from 'keycloak-js';
+
  const keycloak = new Keycloak({
-  url: 'https://barefacedlean.ddnss.de:9099',
+  url: 'http://localhost:8080',
   realm: 'simplycpq',
-  clientId: 'simplycpq',
+  clientId: 'scpq',
 });
 export default keycloak;

buildtime/client/material-editor/src/main.tsx

@@ -10,7 +10,7 @@ keycloak.init({ onLoad: 'login-required' }).then(() => {
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <App />
-    </StrictMode>,
-  )
+    </StrictMode>
+  );
 });
 

buildtime/client/material-editor/src/pages/PropertyPage.tsx

@@ -1,15 +1,37 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import PropertyGroupsTableView from '../components/PropertyGroupsTableView'; 
+import TranslationsTableView from '../components/TranslationsTableView'; 
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import type { propertyGroup } from '../data/propertyGroup';
+import { getPropertyGroups } from '../api/language/propertyGroup.api';
 
 const PropertyPage: React.FC = () => {
-  return (
-    <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
-      <Typography variant="h3">
-        Property Management
-      </Typography>
-    </Box>
-  );
-};
+    const [propertyGroups, setPropertyGroups] = useState<propertyGroup[]>([]);
+    const [selectedRow, setSelectedRow] = useState(0);
+    useEffect(() => {
+        getPropertyGroups().then(setPropertyGroups);  
+    }, []);
+
+    return (
+          <Box component="section" sx={{ p: 2, border: '1px dashed grey' }}>
+              <Typography variant="h3">
+                  Property Type Management
+              </Typography>
+              <Box
+                sx={{
+                  display: "flex",           // Arrange children in a row
+                  flexDirection: "row",
+                  width: "100vw",             // Full width of the parent
+                  p: 2,                       // Padding around the flex container
+                  bgcolor: "#f5f5f5"
+                }}
+              >
+                <PropertyGroupsTableView propertyGroups={propertyGroups} setSelectedRow={setSelectedRow} />
+                <TranslationsTableView selectedRow={selectedRow} />
+              </Box>
+          </Box>
+      );
+  };
 
 export default PropertyPage;