@agilemotion/oui-react-js 1.8.61 → 1.8.62

package/dist/components/DataGridFilter.js

@@ -274,8 +274,7 @@ const DataGridFilter = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
       className: 'col-*-*',
       style: {
         width: '52px',
-        marginTop: "4px",
-        border: '1px solid blue'
+        marginTop: "4px"
       }
     }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
       onClick: submitFilter

package/dist/components/DocumentTemplateDesignerComponent.js

@@ -64,8 +64,7 @@ const DocumentTemplateDesignerComponent = props => {
       overflow: "hidden",
       minHeight: "250px",
       height: "100%",
-      borderRadius: '4px',
-      padding: "0 16px"
+      borderRadius: '4px'
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -90,6 +89,8 @@ const DocumentTemplateDesignerComponent = props => {
     config: props.templateViewer,
     handle: templateDesignerComponentHandle,
     viewId: props.viewId,
+    enableUpload: true,
+    designMode: true,
     onValueChange: file => props.valueChangeHandler(_objectSpread(_objectSpread({}, propertiesComponentHandle.api.value), {}, {
       file: file
     }))

package/dist/components/DocumentViewer.js

@@ -16,6 +16,7 @@ var _PDFViewer = _interopRequireDefault(require("./PDFViewer"));
 var _WordDocumentViewer = _interopRequireDefault(require("./WordDocumentViewer"));
 var _Event = _interopRequireDefault(require("../event/Event"));
 var _EventType = _interopRequireDefault(require("../event/EventType"));
+var _PDFDesignerComponent = _interopRequireDefault(require("./PDFDesignerComponent"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   var _props$config$attribu2, _props$config$attribu3, _parsedConfig$attribu;
@@ -141,7 +142,11 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
        *   @#{this}.insertReadonlyAnchor(...)
        */
       insertReadonlyAnchor: (value, dropPosition) => {
-        wordEditorValueHandler.api.insertReadonlyAnchor(value, dropPosition);
+        if (_Utils.default.prop(parsedConfig.fileType) === 'application/pdf') {
+          alert('Anchor insertion is not yet supported for PDF files');
+        } else {
+          wordEditorValueHandler.api.insertReadonlyAnchor(value, dropPosition);
+        }
       }
     };
   };
@@ -162,9 +167,14 @@ const DocumentViewer = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
       marginTop: '16px',
       color: 'red'
     }
-  }, "Error loading document"), !loading && !hasLoadingError && _Utils.default.prop(parsedConfig.fileType) === 'application/pdf' && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_PDFViewer.default, {
+  }, "Error loading document"), !loading && !hasLoadingError && _Utils.default.prop(parsedConfig.fileType) === 'application/pdf' && !props.designMode && !_Utils.default.isNull(value) && /*#__PURE__*/_react.default.createElement(_PDFViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {}
+  }), !loading && !hasLoadingError && _Utils.default.prop(parsedConfig.fileType) === 'application/pdf' && props.designMode && /*#__PURE__*/_react.default.createElement(_PDFDesignerComponent.default, {
+    file: value,
+    onDocumentLoadSuccess: () => {},
+    valueHandler: () => {},
+    valueChangeHandler: file => {}
   }), !loading && !hasLoadingError && _Utils.default.prop(parsedConfig.fileType) === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && (!_Utils.default.isNull(value) || props.config.enableUpload) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WordDocumentViewer.default, {
     file: value,
     onDocumentLoadSuccess: () => {},

package/dist/components/PDFDesignerComponent.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactPdf = require("react-pdf");
+var _reactRnd = require("react-rnd");
+var _uuid = require("uuid");
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _Icon = _interopRequireDefault(require("./Icon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const PDFDesignerComponent = props => {
+  const [file, setFile] = (0, _react.useState)(props.file);
+  const [pageNumber, setPageNumber] = (0, _react.useState)(1);
+  const [numPages, setNumPages] = (0, _react.useState)(null);
+  const [placeholders, setPlaceholders] = (0, _react.useState)([]);
+  const pageRef = (0, _react.useRef)(null);
+  const fileInputRef = (0, _react.useRef)(null);
+
+  // ===================================
+  // Upload Handling (PDF Only)
+  // ===================================
+  const handleUploadClick = () => {
+    var _fileInputRef$current;
+    (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
+  };
+  const handleFileChange = event => {
+    const selectedFile = event.target.files[0];
+    if (!selectedFile) return;
+    if (selectedFile.type !== "application/pdf") {
+      alert("Please upload PDF only.");
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = e => {
+      const base64 = e.target.result.split(",")[1];
+      const fileObject = {
+        type: selectedFile.type,
+        base64,
+        name: selectedFile.name
+      };
+      setFile(fileObject);
+      setPageNumber(1);
+      if (props.onFileUpload) {
+        props.onFileUpload(fileObject);
+      }
+    };
+    reader.readAsDataURL(selectedFile);
+  };
+  (0, _react.useEffect)(() => {
+    setFile(props.file);
+  }, [props.file]);
+
+  // ===================================
+  // Syncfusion-style API Exposure
+  // ===================================
+  const api = () => ({
+    getValue: () => generateJSON(),
+    insertReadonlyAnchor: (value, dropPosition) => {
+      insertPlaceholder(value, dropPosition);
+    }
+  });
+  (0, _react.useEffect)(() => {
+    props.valueHandler.api = api();
+  });
+
+  // ===================================
+  // PDF Load
+  // ===================================
+  const onDocumentLoadSuccess = _ref => {
+    let {
+      numPages
+    } = _ref;
+    setNumPages(numPages);
+  };
+
+  // ===================================
+  // Insert Placeholder
+  // ===================================
+  const insertPlaceholder = (variable, dropPosition) => {
+    if (!pageRef.current) return;
+    const rect = pageRef.current.getBoundingClientRect();
+    if (dropPosition.x < rect.left || dropPosition.x > rect.right || dropPosition.y < rect.top || dropPosition.y > rect.bottom) {
+      return;
+    }
+    const relativeX = dropPosition.x - rect.left;
+    const relativeY = dropPosition.y - rect.top;
+    const newPlaceholder = {
+      id: (0, _uuid.v4)(),
+      variable,
+      page: pageNumber,
+      left: relativeX / rect.width,
+      top: relativeY / rect.height,
+      fontSize: 12,
+      fontWeight: "bold",
+      textAlign: "center"
+    };
+    setPlaceholders(prev => [...prev, newPlaceholder]);
+  };
+
+  // ===================================
+  // Update Position After Drag
+  // ===================================
+  const updatePosition = (id, x, y) => {
+    const rect = pageRef.current.getBoundingClientRect();
+    setPlaceholders(prev => prev.map(p => p.id === id ? _objectSpread(_objectSpread({}, p), {}, {
+      left: x / rect.width,
+      top: y / rect.height
+    }) : p));
+  };
+
+  // ===================================
+  // JSON Output
+  // ===================================
+  const generateJSON = () => {
+    var _pageRef$current, _pageRef$current2;
+    return {
+      templateType: props.templateType,
+      pageSize: {
+        width: (_pageRef$current = pageRef.current) === null || _pageRef$current === void 0 ? void 0 : _pageRef$current.offsetWidth,
+        height: (_pageRef$current2 = pageRef.current) === null || _pageRef$current2 === void 0 ? void 0 : _pageRef$current2.offsetHeight
+      },
+      placeholders
+    };
+  };
+
+  // ===================================
+  // Render
+  // ===================================
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      border: '1px solid #e1e1e1',
+      height: "100%",
+      marginTop: "8px",
+      borderRadius: 4
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: 12,
+      width: "100%",
+      display: "flex",
+      justifyContent: "flex-start",
+      borderBottom: "1px solid #e1e1e1"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "text",
+    size: "large",
+    onClick: handleUploadClick,
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: 'UPLOAD'
+    })
+  }, "Upload PDF"), /*#__PURE__*/_react.default.createElement("input", {
+    type: "file",
+    accept: "application/pdf",
+    ref: fileInputRef,
+    style: {
+      display: "none"
+    },
+    onChange: handleFileChange
+  })), file && file.type === "application/pdf" && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: "relative",
+      maxHeight: "calc(100vh - 32px)",
+      overflowY: "auto",
+      padding: "8px"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: {
+      data: atob(file.base64)
+    },
+    onLoadSuccess: onDocumentLoadSuccess
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: pageRef,
+    style: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: pageNumber
+  }), placeholders.filter(p => p.page === pageNumber).map(p => {
+    var _pageRef$current3;
+    const rect = (_pageRef$current3 = pageRef.current) === null || _pageRef$current3 === void 0 ? void 0 : _pageRef$current3.getBoundingClientRect();
+    const pageWidth = (rect === null || rect === void 0 ? void 0 : rect.width) || 1;
+    const pageHeight = (rect === null || rect === void 0 ? void 0 : rect.height) || 1;
+    return /*#__PURE__*/_react.default.createElement(_reactRnd.Rnd, {
+      key: p.id,
+      size: {
+        width: 140,
+        height: 24
+      },
+      position: {
+        x: p.left * pageWidth,
+        y: p.top * pageHeight
+      },
+      bounds: "parent",
+      enableResizing: false,
+      onDragStop: (e, d) => updatePosition(p.id, d.x, d.y)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontSize: p.fontSize,
+        fontWeight: p.fontWeight,
+        textAlign: p.textAlign,
+        border: "1px dashed #1976d2",
+        background: "rgba(25,118,210,0.08)",
+        padding: "2px 4px",
+        cursor: "move"
+      }
+    }, "${".concat(p.variable, "}")));
+  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Page ", pageNumber || (numPages ? 1 : "--"), " of", " ", numPages || "--"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    disabled: pageNumber <= 1,
+    onClick: () => setPageNumber(prev => prev - 1)
+  }, "Previous"), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    disabled: pageNumber >= numPages,
+    onClick: () => setPageNumber(prev => prev + 1)
+  }, "Next"))));
+};
+var _default = exports.default = PDFDesignerComponent;

package/dist/components/TemplateDesigner.js

@@ -42,7 +42,7 @@ const OPEN_DIALOG_CONFIG = {
         id: 'templateId',
         dataService: {
           type: 'rest',
-          url: '/docs/api/v1/templating/types/get',
+          url: '/docs/api/v1/template/types/get',
           method: 'GET'
         },
         attributes: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.61",
+  "version": "1.8.62",
   "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "license": "ISC",
   "author": "",
@@ -110,6 +110,7 @@
     "react-player": "^2.16.0",
     "react-promise-tracker": "^2.1.0",
     "react-redux": "^7.2.3",
+    "react-rnd": "^10.5.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-router-redux": "^5.0.0-alpha.9",
@@ -122,6 +123,7 @@
     "rrule": "^2.8.1",
     "socket.io-client": "^4.7.5",
     "styled-components": "^5.2.3",
+    "uuid": "^13.0.0",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {