From c8ee4558650ec535e384f6b7f5cfb240a1cb1304 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Thu, 29 Feb 2024 17:53:30 +0530 Subject: [PATCH] feat: add name, default value and status for widgets in placeholder and template flow --- .../src/Component/TemplatePlaceholder.js | 73 +++++++++- .../Component/WidgetComponent/NameModal.js | 129 ++++++++++++++++++ .../WidgetComponent/dropdownWidgetOption.js | 88 ++++++++++-- .../WidgetComponent/inputValidation.js | 19 +++ .../Component/WidgetComponent/placeholder.js | 54 ++++---- .../src/Component/component/renderPdf.js | 5 +- .../src/Component/placeHolderSign.js | 76 ++++++++++- 7 files changed, 397 insertions(+), 47 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/WidgetComponent/NameModal.js diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 874cdb226..4b8024ac6 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -15,6 +15,7 @@ import HandleError from "./component/HandleError"; import Nodata from "./component/Nodata"; import SignerListPlace from "./component/signerListPlace"; import Header from "./component/header"; +import NameModal from "./WidgetComponent/NameModal"; import { pdfNewWidthFun, contractUsers, @@ -84,6 +85,7 @@ const TemplatePlaceholder = () => { const [isValidate, setIsValidate] = useState(false); const [textValidate, setTextValidate] = useState(""); const [hint, setHint] = useState(""); + const [isNameModal, setIsNameModal] = useState(false); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -448,6 +450,8 @@ const TemplatePlaceholder = () => { setIsCheckbox(true); } else if (dragTypeValue === "radio") { setIsRadio(true); + } else { + setIsNameModal(true); } setCurrWidgetsDetails(""); setWidgetType(dragTypeValue); @@ -1021,7 +1025,9 @@ const TemplatePlaceholder = () => { maxCount, isReadOnly, addOption, - deleteOption + deleteOption, + status, + defaultValue ) => { const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); if (filterSignerPos.length > 0) { @@ -1059,7 +1065,9 @@ const TemplatePlaceholder = () => { options: { ...position.options, name: dropdownName, - values: dropdownOptions + values: dropdownOptions, + status: status, + defaultValue: defaultValue } }; } @@ -1099,7 +1107,9 @@ const TemplatePlaceholder = () => { options: { ...position.options, name: dropdownName, - values: dropdownOptions + status: status, + values: dropdownOptions, + defaultValue: defaultValue } }; } @@ -1125,6 +1135,54 @@ const TemplatePlaceholder = () => { } }; + const handleWidgetdefaultdata = (defaultdata) => { + const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); + 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; + const getPosData = getXYdata; + const addSignPos = getPosData.map((position, ind) => { + if (position.key === signKey) { + return { + ...position, + options: { + ...position.options, + name: defaultdata.name, + status: defaultdata.status, + defaultValue: defaultdata.defaultValue + } + }; + } + return position; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.Id === uniqueId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + console.log("newUpdateSigner ", newUpdateSigner); + setSignerPos(newUpdateSigner); + } + } + handleNameModal(); + }; + const handleNameModal = () => { + setIsNameModal(!isNameModal); + }; const handleValidateInput = (e) => { handleApplyWidgetsStatus(textValidate); setIsValidate(false); @@ -1254,6 +1312,8 @@ const TemplatePlaceholder = () => { setHint={setHint} setTextValidate={setTextValidate} textValidate={textValidate} + currWidgetsDetails={currWidgetsDetails} + setCurrWidgetsDetails={setCurrWidgetsDetails} /> { setSelectWidgetId={setSelectWidgetId} selectWidgetId={selectWidgetId} setIsCheckbox={setIsCheckbox} + handleNameModal={handleNameModal} /> )} @@ -1467,6 +1528,12 @@ const TemplatePlaceholder = () => { onSuccess={handleEditTemplateForm} /> + ); }; diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/NameModal.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/NameModal.js new file mode 100644 index 000000000..97be2536a --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/NameModal.js @@ -0,0 +1,129 @@ +import React, { useEffect, useState } from "react"; +import ModalUi from "../../premitives/ModalUi"; +import "../../css/AddUser.css"; + +const NameModal = ({ isOpen, handleClose, handleData, defaultdata }) => { + console.log("defaultdata ", defaultdata?.options); + const [formdata, setFormdata] = useState({ + name: defaultdata?.options?.name || "", + defaultValue: defaultdata?.options?.defaultValue || "", + status: defaultdata?.options?.status || "required" + }); + const statusArr = ["Required", "Optional"]; + useEffect(() => { + if (defaultdata) { + setFormdata({ + name: defaultdata?.options?.name || "", + defaultValue: defaultdata?.options?.defaultValue || "", + status: defaultdata?.options?.status || "required" + }); + } + }, [defaultdata]); + const handleSubmit = (e) => { + e.preventDefault(); + if (handleData) { + handleData(formdata); + setFormdata({ name: "", status: "required", defaultValue: "" }); + } + }; + const handleChange = (e) => { + setFormdata({ ...formdata, [e.target.name]: e.target.value }); + }; + return ( + +
+
+ + handleChange(e)} + required + /> +
+
+ + handleChange(e)} + /> +
+
+ +
+ {statusArr.map((data, ind) => { + return ( +
+ + setFormdata({ ...formdata, status: data.toLowerCase() }) + } + checked={ + formdata.status.toLowerCase() === data.toLowerCase() + } + /> +
+ {data} +
+
+ ); + })} +
+
+
+ +
+ + ); +}; + +export default NameModal; diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js index d66ad2c5d..f7e584f39 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/dropdownWidgetOption.js @@ -10,6 +10,9 @@ function DropdownWidgetOption(props) { const [maxCount, setMaxCount] = useState(0); const [dropdownName, setDropdownName] = useState(props.type); const [isReadOnly, setIsReadOnly] = useState(false); + const [status, setStatus] = useState("required"); + const [defaultValue, setDefaultValue] = useState(""); + const statusArr = ["required", "optional"]; useEffect(() => { if ( @@ -25,9 +28,12 @@ function DropdownWidgetOption(props) { props.currWidgetsDetails?.options?.validation?.maxRequiredCount ); setIsReadOnly(props.currWidgetsDetails?.options?.isReadOnly); + setStatus(props.currWidgetsDetails?.options?.status || "required"); + setDefaultValue(props.currWidgetsDetails?.options?.defaultValue); + } else { + setStatus("required"); } }, [props.currWidgetsDetails]); - const handleInputChange = (index, value) => { setDropdownOptionList((prevInputs) => { const newInputs = [...prevInputs]; @@ -56,7 +62,11 @@ function DropdownWidgetOption(props) { dropdownOptionList, minCount, maxCount, - isReadOnly + isReadOnly, + null, + null, + status, + defaultValue ); props.setShowDropdown(false); setDropdownOptionList(["option-1", "option-2"]); @@ -105,6 +115,71 @@ function DropdownWidgetOption(props) { }} >
+ + setDropdownName(e.target.value)} + className="drodown-input" + /> + {props.type !== "checkbox" && ( + <> + +
+ {statusArr.map((data, ind) => { + return ( +
+ setStatus(data.toLowerCase())} + checked={status.toLowerCase() === data.toLowerCase()} + /> +
+ {data} +
+
+ ); + })} +
+ + )} + {props.type !== "checkbox" && ( + <> + + setDefaultValue(e.target.value)} + className="drodown-input" + /> + + )} {props.type === "checkbox" && !props.isSignYourself && ( <>
@@ -1651,6 +1715,12 @@ function PlaceHolderSign() { uniqueId={uniqueId} closePopup={closePopup} /> + );