handleAddSigner()}>
+ {props.handleAddSigner && (
+
props.handleAddSigner()}
+ >
Add role
diff --git a/microfrontends/SignDocuments/src/premitives/RecipientList.js b/microfrontends/SignDocuments/src/premitives/RecipientList.js
new file mode 100644
index 000000000..9f533a849
--- /dev/null
+++ b/microfrontends/SignDocuments/src/premitives/RecipientList.js
@@ -0,0 +1,205 @@
+import React, { useRef, useState } from "react";
+import "../css/signerListPlace.css";
+import { darkenColor, getFirstLetter } from "../utils/Utils";
+
+const RecipientList = (props) => {
+ const color = [
+ "#93a3db",
+ "#e6c3db",
+ "#c0e3bc",
+ "#bce3db",
+ "#b8ccdb",
+ "#ceb8db",
+ "#ffccff",
+ "#99ffcc",
+ "#cc99ff",
+ "#ffcc99",
+ "#66ccff",
+ "#ffffcc"
+ ];
+
+ const nameColor = [
+ "#304fbf",
+ "#7d5270",
+ "#5f825b",
+ "#578077",
+ "#576e80",
+ "#6d527d",
+ "#cc00cc",
+ "#006666",
+ "#cc00ff",
+ "#ff9900",
+ "#336699",
+ "#cc9900"
+ ];
+ const [isHover, setIsHover] = useState();
+ const [isEdit, setIsEdit] = useState(false);
+ //function for onhover signer name change background color
+ const inputRef = useRef(null);
+ const onHoverStyle = (ind, blockColor) => {
+ const style = {
+ background: blockColor ? blockColor : color[ind % color.length],
+ padding: "10px",
+ marginTop: "2px",
+ display: "flex",
+ flexDirection: "row",
+ borderBottom: "1px solid #e3e1e1",
+ alignItems: "center"
+ };
+ return style;
+ };
+ //function for onhover signer name remove background color
+ const nonHoverStyle = (ind) => {
+ const style = {
+ padding: "10px",
+ marginTop: "2px",
+ display: "flex",
+ flexDirection: "row",
+ borderBottom: "1px solid #e3e1e1",
+ alignItems: "center"
+ };
+ return style;
+ };
+ const isWidgetExist = (Id) => {
+ return props.signerPos.some((x) => x.Id === Id);
+ };
+
+ return (
+ <>
+ {props.signersdata.length > 0 &&
+ props.signersdata.map((obj, ind) => {
+ return (
+
setIsHover(ind)}
+ onMouseLeave={() => setIsHover(null)}
+ key={ind}
+ style={
+ isHover === ind || props.isSelectListId === ind
+ ? onHoverStyle(ind, obj.blockColor)
+ : nonHoverStyle(ind)
+ }
+ onClick={() => {
+ props.setSignerObjId(obj?.objectId);
+ props.setIsSelectId(ind);
+ props.setContractName(obj?.className);
+ props.setUniqueId(obj.Id);
+ props.setRoleName(obj.Role);
+ }}
+ >
+
+
+
+ {isWidgetExist(obj.Id) ? (
+
+ ) : (
+ <>
+ {obj.Name
+ ? getFirstLetter(obj.Name)
+ : getFirstLetter(obj.Role)}
+
+ )}
+
+
+
+ {obj.Name ? (
+
+ {obj.Name}
+
+ ) : (
+ <>
+ {
+ setIsEdit({ [obj.Id]: true });
+ props.setRoleName(obj.Role);
+ }}
+ >
+ {isEdit?.[obj.Id] && props.handleRoleChange ? (
+ props.handleRoleChange(e, obj.Id)}
+ onBlur={() => {
+ setIsEdit({});
+ props.handleOnBlur(obj.Role, obj.Id);
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ inputRef.current.blur();
+ }
+ }}
+ />
+ ) : (
+ obj.Role
+ )}
+
+
+ )}
+ {obj.Name && (
+
+ {obj.Role}
+
+ )}
+
+
+ {props.handleDeleteUser && (
+
{
+ e.stopPropagation();
+ props.handleDeleteUser(obj.Id);
+ }}
+ style={{ cursor: "pointer" }}
+ >
+
+
+ )}
+
+
+ );
+ })}
+
+ );
+};
+
+export default RecipientList;
diff --git a/microfrontends/SignDocuments/src/premitives/SelectSigners.js b/microfrontends/SignDocuments/src/premitives/SelectSigners.js
index 11eb5c053..88b188842 100644
--- a/microfrontends/SignDocuments/src/premitives/SelectSigners.js
+++ b/microfrontends/SignDocuments/src/premitives/SelectSigners.js
@@ -61,7 +61,7 @@ const SelectSigners = (props) => {
// console.log("userList ", res);
setUserList(res);
return await res.map((item) => ({
- label: item.Name,
+ label: item.Email,
value: item.objectId
}));
}
diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js
index 051ee44a1..803d278d3 100644
--- a/microfrontends/SignDocuments/src/utils/Utils.js
+++ b/microfrontends/SignDocuments/src/utils/Utils.js
@@ -673,92 +673,91 @@ export const handleImageResize = (
// (data) => data.signerObjId === signerId
// );
- const filterSignerPos = signerPos.filter(
- (data) => data.Id === signerId
- );
+ const filterSignerPos = signerPos.filter((data) => data.Id === signerId);
+
if (filterSignerPos.length > 0) {
const getPlaceHolder = filterSignerPos[0].placeHolder;
const getPageNumer = getPlaceHolder.filter(
(data) => data.pageNumber === pageNumber
);
if (getPageNumer.length > 0) {
- const getXYdata = getPageNumer[0].pos.filter(
- (data, ind) => data.key === key && data.Width && data.Height
- );
- if (getXYdata.length > 0) {
- const getXYdata = getPageNumer[0].pos;
- const getPosData = getXYdata;
- const addSignPos = getPosData.map((url, ind) => {
- if (url.key === key) {
- return {
- ...url,
- Width: ref.offsetWidth,
- Height: ref.offsetHeight,
- IsResize: showResize ? true : false
- };
- }
- return url;
- });
+ // const getXYdata = getPageNumer[0].pos.filter(
+ // (data, ind) => data.key === key && data.Width && data.Height
+ // );
+ // if (getXYdata.length > 0) {
+ // const getXYdata = getPageNumer[0].pos;
+ // const getPosData = getXYdata;
+ // const addSignPos = getPosData.map((url, ind) => {
+ // if (url.key === key) {
+ // return {
+ // ...url,
+ // Width: ref.offsetWidth,
+ // Height: ref.offsetHeight,
+ // IsResize: showResize ? true : false
+ // };
+ // }
+ // return url;
+ // });
- const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
- if (obj.pageNumber === pageNumber) {
- return { ...obj, pos: addSignPos };
- }
- return obj;
- });
+ // const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+ // if (obj.pageNumber === pageNumber) {
+ // return { ...obj, pos: addSignPos };
+ // }
+ // return obj;
+ // });
- // const newUpdateSigner = signerPos.map((obj, ind) => {
- // if (obj.signerObjId === signerId) {
- // return { ...obj, placeHolder: newUpdateSignPos };
- // }
- // return obj;
- // });
+ // // const newUpdateSigner = signerPos.map((obj, ind) => {
+ // // if (obj.signerObjId === signerId) {
+ // // return { ...obj, placeHolder: newUpdateSignPos };
+ // // }
+ // // return obj;
+ // // });
- const newUpdateSigner = signerPos.map((obj, ind) => {
- if (obj.Id === signerId) {
- return { ...obj, placeHolder: newUpdateSignPos };
- }
- return obj;
- });
- setSignerPos(newUpdateSigner);
- } else {
- const getXYdata = getPageNumer[0].pos;
- const getPosData = getXYdata;
- const addSignPos = getPosData.map((url, ind) => {
- if (url.key === key) {
- return {
- ...url,
- Width: ref.offsetWidth,
- Height: ref.offsetHeight,
- IsResize: showResize ? true : false
- };
- }
- return url;
- });
+ // const newUpdateSigner = signerPos.map((obj, ind) => {
+ // if (obj.Id === signerId) {
+ // return { ...obj, placeHolder: newUpdateSignPos };
+ // }
+ // return obj;
+ // });
+ // setSignerPos(newUpdateSigner);
+ // } else {
+ const getXYdata = getPageNumer[0].pos;
+ const getPosData = getXYdata;
+ const addSignPos = getPosData.map((url, ind) => {
+ if (url.key === key) {
+ return {
+ ...url,
+ Width: ref.offsetWidth,
+ Height: ref.offsetHeight,
+ IsResize: showResize ? true : false
+ };
+ }
+ return url;
+ });
- const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
- if (obj.pageNumber === pageNumber) {
- return { ...obj, pos: addSignPos };
- }
- return obj;
- });
+ const newUpdateSignPos = getPlaceHolder.map((obj, ind) => {
+ if (obj.pageNumber === pageNumber) {
+ return { ...obj, pos: addSignPos };
+ }
+ return obj;
+ });
- // const newUpdateSigner = signerPos.map((obj, ind) => {
- // if (obj.signerObjId === signerId) {
- // return { ...obj, placeHolder: newUpdateSignPos };
- // }
- // return obj;
- // });
- const newUpdateSigner = signerPos.map((obj, ind) => {
- if (obj.Id === signerId) {
- return { ...obj, placeHolder: newUpdateSignPos };
- }
- return obj;
- });
+ // const newUpdateSigner = signerPos.map((obj, ind) => {
+ // if (obj.signerObjId === signerId) {
+ // return { ...obj, placeHolder: newUpdateSignPos };
+ // }
+ // return obj;
+ // });
+ const newUpdateSigner = signerPos.map((obj, ind) => {
+ if (obj.Id === signerId) {
+ return { ...obj, placeHolder: newUpdateSignPos };
+ }
+ return obj;
+ });
- setSignerPos(newUpdateSigner);
- }
+ setSignerPos(newUpdateSigner);
}
+ // }
}
};
@@ -987,20 +986,20 @@ export const createDocument = async (template, placeholders, signerData) => {
if (template && template.length > 0) {
const Doc = template[0];
- let placeholdersArr = []
- if(placeholders?.length > 0 ){
- placeholdersArr= placeholders
+ let placeholdersArr = [];
+ if (placeholders?.length > 0) {
+ placeholdersArr = placeholders;
}
- let signers = []
- if(signerData?.length > 0){
- signerData.forEach((x) => {
- if(x.objectId){
- const obj = {
+ let signers = [];
+ if (signerData?.length > 0) {
+ signerData.forEach((x) => {
+ if (x.objectId) {
+ const obj = {
__type: "Pointer",
className: "contracts_Contactbook",
objectId: x.objectId
};
- signers.push(obj)
+ signers.push(obj);
}
});
}
@@ -1047,3 +1046,29 @@ export const createDocument = async (template, placeholders, signerData) => {
}
}
};
+
+export const getFirstLetter = (name) => {
+ const firstLetter = name?.charAt(0);
+ return firstLetter;
+};
+
+
+export const darkenColor = (color, factor) => {
+ // Remove '#' from the color code and parse it to get RGB values
+ 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")}`;
+};
+
+