144 lines
4.9 KiB
TypeScript
144 lines
4.9 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import fields from '../../../helper/fieldsListData';
|
|
// import api from '../../../config/api';
|
|
import { useParams } from 'react-router-dom';
|
|
import typeToIconMap from '../../../helper/iconMap';
|
|
import { FaQuestionCircle } from 'react-icons/fa';
|
|
import { TagsProperties, TagsTypes } from '../../../utlity/types';
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import axios from 'axios';
|
|
|
|
const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string, recipientId: number, recipientIndx: number, tagsProperties: TagsProperties) => {
|
|
const dragElemRect = event.currentTarget.getBoundingClientRect();
|
|
let width = dragElemRect.width
|
|
let height = dragElemRect.height
|
|
|
|
if (label === TagsTypes.RADIO || label === TagsTypes.CHECKBOX) {
|
|
const innerIconConRect = event.currentTarget.children[0].getBoundingClientRect();
|
|
width = innerIconConRect.width + 10
|
|
height = innerIconConRect.height + 10
|
|
}
|
|
|
|
// Handling Initia Width and height of Some tags - START
|
|
if (label === TagsTypes.STAMP) {
|
|
width = 160
|
|
height = 160
|
|
} else if (label === TagsTypes.SIGNATURE) {
|
|
width = 200
|
|
height = 75
|
|
} else if (label === TagsTypes.INITIALS) {
|
|
width = 85
|
|
height = 75
|
|
}
|
|
// Handling Initia Width and height of Some tags - END
|
|
|
|
const offsetX = event.clientX - dragElemRect.left;
|
|
const offsetY = event.clientY - dragElemRect.top;
|
|
|
|
const obj = {
|
|
label,
|
|
offsetX,
|
|
offsetY,
|
|
recipientId: recipientId,
|
|
recipientIndx: recipientIndx,
|
|
width,
|
|
height,
|
|
properties: tagsProperties
|
|
}
|
|
|
|
if (obj.label.toLowerCase() === "radio" || obj.label.toLowerCase() === "checkbox") obj.group = uuidv4();
|
|
|
|
window.dragElemData = JSON.stringify(obj);
|
|
}
|
|
|
|
interface FieldListProps {
|
|
color: string;
|
|
recipientId: number;
|
|
recipientIndx: number;
|
|
acntId?: string | null;
|
|
}
|
|
|
|
const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx, acntId = null }) => {
|
|
|
|
const [tagsData, setTagsData] = useState<TagsProperties[]>([]);
|
|
|
|
let { accountId } = useParams<{ accountId: string }>();
|
|
|
|
if (acntId) {
|
|
accountId = acntId;
|
|
}
|
|
|
|
if (!accountId) {
|
|
window.location.href = "/";
|
|
return null;
|
|
}
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get(`${import.meta.env.VITE_BASE_URI}/api/accounts/${accountId}/tags`, {
|
|
headers: {
|
|
"ngrok-skip-browser-warning": "69420",
|
|
}
|
|
})
|
|
.then((res) => {
|
|
const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
|
|
|
|
const data = res.data;
|
|
|
|
// Separate prioritized and other tags
|
|
const prioritized = data.filter((tag: any) =>
|
|
priorityOrder.includes(tag.type)
|
|
);
|
|
|
|
const others = data
|
|
.filter((tag: any) => !priorityOrder.includes(tag.type))
|
|
.sort((a: any, b: any) => a.type.localeCompare(b.type));
|
|
|
|
// Maintain the custom order of priority
|
|
const prioritizedSorted = priorityOrder
|
|
.map((type) => prioritized.find((tag: any) => tag.type === type))
|
|
.filter(Boolean); // remove undefined in case not found
|
|
|
|
setTagsData([...prioritizedSorted, ...others]);
|
|
})
|
|
.catch((err) => {
|
|
console.error(err.message);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
{tagsData.map((field, index) => {
|
|
|
|
const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
|
|
// Optional: skip unknown types
|
|
if (!IconComponent) return null;
|
|
|
|
return (
|
|
// <div key={index} draggable={true} onDragStart={(e) => handleDragStart(e, field.label, recipientId)} className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300">
|
|
<div
|
|
draggable={true}
|
|
key={index}
|
|
onPointerDown={(e) => handlePointerDown(e, field.type.toLowerCase(), recipientId, recipientIndx, field)}
|
|
className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300">
|
|
<div
|
|
className={`p-1 text-sm rounded-sm text-white`}
|
|
style={{ background: color }}>
|
|
{IconComponent}
|
|
</div>
|
|
<p
|
|
className="capitalize text-xs">
|
|
{field.type.toLowerCase()}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FieldList;
|