@agilemotion/oui-react-js 1.7.1 → 1.7.2

package/dist/components/DataGrid.js

@@ -27,6 +27,7 @@ var $ = _interopRequireWildcard(require("jquery"));
 var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 var _Layout = require("./layout/Layout");
+var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -115,20 +116,20 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
   const [totalNumberOfRows, setTotalNumberOfRows] = _react.default.useState(0);
   const [criteria] = _react.default.useState({});
   const [page, setPage] = _react.default.useState(0);
-  const [rows, setRows] = _react.default.useState(!_Utils.default.isNull(props.rows) ? props.rows : []);
+  const [rows, setRows] = _react.default.useState([]);
   const [deletedRows, setDeletedRows] = _react.default.useState([]);
   const [editable, setEditable] = _react.default.useState(false);
   const [scrollWidth, setScrollWidth] = _react.default.useState(0);
   const [rowsPerPageOptions] = _react.default.useState([15, 30, 45, 60, 75]);
   const [rowsPerPageLoading, setRowsPerPageLoading] = _react.default.useState(true);
   const [rowsPerPage, setRowsPerPage] = _react.default.useState(props.config.pageSize);
-  const highlightRowSelection = _react.default.useRef(!_Utils.default.isNull(props.config.highlightRowSelection) ? props.config.highlightRowSelection : true);
+  const highlightRowSelection = _react.default.useRef(!_Utils.default.isNull(props.config.highlightRowSelection) ? props.config.highlightRowSelection : !_Utils.default.isNull(props.config.disableRowSelection) ? !props.config.disableRowSelection : true);
   const [cells] = _react.default.useState([]);
   const [headingHandle] = _react.default.useState({});
   const [filterHandle] = _react.default.useState({});
   const [columnLayoutHandles] = _react.default.useState([]);
   const rowCount = _react.default.useRef(-1);
-  const loadingRef = _react.default.useRef(true);
+  const rowsRef = _react.default.useRef([]);
   let noteKey = 0;
   const api = () => {
     return {
@@ -210,6 +211,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
       },
       clear: () => {
         // TODO : dispose from observer
+        rowsRef.current = [];
         setRows([]);
       },
       addRows: newRows => {
@@ -220,7 +222,9 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
         for (const newRow of newRows) {
           newSelection.push(newRow.id);
         }
-        setSelected(newSelection);
+        if (_Utils.default.isNull(props.config.disableRowSelection) || props.config.disableRowSelection === false) {
+          setSelected(newSelection);
+        }
         if (!_Utils.default.isNull(props.onSelectionChange)) {
           props.onSelectionChange(newRows);
         }
@@ -233,7 +237,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
         return totalNumberOfRows / rowsPerPage;
       },
       get rows() {
-        return rows;
+        return rowsRef.current;
       },
       search: () => {
         search();
@@ -260,15 +264,17 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     setOrderBy(property);
   };
   function handleSelectAllClick(event) {
-    if (event.target.checked) {
-      const newSelecteds = rows.map(n => n.name);
-      setSelected(newSelecteds);
-      props.onSelectionChange(newSelecteds);
-    } else {
-      setSelected([]);
-      props.onSelectionChange([]);
+    if (_Utils.default.isNull(props.config.disableRowSelection) || props.config.disableRowSelection === false) {
+      if (event.target.checked) {
+        const newSelecteds = rows.map(n => n.name);
+        setSelected(newSelecteds);
+        props.onSelectionChange(newSelecteds);
+      } else {
+        setSelected([]);
+        props.onSelectionChange([]);
+      }
+      _ApplicationManager.default.enableFormMarkers(true);
     }
-    _ApplicationManager.default.enableFormMarkers(true);
   }
   function getSelectedRows(selected) {
     let selectedRows = [];
@@ -283,27 +289,29 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
     return selectedRows;
   }
   function doHandleClick(event, id) {
-    _ApplicationManager.default.enableFormMarkers(true);
-    const selectedIndex = -1;
-    selected.indexOf(id);
-    let newSelected = [];
-    if (props.multiSelect === true) {
-      if (selectedIndex === -1) {
-        newSelected = newSelected.concat(selected, id);
-      } else if (selectedIndex === 0) {
-        newSelected = newSelected.concat(selected.slice(1));
-      } else if (selectedIndex === selected.length - 1) {
-        newSelected = newSelected.concat(selected.slice(0, -1));
-      } else if (selectedIndex > 0) {
-        newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+    if (_Utils.default.isNull(props.config.disableRowSelection) || props.config.disableRowSelection === false) {
+      _ApplicationManager.default.enableFormMarkers(true);
+      const selectedIndex = -1;
+      selected.indexOf(id);
+      let newSelected = [];
+      if (props.multiSelect === true) {
+        if (selectedIndex === -1) {
+          newSelected = newSelected.concat(selected, id);
+        } else if (selectedIndex === 0) {
+          newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+          newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+          newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+        }
+      } else {
+        newSelected.push(id);
+      }
+      let selectedRows = getSelectedRows(newSelected);
+      setSelected(newSelected);
+      if (!_Utils.default.isNull(props.onSelectionChange)) {
+        props.onSelectionChange(selectedRows);
       }
-    } else {
-      newSelected.push(id);
-    }
-    let selectedRows = getSelectedRows(newSelected);
-    setSelected(newSelected);
-    if (!_Utils.default.isNull(props.onSelectionChange)) {
-      props.onSelectionChange(selectedRows);
     }
   }
   function fireSelectionEvent() {
@@ -349,11 +357,14 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
   };
   function processData(data, conf) {
     setTotalNumberOfRows(data.totalNumberOfRecords ? data.totalNumberOfRecords : data.records.length);
+    rowsRef.current = data.records;
+    updateRowClasses(data.records);
     let tableRows = [];
     let records = data.records;
     for (let i = 0; i < records.length; i++) {
       tableRows.push(observeRow(records[i]));
     }
+    rowsRef.current = tableRows;
     setRows(tableRows);
   }
   const search = function () {
@@ -371,8 +382,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
       if (serviceType === 'rpc' || serviceType === 'rest') {
         let method = serviceType === 'rpc' ? _RestUtils.invokeRpc : _RestUtils.invokeRest;
         method(service, props.handle, props.viewId, result => {
-          let data = serviceType === 'rpc' ? result.data : result;
-          processData(data, conf);
+          processData(result, conf);
         }, e => {
           console.error(e);
           //Utils.publishSystemErrorMessage(props.viewId);
@@ -460,9 +470,24 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
           newSelected.push(selectedElement);
         }
       }
-      setSelected(newSelected);
+      if (_Utils.default.isNull(props.config.disableRowSelection) || props.config.disableRowSelection === false) {
+        setSelected(newSelected);
+      }
     });
   }
+  const updateRowClasses = newRows => {
+    if (newRows) {
+      if (props.config.rowAttributes && props.config.rowAttributes.classEvaluator) {
+        let index = 0;
+        for (const row of newRows) {
+          row.className = _DynamicJS.default.executeScriptObject('ROW-' + row.id + 'classEvaluator', props.config.rowAttributes.classEvaluator, props.config.id, {
+            index
+          }, null);
+          index++;
+        }
+      }
+    }
+  };
   _react.default.useEffect(() => {
     updateScrollBarPadding();
     _Observable.default.processSystemGeneratedSubscriptions(props.config.id);
@@ -481,9 +506,12 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.rows)) {
       let rowValues = [];
+      rowsRef.current = props.rows;
+      updateRowClasses(props.rows);
       for (const row of props.rows) {
         rowValues.push(observeRow(row));
       }
+      rowsRef.current = rowValues;
       setRows(rowValues);
     }
   }, [props.rows]);
@@ -676,19 +704,20 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
   }, rows.map((row, index) => {
     const isItemSelected = isSelected(row.id);
     const labelId = `enhanced-table-checkbox-${index}`;
+    let defaultRowStyle = {
+      display: 'flex',
+      flexWrap: 'wrap'
+    };
     return /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tr, {
-      style: {
-        display: 'flex',
-        flexWrap: 'wrap'
-      },
+      style: props.config.rowAttributes && props.config.rowAttributes.style ? _Utils.default.mergeObjects(props.config.rowAttributes.style, defaultRowStyle) : defaultRowStyle,
       onClick: event => handleClick(event, row.id),
       role: "checkbox",
       "aria-checked": isItemSelected,
       tabIndex: -1,
-      key: row.id,
+      key: index,
       id: 'ROW-' + row.id,
       selected: isItemSelected,
-      className: highlightRowSelection.current ? isItemSelected ? classes.tableSelected : classes.tableRow : null
+      className: (highlightRowSelection.current ? isItemSelected ? classes.tableSelected : classes.tableRow : '') + (row.className ? ' ' + row.className : '')
     }, config.selectionMode === 'MULTIPLE' ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
       padding: "checkbox",
       width: MULTI_SELECT_CHECKBOX_COL_WIDTH + 'px',
@@ -734,7 +763,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo( /*#__PURE_
       columnConfig: column,
       dataBinding: !_Utils.default.isNull(column.dataBinding) ? column.dataBinding : column.id,
       row: row,
-      contentType: column.fieldType
+      contentType: column.fieldType || column.editor?.fieldType
     }))));
   })))), _Utils.default.isNull(props.pagination) || props.pagination === true ? /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
     rowsPerPageOptions: rowsPerPageOptions,

package/dist/components/DocumentTemplateDesigner.css

@@ -1,7 +1,7 @@
-.dropTarget {
+.documentTemplateDesigner .dropTarget {
 }
 
-._draggable_ {
+.documentTemplateDesigner ._draggable_ {
     position: absolute;
     border-radius: 2px;
     display: inline-block;

package/dist/components/DocumentTemplateDesigner.js

@@ -9,19 +9,28 @@ var _Utils = _interopRequireDefault(require("../Utils"));
 var _Observable = _interopRequireDefault(require("../event/Observable"));
 require("./DocumentTemplateDesigner.css");
 var _DocumentTemplateDesignerComponent = _interopRequireDefault(require("./DocumentTemplateDesignerComponent"));
+var _Event = _interopRequireDefault(require("../event/Event"));
+var _EventType = _interopRequireDefault(require("../event/EventType"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DocumentTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const DocumentTemplateDesigner = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [visible, setVisible] = _react.default.useState(false);
-  const [uploadTrigger, setUploadTrigger] = _react.default.useState(null);
-  const [value, setValue] = _react.default.useState({});
+  const [loading, setLoading] = _react.default.useState(true);
+  const [value, setValue] = _react.default.useState(null);
+  const [documentName, setDocumentName] = _react.default.useState(null);
+  const [hasError, setHasError] = _react.default.useState(null);
+  const [markInvalid, setMarkInvalid] = _react.default.useState(false);
+  const [templateDesignerHandle] = _react.default.useState({});
   _react.default.useEffect(() => {
     props.handle.api = api();
   });
   _react.default.useEffect(() => {
+    props.handle.api = api();
     let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
     _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
     _Observable.default.addSystemSubscriptions(props.viewId, parsedConfig);
     props.handle.api.refresh();
+    let event = new _Event.default(props.handle, props.viewId, null);
+    _Observable.default.fireEvent(_EventType.default.COMPONENT_LOAD, event);
     return () => {
       _Observable.default.clearComponentEventListeners(props.handle);
     };
@@ -41,49 +50,52 @@ const DocumentTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/
         }
       },
       getChildren: () => {
-        return [];
+        return [templateDesignerHandle];
       },
       set visible(visible) {
         setVisible(visible);
       },
+      set documentName(documentName) {
+        setDocumentName(documentName);
+      },
       handleUploadDocument: event => {
         setUploadTrigger(current => !current);
       },
       get value() {
+        setMarkInvalid(visible);
         return value;
+      },
+      set value(val) {
+        setHasError(null);
+        setValue(val);
+      },
+      set loading(val) {
+        setLoading(val);
       }
     };
   };
-  const htmlToBase64 = htmlString => {
-    const base64String = btoa(encodeURIComponent(htmlString).replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode(parseInt(p1, 16))));
-    return `data:text/html;base64,${base64String}`;
-  };
-  const addDocumentMetaData = (file, html) => {
-    const docMetaData = {
-      name: file.name,
-      size: file.size,
-      type: 'text/html',
-      payload: htmlToBase64(html)
-    };
-    setValue(docMetaData);
-  };
   const onValueChange = newValue => {
-    setValue(currentValue => {
-      return {
-        ...currentValue,
-        ['payload']: htmlToBase64(newValue)
-      };
-    });
+    setHasError(!newValue);
+    setValue(newValue);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
-    style: {
-      display: visible ? 'block' : 'none'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_DocumentTemplateDesignerComponent.default, {
-    valueChangeHandler: onValueChange,
-    addDocumentMetaDataHandler: addDocumentMetaData,
-    uploadTrigger: uploadTrigger
+    className: 'documentTemplateDesigner',
+    style: _Utils.default.mergeStyles({
+      display: visible ? 'block' : 'none',
+      height: '100%',
+      borderRadius: '4px',
+      border: hasError === true && markInvalid ? '1px solid red' : null
+    }, props.config)
+  }, loading ? /*#__PURE__*/_react.default.createElement("div", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_DocumentTemplateDesignerComponent.default, {
+    id: props.config.id,
+    viewId: props.viewId,
+    visible: visible,
+    documentName: documentName,
+    handle: templateDesignerHandle,
+    propertiesFormConfig: props.config.propertiesForm,
+    value: value,
+    valueChangeHandler: onValueChange
   }));
-}));
+});
 var _default = exports.default = DocumentTemplateDesigner;

package/dist/components/DocumentTemplateDesignerComponent.css

@@ -0,0 +1,15 @@
+@import '../../../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import "../../../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css";
+
+.e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
+}
+
+#parent-container {
+}