From c0646fdfc649533fe871248921e5eedd5d17d442 Mon Sep 17 00:00:00 2001 From: Thomas Sindt Date: Tue, 4 Aug 2026 13:51:43 +0200 Subject: [PATCH] =?UTF-8?q?Docker=20f=C3=BCr=20Keykloak=20Test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/api/language/propertyGroup.api.ts | 22 +++++ .../components/PropertyGroupsTableView.tsx | 87 +++++++++++++++++++ .../material-editor/src/data/propertyGroup.ts | 6 ++ .../client/material-editor/src/keycloak.ts | 5 +- buildtime/client/material-editor/src/main.tsx | 4 +- .../src/pages/PropertyPage.tsx | 40 +++++++-- docker/docker-compose.yml | 13 +++ docker/realms.json | 43 +++++++++ 8 files changed, 207 insertions(+), 13 deletions(-) create mode 100644 buildtime/client/material-editor/src/api/language/propertyGroup.api.ts create mode 100644 buildtime/client/material-editor/src/components/PropertyGroupsTableView.tsx create mode 100644 buildtime/client/material-editor/src/data/propertyGroup.ts create mode 100644 docker/docker-compose.yml create mode 100644 docker/realms.json diff --git a/buildtime/client/material-editor/src/api/language/propertyGroup.api.ts b/buildtime/client/material-editor/src/api/language/propertyGroup.api.ts new file mode 100644 index 000000000..b37a2034f --- /dev/null +++ b/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 => { + return ky.get(`http://localhost:8088/propertygroups`).json() +} + +export const getPropertyGroupById = async (id: number): Promise => { + return ky.get(`http://localhost:8088/propertygroup/${id}`).json() +} + +export const createPropertyGroup = async (propertyGroup: propertyGroup): Promise => { + return ky.post(`http://localhost:8088/propertygroup`, { json: propertyGroup }).json() +} + +export const updatePropertyGroup = async (propertyGroup: propertyGroup): Promise => { + return ky.put(`http://localhost:8088/propertygroup`, { json: propertyGroup }).json() +} + +export const deletePropertyGroup = async (id: number): Promise => { + return ky.delete(`http://localhost:8088/propertygroup/${id}`).json() +} diff --git a/buildtime/client/material-editor/src/components/PropertyGroupsTableView.tsx b/buildtime/client/material-editor/src/components/PropertyGroupsTableView.tsx new file mode 100644 index 000000000..31186949b --- /dev/null +++ b/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([]); + + function CustomToolbar() { + return ( + + + Available PropertyGroups. + + + }> + + + + console.log('Delete Row clicked')}> + + + console.log('Add Row clicked')}> + + + + ) + } + + + return ( +
+ + { + 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 + /> + +
+ ); +}; + +export default PropertyGroupsTableView; \ No newline at end of file diff --git a/buildtime/client/material-editor/src/data/propertyGroup.ts b/buildtime/client/material-editor/src/data/propertyGroup.ts new file mode 100644 index 000000000..fa28eedbe --- /dev/null +++ b/buildtime/client/material-editor/src/data/propertyGroup.ts @@ -0,0 +1,6 @@ +export type propertyGroup = { + id: number; + label: string; + description: string; +}; + diff --git a/buildtime/client/material-editor/src/keycloak.ts b/buildtime/client/material-editor/src/keycloak.ts index 65719eceb..02c3c7e75 100644 --- a/buildtime/client/material-editor/src/keycloak.ts +++ b/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; diff --git a/buildtime/client/material-editor/src/main.tsx b/buildtime/client/material-editor/src/main.tsx index 892320cd2..70483d68c 100644 --- a/buildtime/client/material-editor/src/main.tsx +++ b/buildtime/client/material-editor/src/main.tsx @@ -10,7 +10,7 @@ keycloak.init({ onLoad: 'login-required' }).then(() => { createRoot(document.getElementById('root')!).render( - , - ) + + ); }); diff --git a/buildtime/client/material-editor/src/pages/PropertyPage.tsx b/buildtime/client/material-editor/src/pages/PropertyPage.tsx index 782e157cb..f29f4d8c8 100644 --- a/buildtime/client/material-editor/src/pages/PropertyPage.tsx +++ b/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 ( - - - Property Management - - - ); -}; + const [propertyGroups, setPropertyGroups] = useState([]); + const [selectedRow, setSelectedRow] = useState(0); + useEffect(() => { + getPropertyGroups().then(setPropertyGroups); + }, []); + + return ( + + + Property Type Management + + + + + + + ); + }; export default PropertyPage; diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml new file mode 100644 index 000000000..a14975645 --- /dev/null +++ b/docker/docker-compose.yml @@ -0,0 +1,13 @@ +services: + keycloak: + image: quay.io/keycloak/keycloak:26.0 + command: start-dev --import-realm + environment: + KC_BOOTSTRAP_ADMIN_USERNAME: admin + KC_BOOTSTRAP_ADMIN_PASSWORD: admin + ports: + - '8080:8080' + volumes: + - ./realms.json:/opt/keycloak/data/import/realms.json + + \ No newline at end of file diff --git a/docker/realms.json b/docker/realms.json new file mode 100644 index 000000000..cefdc598d --- /dev/null +++ b/docker/realms.json @@ -0,0 +1,43 @@ +[{ + "realm": "simplycpq", + "enabled": true, + "users": [{ + "username": "tsindt", + "enabled": true, + "emailVerified": true, + "firstName": "Thomas", + "lastName": "Sindt", + "email": "thomas.sindt@example.com", + "credentials": [{ + "type": "password", + "value": "XD14ko8d", + "temporary": false + }], + "realmRoles": ["admin"] + }], + "roles": { + "realm": [{ + "name": "admin", + "description": "Administrator role" + }]}, + "clients": [{ + "clientId": "scpq-backend", + "name": "Simply CPQ Backend", + "protocol": "openid-connect", + "publicClient": false, + "secret": "express-secret", + "serviceAccountsEnabled": true, + "standardFlowEnabled": false, + "directAccessGrantsEnabled": true, + "redirectUris": [], + "webOrigins": [] + },{ + "clientId": "scpq", + "name": "Simply CPQ", + "protocol": "openid-connect", + "publicClient": true, + "redirectUris": ["http://localhost:5173/*"], + "webOrigins": ["http://localhost:5173"], + "standardFlowEnabled": true + }] +}] \ No newline at end of file