PropertyTypes integriert

2026-08-04 22:51:10 +02:00
parent 8697336ba3
commit 19704fa89e
11 changed files with 647 additions and 3 deletions
@@ -0,0 +1,30 @@
+import ky from 'ky'
+import type { PropertyType } from '../../data/propertyType'
+
+export const getPropertyTypes = async (): Promise<PropertyType[]> => {
+  return ky.get(`http://localhost:8088/propertytypes`).json<PropertyType[]>()
+}
+
+export const getPropertyTypeById = async (id: number): Promise<PropertyType> => {
+  return ky.get(`http://localhost:8088/propertytype/${id}`).json<PropertyType>()
+}
+
+export const createPropertyType = async (propertyType: PropertyType): Promise<PropertyType> => {
+  return ky.post(`http://localhost:8088/propertytype`, { json: propertyType }).json<PropertyType>()
+}
+
+export const updatePropertyType = async (propertyType: PropertyType): Promise<PropertyType> => {
+  return ky.put(`http://localhost:8088/propertytype`, { json: propertyType }).json<PropertyType>()
+}   
+
+export const deletePropertyType = async (id: number): Promise<void> => {
+  return ky.delete(`http://localhost:8088/propertytype/${id}`).json<void>()
+}
+
+export const getPropertyTypesByPropertyGroupId = async (propertyGroupId: number): Promise<PropertyType[]> => {
+  return ky.get(`http://localhost:8088/propertytypes/${propertyGroupId}`).json<PropertyType[]>()
+}
+  
+export const getAllPropertyTypes = async (): Promise<PropertyType[]> => {
+  return ky.get(`http://localhost:8088/propertytypes`).json<PropertyType[]>()
+}
@@ -0,0 +1,108 @@
+import * as React from 'react';
+
+import type { propertyGroup } from '../data/propertyGroup';
+import type { PropertyType } from '../data/propertyType';
+
+import Paper from '@mui/material/Paper';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import Tooltip from '@mui/material/Tooltip';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+
+import { Typography } from '@mui/material';
+import { DataGrid, Toolbar, ToolbarButton} from '@mui/x-data-grid';
+import { ExportCsv } from '@mui/x-data-grid';
+
+import { getPropertyGroupById } from '../api/language/propertyGroup.api';  
+import { updatePropertyType } from '../api/language/propertyTypes.api';
+import { getPropertyTypesByPropertyGroupId } from '../api/language/propertyTypes.api';
+
+const PropertyTypesTableView = ({ selectedRow }: { selectedRow: number }) => {
+    const [propertyTypes, setPropertyTypes] = React.useState<PropertyType[]>([]);
+    const [propertyGroup, setPropertyGroup] = React.useState<propertyGroup | null>(null);
+
+    React.useEffect(() => {
+        getPropertyTypesByPropertyGroupId(selectedRow).then(setPropertyTypes);
+    }, [selectedRow]);
+
+    React.useEffect(() => {
+        getPropertyGroupById(selectedRow).then(setPropertyGroup);
+    }, [selectedRow]);
+
+
+    function CustomToolbar() {
+        return (
+            <Toolbar>
+                <Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>
+                    Property types for group {propertyGroup?.label}.
+                </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: '50vw' }}>
+                <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: 'id', sort: 'asc' }],
+                        },
+                    }}
+                    rows={propertyTypes}
+                    columns={[
+                        { field: 'id', headerName: 'ID', width: 100 ,align: 'right', headerAlign: 'right', editable: false},
+                        { field: 'label', headerName: 'Label', width: 200 , editable: true},
+                        { field: 'valueTypeId', headerName: 'Value Type Id', width: 100 , editable: true},
+                        { field: 'propertyGroupId', headerName: 'Property Group Id', width: 100 , editable: true},
+                        { field: 'valueComplexityId', headerName: 'Value Complexity Id', width: 100 , editable: true},
+                        { field: 'value', headerName: 'Value', width: 200 , editable: true},
+                    ]}
+                    slots={{
+                        toolbar: CustomToolbar,
+                    }}
+                    processRowUpdate={(updatedRow, originalRow) => {
+                        updatePropertyType({
+                            id: updatedRow.id, 
+                            valueTypeId: updatedRow.valueTypeId,
+                            propertyGroupId: updatedRow.propertyGroupId,
+                            valueComplexityId: updatedRow.valueComplexityId,
+                            value: updatedRow.value
+                        }
+                        )
+                        return updatedRow;
+                    }}
+                    getRowClassName={(params) =>
+                        params.indexRelativeToCurrentPage % 2 === 0 ? 'even-row' : 'odd-row'
+                    }  
+                    showToolbar
+                />
+            </Paper>
+        </div>
+    );
+};
+
+export default PropertyTypesTableView;
@@ -0,0 +1,9 @@
+export type PropertyType = {
+  id: number;
+  label: string;
+  valueTypeId: number;
+  propertyGroupId: number;
+  valueComplexityId: number;
+  value: string;
+};
+
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import PropertyGroupsTableView from '../components/PropertyGroupsTableView'; 
-import TranslationsTableView from '../components/TranslationsTableView'; 
+import PropertyTypesTableView from '../components/PropertyTypesTableView';
+import PropertyGroupsTableView from '../components/PropertyGroupsTableView';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import type { propertyGroup } from '../data/propertyGroup';
@@ -28,7 +28,7 @@ const PropertyPage: React.FC = () => {
                }}
              >
                <PropertyGroupsTableView propertyGroups={propertyGroups} setSelectedRow={setSelectedRow} />
-                <TranslationsTableView selectedRow={selectedRow} />
+                <PropertyTypesTableView selectedRow={selectedRow} />
              </Box>
          </Box>
      );