653 lines
29 KiB
TypeScript
653 lines
29 KiB
TypeScript
import { MdKeyboardArrowDown } from "react-icons/md";
|
|
import { DroppedItemsObj } from "./DocumentContainer";
|
|
import React, { ReactHTMLElement, useEffect, useState } from "react";
|
|
|
|
|
|
import { RiAsterisk } from "react-icons/ri";
|
|
import { GoDotFill } from "react-icons/go";
|
|
import { IoClose } from "react-icons/io5";
|
|
import { LuAsterisk } from "react-icons/lu";
|
|
import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../utlity/dateTimeUtils";
|
|
import { DroppedItem } from "../../../utlity/types";
|
|
import { IoMdClose } from "react-icons/io";
|
|
import dayjs from "dayjs";
|
|
|
|
interface DroppedItemProps {
|
|
selectedTag: DroppedItem
|
|
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
|
|
selTagKey: string,
|
|
selTagIndx: number
|
|
}
|
|
|
|
enum TEXT {
|
|
PARAGRAPH = "paragraph",
|
|
SINGLE_LINE = "single_line",
|
|
PASSWORD = "password",
|
|
}
|
|
// enum SIGNATURE {
|
|
// TYPED = "typed",
|
|
// DRAW = "draw",
|
|
// UPLOAD = "upload",
|
|
// }
|
|
// enum INITIALS {
|
|
// TYPED = "typed",
|
|
// DRAW = "draw",
|
|
// UPLOAD = "upload",
|
|
// }
|
|
export enum TEMPORAL {
|
|
DATE = "date",
|
|
TIME = "time",
|
|
DATE_TIME = "date_time",
|
|
// YEAR = "year",
|
|
// MONTH = "month",
|
|
// WEEK = "week",
|
|
}
|
|
|
|
enum NUMBER {
|
|
INTEGER = "integer",
|
|
DECIMAL = "decimal",
|
|
CURRENCY = "currency"
|
|
}
|
|
// enum IMAGE {
|
|
// STAMP = "stamp",
|
|
// LOGO = "logo"
|
|
// }
|
|
|
|
enum SELECT {
|
|
SINGLE_SELECT = "single select",
|
|
MULTI_SELECT = "multi select"
|
|
}
|
|
|
|
|
|
enum MASKTYPE {
|
|
ALL = "all",
|
|
LAST_FOUR = "last_four",
|
|
CREDIT_CARD = "credit_Card",
|
|
NATIONAL_INSURANCE = "national_insurance",
|
|
SOCIAL_SECURITY = "social_security",
|
|
SOCIAL_INSURANCE = "social_insurance"
|
|
}
|
|
|
|
enum MASKCHARACTER {
|
|
ASTERISK = "ASTERISK",
|
|
DOT = "DOT",
|
|
X = "CROSS",
|
|
}
|
|
|
|
const enumMap = {
|
|
text: TEXT,
|
|
temporal: TEMPORAL,
|
|
number: NUMBER,
|
|
image: String,
|
|
select: SELECT
|
|
}
|
|
|
|
enum DROPDOWNTOGGLE {
|
|
TYPE,
|
|
MASK_TYPE,
|
|
MASK_CHARACTER,
|
|
DDMMYY_FORMAT
|
|
}
|
|
|
|
const dateTimeFormatMap = {
|
|
"date": dateFormats,
|
|
"time": timeFormats,
|
|
"date_time": dateTimeFormats,
|
|
"year": yearFormats,
|
|
"month": monthFormats,
|
|
"week": weekFormats
|
|
}
|
|
|
|
const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx }) => {
|
|
console.log(selectedTag, "selectedTag Line 102")
|
|
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
|
|
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
|
|
|
|
// const [showFormatEg, setShowFormatEg] = useState<boolean>(false);
|
|
const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
|
|
const [isCurrentTimeStamp, setIsCurrentTimeStamp] = useState<boolean>(true);
|
|
|
|
// const [selectedOptions, setSelectedOptions] = useState<string[]>([])
|
|
|
|
const [decimalPlace, setDecimalPlace] = useState<number>(2)
|
|
const [selectedOption, setSelectedOption] = useState<string>()
|
|
|
|
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number) => {
|
|
console.log("Handle Property Change Called", "changeTo", changeTo, "changeWith", changeWith)
|
|
if (changeTo === '' || changeWith === '') 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) => (
|
|
{
|
|
...prev,
|
|
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
|
? prev[selTagKey].map((item, i) =>
|
|
i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: "id" in item ? true : false } : item
|
|
)
|
|
: [],
|
|
}// Provide a fallback in case it's undefined or not an array
|
|
));
|
|
} else if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
|
console.log("Line 161")
|
|
setDroppedItems((prev) => (
|
|
{
|
|
...prev,
|
|
[selTagKey]: Array.isArray(prev[selTagKey])
|
|
? prev[selTagKey].map((item, i) =>
|
|
i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: "id" in item ? true : false } : item
|
|
)
|
|
: [],
|
|
}
|
|
));
|
|
}
|
|
else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
|
|
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
|
|
const isCurrency = changeWith === NUMBER.CURRENCY;
|
|
// const currencyType = null
|
|
|
|
setDroppedItems((prev) => (
|
|
{
|
|
...prev,
|
|
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
|
? prev[selTagKey].map((item, i) =>
|
|
i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: "id" in item ? true : false } : item
|
|
)
|
|
: [],
|
|
}// Provide a fallback in case it's undefined or not an array
|
|
));
|
|
|
|
} else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
|
|
let val = timeFormats[0].format;
|
|
if (!is24Hrs) {
|
|
val = timeFormats[1].format
|
|
}
|
|
setDroppedItems((prev) => (
|
|
{
|
|
...prev,
|
|
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
|
? prev[selTagKey].map((item, i) =>
|
|
i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val, update: "id" in item ? true : false } : item
|
|
)
|
|
: [],
|
|
}// Provide a fallback in case it's undefined or not an array
|
|
));
|
|
|
|
} else {
|
|
setDroppedItems((prev) => (
|
|
{
|
|
...prev,
|
|
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
|
? prev[selTagKey].map((item, i) =>
|
|
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: "id" in item ? true : false } : item
|
|
)
|
|
: [],
|
|
}// Provide a fallback in case it's undefined or not an array
|
|
));
|
|
}
|
|
setDropDownToggle(null)
|
|
}
|
|
|
|
// const handleSelectTagOptions = () => {
|
|
// if (!selectedOptions.length) return
|
|
// setDroppedItems((prev) => (
|
|
// {
|
|
// ...prev,
|
|
// [selTagKey]: Array.isArray(prev[selTagKey])
|
|
// ? prev[selTagKey].map((item, i) => {
|
|
// if (i === selTagIndx) {
|
|
// return { ...item, options: [...selectedOptions] };
|
|
// }
|
|
// return item;
|
|
// })
|
|
// : [],
|
|
// }
|
|
// ));
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// handleSelectTagOptions();
|
|
// }, [selectedOptions])
|
|
|
|
|
|
useEffect(() => {
|
|
if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) {
|
|
|
|
if (selectedTag.subType === TEMPORAL.DATE) {
|
|
handlePropertyChange("format", dateFormats[0].format)
|
|
}
|
|
else if (selectedTag.subType === TEMPORAL.DATE_TIME) {
|
|
handlePropertyChange("format", dateTimeFormats[0].format)
|
|
}
|
|
else if (selectedTag.subType === TEMPORAL.TIME) {
|
|
handlePropertyChange("format", timeFormats[0].format)
|
|
}
|
|
}
|
|
// else if(selectedTag.subType === TEXT.PASSWORD) {
|
|
// handlePropertyChange("format", timeFormats[0].format)
|
|
// }
|
|
}, [selectedTag.subType])
|
|
|
|
useEffect(() => {
|
|
if (selectedTag.format === timeFormats[1].format && is24Hrs) {
|
|
setIs24Hrs(false);
|
|
} else if (selectedTag.format === timeFormats[0].format && !is24Hrs) {
|
|
setIs24Hrs(true);
|
|
}
|
|
}, [selectedTag.format])
|
|
|
|
useEffect(() => {
|
|
if (selectedTag.label === "temporal") {
|
|
handlePropertyChange("subType", TEMPORAL.DATE);
|
|
handlePropertyChange("format", "DD/MM/YY");
|
|
}
|
|
}, [])
|
|
|
|
|
|
const handleIs24HrsClick = (checked: boolean) => {
|
|
if (selectedTag.subType === TEMPORAL.TIME) {
|
|
if (!checked) {
|
|
handlePropertyChange("format", timeFormats[1].format)
|
|
} else {
|
|
handlePropertyChange("format", timeFormats[0].format)
|
|
}
|
|
}
|
|
setIs24Hrs(checked)
|
|
}
|
|
|
|
|
|
const handleIsCurrentTimeStamp = (checked: boolean) => {
|
|
if (selectedTag.type.toLowerCase() === "temporal") {
|
|
setIsCurrentTimeStamp(checked)
|
|
handlePropertyChange("currentTimeStamp", checked);
|
|
}
|
|
}
|
|
|
|
const handleAddSelectOption = () => {
|
|
if (selectedOption && selectedOption.length) {
|
|
setDroppedItems((prev) => (
|
|
{
|
|
...prev,
|
|
[selTagKey]: Array.isArray(prev[selTagKey])
|
|
? prev[selTagKey].map((item, i) => {
|
|
if (i === selTagIndx) {
|
|
return { ...item, options: item.options ? [...item.options, selectedOption] : [selectedOption], update: "id" in item ? true : false };
|
|
}
|
|
return item;
|
|
})
|
|
: [],
|
|
}
|
|
));
|
|
}
|
|
}
|
|
|
|
|
|
const handleSelectOptionDel = (indx: number) => {
|
|
// setSelectedOptions(prev =>
|
|
// prev.filter((_, i) => i !== indx)
|
|
// )
|
|
|
|
setDroppedItems((prev) => (
|
|
{
|
|
...prev,
|
|
[selTagKey]: Array.isArray(prev[selTagKey])
|
|
? prev[selTagKey].map((item, i) => {
|
|
if (i === selTagIndx) {
|
|
return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
|
|
}
|
|
return item;
|
|
})
|
|
: [],
|
|
}
|
|
));
|
|
}
|
|
|
|
|
|
const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const val = Number(e.target.value)
|
|
setDecimalPlace(val)
|
|
handlePropertyChange("decimalPlace", val)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if ("styles" in selectedTag) {
|
|
const fontSize = selectedTag?.styles?.textSize;
|
|
const tagHeight = selectedTag?.dimensions?.height - 18;
|
|
|
|
|
|
console.log(fontSize, tagHeight, "Line 323", selectedTag?.styles)
|
|
|
|
if (selectedTag.subType !== "password" && selectedTag.subType !== "paragraph" && tagHeight > (fontSize + fontSize)) {
|
|
console.log("Change subType Called from if")
|
|
handlePropertyChange("subType", "paragraph")
|
|
} else if (selectedTag.subType !== "password" && selectedTag.subType !== "single_line" && tagHeight <= (fontSize + fontSize)) {
|
|
console.log("Change subType Called from elseif")
|
|
handlePropertyChange("subType", "single_line")
|
|
}
|
|
}
|
|
}, [selectedTag])
|
|
|
|
console.log("RightSideBar - selectedTag", selectedTag)
|
|
|
|
return (
|
|
<>
|
|
{/* Right Side Bar Start */}
|
|
<div className='col-span-2 w-full h-full bg-white text-sm'>
|
|
<p className="p-2 font-semibold text-md">Properties</p>
|
|
<hr className="text-slate-200" />
|
|
|
|
<div className="p-3 text-sm text-slate-600 flex flex-col gap-2">
|
|
|
|
{/* label */}
|
|
<div className="flex flex-col">
|
|
<label htmlFor="" className="">Label</label>
|
|
<input
|
|
value={selectedTag.label}
|
|
onChange={(e) => handlePropertyChange('label', e.target.value)}
|
|
type="text"
|
|
className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
|
|
</div>
|
|
|
|
{/* Required */}
|
|
{(selectedTag.type !== "signature" && selectedTag.type !== "initials") && <div className="flex justify-between items-center">
|
|
<label htmlFor="required" className="text-xs text-slate-600 transitions-all duration-150">Required</label>
|
|
<input
|
|
id="required"
|
|
checked={selectedTag.required ? selectedTag.required : false}
|
|
onChange={(e) => handlePropertyChange('required', e.target.checked)}
|
|
type="checkbox"
|
|
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
|
/>
|
|
</div>}
|
|
|
|
{/* Use Current TimeStamp */}
|
|
{selectedTag.type.toLowerCase() === "temporal" && <div className="flex justify-left items-center gap-1.5 mt-0.5">
|
|
<label
|
|
className={`text-xs ${isCurrentTimeStamp ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`}
|
|
htmlFor="use_current_timestamp"
|
|
>
|
|
Use Current Timestamp
|
|
</label>
|
|
<input
|
|
checked={isCurrentTimeStamp ? isCurrentTimeStamp : false}
|
|
onChange={(e) => handleIsCurrentTimeStamp(e.target.checked)}
|
|
id="use_current_timestamp"
|
|
type="checkbox"
|
|
/>
|
|
</div>}
|
|
|
|
{/* Type | SubType */}
|
|
{selectedType && Object.keys(selectedType).length > 0 &&
|
|
<div className="flex flex-col">
|
|
<label htmlFor="" className="">Type</label>
|
|
<div
|
|
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
|
|
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
|
<p className="capitalize cursor-pointer">{selectedTag?.subType ? (selectedTag.subType === "date_time" ? "Date Time" : selectedTag.subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p>
|
|
<MdKeyboardArrowDown />
|
|
</div>
|
|
|
|
{dropDownToggle === DROPDOWNTOGGLE.TYPE &&
|
|
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
|
{Object.keys(selectedType).map((val, indx) => (
|
|
<div
|
|
key={indx}
|
|
onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])}
|
|
className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
|
|
>
|
|
{selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
|
|
</div>
|
|
))}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
|
|
{/* Mask Type */}
|
|
{
|
|
selectedTag?.subType === TEXT.PASSWORD &&
|
|
<div>
|
|
<label htmlFor="" className="">Mask Type</label>
|
|
<div
|
|
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE ? null : DROPDOWNTOGGLE.MASK_TYPE)}
|
|
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
|
<p className="capitalize cursor-pointer">{(selectedTag.maskType && selectedTag.maskType.replace("_", " ")) ? selectedTag.maskType : MASKTYPE.ALL}</p>
|
|
<MdKeyboardArrowDown />
|
|
</div>
|
|
|
|
{
|
|
dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE &&
|
|
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
|
{(Object.keys(MASKTYPE) as (keyof typeof MASKTYPE)[]).map((val, indx) =>
|
|
(
|
|
<div
|
|
key={indx}
|
|
onClick={() => handlePropertyChange("maskType", MASKTYPE[val])}
|
|
className="capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
|
>
|
|
{(MASKTYPE[val]).replace("_", " ")}
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
|
|
{/* Mask Character - START */}
|
|
{
|
|
selectedTag?.subType === TEXT.PASSWORD &&
|
|
<div>
|
|
<label htmlFor="" className="">Mask Character</label>
|
|
<div
|
|
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER ? null : DROPDOWNTOGGLE.MASK_CHARACTER)}
|
|
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
|
<p className="capitalize cursor-pointer py-1">
|
|
{selectedTag?.maskCharacter
|
|
?
|
|
selectedTag.maskCharacter === MASKCHARACTER.ASTERISK && <LuAsterisk /> ||
|
|
selectedTag.maskCharacter === MASKCHARACTER.DOT && <GoDotFill /> ||
|
|
selectedTag.maskCharacter === MASKCHARACTER.X && <IoClose />
|
|
:
|
|
<LuAsterisk />
|
|
}
|
|
</p>
|
|
|
|
|
|
<MdKeyboardArrowDown />
|
|
</div>
|
|
|
|
{
|
|
dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER &&
|
|
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
|
{(Object.keys(MASKCHARACTER) as (keyof typeof MASKCHARACTER)[]).map((val, indx) =>
|
|
(
|
|
<div
|
|
key={indx}
|
|
onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])}
|
|
className="capitalize p-2 hover:bg-slate-200 cursor-pointer"
|
|
>
|
|
{
|
|
MASKCHARACTER[val] === MASKCHARACTER.ASTERISK &&
|
|
<LuAsterisk />
|
|
}
|
|
{
|
|
MASKCHARACTER[val] === MASKCHARACTER.DOT &&
|
|
<GoDotFill />
|
|
}
|
|
{
|
|
MASKCHARACTER[val] === MASKCHARACTER.X &&
|
|
<IoClose />
|
|
}
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
{/* Mask Character - END */}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{/* TEMPORAL DATE FORMAT - START */}
|
|
{
|
|
(selectedTag?.subType === TEMPORAL.DATE ||
|
|
selectedTag?.subType === TEMPORAL.TIME ||
|
|
selectedTag?.subType === TEMPORAL.DATE_TIME) &&
|
|
|
|
<div>
|
|
{/* <div className="flex justify-between">
|
|
<label htmlFor="" className="">Formats</label>
|
|
<div className="flex justify-center items-center gap-1.5">
|
|
<input
|
|
checked={showFormatEg ? showFormatEg : false}
|
|
onChange={(e) => setShowFormatEg(e.target.checked)}
|
|
id="data_time_format"
|
|
type="checkbox" />
|
|
<label className="text-xs text-slate-400" htmlFor="data_time_format">
|
|
Show Example
|
|
</label>
|
|
</div>
|
|
</div> */}
|
|
|
|
<div className="flex justify-between">
|
|
<label htmlFor="" className="">Formats</label>
|
|
{(selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) &&
|
|
<div className="flex justify-center items-center gap-1.5">
|
|
<input
|
|
checked={is24Hrs ? is24Hrs : false}
|
|
onChange={(e) => handleIs24HrsClick(e.target.checked)}
|
|
id="data_time_format"
|
|
type="checkbox" />
|
|
<label className={`text-xs ${is24Hrs ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`} htmlFor="data_time_format">
|
|
24 Hrs
|
|
</label>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div
|
|
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT ? null : DROPDOWNTOGGLE.DDMMYY_FORMAT)}
|
|
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
|
<p className="cursor-pointer py-1">
|
|
{selectedTag.format ? selectedTag.format : dateTimeFormatMap['date'][0].format}
|
|
{/* {(selectedTag.subType !== TEMPORAL.DATE && selectedTag.subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
|
|
</p>
|
|
<MdKeyboardArrowDown />
|
|
</div>
|
|
|
|
{
|
|
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
|
|
<div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
|
|
{dateTimeFormatMap[selectedTag.subType].map((valObj, indx) => {
|
|
// let val = showFormatEg ? valObj["example"] : valObj["format"]
|
|
let val = valObj["format"]
|
|
if (selectedTag.subType === TEMPORAL.DATE_TIME) {
|
|
if (is24Hrs) {
|
|
val = val + " " + timeFormats[0].format;
|
|
} else {
|
|
val = val + " " + timeFormats[1].format;
|
|
}
|
|
}
|
|
return (
|
|
<div
|
|
key={indx}
|
|
onClick={() => handlePropertyChange("format", valObj["format"])}
|
|
className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
|
>
|
|
{val}
|
|
</div>
|
|
)
|
|
}
|
|
)}
|
|
</div>
|
|
}
|
|
|
|
{selectedTag.format && <div className="pt-4">
|
|
{/* <p>
|
|
Example
|
|
</p> */}
|
|
<p className="text-center">{dayjs().format(selectedTag.format)}</p>
|
|
</div>}
|
|
</div>
|
|
}
|
|
{/* TEMPORAL DATE FORMAT - END */}
|
|
|
|
|
|
|
|
{/* NUMBER - DECIMAL PLACES */}
|
|
{
|
|
selectedTag?.subType === NUMBER.DECIMAL &&
|
|
<div>
|
|
<label htmlFor="" className="">Decimal Places</label>
|
|
<input
|
|
type="number"
|
|
onChange={(e) => handleDecimalPlace(e)}
|
|
value={decimalPlace}
|
|
className="bg-slate-100 w-full outline-none p-2 rounded" />
|
|
</div>
|
|
}
|
|
|
|
|
|
{(selectedTag?.subType === "single select" || selectedTag?.subType === "multi select") &&
|
|
<>
|
|
<div>
|
|
<label htmlFor="" className="">Add Options</label>
|
|
<input
|
|
type="text"
|
|
onChange={(e) => setSelectedOption(e.target.value)}
|
|
value={selectedOption}
|
|
onKeyUp={(e) => {
|
|
if (e.code === "Enter") {
|
|
// if (selectedOption) {
|
|
// setSelectedOptions((prev) => [...prev, selectedOption]);
|
|
// setSelectedOption("");
|
|
// }
|
|
handleAddSelectOption()
|
|
}
|
|
}}
|
|
className="bg-slate-100 w-full outline-none p-2 rounded" />
|
|
|
|
<div className="h-[150px] mt-1 overflow-hidden overflow-y-auto">
|
|
{
|
|
selectedTag.options && selectedTag.options.map((val, indx) => (
|
|
<div
|
|
key={indx}
|
|
className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
|
|
<p>{val}</p>
|
|
<IoMdClose
|
|
onClick={() =>
|
|
// setSelectedOptions(prev =>
|
|
// prev.filter((_, i) => i !== indx)
|
|
// )
|
|
handleSelectOptionDel(indx)
|
|
}
|
|
className="cursor-pointer text-slate-500 hover:text-slate-600" />
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
{/* Right Side Bar End */}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default RightSideBar |