409 lines
13 KiB
React
409 lines
13 KiB
React
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
||
|
|
import { useDispatch } from 'react-redux';
|
||
|
|
import FormHeader from '../PageComponents/FormHeader';
|
||
|
|
import { Checkbox, Form, Space } from 'antd';
|
||
|
|
import Buttons from '../../Components/Forms/Buttons';
|
||
|
|
import { Messages } from '../../Components/Notifications/Messages';
|
||
|
|
import { RadioGrpButton } from '../../Components/Forms/RadioGroup.jsx';
|
||
|
|
import { ArrowRightOutlined } from '@ant-design/icons';
|
||
|
|
import { DropDowns } from '../../Components/Forms/DropDown';
|
||
|
|
import { getLayoutCategories } from '../../Features/BookingScreen/BookingData/BookingData';
|
||
|
|
import { getSession } from '../../Services/Others';
|
||
|
|
import {
|
||
|
|
changeBreadCrumb,
|
||
|
|
getEmpAccess,
|
||
|
|
} from '../../Features/AppPage/CenterPage.js';
|
||
|
|
import {
|
||
|
|
getProdListBasedOnCat,
|
||
|
|
putCancelAppProd,
|
||
|
|
} from '../../Features/CancelReschedule/CancelApplicableProd';
|
||
|
|
import '../../Styles/CancelReschedule/CancelApplicableProd.scss';
|
||
|
|
import { Tables } from '../../Components/Tables/Table.jsx';
|
||
|
|
import { useAuth } from '../../AuthContext.jsx';
|
||
|
|
|
||
|
|
const subDirectory = import.meta.env.BASE_URL;
|
||
|
|
|
||
|
|
const CancelApplicableProd = () => {
|
||
|
|
const { SadminuserAccess } = useAuth();
|
||
|
|
let SAAccessCommonMaster = SadminuserAccess?.find(
|
||
|
|
(e) => e?.MenuName === 'Cancel Applicable Products'
|
||
|
|
);
|
||
|
|
|
||
|
|
const dispatch = useDispatch();
|
||
|
|
const formRef = useRef();
|
||
|
|
const CompId = getSession('CompId');
|
||
|
|
const BranchId = getSession('BranchId');
|
||
|
|
const AppId = getSession('AppId');
|
||
|
|
const UserId = getSession('UserId');
|
||
|
|
const UserType = getSession('UserType');
|
||
|
|
const [messageType, setMessageType] = useState(null);
|
||
|
|
const [messageData, setMessageData] = useState(null);
|
||
|
|
const [selCancelProdType, setselCancelProdType] = useState('APY');
|
||
|
|
const [AllCategory, setAllCategory] = useState([]);
|
||
|
|
const [selProdCat, setselProdCat] = useState(null);
|
||
|
|
const [SelCatProds, setSelCatProds] = useState([]);
|
||
|
|
const [AllSelCatProds, setAllSelCatProds] = useState([]);
|
||
|
|
const [SelectData, setSelectData] = useState([]);
|
||
|
|
const [UnCheckedProd, setUnCheckedProd] = useState([]);
|
||
|
|
const [AllCalAppProd, setAllCalAppProd] = useState([]);
|
||
|
|
const [page, setpage] = useState(1);
|
||
|
|
const [empData, setEmpData] = useState();
|
||
|
|
const [addnewAccess, setaddnewAccess] = useState(true);
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{
|
||
|
|
name: 'Home',
|
||
|
|
link: `${subDirectory}app-page/home`,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getLayoutCategoriesdata();
|
||
|
|
dispatch(changeBreadCrumb({ items: items }));
|
||
|
|
// if (UserType === "Employee") {
|
||
|
|
// fetchApi()
|
||
|
|
// }
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
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';
|
||
|
|
} else if (UserType === 'Super Admin User') {
|
||
|
|
hasAccess = SAAccessCommonMaster?.AddAccess === '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 === 'Cancel Applicable Products'
|
||
|
|
);
|
||
|
|
setEmpData(datas?.[0]);
|
||
|
|
};
|
||
|
|
|
||
|
|
const selectCancelProdType = (e) => {
|
||
|
|
setselCancelProdType(e);
|
||
|
|
};
|
||
|
|
const getLayoutCategoriesdata = async () => {
|
||
|
|
let res = await dispatch(
|
||
|
|
getLayoutCategories({ CompId: CompId, AppId: AppId, BranchId: BranchId })
|
||
|
|
).unwrap();
|
||
|
|
if (res?.data?.statusCode === 1) {
|
||
|
|
setAllCategory(res?.data?.data);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const SelectProductCategory = async (e) => {
|
||
|
|
formRef.current?.setFieldsValue({ ProdCat: e });
|
||
|
|
setselProdCat(e);
|
||
|
|
let data = {
|
||
|
|
CompId: CompId,
|
||
|
|
AppId: AppId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
ProdCat: e,
|
||
|
|
type: 'C',
|
||
|
|
};
|
||
|
|
let res = await dispatch(getProdListBasedOnCat(data)).unwrap();
|
||
|
|
if (res?.data?.statusCode === 1) {
|
||
|
|
setSelCatProds(res?.data?.data);
|
||
|
|
setAllSelCatProds(res?.data?.data?.map((i) => i.ProdId));
|
||
|
|
|
||
|
|
let allapiY = res?.data?.data
|
||
|
|
?.filter((item) => item.CancelAvailable === 'Y')
|
||
|
|
?.map((i) => i.ProdId);
|
||
|
|
|
||
|
|
let notinUncheck = allapiY?.filter(
|
||
|
|
(item) => !UnCheckedProd?.includes(item)
|
||
|
|
);
|
||
|
|
if (SelectData?.some((item) => notinUncheck?.includes(item))) {
|
||
|
|
let notinSeldata = notinUncheck?.filter(
|
||
|
|
(item) => !SelectData?.includes(item)
|
||
|
|
);
|
||
|
|
setSelectData([...SelectData, ...notinSeldata]);
|
||
|
|
} else {
|
||
|
|
setSelectData([...SelectData, ...notinUncheck]);
|
||
|
|
}
|
||
|
|
|
||
|
|
let TempAvalProd = res?.data?.data
|
||
|
|
?.filter((item) => item.CancelAvailable === 'Y')
|
||
|
|
?.map((i) => i.ProdId);
|
||
|
|
if (AllCalAppProd?.some((item) => TempAvalProd?.includes(item))) {
|
||
|
|
setAllCalAppProd([...AllCalAppProd]);
|
||
|
|
} else {
|
||
|
|
setAllCalAppProd([
|
||
|
|
...AllCalAppProd,
|
||
|
|
...res?.data?.data
|
||
|
|
?.filter((item) => item.CancelAvailable === 'Y')
|
||
|
|
?.map((i) => i.ProdId),
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setSelCatProds([]);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const addeddata = (record) => {
|
||
|
|
if (SelectData?.includes(record.ProdId)) {
|
||
|
|
setSelectData(SelectData?.filter((a) => a != record.ProdId));
|
||
|
|
if (AllCalAppProd?.includes(record.ProdId)) {
|
||
|
|
setUnCheckedProd([...UnCheckedProd, record.ProdId]);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
setSelectData([...SelectData, record.ProdId]);
|
||
|
|
if (AllCalAppProd?.includes(record.ProdId)) {
|
||
|
|
setUnCheckedProd(UnCheckedProd?.filter((b) => b != record.ProdId));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const selectAllProd = () => {
|
||
|
|
if (AllSelCatProds.every((item) => SelectData.includes(item))) {
|
||
|
|
let fillprod = SelectData?.filter(
|
||
|
|
(item) => !AllSelCatProds.includes(item)
|
||
|
|
);
|
||
|
|
setSelectData([...fillprod]);
|
||
|
|
let uncheckdata = AllCalAppProd?.filter(
|
||
|
|
(item) => !fillprod?.includes(item)
|
||
|
|
);
|
||
|
|
setUnCheckedProd(uncheckdata);
|
||
|
|
} else if (AllSelCatProds.some((item) => SelectData.includes(item))) {
|
||
|
|
let fillprod = SelectData?.filter(
|
||
|
|
(item) => !AllSelCatProds.includes(item)
|
||
|
|
);
|
||
|
|
setSelectData([...fillprod, ...AllSelCatProds]);
|
||
|
|
let temseldata = [...fillprod, ...AllSelCatProds];
|
||
|
|
let uncheckdata = AllCalAppProd?.filter(
|
||
|
|
(item) => !temseldata?.includes(item)
|
||
|
|
);
|
||
|
|
setUnCheckedProd(uncheckdata);
|
||
|
|
} else {
|
||
|
|
setSelectData([...SelectData, ...AllSelCatProds]);
|
||
|
|
let temseldata = [...SelectData, ...AllSelCatProds];
|
||
|
|
let uncheckdata = AllCalAppProd?.filter(
|
||
|
|
(item) => !temseldata?.includes(item)
|
||
|
|
);
|
||
|
|
setUnCheckedProd(uncheckdata);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: 'Sl.No',
|
||
|
|
key: 'sno',
|
||
|
|
align: 'center',
|
||
|
|
width: '100px',
|
||
|
|
render: (text, object, index) => (
|
||
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Product Name',
|
||
|
|
dataIndex: 'ProdName',
|
||
|
|
key: 'ProdName',
|
||
|
|
width: '100px',
|
||
|
|
render: (text, record) => (
|
||
|
|
<a style={{ color: 'black' }}>
|
||
|
|
{record.ProdName + '(' + record.Size + record.UOMName + ')'}
|
||
|
|
</a>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: () => (
|
||
|
|
<Checkbox
|
||
|
|
checked={AllSelCatProds.every((item) => SelectData.includes(item))}
|
||
|
|
onChange={selectAllProd}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
key: 'Action',
|
||
|
|
dataIndex: 'Action',
|
||
|
|
width: '80px',
|
||
|
|
render: (text, record) => (
|
||
|
|
<Space size="middle">
|
||
|
|
<Checkbox
|
||
|
|
checked={SelectData?.includes(record.ProdId) ? true : false}
|
||
|
|
onClick={() => addeddata(record)}
|
||
|
|
/>
|
||
|
|
</Space>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const onFinish = async () => {
|
||
|
|
const ProdAppDtl = SelectData?.map((item) => ({ ProdId: item }));
|
||
|
|
const ProdNotAppDtl = UnCheckedProd?.map((item) => ({ ProdId: item }));
|
||
|
|
let dataAPY = {
|
||
|
|
CompId: CompId,
|
||
|
|
AppId: AppId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
ProductApplicableDetails: [],
|
||
|
|
ProductNotApplicableDetails: [],
|
||
|
|
AllProducts: 'Y',
|
||
|
|
UpdatedBy: UserId,
|
||
|
|
};
|
||
|
|
let dataAPN = {
|
||
|
|
CompId: CompId,
|
||
|
|
AppId: AppId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
ProductApplicableDetails: [],
|
||
|
|
ProductNotApplicableDetails: [],
|
||
|
|
AllProducts: 'N',
|
||
|
|
UpdatedBy: UserId,
|
||
|
|
};
|
||
|
|
let dataPB = {
|
||
|
|
CompId: CompId,
|
||
|
|
AppId: AppId,
|
||
|
|
BranchId: BranchId,
|
||
|
|
ProductApplicableDetails: ProdAppDtl,
|
||
|
|
ProductNotApplicableDetails: ProdNotAppDtl,
|
||
|
|
AllProducts: 'P',
|
||
|
|
UpdatedBy: UserId,
|
||
|
|
};
|
||
|
|
|
||
|
|
let res = await dispatch(
|
||
|
|
putCancelAppProd(
|
||
|
|
selCancelProdType === 'APY'
|
||
|
|
? dataAPY
|
||
|
|
: selCancelProdType === 'APN'
|
||
|
|
? dataAPN
|
||
|
|
: selCancelProdType === 'PB'
|
||
|
|
? dataPB
|
||
|
|
: ''
|
||
|
|
)
|
||
|
|
).unwrap();
|
||
|
|
if (res?.data?.statusCode === 1) {
|
||
|
|
setMessageType('success');
|
||
|
|
setMessageData(res?.data?.response);
|
||
|
|
setselCancelProdType('APY');
|
||
|
|
setselProdCat(null);
|
||
|
|
setSelCatProds([]);
|
||
|
|
setAllSelCatProds([]);
|
||
|
|
setSelectData([]);
|
||
|
|
setUnCheckedProd([]);
|
||
|
|
setAllCalAppProd([]);
|
||
|
|
formRef.current?.resetFields();
|
||
|
|
} else {
|
||
|
|
setMessageType('error');
|
||
|
|
setMessageData(res?.data?.response);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const onComplete = useCallback(() => {
|
||
|
|
setMessageData(null);
|
||
|
|
setMessageType(null);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handlePageChange = (current) => {
|
||
|
|
setpage(current);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="pageOverAll">
|
||
|
|
<div className="userPage">
|
||
|
|
<div className="userPageContent">
|
||
|
|
<Messages
|
||
|
|
messageType={messageType}
|
||
|
|
messageData={messageData}
|
||
|
|
onComplete={onComplete}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div className="formName">
|
||
|
|
<FormHeader title={'Cancel Applicable Products'} />
|
||
|
|
</div>
|
||
|
|
<div className="formDivCan">
|
||
|
|
<div className="CancellationProd-div">
|
||
|
|
<Form ref={formRef} onFinish={onFinish}>
|
||
|
|
<div>
|
||
|
|
<Form.Item name="CancelProdType">
|
||
|
|
<li className="drp_btn_Emp">
|
||
|
|
<div className="Cancel-Form-radio">
|
||
|
|
<RadioGrpButton
|
||
|
|
content={[
|
||
|
|
{ value: 'APY', label: 'Select All Products' },
|
||
|
|
{ value: 'APN', label: 'Remove All Products' },
|
||
|
|
{ value: 'PB', label: 'Product Based' },
|
||
|
|
]}
|
||
|
|
fieldState={true}
|
||
|
|
defaultSelect={selCancelProdType}
|
||
|
|
onSelectFuntion={(e) => selectCancelProdType(e)}
|
||
|
|
onClickFunction={(e) => selectCancelProdType(e)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</Form.Item>
|
||
|
|
</div>
|
||
|
|
{selCancelProdType === 'PB' && (
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
<Form.Item
|
||
|
|
name="ProdCat"
|
||
|
|
rules={[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
pattern: /^(?!\s*$).+/,
|
||
|
|
message: 'Please Enter Category',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
>
|
||
|
|
<DropDowns
|
||
|
|
options={AllCategory?.map((option) => ({
|
||
|
|
value: option.ProdCat,
|
||
|
|
label: option.ProdCatName,
|
||
|
|
}))}
|
||
|
|
label={
|
||
|
|
<label class="required">Product Category</label>
|
||
|
|
}
|
||
|
|
className="field-DropDown"
|
||
|
|
onChangeFunction={(e) => SelectProductCategory(e)}
|
||
|
|
valueData={selProdCat}
|
||
|
|
isOnChange={selProdCat !== null ? true : false}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{SelCatProds?.length > 0 && (
|
||
|
|
<div className="CancelProdTable">
|
||
|
|
<Tables
|
||
|
|
columns={columns}
|
||
|
|
data={SelCatProds}
|
||
|
|
dataSource={SelCatProds}
|
||
|
|
pagination={handlePageChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
<div className="CancelProd-submitButton">
|
||
|
|
<Buttons
|
||
|
|
buttonText="SUBMIT"
|
||
|
|
color="901D77"
|
||
|
|
icon={<ArrowRightOutlined />}
|
||
|
|
onClick={() => onFinish()}
|
||
|
|
disabled={addnewAccess}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CancelApplicableProd;
|