@agilemotion/oui-react-js 1.3.1 → 1.3.3

package/dist/components/TemplateDesigner.js

@@ -0,0 +1,494 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _core = require("@material-ui/core");
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+
+var _Form = _interopRequireDefault(require("./form/Form"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _LookupField = _interopRequireDefault(require("./form/LookupField"));
+
+var _reactPromiseTracker = require("react-promise-tracker");
+
+var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+
+var _reactHtmlRenderer = _interopRequireDefault(require("react-html-renderer"));
+
+var _TemplateItemEventHandler = _interopRequireDefault(require("./TemplateItemEventHandler"));
+
+require("./TemplateDesigner.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const OPEN_DIALOG_CONFIG = {
+  type: "form",
+  id: "openTemplateForm",
+  attributes: {
+    defaultVisibility: true,
+    style: {
+      margin: "0",
+      padding: "0"
+    }
+  },
+  binder: "MAP_OBJECT",
+  sections: [{
+    type: "formSection",
+    components: [{
+      type: "fieldSet",
+      attributes: {
+        defaultVisibility: true
+      },
+      fields: [{
+        type: "field",
+        id: "templateId",
+        dataService: {
+          type: "rest",
+          url: "/api/v1/docs/templating/types/get",
+          method: "GET"
+        },
+        attributes: {
+          colspan: 1,
+          label: "Template ID"
+        },
+        fieldType: "SELECT",
+        validator: {
+          nullable: "false"
+        }
+      }]
+    }]
+  }]
+};
+const useStyles = (0, _core.makeStyles)(theme => ({
+  button: {
+    margin: theme.spacing(1)
+  },
+  input: {
+    display: 'none'
+  },
+  errorMessageDisplay: {
+    color: 'red'
+  },
+  propertyWindow: {
+    height: "400px",
+    margin: "4px",
+    borderRadius: "4px",
+    paddingLeft: "24px",
+    borderBottom: "1px solid #e1e1e1",
+    borderTop: "1px solid #e1e1e1"
+  },
+  paletteButton: {
+    width: "270px",
+    height: "40px",
+    backgroundColor: "#e1e1e1",
+    margin: "4px",
+    textAlign: "center",
+    padding: "28px 0",
+    borderRadius: "4px"
+  },
+  paletteButtonSelected: {
+    '&:hover': {
+      backgroundColor: "yellowgreen"
+    },
+    width: "270px",
+    height: "40px",
+    backgroundColor: "yellowgreen",
+    margin: "4px",
+    textAlign: "center",
+    padding: "28px 0",
+    borderRadius: "4px"
+  },
+  palette: {
+    width: "280px",
+    borderRadius: "4px",
+    border: "1px solid #e1e1e1"
+  }
+}));
+
+const status = response => {
+  if (response.ok) {
+    return Promise.resolve(response);
+  } else {
+    let error = new Error(response.statusText);
+    error.code = response.status;
+    return Promise.reject(error);
+  }
+};
+
+const json = response => {
+  return response.text();
+};
+
+const templateItemEventHandler = new _TemplateItemEventHandler.default();
+const location = window.location.protocol + "//" + window.location.hostname;
+
+const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+
+  const _React$useState = _react.default.useState(true),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        initializing = _React$useState2[0],
+        setInitializing = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(true),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        loading = _React$useState4[0],
+        setLoading = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(null),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        value = _React$useState6[0],
+        setValue = _React$useState6[1];
+
+  const _React$useState7 = _react.default.useState(false),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        fileDialogOpen = _React$useState8[0],
+        setFileDialogOpen = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(null),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        templateType = _React$useState10[0],
+        setTemplateType = _React$useState10[1];
+
+  const _React$useState11 = _react.default.useState(null),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        designData = _React$useState12[0],
+        setDesignData = _React$useState12[1];
+
+  const _React$useState13 = _react.default.useState(null),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        templateDoc = _React$useState14[0],
+        setTemplateDoc = _React$useState14[1];
+
+  const _React$useState15 = _react.default.useState(null),
+        _React$useState16 = _slicedToArray(_React$useState15, 2),
+        grabbedItem = _React$useState16[0],
+        setGrabbedItem = _React$useState16[1];
+
+  const _React$useState17 = _react.default.useState(null),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        selectedItem = _React$useState18[0],
+        setSelectedItem = _React$useState18[1];
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setInitializing(false);
+
+      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
+        props.loadCompleteHandler(props.config.id);
+      }
+
+      setLoading(false);
+    }
+  });
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (templateDoc) {
+      templateItemEventHandler.initDragAndDrop();
+    }
+  }, [templateDoc]);
+
+  function getFetchConfig(data, method) {
+    const accessToken = sessionStorage.getItem("accessToken");
+    const idToken = sessionStorage.getItem("idToken");
+    return {
+      method: method,
+      headers: {
+        'Accept': 'application/json',
+        'Authorization': 'Bearer ' + accessToken,
+        'idToken': idToken
+      },
+      body: data
+    };
+  }
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      loadData: actionConfig => {
+        setLoading(true);
+        setLoading(false);
+      },
+
+      get model() {
+        return value;
+      },
+
+      get value() {
+        return value;
+      }
+
+    };
+  };
+
+  const handleOpen = () => {
+    setFileDialogOpen(true);
+  };
+
+  const handleDelete = () => {
+    let element = document.getElementById(selectedItem);
+    element.parentElement.removeChild(element);
+    setSelectedItem(null);
+  };
+
+  const handleSave = () => {
+    alert('SAVE FIREEEE');
+  };
+
+  const handleOk = () => {
+    let fetchConfig = getFetchConfig(null, 'GET');
+    setFileDialogOpen(false);
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(location + _ApplicationContext.default.getBaseApiUrl() + props.config.metaDataUrl + '/' + templateType.id), fetchConfig).then(status).then(json).then(data => {
+      setDesignData(JSON.parse(data));
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationContext.default.clear();
+
+        _ApplicationContext.default.getApplicationHistory().push('/login');
+      }
+    }));
+  };
+
+  const handleClose = () => {
+    setFileDialogOpen(false);
+  };
+
+  const loadDoc = file => {
+    let data = new FormData();
+    data.append("sourceType", "PDF");
+    data.append("targetType", "HTML");
+    data.append("file", file);
+    let fetchConfig = getFetchConfig(data, 'POST');
+    let url = location + _ApplicationContext.default.getBaseApiUrl() + props.config.documentConverterUrl;
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
+      setTemplateDoc(data);
+    }).catch(e => {
+      if (e.code === 401) {
+        _ApplicationContext.default.clear();
+
+        _ApplicationContext.default.getApplicationHistory().push('/login');
+      }
+    }));
+  };
+
+  let mouseClickHandler = function mouseClickHandler(event) {
+    if (grabbedItem) {
+      templateItemEventHandler.handleGrabRelease(event, {
+        id: grabbedItem.id,
+        width: 200,
+        height: 20,
+        description: grabbedItem.description,
+        type: grabbedItem.placeHolderType,
+        table: grabbedItem.table
+      }, id => {
+        setSelectedItem(id);
+      });
+    }
+
+    setGrabbedItem(null);
+  };
+
+  const handleChange = () => event => {
+    let files = event.target.files;
+    loadDoc(files[0]);
+  };
+
+  const grabPalleteItem = item => {
+    document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+    setGrabbedItem(item);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", null, !_Utils.default.isNull(props.config) && !loading ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '60px',
+      borderBottom: '1px solid #e1e1e1',
+      marginTop: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row-*-*"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-controls": "menu-list-grow",
+    "aria-haspopup": "true",
+    width: '60px',
+    onClick: handleOpen
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'FOLDER'
+  })), designData ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
+    accept: "application/pdf",
+    className: classes.input,
+    id: "template-file-upload",
+    onChange: handleChange(),
+    type: "file"
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: "template-file-upload"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    component: "span",
+    variant: 'contained',
+    size: "large"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'UPLOAD'
+  })))), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    component: "span",
+    disabled: selectedItem === null,
+    variant: 'contained',
+    size: "large",
+    onClick: handleDelete
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'DELETE'
+  })), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    component: "span",
+    disabled: selectedItem === null,
+    variant: 'contained',
+    size: "large",
+    onClick: handleSave
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: 'SAVE'
+  }))) : null))), designData ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "row",
+    style: {
+      width: '100%',
+      height: '72vh',
+      marginTop: '8px',
+      marginLeft: '0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '280px',
+      minWidth: '280px'
+    },
+    className: 'col-*-*'
+  }, designData.templateType.templatePlaceHolders.map(placeHolder => {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      variant: 'contained',
+      size: "large",
+      style: {
+        width: '100%'
+      },
+      disabled: _Utils.default.isNull(templateDoc),
+      className: grabbedItem && grabbedItem.placeHolder === placeHolder.placeHolder ? classes.paletteButtonSelected : classes.paletteButton,
+      onClick: () => grabPalleteItem(placeHolder)
+    }, placeHolder.description));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      border: "1px solid #e1e1e1",
+      borderRadius: "4px",
+      marginLeft: "8px",
+      height: "100%",
+      width: "calc(100% - 288px)"
+    },
+    className: 'col-*-*',
+    onClick: e => mouseClickHandler(e)
+  }, templateDoc ? /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxHeight: "calc(70vh - 80px)",
+      overflow: "auto"
+    },
+    className: 'col-*-*',
+    id: "signaturePanel",
+    id: "templateContainer"
+  }, /*#__PURE__*/_react.default.createElement(_reactHtmlRenderer.default, {
+    html: templateDoc.replace('<html', "<div name=\"replaced_html\"").replace('</html>', '</div>').replace('<body', "<div name=\"replaced_body\"").replace('</body>', '</div>')
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      display: 'inline-block',
+      textAlign: 'center',
+      marginTop: '64px'
+    }
+  }, "no template to display"))) : null) : /*#__PURE__*/_react.default.createElement("div", null, "Loading..."), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: fileDialogOpen,
+    fullWidth: true,
+    maxWidth: "sm",
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description"
+  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
+    id: "alert-dialog-title"
+  }, "Open Template"), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_Form.default, {
+    config: OPEN_DIALOG_CONFIG,
+    handle: {},
+    ref: /*#__PURE__*/_react.default.createRef(),
+    valueChangeHandler: val => {
+      setTemplateType(val.templateId);
+    },
+    viewId: props.viewId,
+    className: 'defaultForm'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row-*-*",
+    style: {
+      width: '100%',
+      margin: '8px 0',
+      display: 'inline-block',
+      textAlign: 'right'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-*-*"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    size: "large",
+    style: {
+      width: '80px',
+      marginRight: '4px'
+    },
+    onClick: () => handleClose()
+  }, "CLOSE"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: 'contained',
+    color: 'primary',
+    style: {
+      width: '80px'
+    },
+    disabled: templateType === null,
+    size: "large",
+    onClick: () => handleOk()
+  }, "OK"))))));
+}));
+
+var _default = TemplateDesigner;
+exports.default = _default;