Merge pull request 'Refactor: move to components and optimize code' (#89) from feature/pricebulkchanges into main
Reviewed-on: Pozomind/pozo-retail-app#89
This commit is contained in:
commit
2a3c388088
|
|
@ -1,6 +1,8 @@
|
|||
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
|
||||
import { axiosRetailInstanceData,axiosRetailOcrData } from '../AuthenicationToken/AuthenticationToken';
|
||||
|
||||
import {
|
||||
axiosRetailInstanceData,
|
||||
axiosRetailOcrData,
|
||||
} from '../AuthenicationToken/AuthenticationToken';
|
||||
|
||||
// get Product dropdown
|
||||
export const getProductData = createAsyncThunk(
|
||||
|
|
@ -28,17 +30,13 @@ export const getInvoiceImageData = createAsyncThunk(
|
|||
if (!file) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file); // 👈 actual file here
|
||||
formData.append('file', file); // 👈 actual file here
|
||||
|
||||
const response = await axiosRetailOcrData.post(
|
||||
"/invoice",
|
||||
formData,
|
||||
{
|
||||
const response = await axiosRetailOcrData.post('/invoice', formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
return response.data;
|
||||
}
|
||||
|
|
@ -125,16 +123,34 @@ export const postPurchaseData = createAsyncThunk(
|
|||
export const getPurchaseData = createAsyncThunk(
|
||||
'Stock/getPurchaseData',
|
||||
async (ProdData) => {
|
||||
console.log(ProdData, 'ProdData');
|
||||
if (
|
||||
ProdData?.CompId != null &&
|
||||
ProdData?.CompId != undefined &&
|
||||
ProdData?.BranchId != null &&
|
||||
ProdData?.BranchId != undefined &&
|
||||
ProdData?.AppId != null &&
|
||||
ProdData?.AppId != undefined
|
||||
ProdData?.AppId != undefined &&
|
||||
ProdData?.OrderFromDate &&
|
||||
ProdData?.OrderToDate
|
||||
) {
|
||||
const params = new URLSearchParams({
|
||||
compId: ProdData.CompId,
|
||||
branchId: ProdData.BranchId,
|
||||
appId: ProdData.AppId,
|
||||
fromDate: ProdData.OrderFromDate,
|
||||
toDate: ProdData.OrderToDate,
|
||||
});
|
||||
|
||||
if (ProdData?.search) {
|
||||
params.append('searchText', ProdData.search);
|
||||
}
|
||||
if (ProdData?.PageNumber) {
|
||||
params.append('pageNumber', ProdData.PageNumber);
|
||||
}
|
||||
|
||||
return await axiosRetailInstanceData.get(
|
||||
`/Purchase?compId=${ProdData?.CompId}&branchId=${ProdData?.BranchId}&appId=${ProdData?.AppId}`
|
||||
`/Purchase?${params.toString()}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -306,7 +322,7 @@ const StockSlice = createSlice({
|
|||
name: 'Stock',
|
||||
initialState,
|
||||
extraReducers: (builder) => {
|
||||
builder.addCase(getProductData.fulfilled, (state, action) => {
|
||||
(builder.addCase(getProductData.fulfilled, (state, action) => {
|
||||
if (action?.payload?.status) {
|
||||
state.ProductData = action?.payload?.data?.data?.filter(
|
||||
(item) => item?.ProdTypeName === 'Product'
|
||||
|
|
@ -335,7 +351,7 @@ const StockSlice = createSlice({
|
|||
} else {
|
||||
state.PurchaseData = [];
|
||||
}
|
||||
});
|
||||
}));
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,94 @@
|
|||
import { Table, message } from 'antd';
|
||||
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
|
||||
|
||||
const QRCodeCopiesModal = ({
|
||||
open,
|
||||
onClose,
|
||||
type = 'stock', // 'stock' or 'product'
|
||||
onFinish,
|
||||
QrandbarcodeDatas,
|
||||
setQrandbarcodeDatas,
|
||||
}) => {
|
||||
const title = type === 'stock' ? 'Stock Wise Qrcode' : 'Product Wise Qrcode';
|
||||
const showStockIndication = type === 'stock';
|
||||
const totalCopies = QrandbarcodeDatas?.reduce(
|
||||
(sum, item) => sum + Number(item?.copiesCount || 0),
|
||||
0
|
||||
);
|
||||
const handleSubmit = () => {
|
||||
if (totalCopies == 0) {
|
||||
message.error('Please enter copies count');
|
||||
return;
|
||||
} else {
|
||||
onClose();
|
||||
onFinish();
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: 'Product Name', dataIndex: 'productName', key: 'productName' },
|
||||
{
|
||||
title: 'Copies Count',
|
||||
dataIndex: 'copiesCount',
|
||||
key: 'copiesCount',
|
||||
render: (text, record) => (
|
||||
<input
|
||||
className="inputpwiseQR"
|
||||
type="number"
|
||||
min="1"
|
||||
value={record.copiesCount}
|
||||
onChange={(e) => {
|
||||
const newValue =
|
||||
type === 'product'
|
||||
? parseInt(e.target.value) || 1
|
||||
: parseInt(e.target.value);
|
||||
setQrandbarcodeDatas((prev) =>
|
||||
prev.map((item) =>
|
||||
item.key === record.key
|
||||
? { ...item, copiesCount: newValue }
|
||||
: item
|
||||
)
|
||||
);
|
||||
}}
|
||||
style={{ width: '80px' }}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DefaultModal
|
||||
open={open}
|
||||
title={title}
|
||||
handleCancel={onClose}
|
||||
handleSubmit={handleSubmit}
|
||||
footer={true}
|
||||
children={
|
||||
<>
|
||||
<div className="ProductList-pwiseQrcode">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={QrandbarcodeDatas}
|
||||
rowKey="ProdId"
|
||||
pagination={false}
|
||||
size="small"
|
||||
rowClassName={
|
||||
showStockIndication
|
||||
? (record) => (record.StockAvailable === 'N' ? 'row-red' : '')
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{showStockIndication && (
|
||||
<div className="indicationInfo">
|
||||
<p></p>
|
||||
<span>Stock is not Maintained</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default QRCodeCopiesModal;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,22 +1,27 @@
|
|||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { PlusOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
import { Image, Table } from 'antd';
|
||||
import { PlusOutlined, EyeOutlined, PrinterFilled } from '@ant-design/icons';
|
||||
import { Image, Pagination, Space, Table } from 'antd';
|
||||
import {
|
||||
changeBreadCrumb,
|
||||
getEmpAccess,
|
||||
} from '../../Features/AppPage/CenterPage.js';
|
||||
import QRCode from 'qrcode';
|
||||
import { Tables } from '../../Components/Tables/Table';
|
||||
import FormHeader from '../PageComponents/FormHeader.jsx';
|
||||
import Search from '../../Components/Forms/Search.jsx';
|
||||
import { style, getPageStyle } from '../Product/Printstyles.js';
|
||||
import Buttons from '../../Components/Forms/Buttons';
|
||||
import {
|
||||
getSession,
|
||||
dateFormatChange,
|
||||
ExtractDateFormate,
|
||||
printDiv,
|
||||
} from '../../Services/Others';
|
||||
import { Messages } from '../../Components/Notifications/Messages';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
getStockData,
|
||||
getProductData,
|
||||
|
|
@ -45,8 +50,27 @@ import '../../Styles/Employee/EmpMaster.scss';
|
|||
import { IoEye } from 'react-icons/io5';
|
||||
import { useAuth } from '../../AuthContext.jsx';
|
||||
import { getPreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
|
||||
import {
|
||||
getBarcodeSessionsIDs,
|
||||
getBarcodeTemplate,
|
||||
} from '../../Features/Barcode/Barcode.js';
|
||||
import StickerPrintModel from '../Product/StickerPrintModal.jsx';
|
||||
import StickerPrintTemplates from '../Product/StickerTemplates.jsx';
|
||||
import QRCodeCopiesModal from '../Product/QRCodeCopiesModal.jsx';
|
||||
import { DatePicker } from 'antd';
|
||||
import {
|
||||
generateBarcode,
|
||||
generateCodeImage,
|
||||
generateQRCode,
|
||||
generateQRCodeCopy,
|
||||
} from '../../Services/utils.js';
|
||||
const { RangePicker } = DatePicker;
|
||||
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';
|
||||
const subDirectory = import.meta.env.BASE_URL;
|
||||
|
||||
const previewText = 'Barcode Preview';
|
||||
const items = [
|
||||
{
|
||||
name: 'Home',
|
||||
|
|
@ -59,6 +83,7 @@ const items = [
|
|||
];
|
||||
|
||||
const StockList = () => {
|
||||
const formRef = useRef();
|
||||
const { SadminuserAccess } = useAuth();
|
||||
let SAAccessCommonMaster = SadminuserAccess?.find(
|
||||
(e) => e?.MenuName === 'Product Receipt'
|
||||
|
|
@ -71,15 +96,15 @@ const StockList = () => {
|
|||
const AppId = getSession('AppId');
|
||||
const UserId = getSession('UserId');
|
||||
const UserType = getSession('UserType');
|
||||
|
||||
const [printReady, setPrintReady] = useState(false);
|
||||
const StockData = useSelector(purchaseDataSelector);
|
||||
console.log(StockData, 'StockData');
|
||||
const SupplierData = useSelector(supplierSelector);
|
||||
const excelDataValues = useSelector(excelDataSelector);
|
||||
|
||||
const TaxData = useSelector(taxSelector);
|
||||
const [filteredInfo, setFilteredInfo] = useState({});
|
||||
const [sortedInfo, setSortedInfo] = useState({});
|
||||
const [searchedText, setSearchedText] = useState('');
|
||||
const [messageType, setMessageType] = useState(null);
|
||||
const [messageData, setMessageData] = useState(null);
|
||||
|
||||
|
|
@ -103,19 +128,58 @@ const StockList = () => {
|
|||
const [imageModal, setImageModal] = useState(false);
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||||
const [IMEISeriandata, setIMEISeriandata] = useState([]);
|
||||
|
||||
const [base64Image, setBase64Image] = useState(null);
|
||||
const [barcodeBase64Image, setBarcodeBase64Image] = useState(null);
|
||||
const [dropdownValue, setDropdownValue] = useState();
|
||||
const [QrandbarcodeDatas, setQrandbarcodeDatas] = useState([]);
|
||||
const [printProductName, setPrintProductName] = useState(false);
|
||||
const [copies, setCopies] = useState();
|
||||
const [coresdata, setCoresdata] = useState([]);
|
||||
const [barcodeTemplateDetails, setBarcodeTemplateDetails] = useState([]);
|
||||
const [stockWiseQrcode, setstockWiseQrcode] = useState(false);
|
||||
const [productWiseQrcode, setProductWiseQrcode] = useState(false);
|
||||
const [selectedRecords, setSelectedRecords] = useState([]);
|
||||
const [activeTab, setActiveTab] = useState('stock');
|
||||
const [MultiCode, setMultiCode] = useState(true);
|
||||
const [TotalCount, setTotalCount] = useState(null);
|
||||
const [dateStrings, setDateStrings] = useState([
|
||||
dayjs().format('YYYY-MM-DD'),
|
||||
dayjs().format('YYYY-MM-DD'),
|
||||
]);
|
||||
const [SearchText, setSearchText] = useState(null);
|
||||
const [debouncedSearchText, setDebouncedSearchText] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedSearchText(SearchText);
|
||||
}, 500);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [SearchText]);
|
||||
console.log(QrandbarcodeDatas, 'QrandbarcodeDatas');
|
||||
const [templateOptions, setTemplateOptions] = useState({
|
||||
mrp: false,
|
||||
barcode: false,
|
||||
color: false,
|
||||
eDate: false,
|
||||
mDate: false,
|
||||
sellingPrice: false,
|
||||
productName: false,
|
||||
value: '',
|
||||
secondValue: '',
|
||||
qrcode: false,
|
||||
codeType: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
fetchData();
|
||||
// dispatch(
|
||||
// getStockData({ CompId: CompId, BranchId: BranchId, AppId: AppId })
|
||||
// ).unwrap();
|
||||
} catch (err) {
|
||||
console.log(err, 'err');
|
||||
}
|
||||
getPreference();
|
||||
// if (UserType === "Employee") {
|
||||
// fetchApi()
|
||||
// }
|
||||
getBarcodeSessionData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -154,6 +218,7 @@ const StockList = () => {
|
|||
|
||||
useEffect(() => {
|
||||
dispatch(changeBreadCrumb({ items: items }));
|
||||
barcodeApiData();
|
||||
}, []);
|
||||
async function fetchData() {
|
||||
if (location?.state?.Notiffy) {
|
||||
|
|
@ -161,7 +226,81 @@ const StockList = () => {
|
|||
setMessageData(location?.state?.Notiffy.messageData);
|
||||
}
|
||||
}
|
||||
const fetchDataget = async ({ queryKey }) => {
|
||||
const [_, dates, page] = queryKey;
|
||||
const Response = await dispatch(
|
||||
getPurchaseData({
|
||||
AppId: AppId,
|
||||
BranchId: BranchId,
|
||||
CompId: CompId,
|
||||
OrderFromDate: dates?.[0] ?? '',
|
||||
OrderToDate: dates?.[1] ?? '',
|
||||
PageNumber: page,
|
||||
})
|
||||
).unwrap();
|
||||
if (Response?.data?.statusCode === 1) {
|
||||
setTotalCount(Response?.data?.TotalCount);
|
||||
return Response?.data?.data;
|
||||
} else {
|
||||
setTotalCount(0);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
const handleDateChange = (dates, dateStrings) => {
|
||||
// setDateRange(dateStrings);
|
||||
if (dateStrings[0] && dateStrings[1]) {
|
||||
setDateStrings(dateStrings);
|
||||
setpage(1);
|
||||
}
|
||||
};
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ['purchaseEntry', dateStrings, page],
|
||||
queryFn: fetchDataget,
|
||||
enabled: true,
|
||||
staleTime: 1000 * 60 * 5,
|
||||
cacheTime: 1000 * 60 * 30,
|
||||
keepPreviousData: true,
|
||||
refetchOnMount: 'always',
|
||||
refetchOnWindowFocus: true,
|
||||
refetchOnReconnect: true,
|
||||
});
|
||||
|
||||
const { data: countData } = useQuery({
|
||||
queryKey: ['searchPurchaseEntry', debouncedSearchText],
|
||||
queryFn: searchData,
|
||||
enabled: !!debouncedSearchText,
|
||||
staleTime: 1000 * 60 * 5,
|
||||
cacheTime: 1000 * 60 * 30,
|
||||
keepPreviousData: true,
|
||||
refetchOnMount: 'always',
|
||||
refetchOnWindowFocus: true,
|
||||
refetchOnReconnect: true,
|
||||
});
|
||||
|
||||
const filteredData = debouncedSearchText ? countData || [] : data || [];
|
||||
console.log(data, countData, '1111111111111111', filteredData);
|
||||
async function searchData({ queryKey }) {
|
||||
const [_, SearchText] = queryKey;
|
||||
|
||||
const Response = await dispatch(
|
||||
getPurchaseData({
|
||||
AppId: AppId,
|
||||
BranchId: BranchId,
|
||||
CompId: CompId,
|
||||
OrderFromDate: dateStrings?.[0] ?? '',
|
||||
OrderToDate: dateStrings?.[1] ?? '',
|
||||
search: SearchText,
|
||||
})
|
||||
).unwrap();
|
||||
if (Response?.data?.statusCode === 1) {
|
||||
setTotalCount(Response?.data?.TotalCount);
|
||||
setpage(1);
|
||||
return Response?.data?.data;
|
||||
} else {
|
||||
setTotalCount(0);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
const handleChange = (pagination, filters, sorter) => {
|
||||
setFilteredInfo(filters);
|
||||
setSortedInfo(sorter);
|
||||
|
|
@ -172,10 +311,10 @@ const StockList = () => {
|
|||
};
|
||||
|
||||
const onSearch = (value) => {
|
||||
setSearchedText(value);
|
||||
setSearchText(e?.target?.value);
|
||||
};
|
||||
const onSearchChange = (e) => {
|
||||
setSearchedText(e?.target?.value);
|
||||
setSearchText(e?.target?.value);
|
||||
};
|
||||
const getPreference = async () => {
|
||||
const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
|
||||
|
|
@ -243,6 +382,40 @@ const StockList = () => {
|
|||
return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
|
||||
}
|
||||
|
||||
const QrandBarcodeDats = async (ProdDetails) => {
|
||||
const result = await Promise.all(
|
||||
ProdDetails.map(async (item) => {
|
||||
const data = await QRCode.toDataURL(item.QRCode);
|
||||
|
||||
return {
|
||||
key: item.QRCode,
|
||||
url: data,
|
||||
productName: item.ProdName,
|
||||
copiesCount: item.AcceptedQty,
|
||||
StockAvailable: item.StockAvailable,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
setQrandbarcodeDatas((prev) => [...prev, ...result]);
|
||||
};
|
||||
|
||||
const Qrcode = (record) => {
|
||||
setSelectedRecords(record?.ProdDetails);
|
||||
QrandBarcodeDats(record?.ProdDetails);
|
||||
setOpen(true);
|
||||
};
|
||||
const barcodeApiData = async () => {
|
||||
const getResponse = await dispatch(
|
||||
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];
|
||||
setBarcodeTemplateDetails(TemplateDetails);
|
||||
}
|
||||
}
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: 'Sl.No',
|
||||
|
|
@ -264,13 +437,6 @@ const StockList = () => {
|
|||
{extractLastNumberOrderId(text, row?.FYStatus)}
|
||||
</a>
|
||||
),
|
||||
filteredValue: [searchedText],
|
||||
onFilter: (value, record) => {
|
||||
return extractLastNumberOrderId(record.InvoiceNo, record?.FYStatus)
|
||||
?.toString()
|
||||
.toLowerCase()
|
||||
.includes(value.toLowerCase());
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Invoice Amount',
|
||||
|
|
@ -341,6 +507,29 @@ const StockList = () => {
|
|||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Print',
|
||||
key: 'Print',
|
||||
dataIndex: 'Print',
|
||||
width: '100px',
|
||||
align: 'center',
|
||||
render: (_, record) => (
|
||||
// productData.length >= 1 ? (
|
||||
<Space size="middle">
|
||||
{record?.ProdDetails?.some((item) => item?.QRCode != null) ? (
|
||||
<a>
|
||||
<PrinterFilled
|
||||
style={{ fontSize: '20px' }}
|
||||
onClick={() => Qrcode(record)}
|
||||
/>
|
||||
</a>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</Space>
|
||||
),
|
||||
// ) : null,
|
||||
},
|
||||
];
|
||||
const Proddetailcolumns = [
|
||||
{
|
||||
|
|
@ -475,11 +664,41 @@ const StockList = () => {
|
|||
navigate(`${subDirectory}setting/purchase-entry/new`);
|
||||
};
|
||||
//------------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
const getBarcodeSessionData = async () => {
|
||||
try {
|
||||
let resp = await dispatch(getBarcodeSessionsIDs()).unwrap();
|
||||
if (resp?.data?.statusCode === 1) {
|
||||
setCoresdata(
|
||||
resp?.data?.data?.filter(
|
||||
(item) => !item.ConfigName?.includes('100X13 (55MM Printable Gold)')
|
||||
) || []
|
||||
);
|
||||
} else {
|
||||
setCoresdata([]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching barcode session data:', error);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
Bulkuploadsubdata();
|
||||
}, []);
|
||||
|
||||
const imageUrlToBase64 = async (url) => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => resolve(reader.result);
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching or converting image:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const Bulkuploadsubdata = async () => {
|
||||
dispatch(
|
||||
getSupplierData({ AppId: AppId, BranchId: BranchId, CompId: CompId })
|
||||
|
|
@ -727,7 +946,7 @@ const StockList = () => {
|
|||
SellPrice: item.SalesPrice,
|
||||
OnePcsPrice: item.AmountPerPiece,
|
||||
NoOfPcs: item.NumberofPieceInside,
|
||||
WhSalePrice: item.WholesalePrice
|
||||
WhSalePrice: item.WholesalePrice,
|
||||
})),
|
||||
};
|
||||
});
|
||||
|
|
@ -759,7 +978,17 @@ const StockList = () => {
|
|||
setMessageData('No data to submit. Please upload an Excel file.');
|
||||
}
|
||||
};
|
||||
|
||||
const CoresOnChange = (params) => {
|
||||
setDropdownValue(params);
|
||||
formRef.current?.setFieldsValue({ Cross: params });
|
||||
const template = barcodeTemplateDetails?.find(
|
||||
(find) => find.SessionName === params
|
||||
);
|
||||
const checkComponent = (name) =>
|
||||
template?.OptionDetails?.some((some) => some.OptionName === name);
|
||||
const productName = checkComponent('Product Name');
|
||||
setPrintProductName(productName);
|
||||
};
|
||||
// const ProductName = Productdata ?.map((e)=>e.ProdName+' '(+e.Size+' '+e.UomName))
|
||||
const ProductName = Productdata?.map(
|
||||
(e) => `${e.ProdName} (${e.Size} ${e.UomName})`
|
||||
|
|
@ -810,6 +1039,162 @@ const StockList = () => {
|
|||
|
||||
// return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
|
||||
// }
|
||||
|
||||
const onFinish = async () => {
|
||||
const template = barcodeTemplateDetails?.find(
|
||||
(find) => find.SessionName === dropdownValue
|
||||
);
|
||||
const templateAvailable = template === undefined ? false : true;
|
||||
|
||||
if (templateAvailable) {
|
||||
const checkComponent = (name) =>
|
||||
template?.OptionDetails?.some((some) => some.OptionName === name);
|
||||
const mrp = checkComponent('MRP');
|
||||
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 qrcode = checkComponent('Qrcode');
|
||||
const position = template.Position !== '' ? template.Position : '';
|
||||
const positionString =
|
||||
template.PositionString !== '' ? template.PositionString : '';
|
||||
|
||||
setTemplateOptions({
|
||||
mrp: mrp,
|
||||
barcode: barcode,
|
||||
color: color,
|
||||
eDate: eDate,
|
||||
mDate: mDate,
|
||||
sellingPrice: sellingPrice,
|
||||
productName: productName,
|
||||
value: position,
|
||||
secondValue: positionString,
|
||||
qrcode: qrcode,
|
||||
codeType: template?.CodeType,
|
||||
});
|
||||
}
|
||||
|
||||
setPrintReady(true);
|
||||
setTimeout(async () => {
|
||||
switch (dropdownValue) {
|
||||
case '15X15 6cross':
|
||||
await printDiv(
|
||||
templateAvailable ? 'label-15X156cross' : 'StickerPrints0',
|
||||
style + getPageStyle(92)
|
||||
);
|
||||
break;
|
||||
case '22X35 3cross':
|
||||
await printDiv(
|
||||
templateAvailable ? '22X353cross' : 'StickerPrints1',
|
||||
style + getPageStyle(105)
|
||||
);
|
||||
break;
|
||||
case '25X25 4cross':
|
||||
await printDiv(
|
||||
templateAvailable ? '25X254cross' : 'StickerPrints2',
|
||||
style + getPageStyle(100)
|
||||
);
|
||||
break;
|
||||
case '25X50 2cross':
|
||||
await printDiv(
|
||||
templateAvailable ? '25X502cross' : 'StickerPrints3',
|
||||
style + getPageStyle(100)
|
||||
);
|
||||
break;
|
||||
case '50X30 Single':
|
||||
await printDiv(
|
||||
templateAvailable ? '50X30Single' : 'StickerPrints4',
|
||||
style
|
||||
);
|
||||
break;
|
||||
case '50X25 Single':
|
||||
await printDiv(
|
||||
templateAvailable ? '50X25Single' : 'StickerPrints5',
|
||||
style
|
||||
);
|
||||
break;
|
||||
case '100X13 (55MM Printable)':
|
||||
await printDiv(
|
||||
templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6',
|
||||
style
|
||||
);
|
||||
break;
|
||||
case '100X15 (70MM Printable)':
|
||||
await printDiv(
|
||||
templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7',
|
||||
style
|
||||
);
|
||||
break;
|
||||
case '100X150':
|
||||
await printDiv(
|
||||
templateAvailable ? '100X150' : 'StickerPrints8',
|
||||
style
|
||||
);
|
||||
break;
|
||||
default:
|
||||
alert('! Select correct cross ');
|
||||
}
|
||||
handleQRStickerPrinterModelCancel();
|
||||
setPrintReady(false);
|
||||
}, 100);
|
||||
};
|
||||
const handleQRStickerPrinterModelCancel = () => {
|
||||
setDropdownValue();
|
||||
setCopies();
|
||||
setOpen(false);
|
||||
formRef?.current?.resetFields();
|
||||
setSelectedRecords([]);
|
||||
setQrandbarcodeDatas([]);
|
||||
// setMultiCode(false);
|
||||
};
|
||||
const totalCopies = QrandbarcodeDatas?.reduce(
|
||||
(sum, item) => sum + Number(item?.copiesCount || 0),
|
||||
0
|
||||
);
|
||||
|
||||
const CopiesOnChange = (params) => {
|
||||
setCopies(params);
|
||||
formRef.current?.setFieldsValue({ Copies: params });
|
||||
};
|
||||
|
||||
const imageTagBarcodeAndQR = useCallback(
|
||||
(w = 'auto', fs = '6px', codeData = null) => {
|
||||
const currentCode = codeData;
|
||||
return (
|
||||
(templateOptions.barcode || templateOptions.qrcode) && (
|
||||
<>
|
||||
<img
|
||||
style={{ width: w }}
|
||||
src={
|
||||
templateOptions.codeType === 'B'
|
||||
? !MultiCode
|
||||
? barcodeBase64Image
|
||||
: generateBarcode(currentCode)
|
||||
: !MultiCode
|
||||
? base64Image
|
||||
: generateQRCode(QrandbarcodeDatas, code)
|
||||
}
|
||||
alt="Barcode"
|
||||
/>
|
||||
{templateOptions.codeType !== 'B' && (
|
||||
<p style={{ margin: '0', padding: '0', fontSize: fs }}>
|
||||
{currentCode}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
);
|
||||
},
|
||||
[templateOptions, MultiCode, barcodeBase64Image, base64Image]
|
||||
);
|
||||
|
||||
const countOfProduct = debouncedSearchText
|
||||
? countData?.length
|
||||
? countData?.length
|
||||
: 0
|
||||
: TotalCount;
|
||||
return (
|
||||
<div className="userPageTable">
|
||||
<div className="userPageContent">
|
||||
|
|
@ -822,14 +1207,28 @@ const StockList = () => {
|
|||
<div>
|
||||
<FormHeader title={'Product Receipt'} />
|
||||
</div>
|
||||
<div className="searchAddDiv">
|
||||
<div className="formSearch">
|
||||
<div
|
||||
className="searchAddDiv"
|
||||
style={{ justifyContent: 'flex-start' }}
|
||||
>
|
||||
<div className="formSearch" style={{ Width: '200px' }}>
|
||||
<Search
|
||||
placeholder="Search by Invoice No"
|
||||
onSearch={onSearch}
|
||||
onSearchChange={onSearchChange}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ width: '200px' }}>
|
||||
<RangePicker
|
||||
placeholder={['Start Date', 'End Date']}
|
||||
format="DD-MMM-YY"
|
||||
defaultValue={[dayjs(), dayjs()]}
|
||||
onChange={handleDateChange}
|
||||
disabledDate={(current) =>
|
||||
current && current > dayjs().startOf('day')
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="commonMaster-btn" style={{ display: 'flex' }}>
|
||||
<div>
|
||||
<TertiaryButton
|
||||
|
|
@ -856,11 +1255,25 @@ const StockList = () => {
|
|||
<div className="reportTable">
|
||||
<Tables
|
||||
columns={columns}
|
||||
data={StockData}
|
||||
dataSource={StockData}
|
||||
data={filteredData}
|
||||
dataSource={filteredData}
|
||||
onChange={handleChange}
|
||||
pagination={handlePageChange}
|
||||
// pagination={handlePageChange}
|
||||
/>{' '}
|
||||
{countOfProduct > 10 && (
|
||||
<Pagination
|
||||
className="producttablepagination"
|
||||
current={page}
|
||||
total={countOfProduct}
|
||||
pageSize={10}
|
||||
onChange={handlePageChange}
|
||||
showSizeChanger={false}
|
||||
// showQuickJumper={true}
|
||||
showTotal={(total) =>
|
||||
`Total ${countOfProduct ? countOfProduct : 0} items`
|
||||
}
|
||||
/>
|
||||
)}{' '}
|
||||
</div>
|
||||
</div>
|
||||
<DefaultModal
|
||||
|
|
@ -975,6 +1388,63 @@ const StockList = () => {
|
|||
</div>
|
||||
}
|
||||
/>
|
||||
<StickerPrintModel
|
||||
open={open}
|
||||
handleCancel={handleQRStickerPrinterModelCancel}
|
||||
formRef={formRef}
|
||||
onFinish={onFinish}
|
||||
MultiCode={true}
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
selectedRecords={selectedRecords}
|
||||
coresdata={coresdata}
|
||||
dropdownValue={dropdownValue}
|
||||
CoresOnChange={CoresOnChange}
|
||||
barcodeTemplateDetails={barcodeTemplateDetails}
|
||||
detail={null}
|
||||
CopiesOnChange={CopiesOnChange}
|
||||
printProductName={printProductName}
|
||||
totalCopies={totalCopies}
|
||||
setstockWiseQrcode={setstockWiseQrcode}
|
||||
setProductWiseQrcode={setProductWiseQrcode}
|
||||
templateOptions={templateOptions}
|
||||
/>
|
||||
|
||||
{printReady && (
|
||||
<StickerPrintTemplates
|
||||
selectedRecords={selectedRecords}
|
||||
copies={copies || totalCopies}
|
||||
detail={null}
|
||||
templateOptions={templateOptions}
|
||||
base64Image={base64Image}
|
||||
QrandbarcodeDatas={QrandbarcodeDatas}
|
||||
MultiCode={true}
|
||||
generateQRCodeCopy={(code) =>
|
||||
generateQRCodeCopy(QrandbarcodeDatas, code)
|
||||
}
|
||||
generateCodeImage={generateCodeImage}
|
||||
imageTagBarcodeAndQR={imageTagBarcodeAndQR}
|
||||
dropdownValue={dropdownValue}
|
||||
barcodeTemplateDetails={barcodeTemplateDetails}
|
||||
/>
|
||||
)}
|
||||
<QRCodeCopiesModal
|
||||
open={stockWiseQrcode}
|
||||
onClose={() => setstockWiseQrcode(false)}
|
||||
type="stock"
|
||||
onFinish={onFinish}
|
||||
QrandbarcodeDatas={QrandbarcodeDatas}
|
||||
setQrandbarcodeDatas={setQrandbarcodeDatas}
|
||||
/>
|
||||
|
||||
<QRCodeCopiesModal
|
||||
open={productWiseQrcode}
|
||||
onClose={() => setProductWiseQrcode(false)}
|
||||
type="product"
|
||||
onFinish={onFinish}
|
||||
QrandbarcodeDatas={QrandbarcodeDatas}
|
||||
setQrandbarcodeDatas={setQrandbarcodeDatas}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import {
|
||||
ChangeTotalAmount,
|
||||
globalExtraTotalAmount,
|
||||
} from "../Features/ExteraCharges/ExtraCharges";
|
||||
} from '../Features/ExteraCharges/ExtraCharges';
|
||||
|
||||
export const useUtilsComponent = () => {
|
||||
const dispatch = useDispatch();
|
||||
const extraCharges = useSelector(globalExtraTotalAmount);
|
||||
|
||||
const removeExtraCharge = (item) => {
|
||||
const filtered = extraCharges?.filter(
|
||||
(e) => e?.localId !== item?.localId
|
||||
);
|
||||
const filtered = extraCharges?.filter((e) => e?.localId !== item?.localId);
|
||||
dispatch(ChangeTotalAmount(filtered));
|
||||
};
|
||||
|
||||
|
|
@ -19,3 +17,36 @@ export const useUtilsComponent = () => {
|
|||
removeExtraCharge,
|
||||
};
|
||||
};
|
||||
export const generateBarcode = (code) => {
|
||||
try {
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
JsBarcode(svg, code, {
|
||||
format: 'CODE128',
|
||||
displayValue: false,
|
||||
lineColor: '#030303',
|
||||
width: 2,
|
||||
height: 40,
|
||||
});
|
||||
const svgData = new XMLSerializer().serializeToString(svg);
|
||||
return `data:image/svg+xml;base64,${btoa(svgData)}`;
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
export const generateQRCode = (QrandbarcodeDatas, code) => {
|
||||
let Data = QrandbarcodeDatas?.find((e) => e?.key === code)?.url;
|
||||
return Data;
|
||||
};
|
||||
export const generateQRCodeCopy = (QrandbarcodeDatas, code) => {
|
||||
const found = QrandbarcodeDatas?.find((e) => e?.key === code);
|
||||
|
||||
const count = Number(found?.copiesCount);
|
||||
return Number.isFinite(count) && count > 0 ? count : 0;
|
||||
};
|
||||
export const generateCodeImage = (code, codeType = 'Q') => {
|
||||
if (codeType === 'B') {
|
||||
return generateBarcode(code);
|
||||
} else {
|
||||
return generateQRCode(QrandbarcodeDatas, code);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue