chnages
This commit is contained in:
parent
faa4839fef
commit
79b121c25b
|
|
@ -1,63 +1,119 @@
|
|||
import React, { useRef, useState } from 'react';
|
||||
import { FaSpinner } from 'react-icons/fa';
|
||||
|
||||
export type ActionType = 'create' | 'invite';
|
||||
|
||||
type CreateData = { accountName: string };
|
||||
type InviteData = { i_accountName: string; email: string; role: string };
|
||||
type InviteData = { i_accountName: number; email: string; role: string };
|
||||
|
||||
type FormDataType = CreateData | InviteData;
|
||||
export type FormDataType = CreateData | InviteData;
|
||||
|
||||
interface AccountOption {
|
||||
userId: number;
|
||||
userEmail: string;
|
||||
accountId: number;
|
||||
accountName: string;
|
||||
role: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
onSubmit: (data: FormDataType, action: ActionType) => void;
|
||||
createAndInviteLoader: boolean;
|
||||
accountOptions: AccountOption[];
|
||||
accountOptionsLoading: boolean;
|
||||
}
|
||||
|
||||
const CreateAndInvite = ({ onSubmit }: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const CreateAndInvite = ({
|
||||
onSubmit,
|
||||
createAndInviteLoader,
|
||||
accountOptions,
|
||||
accountOptionsLoading
|
||||
}: Props) => {
|
||||
const [isRoleDropdownOpen, setIsRoleDropdownOpen] = useState(false);
|
||||
const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false);
|
||||
const roleDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const accountDropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [createFormData, setCreateFormData] = useState<{ accountName: string }>({
|
||||
accountName: '',
|
||||
});
|
||||
|
||||
const [accountSearchTerm, setAccountSearchTerm] = useState('');
|
||||
const [selectedAccount, setSelectedAccount] = useState<AccountOption | null>(null);
|
||||
|
||||
const [inviteFormData, setInviteFormData] = useState<{
|
||||
i_accountName: string;
|
||||
i_accountName: number;
|
||||
email: string;
|
||||
role: string;
|
||||
}>({
|
||||
i_accountName: '',
|
||||
i_accountName: 0,
|
||||
email: '',
|
||||
role: '',
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<{ [key: string]: string }>({});
|
||||
const roles = ['ADMIN', 'EDITOR', 'VIEWER'];
|
||||
|
||||
const roles = ['Owner', 'Client'];
|
||||
// Handle role dropdown
|
||||
const handleRoleDropdownFocus = () => setIsRoleDropdownOpen(true);
|
||||
|
||||
const handleFocus = () => setIsOpen(true);
|
||||
|
||||
const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
const handleRoleDropdownBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
setTimeout(() => {
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(activeElement)) {
|
||||
setIsOpen(false);
|
||||
if (roleDropdownRef.current && !roleDropdownRef.current.contains(activeElement)) {
|
||||
setIsRoleDropdownOpen(false);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const handleSelect = (role: string) => {
|
||||
const handleRoleSelect = (role: string) => {
|
||||
setInviteFormData((prev) => ({ ...prev, role }));
|
||||
setIsOpen(false);
|
||||
setIsRoleDropdownOpen(false);
|
||||
};
|
||||
|
||||
// Handle account dropdown
|
||||
const handleAccountDropdownFocus = () => setIsAccountDropdownOpen(true);
|
||||
|
||||
const handleAccountDropdownBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
setTimeout(() => {
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
if (accountDropdownRef.current && !accountDropdownRef.current.contains(activeElement)) {
|
||||
setIsAccountDropdownOpen(false);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const handleAccountSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setAccountSearchTerm(value);
|
||||
|
||||
// Clear selected account if user is typing
|
||||
if (selectedAccount && value !== selectedAccount.accountName) {
|
||||
setSelectedAccount(null);
|
||||
setInviteFormData((prev) => ({ ...prev, i_accountName: 0 }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccountSelect = (option: AccountOption) => {
|
||||
setSelectedAccount(option);
|
||||
setAccountSearchTerm(option.accountName);
|
||||
setInviteFormData((prev) => ({ ...prev, i_accountName: option.accountId }));
|
||||
setIsAccountDropdownOpen(false);
|
||||
|
||||
// Clear any existing account name error
|
||||
if (errors.i_accountName) {
|
||||
setErrors(prev => ({ ...prev, i_accountName: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle create form
|
||||
const handleCreateChange = (value: string) => {
|
||||
setCreateFormData({ accountName: value });
|
||||
};
|
||||
|
||||
const handleInviteChange = (
|
||||
field: keyof typeof inviteFormData,
|
||||
value: string
|
||||
) => {
|
||||
setInviteFormData((prev) => ({ ...prev, [field]: value }));
|
||||
// Clear error when user starts typing
|
||||
if (errors.accountName) {
|
||||
setErrors(prev => ({ ...prev, accountName: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateSubmit = () => {
|
||||
|
|
@ -69,11 +125,20 @@ const CreateAndInvite = ({ onSubmit }: Props) => {
|
|||
onSubmit(createFormData, 'create');
|
||||
};
|
||||
|
||||
// Handle invite form
|
||||
const handleInviteChange = (field: keyof typeof inviteFormData, value: string) => {
|
||||
setInviteFormData((prev) => ({ ...prev, [field]: value }));
|
||||
// Clear error when user starts typing
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleInviteSubmit = () => {
|
||||
const { i_accountName, email, role } = inviteFormData;
|
||||
const errs: { [key: string]: string } = {};
|
||||
|
||||
if (!i_accountName.trim()) errs.i_accountName = 'Account name is required';
|
||||
if (!i_accountName) errs.i_accountName = 'Account name is required';
|
||||
if (!email.trim()) errs.email = 'Email is required';
|
||||
else if (!/\S+@\S+\.\S+/.test(email)) errs.email = 'Invalid email';
|
||||
if (!role.trim()) errs.role = 'Role is required';
|
||||
|
|
@ -87,9 +152,14 @@ const CreateAndInvite = ({ onSubmit }: Props) => {
|
|||
onSubmit(inviteFormData, 'invite');
|
||||
};
|
||||
|
||||
// Filter account options based on search term
|
||||
const filteredAccountOptions = accountOptions.filter((option) =>
|
||||
option.accountName?.toLowerCase().includes(accountSearchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="mt-3 space-y-3">
|
||||
{/* Create */}
|
||||
<div className="ms-2 space-y-3">
|
||||
{/* Create Section */}
|
||||
<section className="border-gray-200 border-b">
|
||||
<h2 className="text-lg font-medium mb-2 text-slate-500">Create Account</h2>
|
||||
<div className="flex flex-col mb-6">
|
||||
|
|
@ -107,9 +177,17 @@ const CreateAndInvite = ({ onSubmit }: Props) => {
|
|||
<button
|
||||
type="button"
|
||||
onClick={handleCreateSubmit}
|
||||
className="ms-1 text-[14px] px-3 py-[1.1] bg-gray-300 text-slate-600 font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer"
|
||||
className="ms-1 flex items-center text-[14px] px-3 py-[1.1] bg-gray-300 text-slate-600 font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
disabled={createAndInviteLoader}
|
||||
>
|
||||
Create
|
||||
{createAndInviteLoader ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin me-1" />
|
||||
CREATING...
|
||||
</>
|
||||
) : (
|
||||
'CREATE'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.accountName && (
|
||||
|
|
@ -118,22 +196,62 @@ const CreateAndInvite = ({ onSubmit }: Props) => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Invite */}
|
||||
{/* Invite Section */}
|
||||
<section className="border-gray-300">
|
||||
<h2 className="text-lg font-medium mb-2 text-slate-500">Invite</h2>
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
{/* Account Name */}
|
||||
<div className="flex flex-col">
|
||||
{/* Account Name Dropdown */}
|
||||
<div className="flex flex-col relative">
|
||||
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
|
||||
Account Name
|
||||
</label>
|
||||
<div
|
||||
className="relative w-full"
|
||||
onBlur={handleAccountDropdownBlur}
|
||||
ref={accountDropdownRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter account name"
|
||||
value={inviteFormData.i_accountName}
|
||||
onChange={(e) => handleInviteChange('i_accountName', e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-gray-600 rounded-md border border-gray-400 focus:outline-none focus:ring-1 focus:ring-[var(--primary)]"
|
||||
placeholder={accountOptionsLoading ? "Loading accounts..." : "Select or search account"}
|
||||
value={accountSearchTerm}
|
||||
onChange={handleAccountSearchChange}
|
||||
onFocus={handleAccountDropdownFocus}
|
||||
disabled={accountOptionsLoading}
|
||||
className="w-full px-3 py-1.5 text-gray-600 rounded-md border border-gray-400 focus:outline-none focus:ring-1 focus:ring-[var(--primary)] disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
/>
|
||||
|
||||
{/* Loading indicator */}
|
||||
{accountOptionsLoading && (
|
||||
<div className="absolute right-3 top-1/2 transform -translate-y-1/2">
|
||||
<FaSpinner className="animate-spin text-gray-400 text-sm" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Account Dropdown */}
|
||||
{isAccountDropdownOpen && !accountOptionsLoading && (
|
||||
<div className="absolute w-full bg-white border border-gray-300 rounded-md mt-1 shadow-lg z-10">
|
||||
<ul className="max-h-40 overflow-y-auto">
|
||||
{filteredAccountOptions.length > 0 ? (
|
||||
filteredAccountOptions.map((option) => (
|
||||
<li
|
||||
key={option.accountId}
|
||||
onMouseDown={() => handleAccountSelect(option)}
|
||||
className="px-3 py-2 text-[13px] text-gray-600 hover:bg-gray-100 cursor-pointer"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span>{option.accountName}</span>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li className="px-3 py-2 text-gray-500">No results found</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{errors.i_accountName && (
|
||||
<span className="text-sm text-red-500 mt-1">{errors.i_accountName}</span>
|
||||
)}
|
||||
|
|
@ -163,8 +281,8 @@ const CreateAndInvite = ({ onSubmit }: Props) => {
|
|||
</label>
|
||||
<div
|
||||
className="relative w-full"
|
||||
onBlur={handleBlur}
|
||||
ref={dropdownRef}
|
||||
onBlur={handleRoleDropdownBlur}
|
||||
ref={roleDropdownRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<input
|
||||
|
|
@ -172,40 +290,48 @@ const CreateAndInvite = ({ onSubmit }: Props) => {
|
|||
placeholder="Select role"
|
||||
value={inviteFormData.role}
|
||||
readOnly
|
||||
onFocus={handleFocus}
|
||||
className="w-full px-3 py-1.5 border text-gray-600 border-gray-400 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-[var(--primary)] transition"
|
||||
onFocus={handleRoleDropdownFocus}
|
||||
className="w-full px-3 py-1.5 border text-gray-600 border-gray-400 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-[var(--primary)] transition cursor-pointer"
|
||||
/>
|
||||
<div
|
||||
className={`absolute z-10 w-full bg-white text-slate-500 font-semibold border border-gray-200 rounded-md shadow-lg mt-1 transition-all duration-200 ease-in-out ${
|
||||
isOpen
|
||||
isRoleDropdownOpen
|
||||
? 'opacity-100 scale-100'
|
||||
: 'opacity-0 scale-95 pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
{roles.map((r) => (
|
||||
{roles.map((role) => (
|
||||
<div
|
||||
key={r}
|
||||
onMouseDown={() => handleSelect(r)}
|
||||
className="px-4 py-2 text-[13px] hover:bg-gray-100 cursor-pointer"
|
||||
key={role}
|
||||
onMouseDown={() => handleRoleSelect(role)}
|
||||
className="px-4 py-1 text-[13px] hover:bg-gray-100 cursor-pointer"
|
||||
>
|
||||
{r}
|
||||
{role}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{errors.role && (
|
||||
<span className="text-sm text-red-500 mt-1">{errors.role}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleInviteSubmit}
|
||||
className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gray-300 text-slate-600"
|
||||
className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gray-300 text-slate-600 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
disabled={createAndInviteLoader}
|
||||
>
|
||||
Invite
|
||||
{createAndInviteLoader ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin me-1" />
|
||||
INVITING...
|
||||
</>
|
||||
) : (
|
||||
'INVITE'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import Language from "./Language";
|
|||
import CreateAndInvite, { ActionType, FormDataType } from './CreateAndInvite'
|
||||
import AsideSection from "./AsideSection";
|
||||
import Signature from "./Signature/Signature";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
|
||||
// Define the shape of state object
|
||||
interface Account {
|
||||
|
|
@ -30,6 +31,15 @@ interface SubSection {
|
|||
component?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface AccountOption {
|
||||
userId: number;
|
||||
userEmail: string;
|
||||
accountId: number;
|
||||
accountName: string;
|
||||
role: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
const Setting = () => {
|
||||
const { page1 } = useParams<{ page1: string }>();
|
||||
const location = useLocation();
|
||||
|
|
@ -54,6 +64,12 @@ const Setting = () => {
|
|||
},
|
||||
});
|
||||
|
||||
const [createAndInviteLoader, setCreateAndInviteLoader] = useState(false);
|
||||
|
||||
// Dropdown data states
|
||||
const [accountOptions, setAccountOptions] = useState<AccountOption[]>([]);
|
||||
const [accountOptionsLoading, setAccountOptionsLoading] = useState(false);
|
||||
|
||||
// Define subsections for each main tab
|
||||
const getSubSections = (tabId: string): SubSection[] => {
|
||||
switch (tabId) {
|
||||
|
|
@ -62,16 +78,6 @@ const Setting = () => {
|
|||
{ id: "profile-info", label: "Profile Information" },
|
||||
{ id: "signature", label: "Signature" },
|
||||
];
|
||||
// case "create and invite":
|
||||
// return [
|
||||
// { id: "create-account", label: "Create Account" },
|
||||
// { id: "invite-users", label: "Invite Users" },
|
||||
// { id: "manage-invitations", label: "Manage Invitations" }
|
||||
// ];
|
||||
// return [
|
||||
// { id: "share-options", label: "Share Options" },
|
||||
// { id: "privacy-settings", label: "Privacy Settings" }
|
||||
// ];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
|
|
@ -143,6 +149,21 @@ const Setting = () => {
|
|||
}
|
||||
}, [location.hash, activeTab]);
|
||||
|
||||
// Fetch account list for dropdown
|
||||
const getAccountList = async () => {
|
||||
setAccountOptionsLoading(true);
|
||||
try {
|
||||
const res = await api.get('/api/user/accounts');
|
||||
if (res?.data) {
|
||||
setAccountOptions(res.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching account options:', error);
|
||||
} finally {
|
||||
setAccountOptionsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Render subsection content based on active tab and subsection
|
||||
const renderSubSectionContent = (subSectionId: string) => {
|
||||
switch (activeTab) {
|
||||
|
|
@ -152,7 +173,7 @@ const Setting = () => {
|
|||
return <UserProfile userData={user} />;
|
||||
case "signature":
|
||||
return (
|
||||
<Signature/>
|
||||
<Signature />
|
||||
);
|
||||
default:
|
||||
return;
|
||||
|
|
@ -178,7 +199,14 @@ const Setting = () => {
|
|||
case "language":
|
||||
return <Language userData={user} />;
|
||||
case "create and invite":
|
||||
return <CreateAndInvite onSubmit={handleSubmit} />;
|
||||
return (
|
||||
<CreateAndInvite
|
||||
onSubmit={handleSubmit}
|
||||
createAndInviteLoader={createAndInviteLoader}
|
||||
accountOptions={accountOptions}
|
||||
accountOptionsLoading={accountOptionsLoading}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <div className="bg-white p-6 rounded-lg shadow-sm">Coming Soon...</div>;
|
||||
}
|
||||
|
|
@ -221,6 +249,8 @@ const Setting = () => {
|
|||
|
||||
useEffect(() => {
|
||||
getUserDetails()
|
||||
// Fetch account list when component mounts
|
||||
getAccountList()
|
||||
}, [])
|
||||
|
||||
// Set initial subsection when component mounts or activeTab changes
|
||||
|
|
@ -255,14 +285,51 @@ const Setting = () => {
|
|||
}, [activeSubSection]);
|
||||
|
||||
const handleSubmit = async (data: FormDataType, action: ActionType) => {
|
||||
setCreateAndInviteLoader(true)
|
||||
try {
|
||||
let res;
|
||||
let toastMesaage ;
|
||||
if (action === 'create') {
|
||||
console.log('Creating account:', data);
|
||||
const payloadAccount = {
|
||||
name: data.accountName
|
||||
}
|
||||
res = await api.post(`/api/user/accounts`, payloadAccount)
|
||||
console.log("resAccountName", res)
|
||||
if (res.status === 201) {
|
||||
toastMesaage = `${action.toUpperCase()} Created Successfull...!`
|
||||
}
|
||||
} else if (action === 'invite') {
|
||||
console.log('Inviting user:', data);
|
||||
const payloadInvite = {
|
||||
email: data.email,
|
||||
role: data.role
|
||||
}
|
||||
res = await api.post(`/api/accounts/${data.i_accountName}/invite`, payloadInvite)
|
||||
console.log("InviteNAme",res)
|
||||
toastMesaage = "Invite Successfull...!"
|
||||
}
|
||||
|
||||
if (res?.data) {
|
||||
toast.success(toastMesaage, {
|
||||
position: "top-center",
|
||||
autoClose: 1500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
|
||||
// Refetch account list after successful submission
|
||||
await getAccountList();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Submission error:', err);
|
||||
} finally {
|
||||
setCreateAndInviteLoader(false)
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -279,8 +346,7 @@ const Setting = () => {
|
|||
key={tab.id}
|
||||
onClick={() => handleMainTabClick(tab.id)}
|
||||
className={`cursor-pointer relative pb-3 text-sm font-medium transition-all duration-200
|
||||
${
|
||||
activeTab === tab.id
|
||||
${activeTab === tab.id
|
||||
? "text-blue-600 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-blue-600"
|
||||
: "text-gray-600 hover:text-blue-500"
|
||||
}`}
|
||||
|
|
@ -306,7 +372,7 @@ const Setting = () => {
|
|||
/>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
{/* Scrollable Main Content */}
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
// import { X, Upload, Edit3, Image, Cloud, HardDrive, Droplets } from 'lucide-react';
|
||||
import { AiOutlineClose, AiOutlineUpload, AiOutlineEdit } from 'react-icons/ai';
|
||||
import { MdImage, MdCloudUpload } from 'react-icons/md';
|
||||
import api from '../../../config/api';
|
||||
import DrawSignatureCanvas from './DrawSignatureCanvas';
|
||||
|
||||
import { FaSpinner } from "react-icons/fa";
|
||||
import { GrCheckboxSelected } from "react-icons/gr";
|
||||
|
||||
interface AddSignatureModalProps {
|
||||
setShowAddSignature?: (value: boolean) => void;
|
||||
getAllSignatures: () => Promise<void>;
|
||||
}
|
||||
interface Account {
|
||||
id: number;
|
||||
|
|
@ -24,23 +25,19 @@ interface UserData {
|
|||
account: Account;
|
||||
}
|
||||
|
||||
const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignature }) => {
|
||||
const [activeTab, setActiveTab] = useState<'choose' | 'draw' | 'upload'>('choose');
|
||||
interface SelectStyle {
|
||||
id: number,
|
||||
style: string
|
||||
}
|
||||
const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignature , getAllSignatures }) => {
|
||||
const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [initials, setInitials] = useState('');
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||
const [signatures, setSignatures] = useState<{
|
||||
fullSignature: string | null;
|
||||
initials: string | null;
|
||||
}>({ fullSignature: null, initials: null });
|
||||
|
||||
const handleSignatureChange = (data: { fullSignature: string | null; initials: string | null }) => {
|
||||
setSignatures(data);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// Sample signature options for the CHOOSE tab
|
||||
const signatureOptions = [
|
||||
{ id: 1, name: 'print', initials: 'LA', style: 'print' },
|
||||
{ id: 2, name: 'cursive', initials: 'LA', style: 'cursive' },
|
||||
|
|
@ -49,10 +46,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
{ id: 5, name: 'modern', initials: 'LA', style: 'modern' },
|
||||
{ id: 6, name: 'classic', initials: 'LA', style: 'classic' },
|
||||
];
|
||||
|
||||
const [selectedSignature, setSelectedSignature] = useState<number>(1);
|
||||
console.log(selectedSignature);
|
||||
|
||||
const [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
|
||||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
||||
// Store the actual file
|
||||
const [file1, setFile1] = useState<File | null>(null);
|
||||
|
|
@ -75,13 +71,22 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
// Navigation items
|
||||
const navigationItems = [
|
||||
{ id: 'choose', label: 'Choose', icon: <MdImage className="w-5 h-5" /> },
|
||||
{ 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: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
|
||||
{ id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
|
||||
];
|
||||
console.log("signatures", signatures)
|
||||
const handleSignatureChange = (data: { fullSignature: string | null; initials: string | null }) => {
|
||||
setSignatures(data);
|
||||
};
|
||||
console.log("activeTab", activeTab)
|
||||
console.log("selectedSignature", selectedSignature);
|
||||
|
||||
console.log('file1', file1)
|
||||
console.log("file1", file2)
|
||||
|
||||
|
||||
// Cleanup preview URLs when component unmounts or image changes
|
||||
useEffect(() => {
|
||||
|
|
@ -91,55 +96,73 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
};
|
||||
}, [preview1, preview2]);
|
||||
|
||||
const handleImageChange = (
|
||||
const handleImageChange = async (
|
||||
e: React.ChangeEvent<HTMLInputElement>,
|
||||
setFile: React.Dispatch<React.SetStateAction<File | null>>,
|
||||
setPreview: React.Dispatch<React.SetStateAction<string | null>>
|
||||
setPreview: React.Dispatch<React.SetStateAction<string | null>>,
|
||||
type: "fullSignature" | "initials"
|
||||
) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setFile(file);
|
||||
const previewUrl = URL.createObjectURL(file);
|
||||
setPreview(previewUrl);
|
||||
|
||||
// Convert to base64
|
||||
const base64 = await convertToBase64(file);
|
||||
|
||||
// Update the appropriate signature
|
||||
setSignatures((prev) => ({
|
||||
...prev,
|
||||
[type]: base64,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const convertToBase64 = (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true)
|
||||
if (!signatures.fullSignature || !signatures.initials) {
|
||||
alert('Please provide both signature and initials');
|
||||
return;
|
||||
}
|
||||
|
||||
// Example: Posting the base64 data
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
signatureType: "DRAW",
|
||||
signatureType: activeTab,
|
||||
// "signatureId": 0, this work on only the put req.
|
||||
signatureBase64: signatures.fullSignature,
|
||||
initialsBase64: signatures.initials,
|
||||
firstName: user.firstName,
|
||||
lastName: user.lastName,
|
||||
font: ""
|
||||
font: selectedSignature.style
|
||||
};
|
||||
|
||||
console.log('Submitting Signature:', payload);
|
||||
let res = await api.post(`/api/user/signatures`,payload)
|
||||
let res = await api.post(`/api/user/signatures`, payload)
|
||||
console.log("handleSubmit", res)
|
||||
if (res?.data) {
|
||||
getAllSignatures()
|
||||
setShowAddSignature?.(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// fetch('/api/signature', { method: 'POST', body: JSON.stringify(payload) })
|
||||
};
|
||||
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case 'choose':
|
||||
case 'SELECT':
|
||||
return (
|
||||
<div className="h-full flex flex-col ">
|
||||
<div className="mb-6">
|
||||
|
|
@ -155,8 +178,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
type="radio"
|
||||
id={`signature-${option.id}`}
|
||||
name="signature"
|
||||
checked={selectedSignature === option.id}
|
||||
onChange={() => setSelectedSignature(option.id)}
|
||||
checked={selectedSignature.id === option.id}
|
||||
onChange={() => setSelectedSignature({ id: option.id, style: option.style })}
|
||||
className="w-4 h-4 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
<div className="flex-1 grid grid-cols-2 gap-2">
|
||||
|
|
@ -193,12 +216,12 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
</div>
|
||||
);
|
||||
|
||||
case 'draw':
|
||||
case 'DRAW':
|
||||
return (
|
||||
<DrawSignatureCanvas onSignatureChange={handleSignatureChange} />
|
||||
);
|
||||
|
||||
case 'upload':
|
||||
case 'UPLOAD':
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="mb-6">
|
||||
|
|
@ -210,7 +233,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
{/* Upload 1 */}
|
||||
<div className="col-span-8">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label>
|
||||
<label htmlFor="upload1" className=" border-2 border-dashed border-gray-300 rounded-lg h-48 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
<label htmlFor="upload1" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
{preview1 ? (
|
||||
<img src={preview1} alt="Signature Preview" className="max-h-44 object-contain" />
|
||||
) : (
|
||||
|
|
@ -226,19 +249,19 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => handleImageChange(e, setFile1, setPreview1)}
|
||||
onChange={(e) => handleImageChange(e, setFile1, setPreview1, "fullSignature")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Upload 2 */}
|
||||
<div className="col-span-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Initials</label>
|
||||
<label htmlFor="upload2" className=" border-2 border-dashed border-gray-300 rounded-lg h-48 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
<label htmlFor="upload2" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
{preview2 ? (
|
||||
<img src={preview2} alt="Initials Preview" className="max-h-44 object-contain" />
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<MdImage className="mx-auto h-8 w-8 text-gray-400 mb-2" />
|
||||
<MdCloudUpload className="mx-auto h-8 w-8 text-gray-400 mb-2" />
|
||||
<p className="text-xs text-gray-500">Upload initials</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -248,7 +271,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => handleImageChange(e, setFile2, setPreview2)}
|
||||
onChange={(e) => handleImageChange(e, setFile2, setPreview2, "initials")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -332,8 +355,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
{navigationItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActiveTab(item.id as 'choose' | 'draw' | 'upload')}
|
||||
className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg transition-colors ${activeTab === item.id
|
||||
onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
|
||||
className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id
|
||||
? 'bg-blue-50 text-blue-700 border border-blue-200'
|
||||
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
|
|
@ -356,25 +379,37 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({ setShowAddSignatu
|
|||
|
||||
{/* Content */}
|
||||
<div className="flex-1 py-5 px-5 overflow-hidden ">
|
||||
<button
|
||||
{/* <button
|
||||
onClick={() => setShowAddSignature?.(false)}
|
||||
className="absolute top-2 right-3 p-2 hover:bg-gray-100 rounded-full transition-colors z-20"
|
||||
>
|
||||
<AiOutlineClose className="w-5 h-5 text-gray-500" />
|
||||
</button>
|
||||
</button> */}
|
||||
{renderContent()}
|
||||
</div>
|
||||
|
||||
{/* Footer Buttons in Main Area */}
|
||||
<div className="p-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<button
|
||||
className="px-4 py-2 text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
onClick={() => setShowAddSignature?.(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
<button className="px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors" onClick={handleSubmit}>
|
||||
CREATE SIGNATURE
|
||||
<button
|
||||
className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin" />
|
||||
CREATING...
|
||||
</>
|
||||
) : (
|
||||
"CREATE SIGNATURE"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
|
|||
import { FiEdit3, FiTrash2, FiPlus, FiMoreVertical } from 'react-icons/fi';
|
||||
import AddSignatureModal from './AddSignatureModal';
|
||||
import api from '../../../config/api';
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import { FaSpinner } from 'react-icons/fa';
|
||||
|
||||
interface Signature {
|
||||
id: string;
|
||||
|
|
@ -10,39 +12,23 @@ interface Signature {
|
|||
lastName: string;
|
||||
firstName: string
|
||||
font: string;
|
||||
initialsBlob:string;
|
||||
initialsStampedBlob:string;
|
||||
initialsHash:string;
|
||||
signatureHash:string;
|
||||
signatureBlob:string;
|
||||
signatureStampedBlob:string;
|
||||
default:boolean
|
||||
initialsBlob: string;
|
||||
initialsStampedBlob: string;
|
||||
initialsHash: string;
|
||||
signatureHash: string;
|
||||
signatureBlob: string;
|
||||
signatureStampedBlob: string;
|
||||
default: boolean
|
||||
}
|
||||
|
||||
const SignatureManager: React.FC = () => {
|
||||
|
||||
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [signatures, setSignatures] = useState<Signature[]>([]);
|
||||
|
||||
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
|
||||
const [showAddSignature, setShowAddSignature] = useState<boolean>(false)
|
||||
|
||||
const handleEdit = (id: string) => {
|
||||
console.log('Edit signature:', id);
|
||||
setActiveDropdown(null);
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
setSignatures(signatures.filter(sig => sig.id !== id));
|
||||
setActiveDropdown(null);
|
||||
};
|
||||
|
||||
const toggleDropdown = (id: string) => {
|
||||
setActiveDropdown(activeDropdown === id ? null : id);
|
||||
};
|
||||
|
||||
const getAllSignatures = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
let res = await api.get("/api/user/signatures")
|
||||
console.log("getAllSignatures", res.data)
|
||||
|
|
@ -50,6 +36,8 @@ const SignatureManager: React.FC = () => {
|
|||
setSignatures(signatureData)
|
||||
} catch (error) {
|
||||
console.log("getAllSignatures", error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,9 +45,57 @@ const SignatureManager: React.FC = () => {
|
|||
getAllSignatures()
|
||||
}, [])
|
||||
|
||||
const handleEdit = (id: string) => {
|
||||
console.log('Edit signature:', id);
|
||||
setActiveDropdown(null);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!id) return;
|
||||
setLoading(true)
|
||||
try {
|
||||
let res = await api.delete(`/api/user/signatures/${id}`)
|
||||
console.log(res.data)
|
||||
toast.success("Signature Delete Successfull", {
|
||||
position: "top-center",
|
||||
autoClose: 500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
await getAllSignatures();
|
||||
} catch (error) {
|
||||
console.log("delete signature", error)
|
||||
} finally {
|
||||
setActiveDropdown(null);
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const toggleDropdown = (id: string) => {
|
||||
setActiveDropdown(activeDropdown === id ? null : id);
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading ? <div className=' flex items-center justify-center'>
|
||||
<div className="p-12 text-center mt-8">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<FaSpinner className="w-20 h-20 mx-auto animate-spin" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">Loading...</h3>
|
||||
</div>
|
||||
</div> :
|
||||
<div className="min-h-screen bg-white p-3 rounded-md px-4 mb-6">
|
||||
<div className="max-w-[84vw] mx-auto">
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
|
|
@ -92,7 +128,7 @@ const SignatureManager: React.FC = () => {
|
|||
{/* Table Body */}
|
||||
<div className="divide-y divide-gray-100">
|
||||
{signatures.map((signature, index) => (
|
||||
<div key={signature.id} className="grid grid-cols-12 gap-4 px-6 py-6 hover:bg-gray-50 transition-colors duration-150">
|
||||
<div key={signature.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150">
|
||||
{/* Signature Column */}
|
||||
<div className="col-span-5">
|
||||
<div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
|
||||
|
|
@ -185,6 +221,7 @@ const SignatureManager: React.FC = () => {
|
|||
<p className="text-gray-500 mb-6">Create your first signature to get started.</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
|
||||
{/* Click outside to close dropdown */}
|
||||
|
|
@ -196,9 +233,10 @@ const SignatureManager: React.FC = () => {
|
|||
)}
|
||||
|
||||
{showAddSignature && (
|
||||
<AddSignatureModal setShowAddSignature={setShowAddSignature} />
|
||||
<AddSignatureModal setShowAddSignature={setShowAddSignature} getAllSignatures={getAllSignatures} />
|
||||
)}
|
||||
</div>
|
||||
}</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue