From 0e38783560e48e0584a4372f5a6b714844b36276 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 16 Apr 2024 19:54:22 +0530 Subject: [PATCH] style: change design of buttons in report --- apps/OpenSign/src/json/ReportJson.js | 163 +++++++++++------- .../src/primitives/GetReportDisplay.js | 133 ++++++++------ 2 files changed, 184 insertions(+), 112 deletions(-) diff --git a/apps/OpenSign/src/json/ReportJson.js b/apps/OpenSign/src/json/ReportJson.js index 728ef175b1..21066f6696 100644 --- a/apps/OpenSign/src/json/ReportJson.js +++ b/apps/OpenSign/src/json/ReportJson.js @@ -13,7 +13,7 @@ export default function reportJson(id) { actions: [ { btnId: "1231", - btnLabel: "Edit", + hoverLabel: "Edit", btnColor: "#4bd396", textColor: "white", btnIcon: "fa-solid fa-pen", @@ -22,7 +22,7 @@ export default function reportJson(id) { }, { btnId: "2142", - btnLabel: "Delete", + hoverLabel: "Delete", btnColor: "#ff4848", textColor: "white", btnIcon: "fa fa-trash", @@ -41,10 +41,11 @@ export default function reportJson(id) { actions: [ { btnId: "4536", - btnLabel: "Sign", + btnLabel: "sign", + hoverLabel: "Sign", btnColor: "#3ac9d6", textColor: "white", - btnIcon: "fa fa-eye", + btnIcon: "fa-solid fa-signature", redirectUrl: "pdfRequestFiles", action: "redirect" } @@ -60,8 +61,8 @@ export default function reportJson(id) { actions: [ { btnId: "8901", - btnLabel: "Share", - btnColor: "#3ac9d6", + hoverLabel: "Share", + btnColor: "#4bd396", textColor: "white", btnIcon: "fa-solid fa-share", redirectUrl: "", @@ -69,7 +70,7 @@ export default function reportJson(id) { }, { btnId: "1588", - btnLabel: "View", + hoverLabel: "View", btnColor: "#3ac9d6", textColor: "white", btnIcon: "fa fa-eye", @@ -77,22 +78,30 @@ export default function reportJson(id) { action: "redirect" }, { - btnId: "1488", - btnLabel: "Delete", - btnColor: "#ff4848", - textColor: "white", - btnIcon: "fa fa-trash", - redirectUrl: "", - action: "delete" - }, - { - btnId: "1688", - btnLabel: "Revoke", - btnColor: "#ff4848", - textColor: "white", - btnIcon: "fa-solid fa-file-circle-xmark", - redirectUrl: "", - action: "revoke" + btnId: "2234", + hoverLabel: "option", + btnColor: "transparent", + textColor: "black", + btnIcon: "fa-solid fa-ellipsis-vertical fa-lg", + action: "option", + subaction: [ + { + btnId: "1688", + btnLabel: "Revoke", + hoverLabel: "Revoke", + btnIcon: "fa-solid fa-file-circle-xmark", + redirectUrl: "", + action: "revoke" + }, + { + btnId: "1488", + btnLabel: "Delete", + hoverLabel: "Delete", + btnIcon: "fa fa-trash", + redirectUrl: "", + action: "delete" + } + ] } ], helpMsg: @@ -106,7 +115,7 @@ export default function reportJson(id) { actions: [ { btnId: "1378", - btnLabel: "Edit", + hoverLabel: "Edit", btnColor: "#4bd396", textColor: "white", btnIcon: "fa fa-eye", @@ -115,7 +124,7 @@ export default function reportJson(id) { }, { btnId: "1278", - btnLabel: "Delete", + hoverLabel: "Delete", btnColor: "#ff4848", textColor: "white", btnIcon: "fa fa-trash", @@ -134,7 +143,7 @@ export default function reportJson(id) { actions: [ { btnId: "1458", - btnLabel: "View", + hoverLabel: "View", btnColor: "#4bd396", textColor: "white", btnIcon: "fa fa-eye", @@ -143,7 +152,7 @@ export default function reportJson(id) { }, { btnId: "1358", - btnLabel: "Delete", + hoverLabel: "Delete", btnColor: "#ff4848", textColor: "white", btnIcon: "fa fa-trash", @@ -162,7 +171,7 @@ export default function reportJson(id) { actions: [ { btnId: "1898", - btnLabel: "View", + hoverLabel: "View", btnColor: "#4bd396", textColor: "white", btnIcon: "fa fa-eye", @@ -171,7 +180,7 @@ export default function reportJson(id) { }, { btnId: "1998", - btnLabel: "Delete", + hoverLabel: "Delete", btnColor: "#ff4848", textColor: "white", btnIcon: "fa fa-trash", @@ -190,21 +199,47 @@ export default function reportJson(id) { actions: [ { btnId: "1999", - btnLabel: "View", + hoverLabel: "Share", btnColor: "#4bd396", textColor: "white", + btnIcon: "fa-solid fa-share", + redirectUrl: "", + action: "share" + }, + { + btnId: "1999", + hoverLabel: "View", + btnColor: "#3ac9d6", + textColor: "white", btnIcon: "fa fa-eye", redirectUrl: "pdfRequestFiles", action: "redirect" }, { - btnId: "2000", - btnLabel: "Delete", - btnColor: "#ff4848", - textColor: "white", - btnIcon: "fa fa-trash", - redirectUrl: "", - action: "delete" + btnId: "2234", + hoverLabel: "option", + btnColor: "transparent", + textColor: "black", + btnIcon: "fa-solid fa-ellipsis-vertical fa-lg", + action: "option", + subaction: [ + { + btnId: "6788", + btnLabel: "Revoke", + hoverLabel: "Revoke", + btnIcon: "fa-solid fa-file-circle-xmark", + redirectUrl: "", + action: "revoke" + }, + { + btnId: "2000", + btnLabel: "Delete", + hoverLabel: "Delete", + btnIcon: "fa fa-trash", + redirectUrl: "", + action: "delete" + } + ] } ] }; @@ -216,8 +251,9 @@ export default function reportJson(id) { actions: [ { btnId: "2001", - btnLabel: "Sign", - btnColor: "#4bd396", + btnLabel: "sign", + hoverLabel: "Sign", + btnColor: "#3ac9d6", textColor: "white", btnIcon: "fa-solid fa-signature", redirectUrl: "pdfRequestFiles", @@ -233,7 +269,7 @@ export default function reportJson(id) { actions: [ { btnId: "2003", - btnLabel: "Edit", + hoverLabel: "Edit", btnColor: "#4bd396", textColor: "white", btnIcon: "fa-solid fa-pen", @@ -242,7 +278,7 @@ export default function reportJson(id) { }, { btnId: "2004", - btnLabel: "Delete", + hoverLabel: "Delete", btnColor: "#ff4848", textColor: "white", btnIcon: "fa fa-trash", @@ -259,7 +295,7 @@ export default function reportJson(id) { actions: [ { btnId: "2204", - btnLabel: "Delete", + hoverLabel: "Delete", btnColor: "#f55a42", textColor: "white", btnIcon: "fa-solid fa-trash", @@ -278,7 +314,8 @@ export default function reportJson(id) { actions: [ { btnId: "2234", - btnLabel: "Create document", + btnLabel: "Use", + hoverLabel: "Use", btnColor: "#4bd396", textColor: "white", btnIcon: "fa fa-plus", @@ -286,22 +323,30 @@ export default function reportJson(id) { action: "redirect" }, { - btnLabel: "Edit", - btnId: "2434", - btnColor: "#00c9d5", - textColor: "white", - btnIcon: "fa-solid fa-pen", - redirectUrl: "template", - action: "redirect" - }, - { - btnId: "1834", - btnLabel: "Delete", - btnColor: "#ff4848", - textColor: "white", - btnIcon: "fa fa-trash", - redirectUrl: "", - action: "delete" + btnId: "2234", + hoverLabel: "option", + btnColor: "transparent", + textColor: "black", + btnIcon: "fa-solid fa-ellipsis-vertical fa-lg", + action: "option", + subaction: [ + { + btnId: "2434", + btnLabel: "Edit", + hoverLabel: "Edit", + btnIcon: "fa-solid fa-pen", + redirectUrl: "template", + action: "redirect" + }, + { + btnId: "1834", + btnLabel: "Delete", + hoverLabel: "Delete", + btnIcon: "fa fa-trash", + redirectUrl: "", + action: "delete" + } + ] } ], helpMsg: diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js index b6bbd34ba8..4684b30580 100644 --- a/apps/OpenSign/src/primitives/GetReportDisplay.js +++ b/apps/OpenSign/src/primitives/GetReportDisplay.js @@ -1,4 +1,4 @@ - import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect, useMemo } from "react"; import pad from "../assets/images/pad.svg"; import { useNavigate } from "react-router-dom"; import axios from "axios"; @@ -9,18 +9,7 @@ import Alert from "./Alert"; import Tooltip from "./Tooltip"; import { RWebShare } from "react-web-share"; -const ReportTable = ({ - ReportName, - List, - setList, - actions, - heading, - setIsNextRecord, - isMoreDocs, - docPerPage, - form, - report_help -}) => { +const ReportTable = (props) => { const navigate = useNavigate(); const [currentPage, setCurrentPage] = useState(1); const [actLoader, setActLoader] = useState({}); @@ -32,18 +21,19 @@ const ReportTable = ({ const [isShare, setIsShare] = useState({}); const [shareUrls, setShareUrls] = useState([]); const [copied, setCopied] = useState(false); + const [isOption, setIsOption] = useState({}); const [alertMsg, setAlertMsg] = useState({ type: "success", message: "" }); - const startIndex = (currentPage - 1) * docPerPage; - + const startIndex = (currentPage - 1) * props.docPerPage; + const { isMoreDocs, setIsNextRecord } = props; // For loop is used to calculate page numbers visible below table // Initialize pageNumbers using useMemo to avoid unnecessary re-creation const pageNumbers = useMemo(() => { const calculatedPageNumbers = []; - for (let i = 1; i <= Math.ceil(List.length / docPerPage); i++) { + for (let i = 1; i <= Math.ceil(props.List.length / props.docPerPage); i++) { calculatedPageNumbers.push(i); } return calculatedPageNumbers; - }, [List, docPerPage]); + }, [props.List, props.docPerPage]); // below useEffect reset currenpage to 1 if user change route useEffect(() => { return () => setCurrentPage(1); @@ -73,8 +63,8 @@ const ReportTable = ({ // `handleURL` is used to open microapp const handleURL = async (item, act) => { - if (ReportName === "Templates") { - if (act.btnLabel === "Edit") { + if (props.ReportName === "Templates") { + if (act.hoverLabel === "Edit") { navigate(`/${act.redirectUrl}/${item.objectId}`); } else { setActLoader({ [`${item.objectId}_${act.btnId}`]: true }); @@ -212,13 +202,15 @@ const ReportTable = ({ handleShare(item); } else if (act.action === "revoke") { setIsRevoke({ [item.objectId]: true }); + } else if (act.action === "option") { + setIsOption({ [item.objectId]: !isOption[item.objectId] }); } }; // Get current list - const indexOfLastDoc = currentPage * docPerPage; - const indexOfFirstDoc = indexOfLastDoc - docPerPage; + const indexOfLastDoc = currentPage * props.docPerPage; + const indexOfFirstDoc = indexOfLastDoc - props.docPerPage; // `currentLists` is total record render on current page - const currentLists = List?.slice(indexOfFirstDoc, indexOfLastDoc); + const currentLists = props.List?.slice(indexOfFirstDoc, indexOfLastDoc); // Change page const paginateFront = () => setCurrentPage(currentPage + 1); @@ -229,7 +221,7 @@ const ReportTable = ({ }; const handleUserData = (data) => { - setList((prevData) => [data, ...prevData]); + props.setList((prevData) => [data, ...prevData]); }; const handleDelete = async (item) => { @@ -243,10 +235,10 @@ const ReportTable = ({ const serverUrl = process.env.REACT_APP_SERVERURL ? process.env.REACT_APP_SERVERURL : window.location.origin + "/api/app"; - const cls = clsObj[ReportName] || "contracts_Document"; + const cls = clsObj[props.ReportName] || "contracts_Document"; const url = serverUrl + `/classes/${cls}/`; const body = - ReportName === "Contactbook" + props.ReportName === "Contactbook" ? { IsDeleted: true } : { IsArchive: true }; const res = await axios.put(url + item.objectId, body, { @@ -265,8 +257,10 @@ const ReportTable = ({ message: "Record deleted successfully!" }); setTimeout(() => setIsAlert(false), 1500); - const upldatedList = List.filter((x) => x.objectId !== item.objectId); - setList(upldatedList); + const upldatedList = props.List.filter( + (x) => x.objectId !== item.objectId + ); + props.setList(upldatedList); } } catch (err) { console.log("err", err); @@ -335,8 +329,10 @@ const ReportTable = ({ message: "Record revoked successfully!" }); setTimeout(() => setIsAlert(false), 1500); - const upldatedList = List.filter((x) => x.objectId !== item.objectId); - setList(upldatedList); + const upldatedList = props.List.filter( + (x) => x.objectId !== item.objectId + ); + props.setList(upldatedList); } }) .catch((err) => { @@ -364,20 +360,20 @@ const ReportTable = ({ {isAlert && {alertMsg.message}}
- {ReportName}{" "} - {report_help && ( + {props.ReportName}{" "} + {props.report_help && ( - + )}
- {ReportName === "Templates" && ( + {props.ReportName === "Templates" && ( navigate("/form/template")} className="fa-solid fa-square-plus text-sky-400 text-[25px]" > )} - {form && ( + {props.form && (
handleContactFormModal()} @@ -389,36 +385,36 @@ const ReportTable = ({ - {heading?.map((item, index) => ( + {props.heading?.map((item, index) => ( ))} - {actions?.length > 0 && ( + {props.actions?.length > 0 && ( )} - {List?.length > 0 && ( + {props.List?.length > 0 && ( <> {currentLists.map((item, index) => - ReportName === "Contactbook" ? ( + props.ReportName === "Contactbook" ? ( - {heading.includes("Sr.No") && ( + {props.heading.includes("Sr.No") && ( )} ) : ( - {heading.includes("Sr.No") && ( + {props.heading.includes("Sr.No") && ( )} - {heading.includes("Note") && ( + {props.heading.includes("Note") && ( )} - {heading.includes("Folder") && ( + {props.heading.includes("Folder") && ( @@ -500,14 +496,18 @@ const ReportTable = ({ -
{item} Action
{startIndex + index + 1}{item?.Name} {item?.Email || "-"} {item?.Phone || "-"} - {actions?.length > 0 && - actions.map((act, index) => ( + {props.actions?.length > 0 && + props.actions.map((act, index) => (
{startIndex + index + 1} {item?.Name}{" "} {item?.Note || "-"} {item?.Folder?.Name || "OpenSign™ Drive"} {item?.Signers ? formatRow(item?.Signers) : "-"} - {actions?.length > 0 && - actions.map((act, index) => ( + + {props.actions?.length > 0 && + props.actions.map((act, index) => ( ))} {isDeleteModal[item.objectId] && ( @@ -637,7 +664,7 @@ const ReportTable = ({
- {List.length > docPerPage && ( + {props.List.length > props.docPerPage && ( <> {currentPage > 1 && ( )} - {List.length > docPerPage && ( + {props.List.length > props.docPerPage && ( <> {pageNumbers.includes(currentPage + 1) && (
- {List?.length <= 0 && ( + {props.List?.length <= 0 && (