mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
fix: add embedding functionality for all template & add CopyTemplateId button in template report list options
This commit is contained in:
RaktimaNXG
@@ -131,7 +131,8 @@
|
||||
"Share": "Share",
|
||||
"View": "View",
|
||||
"option": "Option",
|
||||
"Embed": "Embed"
|
||||
"Embed": "Embed",
|
||||
"CopyTemplateId":"CopyTemplateId"
|
||||
},
|
||||
"report-heading": {
|
||||
"Sr.No": "Sr.No",
|
||||
@@ -263,7 +264,8 @@
|
||||
"make-template-private-alert": "Are you sure you want to make this template private? This will remove it from your public profile.",
|
||||
"public-role": "Public role",
|
||||
"public-url": "Public URL",
|
||||
"public-url-copy-mssg": " Here’s your public URL: Copy it or share it with the signer, and you will be able to see all your publicly set templates.",
|
||||
"public-url-copy": "Here’s your public URL: ",
|
||||
"public-url-copy-mssg":"Copy it or share it with the signer, and you will be able to see all your publicly set templates.",
|
||||
"add-public-url-alert": "Please add your public URL, and you will be able to make a public template.",
|
||||
"share-with-alert": "You cannot share a template if any roles already have contacts assigned. Please remove all contact assignments from the roles before sharing the template.",
|
||||
"share-with": "Share with",
|
||||
@@ -634,6 +636,16 @@
|
||||
"quotamailselfsign": "You've reached your limit of 20 emails for this month. Upgrade now to continue sending emails directly.",
|
||||
"quotamail": "You've reached your limit of 20 signature request emails for this month. Upgrade now to continue sending emails directly.",
|
||||
"quotamailTip":"Tip: You can still sign unlimited documents by manually sharing the signing request links below.",
|
||||
"quotamailhead":"Quota Reached"
|
||||
"quotamailhead":"Quota Reached",
|
||||
"public-template-mssg-1":"To integrate OpenSign into your React or Next.js project, simply run the following command:",
|
||||
"public-template-mssg-2" :"Ensure you have npm or yarn set up in your project. If you’re using Yarn, you can replace npm install with yarn add opensign-react.",
|
||||
"public-template-mssg-3" :"Need more details or examples?",
|
||||
"public-template-mssg-4": "Visit the",
|
||||
"public-template-mssg-5": " npm for the latest updates, detailed documentation, and version history.",
|
||||
"public-template-mssg-6" :"You need to set this template as public before you can utilize this code snippet.",
|
||||
"copy-code":"COPY",
|
||||
"copied-code":"COPIED",
|
||||
"Installation":"Installation",
|
||||
"Usage" :"Usage"
|
||||
|
||||
}
|
||||
|
||||
@@ -150,7 +150,8 @@
|
||||
"Share": "Partager",
|
||||
"View": "Voir",
|
||||
"option": "Option",
|
||||
"Embed": "Intégrer"
|
||||
"Embed": "Intégrer",
|
||||
"CopyTemplateId": "Copier l'ID du modèle"
|
||||
},
|
||||
"report-help": {
|
||||
"Draft Documents": "Il s'agit de documents que vous avez commencés mais que vous n'avez pas finalisés pour envoi.",
|
||||
@@ -262,7 +263,8 @@
|
||||
"make-template-private-alert": "Êtes-vous sûr de vouloir rendre ce modèle privé ? Cela le supprimera de votre profil public.",
|
||||
"public-role": "Rôle public",
|
||||
"public-url": "URL publique",
|
||||
"public-url-copy-mssg": "Voici votre URL publique : copiez-la ou partagez-le avec le signataire et vous pouvoir voir tous vos paramètres publics modèles.",
|
||||
"public-url-copy": "Voici votre URL publique : ",
|
||||
"public-url-copy-mssg": "copiez-la ou partagez-le avec le signataire et vous pouvoir voir tous vos paramètres publics modèles.",
|
||||
"add-public-url-alert": "Veuillez ajouter votre URL publique et vous pourra rendre public modèle.",
|
||||
"share-with-alert": "Vous ne pouvez pas partager un modèle si des contacts sont déjà attribués à des rôles. Veuillez supprimer toutes les attributions de contacts des rôles avant de partager le modèle.",
|
||||
"share-with": "Partager avec",
|
||||
@@ -634,6 +636,16 @@
|
||||
"quotamailselfsign": "Vous avez atteint votre limite de 20 e-mails pour ce mois. Mettez à niveau maintenant pour continuer à envoyer des e-mails directement.",
|
||||
"quotamail": "Vous avez atteint votre limite de 20 e-mails de demande de signature pour ce mois. Mettez à niveau maintenant pour continuer à envoyer des e-mails directement.",
|
||||
"quotamailTip":"Astuce : Vous pouvez toujours signer un nombre illimité de documents en partageant manuellement les liens de demande de signature ci-dessous.",
|
||||
"quotamailhead":"Quota atteint"
|
||||
|
||||
"quotamailhead":"Quota atteint",
|
||||
"public-template-mssg-1" :"Pour intégrer OpenSign dans votre projet React ou Next.js, exécutez simplement la commande suivante :",
|
||||
"public-template-mssg-2" :"Assurez-vous que npm ou Yarn est configuré dans votre projet. Si vous utilisez Yarn, vous pouvez remplacer npm install par Yarn Add opensign-react.",
|
||||
"public-template-mssg-3" :"Besoin de plus de détails ou d'exemples ?",
|
||||
"public-template-mssg-4": "Visitez le",
|
||||
"public-template-mssg-5": "npm pour les dernières mises à jour, une documentation détaillée et l'historique des versions.",
|
||||
"public-template-mssg-6":"Vous devez définir ce modèle comme public avant de pouvoir utiliser cet extrait de code.",
|
||||
"copy-code":"COPIE",
|
||||
"copied-code":"COPIÉ",
|
||||
"Installation":"Installation",
|
||||
"Usage" :"Usage"
|
||||
|
||||
}
|
||||
|
||||
@@ -2,10 +2,12 @@ import React, { useState } from "react";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||
import { copytoData } from "../../constant/Utils";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function EmbedTab(props) {
|
||||
const { t } = useTranslation();
|
||||
const tabName = [
|
||||
{ title: "React/Next", icon: "fa-brands fa-react", color: "#61dafb" },
|
||||
{ title: "React/Next.js", icon: "fa-brands fa-react", color: "#61dafb" },
|
||||
{ title: "Angular", icon: "fa-brands fa-angular", color: "#ff5733" }
|
||||
];
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
@@ -14,7 +16,7 @@ function EmbedTab(props) {
|
||||
const codeData = [
|
||||
{
|
||||
id: 0,
|
||||
title: "Installation command",
|
||||
title: "Installation",
|
||||
codeString: `
|
||||
npm install opensign-react`
|
||||
},
|
||||
@@ -76,15 +78,22 @@ export function App() {
|
||||
{codeData.map((data, ind) => {
|
||||
return (
|
||||
<div key={ind}>
|
||||
<p className="font-medium text-[15px]">{data.title}</p>
|
||||
<p className="font-medium text-[18px]">
|
||||
{t(`${data.title}`)}
|
||||
</p>
|
||||
{ind === 0 && (
|
||||
<p className="text-[13px] mt-2">
|
||||
{t("public-template-mssg-1")}
|
||||
</p>
|
||||
)}
|
||||
<div className="relative p-1">
|
||||
<div
|
||||
onClick={() => handleCopy(data.codeString, ind)}
|
||||
className="absolute top-[20px] right-[20px] cursor-pointer"
|
||||
>
|
||||
<i className="fa-light fa-link text-white"></i>{" "}
|
||||
<i className="fa-light fa-copy text-white mr-[2px]" />
|
||||
<span className=" text-white">
|
||||
{isCopied[ind] ? "COPIED" : "COPY"}
|
||||
{isCopied[ind] ? t("copied-code") : t("copy-code")}
|
||||
</span>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
@@ -97,9 +106,32 @@ export function App() {
|
||||
{data.codeString}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
{ind === 0 && (
|
||||
<p className="text-[13px] mb-3">
|
||||
{t("public-template-mssg-2")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<p className="font-medium text-[15px]">
|
||||
{t("public-template-mssg-3")}
|
||||
</p>
|
||||
<p className="my-[6px]">
|
||||
{" "}
|
||||
{t("public-template-mssg-4")}
|
||||
<a
|
||||
href="https://www.npmjs.com/package/opensign-react"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="cursor-pointer text-blue-700 "
|
||||
>
|
||||
{" "}
|
||||
OpenSign React package{" "}
|
||||
</a>
|
||||
{t("public-template-mssg-5")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
activeTab === 1 && (
|
||||
|
||||
@@ -361,6 +361,13 @@ export default function reportJson(id) {
|
||||
btnIcon: "fa-light fa-code",
|
||||
action: "Embed"
|
||||
},
|
||||
{
|
||||
btnId: "2434",
|
||||
btnLabel: "CopyTemplateId",
|
||||
hoverLabel: "CopyTemplateId",
|
||||
btnIcon: "fa-light fa-copy",
|
||||
action: "CopyTemplateId"
|
||||
},
|
||||
{
|
||||
btnId: "1834",
|
||||
btnLabel: "Delete",
|
||||
|
||||
@@ -36,7 +36,7 @@ const dashboardJson = [
|
||||
queryType: "",
|
||||
class: "contracts_Document",
|
||||
query:
|
||||
'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
|
||||
'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"SignedUrl":{"#*ne":null},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
|
||||
key: "count",
|
||||
Redirect_type: "Report",
|
||||
Redirect_id: "1MwEuxLEkF",
|
||||
|
||||
@@ -1047,7 +1047,7 @@ function PlaceHolderSign() {
|
||||
type="button"
|
||||
className="flex flex-row items-center op-link op-link-primary"
|
||||
>
|
||||
<i className="fa-light fa-link" aria-hidden="true"></i>
|
||||
<i className="fa-light fa-copy" />
|
||||
<span className=" hidden md:block ml-1 ">{t("copy-link")}</span>
|
||||
</button>
|
||||
<RWebShare data={{ url: data.url, title: t("sign-url") }}>
|
||||
|
||||
@@ -595,7 +595,7 @@ function UserProfile() {
|
||||
className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm"
|
||||
onClick={() => copytoclipboard()}
|
||||
>
|
||||
<i className="fa-light fa-link"></i>{" "}
|
||||
<i className="fa-light fa-copy" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -25,8 +25,8 @@ const Alert = ({ children, type, className }) => {
|
||||
: "z-[1000] fixed top-20 left-1/2 transform -translate-x-1/2 text-sm"
|
||||
} `}
|
||||
>
|
||||
<div className={`op-alert ${textcolor}`}>
|
||||
<span className="ml-3">{children}</span>
|
||||
<div className={`op-alert ${textcolor} flex justify-center`}>
|
||||
<span className="px-1">{children}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -71,6 +71,7 @@ const ReportTable = (props) => {
|
||||
const [isViewShare, setIsViewShare] = useState({});
|
||||
const [isSubscribe, setIsSubscribe] = useState(true);
|
||||
const [reason, setReason] = useState("");
|
||||
const [isEmbed, setIsEmbed] = useState(false);
|
||||
const Extand_Class = localStorage.getItem("Extand_Class");
|
||||
const extClass = Extand_Class && JSON.parse(Extand_Class);
|
||||
const startIndex = (currentPage - 1) * props.docPerPage;
|
||||
@@ -365,6 +366,8 @@ const ReportTable = (props) => {
|
||||
setIsShareWith({ [item.objectId]: true });
|
||||
} else if (act.action === "Embed") {
|
||||
handleEmbedFunction(item);
|
||||
} else if (act.action === "CopyTemplateId") {
|
||||
copyTemplateId(item.objectId);
|
||||
}
|
||||
};
|
||||
// Get current list
|
||||
@@ -1067,12 +1070,14 @@ const ReportTable = (props) => {
|
||||
}
|
||||
};
|
||||
const handleEmbedFunction = async (item) => {
|
||||
setIsEmbed(true);
|
||||
setIsPublicProfile({
|
||||
[item.objectId]: props.isPublic[item.objectId]
|
||||
[item.objectId]: true
|
||||
});
|
||||
let extendUser = JSON.parse(localStorage.getItem("Extand_Class"));
|
||||
setIsPublicUserName(extendUser[0]?.UserName || "");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{Object.keys(actLoader)?.length > 0 && (
|
||||
@@ -1343,22 +1348,27 @@ const ReportTable = (props) => {
|
||||
<ModalUi
|
||||
isOpen
|
||||
title={t("public-url")}
|
||||
handleClose={() => setIsPublicProfile({})}
|
||||
handleClose={() => {
|
||||
setIsPublicProfile({});
|
||||
setIsEmbed(false);
|
||||
}}
|
||||
>
|
||||
<div className="m-[20px]">
|
||||
{publicUserName ? (
|
||||
{isEmbed && !item?.IsPublic ? (
|
||||
<>
|
||||
<p>{t("public-template-mssg-6")}</p>
|
||||
<EmbedTab templateId={item.objectId} />
|
||||
</>
|
||||
) : publicUserName ? (
|
||||
<div className="font-normal text-black">
|
||||
<p>{t("public-url-copy-mssg")}</p>
|
||||
<div className=" flex items-center justify-between gap-3 mt-2 p-[2px] ">
|
||||
<span>{t("public-url-copy")}</span>
|
||||
<div className=" flex items-center justify-between gap-3 p-[2px] ">
|
||||
<div className="w-[280px] whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
<span className="font-bold">
|
||||
{t("public-url")} :
|
||||
</span>
|
||||
<span
|
||||
onClick={() =>
|
||||
copytoProfileLink()
|
||||
}
|
||||
className="ml-[2px] underline underline-offset-2 cursor-pointer"
|
||||
className="ml-[2px] underline underline-offset-2 cursor-pointer text-blue-800"
|
||||
>
|
||||
{publicUrl()}
|
||||
</span>
|
||||
@@ -1383,7 +1393,7 @@ const ReportTable = (props) => {
|
||||
copytoProfileLink()
|
||||
}
|
||||
>
|
||||
<i className="fa-light fa-link"></i>{" "}
|
||||
<i className="fa-light fa-copy" />
|
||||
<span className="hidden md:inline-block">
|
||||
{copied["publicprofile"]
|
||||
? t("copied")
|
||||
@@ -1392,36 +1402,9 @@ const ReportTable = (props) => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className=" flex items-center justify-between gap-3 mt-2 p-[2px] ">
|
||||
<div>
|
||||
<span className="font-bold">
|
||||
{t("templateid")} :
|
||||
</span>
|
||||
<span
|
||||
onClick={() =>
|
||||
copyTemplateId(item.objectId)
|
||||
}
|
||||
className="underline ml-[2px] underline-offset-2 w-[150px] md:w-[350px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer"
|
||||
>
|
||||
{item.objectId}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm"
|
||||
onClick={() =>
|
||||
copyTemplateId(item.objectId)
|
||||
}
|
||||
>
|
||||
<i className="fa-light fa-link"></i>{" "}
|
||||
<span className="hidden md:inline-block">
|
||||
{copied["templateid"]
|
||||
? t("copied")
|
||||
: t("copy")}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[13px] mt-[5px]">
|
||||
{t("public-url-copy-mssg")}
|
||||
</p>
|
||||
<EmbedTab templateId={item.objectId} />
|
||||
</div>
|
||||
) : (
|
||||
@@ -1482,65 +1465,33 @@ const ReportTable = (props) => {
|
||||
{isOption[item.objectId] &&
|
||||
act.action === "option" && (
|
||||
<ul className="absolute -right-1 top-auto z-[70] w-max op-dropdown-content op-menu shadow bg-base-100 text-base-content rounded-box">
|
||||
{act.subaction?.map((subact) =>
|
||||
props.isPublic[
|
||||
item.objectId
|
||||
] ? (
|
||||
<li
|
||||
key={subact.btnId}
|
||||
onClick={() =>
|
||||
handleActionBtn(
|
||||
subact,
|
||||
item
|
||||
)
|
||||
}
|
||||
title={t(
|
||||
`btnLabel.${subact.btnLabel}`
|
||||
)}
|
||||
>
|
||||
<span>
|
||||
<i
|
||||
className={`${subact.btnIcon} mr-1.5`}
|
||||
></i>
|
||||
{subact.btnLabel && (
|
||||
<span className="text-[13px] capitalize font-medium">
|
||||
{t(
|
||||
`btnLabel.${subact.btnLabel}`
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
) : (
|
||||
subact.action !== "Embed" && (
|
||||
<li
|
||||
key={subact.btnId}
|
||||
onClick={() =>
|
||||
handleActionBtn(
|
||||
subact,
|
||||
item
|
||||
)
|
||||
}
|
||||
title={t(
|
||||
`btnLabel.${subact.btnLabel}`
|
||||
)}
|
||||
>
|
||||
<span>
|
||||
<i
|
||||
className={`${subact.btnIcon} mr-1.5`}
|
||||
></i>
|
||||
{subact.btnLabel && (
|
||||
<span className="text-[13px] capitalize font-medium">
|
||||
{t(
|
||||
`btnLabel.${subact.btnLabel}`
|
||||
)}
|
||||
</span>
|
||||
{act.subaction?.map((subact) => (
|
||||
<li
|
||||
key={subact.btnId}
|
||||
onClick={() =>
|
||||
handleActionBtn(
|
||||
subact,
|
||||
item
|
||||
)
|
||||
}
|
||||
title={t(
|
||||
`btnLabel.${subact.btnLabel}`
|
||||
)}
|
||||
>
|
||||
<span>
|
||||
<i
|
||||
className={`${subact.btnIcon} mr-1.5`}
|
||||
></i>
|
||||
{subact.btnLabel && (
|
||||
<span className="text-[13px] capitalize font-medium">
|
||||
{t(
|
||||
`btnLabel.${subact.btnLabel}`
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
)
|
||||
)}
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
@@ -1861,7 +1812,7 @@ const ReportTable = (props) => {
|
||||
className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm"
|
||||
onClick={() => copytoclipboard(share)}
|
||||
>
|
||||
<i className="fa-light fa-link"></i>{" "}
|
||||
<i className="fa-light fa-copy" />
|
||||
{copied[share.email]
|
||||
? t("copied")
|
||||
: t("copy")}
|
||||
|
||||
Reference in New Issue
Block a user