Merge pull request #3 from axonivy/XIVY-12288/display-data-class-data

XIVY-12288 display data class data as string

README.md

@@ -25,7 +25,7 @@ This repo contains the web-based data class editor client.
 Simply start the `Launch Standalone` or `Launch Standalone Mock` launch config to get debug and breakpoint support.
 
 > [!NOTE]
-> The `Launch Standalone` launch config connects to a real designer and therefore requires a running designer engine on port 8081 with a project called `variables`. These attributes can be changed via URL parameters.
+> The `Launch Standalone` launch config connects to a real designer and therefore requires a running designer engine on port 8081 with a project called `dataclasses`. These attributes can be changed via URL parameters.
 
 > [!NOTE]
 > The `Launch Standalone Mock` launch config only receives mock data and therefore does not work with features for which a real engine is needed (e.g. data validation).

integrations/standalone/src/index.tsx

@@ -1,10 +1,35 @@
+import { ClientContextProvider, ClientJsonRpc, DataClassEditor, QueryProvider, initQueryClient } from '@axonivy/dataclass-editor';
+import { ReadonlyProvider, ThemeProvider } from '@axonivy/ui-components';
+import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { DataClassEditor } from '../../../packages/dataclass-editor/src';
 import './index.css';
+import { URLParams } from './url-helper';
 
 export async function start(): Promise<void> {
   const root = ReactDOM.createRoot(document.getElementById('root')!);
-  root.render(<DataClassEditor />);
+  const server = URLParams.webSocketBase();
+  const app = URLParams.app();
+  const pmv = URLParams.pmv();
+  const file = URLParams.file();
+  const theme = URLParams.theme();
+  const readonly = URLParams.readonly();
+
+  const client = await ClientJsonRpc.startWebSocketClient(server);
+  const queryClient = initQueryClient();
+
+  root.render(
+    <React.StrictMode>
+      <ThemeProvider defaultTheme={theme}>
+        <ClientContextProvider client={client}>
+          <QueryProvider client={queryClient}>
+            <ReadonlyProvider readonly={readonly}>
+              <DataClassEditor context={{ app, pmv, file: file }} />
+            </ReadonlyProvider>
+          </QueryProvider>
+        </ClientContextProvider>
+      </ThemeProvider>
+    </React.StrictMode>
+  );
 }
 
 start();

integrations/standalone/src/mock.tsx

@@ -1,10 +1,22 @@
+import { ClientContextProvider, DataClassEditor, initQueryClient, QueryProvider } from '@axonivy/dataclass-editor';
+import { ThemeProvider } from '@axonivy/ui-components';
+import React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import { DataClassEditor } from '../../../packages/dataclass-editor/src';
 import './index.css';
+import { DataClassClientMock } from './mock/dataclass-client-mock';
 
-export async function start(): Promise<void> {
-  const root = ReactDOM.createRoot(document.getElementById('root')!);
-  root.render(<DataClassEditor />);
-}
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+const client = new DataClassClientMock();
+const queryClient = initQueryClient();
 
-start();
+root.render(
+  <React.StrictMode>
+    <ThemeProvider defaultTheme={'light'}>
+      <ClientContextProvider client={client}>
+        <QueryProvider client={queryClient}>
+          <DataClassEditor context={{ app: '', pmv: '', file: '' }} />
+        </QueryProvider>
+      </ClientContextProvider>
+    </ThemeProvider>
+  </React.StrictMode>
+);

integrations/standalone/src/mock/dataclass-client-mock.ts

@@ -0,0 +1,24 @@
+import type { Client, Data, Event } from '@axonivy/dataclass-editor/src/protocol/types';
+
+export class DataClassClientMock implements Client {
+  private dataClassData: Data = {
+    context: { app: '', pmv: '', file: '' },
+    data: `{
+  "$schema" : "https://json-schema.axonivy.com/data-class/11.4.0/data-class.json",
+  "simpleName" : "Data",
+  "namespace" : "mock",
+  "isBusinessCaseData" : false
+}`
+  };
+
+  data(): Promise<Data> {
+    return Promise.resolve(this.dataClassData);
+  }
+
+  saveData(saveData: Data): Promise<String> {
+    this.dataClassData.data = saveData.data;
+    return Promise.resolve('');
+  }
+
+  onDataChanged: Event<void>;
+}

integrations/standalone/src/url-helper.ts

@@ -0,0 +1,57 @@
+export namespace URLParams {
+  export function parameter(key: string): string | undefined {
+    const param = new URLSearchParams(window.location.search).get(key);
+    return param !== null ? decodeURIComponent(param) : undefined;
+  }
+
+  export function app(): string {
+    return parameter('app') ?? '';
+  }
+
+  export function pmv(): string {
+    return parameter('pmv') ?? '';
+  }
+
+  export function file(): string {
+    return parameter('file') ?? '';
+  }
+
+  export function theme(): 'dark' | 'light' {
+    const theme = parameter('theme');
+    if (theme === 'dark') {
+      return theme;
+    }
+    return 'light';
+  }
+
+  export function readonly(): boolean {
+    const readonly = parameter('readonly');
+    if (readonly === 'true') {
+      return true;
+    }
+    return false;
+  }
+
+  export function webSocketBase(): string {
+    return `${isSecureConnection() ? 'wss' : 'ws'}://${server()}`;
+  }
+
+  const isSecureConnection = () => {
+    const secureParam = parameter('secure');
+    if (secureParam === 'true') {
+      return true;
+    }
+    if (secureParam === 'false') {
+      return false;
+    }
+    return window.location.protocol === 'https:';
+  };
+
+  const server = () => {
+    return parameter('server') ?? basePath();
+  };
+
+  const basePath = () => {
+    return 'localhost:8081';
+  };
+}