1828 lines
62 KiB
React
1828 lines
62 KiB
React
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
||
|
|
import { useDispatch } from 'react-redux';
|
||
|
|
import {
|
||
|
|
Form,
|
||
|
|
Checkbox,
|
||
|
|
Flex,
|
||
|
|
Radio,
|
||
|
|
Row,
|
||
|
|
Space,
|
||
|
|
Segmented,
|
||
|
|
Empty,
|
||
|
|
Button,
|
||
|
|
Tooltip,
|
||
|
|
} from 'antd';
|
||
|
|
import { RiBarcodeFill } from 'react-icons/ri';
|
||
|
|
import { BsQrCode } from 'react-icons/bs';
|
||
|
|
import {
|
||
|
|
ArrowRightOutlined,
|
||
|
|
DeleteFilled,
|
||
|
|
EditFilled,
|
||
|
|
LeftOutlined,
|
||
|
|
RightOutlined,
|
||
|
|
} from '@ant-design/icons';
|
||
|
|
import {
|
||
|
|
CgAlignTop,
|
||
|
|
CgAlignRight,
|
||
|
|
CgAlignLeft,
|
||
|
|
CgAlignCenter,
|
||
|
|
CgAlignBottom,
|
||
|
|
} from 'react-icons/cg';
|
||
|
|
import { DropDowns } from '../../Components/Forms/DropDown';
|
||
|
|
import { Messages } from '../../Components/Notifications/Messages';
|
||
|
|
import { getSession } from '../../Services/Others';
|
||
|
|
import {
|
||
|
|
changeBreadCrumb,
|
||
|
|
getEmpAccess,
|
||
|
|
} from '../../Features/AppPage/CenterPage';
|
||
|
|
import { Tables } from '../../Components/Tables/Table';
|
||
|
|
import { useAuth } from '../../AuthContext';
|
||
|
|
import Buttons from '../../Components/Forms/Buttons';
|
||
|
|
import * as globalBarcode from '../../Features/Barcode/Barcode';
|
||
|
|
import './BarcodeTemplateSetup.scss';
|
||
|
|
import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
|
||
|
|
import { MdOutlineQrCodeScanner } from 'react-icons/md';
|
||
|
|
import { IoBarcodeOutline } from 'react-icons/io5';
|
||
|
|
import { IoQrCodeOutline } from 'react-icons/io5';
|
||
|
|
import { GiHorizontalFlip, GiVerticalFlip } from 'react-icons/gi';
|
||
|
|
|
||
|
|
const subDirectory = import.meta.env.ENV_BASE_URL;
|
||
|
|
const barCodeImage =
|
||
|
|
'https://cdn.pixabay.com/photo/2014/04/02/16/19/barcode-306926_1280.png';
|
||
|
|
const qrCodeImage =
|
||
|
|
'https://cdn.pixabay.com/photo/2015/03/21/09/34/qr-683354_640.png';
|
||
|
|
import QrCode from '../../Images/PreviewQrCode.png';
|
||
|
|
import BarCode from '../../Images/PreviewBarCode.png';
|
||
|
|
const previewText = 'Barcode Preview';
|
||
|
|
const mrpText = 'MRP : 450';
|
||
|
|
const productNameText = 'Product Name';
|
||
|
|
const mDateText = 'M-Date : 12-12-2002';
|
||
|
|
const eDateText = 'Exp-Date : 12-12-2004';
|
||
|
|
const colorText = 'Color : Red';
|
||
|
|
const sellingPriceText = 'Selling Price : 400';
|
||
|
|
const barCodePositionText = 'Barcode Position';
|
||
|
|
const segmentStyle = {
|
||
|
|
padding: 4,
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: '0.5rem',
|
||
|
|
};
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
name: 'Home',
|
||
|
|
link: `${subDirectory}app-page/home`,
|
||
|
|
},
|
||
|
|
// {
|
||
|
|
// name: "BarcodeQrSetup",
|
||
|
|
// link: `${subDirectory}saleslayouts/barcode&qr-selection`,
|
||
|
|
// },
|
||
|
|
];
|
||
|
|
const positionOption = [
|
||
|
|
{
|
||
|
|
value: 'L',
|
||
|
|
label: (
|
||
|
|
<Flex gap="small" justify="center" align="center" vertical>
|
||
|
|
<CgAlignLeft
|
||
|
|
style={{
|
||
|
|
fontSize: 18,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
Left
|
||
|
|
</Flex>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'R',
|
||
|
|
label: (
|
||
|
|
<Flex gap="small" justify="center" align="center" vertical>
|
||
|
|
<CgAlignRight
|
||
|
|
style={{
|
||
|
|
fontSize: 18,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
Right
|
||
|
|
</Flex>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'T',
|
||
|
|
label: (
|
||
|
|
<Flex gap="small" justify="center" align="center" vertical>
|
||
|
|
<CgAlignTop
|
||
|
|
style={{
|
||
|
|
fontSize: 18,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
Top
|
||
|
|
</Flex>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'B',
|
||
|
|
label: (
|
||
|
|
<Flex gap="small" justify="center" align="center" vertical>
|
||
|
|
<CgAlignBottom
|
||
|
|
style={{
|
||
|
|
fontSize: 18,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
Bottom
|
||
|
|
</Flex>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'C',
|
||
|
|
label: (
|
||
|
|
<Flex gap="small" justify="center" align="center" vertical>
|
||
|
|
<CgAlignCenter
|
||
|
|
style={{
|
||
|
|
fontSize: 18,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
Center
|
||
|
|
</Flex>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const BarcodeTemplateSetup = () => {
|
||
|
|
const formRef = useRef(null);
|
||
|
|
const CompId = getSession('CompId');
|
||
|
|
const BranchId = getSession('BranchId');
|
||
|
|
const AppId = getSession('AppId');
|
||
|
|
const UserId = getSession('UserId');
|
||
|
|
const UserType = getSession('UserType');
|
||
|
|
|
||
|
|
const { SadminuserAccess } = useAuth();
|
||
|
|
const SAAccessCommonMaster = SadminuserAccess?.find(
|
||
|
|
(e) => e?.MenuName === 'Barcode / Qr Setup'
|
||
|
|
);
|
||
|
|
// useDispatch
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
|
||
|
|
// useState
|
||
|
|
const [dropdownValue, setDropdownValue] = useState();
|
||
|
|
const [coresdata, setCoresdata] = useState([]);
|
||
|
|
const [filteredCoreData, setFilteredCoreData] = useState([]);
|
||
|
|
const [value, setValue] = useState();
|
||
|
|
const [secondValue, setSecondValue] = useState();
|
||
|
|
const [sizeCheckList, setSizeCheckList] = useState([]);
|
||
|
|
const [checkedList, setCheckedList] = useState([]);
|
||
|
|
const [selectedOption, setSelectedOption] = useState('B');
|
||
|
|
const checkAll =
|
||
|
|
sizeCheckList?.filter(
|
||
|
|
(filter) =>
|
||
|
|
filter.ComponentName !== (selectedOption === 'B' ? 'Qrcode' : 'Barcode')
|
||
|
|
)?.length === checkedList?.length;
|
||
|
|
const [selectedSizeCheckedValues, setSelectedSizeCheckedValues] = useState(
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
const [sizeName, setSizeName] = useState(null);
|
||
|
|
const [message, setMessage] = useState({ Type: null, Message: null });
|
||
|
|
const [editMode, setEditMode] = useState(false);
|
||
|
|
const [putMode, setPutMode] = useState(false);
|
||
|
|
const [editinitialRun, setEditInitialRun] = useState(false);
|
||
|
|
const [getSizeData, setGetSizeData] = useState([]);
|
||
|
|
const [empData, setEmpData] = useState();
|
||
|
|
const [addnewAccess, setaddnewAccess] = useState(true);
|
||
|
|
const secondValueStyle = {
|
||
|
|
flexDirection: secondValue === 'R' ? 'row' : 'row-reverse',
|
||
|
|
};
|
||
|
|
const valueStyleRow = {
|
||
|
|
flexDirection: value === 'R' ? 'row' : 'row-reverse',
|
||
|
|
};
|
||
|
|
const valueStyleColumn = {
|
||
|
|
flexDirection: value === 'T' ? 'column' : 'column-reverse',
|
||
|
|
};
|
||
|
|
const [showAll, setShowAll] = useState(false);
|
||
|
|
const displayedData = showAll
|
||
|
|
? filteredCoreData
|
||
|
|
: filteredCoreData.slice(0, 6);
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
align: 'center',
|
||
|
|
key: 'sno',
|
||
|
|
width: '50px',
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Size',
|
||
|
|
dataIndex: 'SessionName',
|
||
|
|
key: 'SessionName',
|
||
|
|
width: '50px',
|
||
|
|
align: 'left',
|
||
|
|
render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Options',
|
||
|
|
dataIndex: 'OptionDetails',
|
||
|
|
key: 'OptionDetails',
|
||
|
|
width: '100px',
|
||
|
|
align: 'left',
|
||
|
|
render: (OptionDetails) => (
|
||
|
|
<a style={{ color: 'black' }}>
|
||
|
|
{OptionDetails?.map((item) => item.OptionName).join(',')}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
ellipsis: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Action',
|
||
|
|
dataIndex: 'Action',
|
||
|
|
width: '50px',
|
||
|
|
key: 'Action',
|
||
|
|
render: (_, record, index) =>
|
||
|
|
getSizeData?.length >= 1 ? (
|
||
|
|
<Space size="middle">
|
||
|
|
<a>
|
||
|
|
<EditFilled
|
||
|
|
style={{ color: '#1292EE' }}
|
||
|
|
onClick={() =>
|
||
|
|
UserType === 'Super Admin' ||
|
||
|
|
(UserType === 'Super Admin User' &&
|
||
|
|
SAAccessCommonMaster?.UpdateAccess === 'Y') ||
|
||
|
|
(UserType === 'Employee' && empData?.UpdateAccess === 'Y') ||
|
||
|
|
UserType === 'Admin'
|
||
|
|
? actionsFormatter(record, index)
|
||
|
|
: null
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</a>
|
||
|
|
<a
|
||
|
|
onClick={() => {
|
||
|
|
if (
|
||
|
|
!editMode &&
|
||
|
|
(UserType === 'Super Admin' ||
|
||
|
|
(UserType === 'Super Admin User' &&
|
||
|
|
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
|
||
|
|
(UserType === 'Employee' &&
|
||
|
|
empData?.DeleteAccess === 'Y') ||
|
||
|
|
UserType === 'Admin')
|
||
|
|
) {
|
||
|
|
const filteredData = getSizeData?.filter(
|
||
|
|
(_, ind) => ind !== index
|
||
|
|
);
|
||
|
|
setGetSizeData(filteredData);
|
||
|
|
const updatedCoresData = [...coresdata]?.filter(
|
||
|
|
(filter) =>
|
||
|
|
!filteredData.some(
|
||
|
|
(some) => some.SessionId === filter.ConfigId
|
||
|
|
)
|
||
|
|
);
|
||
|
|
setFilteredCoreData(updatedCoresData);
|
||
|
|
} else {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<DeleteFilled
|
||
|
|
style={{
|
||
|
|
color: '#FF4D4F',
|
||
|
|
pointerEvents: editMode ? 'none' : 'auto',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</a>
|
||
|
|
</Space>
|
||
|
|
) : null,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
// useCallback
|
||
|
|
const onComplete = useCallback(() => {
|
||
|
|
setMessage({ Type: null, Message: null });
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// useEffect
|
||
|
|
useEffect(() => {
|
||
|
|
dispatch(changeBreadCrumb({ items: items }));
|
||
|
|
getBarcodeSessionData();
|
||
|
|
}, []);
|
||
|
|
useEffect(() => {
|
||
|
|
if (UserType === 'Employee') {
|
||
|
|
fetchApi();
|
||
|
|
}
|
||
|
|
}, [UserType]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let hasAccess = false;
|
||
|
|
|
||
|
|
if (UserType === 'Admin' || UserType === 'Super Admin') {
|
||
|
|
hasAccess = true;
|
||
|
|
} else if (UserType === 'Employee') {
|
||
|
|
hasAccess =
|
||
|
|
empData?.AddAccess === 'Y' ||
|
||
|
|
SAAccessCommonMaster?.UpdateAccess === 'Y';
|
||
|
|
} else if (UserType === 'Super Admin User') {
|
||
|
|
hasAccess =
|
||
|
|
SAAccessCommonMaster?.AddAccess === 'Y' ||
|
||
|
|
SAAccessCommonMaster?.UpdateAccess === 'Y';
|
||
|
|
}
|
||
|
|
|
||
|
|
setaddnewAccess(!hasAccess);
|
||
|
|
}, [empData, SAAccessCommonMaster, UserType]);
|
||
|
|
|
||
|
|
const fetchApi = async () => {
|
||
|
|
let data = {
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
AppId: AppId,
|
||
|
|
EmpId: UserId,
|
||
|
|
};
|
||
|
|
let response = await dispatch(getEmpAccess(data)).unwrap();
|
||
|
|
let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
|
||
|
|
(item) => item.ConfigName === 'Barcode / Qr Setup'
|
||
|
|
);
|
||
|
|
setEmpData(datas?.[0]);
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (dropdownValue !== undefined && dropdownValue !== null) {
|
||
|
|
const name = coresdata?.find(
|
||
|
|
(find) => find.ConfigId === dropdownValue
|
||
|
|
)?.ConfigName;
|
||
|
|
setSizeName(name);
|
||
|
|
}
|
||
|
|
}, [dropdownValue]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (editMode && editinitialRun) {
|
||
|
|
const { radioValue, secondRadioValue, arrayValue, secondArrayValue } =
|
||
|
|
getPositionOptions(true);
|
||
|
|
if (
|
||
|
|
sizeName === '50X30 Single' ||
|
||
|
|
sizeName === '50X25 Single' ||
|
||
|
|
(sizeName === '100X150' && editinitialRun)
|
||
|
|
) {
|
||
|
|
secondArrayValue !== undefined && secondArrayValue?.length > 0
|
||
|
|
? setSecondValue(secondRadioValue)
|
||
|
|
: setSecondValue();
|
||
|
|
arrayValue !== undefined && arrayValue?.length > 0
|
||
|
|
? setValue(radioValue)
|
||
|
|
: setValue();
|
||
|
|
} else {
|
||
|
|
arrayValue !== undefined && arrayValue?.length > 0
|
||
|
|
? (setValue(radioValue), setSecondValue())
|
||
|
|
: (setValue(), setSecondValue());
|
||
|
|
}
|
||
|
|
} else if (!editMode) {
|
||
|
|
const { radioValue, secondRadioValue, arrayValue, secondArrayValue } =
|
||
|
|
getPositionOptions(true);
|
||
|
|
if (
|
||
|
|
sizeName === '50X30 Single' ||
|
||
|
|
sizeName === '50X25 Single' ||
|
||
|
|
sizeName === '100X150'
|
||
|
|
) {
|
||
|
|
secondArrayValue !== undefined &&
|
||
|
|
secondArrayValue?.length > 0 &&
|
||
|
|
setSecondValue(secondRadioValue);
|
||
|
|
arrayValue !== undefined && arrayValue?.length > 0
|
||
|
|
? setValue(radioValue)
|
||
|
|
: setValue();
|
||
|
|
} else {
|
||
|
|
arrayValue !== undefined && arrayValue?.length > 0
|
||
|
|
? (setValue(radioValue), setSecondValue())
|
||
|
|
: (setValue(), setSecondValue());
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setEditInitialRun(true);
|
||
|
|
}
|
||
|
|
}, [sizeName, selectedSizeCheckedValues]);
|
||
|
|
|
||
|
|
const onChangeFirst = (e) => {
|
||
|
|
setValue(e?.target?.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onChangeSecondValue = (e) => {
|
||
|
|
setSecondValue(e?.target?.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const actionsFormatter = async (record) => {
|
||
|
|
const { SessionId, OptionDetails, Position, PositionString, CodeType } =
|
||
|
|
record;
|
||
|
|
setEditMode(true);
|
||
|
|
const updatedCoresData = [...coresdata]?.filter(
|
||
|
|
(filter) => filter.ConfigId === SessionId
|
||
|
|
);
|
||
|
|
setFilteredCoreData(updatedCoresData);
|
||
|
|
setSelectedOption(CodeType);
|
||
|
|
setEditInitialRun(false);
|
||
|
|
setDropdownValue(SessionId);
|
||
|
|
formRef?.current?.setFieldsValue({ Cross: SessionId });
|
||
|
|
const response = await dispatch(
|
||
|
|
globalBarcode.getBarcodeComponentsBasedOnSessionId(SessionId)
|
||
|
|
).unwrap();
|
||
|
|
|
||
|
|
if (response?.data?.statusCode === 1) {
|
||
|
|
setSizeCheckList(response?.data?.data);
|
||
|
|
const checkedData = OptionDetails?.map((item) => item.OptionId);
|
||
|
|
setSelectedSizeCheckedValues(checkedData);
|
||
|
|
setCheckedList(checkedData);
|
||
|
|
setValue(Position !== '' ? Position : undefined);
|
||
|
|
setSecondValue(PositionString !== '' ? PositionString : undefined);
|
||
|
|
} else {
|
||
|
|
setMessage({ Type: 'error', Message: response?.data?.response });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const CoresOnChange = async (params) => {
|
||
|
|
setDropdownValue(params);
|
||
|
|
formRef.current?.setFieldsValue({ Cross: params });
|
||
|
|
if (params !== undefined && params !== null) {
|
||
|
|
const response = await dispatch(
|
||
|
|
globalBarcode.getBarcodeComponentsBasedOnSessionId(params)
|
||
|
|
).unwrap();
|
||
|
|
if (response?.data?.statusCode === 1) {
|
||
|
|
setSizeCheckList(response?.data?.data);
|
||
|
|
const allCheckboxes = response?.data?.data
|
||
|
|
.filter(
|
||
|
|
(item) =>
|
||
|
|
item.ComponentName !==
|
||
|
|
(selectedOption === 'B' ? 'Qrcode' : 'Barcode')
|
||
|
|
)
|
||
|
|
.map((item) => item.ComponentId);
|
||
|
|
setSelectedSizeCheckedValues(allCheckboxes);
|
||
|
|
setCheckedList(allCheckboxes);
|
||
|
|
|
||
|
|
const name = coresdata?.find(
|
||
|
|
(find) => find.ConfigId === params
|
||
|
|
)?.ConfigName;
|
||
|
|
|
||
|
|
if (name === '22X35 3cross' || name === '25X50 2cross') {
|
||
|
|
setValue('T'); // Default to Top
|
||
|
|
setSecondValue(undefined);
|
||
|
|
} else if (name === '100X13 (55MM Printable)') {
|
||
|
|
setValue('L'); // Default to Left
|
||
|
|
setSecondValue(undefined);
|
||
|
|
} else if (name === '100X15 (70MM Printable)') {
|
||
|
|
setValue('R'); // Default to Right
|
||
|
|
setSecondValue(undefined);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setMessage({ Type: 'error', Message: response?.data?.response });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getBarcodeSessionData = async () => {
|
||
|
|
let getResponse = await dispatch(
|
||
|
|
globalBarcode.getBarcodeTemplate({
|
||
|
|
compId: CompId,
|
||
|
|
appId: AppId,
|
||
|
|
branchId: BranchId,
|
||
|
|
})
|
||
|
|
).unwrap();
|
||
|
|
|
||
|
|
if (getResponse?.data?.statusCode === 1) {
|
||
|
|
if (getResponse?.data?.data?.length > 0) {
|
||
|
|
const { TemplateDetails } = getResponse?.data?.data?.[0];
|
||
|
|
setPutMode(true);
|
||
|
|
setGetSizeData(TemplateDetails);
|
||
|
|
} else {
|
||
|
|
setPutMode(false);
|
||
|
|
setGetSizeData([]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let resp = await dispatch(globalBarcode.getBarcodeSessionsIDs()).unwrap();
|
||
|
|
if (resp?.data?.statusCode === 1) {
|
||
|
|
setCoresdata(resp?.data?.data);
|
||
|
|
if (getResponse?.data?.data?.length === 0) {
|
||
|
|
setFilteredCoreData(resp?.data?.data);
|
||
|
|
} else {
|
||
|
|
if (getResponse?.data?.data?.length > 0) {
|
||
|
|
const { TemplateDetails } = getResponse?.data?.data?.[0];
|
||
|
|
const filteredData = await resp?.data?.data?.filter(
|
||
|
|
(filter) =>
|
||
|
|
!TemplateDetails.some(
|
||
|
|
(some) => some.SessionId === filter.ConfigId
|
||
|
|
)
|
||
|
|
);
|
||
|
|
setFilteredCoreData(filteredData);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setCoresdata([]);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const onCheckboxChange = (checkedValues) => {
|
||
|
|
setCheckedList(checkedValues);
|
||
|
|
setSelectedSizeCheckedValues(checkedValues);
|
||
|
|
};
|
||
|
|
|
||
|
|
const onCheckAllChange = (e) => {
|
||
|
|
let Data = sizeCheckList
|
||
|
|
?.filter(
|
||
|
|
(filter) =>
|
||
|
|
filter.ComponentName !==
|
||
|
|
(selectedOption === 'B' ? 'Qrcode' : 'Barcode')
|
||
|
|
)
|
||
|
|
.map((item) => item.ComponentId);
|
||
|
|
setCheckedList(e.target.checked ? Data : []);
|
||
|
|
setSelectedSizeCheckedValues(e.target.checked ? Data : []);
|
||
|
|
};
|
||
|
|
|
||
|
|
const getPositionOptions = () => {
|
||
|
|
let result = {
|
||
|
|
radioValue: '',
|
||
|
|
secondRadioValue: '',
|
||
|
|
arrayValue: [],
|
||
|
|
secondArrayValue: [],
|
||
|
|
};
|
||
|
|
const componentMap = Object.fromEntries(
|
||
|
|
sizeCheckList?.map((item) => [item.ComponentName, item.ComponentId]) || []
|
||
|
|
);
|
||
|
|
|
||
|
|
const checkComponent = (name) =>
|
||
|
|
selectedSizeCheckedValues.includes(componentMap[name]);
|
||
|
|
|
||
|
|
const mrp = checkComponent('MRP');
|
||
|
|
const color = checkComponent('Color');
|
||
|
|
const eDate = checkComponent('E Date');
|
||
|
|
const mDate = checkComponent('M Date');
|
||
|
|
const sellingPrice = checkComponent('Selling Price');
|
||
|
|
const productName = checkComponent('Product Name');
|
||
|
|
|
||
|
|
const filterByValues = (values) => {
|
||
|
|
return positionOption?.filter((item) => values.includes(item.value));
|
||
|
|
};
|
||
|
|
|
||
|
|
const CTB = ['C', 'T', 'B'];
|
||
|
|
const BT = ['B', 'T'];
|
||
|
|
const LR = ['L', 'R'];
|
||
|
|
const CT = ['C', 'T'];
|
||
|
|
const CB = ['C', 'B'];
|
||
|
|
const C = ['C'];
|
||
|
|
const T = ['T'];
|
||
|
|
const L = ['L'];
|
||
|
|
const R = ['R'];
|
||
|
|
|
||
|
|
switch (sizeName) {
|
||
|
|
case '15X15 6cross':
|
||
|
|
case '25X25 4cross':
|
||
|
|
switch (sizeName) {
|
||
|
|
case '15X15 6cross':
|
||
|
|
if (mrp && productName) {
|
||
|
|
result.arrayValue = filterByValues(CTB);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = value || 'C';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else if (mrp) {
|
||
|
|
result.arrayValue = filterByValues(CB);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = (value === 'T' ? 'C' : value) || 'C';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else if (productName) {
|
||
|
|
result.arrayValue = filterByValues(CT);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = (value == 'B' ? 'T' : value) || 'T';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(C);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = 'C';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case '25X25 4cross':
|
||
|
|
if ((mrp || productName) && (eDate || mDate)) {
|
||
|
|
result.arrayValue = filterByValues(CTB);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = value || 'C';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else if (eDate || mDate) {
|
||
|
|
result.arrayValue = filterByValues(CB);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = (value === 'T' ? 'C' : value) || 'C';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else if (mrp || productName) {
|
||
|
|
result.arrayValue = filterByValues(CT);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = (value == 'B' ? 'C' : value) || 'C';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(C);
|
||
|
|
result.radioValue = 'C';
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
return result;
|
||
|
|
case '22X35 3cross':
|
||
|
|
case '25X50 2cross':
|
||
|
|
switch (sizeName) {
|
||
|
|
case '22X35 3cross':
|
||
|
|
if (mrp) {
|
||
|
|
result.arrayValue = filterByValues(BT);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = value || 'T';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(T);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
result.radioValue = 'T';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case '25X50 2cross':
|
||
|
|
if (mrp || productName) {
|
||
|
|
result.arrayValue = filterByValues(BT);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = value || 'T';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(T);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = 'T';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
return result;
|
||
|
|
case '50X30 Single':
|
||
|
|
case '50X25 Single':
|
||
|
|
case '100X150':
|
||
|
|
switch (sizeName) {
|
||
|
|
case '50X30 Single':
|
||
|
|
if (mrp && (eDate || mDate || productName)) {
|
||
|
|
result.arrayValue = filterByValues(BT);
|
||
|
|
result.secondArrayValue = filterByValues(LR);
|
||
|
|
result.radioValue = value || 'T';
|
||
|
|
result.secondRadioValue = secondValue || 'R';
|
||
|
|
} else if (mrp) {
|
||
|
|
result.arrayValue = filterByValues(BT);
|
||
|
|
result.radioValue = value || 'T';
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else if (eDate || mDate || productName) {
|
||
|
|
result.secondArrayValue = filterByValues(LR);
|
||
|
|
result.secondRadioValue = secondValue || 'R';
|
||
|
|
result.arrayValue = [];
|
||
|
|
result.radioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(T);
|
||
|
|
result.secondArrayValue = filterByValues(L);
|
||
|
|
result.radioValue = 'T';
|
||
|
|
result.secondRadioValue = 'L';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case '50X25 Single':
|
||
|
|
if (mrp && mDate) {
|
||
|
|
result.arrayValue = filterByValues(BT);
|
||
|
|
result.secondArrayValue = filterByValues(LR);
|
||
|
|
result.radioValue = value || 'T';
|
||
|
|
result.secondRadioValue = secondValue || 'L';
|
||
|
|
} else if (mrp) {
|
||
|
|
result.arrayValue = filterByValues(BT);
|
||
|
|
result.radioValue = value || 'T';
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else if (mDate) {
|
||
|
|
result.secondArrayValue = filterByValues(LR);
|
||
|
|
result.secondRadioValue = secondValue || 'L';
|
||
|
|
result.arrayValue = [];
|
||
|
|
result.radioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(T);
|
||
|
|
result.secondArrayValue = filterByValues(L);
|
||
|
|
result.radioValue = 'T';
|
||
|
|
result.secondRadioValue = 'L';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case '100X150':
|
||
|
|
if (
|
||
|
|
mrp &&
|
||
|
|
(mDate || color || sellingPrice || eDate || productName)
|
||
|
|
) {
|
||
|
|
result.arrayValue = filterByValues(BT);
|
||
|
|
result.secondArrayValue = filterByValues(LR);
|
||
|
|
result.radioValue = value || 'T';
|
||
|
|
result.secondRadioValue = secondValue || 'R';
|
||
|
|
} else if (mrp) {
|
||
|
|
result.arrayValue = filterByValues(BT);
|
||
|
|
result.radioValue = value || 'T';
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else if (mDate || color || sellingPrice || eDate || productName) {
|
||
|
|
result.secondArrayValue = filterByValues(LR);
|
||
|
|
result.secondRadioValue = secondValue || 'R';
|
||
|
|
result.arrayValue = [];
|
||
|
|
result.radioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(T);
|
||
|
|
result.secondArrayValue = filterByValues(L);
|
||
|
|
result.radioValue = 'T';
|
||
|
|
result.secondRadioValue = 'L';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
return result;
|
||
|
|
case '100X15 (70MM Printable)':
|
||
|
|
case '100X13 (55MM Printable)':
|
||
|
|
switch (sizeName) {
|
||
|
|
case '100X15 (70MM Printable)':
|
||
|
|
if (mrp || sellingPrice || productName) {
|
||
|
|
result.arrayValue = filterByValues(LR);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = value || 'R';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(R);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = 'R';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case '100X13 (55MM Printable)':
|
||
|
|
if (sellingPrice || productName) {
|
||
|
|
result.arrayValue = filterByValues(LR);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = value || 'L';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
} else {
|
||
|
|
result.arrayValue = filterByValues(L);
|
||
|
|
result.secondArrayValue = [];
|
||
|
|
result.radioValue = 'L';
|
||
|
|
result.secondRadioValue = '';
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return result;
|
||
|
|
default:
|
||
|
|
return [];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderBarcodePositionOptions = () => {
|
||
|
|
const positionOptions = getPositionOptions();
|
||
|
|
const { arrayValue = [], secondArrayValue = [] } = positionOptions || {};
|
||
|
|
|
||
|
|
const isBarcodeSelected = selectedSizeCheckedValues?.includes(
|
||
|
|
sizeCheckList?.find((item) => item.ComponentName === 'Barcode')
|
||
|
|
?.ComponentId
|
||
|
|
);
|
||
|
|
const isQrcodeSelected = selectedSizeCheckedValues?.includes(
|
||
|
|
sizeCheckList?.find((item) => item.ComponentName === 'Qrcode')
|
||
|
|
?.ComponentId
|
||
|
|
);
|
||
|
|
|
||
|
|
const isSpecialSize = ['50X30 Single', '50X25 Single', '100X150'].includes(
|
||
|
|
sizeName
|
||
|
|
);
|
||
|
|
const hasOptions = arrayValue.length > 0 || secondArrayValue.length > 0;
|
||
|
|
|
||
|
|
if (
|
||
|
|
selectedSizeCheckedValues?.length > 0 &&
|
||
|
|
(isBarcodeSelected || isQrcodeSelected)
|
||
|
|
) {
|
||
|
|
if (isSpecialSize && hasOptions) {
|
||
|
|
return (
|
||
|
|
<div className="BQprintSelectCheckBox1">
|
||
|
|
<div>{barCodePositionText}</div>
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||
|
|
{arrayValue.length > 0 && (
|
||
|
|
<Radio.Group
|
||
|
|
onChange={onChangeFirst}
|
||
|
|
value={value}
|
||
|
|
options={arrayValue}
|
||
|
|
className="widthDisplayJustifyContent"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{arrayValue.length > 0 && secondArrayValue.length > 0 && (
|
||
|
|
<div style={{ borderRight: '1px solid #000' }}></div>
|
||
|
|
)}
|
||
|
|
{secondArrayValue.length > 0 && (
|
||
|
|
<Radio.Group
|
||
|
|
onChange={onChangeSecondValue}
|
||
|
|
value={secondValue}
|
||
|
|
options={secondArrayValue}
|
||
|
|
className="widthDisplayJustifyContent"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
} else if (!isSpecialSize && arrayValue.length > 0) {
|
||
|
|
return (
|
||
|
|
<div className="BQprintSelectCheckBox1">
|
||
|
|
<div>{barCodePositionText}</div>
|
||
|
|
<Radio.Group
|
||
|
|
onChange={onChangeFirst}
|
||
|
|
value={value}
|
||
|
|
options={arrayValue}
|
||
|
|
className="widthDisplayJustifyContent"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
|
||
|
|
const onFinish = async () => {
|
||
|
|
const data = {
|
||
|
|
CompId: CompId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
AppId: AppId,
|
||
|
|
TemplateDetails: getSizeData,
|
||
|
|
CreatedBy: UserId,
|
||
|
|
};
|
||
|
|
|
||
|
|
if (putMode) {
|
||
|
|
if (data?.TemplateDetails?.length === 0) {
|
||
|
|
setFilteredCoreData([...coresdata]);
|
||
|
|
}
|
||
|
|
const response = await dispatch(
|
||
|
|
globalBarcode.putBarcodeTemplate(data)
|
||
|
|
).unwrap();
|
||
|
|
if (response?.data?.statusCode === 1) {
|
||
|
|
setMessage({ Type: 'success', Message: response?.data?.response });
|
||
|
|
setEditInitialRun(false);
|
||
|
|
setPutMode(false);
|
||
|
|
getBarcodeSessionData();
|
||
|
|
} else {
|
||
|
|
setMessage({ Type: 'error', Message: response?.data?.response });
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (getSizeData?.length > 0) {
|
||
|
|
const response = await dispatch(
|
||
|
|
globalBarcode.postBarcodeTemplate(data)
|
||
|
|
).unwrap();
|
||
|
|
if (response?.data?.statusCode === 1) {
|
||
|
|
setMessage({ Type: 'success', Message: response?.data?.response });
|
||
|
|
setEditInitialRun(false);
|
||
|
|
setPutMode(false);
|
||
|
|
getBarcodeSessionData();
|
||
|
|
} else {
|
||
|
|
setMessage({ Type: 'error', Message: response?.data?.response });
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setMessage({ Type: 'error', Message: 'Please Setup a Barcode' });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCancel = (sizeData) => {
|
||
|
|
setSelectedOption('B');
|
||
|
|
setEditMode(false);
|
||
|
|
setEditInitialRun(false);
|
||
|
|
setSizeCheckList([]);
|
||
|
|
setSelectedSizeCheckedValues([]);
|
||
|
|
setCheckedList([]);
|
||
|
|
setDropdownValue();
|
||
|
|
formRef?.current?.resetFields();
|
||
|
|
const updatedCoresData = [...coresdata]?.filter(
|
||
|
|
(filter) => !sizeData.some((some) => some.SessionId === filter.ConfigId)
|
||
|
|
);
|
||
|
|
setFilteredCoreData(updatedCoresData);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSizeAddOrSave = () => {
|
||
|
|
const optionDetails = selectedSizeCheckedValues.map((item) => {
|
||
|
|
const { ComponentName } = sizeCheckList?.find(
|
||
|
|
(find) => find.ComponentId === item
|
||
|
|
);
|
||
|
|
return {
|
||
|
|
OptionName: ComponentName,
|
||
|
|
OptionId: item,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
let updatedSizeData = [];
|
||
|
|
|
||
|
|
if (editMode) {
|
||
|
|
setGetSizeData((prev) => {
|
||
|
|
updatedSizeData = prev?.map((item) => {
|
||
|
|
if (item.SessionId === dropdownValue) {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
Position: value !== undefined ? value : '',
|
||
|
|
PositionString: secondValue !== undefined ? secondValue : '',
|
||
|
|
OptionDetails: optionDetails,
|
||
|
|
CodeType: selectedOption,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return item;
|
||
|
|
});
|
||
|
|
return updatedSizeData;
|
||
|
|
});
|
||
|
|
|
||
|
|
const updatedCoresData = [...coresdata]?.filter(
|
||
|
|
(filter) => filter.ConfigId === dropdownValue
|
||
|
|
);
|
||
|
|
setFilteredCoreData(updatedCoresData);
|
||
|
|
} else {
|
||
|
|
const { ConfigName } = coresdata?.find(
|
||
|
|
(find) => find.ConfigId === dropdownValue
|
||
|
|
);
|
||
|
|
|
||
|
|
setGetSizeData((prev) => {
|
||
|
|
updatedSizeData = [
|
||
|
|
...prev,
|
||
|
|
{
|
||
|
|
SessionId: dropdownValue,
|
||
|
|
CodeType: selectedOption,
|
||
|
|
Position: value !== undefined ? value : '',
|
||
|
|
PositionString: secondValue !== undefined ? secondValue : '',
|
||
|
|
OptionDetails: optionDetails,
|
||
|
|
SessionName: ConfigName,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
return updatedSizeData;
|
||
|
|
});
|
||
|
|
|
||
|
|
const updatedCoresData = [...coresdata]?.filter(
|
||
|
|
(filter) =>
|
||
|
|
!updatedSizeData.some((some) => some.SessionId === filter.ConfigId)
|
||
|
|
);
|
||
|
|
setFilteredCoreData(updatedCoresData);
|
||
|
|
}
|
||
|
|
|
||
|
|
handleCancel(updatedSizeData);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleImageTag = (w, h = '40px') => {
|
||
|
|
return (
|
||
|
|
<img
|
||
|
|
src={selectedOption === 'B' ? barCodeImage : qrCodeImage}
|
||
|
|
alt={previewText}
|
||
|
|
width={w}
|
||
|
|
height={h}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleChangeOption = (param) => {
|
||
|
|
setSelectedOption(param);
|
||
|
|
// Select all checkboxes for the new code type
|
||
|
|
if (sizeCheckList?.length > 0) {
|
||
|
|
const allCheckboxes = sizeCheckList
|
||
|
|
.filter(
|
||
|
|
(item) =>
|
||
|
|
item.ComponentName !== (param === 'B' ? 'Qrcode' : 'Barcode')
|
||
|
|
)
|
||
|
|
.map((item) => item.ComponentId);
|
||
|
|
setCheckedList(allCheckboxes);
|
||
|
|
setSelectedSizeCheckedValues(allCheckboxes);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const [rightClickCount, setRightClickCount] = useState(0);
|
||
|
|
const [clickCount, setClickCount] = useState(0);
|
||
|
|
|
||
|
|
const leftOnclick = () => {
|
||
|
|
if (!dropdownValue || filteredCoreData.length === 0) return;
|
||
|
|
|
||
|
|
setClickCount(0);
|
||
|
|
const currentIndex = filteredCoreData.findIndex(
|
||
|
|
(item) => item.ConfigId === dropdownValue
|
||
|
|
);
|
||
|
|
if (currentIndex > 0) {
|
||
|
|
CoresOnChange(filteredCoreData[currentIndex - 1].ConfigId);
|
||
|
|
} else {
|
||
|
|
CoresOnChange(filteredCoreData[filteredCoreData.length - 1].ConfigId);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const RightOnclick = () => {
|
||
|
|
if (!dropdownValue || filteredCoreData.length === 0) return;
|
||
|
|
const newClickCount = clickCount + 1;
|
||
|
|
setClickCount(newClickCount);
|
||
|
|
if (newClickCount >= 6 && filteredCoreData.length > 6) {
|
||
|
|
setShowAll(true);
|
||
|
|
setClickCount(0);
|
||
|
|
}
|
||
|
|
const currentIndex = filteredCoreData.findIndex(
|
||
|
|
(item) => item.ConfigId === dropdownValue
|
||
|
|
);
|
||
|
|
if (currentIndex < filteredCoreData.length - 1) {
|
||
|
|
CoresOnChange(filteredCoreData[currentIndex + 1].ConfigId);
|
||
|
|
} else {
|
||
|
|
CoresOnChange(filteredCoreData[0].ConfigId);
|
||
|
|
setClickCount(0);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setClickCount(0);
|
||
|
|
}, [showAll]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (filteredCoreData?.length > 0 && !dropdownValue && !editMode) {
|
||
|
|
CoresOnChange(filteredCoreData[0].ConfigId);
|
||
|
|
}
|
||
|
|
}, [filteredCoreData]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (dropdownValue && !editMode) {
|
||
|
|
const currentSize = coresdata?.find(
|
||
|
|
(find) => find.ConfigId === dropdownValue
|
||
|
|
)?.ConfigName;
|
||
|
|
|
||
|
|
if (currentSize === '22X35 3cross' || currentSize === '25X50 2cross') {
|
||
|
|
setSecondValue(undefined);
|
||
|
|
} else if (currentSize === '100X13 (55MM Printable)') {
|
||
|
|
setSecondValue(undefined);
|
||
|
|
} else if (currentSize === '100X15 (70MM Printable)') {
|
||
|
|
setSecondValue(undefined);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [dropdownValue, coresdata, editMode]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="BarcodeTemplateSetup-Master">
|
||
|
|
<Messages
|
||
|
|
messageType={message.Type}
|
||
|
|
messageData={message.Message}
|
||
|
|
onComplete={onComplete}
|
||
|
|
/>
|
||
|
|
<div className="defaluBSPSSetupHeadder">
|
||
|
|
<h1>
|
||
|
|
<IoBarcodeOutline color="#2563eb" size={27} /> Barcode /{' '}
|
||
|
|
<IoQrCodeOutline color="#2563eb" size={20} />
|
||
|
|
Qr Setup
|
||
|
|
</h1>
|
||
|
|
<p>Easily configure barcode and QR code settings for your products</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="defaluBSPSSetup-main">
|
||
|
|
<div className="defaluBSPSSetup">
|
||
|
|
<p style={{ lineHeight: '1', fontSize: '14px', fontWeight: '500' }}>
|
||
|
|
{' '}
|
||
|
|
Scan Setup
|
||
|
|
</p>
|
||
|
|
<Form ref={formRef}>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'flex-start',
|
||
|
|
gap: '1rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<Segmented
|
||
|
|
size={'large'}
|
||
|
|
defaultValue="B"
|
||
|
|
// disabled
|
||
|
|
value={selectedOption}
|
||
|
|
onChange={(value) => handleChangeOption(value)}
|
||
|
|
// options={[
|
||
|
|
// {
|
||
|
|
// label: (
|
||
|
|
// <div style={segmentStyle}>
|
||
|
|
// <div>Barcode</div>
|
||
|
|
// <RiBarcodeFill size={25} />
|
||
|
|
// </div>
|
||
|
|
// ),
|
||
|
|
// value: 'B',
|
||
|
|
// },
|
||
|
|
// {
|
||
|
|
// value: 'Q',
|
||
|
|
// label: (
|
||
|
|
// <div style={segmentStyle}>
|
||
|
|
// <div>Qr code</div>
|
||
|
|
// <BsQrCode size={25} />
|
||
|
|
// </div>
|
||
|
|
// ),
|
||
|
|
// },
|
||
|
|
// ]}
|
||
|
|
options={[
|
||
|
|
{
|
||
|
|
label: (
|
||
|
|
<div style={segmentStyle}>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color:
|
||
|
|
selectedOption === 'B' ? '#000' : '#afafaf',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Barcode
|
||
|
|
</div>
|
||
|
|
<RiBarcodeFill
|
||
|
|
style={{
|
||
|
|
color:
|
||
|
|
selectedOption === 'B' ? '#000' : '#afafaf',
|
||
|
|
}}
|
||
|
|
size={25}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
value: 'B',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: 'Q',
|
||
|
|
label: (
|
||
|
|
<div style={segmentStyle}>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color:
|
||
|
|
selectedOption === 'Q' ? '#000' : '#afafaf',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Qr code
|
||
|
|
</div>
|
||
|
|
<BsQrCode
|
||
|
|
style={{
|
||
|
|
color:
|
||
|
|
selectedOption === 'Q' ? '#000' : '#afafaf',
|
||
|
|
}}
|
||
|
|
size={25}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br />
|
||
|
|
{/* {(filteredCoreData?.length > 0 || editMode) && <div className="BQprintSelect">
|
||
|
|
<Form.Item
|
||
|
|
name="Cross"
|
||
|
|
>
|
||
|
|
<DropDowns
|
||
|
|
options={[
|
||
|
|
...filteredCoreData.map(option => ({
|
||
|
|
value: option.ConfigId,
|
||
|
|
label: option.ConfigName,
|
||
|
|
})),
|
||
|
|
]}
|
||
|
|
placeholder="Please Enter Cross"
|
||
|
|
label={<label className="required">Size</label>}
|
||
|
|
className='field-DropDown'
|
||
|
|
isOnchanges={dropdownValue !== undefined ? true : false}
|
||
|
|
onChangeFunction={(e) => CoresOnChange(e)}
|
||
|
|
valueData={dropdownValue}
|
||
|
|
disabled={editMode}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</div>} */}
|
||
|
|
|
||
|
|
{(filteredCoreData?.length > 0 || editMode) && (
|
||
|
|
<div className="BQprintSelect">
|
||
|
|
<Form.Item name="Cross">
|
||
|
|
<label className="required">Size</label>
|
||
|
|
<div className="image-select-grid">
|
||
|
|
{displayedData.map((item) => {
|
||
|
|
const isSelected = dropdownValue === item.ConfigId;
|
||
|
|
const isDisabled = editMode;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={item.ConfigId}
|
||
|
|
className={`image-option ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''}`}
|
||
|
|
onClick={() => {
|
||
|
|
if (!isDisabled) {
|
||
|
|
CoresOnChange(item.ConfigId);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{' '}
|
||
|
|
<img
|
||
|
|
src={selectedOption === 'B' ? BarCode : QrCode}
|
||
|
|
alt={item.ConfigName}
|
||
|
|
/>
|
||
|
|
<span>{item.ConfigName}</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
cursor: 'pointer',
|
||
|
|
marginTop: '10px',
|
||
|
|
color: 'rgb(24, 144, 255)',
|
||
|
|
alignItems: 'center',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{filteredCoreData.length > 4 && (
|
||
|
|
<div
|
||
|
|
className="toggle-button"
|
||
|
|
onClick={() => setShowAll(!showAll)}
|
||
|
|
>
|
||
|
|
{showAll ? (
|
||
|
|
<>
|
||
|
|
Show Less <FaAngleUp />
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
View All <FaAngleDown />
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</Form.Item>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{dropdownValue !== undefined && (
|
||
|
|
<div className="BQprintSelectCheckBox">
|
||
|
|
<Checkbox onChange={onCheckAllChange} checked={checkAll}>
|
||
|
|
Select All
|
||
|
|
</Checkbox>
|
||
|
|
<Checkbox.Group
|
||
|
|
onChange={onCheckboxChange}
|
||
|
|
value={selectedSizeCheckedValues}
|
||
|
|
>
|
||
|
|
<Row>
|
||
|
|
{sizeCheckList
|
||
|
|
?.filter(
|
||
|
|
(filter) =>
|
||
|
|
filter.ComponentName !==
|
||
|
|
(selectedOption === 'B' ? 'Qrcode' : 'Barcode')
|
||
|
|
)
|
||
|
|
?.map((value) => {
|
||
|
|
let tooltipText = null;
|
||
|
|
|
||
|
|
if (value.ComponentName === 'E Date') {
|
||
|
|
tooltipText = 'This is the expiry date.';
|
||
|
|
} else if (value.ComponentName === 'M Date') {
|
||
|
|
tooltipText = 'This is the manufacturing date.';
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Checkbox
|
||
|
|
style={{ padding: '12px' }}
|
||
|
|
value={value.ComponentId}
|
||
|
|
key={value.ComponentId}
|
||
|
|
>
|
||
|
|
{tooltipText ? (
|
||
|
|
<Tooltip title={tooltipText}>
|
||
|
|
<span>{value.ComponentName}</span>
|
||
|
|
</Tooltip>
|
||
|
|
) : (
|
||
|
|
value.ComponentName
|
||
|
|
)}
|
||
|
|
</Checkbox>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</Row>
|
||
|
|
</Checkbox.Group>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{renderBarcodePositionOptions()}
|
||
|
|
{selectedSizeCheckedValues?.length > 0 &&
|
||
|
|
dropdownValue !== undefined && (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'flex-start',
|
||
|
|
gap: '1rem',
|
||
|
|
margin: '0.5rem 0rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="sizesavebutton" onClick={handleSizeAddOrSave}>
|
||
|
|
{editMode ? 'Update ' : 'Add'}
|
||
|
|
</div>
|
||
|
|
{editMode && (
|
||
|
|
<div
|
||
|
|
className="sizeCancelbutton"
|
||
|
|
onClick={() => handleCancel(getSizeData)}
|
||
|
|
>
|
||
|
|
{' '}
|
||
|
|
Cancel{' '}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Form>
|
||
|
|
{getSizeData?.length > 0 && (
|
||
|
|
<div className="component-table">
|
||
|
|
<Tables
|
||
|
|
columns={columns}
|
||
|
|
data={getSizeData}
|
||
|
|
dataSource={getSizeData}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{!editMode && (
|
||
|
|
<div className="buttonStyle">
|
||
|
|
<Buttons
|
||
|
|
icon={<ArrowRightOutlined />}
|
||
|
|
buttonText={'Submit'}
|
||
|
|
color="901D77"
|
||
|
|
handleSubmit={onFinish}
|
||
|
|
disabled={addnewAccess}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{/* sree */}
|
||
|
|
|
||
|
|
{/* Preview Section */}
|
||
|
|
<div className="CustomisedBSPS">
|
||
|
|
<div className="headerPreview">PREVIEW</div>
|
||
|
|
<Button
|
||
|
|
icon={<LeftOutlined />}
|
||
|
|
onClick={() => leftOnclick()}
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
top: '40%',
|
||
|
|
left: '5px',
|
||
|
|
zIndex: 2,
|
||
|
|
width: '40px',
|
||
|
|
height: '40px',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
borderRadius: '50%',
|
||
|
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Button
|
||
|
|
icon={<RightOutlined />}
|
||
|
|
onClick={() => RightOnclick()}
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
top: '40%',
|
||
|
|
right: '5px',
|
||
|
|
zIndex: 2,
|
||
|
|
width: '40px',
|
||
|
|
height: '40px',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
borderRadius: '50%',
|
||
|
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{(() => {
|
||
|
|
const componentMap = Object.fromEntries(
|
||
|
|
sizeCheckList?.map((item) => [
|
||
|
|
item.ComponentName,
|
||
|
|
item.ComponentId,
|
||
|
|
]) || []
|
||
|
|
);
|
||
|
|
|
||
|
|
// Define constants using the lookup map
|
||
|
|
const checkComponent = (name) =>
|
||
|
|
selectedSizeCheckedValues.includes(componentMap[name]);
|
||
|
|
|
||
|
|
const mrp = checkComponent('MRP');
|
||
|
|
const qrcode = checkComponent('Qrcode');
|
||
|
|
const barcode = checkComponent('Barcode');
|
||
|
|
const color = checkComponent('Color');
|
||
|
|
const eDate = checkComponent('E Date');
|
||
|
|
const mDate = checkComponent('M Date');
|
||
|
|
const sellingPrice = checkComponent('Selling Price');
|
||
|
|
const productName = checkComponent('Product Name');
|
||
|
|
const barcodeOrQr = selectedOption === 'B';
|
||
|
|
switch (sizeName) {
|
||
|
|
case '15X15 6cross':
|
||
|
|
return (
|
||
|
|
//"C", "T", "B"
|
||
|
|
!(productName || barcode || qrcode || mrp) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="SixCross15x">
|
||
|
|
{[...Array(6)].map((_, index) => (
|
||
|
|
<div className="BarQrprint5">
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="BarQrprint1details BarQrprint5Details alignCenterFlexDirectionColumn"
|
||
|
|
>
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
value === 'T' &&
|
||
|
|
handleImageTag(barcodeOrQr ? 50 : 20, 20)}
|
||
|
|
{productName && (
|
||
|
|
<div className="productNameBQ">
|
||
|
|
{productNameText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
value === 'C' &&
|
||
|
|
handleImageTag(barcodeOrQr ? 50 : 20, 20)}
|
||
|
|
{mrp && <div className="MRPBQ">{mrpText}</div>}
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
value === 'B' &&
|
||
|
|
handleImageTag(barcodeOrQr ? 50 : 20, 20)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'15mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'15mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
case '22X35 3cross':
|
||
|
|
return (
|
||
|
|
//"B","T"
|
||
|
|
!(barcode || qrcode || mrp) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="Cross32235">
|
||
|
|
{[...Array(3)].map((_, index) => (
|
||
|
|
<div className="BarQrprint4" key={index}>
|
||
|
|
<div
|
||
|
|
className="BarQrprint1details"
|
||
|
|
style={{
|
||
|
|
alignItems: 'center',
|
||
|
|
flexDirection:
|
||
|
|
value === 'T' ? 'column' : 'column-reverse',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
handleImageTag(barcodeOrQr ? 100 : 35, 35)}
|
||
|
|
{(productName || mrp) && (
|
||
|
|
<div style={{ textAlign: 'center' }}>
|
||
|
|
{productName && (
|
||
|
|
<div className="MRPBQ">
|
||
|
|
{productNameText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{mrp && (
|
||
|
|
<div className="MRPBQ">{mrpText}</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'22mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'35mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
case '25X25 4cross':
|
||
|
|
return (
|
||
|
|
//"C", "T", "B"
|
||
|
|
!(
|
||
|
|
productName ||
|
||
|
|
mDate ||
|
||
|
|
eDate ||
|
||
|
|
barcode ||
|
||
|
|
qrcode ||
|
||
|
|
mrp
|
||
|
|
) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
// 4 Cross idhu 25 * 25 * 25 * 25 = 1 inch
|
||
|
|
<>
|
||
|
|
<div className="Cross4Print">
|
||
|
|
{[...Array(4)].map((_, index) => (
|
||
|
|
<div key={index} className="BarQrprint3">
|
||
|
|
<div className="BarQrprint1details alignCenterFlexDirectionColumn">
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
value === 'T' &&
|
||
|
|
handleImageTag(barcodeOrQr ? 60 : 35, 35)}
|
||
|
|
{productName && (
|
||
|
|
<div className="productNameBQ">
|
||
|
|
{productNameText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{mrp && <div className="MRPBQ">{mrpText}</div>}
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
value === 'C' &&
|
||
|
|
handleImageTag(barcodeOrQr ? 60 : 35, 35)}
|
||
|
|
{mDate && <div className="MandateBQ"></div>}
|
||
|
|
{eDate && (
|
||
|
|
<div className="ExpdateBQ">DD-MM-YYYY</div>
|
||
|
|
)}
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
value === 'B' &&
|
||
|
|
handleImageTag(barcodeOrQr ? 60 : 35, 35)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'25mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'25mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
case '25X50 2cross':
|
||
|
|
return (
|
||
|
|
//"B","T"
|
||
|
|
!(productName || barcode || qrcode || mrp) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="TwoCrosssmain">
|
||
|
|
{[...Array(2)].map((_, index) => (
|
||
|
|
<div className="BarQrprint8">
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="Barcodeimage"
|
||
|
|
style={valueStyleColumn}
|
||
|
|
>
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
handleImageTag(barcodeOrQr ? 140 : 30, 30)}
|
||
|
|
{productName && (
|
||
|
|
<div className="productNameBQ">
|
||
|
|
{productNameText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{mrp && <div className="MRPBQ">{mrpText}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'25mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'50mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
case '50X30 Single':
|
||
|
|
return !(
|
||
|
|
productName ||
|
||
|
|
mDate ||
|
||
|
|
eDate ||
|
||
|
|
barcode ||
|
||
|
|
qrcode ||
|
||
|
|
mrp
|
||
|
|
) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="BarQrprint6" style={secondValueStyle}>
|
||
|
|
<div className="BarQrprint1details flexDirection">
|
||
|
|
{productName && (
|
||
|
|
<div className="productNameBQ">{productNameText}</div>
|
||
|
|
)}
|
||
|
|
{mDate && <div className="MandateBQ">{mDateText}</div>}
|
||
|
|
{eDate && <div className="ExpdateBQ">{eDateText}</div>}
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className="Barcodeimage flexDirection"
|
||
|
|
style={valueStyleColumn}
|
||
|
|
>
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
handleImageTag(barcodeOrQr ? 70 : 35, 35)}
|
||
|
|
{mrp && <div className="MRPBQ">{mrpText}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'30mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'50mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
case '50X25 Single':
|
||
|
|
return !(productName || mDate || barcode || qrcode || mrp) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="BarQrprint2" style={secondValueStyle}>
|
||
|
|
<div className="BarQrprint1details flexDirection">
|
||
|
|
{productName && (
|
||
|
|
<div className="productNameBQ">{productNameText}</div>
|
||
|
|
)}
|
||
|
|
{mDate && <div className="MandateBQ">{mDateText}</div>}
|
||
|
|
</div>
|
||
|
|
<div className="Barcodeimage" style={valueStyleColumn}>
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
handleImageTag(barcodeOrQr ? 70 : 35, 35)}
|
||
|
|
{mrp && <div className="MRPBQ">{mrpText}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'25mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'50mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
case '100X13 (55MM Printable)':
|
||
|
|
return (
|
||
|
|
//"C", "T", "B"
|
||
|
|
!(productName || sellingPrice || barcode || qrcode) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="BarQrprint9" style={valueStyleRow}>
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
handleImageTag(barcodeOrQr ? 140 : 35, 35)}
|
||
|
|
<div className="BarQrprint1details1">
|
||
|
|
{productName && (
|
||
|
|
<div className="productNameBQ">
|
||
|
|
{productNameText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{sellingPrice && (
|
||
|
|
<div className="SellingpriceBQ">
|
||
|
|
{sellingPriceText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'13mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'100mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
case '100X15 (70MM Printable)':
|
||
|
|
return (
|
||
|
|
// "L","R"
|
||
|
|
!(productName || sellingPrice || barcode || qrcode || mrp) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="BarQrprint1" style={valueStyleRow}>
|
||
|
|
<div className="BarQrprint1details flexDirection">
|
||
|
|
{productName && (
|
||
|
|
<div className="productNameBQ">
|
||
|
|
{productNameText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{mrp && <div className="MRPBQ">{mrpText}</div>}
|
||
|
|
{sellingPrice && (
|
||
|
|
<div className="SellingpriceBQ">
|
||
|
|
{sellingPriceText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="Qrcodeimage">
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
handleImageTag(barcodeOrQr ? 120 : 40)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'15mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'100mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
);
|
||
|
|
case '100X150':
|
||
|
|
return !(
|
||
|
|
productName ||
|
||
|
|
sellingPrice ||
|
||
|
|
mDate ||
|
||
|
|
eDate ||
|
||
|
|
color ||
|
||
|
|
barcode ||
|
||
|
|
qrcode ||
|
||
|
|
mrp
|
||
|
|
) ? (
|
||
|
|
<Empty />
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="BarQrprint7" style={secondValueStyle}>
|
||
|
|
<div className="BarQrprint1details1">
|
||
|
|
{productName && (
|
||
|
|
<div className="productNameBQ">{productNameText}</div>
|
||
|
|
)}
|
||
|
|
{sellingPrice && (
|
||
|
|
<div className="SellingpriceBQ">
|
||
|
|
{sellingPriceText}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{mDate && <div className="MandateBQ">{mDateText}</div>}
|
||
|
|
{eDate && <div className="ExpdateBQ">{eDateText}</div>}
|
||
|
|
{color && <div className="ColorBQ">{colorText}</div>}
|
||
|
|
</div>
|
||
|
|
<div className="Barcodeimage" style={valueStyleColumn}>
|
||
|
|
{(barcode || qrcode) &&
|
||
|
|
handleImageTag(barcodeOrQr ? 140 : 35, 35)}
|
||
|
|
{mrp && <div className="MRPBQ">{mrpText}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="showInfoCross4Print">
|
||
|
|
<p>
|
||
|
|
Vertical
|
||
|
|
<div>
|
||
|
|
<GiVerticalFlip size={25} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'150mm'}
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Horizontal
|
||
|
|
<div>
|
||
|
|
<GiHorizontalFlip size={30} />{' '}
|
||
|
|
</div>
|
||
|
|
- {'100mm'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
default:
|
||
|
|
return <Empty />;
|
||
|
|
}
|
||
|
|
})()}
|
||
|
|
<p>{sizeCheckList[0]?.SessionName}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BarcodeTemplateSetup;
|