1.3.0

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 18.17.1
-yarn 1.22.10
+nodejs 18.19.1
+yarn 1.22.19

CHANGELOG.md

@@ -0,0 +1,81 @@
+
+# Chem-Generic-UI Changelog
+
+## [1.3.0]
+> 2024-04-24
+
+* Features and enhancements:
+  * Introduce new options to restriction setting for designer
+  * Introduce the customized field name based on certain conditions for designer
+  * Introduce the default unit feature for designer
+  * Introduce the element export function in docx format for user
+  * Dynamic field columns for designer
+  * Export and import klass and its template within the same instance or across instances for designer
+  * Add error handling on export and import klass and its template function
+  * Add helpers for designer
+
+* Bug fixes:
+  * Fix missing options for drag sample
+  * Fix dynamic column width issue
+  * Re-label datetime range
+  * Rename button title
+
+* Chores:
+  * Upgrade generic-ui-core
+  * Bump follow-redirects from 1.15.4 to 1.15.6
+  * Bump webpack-dev-middleware from 5.3.3 to 5.3.4
+  * Upgrade node
+  * Bump express from 4.18.2 to 4.19.2
+  * Upgrade yarn 1.22.19
+
+## [1.1.2]
+> 2024-02-29
+
+* Features and enhancements:
+  * Introduced the feature to set the match option on the restriction setting.
+
+* Bug fixes:
+  * Fixed the issue with the restriction is not functioning properly in the initial view of template.
+
+## [1.1.1]
+> 2024-01-30
+
+* Features and enhancements:
+  * Introduced read-only attribute to text field
+  * Introduced the feature to drag an element sample to a segment
+
+* Bug fixes:
+  * Encoding the service URL
+  * Missing "Assign to Element" when copying a segment
+
+* Chores:
+  * Prototype Pollution in Lodash
+  * Updated README
+  * Bump follow-redirects from 1.15.2 to 1.15.4
+  * Upgraded puma from 5.6.8 to 5.6.9
+  * Upgraded follow-redirects from 1.15.5 to 1.16.0
+
+## [1.1.0]
+
+* Features and enhancements:
+  * Introduced the feature to associate template with Ontology Term. Check the video [here](https://youtu.be/ZJlUtO4DCao?list=PLZoVOhxCsajnl5_tveYUvtD0Y57devzdn).
+
+## [1.0.12]
+> 2024-01-09
+
+* Bug fixes:
+  * Breaking page while reload the undefined template
+
+* Chores:
+  * Bump @adobe/css-tools from 4.3.1 to 4.3.2
+  * Bump @babel/traverse from 7.22.5 to 7.23.2
+  * Bump follow-redirects from 1.15.2 to 1.15.4
+
+## [1.0.11]
+> 2023-11-13
+
+* Features and enhancements:
+  * Drag element sample to segment
+
+* Chores:
+  * Bump postcss from 8.4.24 to 8.4.31

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chem-generic-ui",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "main": "./dist/bundle.js",
   "license": "AGPL-3.0",
   "private": false,
@@ -21,7 +21,8 @@
     "ag-grid-community": "^28.2.1",
     "ag-grid-react": "^28.2.1",
     "date-fns": "^2.29.3",
-    "generic-ui-core": "^1.0.0",
+    "generic-ui-core": "^1.3.0",
+    "html-to-image": "^1.11.11",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "moment-precise-range-plugin": "^1.3.0",

src/__test__/components/designer/Fields.test.js

@@ -46,38 +46,44 @@ describe('render Dummy Field', () => {
 describe('render text field', () => {
   it('should render text field group', () => {
     const layer = { key: 'layer1' };
-    const fieldObject = { type: 'text', field: 'field1', field1: 'value1' };
-    const label = 'Field Label';
-    const field = 'field1';
+    const fieldObject = {
+      type: 'text',
+      field: 'placeholder',
+      placeholder: 'value1',
+    };
+    const field = 'placeholder';
     const fnChange = jest.fn();
     const { getByText, getByRole } = render(
-      renderTextFieldGroup({ layer, fieldObject, label, field, fnChange })
+      renderTextFieldGroup({ layer, fieldObject, field, fnChange })
     );
-    const labelElement = getByText('Field Label');
+    const labelElement = getByText('Placeholder');
     const inputElement = getByRole('textbox');
     expect(labelElement).toBeInTheDocument();
     expect(inputElement).toHaveValue('value1');
     fireEvent.change(inputElement, { target: { value: 'new value' } });
     expect(fnChange).toHaveBeenCalledWith(
       expect.any(Object),
       'value1',
-      'field1',
+      'placeholder',
       'layer1',
-      'field1',
+      'placeholder',
       'text'
     );
   });
 
   it('should not render text field', () => {
     const layer = { key: 'layer1' };
-    const fieldObject = { type: 'dummy', field: 'field1', field1: 'value1' };
-    const label = 'Field Label';
+    const fieldObject = {
+      type: 'dummy',
+      field: 'placeholder',
+      field1: 'value1',
+    };
     const field = 'field1';
     const fnChange = jest.fn();
     const { queryByText } = render(
-      renderTextFieldGroup({ layer, fieldObject, label, field, fnChange })
+      renderTextFieldGroup({ layer, fieldObject, field, fnChange })
     );
-    const labelElement = queryByText('Field Label');
+    const labelElement = queryByText('Placeholder');
     expect(labelElement).not.toBeInTheDocument();
   });
 });

src/assets/color.scss

@@ -1,16 +1,22 @@
+$color-green: green;
+$color-lightcoral: lightcoral;
+$color-lightgray: lightgray;
+$color-lightyellow: lightyellow;
+$color-red: red;
+
 $color-background: #eee;
 $color-bs-info: #5bc0de;
 $color-bs-primary: #337ab7;
 $color-bs-warning: #f0ad4e;
-$color-btn-success: green;
-$color-btn-warning: red;
-$color-can-drop: lightgray;
+$color-btn-success: $color-green;
+$color-btn-warning: $color-red;
+$color-can-drop: $color-lightgray;
 $color-default: #777;
 $color-editable: #fff;
-$color-invalid: lightcoral;
+$color-invalid: $color-lightcoral;
 $color-is-over: #31708f;
 $color-readonly: #ddd;
-$color-required: lightyellow;
+$color-required: $color-lightyellow;
 $color-selected-border: #0dcaf0;
 $color-attention-emphasis: #9a6700;
 $color-halloween: #fe9600;

src/assets/field.scss

@@ -5,6 +5,10 @@
   display: inline-flex;
   width: 100%;
 
+  > div[class^="col-"] {
+    padding-right: 0;
+  }
+
   .gu-form-group-label {
     float: right;
     font-weight: 700;

src/assets/flow.scss

@@ -1,12 +1,19 @@
 @use "color" as *;
 
+@mixin node-position-absolute-top-right {
+  position: absolute;
+  top: 0px;
+  right: 2px;
+}
+
 .gu_flow_default_element {
+  .add {
+    @include node-position-absolute-top-right;
+    color: $color-bs-primary;
+  }
   .chk {
-    position: absolute;
-    top: 0px;
-    right: 2px;
-    color: green;
-    // z-index: 100;
+    @include node-position-absolute-top-right;
+    color: $color-green;
   }
   .border_line {
     border-width: 0px 0px 1px 0px;

src/components/actions/ButtonExport.js

@@ -0,0 +1,35 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+const BTN_EXPORT_TIP = (
+  <Tooltip id="_cgu_tooltip_export">click to export as docx file</Tooltip>
+);
+
+const ButtonExport = props => {
+  const { generic, fnExport } = props;
+  if (generic?.is_new) return null;
+
+  const handleExport = () => {
+    fnExport(generic);
+  };
+
+  return (
+    <OverlayTrigger placement="top" overlay={BTN_EXPORT_TIP}>
+      <Button bsSize="xsmall" bsStyle="primary" onClick={() => handleExport()}>
+        <i className="fa fa-download" aria-hidden="true" /> Export
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+ButtonExport.propTypes = {
+  generic: PropTypes.object,
+  fnExport: PropTypes.func,
+};
+ButtonExport.defaultProps = {
+  generic: {},
+  fnExport: () => {},
+};
+export default ButtonExport;

src/components/designer/AttrNewBtn.js

@@ -21,7 +21,7 @@ const AttrNewBtn = props => {
           </Tooltip>
         }
       >
-        <Button bsStyle="primary" onClick={() => setShow(true)}>
+        <Button onClick={() => setShow(true)}>
           New {genericType}&nbsp;
           <i className="fa fa-plus" aria-hidden="true" />
         </Button>

src/components/designer/AttrUploadBtn.js

@@ -0,0 +1,46 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Glyphicon, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import Constants from '../tools/Constants';
+import UploadKlassModal from '../elements/UploadKlassModal';
+
+const AttrUploadBtn = props => {
+  const { data, fnUpload, genericType } = props;
+  const [show, setShow] = useState(false);
+
+  if (genericType === Constants.GENERIC_TYPES.DATASET) return null;
+
+  return (
+    <>
+      <OverlayTrigger
+        placement="top"
+        overlay={
+          <Tooltip id="_tooltip_klass_upload">{`import a ${genericType} and its template`}</Tooltip>
+        }
+      >
+        <Button bsSize="xs" onClick={() => setShow(true)}>
+          Import &nbsp; <Glyphicon glyph="import" />
+        </Button>
+      </OverlayTrigger>
+      <UploadKlassModal
+        data={data}
+        fnUpload={fnUpload}
+        genericType={genericType}
+        showProps={{ show, setShow }}
+      />
+    </>
+  );
+};
+
+AttrUploadBtn.propTypes = {
+  data: PropTypes.object.isRequired,
+  genericType: PropTypes.oneOf([
+    Constants.GENERIC_TYPES.ELEMENT,
+    Constants.GENERIC_TYPES.SEGMENT,
+    Constants.GENERIC_TYPES.DATASET,
+  ]).isRequired,
+  fnUpload: PropTypes.func.isRequired,
+};
+
+export default AttrUploadBtn;

src/components/designer/Designer.js

@@ -9,15 +9,18 @@ import GenGridSg from '../details/GenGridSg';
 import GenGridDs from '../details/GenGridDs';
 import getPageSizeForTheme from '../../utils/grid';
 import Template from './template/Template';
+import AttrUploadBtn from './AttrUploadBtn';
+import { getFieldProps } from '../tools/utils';
 
 const Designer = _props => {
   const {
     fnCopy,
     fnCreate,
-    fnDeActivateKlass,
+    fnUpload,
     fnDelete,
     fnSubmit,
     fnActive,
+    fnDownload,
     fnUpdate,
     genericType,
     gridData,
@@ -54,6 +57,7 @@ const Designer = _props => {
           <GenGridEl
             fnCopyKlass={fnCopy}
             fnDeActivateKlass={fnActive}
+            fnDownloadKlass={fnDownload}
             fnDeleteKlass={fnDelete}
             fnEditKlass={fnUpdate}
             genericType={genericType}
@@ -69,6 +73,7 @@ const Designer = _props => {
           <GenGridSg
             fnCopyKlass={fnCopy}
             fnDeActivateKlass={fnActive}
+            fnDownloadKlass={fnDownload}
             fnDeleteKlass={fnDelete}
             fnEditKlass={fnUpdate}
             genericType={genericType}
@@ -85,6 +90,7 @@ const Designer = _props => {
           <GenGridDs
             fnCopyKlass={fnCopy}
             fnDeActivateKlass={fnActive}
+            fnDownloadKlass={fnDownload}
             fnEditKlass={fnUpdate}
             genericType={genericType}
             fnShowProp={onDataSelected}
@@ -110,9 +116,17 @@ const Designer = _props => {
               klasses={klasses || []}
             />
           }
+          btnUpload={
+            <AttrUploadBtn
+              data={klasses}
+              fnUpload={fnUpload}
+              genericType={genericType}
+            />
+          }
           fnClickLarge={() => setTheme(Constants.GRID_THEME.ALPINE.VALUE)}
           fnClickSmall={() => setTheme(Constants.GRID_THEME.BALHAM.VALUE)}
         />
+        {getFieldProps('designer').fieldTooltip}
       </ButtonToolbar>
       {genGrid()}
       {data ? (