Merge pull request #23 from axonivy/XIVY-12291/edit-properties

XIVY-12291 edit data class properties
axonivy · Sep 17, 2024 · f95e568 · f95e568
2 parents 4b6b03e + 5e858d1
commit f95e568
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 11 deletions.
diff --git a/integrations/standalone/src/mock/dataclass-client-mock.ts b/integrations/standalone/src/mock/dataclass-client-mock.ts
@@ -9,7 +9,7 @@ export class DataClassClientMock implements Client {
       namespace: 'workflow.businesscasedata',
       comment: 'Information about an interview.',
       annotations: ['@full.qualified.name.one(argument = "value")', '@full.qualified.name.two'],
-      isBusinessCaseData: true,
+      isBusinessCaseData: false,
       fields: [
         {
           name: 'firstName',

diff --git a/integrations/standalone/tests/integration/dataclass-editor-business-dataclass.spec.ts b/integrations/standalone/tests/integration/dataclass-editor-business-dataclass.spec.ts
@@ -41,10 +41,12 @@ test('save data', async ({ page }) => {
   const editor = await DataClassEditor.openNewDataClass(page);
   await expect(editor.table.rows).toHaveCount(0);
 
+  await editor.detail.fillDataClassValues('Data', 'New Description', 'New Annotations');
   await editor.addField('newAttribute', 'String');
 
   await editor.page.reload();
 
+  await editor.detail.expectToHaveDataClassValues('Data', 'New Description', 'New Annotations');
   await expect(editor.table.rows).toHaveCount(1);
   await editor.table.row(0).expectToHaveValues('newAttribute', 'String', '');
 

diff --git a/integrations/standalone/tests/mock/dataclass-editor.spec.ts b/integrations/standalone/tests/mock/dataclass-editor.spec.ts
@@ -13,8 +13,17 @@ test('title', async () => {
 });
 
 test('headers', async () => {
+  await expect(editor.title).toHaveText('Data Editor');
+  await expect(editor.detail.title).toHaveText('Data - Interview');
+
+  await editor.detail.classType.button('Business Data').click();
   await expect(editor.title).toHaveText('Business Data Editor');
   await expect(editor.detail.title).toHaveText('Business Data - Interview');
+
+  await editor.detail.classType.button('Entity').click();
+  await expect(editor.title).toHaveText('Entity Editor');
+  await expect(editor.detail.title).toHaveText('Entity - Interview');
+
   await editor.table.row(0).locator.click();
   await expect(editor.detail.title).toHaveText('Attribute - firstName');
 });

diff --git a/integrations/standalone/tests/pageobjects/ClassType.ts b/integrations/standalone/tests/pageobjects/ClassType.ts
@@ -7,7 +7,11 @@ export class ClassType {
     this.locator = locator.getByRole('group');
   }
 
+  button(classType: string) {
+    return this.locator.getByRole('radio', { name: classType, exact: true });
+  }
+
   async expectToHaveValue(classType: string) {
-    await expect(this.locator.getByRole('radio', { name: classType, exact: true })).toHaveAttribute('data-state', 'on');
+    await expect(this.button(classType)).toHaveAttribute('data-state', 'on');
   }
 }
diff --git a/integrations/standalone/tests/pageobjects/Detail.ts b/integrations/standalone/tests/pageobjects/Detail.ts
@@ -66,4 +66,11 @@ export class Detail {
     await expect(this.comment.locator).toHaveValue(comment);
     await expect(this.annotations.locator).toHaveValue(annotations);
   }
+
+  async fillDataClassValues(classType: string, description: string, annotations: string) {
+    await this.expectToBeDataClass();
+    await this.classType.button(classType).click();
+    await this.description.locator.fill(description);
+    await this.annotations.locator.fill(annotations);
+  }
 }
diff --git a/packages/dataclass-editor/src/components/dataclass/detail/DataClassDetailContent.tsx b/packages/dataclass-editor/src/components/dataclass/detail/DataClassDetailContent.tsx
@@ -1,22 +1,38 @@
 import { BasicField, Button, Flex, Textarea, ToggleGroup, ToggleGroupItem } from '@axonivy/ui-components';
-import { useState } from 'react';
 import { useAppContext } from '../../../context/AppContext';
-import { classType as getClassType } from '../data/dataclass-utils';
+import type { DataClass } from '../data/dataclass';
+import { classType } from '../data/dataclass-utils';
 import './DetailContent.css';
 
 export const DataClassDetailContent = () => {
-  const { dataClass } = useAppContext();
+  const { dataClass, setDataClass } = useAppContext();
 
-  const initialClassType = getClassType(dataClass);
+  const initialClassType = classType(dataClass);
 
-  const [classType, setClassType] = useState(initialClassType);
+  const variant = (value: string) => (value === initialClassType ? 'primary' : undefined);
 
-  const variant = (value: string) => (value === classType ? 'primary' : undefined);
+  const handleClassTypeChange = (classType: string) => {
+    const newDataClass = structuredClone(dataClass);
+    newDataClass.isBusinessCaseData = false;
+    newDataClass.entity = undefined;
+    if (classType === 'BUSINESS_DATA') {
+      newDataClass.isBusinessCaseData = true;
+    } else if (classType === 'ENTITY') {
+      newDataClass.entity = { tableName: '' };
+    }
+    setDataClass(newDataClass);
+  };
+
+  const handleDataClassPropertyChange = <DKey extends keyof DataClass>(key: DKey, value: DataClass[DKey]) => {
+    const newDataClass = structuredClone(dataClass);
+    newDataClass[key] = value;
+    setDataClass(newDataClass);
+  };
 
   return (
     <Flex direction='column' gap={4} className='detail-content'>
       <BasicField label='Class type'>
-        <ToggleGroup type='single' className='class-type-group' value={classType} onValueChange={setClassType}>
+        <ToggleGroup type='single' className='class-type-group' value={initialClassType} onValueChange={handleClassTypeChange}>
           <ToggleGroupItem value='DATA' asChild>
             <Button variant={variant('DATA')} size='large'>
               Data
@@ -35,10 +51,13 @@ export const DataClassDetailContent = () => {
         </ToggleGroup>
       </BasicField>
       <BasicField label='Description'>
-        <Textarea value={dataClass.comment} />
+        <Textarea value={dataClass.comment} onChange={event => handleDataClassPropertyChange('comment', event.target.value)} />
       </BasicField>
       <BasicField label='Annotations'>
-        <Textarea value={dataClass.annotations.join('\n')} />
+        <Textarea
+          value={dataClass.annotations.join('\n')}
+          onChange={event => handleDataClassPropertyChange('annotations', event.target.value.split('\n'))}
+        />
       </BasicField>
     </Flex>
   );