335 lines
18 KiB
TypeScript
335 lines
18 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';
|
|
import { LuTableOfContents } from 'react-icons/lu';
|
|
import { IoIosDocument, IoMdClose } from 'react-icons/io';
|
|
import { FaAngleUp, FaChevronRight } from 'react-icons/fa';
|
|
|
|
interface LeftSideBarProps {
|
|
isFields: boolean;
|
|
isPages: boolean;
|
|
selectedRecipientIndx: number;
|
|
setSelectedRecipient: React.Dispatch<React.SetStateAction<number>>
|
|
handleSetIsFields: (setTo: boolean) => void;
|
|
handleSetIsPages: (setTo: boolean) => void;
|
|
}
|
|
|
|
const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, isPages, selectedRecipientIndx, setSelectedRecipient, handleSetIsFields, handleSetIsPages }) => {
|
|
|
|
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())
|
|
}
|
|
}, [])
|
|
|
|
|
|
useEffect(() => {
|
|
if (selectedRecipient && selectedRecipient.type == recipientType.CC) {
|
|
for (const [indx, recip] of selectedRecipients.entries()) {
|
|
if (recip.type != recipientType.CC) {
|
|
setSelectedRecipient(indx);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
}, [selectedRecipient])
|
|
|
|
if (selectedRecipient && selectedRecipient.type == recipientType.CC) {
|
|
return <div className='col-span-2 bg-white h-full p-4 overflow-y-auto'></div>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Left Side Bar - START */}
|
|
{
|
|
(isPages || isFields) && <div className={`sm:block p-4 absolute top-[48px] sm:top-[0] rounded-tr-md z-50 sm:relative sm:col-span-2 bg-white border-t-1 border-r-1 border-slate-300 h-[calc(100vh-40px)] overflow-y-auto`}>
|
|
<div
|
|
onClick={() => {
|
|
handleSetIsPages(false)
|
|
handleSetIsFields(false)
|
|
}}
|
|
className='absolute top-[5px] right-[5px] bg-white rounded-full'>
|
|
<IoMdClose />
|
|
</div>
|
|
|
|
<div className='hidden sm:flex flex-col md:flex-row justify-between items-center bg-slate-100 p-1.5 rounded-2xl border-1 border-gray-200 mb-3'>
|
|
<div
|
|
onClick={() => handleSetIsFields(!isFields)}
|
|
className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isFields ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
|
|
<LuTableOfContents />
|
|
<p className='tracking-wide'>Tags</p>
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => handleSetIsPages(!isPages)}
|
|
className={`flex items-center gap-1 cursor-pointer text-xs w-full justify-center py-1.5 rounded-2xl ${isPages ? 'bg-[var(--primary)] text-white' : ''} transition-all duration-300`}>
|
|
<IoIosDocument />
|
|
<p className='tracking-wide'>Pages</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{selectedRecipients.length > 0 && 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 */}
|
|
</>}
|
|
|
|
{isPages && <>
|
|
{/* 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 */}
|
|
|
|
{/* Small Devices - START */}
|
|
|
|
|
|
<div>
|
|
|
|
{/* Left Side Pages */}
|
|
{!isPages && <div
|
|
onClick={() => {
|
|
handleSetIsPages(true)
|
|
handleSetIsFields(false)
|
|
}}
|
|
className='sm:hidden fixed top-[8%] left-0 bg-[var(--primary)] z-50 flex items-center text-white rounded-tr-md rounded-br-md cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'>
|
|
<div className='py-2'>
|
|
<FaAngleUp className='rotate-90' />
|
|
<p className='flex flex-col justify-center items-center text-xs tracking-widest mt-1 pt-1 border-t-1 border-white'>
|
|
<span>P</span>
|
|
<span>A</span>
|
|
<span>G</span>
|
|
<span>E</span>
|
|
<span>S</span>
|
|
</p>
|
|
</div>
|
|
</div>}
|
|
|
|
|
|
<div
|
|
className='sm:hidden fixed bottom-0 left-0 rounded-tr-md rounded-tl-md bg-[var(--primary)] z-50 w-full flex justify-center text-white cursor-pointer opacity-30 hover:opacity-100 transition-all duration-300'
|
|
onClick={() => {
|
|
handleSetIsPages(false)
|
|
handleSetIsFields(true)
|
|
}}
|
|
>
|
|
<div className='flex'>
|
|
<FaAngleUp />
|
|
<p className='flex justify-center items-center text-xs tracking-widest ml-1 pl-1 border-l-1 border-white'>
|
|
<span>T</span>
|
|
<span>A</span>
|
|
<span>G</span>
|
|
<span>S</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
{/* Small Devices - END */}
|
|
|
|
|
|
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default LeftSideBar |