248 lines
13 KiB
TypeScript
248 lines
13 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { RootState } from '../../../store/store';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import FieldList from './FieldList';
|
|
|
|
import { addColorsToRecipient, fetchRecipients, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
|
|
|
|
import { IoCheckmark } from 'react-icons/io5'
|
|
import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md'
|
|
import { useParams } from 'react-router-dom';
|
|
import { fetchDocuments } from '../../../store/slices/documentSlice';
|
|
import { GrFormPrevious } from 'react-icons/gr';
|
|
|
|
interface LeftSideBarProps {
|
|
isFields: boolean;
|
|
selectedRecipientIndx: number;
|
|
setSelectedRecipient: React.Dispatch<React.SetStateAction<number>>
|
|
}
|
|
|
|
const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIndx, setSelectedRecipient }) => {
|
|
let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
|
|
const dispatch = useDispatch();
|
|
const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
|
|
const accountId = params.accountId;
|
|
let transactionId = params.transactionId
|
|
if (!transactionId) {
|
|
transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
|
|
transactionId = params.templateId;
|
|
dispatch(toggleToTemplates());
|
|
}
|
|
if (!accountId || !transactionId) {
|
|
window.location.href = "/";
|
|
return null;
|
|
}
|
|
|
|
|
|
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
|
|
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
|
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (selectedRecipients.length === 0) {
|
|
dispatch(fetchRecipients({ accountId, transactionId }));
|
|
}
|
|
}, [dispatch, accountId, transactionId, selectedRecipients.length]);
|
|
|
|
useEffect(() => {
|
|
if (selectedDocuments.length === 0) {
|
|
dispatch(fetchDocuments({ accountId, transactionId }));
|
|
}
|
|
}, [dispatch, accountId, transactionId, selectedDocuments.length]);
|
|
|
|
// For Recipient
|
|
const [dropDownToggle, setDropDownToggle] = useState(false);
|
|
const [dropDownTogglePage, setDropDownTogglePage] = useState<string>("");
|
|
|
|
const selectedRecipient = selectedRecipients[selectedRecipientIndx];
|
|
|
|
useEffect(() => {
|
|
if (selectedRecipients.length) {
|
|
if ("color" in selectedRecipients[0]) return;
|
|
dispatch(addColorsToRecipient())
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
{/* Left Side Bar - START */}
|
|
{
|
|
selectedRecipients.length > 0 && <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'>
|
|
{isFields && <>
|
|
{/* Fields List and Recipeint - Start */}
|
|
{/* Side Bar showing Recipients */}
|
|
<div className='relative'
|
|
tabIndex={0}
|
|
onBlur={() => setDropDownToggle(false)}>
|
|
{/* Selected Recipient */}
|
|
<div
|
|
id='switch-recipients-left'
|
|
onClick={() => setDropDownToggle(!dropDownToggle)}
|
|
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
|
|
<div className='flex items-center gap-1.5'>
|
|
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
|
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
|
<p>
|
|
{
|
|
selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
|
|
(selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
|
|
`${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
|
|
}
|
|
</p>
|
|
</div>
|
|
<MdKeyboardArrowDown />
|
|
</div>
|
|
|
|
<div
|
|
className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
|
|
{selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
|
|
if (recipient.type === recipientType.CC) return null; // Skip CC recipients
|
|
return (<div
|
|
key={indx}
|
|
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
|
|
onClick={() => {
|
|
setSelectedRecipient(indx);
|
|
setTimeout(() => {
|
|
setDropDownToggle(false);
|
|
}, 0)
|
|
}}
|
|
>
|
|
<div className='flex items-center gap-1.5'>
|
|
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
|
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
|
<p>
|
|
{
|
|
recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
|
|
(recipient.email.length === 0 ? recipient.roleName : recipient.email) :
|
|
`${recipient.firstName + " " + recipient.lastName}`
|
|
}
|
|
</p>
|
|
</div>
|
|
{selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />}
|
|
</div>)
|
|
})}
|
|
</div>
|
|
</div>
|
|
{/* Side Bar showing Recipients - ENDS*/}
|
|
|
|
{/* Drag Drop Tags Start */}
|
|
<div
|
|
id='tags-con-dash-left'
|
|
className='mt-4'>
|
|
<FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
|
|
</div>
|
|
|
|
{/* Fields List and Recipeint - End */}
|
|
</>}
|
|
|
|
|
|
|
|
{!isFields && <>
|
|
{/* Pages - START */}
|
|
<div className='flex flex-col gap-2'>
|
|
{selectedDocuments.length && selectedDocuments.map((document, indx) => {
|
|
return (
|
|
<div
|
|
key={indx}
|
|
// tabIndex={1}
|
|
// onBlur={() => setDropDownTogglePage('')}
|
|
>
|
|
<div
|
|
onClick={() => setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
|
|
className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
|
|
{
|
|
document.pages != undefined && <img
|
|
key={indx}
|
|
className='rounded-sm shadow'
|
|
src={"data:image/png;base64," + document.thumbnail}
|
|
alt="" />
|
|
}
|
|
|
|
<div
|
|
className='flex items-center justify-between w-full text-xs rounded-sm cursor-pointer text-slate-100'>
|
|
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]'>{document.name}</p>
|
|
<MdKeyboardArrowDown className={`${(dropDownTogglePage === 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{
|
|
dropDownTogglePage === 'pageDropDown' + indx &&
|
|
<div className="my-1 flex justify-center items-center gap-2 flex-wrap">
|
|
{/* Prev Button */}
|
|
<a
|
|
href={"#" + document.id + (currentPage - 1)}
|
|
className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
|
|
}`}
|
|
onClick={(e) => {
|
|
if (currentPage === 0) e.preventDefault();
|
|
else setCurrentPage(currentPage - 1);
|
|
}}
|
|
>
|
|
<GrFormPrevious />
|
|
</a>
|
|
|
|
{/* Page Selector */}
|
|
<select
|
|
className="w-[58px] py-1 text-xs text-slate-400 outline-none"
|
|
value={currentPage}
|
|
onChange={(e) => {
|
|
const newPage = Number(e.target.value);
|
|
setCurrentPage(newPage);
|
|
window.location.hash = document.id +""+ newPage;
|
|
}}
|
|
>
|
|
{document.pages != undefined && document.pages.map((_, pageIndex) => (
|
|
<option key={pageIndex} value={pageIndex}>
|
|
{pageIndex + 1}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<span className="text-xs text-slate-600">
|
|
/ {document.pages?.length}
|
|
</span>
|
|
|
|
{/* Next Button */}
|
|
<a
|
|
href={"#" + document.id + (currentPage + 1)}
|
|
className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
|
|
}`}
|
|
onClick={(e) => {
|
|
if (currentPage === document.pages?.length - 1) e.preventDefault();
|
|
else setCurrentPage(currentPage + 1);
|
|
}}
|
|
>
|
|
<MdOutlineNavigateNext />
|
|
</a>
|
|
</div>
|
|
}
|
|
|
|
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
{/* Pages - END */}
|
|
</>}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div >
|
|
}
|
|
|
|
{/* Left Side Bar - END */}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default LeftSideBar |