From f9966ad94b6e90d84670d25e96ec5dcf9e194477 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Feb 2026 13:15:50 +0530 Subject: [PATCH] Added new Get Post Delete --- .../ProductCatlogue/ProductcatlogueList.jsx | 3173 ++++++----------- 1 file changed, 1170 insertions(+), 2003 deletions(-) diff --git a/src/Pages/ProductCatlogue/ProductcatlogueList.jsx b/src/Pages/ProductCatlogue/ProductcatlogueList.jsx index 935ccf1..620cc76 100644 --- a/src/Pages/ProductCatlogue/ProductcatlogueList.jsx +++ b/src/Pages/ProductCatlogue/ProductcatlogueList.jsx @@ -1,29 +1,20 @@ import { useEffect, useState, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { getSession, handleGeneratePDF } from '../../Services/Others'; +import { getSession } from '../../Services/Others.js'; import { changeBreadCrumb, getEmpAccess, } from '../../Features/AppPage/CenterPage.js'; -import { Radio, Table, Form, Tooltip, Skeleton } from 'antd'; +import { Radio, Table, Form, Tooltip, Skeleton, message } from 'antd'; import FormHeader from '../PageComponents/FormHeader.jsx'; -import { Search } from '../../Components/Forms/Search'; -import { - WhatsAppOutlined, - MessageOutlined, - MailOutlined, - ArrowRightOutlined, -} from '@ant-design/icons'; +import { Search } from '../../Components/Forms/Search.jsx'; +import { ArrowRightOutlined } from '@ant-design/icons'; import { DropDowns } from '../../Components/Forms/DropDown.jsx'; import Buttons from '../../Components/Forms/Buttons.jsx'; import Imageupload from '../../Components/Forms/Upload.jsx'; import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx'; -import { uploadImage } from '../../Features/upload/upload'; -import wp from '../../Images/Assets/wp.svg'; -import sms from '../../Images/Assets/sms.png'; -import mail from '../../Images/Assets/gmail 1.png'; -import printer from '../../Images/Assets/printer.png'; -import CatalogueTemplate1 from '../ProductCatlogue/CatalogueTemplate1.jsx'; +import { uploadImage } from '../../Features/upload/upload.js'; +import CatalogueTemplate1 from './CatalogueTemplate1.jsx'; import { getProdcataloguedata, onlineimages, @@ -31,7 +22,10 @@ import { changeCataloguecheckboxdata, GlobalCataloguecheckboxdata, ProductCatalogue, -} from '../../Features/ProductCatlog/ProductCatlogue'; + getProductCatalogueData, + postProductCatalogue, + putProductCatalogue, +} from '../../Features/ProductCatlog/ProductCatlogue.js'; import '../../Styles/ProductCatalogue/ProductCatalogue.scss'; import CatalogueTemplate2 from './CatalogueTemplate2.jsx'; import CatalogueTemplate3 from './CatalogueTemplate3.jsx'; @@ -41,16 +35,20 @@ import _ from 'lodash'; import { TbWorldSearch } from 'react-icons/tb'; import { useAuth } from '../../AuthContext.jsx'; import { printDiv } from '../../Services/WSOthers.js'; +import { useLocation, useNavigate } from 'react-router-dom'; const subDirectory = import.meta.env.ENV_BASE_URL; function ProductcatalogueList() { const dispatch = useDispatch(); + const location = useLocation(); + const editstate = location?.state; 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 navigate = useNavigate(); const { SadminuserAccess } = useAuth(); let SAAccessCommonMaster = SadminuserAccess?.find( @@ -58,43 +56,54 @@ function ProductcatalogueList() { ); const checkboxdata = useSelector(GlobalCataloguecheckboxdata); - // const [sortedInfo, setSortedInfo] = useState({}); const [searchedText, setSearchedText] = useState(''); + const [selectionType, setSelectionType] = useState('checkbox'); + const [selectedProductCatalogue, setselectedProductCatalogue] = useState(); const [selectedRowKeys, setSelectedRowKeys] = useState( checkboxdata?.length > 0 ? checkboxdata : [] ); - const [selectionType, setSelectionType] = useState('checkbox'); - const [Cataloguetable, setCataloguetable] = useState(); - const [selectedProductCatalogue, setselectedProductCatalogue] = useState(); + + const [data, setdata] = useState([]); const [page, setpage] = useState(1); const [imageopen, setimageOpen] = useState(); - const [onlineImage, setOnlineImage] = useState(null); const [imagedata, setimagedata] = useState(); const [selectedImageIndex, setSelectedImageIndex] = useState(null); const [selectedImages, setSelectedImages] = useState({}); const [selectedProductName, setSelectedProductName] = useState(null); const [selectedImage, setSelectedImage] = useState(null); - const [selectedRowData, setSelectedRowData] = useState(); - const [data, setdata] = useState([]); const [Template, setTemplate] = useState(); - const [imageUrl, setImageUrl] = useState(''); const [FilteredInfo, setFilteredInfo] = useState(); const [empData, setEmpData] = useState(); const [addnewAccess, setaddnewAccess] = useState(true); const [filteredTableData, setfilteredTableData] = useState(data); + const [cataloguedata, setCataloguedata] = useState([]); + const [productCount, setProductCount] = useState([]); + const pageSize = 10; + const tableDisplayData = ( filteredTableData?.length > 0 ? filteredTableData : data )?.map((e, index) => ({ ...e, index: index + 1, })); - console.log(filteredTableData, 'filteredTableData'); const items = [ { name: 'Home', link: `${subDirectory}app-page/home`, }, + + { + name: 'Catlogue', + link: `${subDirectory}setting/product-catalogue`, + }, + { + name: editstate ? 'Edit' : 'New', + link: null, + link: editstate + ? `${subDirectory}setting/product-catalogue/update` + : `${subDirectory}setting/product-catalogue/new`, + }, ]; function safeRound(amountStr) { @@ -206,15 +215,23 @@ function ProductcatalogueList() { // render: (text) => {text}, // }, ]; - useEffect(() => { - dispatch(changeBreadCrumb({ items: items })); + dispatch(changeBreadCrumb({ items })); Catlogdata(); Configdata(); - // if (UserType === "Employee") { - // fetchApi() - // } + + if (editstate?.editMode && Array.isArray(editstate?.catalogueData)) { + const catalogueToEdit = editstate.catalogueData; + + setselectedProductCatalogue({ + ConfigId: catalogueToEdit[0]?.CatalogType, + ConfigName: catalogueToEdit[0]?.CatalogTypeName, + }); + + setSelectedRowKeys(catalogueToEdit.map((item) => item.key)); + } }, []); + useEffect(() => { if (UserType === 'Employee') { fetchApi(); @@ -260,42 +277,22 @@ function ProductcatalogueList() { e?.map((item, index) => data?.push({ key: index, + ProdId: item?.ProdId, ProdName: item?.ProdName, - SellPrice: - item?.ProductDetail?.[0]?.ProdVariantDetails?.[0]?.StockDetails?.[0] - ?.SellPrice, - UomName: - '(' + - item?.ProductDetail?.[0]?.Size + - ' ' + - item?.ProductDetail?.[0]?.UomName + - ')', - ProdLogo: item?.ProductDetail?.[0]?.ProdLogo, + SellPrice: item?.MRP, + UomName: '(' + item?.Size + ' ' + item?.UomName + ')', + ProdLogo: item?.ProdLogo, + OfferDtl: item?.OfferDtl, }) ); setdata(data); }; - // const dataPushFun=async(e)=>{ - // let data=[] - // e?.map((item, index) => - // data?.push({ - // key: index, - // ProdName: item?.ProdName, - // SellPrice:item?.ProductDetail[0]?.StockDetails?.[0]?.SellPrice, - // UomName: item?.ProductDetail[0]?.Size +" "+"("+item?.ProductDetail[0]?.UomName+")", - // ProdLogo: item?.ProductDetail[0]?.ProdLogo, - // }) - // ); - // setdata(data) - // } - const onSelectChange = (newSelectedRowKeys) => { let Filteredrowdata = data?.filter((a) => newSelectedRowKeys?.includes(a.key) ); - + setCataloguedata(Filteredrowdata); setSelectedRowKeys(newSelectedRowKeys); - setSelectedRowData(Filteredrowdata); dispatch(changeCataloguedata(Filteredrowdata)); dispatch(changeCataloguecheckboxdata(newSelectedRowKeys)); }; @@ -304,7 +301,7 @@ function ProductcatalogueList() { let Filteredrowdata = data?.filter((a) => selectedRowKeys?.includes(a.key) ); - setSelectedRowData(Filteredrowdata); + setCataloguedata(Filteredrowdata); dispatch(changeCataloguedata(Filteredrowdata)); } }, [data]); @@ -320,7 +317,7 @@ function ProductcatalogueList() { setSearchedText(e?.target?.value); }; const filterData = (data, searchText) => { - // setpage(1) + setpage(1); return data.filter( (record) => @@ -383,12 +380,16 @@ function ProductcatalogueList() { }, [imageopen]); const Catlogdata = async () => { - let data = { CompId: CompId, BranchId: BranchId, AppId: AppId }; - - const response = await dispatch(getProdcataloguedata(data)).unwrap(); + let data = { + CompId: CompId, + BranchId: BranchId, + AppId: AppId, + PageNumber: page, + }; + const response = await dispatch(getProductCatalogueData(data)).unwrap(); if (response?.data?.statusCode == 1) { - setCataloguetable(response?.data?.data); dataPushFun(response?.data?.data); + setProductCount(response?.data?.TotalCount); } }; @@ -448,9 +449,6 @@ function ProductcatalogueList() { ...prevSelectedImages, [selectedImageIndex]: uploadImgData?.data?.image, })); - - setOnlineImage(uploadImgData?.data?.image); - setImageUrl(uploadImgData?.data?.image); formRef?.current?.setFieldsValue({ OnlineImage: file }); let updatedData = _.cloneDeep([...data]); if (selectedImageIndex >= 0) { @@ -466,795 +464,570 @@ function ProductcatalogueList() { }; const CatLog1 = ``; const CatLog2 = ``; const CatLog3 = ``; - - const CatLog4 = ``; + + const CatLog4 = ``; + .catalogue-template-4 { + background-image: linear-gradient(to right, #252a69, #016ab6) !important; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + .catalogue-page { + page-break-after: always; + min-height: 297mm; + background-image: linear-gradient(to right, #252a69, #016ab6) !important; + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + .catalogue-page:last-child { + page-break-after: auto; + } + + .page-header, + .page-footer, + .content-section-4 { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + + .content-section-4 { + background-image: linear-gradient(to right, #252a69, #016ab6) !important; + } +} +`; const CatLog5 = ``; const CatLog6 = ``; + // post Api call + const postCatalogueData = async () => { + if (!selectedProductCatalogue?.ConfigId) { + message.error('Please select a template'); + return; } - .CTemplate4Header { - width: inherit; - padding: 0rem 0rem 0rem 1rem; - display: flex; - flex-direction: row; - align-items: center; - position:relative; + const baseData = { + AppId, + CompId, + BranchId, + CatalogType: selectedProductCatalogue?.ConfigId, + Products: cataloguedata?.map((prod) => ({ + ProdId: prod.ProdId, + OfferId: prod.OfferDtl?.[0]?.OfferId || '', + })), + }; + + const data = editstate?.editMode + ? { ...baseData, UpdatedBy: UserId } + : { ...baseData, CreatedBy: UserId }; + + try { + const response = editstate?.editMode + ? await dispatch(putProductCatalogue(data)).unwrap() + : await dispatch(postProductCatalogue(data)).unwrap(); + + if (response?.data?.statusCode === 1) { + message.success(response?.data?.response); + await Print(); + dispatch(changeCataloguedata()); + navigate(`${subDirectory}setting/product-catalogue`); + } else { + message.error(response?.data?.response); + } + } catch (err) { + message.error('Something went wrong. Please try again.'); } - - .CTemplate4SubHeader { - display: flex; - flex-direction: row; - align-items: center; - gap: '0.5rem' - } - - .CTemplate4Line { - width: 100%; - background-color: #fce400; - } - - .CTemplate4HeaderText1 { - color: #fce400; - display: flex; - flex-direction: row; - gap: 0.2rem; - } - - .CTemplate4HeaderText1sub { - color: #fce400; - width: 27%; - font-size: 20px; - display: flex; - justify-content: center; - text-align: center; - } - - .CTemplate4HeaderText2 { - color: #fce400; - margin: 0rem 0.5rem; - font-size: 25px; - font-weight: 600; - } - - .CTemplate4persent { - padding: 0.5rem; - margin: 0rem 0.5rem; - background-color: #fce400; - border-radius: 10px; - color: #184d90; - } - - .CTemplate4CardMasterDiv { - width: 6rem; - height: 165px; - margin: 1rem 0rem; - border-radius: 10px; - gap: '0.2rem'; - position: relative; - } - - .CTemplate4CardContent { - width: 7rem; - background-color: #fff; - color: #000; - font-size: 14px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - margin-bottom: 0.2rem; - border-radius: 10px; - padding: 5px; - } - - .CTemplate4Pricing { - display: flex; - flex-direction: column; - width: 100%; - height: 35px; - background-color: #fce400; - border-radius: 0px 18px 0px 10px; - font-size: 12px; - padding: 5px; - font-weight: 700; - text-align: center; - padding-right: 6rem; - font-family: 'Montserrat', sans-serif; - } - - .CTemplate4Offer { - background-color: #bf2523; - position: absolute; - width: 60px; - left: 3rem; - height: 60px; - text-align: center; - border-radius: 50%; - padding: 0.6rem; - font-weight: 700; - color: #fce400; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - bottom: -45px; - font-family: 'Montserrat', sans-serif; - font-size: 15px; - } - - .CTemplate4ProductImage { - width: 90px; - height: 90px; - } - - .CTemplate4CardContainer { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - gap: 2.7rem; - padding: 0rem 0rem 4rem 0rem; - } - .table-header - { - width:100%; - height:125px; - } - - .CTemplate4Fotter { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - gap: 0.5rem; - width: 100%; - height: 100px; - background-color: #fff; - background-image: linear-gradient(to right, #252a69, #016ab6) !important; - } - - - .CTemplate4FotterAddress { - padding: 1rem; - display: flex; - justify-content: center; - align-items: center; - background-image: linear-gradient(to right, #252a69, #016ab6); - width: 14rem; - height: 2.5rem; - border-radius: 0.2rem; - } - - .CTemplate4Fotterphone { - background-color: #252a69; - width: 12rem; - height: 2rem; - border-radius: 0.2rem; - color: #fff; - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; - } - - .CTemplate4Fotterinfo { - font-family: 'Montserrat', sans-serif; - display: flex; - gap: 1rem; - flex-direction: column; - padding: 0.5rem; - float: right; - } - - - .CTemplate4MasterDiv .PrintA4Style { - font-family: 'Inconsolata', monospace; - width: 100%; - background-color: #fff; - } - `; + }; const Print = async () => { const StyleName = { @@ -3758,14 +2913,25 @@ font-weight:600; 'Catalogue 6': 'CatLog4', }; - const StyleId = StyleIDs?.[selectedProductCatalogue]; - const Style = StyleName?.[selectedProductCatalogue]; - + const StyleId = StyleIDs?.[selectedProductCatalogue?.ConfigName]; + const Style = StyleName?.[selectedProductCatalogue?.ConfigName]; await printDiv(StyleId, Style); }; - const handleProductTypeDropDownChange = (e) => { - setselectedProductCatalogue(e); + const handleProductTypeDropDownChange = (selectedValue) => { + if (selectedValue) { + const selectedOption = Template.find( + (item) => item.ConfigId === selectedValue + ); + if (selectedOption) { + setselectedProductCatalogue({ + ConfigId: selectedOption.ConfigId, + ConfigName: selectedOption.ConfigName, + }); + } + } else { + setselectedProductCatalogue(null); + } }; return ( @@ -3800,14 +2966,14 @@ font-weight:600; > ({ - value: option?.ConfigName, + value: option?.ConfigId, label: option?.ConfigName, }))} label="Templates" className="field-DropDown" // isOnchanges={(editstate?.ProdType || SelectedProductType)?true:false} onChangeFunction={(e) => handleProductTypeDropDownChange(e)} - valueData={selectedProductCatalogue} + valueData={selectedProductCatalogue?.ConfigName} // disabled={(formType == "edit" && !editstate?.ProdTypeName=="Others" )? true : false} /> @@ -3826,12 +2992,16 @@ font-weight:600; columns={columns} dataSource={tableDisplayData} pagination={{ - onChange: handlePageChange, - defaultPageSize: 10, + // current: page, + // pageSize: pageSize, + // total: productCount, showSizeChanger: false, - hideOnSinglePage: true, + onChange: handlePageChange, }} onChange={handleChange} + // defaultPageSize: 10, + + // hideOnSinglePage: true, /> @@ -3879,7 +3049,7 @@ font-weight:600; >
{(() => { - switch (selectedProductCatalogue) { + switch (selectedProductCatalogue?.ConfigName) { case 'Catalogue 1': return ; case 'Catalogue 2': @@ -3916,13 +3086,14 @@ font-weight:600; color="901D77" icon={} htmlType={true} - handleSubmit={() => Print('Catlog')} + // handleSubmit={() => Print('Catlog')} + handleSubmit={() => postCatalogueData()} disabled={ (data?.length == 0 || selectedProductCatalogue == undefined) && addnewAccess } /> -
+ {/*
- {/* */} - {/* */} - {/* - */}
-
+
*/}
);