diff --git a/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js b/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js new file mode 100644 index 000000000..05572e78d --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/LinkUserModal.js @@ -0,0 +1,53 @@ +import React from "react"; +import Modal from "react-bootstrap/Modal"; +import SelectSigners from "./SelectSigners"; +import AddUser from "./AddUser"; + +const LinkUserModal = (props) => { + return ( + + + Add/Choose Signer + props.closePopup()} + > + X + + + + +
+ + OR + +
+ + + + ); +}; + +export default LinkUserModal; diff --git a/microfrontends/SignDocuments/src/Component/component/SelectSigners.js b/microfrontends/SignDocuments/src/Component/component/SelectSigners.js index 88c83d8d0..12f88e894 100644 --- a/microfrontends/SignDocuments/src/Component/component/SelectSigners.js +++ b/microfrontends/SignDocuments/src/Component/component/SelectSigners.js @@ -1,7 +1,18 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import Parse from "parse"; import "../../css/AddUser.css"; +import AsyncSelect from "react-select/async"; +const customStyles = { + control: (provided) => ({ + ...provided, + fontSize: "13px" // Font size for the control + }), + option: (provided) => ({ + ...provided, + fontSize: "13px" // Font size for the options + }) +}; const SelectSigners = (props) => { const [userList, setUserList] = useState([]); const [selected, setSelected] = useState(); @@ -11,7 +22,22 @@ const SelectSigners = (props) => { Parse.serverURL = parseBaseUrl; Parse.initialize(parseAppId); - const GetUserList = async () => { + // `handleOptions` is used to set just save from quick form to selected option in dropdown + const handleOptions = (item) => { + setSelected(item); + const userData = userList.filter((x) => x.objectId === item.value); + if (userData.length > 0) { + setUserData(userData[0]); + } + }; + const handleAdd = () => { + props.details(userData); + if (props.closePopup) { + props.closePopup(); + } + }; + + const loadOptions = async (inputValue) => { try { const currentUser = Parse.User.current(); const contactbook = new Parse.Query("contracts_Contactbook"); @@ -19,57 +45,40 @@ const SelectSigners = (props) => { "CreatedBy", Parse.User.createWithoutData(currentUser.id) ); + if (inputValue.length > 1) { + contactbook.matches("Name", new RegExp(inputValue, "i")); + } contactbook.notEqualTo("IsDeleted", true); const contactRes = await contactbook.find(); if (contactRes) { const res = JSON.parse(JSON.stringify(contactRes)); - - console.log("userList ", res) + // console.log("userList ", res); setUserList(res); + return await res.map((item) => ({ + label: item.Name, + value: item.objectId + })); } } catch (error) { console.log("err", error); } }; - useEffect(() => { - GetUserList(); - }, []); - - // `handleOptions` is used to set just save from quick form to selected option in dropdown - - const handleOptions = (e) => { - setSelected(e.target.value); - const userData = userList.filter((x) => x.objectId === e.target.value); - if(userData.length > 0){ - setUserData(userData[0]); - } - }; - const handleAdd = () => { - if (props.closePopup) { - props.closePopup(); - } - console.log("userData ", userData) - props.details(userData); - }; return (
- + styles={customStyles} + />
diff --git a/microfrontends/SignDocuments/src/Component/component/Title.js b/microfrontends/SignDocuments/src/Component/component/Title.js new file mode 100644 index 000000000..892edee3a --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/Title.js @@ -0,0 +1,19 @@ +import React from "react"; +import { Helmet } from "react-helmet"; + +function Title({ title }) { + return ( + + {`${title} - OpenSign™`} + + + + ); +} + +export default Title; diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index 744d8fdd7..2f5987f29 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -32,7 +32,8 @@ function FieldsComponent({ setIsShowEmail, isMailSend, selectedEmail, - setSelectedEmail + setSelectedEmail, + handleAddSigner }) { const signStyle = pdfUrl ? "disableSign" : "signatureBtn"; @@ -158,7 +159,7 @@ function FieldsComponent({ value={`${ind}|${JSON.stringify(obj)}`} // value={(obj)} > - {obj.Role ?obj.Role : obj.Email} + {obj.Role ? obj.Role : obj.Email} ); })} @@ -181,6 +182,20 @@ function FieldsComponent({
)} + {handleAddSigner && ( +
handleAddSigner()} + > + + Add +
+ )}
- Send + {completeBtnTitle ? completeBtnTitle : "Send"}
) : (
- Send + {completeBtnTitle ? completeBtnTitle : "Send"}
diff --git a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js index f368773d5..50ef2c81e 100644 --- a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js +++ b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import check from "../../assests/checkBox.png"; import { themeColor } from "../../utils/ThemeColor/backColor"; import "../../css/signerListPlace.css"; @@ -49,27 +48,26 @@ function SignerListPlace({ //function for onhover signer name change background color const onHoverStyle = (ind, blockColor) => { - console.log("blockColor ", blockColor) const style = { background: blockColor ? blockColor : color[ind % color.length], padding: "10px", marginTop: "2px", display: "flex", flexDirection: "row", - borderBottom: "1px solid #e3e1e1" + borderBottom: "1px solid #e3e1e1", + alignItems: "center" }; return style; }; //function for onhover signer name remove background color const nonHoverStyle = (ind) => { const style = { - // width:"250px", padding: "10px", marginTop: "2px", display: "flex", flexDirection: "row", borderBottom: "1px solid #e3e1e1", - justifyContent: "space-between" + alignItems: "center" }; return style; }; @@ -79,21 +77,27 @@ function SignerListPlace({ return firstLetter; }; - const darkenColor = ( color, factor ) => { + const darkenColor = (color, factor) => { // Remove '#' from the color code and parse it to get RGB values - const hex = color.replace('#', ''); + const hex = color.replace("#", ""); const r = parseInt(hex.substring(0, 2), 16); const g = parseInt(hex.substring(2, 4), 16); const b = parseInt(hex.substring(4, 6), 16); - + // Darken the color by reducing each RGB component const darkerR = Math.floor(r * (1 - factor)); const darkerG = Math.floor(g * (1 - factor)); const darkerB = Math.floor(b * (1 - factor)); - + // Convert the darkened RGB components back to hex - return `#${(darkerR << 16 | darkerG << 8 | darkerB).toString(16).padStart(6, '0')}`; - } + return `#${((darkerR << 16) | (darkerG << 8) | darkerB) + .toString(16) + .padStart(6, "0")}`; + }; + + const isWidgetExist = (Id) => { + return signerPos.some((x) => x.Id === Id); + }; return (
@@ -132,7 +136,8 @@ function SignerListPlace({
- {obj.Name - ? getFirstLetter(obj.Name) - : getFirstLetter(obj.Role)} + {isWidgetExist(obj.Id) ? ( + + ) : ( + <> + {obj.Name + ? getFirstLetter(obj.Name) + : getFirstLetter(obj.Role)} + + )}
)} - {signerPos.map((data, key) => { - return ( - data.Id === obj.Id && ( -
- no img -
- ) - ); - })}
);