Merge pull request #4 from axonivy/XIVY-12288/basic-master-view

XIVY-12288 basic master view

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

@@ -3,12 +3,44 @@ import type { Client, Data, Event } from '@axonivy/dataclass-editor/src/protocol
 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: {
+      $schema: 'https://json-schema.axonivy.com/data-class/11.4.0/data-class.json',
+      simpleName: 'Interview',
+      namespace: 'workflow.businesscasedata',
+      comment: 'Information about an interview.',
+      annotations: [],
+      isBusinessCaseData: true,
+      fields: [
+        {
+          name: 'firstName',
+          type: 'String',
+          modifiers: ['PERSISTENT'],
+          comment: 'The first name of the interviewee.',
+          annotations: []
+        },
+        {
+          name: 'lastName',
+          type: 'String',
+          modifiers: ['PERSISTENT'],
+          comment: 'The last name of the interviewee.',
+          annotations: []
+        },
+        {
+          name: 'date',
+          type: 'Date',
+          modifiers: ['PERSISTENT'],
+          comment: 'The date of the interview.',
+          annotations: []
+        },
+        {
+          name: 'conversation',
+          type: 'String',
+          modifiers: ['PERSISTENT'],
+          comment: 'Transcript of the conversation.',
+          annotations: []
+        }
+      ]
+    }
   };
 
   data(): Promise<Data> {

packages/dataclass-editor/package.json

@@ -17,9 +17,9 @@
   "types": "lib/index.d.ts",
   "main": "lib/editor.js",
   "dependencies": {
-    "@axonivy/jsonrpc": "~11.4.0-next.279",
-    "@axonivy/ui-components": "~11.4.0-next.279",
-    "@axonivy/ui-icons": "~11.4.0-next.279",
+    "@axonivy/jsonrpc": "~11.4.0-next.286",
+    "@axonivy/ui-components": "~11.4.0-next.286",
+    "@axonivy/ui-icons": "~11.4.0-next.286",
     "@tanstack/react-query": "5.32.1",
     "@tanstack/react-query-devtools": "5.32.1",
     "react": "^18.2.0"

packages/dataclass-editor/src/DataClassEditor.tsx

@@ -2,6 +2,7 @@ import { Flex, PanelMessage, Spinner } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useMemo, useState } from 'react';
+import { DataClassMaster } from './components/dataclass/master/DataClassMaster';
 import './DataClassEditor.css';
 import { useClient } from './protocol/ClientContextProvider';
 import type { EditorProps } from './protocol/types';
@@ -40,7 +41,7 @@ function DataClassEditor(props: EditorProps) {
     return <PanelMessage icon={IvyIcons.ErrorXMark} message={`An error has occurred: ${error.message}`} />;
   }
 
-  return JSON.stringify(data.data);
+  return <DataClassMaster dataClassFields={data.data.fields} />;
 }
 
 export default DataClassEditor;

packages/dataclass-editor/src/components/dataclass/data/dataclass.ts

@@ -0,0 +1,46 @@
+export interface DataClass {
+  $schema: string;
+  simpleName: string;
+  namespace: string;
+  comment: string;
+  annotations: Array<string>;
+  isBusinessCaseData: boolean;
+  entity?: DataClassEntity;
+  fields: Array<DataClassField>;
+}
+
+export interface DataClassEntity {
+  tableName: string;
+}
+
+export interface DataClassField {
+  name: string;
+  type: string;
+  comment: string;
+  modifiers: Array<DataClassFieldModifier>;
+  annotations: Array<string>;
+  entity?: DataClassFieldEntity;
+}
+
+export interface DataClassFieldEntity {
+  databaseName: string;
+  databaseFieldLength: string;
+  association?: DataClassFieldEntityAssociation;
+  cascadeTypes: Array<DataClassFieldEntityCascadeType>;
+  mappedByFieldName: string;
+  orphanRemoval: boolean;
+}
+
+export type DataClassFieldModifier =
+  | 'PERSISTENT'
+  | 'ID'
+  | 'GENERATED'
+  | 'NOT_NULLABLE'
+  | 'UNIQUE'
+  | 'NOT_UPDATEABLE'
+  | 'NOT_INSERTABLE'
+  | 'VERSION';
+
+export type DataClassFieldEntityAssociation = 'ONE_TO_ONE' | 'ONE_TO_MANY' | 'MANY_TO_ONE';
+
+export type DataClassFieldEntityCascadeType = 'ALL' | 'PERSIST' | 'MERGE' | 'REMOVE' | 'REFRESH';

packages/dataclass-editor/src/components/dataclass/master/DataClassMaster.css

@@ -0,0 +1,6 @@
+.dataclass-wrapper {
+  flex: 1;
+  flex-basis: 0;
+  min-height: 0;
+  height: 100%;
+}

packages/dataclass-editor/src/components/dataclass/master/DataClassMaster.tsx

@@ -0,0 +1,94 @@
+import {
+  BasicField,
+  Button,
+  Flex,
+  selectRow,
+  SelectRow,
+  Separator,
+  Table,
+  TableBody,
+  TableCell,
+  TableResizableHeader,
+  useReadonly,
+  useTableSelect
+} from '@axonivy/ui-components';
+import { IvyIcons } from '@axonivy/ui-icons';
+import { flexRender, getCoreRowModel, useReactTable, type ColumnDef } from '@tanstack/react-table';
+import { type DataClassField } from '../data/dataclass';
+import './DataClassMaster.css';
+
+type DataClassMasterProps = {
+  dataClassFields: Array<DataClassField>;
+};
+
+export const DataClassMaster = ({ dataClassFields }: DataClassMasterProps) => {
+  const selection = useTableSelect<DataClassField>();
+  const columns: Array<ColumnDef<DataClassField, string>> = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: cell => <div>{cell.getValue()}</div>,
+      minSize: 50
+    },
+    {
+      accessorKey: 'type',
+      header: 'Type',
+      cell: cell => <div>{cell.getValue()}</div>
+    },
+    {
+      accessorFn: (dataClassField: DataClassField) => String(dataClassField.modifiers.includes('PERSISTENT')),
+      header: 'Persistent',
+      cell: cell => <div>{cell.getValue()}</div>
+    },
+    {
+      accessorKey: 'comment',
+      header: 'Comment',
+      cell: cell => <div>{cell.getValue()}</div>
+    }
+  ];
+  const table = useReactTable({
+    ...selection.options,
+    data: dataClassFields,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    state: {
+      ...selection.tableState
+    }
+  });
+
+  const resetSelection = () => {
+    selectRow(table);
+  };
+
+  const readonly = useReadonly();
+  const control = readonly ? null : (
+    <Flex gap={2}>
+      <Button key='addButton' icon={IvyIcons.Plus} onClick={() => {}} aria-label='Add data class field' />
+      <Separator decorative orientation='vertical' style={{ height: '20px', margin: 0 }} />
+      <Button
+        key='deleteButton'
+        icon={IvyIcons.Trash}
+        onClick={() => {}}
+        disabled={table.getSelectedRowModel().rows.length === 0}
+        aria-label='Delete data class field'
+      />
+    </Flex>
+  );
+
+  return (
+    <BasicField className='dataclass-wrapper' label='Attributes' control={control}>
+      <Table>
+        <TableResizableHeader headerGroups={table.getHeaderGroups()} onClick={resetSelection} />
+        <TableBody>
+          {table.getRowModel().rows.map(row => (
+            <SelectRow key={row.id} row={row}>
+              {row.getVisibleCells().map(cell => (
+                <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+              ))}
+            </SelectRow>
+          ))}
+        </TableBody>
+      </Table>
+    </BasicField>
+  );
+};

packages/dataclass-editor/src/index.ts

@@ -1,3 +1,6 @@
+export * from './components/dataclass/data/dataclass';
 export { default as DataClassEditor } from './DataClassEditor';
-export * from './protocol';
-export * from './query';
+export * from './protocol/client-json-rpc';
+export * from './protocol/ClientContextProvider';
+export * from './query/query-client';
+export * from './query/QueryProvider';

packages/dataclass-editor/src/protocol/types.ts

@@ -1,4 +1,6 @@
-export type Data = { context: DataContext; data: string };
+import type { DataClass } from '../components/dataclass/data/dataclass';
+
+export type Data = { context: DataContext; data: DataClass };
 export type DataContext = { app: string; pmv: string; file: string };
 export type EditorProps = { context: DataContext; directSave?: boolean };
 export type SaveArgs = Data & { directSave?: boolean };