@agilemotion/oui-react-js 1.7.1 → 1.7.2

package/dist/components/DocumentTemplateDesignerComponent.js

@@ -4,104 +4,400 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _ej2ReactRichtexteditor = require("@syncfusion/ej2-react-richtexteditor");
+var _ej2ReactDocumenteditor = require("@syncfusion/ej2-react-documenteditor");
+var _ej2Base = require("@syncfusion/ej2-base");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
-var _DocumentTemplatePlaceholderDialog = _interopRequireDefault(require("./DocumentTemplatePlaceholderDialog"));
-var _mammoth = _interopRequireDefault(require("mammoth"));
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 require("./DocumentTemplateDesignerComponent.css");
+var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
+var _Form = _interopRequireDefault(require("./form/Form"));
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+var _Utils = _interopRequireDefault(require("../Utils"));
+var _reactPromiseTracker = require("react-promise-tracker");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
+(0, _ej2Base.registerLicense)('ORg4AjUWIQA/Gnt2U1hhQlJBfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTX5adkJiWHtWdXBXT2Je');
+_ej2ReactDocumenteditor.DocumentEditorContainerComponent.Inject(_ej2ReactDocumenteditor.Toolbar);
 const DocumentTemplateDesignerComponent = props => {
   const {
     contractTemplate,
     uploadTrigger,
     valueChangeHandler,
-    addDocumentMetaDataHandler
+    addDocumentMetaDataHandler,
+    value
   } = props;
-  const [open, setOpen] = React.useState(false);
-  const [error, setError] = React.useState(null);
-  const [documentLoaded, setDocumentLoaded] = React.useState(false);
-  const fileInputRef = (0, _react.useRef)(null);
+  const [container, setContainer] = React.useState(null);
+  const model = React.useRef({});
+  const [doc, setDoc] = React.useState(null);
+  const [file, setFile] = React.useState(null);
+  const [contentState] = React.useState({
+    changed: false
+  });
   const btnRef = (0, _react.useRef)(null);
-  let rteObj;
-  let items = ['Bold', 'Italic', 'Underline', '|', 'Formats', '|', 'CreateLink', '|', {
-    template: '' + '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar"  style="width:100%"><div class="e-tbar-btn-text" style="font-weight: normal; font-size: inherit;"> Placeholders</div></button>',
-    undo: true,
-    click: onClick.bind(void 0),
-    tooltipText: 'Insert Placeholders'
-  }, '|', 'Undo', 'Redo'];
-  let toolbarSettings = {
-    items: items
+  const currentVal = (0, _react.useRef)(null);
+  const propertiesFormHandle = React.useRef({});
+  const onToolbarClick = args => {
+    switch (args.item.id) {
+      case "Custom":
+        break;
+      default:
+        break;
+    }
   };
-  function onInsert(holder) {
-    rteObj.executeCommand('insertText', holder);
-  }
-  function onClick() {
-    setOpen(true);
+  const onWrapText = text => {
+    let content = '';
+    const index = text.lastIndexOf(' ');
+    if (index !== -1) {
+      content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
+    } else {
+      content = text;
+    }
+    return content;
+  };
+  const findNext = () => {
+    container.documentEditor.search.searchResults.index = container.documentEditor.search.searchResults.index + 1;
+  };
+  const findPrev = () => {
+    container.documentEditor.search.searchResults.index = container.documentEditor.search.searchResults.index - 1;
+  };
+  let next = {
+    prefixIcon: "e-chevron-down",
+    click: findNext.bind(void 0),
+    tooltipText: 'Next placeholder',
+    text: '',
+    id: "NextPlaceHolder"
+  };
+  let previous = {
+    prefixIcon: "e-chevron-up",
+    click: findPrev.bind(void 0),
+    tooltipText: 'Previous placeholder',
+    text: '',
+    id: "PrevPlaceHolder"
+  };
+  let apply = {
+    prefixIcon: "e-icons e-save",
+    click: applyChanges.bind(void 0),
+    tooltipText: 'Previous placeholder',
+    text: 'Apply',
+    id: "PrevPlaceHolder"
+  };
+  let items = ["Open", apply, "Undo", "Redo", "Separator", {
+    tooltipText: 'Bold',
+    prefixIcon: 'e-icons e-bold',
+    command: 'Bold'
+  }, {
+    tooltipText: 'Italic',
+    prefixIcon: 'e-icons e-italic',
+    command: 'Italic'
+  }, "Separator", "Image", "Table", "Separator", "Header", "Footer", "PageSetup", "PageNumber", "InsertFootnote", "Separator", "Find"];
+  let searchHighlightColor = {
+    searchHighlightColor: 'Red'
+  };
+  const saveDoc = () => {
+    return new Promise((accept, reject) => {
+      if (container && container.documentEditor) {
+        container.documentEditor.saveAsBlob('Docx').then(blob => {
+          accept(blob);
+        }).catch(e => {
+          console.error("Error saving document");
+          reject(e);
+        });
+      }
+    });
+  };
+  const onContentChange = () => {
+    contentState.changed = true;
+  };
+  (0, _react.useEffect)(() => {
+    if (uploadTrigger != null && btnRef.current) {
+      btnRef.current.click();
+    }
+  }, [uploadTrigger]);
+  (0, _react.useEffect)(() => {
+    if (value) {
+      let i = 0;
+      for (const property of value.properties) {
+        property.id = i++;
+      }
+      propertiesFormHandle.current.api.model = {
+        properties: value.properties
+      };
+      if (value.file && value.file.url) {
+        let tokens = value.file.url.split(';base64,');
+        let type = tokens[0].replace("data:", "");
+        let base64 = tokens[1];
+        const arrayBuffer = _Utils.default.base64ToArrayBuffer(base64);
+        const file = new Blob([arrayBuffer], {
+          type
+        });
+        const formData = new FormData();
+        formData.append('files', file, 'document.docx');
+        (0, _reactPromiseTracker.trackPromise)(fetch('https://ej2services.syncfusion.com/production/web-services/api/documenteditor/Import', {
+          method: 'POST',
+          body: formData
+        }).then(response => {
+          (0, _reactPromiseTracker.trackPromise)(response.json().then(json => {
+            container.documentEditor.open(json);
+          }));
+        }));
+      }
+    }
+  }, [value]);
+  const getFooterText = () => {
+    container.documentEditor.selection.goToFooter();
+    container.documentEditor.selection.selectAll();
+    let footerText = container.documentEditor.selection.getText();
+    container.documentEditor.selection.closeHeaderFooter();
+    container.documentEditor.selection.clear();
+    return footerText;
+  };
+  function applyChanges() {
+    setup();
   }
-  const handleFileChange = async event => {
-    const file = event.target.files[0];
-    setError(null);
-    if (file) {
-      if (file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
-        const reader = new FileReader();
-        reader.onload = async e => {
-          const arrayBuffer = e.target.result;
-          try {
-            const {
-              value
-            } = await _mammoth.default.convertToHtml({
-              arrayBuffer
+  function setup() {
+    let initialFormValue = {
+      properties: []
+    };
+    if (container) {
+      container.documentEditor.selection.selectAll();
+      const text = container.documentEditor.selection.getText();
+      container.documentEditor.selection.clear();
+      const bodyMatches = removeNextLineCharsFromPlaceholders(text, '<<', '>>');
+      const footerText = getFooterText();
+      let footerMatches = removeNextLineCharsFromPlaceholders(footerText, '<<', '>>');
+      const matches = bodyMatches.concat(footerMatches);
+
+      //container.documentEditor.editor.enforceProtection('password', 'CommentsOnly');
+      //container.documentEditor.search.findAll(/<<[\s\S]*?>>/g);
+
+      matches.forEach(match => {
+        let prop = model.current.properties.find(p => p.placeHolder === match.text);
+        if (!prop) {
+          prop = {
+            placeHolder: match.text
+          };
+        }
+        if (!initialFormValue.properties.find(p => p.placeHolder === match.text)) {
+          initialFormValue.properties.push(prop);
+        }
+      });
+      let i = 0;
+      for (const property of initialFormValue.properties) {
+        property.id = i++;
+      }
+
+      //console.log("\n\n\n\n\n\nINITITIAL VALUES : ", initialFormValue);
+      propertiesFormHandle.current.api.model = initialFormValue;
+      saveDoc().then(blob => {
+        const newFile = new File([blob], props.documentName, {
+          type: blob.type
+        });
+        setFile(newFile);
+        if (contentState.changed) {
+          if (!initialFormValue) {
+            valueChangeHandler(null);
+          } else {
+            valueChangeHandler({
+              properties: initialFormValue.properties,
+              file: newFile
             });
-            rteObj.executeCommand('insertHTML', value);
-            addDocumentMetaDataHandler(file, value);
-          } catch (error) {
-            setError('Error processing the file. Please ensure it is a valid .docx file.');
           }
-        };
-        reader.readAsArrayBuffer(file);
-      } else {
-        setError('Unsupported file type. Please upload a .docx file.');
+        }
+        contentState.changed = false;
+      });
+    }
+  }
+  (0, _react.useEffect)(() => {
+    setup();
+  }, [doc]);
+  const validateProps = properties => {
+    let valid = properties && properties.length > 0;
+    if (valid) {
+      for (const property of properties) {
+        if (!property.valueField) {
+          valid = false;
+          break;
+        }
       }
     }
+    return valid;
   };
+  const removeNextLineCharsFromPlaceholders = (text, startTag, endTag) => {
+    const matches = [];
+    let index = 0;
+    while (index < text.length) {
+      const startIndex = text.indexOf(startTag, index);
+      if (startIndex === -1) break;
+      const endIndex = text.indexOf(endTag, startIndex + startTag.length);
+      if (endIndex === -1) break;
+      let find = text.substring(startIndex, endIndex + endTag.length);
+      let split = find.split("\r");
+      if (split.length > 1) {
+        container.documentEditor.search.find(split[0]);
+        let startPosition = container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList[0].startIn;
+        container.documentEditor.search.find(split[split.length - 1]);
+        let endPosition = container.documentEditor.search.searchResults.searchModule.textSearchResults.innerList[0].endIn;
+        let selection = container.documentEditor.selection;
+        selection.selectRange(startPosition, endPosition);
+        if (selection && selection.start && selection.end) {
+          let selectedText = selection.getText();
+          container.documentEditor.editor.delete();
+          container.documentEditor.editor.insertText(selectedText.replace(/(\r\n|\n|\r)/gm, ""));
+        } else {
+          console.error("No valid selection found");
+        }
+      }
+      matches.push({
+        start: startIndex,
+        end: endIndex + endTag.length,
+        text: find.replace(/(\r\n|\n|\r)/gm, "")
+      });
+      index = endIndex + endTag.length;
+    }
+    return matches;
+  };
+  function setupContainer() {
+    container.documentEditor.currentUser = _ApplicationManager.default.getUserDetails().name + " " + _ApplicationManager.default.getUserDetails().surname;
+  }
   (0, _react.useEffect)(() => {
-    if (uploadTrigger != null && btnRef.current) {
-      btnRef.current.click();
+    if (container) {
+      setupContainer();
+      //autoSave();
     }
-  }, [uploadTrigger]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button.default, {
+  }, [container]);
+  (0, _react.useEffect)(() => {
+    props.handle.api = api();
+  });
+  (0, _react.useEffect)(() => {
+    props.handle.api = api();
+    let eventHandlingConfig = {};
+    let defaultAction = {
+      actionType: 'script',
+      script: {
+        lines: [`@#{this}.highlightSelection($event.data)`]
+      }
+    };
+    eventHandlingConfig.subscriptions = [];
+    let subscription = {
+      publisher: 'propertiesGrid',
+      eventType: _EventType.default.SELECTION_CHANGE,
+      actions: [defaultAction]
+    };
+    eventHandlingConfig.subscriptions.push(subscription);
+    _Observable.default.addSubscriptions(_Utils.default.parseConfig({
+      id: props.id + "DocTemplateDesigner",
+      eventHandlingConfig
+    }, props.viewId).eventHandlingConfig, props.handle, props.viewId);
+    return () => {
+      _Observable.default.clearComponentEventListeners(props.handle);
+    };
+  }, []);
+  const doHighlightSelection = selectedPropertyRows => {
+    if (container && selectedPropertyRows && selectedPropertyRows.length > 0) {
+      container.documentEditor.selection.clear();
+      container.documentEditor.search.find(selectedPropertyRows[0].placeHolder);
+    }
+  };
+  const api = () => {
+    return {
+      get id() {
+        return props.id + "DocTemplateDesigner";
+      },
+      highlightSelection: selectedPropertyRow => {
+        doHighlightSelection(selectedPropertyRow);
+      }
+    };
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'row no-margin no-padding',
     style: {
-      display: 'none'
-    },
-    ref: btnRef,
-    variant: "contained",
-    component: "label"
-  }, "Load Contract", /*#__PURE__*/React.createElement("input", {
-    type: "file",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      display: 'none'
-    },
-    onChange: handleFileChange,
-    accept: ".docx"
-  })), /*#__PURE__*/React.createElement(_ej2ReactRichtexteditor.RichTextEditorComponent, {
-    id: "defaultRTE",
+      width: "40%",
+      overflow: "auto",
+      minHeight: "250px",
+      height: "100%",
+      border: "1px solid #e1e1e1",
+      borderRadius: '4px',
+      marginRight: "4px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      fontSize: "12px",
+      backgroundColor: "#fafafa",
+      padding: "8px",
+      height: "77px",
+      color: "rgba(0, 0, 0, 0.87)",
+      borderBottom: "#f1f1f1",
+      display: "flex",
+      alignItems: "center"
+    }
+  }, "Properties"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%",
+      marginTop: "4px",
+      padding: "0 8px"
+    }
+  }, /*#__PURE__*/React.createElement(_Form.default, {
+    config: props.propertiesFormConfig,
+    handle: propertiesFormHandle.current,
+    valueChangeHandler: React.useCallback(val => {
+      model.current = val;
+      let newVal = validateProps(val.properties) ? val : null;
+      if (JSON.stringify(currentVal.current) !== JSON.stringify(newVal?.properties)) {
+        if (newVal) {
+          valueChangeHandler({
+            properties: val.properties,
+            file
+          });
+          currentVal.current = val.properties;
+        } else {
+          if (currentVal.current) {
+            currentVal.current = null;
+            valueChangeHandler(null);
+          }
+        }
+      }
+    }, [file]),
+    viewId: props.viewId,
+    className: 'defaultForm'
+  }))), props.visible && /*#__PURE__*/React.createElement("div", {
+    className: 'col no-margin no-padding',
+    style: {
+      maxWidth: 'calc(60% - 16px)',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(_ej2ReactDocumenteditor.DocumentEditorContainerComponent, {
+    id: "container",
+    height: '590px',
     ref: scope => {
-      rteObj = scope;
+      setContainer(scope);
     },
-    toolbarSettings: toolbarSettings,
-    change: args => {
-      valueChangeHandler(args.value);
+    created: () => {
+      if (container) {
+        container.resize();
+        container.documentEditor.resize();
+      }
+    },
+    documentChange: doc => {
+      if (container) {
+        setupContainer();
+      }
+      setDoc(doc);
     }
-  }, /*#__PURE__*/React.createElement(_ej2ReactRichtexteditor.Inject, {
-    services: [_ej2ReactRichtexteditor.HtmlEditor, _ej2ReactRichtexteditor.Toolbar, _ej2ReactRichtexteditor.Link, _ej2ReactRichtexteditor.Image, _ej2ReactRichtexteditor.QuickToolbar]
-  })), /*#__PURE__*/React.createElement(_DocumentTemplatePlaceholderDialog.default, {
-    open: open,
-    onClose: () => setOpen(false),
-    onInsertHandler: onInsert
-  }));
+    //documentEditorSettings={searchHighlightColor}
+    ,
+    showPropertiesPane: false,
+    toolbarItems: items,
+    toolbarClick: onToolbarClick,
+    contentChange: onContentChange,
+    serviceUrl: "https://services.syncfusion.com/react/production/api/documenteditor/",
+    enableToolbar: true
+  })));
 };
 var _default = exports.default = DocumentTemplateDesignerComponent;

package/dist/components/DocumentTemplatePlaceholderDialog.js

@@ -19,16 +19,16 @@ const DocumentTemplatePlaceholderDialog = _ref => {
   const [selectedIndex, setSelectedIndex] = (0, _react.useState)(null);
   const placeholders = [{
     title: 'Placeholder 1',
-    description: '{{placeholder_1}}'
+    value: '{{placeholder_1}}'
   }, {
     title: 'Placeholder 2',
-    description: '{{placeholder_2}}'
+    value: '{{placeholder_2}}'
   }, {
     title: 'Placeholder 3',
-    description: '{{placeholder_3}}'
+    value: '{{placeholder_3}}'
   }, {
     title: 'Placeholder 4',
-    description: '{{placeholder_4}}'
+    value: '{{placeholder_4}}'
   }];
   const {
     palette
@@ -39,7 +39,7 @@ const DocumentTemplatePlaceholderDialog = _ref => {
   const handleInsert = () => {
     if (selectedIndex !== null) {
       console.log(`Selected placeholder: ${placeholders[selectedIndex].title}`);
-      onInsertHandler(placeholders[selectedIndex].description);
+      onInsertHandler(placeholders[selectedIndex]);
     }
     onClose();
   };
@@ -65,7 +65,7 @@ const DocumentTemplatePlaceholderDialog = _ref => {
     }
   }, /*#__PURE__*/_react.default.createElement(_core.ListItemAvatar, null, /*#__PURE__*/_react.default.createElement(_core.Avatar, null, /*#__PURE__*/_react.default.createElement(_icons.AddCircle, null))), /*#__PURE__*/_react.default.createElement(_core.ListItemText, {
     primary: placeholder.title,
-    secondary: placeholder.description
+    secondary: ''
   })), index < placeholders.length - 1 && /*#__PURE__*/_react.default.createElement(_core.Divider, null)))))), /*#__PURE__*/_react.default.createElement(_core.DialogActions, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
     onClick: onClose,
     color: "primary"

package/dist/components/DocumentViewer.css

@@ -0,0 +1,10 @@
+.react-pdf__Page__canvas {
+    margin: 0 auto;
+    height: auto !important;
+}
+
+.custom-toolbar-button {
+    width: 200px; /* Set your desired width */
+    height: 30px; /* Set your desired height */
+    font-size: 14px; /* Adjust the font size if needed */
+}