Merge 27--07-25-upd
This commit is contained in:
=bhagwanSingh
commit
6344d015db
|
|
@ -300,7 +300,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-[var(--primaryLight2)] flex items-center justify-center text-white font-semibold text-sm shadow-md">
|
||||
{user ? (
|
||||
<span className="w-full h-full object-cover p-1.5 font-bold">
|
||||
{(user?.name?.slice(0, 2)).toUpperCase()}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,11 @@ const ProcessStepOne = () => {
|
|||
dispatch(toggleToTemplates());
|
||||
}
|
||||
|
||||
const [editCase , setEditCase] = useState<string>("")
|
||||
const [editRecipient , setEditRecipient] = useState({})
|
||||
|
||||
|
||||
|
||||
// if (!accountId || !transactionId) {
|
||||
// window.location.href = "/";
|
||||
// return null;
|
||||
|
|
@ -57,6 +62,7 @@ const ProcessStepOne = () => {
|
|||
console.log("selectedRecipients", selectedRecipients)
|
||||
|
||||
useEffect(() => {
|
||||
<<<<<<< HEAD
|
||||
// Fetching Transaction Details - START
|
||||
(async () => {
|
||||
try {
|
||||
|
|
@ -68,6 +74,12 @@ const ProcessStepOne = () => {
|
|||
})()
|
||||
// Fetching Transaction Details - END
|
||||
|
||||
=======
|
||||
(async () => {
|
||||
const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`)
|
||||
console.log(res.data);
|
||||
})()
|
||||
>>>>>>> origin/main
|
||||
|
||||
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
|
|
@ -164,7 +176,9 @@ const ProcessStepOne = () => {
|
|||
accessCodeDelivery: true,
|
||||
language: "en",
|
||||
name: `${recipient.firstName} ${recipient.lastName}`,
|
||||
roleName: recipient.roleName
|
||||
roleName: recipient.roleName,
|
||||
allowSenderToEdit: recipient.allowSenderToEdit ,
|
||||
allowSenderToDelete: recipient.allowSenderToDelete,
|
||||
}));
|
||||
|
||||
let recipientsDataTemp = recipientsData;
|
||||
|
|
@ -334,9 +348,9 @@ const ProcessStepOne = () => {
|
|||
{
|
||||
signType !== SignTypeEnum.selfSign &&
|
||||
<div className="flex flex-col gap-4 align-start">
|
||||
<RecipientCards />
|
||||
<RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase}/>
|
||||
{/* {signType !== "self-sign" && <RecipientAddCard />} */}
|
||||
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} />
|
||||
<RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase}/>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { FaPlus } from "react-icons/fa";
|
||||
import { addRecipient, Recipient, recipientType } from "../../../store/slices/selectedRecipientsSlice";
|
||||
import { addRecipient, Recipient, recipientType, updateRecipient } from "../../../store/slices/selectedRecipientsSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { AppDispatch } from "../../../store/store";
|
||||
import api from "../../../config/api";
|
||||
|
|
@ -8,6 +8,8 @@ import ContactModal from "./ContactModal";
|
|||
import useDebouncedEffect from "../../../utlity/useDebounce";
|
||||
import { IoIosSettings } from "react-icons/io";
|
||||
import { FiEdit, FiTrash } from "react-icons/fi";
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
|
||||
interface ContactType {
|
||||
id: string;
|
||||
|
|
@ -21,7 +23,8 @@ export interface ContactTypeObj {
|
|||
contacts: ContactType[];
|
||||
}
|
||||
|
||||
const RecipientAddCard = ({ transactionTemplateToggle }) => {
|
||||
|
||||
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase ,setEditRecipient, setEditCase }) => {
|
||||
|
||||
const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
|
||||
const [openContactModal, setOpenContactModal] = useState(false);
|
||||
|
|
@ -29,29 +32,79 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
|
|||
const dispatch = useDispatch<AppDispatch>();
|
||||
const formRef = useRef<HTMLFormElement | null>(null);
|
||||
|
||||
const [recipient, setRecipients] = useState<Recipient>({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: Boolean, allowSenderToRemove: Boolean });
|
||||
const [recipient, setRecipients] = useState<Recipient>({ uuid:null, newOne:false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: false, allowSenderToDelete: false });
|
||||
|
||||
const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
|
||||
console.log(recipient)
|
||||
|
||||
const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (recipient.lastName === "" || recipient.email === "" || !recipient.type) return;
|
||||
|
||||
// Validate Email Format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(recipient.email)) {
|
||||
console.log("Invalid email format");
|
||||
return;
|
||||
useEffect(() => {
|
||||
if (editCase === "Edit" && editRecipient) {
|
||||
setRecipients({
|
||||
// id:editRecipient.id,
|
||||
firstName: editRecipient.firstName || "",
|
||||
lastName: editRecipient.lastName || "",
|
||||
email: editRecipient.email || "",
|
||||
hostName: editRecipient.hostName || "",
|
||||
hostEmail: editRecipient.hostEmail || "",
|
||||
roleName: editRecipient.roleName || "",
|
||||
type: editRecipient.type || recipientType.SIGNER,
|
||||
allowSenderToEdit: editRecipient.allowSenderToEdit ?? false,
|
||||
allowSenderToDelete: editRecipient.allowSenderToDelete ?? false,
|
||||
uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
|
||||
newOne:editRecipient.newOne ?? false
|
||||
});
|
||||
}
|
||||
// Validation Ends
|
||||
}, [editCase, editRecipient]);
|
||||
|
||||
dispatch(addRecipient(recipient));
|
||||
setRecipients({ firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: Boolean, allowSenderToRemove: Boolean });
|
||||
formRef.current?.reset();
|
||||
|
||||
const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
console.log("recipientrecipient",recipient)
|
||||
|
||||
if (!recipient.lastName || !recipient.email || !recipient.type) return;
|
||||
|
||||
// ✅ Email format validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(recipient.email)) {
|
||||
console.log("Invalid email format");
|
||||
return;
|
||||
}
|
||||
|
||||
if (editCase === 'Edit') {
|
||||
dispatch(updateRecipient(recipient));
|
||||
} else {
|
||||
dispatch(addRecipient({
|
||||
...recipient,
|
||||
uuid:uuidv4(),
|
||||
newOne:true
|
||||
}));
|
||||
}
|
||||
|
||||
// ✅ Reset state and form
|
||||
setRecipients({
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
hostName: "",
|
||||
hostEmail: "",
|
||||
roleName: "",
|
||||
type: recipientType.SIGNER,
|
||||
allowSenderToEdit: false,
|
||||
allowSenderToDelete: false,
|
||||
uuid:"",
|
||||
newOne:false
|
||||
});
|
||||
|
||||
// setRecipients(null),
|
||||
setEditCase("")
|
||||
|
||||
formRef.current?.reset();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!recipient.firstName.length) return;
|
||||
|
||||
|
|
@ -133,10 +186,10 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
|
|||
} overflow-hidden`}
|
||||
>
|
||||
<div className="text-sm text-gray-600">
|
||||
{recipient.allowSenderToEdit && recipient.allowSenderToRemove && "Full permissions granted"}
|
||||
{recipient.allowSenderToEdit && !recipient.allowSenderToRemove && "Edit permission granted"}
|
||||
{!recipient.allowSenderToEdit && recipient.allowSenderToRemove && "Delete permission granted"}
|
||||
{!recipient.allowSenderToEdit && !recipient.allowSenderToRemove && "No permissions granted"}
|
||||
{recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
|
||||
{recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "Edit permission granted"}
|
||||
{!recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Delete permission granted"}
|
||||
{!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"}
|
||||
</div>
|
||||
</div>
|
||||
{/* Animated Permission Controls */}
|
||||
|
|
@ -178,23 +231,23 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
|
|||
{/* Delete Permission */}
|
||||
<div className="relative group">
|
||||
<label
|
||||
className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToRemove
|
||||
className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToDelete
|
||||
? 'bg-red-100 border-red-500 shadow-lg'
|
||||
: 'bg-white border-gray-300 hover:border-red-400'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={recipient.allowSenderToRemove}
|
||||
checked={recipient.allowSenderToDelete}
|
||||
onChange={(e) =>
|
||||
setRecipients({ ...recipient, allowSenderToRemove: e.target.checked })
|
||||
setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
|
||||
}
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
className="absolute w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
<FiTrash
|
||||
className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToRemove ? 'text-red-600' : 'text-gray-400'
|
||||
className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToDelete ? 'text-red-600' : 'text-gray-400'
|
||||
}`}
|
||||
/>
|
||||
</label>
|
||||
|
|
@ -332,7 +385,7 @@ const RecipientAddCard = ({ transactionTemplateToggle }) => {
|
|||
type="submit"
|
||||
className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
|
||||
>
|
||||
<FaPlus size={14} /> Add Recipient
|
||||
<FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { useState } from "react";
|
|||
import SigningOrderDiagram from "../../../SigningOrderDiagram ";
|
||||
import { IoCloseOutline } from "react-icons/io5";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { FiEdit } from "react-icons/fi";
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
if (!name) return "";
|
||||
|
|
@ -23,7 +24,13 @@ const getInitials = (name: string) => {
|
|||
.toUpperCase();
|
||||
};
|
||||
|
||||
const RecipientCards = () => {
|
||||
type CardsData = {
|
||||
setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
|
||||
setEditCase: (string: any) => void;
|
||||
transactionTemplateToggle: string
|
||||
};
|
||||
|
||||
const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => {
|
||||
const templateId = useParams<{ templateId: string }>().templateId;
|
||||
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
|
||||
|
|
@ -32,9 +39,9 @@ const RecipientCards = () => {
|
|||
if (!transactionId) {
|
||||
transactionId = templateId;
|
||||
}
|
||||
|
||||
|
||||
const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
||||
console.log("recipients.length",recipients)
|
||||
console.log("recipients.length", recipients)
|
||||
// const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder);
|
||||
const signType = useSelector((state: RootState) => state.selectedDocuments.signType);
|
||||
|
||||
|
|
@ -44,8 +51,15 @@ const RecipientCards = () => {
|
|||
dispatch(updateRecipientOrder({ id, routingOrder: value }));
|
||||
};
|
||||
|
||||
const handleEditRecipient = (recipient) => {
|
||||
// alert(JSON.stringify(recipient))
|
||||
setEditCase('Edit')
|
||||
setEditRecipient(recipient)
|
||||
}
|
||||
|
||||
const handleRemoveRecipient = (recipient) => {
|
||||
if (!accountId || !transactionId) return;
|
||||
<<<<<<< HEAD
|
||||
// dispatch(removeSelectedRecipient(recipient))
|
||||
dispatch(removeRecipientAsync([{
|
||||
recipientId: recipient.id,
|
||||
|
|
@ -53,6 +67,18 @@ const RecipientCards = () => {
|
|||
accountId: accountId,
|
||||
transactionId: transactionId,
|
||||
}]))
|
||||
=======
|
||||
if (recipient.uuid) {
|
||||
dispatch(removeSelectedRecipient(recipient))
|
||||
} else {
|
||||
dispatch(removeRecipientAsync({
|
||||
recipientId: recipient.id,
|
||||
email: recipient.email,
|
||||
accountId: accountId,
|
||||
transactionId: transactionId,
|
||||
}))
|
||||
}
|
||||
>>>>>>> origin/main
|
||||
if (recipients.length === 2) {
|
||||
let leftRecipient = recipients.filter((obj) => {
|
||||
if ("id" in obj && "id" in recipient) {
|
||||
|
|
@ -144,14 +170,45 @@ const RecipientCards = () => {
|
|||
</div>
|
||||
|
||||
{signType !== "self-sign" && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Remove recipient ${recipient.firstName}`}
|
||||
onClick={() => handleRemoveRecipient(recipient)}
|
||||
className="text-gray-400 hover:text-red-600 transition-colors"
|
||||
>
|
||||
<ImBin size={16} />
|
||||
</button>
|
||||
<div className="flex justify-between gap-2 items-center">
|
||||
{/* Edit Button */}
|
||||
<button
|
||||
type="button"
|
||||
title="Edit recipient"
|
||||
aria-label={`Edit recipient ${recipient.firstName}`}
|
||||
onClick={() => handleEditRecipient(recipient)}
|
||||
disabled={
|
||||
// For templates: always enabled (never disabled)
|
||||
['templates'].includes(transactionTemplateToggle)
|
||||
? false
|
||||
: // For transactions: disabled if not newOne AND not allowed to edit
|
||||
(!recipient.newOne && !recipient.allowSenderToEdit)
|
||||
}
|
||||
className="text-gray-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
<FiEdit size={16} />
|
||||
</button>
|
||||
|
||||
{/* Delete Button */}
|
||||
<button
|
||||
type="button"
|
||||
title="Remove recipient"
|
||||
aria-label={`Remove recipient ${recipient.firstName}`}
|
||||
onClick={() => handleRemoveRecipient(recipient)}
|
||||
disabled={
|
||||
// For templates: always enabled (never disabled)
|
||||
['templates'].includes(transactionTemplateToggle)
|
||||
? false
|
||||
: // For transactions: disabled if not newOne AND not allowed to delete
|
||||
(!recipient.newOne && !recipient.allowSenderToDelete)
|
||||
}
|
||||
className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
<ImBin size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -12,6 +12,8 @@ interface CommonAttrDropDownInt {
|
|||
|
||||
const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => {
|
||||
|
||||
console.log("selectedType, subType,",selectedType, subType)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="" className="">Type</label>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React, { useEffect, useRef } from 'react';
|
||||
import { FaArrowUp, FaArrowDown, FaArrowLeft, FaArrowRight, FaRegCircle } from 'react-icons/fa';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { FaArrowUp, FaArrowDown, FaArrowLeft, FaArrowRight } from 'react-icons/fa';
|
||||
|
||||
interface DirectionalControlsProps {
|
||||
onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
|
||||
onPositionChange?: (left: number, top: number) => void;
|
||||
disabled?: boolean;
|
||||
stepSize?: number;
|
||||
className?: string;
|
||||
|
|
@ -16,23 +17,67 @@ interface DirectionalControlsProps {
|
|||
|
||||
const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
||||
onMove,
|
||||
onPositionChange,
|
||||
disabled = false,
|
||||
stepSize = 1,
|
||||
className = '',
|
||||
selectedType,
|
||||
}) => {
|
||||
const onMoveRef = useRef(onMove);
|
||||
const [leftValue, setLeftValue] = useState('');
|
||||
const [topValue, setTopValue] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
onMoveRef.current = onMove;
|
||||
}, [onMove]);
|
||||
|
||||
useEffect(() => {
|
||||
const { top = 0, left = 0 } = selectedType || {};
|
||||
setLeftValue(Math.round(left).toString());
|
||||
setTopValue(Math.round(top).toString());
|
||||
}, [selectedType]);
|
||||
|
||||
const handleMove = (direction: 'up' | 'down' | 'left' | 'right') => {
|
||||
if (!disabled) {
|
||||
onMoveRef.current(direction, stepSize);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePositionInputChange = (type: 'left' | 'top', value: string) => {
|
||||
if (type === 'left') {
|
||||
setLeftValue(value);
|
||||
} else {
|
||||
setTopValue(value);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePositionInputBlur = (type: 'left' | 'top') => {
|
||||
if (!onPositionChange) return;
|
||||
|
||||
const numericValue = parseFloat(type === 'left' ? leftValue : topValue);
|
||||
if (isNaN(numericValue)) {
|
||||
const { top = 0, left = 0 } = selectedType || {};
|
||||
if (type === 'left') {
|
||||
setLeftValue(Math.round(left).toString());
|
||||
} else {
|
||||
setTopValue(Math.round(top).toString());
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const { top = 0, left = 0 } = selectedType || {};
|
||||
const newLeft = type === 'left' ? numericValue : left;
|
||||
const newTop = type === 'top' ? numericValue : top;
|
||||
|
||||
onPositionChange(newLeft, newTop);
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
|
||||
if (e.key === 'Enter') {
|
||||
handlePositionInputBlur(type);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (disabled) return;
|
||||
|
|
@ -64,57 +109,113 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
const buttonClass = `
|
||||
p-1 rounded-sm transition-all duration-200 border shadow-sm text-[10px]
|
||||
${disabled
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-white text-gray-600 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'}
|
||||
flex items-center justify-center w-6 h-6
|
||||
`;
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-white text-gray-600 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'}
|
||||
flex items-center justify-center w-6 h-6 `;
|
||||
|
||||
const inputClass = `
|
||||
w-12 h-6 text-[10px] text-center border rounded px-1 bg-white
|
||||
${disabled
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-300'
|
||||
: 'text-gray-600 border-gray-300 focus:border-blue-400 focus:outline-none'}
|
||||
`;
|
||||
|
||||
const { top = 0, left = 0, width = 0, height = 0 } = selectedType || {};
|
||||
|
||||
const right = left + width;
|
||||
const bottom = top + height;
|
||||
|
||||
return (
|
||||
<div className={`grid grid-cols-3 grid-rows-1 text-[10px] text-gray-700 ${className}`}>
|
||||
{/* Top Row */}
|
||||
<div></div>
|
||||
<div className="flex flex-col items-center">
|
||||
<button onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move up" type="button">
|
||||
<FaArrowUp size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Top: {Math.round(top)}px</span>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
{/* Middle Row */}
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move left" type="button">
|
||||
<FaArrowLeft size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Left: {Math.round(left)}px</span>
|
||||
<div className={`flex flex-col items-center space-y-4 text-[10px] text-gray-700 ${className}`}>
|
||||
{/* Top Button */}
|
||||
<div className="flex justify-center me-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleMove('up')}
|
||||
disabled={disabled}
|
||||
className={buttonClass}
|
||||
title="Move up"
|
||||
type="button"
|
||||
>
|
||||
<FaArrowUp size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Top</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-8 h-8 flex items-center justify-center text-xs text-gray-400 ps-5"><FaRegCircle/></div>
|
||||
{/* Middle Row: Left - Center (Inputs) - Right */}
|
||||
<div className="flex items-center space-x-1">
|
||||
{/* Left Button */}
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleMove('left')}
|
||||
disabled={disabled}
|
||||
className={buttonClass}
|
||||
title="Move left"
|
||||
type="button"
|
||||
>
|
||||
<FaArrowLeft size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Left</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move right" type="button">
|
||||
<FaArrowRight size={12} />
|
||||
</button>
|
||||
{/* <span className="mt-1">Right: {Math.round(right)}px</span> */}
|
||||
{/* Center Panel */}
|
||||
<div className="relative flex items-center justify-center bg-white rounded-lg px-1 py-2 w-24">
|
||||
{/* Floating dimensions tooltip */}
|
||||
<div className="absolute -top-2 left-1/2 -translate-x-1/2 px-2 py-[1px] text-[10px] font-mono text-black z-10 rounded-sm flex items-center gap-[2px]">
|
||||
<input
|
||||
type="number"
|
||||
value={leftValue}
|
||||
onChange={(e) => handlePositionInputChange('left', e.target.value)}
|
||||
onBlur={() => handlePositionInputBlur('left')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'left')}
|
||||
disabled={disabled}
|
||||
className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
|
||||
/>
|
||||
<span className="mx-[1px]">×</span>
|
||||
<input
|
||||
type="number"
|
||||
value={topValue}
|
||||
onChange={(e) => handlePositionInputChange('top', e.target.value)}
|
||||
onBlur={() => handlePositionInputBlur('top')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'top')}
|
||||
disabled={disabled}
|
||||
className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Right Button */}
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleMove('right')}
|
||||
disabled={disabled}
|
||||
className={buttonClass}
|
||||
title="Move right"
|
||||
type="button"
|
||||
>
|
||||
<FaArrowRight size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Right</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div></div>
|
||||
<div className="flex flex-col items-center">
|
||||
<button onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move down" type="button">
|
||||
<FaArrowDown size={12} />
|
||||
</button>
|
||||
{/* <span className="mt-1">Bottom: {Math.round(bottom)}px</span> */}
|
||||
{/* Bottom Button */}
|
||||
<div className="flex justify-center me-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<button
|
||||
onClick={() => handleMove('down')}
|
||||
disabled={disabled}
|
||||
className={buttonClass}
|
||||
title="Move down"
|
||||
type="button"
|
||||
>
|
||||
<FaArrowDown size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Bottom</span>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default DirectionalControls;
|
||||
export default DirectionalControls;
|
||||
|
|
@ -33,9 +33,9 @@ export interface DroppedItemProps {
|
|||
selTagIndx: number,
|
||||
DirectionalControlsProps: {
|
||||
onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
|
||||
disabled?: boolean;
|
||||
stepSize?: number;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
stepSize?: number;
|
||||
className?: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,7 +107,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
|
||||
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
|
||||
|
||||
// console.log("selectedTag", selectedTag, selectedType)
|
||||
console.log("selectedTag", selectedTag, selectedType)
|
||||
|
||||
|
||||
|
||||
|
|
@ -118,25 +118,33 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
const [styleOpen, setStyleOpen] = useState(false);
|
||||
|
||||
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
|
||||
console.log("Handle Property Change Called", "changeTo", changeTo, "changeWith", changeWith)
|
||||
|
||||
console.log("changeTo", changeTo, "changeWith", changeWith)
|
||||
if (changeTo === '' || changeWith === '') return
|
||||
|
||||
if (changeWith === "paragraph") {
|
||||
return
|
||||
}
|
||||
|
||||
if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
|
||||
// let change: string = changeWith;
|
||||
// if (change === "DATE TIME") {
|
||||
// change = "DATE_TIME"
|
||||
// }
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
setDroppedItems((prev) => {
|
||||
console.log("Temporal30", prev);
|
||||
return {
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
: [], // Fallback in case it's undefined or not an array
|
||||
};
|
||||
});
|
||||
|
||||
} else if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
||||
console.log("Second check")
|
||||
console.log("Line 161")
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
|
|
@ -150,6 +158,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
));
|
||||
}
|
||||
else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
|
||||
console.log("Third check")
|
||||
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
|
||||
const isCurrency = changeWith === NUMBER.CURRENCY;
|
||||
// const currencyType = null
|
||||
|
|
@ -166,24 +175,34 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
));
|
||||
|
||||
} else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
console.log("Fourth Check")
|
||||
let val = timeFormats[0].format;
|
||||
if (!is24Hrs) {
|
||||
val = timeFormats[1].format
|
||||
}
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
console.log("val", val)
|
||||
|
||||
setDroppedItems((prev) => {
|
||||
const updatedArray = Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true };
|
||||
console.log('Updating item at index', i, 'with:', updatedItem);
|
||||
return updatedItem;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [];
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val, update: true } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
[selTagKey]: updatedArray,
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
} else {
|
||||
setDroppedItems((prev) => {
|
||||
console.log('Previous state:', prev);
|
||||
|
||||
const updatedItems = Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
|
|
@ -302,7 +321,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
<RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
<DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions}/>
|
||||
<DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
|
||||
|
||||
|
||||
{selectedTag.label &&
|
||||
|
|
@ -388,7 +407,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
|
||||
|
||||
|
||||
{
|
||||
{(selectedTag.type.toLowerCase() !== TagsTypes.SIGNATURE && selectedTag.type.toLowerCase() !== TagsTypes.INITIALS) &&
|
||||
<div className="">
|
||||
<div className="flex items-center justify-between mr-2 cursor-pointer"
|
||||
onClick={() => setStyleOpen(!styleOpen)}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@ interface TemporalDateAttrInt {
|
|||
}
|
||||
|
||||
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
|
||||
|
||||
|
||||
const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
|
||||
|
||||
const handleIs24HrsClick = (checked: boolean) => {
|
||||
|
|
@ -84,6 +86,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
|
|||
val = val + " " + timeFormats[1].format;
|
||||
}
|
||||
}
|
||||
console.log('line 89' , val )
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import DrawSignatureCanvas from './DrawSignatureCanvas';
|
|||
import { FaSpinner } from "react-icons/fa";
|
||||
import { GrCheckboxSelected } from "react-icons/gr";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import { FiCheck } from 'react-icons/fi';
|
||||
|
||||
interface Signature {
|
||||
id: string;
|
||||
|
|
@ -54,7 +55,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
getAllSignatures,
|
||||
editingSignature
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' | 'SELECT'>('TYPE');
|
||||
const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' >('TYPE');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [initials, setInitials] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||
|
|
@ -72,6 +73,10 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
{ id: 6, name: 'classic', initials: 'LA', style: 'classic' },
|
||||
];
|
||||
|
||||
const [checked, setChecked] = useState(false);
|
||||
|
||||
const toggleCheckbox = () => setChecked(!checked);
|
||||
|
||||
const [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
|
||||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
|
@ -105,7 +110,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
{ id: 'TYPE', label: 'TYPE', icon: <GrCheckboxSelected className="w-4 h-4" /> },
|
||||
{ id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
|
||||
{ id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
|
||||
{ id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
|
||||
// { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
|
||||
];
|
||||
|
||||
// Initialize form with editing signature data
|
||||
|
|
@ -134,6 +139,10 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
setPreview2(`data:image/png;base64,${editingSignature.initialsBlob}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (editingSignature.default) {
|
||||
setChecked(editingSignature.default)
|
||||
}
|
||||
}
|
||||
}, [editingSignature]);
|
||||
|
||||
|
|
@ -197,7 +206,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
initialsBase64: signatures.initials,
|
||||
firstName: fullName.split(' ')[0] || user.firstName,
|
||||
lastName: fullName.split(' ')[1] || user.lastName,
|
||||
font: selectedSignature.style
|
||||
font: selectedSignature.style,
|
||||
default:checked
|
||||
};
|
||||
|
||||
let res;
|
||||
|
|
@ -384,16 +394,14 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
|
||||
|
||||
case 'SELECT':
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">Select Signature</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
// case 'SELECT':
|
||||
// return (
|
||||
// <div className="h-full flex flex-col">
|
||||
// <div className="mb-6">
|
||||
// <h2 className="text-xl font-semibold text-gray-900 mb-2">Select Signature</h2>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
@ -430,7 +438,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
<div className="px-4 py-4 border-b border-gray-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className='px-1 py-1'>
|
||||
<h3 className="text-md font-semibold text-gray-900">Add Signature</h3>
|
||||
<h3 className="text-md font-semibold text-gray-900">Add Signature </h3>
|
||||
<p className="text-xs text-gray-500">Create your digital signature</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -505,6 +513,35 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
</button> */}
|
||||
{renderContent()}
|
||||
</div>
|
||||
<div className="text-right px-6 py-1 text-white">
|
||||
<label className="inline-flex items-center cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={toggleCheckbox}
|
||||
className="sr-only"
|
||||
/>
|
||||
|
||||
{/* Custom checkbox UI */}
|
||||
<div
|
||||
className={`w-4 h-4 border rounded transition-all duration-300 flex items-center justify-center
|
||||
${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)] scale-110' : 'bg-white border-gray-400'}
|
||||
`}
|
||||
>
|
||||
{checked && (
|
||||
<FiCheck className="text-white text-sm transform scale-100 transition-transform duration-300" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-700 opacity-80 ms-1">
|
||||
{checked
|
||||
? 'Signature will be used by default.'
|
||||
: 'Signature will not be used by default.'}
|
||||
</p>
|
||||
</label>
|
||||
|
||||
{/* Caption text below */}
|
||||
</div>
|
||||
|
||||
{/* Footer Buttons in Main Area */}
|
||||
<div className="p-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ const SignatureManager: React.FC = () => {
|
|||
|
||||
{/* Empty State (if no signatures) */}
|
||||
{signatures.length === 0 && (
|
||||
<div className="bg-white rounded-xl shadow-lg p-12 text-center mt-8">
|
||||
<div className=" rounded-xl shadow-lg p-12 text-center mt-8">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<FiEdit3 className="w-16 h-16 mx-auto" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -61,9 +61,28 @@ const Templates = () => {
|
|||
return new Date(timestamp * 1000).toLocaleString();
|
||||
};
|
||||
|
||||
const handleUseFun = (id) => {
|
||||
alert(id)
|
||||
}
|
||||
const handleUseClick = async (item: any) => {
|
||||
try {
|
||||
const payload = {
|
||||
name: item?.name ?? "",
|
||||
subject: item.subject,
|
||||
message: item.message,
|
||||
description: item.description,
|
||||
expireAfter: item.expireAfter,
|
||||
enableIdStamping: item.enableIdStamping,
|
||||
allowViewAudit: item.allowViewAudit,
|
||||
allowReassign: item.allowReassign,
|
||||
enableSignatureIdStamping: item.enableSignatureIdStamping,
|
||||
templateId: item.id,
|
||||
};
|
||||
let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
|
||||
console.log("handleUseClick", res.data)
|
||||
// /process-step-one/:accountId/:transactionId
|
||||
navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}`);
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -130,7 +149,7 @@ alert(id)
|
|||
<td className="px-4 py-2 text-sm text-center">{item.name || 'Dummy'}</td>
|
||||
<td className="px-4 py-2 text-sm text-center">{formatDate(item.createdAt)}</td>
|
||||
<td className="px-4 py-2 text-sm text-center">{formatDate(item.lastModifiedAt)}</td>
|
||||
<td className="px-4 py-2 text-sm text-center" onClick={() => handleUseFun(item.id)}><span className="from-green-500 cursor-pointer to-blue-500 bg-gradient-to-br px-3 py-1 rounded-lg text-white font-semibold text-[12px]">Use</span></td>
|
||||
<td className="px-4 py-2 text-sm text-center" onClick={() => handleUseClick(item)}><span className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-[12px]">Use</span></td>
|
||||
{/* Dropdown Trigger + Tooltip */}
|
||||
<td className="px-4 py-2 text-center relative">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -351,8 +351,12 @@ export interface Recipient {
|
|||
hostEmail: string;
|
||||
type: recipientType;
|
||||
color?: string;
|
||||
roleName:string
|
||||
allowSenderToEdit: boolean;
|
||||
allowSenderToDelete: boolean;
|
||||
roleName: string
|
||||
provideOwnTags?: boolean;
|
||||
uuid?: string;
|
||||
newOne: boolean;
|
||||
}
|
||||
|
||||
export interface SelectedRecipientInt {
|
||||
|
|
@ -401,6 +405,8 @@ export const addRecipientAsync = createAsyncThunk<
|
|||
const updateRecipientsData = recipientsData.filter(recipient => recipient.id !== null);
|
||||
const createRecipientsData = recipientsData.filter(recipient => recipient.id == null);
|
||||
|
||||
console.log("createRecipientsData", createRecipientsData)
|
||||
|
||||
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
|
||||
|
||||
const resUpdate = updateRecipientsData.length
|
||||
|
|
@ -516,7 +522,7 @@ const selectedRecipientsSlice = createSlice({
|
|||
state.signingOrder = action.payload;
|
||||
},
|
||||
removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
|
||||
state.recipients = state.recipients.filter((recipient) => recipient.email !== action.payload.email);
|
||||
state.recipients = state.recipients.filter((recipient) => recipient.uuid !== action.payload.uuid);
|
||||
},
|
||||
addColorsToRecipient: (state) => {
|
||||
for (const [index, recipient] of state.recipients.entries()) {
|
||||
|
|
@ -538,6 +544,35 @@ const selectedRecipientsSlice = createSlice({
|
|||
}
|
||||
}
|
||||
},
|
||||
updateRecipient(state, action: PayloadAction<Recipient>) {
|
||||
const payloadUuid = String(action.payload.uuid);
|
||||
|
||||
// First try matching by id
|
||||
let index = state.recipients.findIndex(
|
||||
r => String(r.id) === payloadUuid
|
||||
);
|
||||
|
||||
// If not found, try matching by uuid
|
||||
if (index === -1) {
|
||||
index = state.recipients.findIndex(
|
||||
r => String(r.uuid) === payloadUuid
|
||||
);
|
||||
}
|
||||
|
||||
if (index !== -1) {
|
||||
// Merge existing recipient with new values
|
||||
state.recipients[index] = {
|
||||
...state.recipients[index],
|
||||
...action.payload
|
||||
};
|
||||
} else {
|
||||
console.warn('Recipient not found with uuid:', payloadUuid);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
,
|
||||
|
||||
resetSelRecipient: () => initialState
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
|
|
@ -600,6 +635,7 @@ export const {
|
|||
updateRecipientIds,
|
||||
resetSelRecipient,
|
||||
updateRecipientOrder,
|
||||
updateRecipient,
|
||||
resetRecipients
|
||||
} = selectedRecipientsSlice.actions;
|
||||
|
||||
|
|
|
|||
|
|
@ -40,6 +40,8 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
|
|||
const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
|
||||
const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");
|
||||
|
||||
console.log("handleGroupBorderPosition")
|
||||
|
||||
if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
|
||||
borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
|
||||
borderTop.style.height = "1px";
|
||||
|
|
|
|||
Loading…
Reference in New Issue