Android_Retail/src/Pages/PurchaseScreen/WholeSaleComponent/AddUomPreorder.jsx

import { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Form } from 'antd';
import { Checkbox } from 'antd';
import { CgCloseR } from 'react-icons/cg';
import { ReloadOutlined } from '@ant-design/icons';

import { Messages } from '../../../Components/Notifications/Messages.jsx';
import './AddAndRemoveModal.scss';
import { InputField } from '../../../Components/Forms/InputField.jsx';
import {
  getWholesaleQuantityData,
  getWholesaleQuantityDatawithActiveStatus,
  onlineimages,
} from '../../../Features/ProductPage/ProductPage.js';
import { getSession, validateSafeInput } from '../../../Services/Others.js';
import { putWholeSaleUOMDtlStatusPreorder } from '../../../Features/WholeSale/ProductEntry.js';
import { DefaultModal } from '../../../Components/Modal/DefaultModal.jsx';
import {
  deleteConfiguration,
  postConfiguration,
} from '../../../Features/ConfigMasterPage/ConfigMasterPage.js';
import {
  configTypeActiveDataSelector,
  getActiveConfigTypeNames,
} from '../../../Features/ConfigTypePage/ConfigTypePage.js';

const AddUOMPreorder = (props) => {
  console.log(props, 'mohantest');
  const formRef = useRef(null);
  const dispatch = useDispatch();
  const AppId = getSession('AppId');
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const UserId = getSession('UserId');
  // const WholeSaleProductList = useSelector(GlobalWholeSaleProduct)
  // const SelectedProductList = useSelector(GlobalWSDefaultProduct)
  // const WSProductList = WholeSaleProductList?.filter(item => item?.ActiveStatus == "A")
  const ConfigTypeNames = useSelector(configTypeActiveDataSelector);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [WSUomName, setWSUomName] = useState(null);

  const [ParentUomdata, setParentUomdata] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [ListData, SetListData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const TypeNames = ConfigTypeNames.filter((item) =>
    [
      'Designation',
      'Product Quality',
      'Wholesale Extra Charges',
      'Wholesale Unit Of Measure',
      'Wholesale Quantity',
      'Wholesale Screen Name',
      'Wholesale Payment Mode',
    ].includes(item.TypeName)
  );

  const itemsPerPage = 10;

  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = ListData.slice(indexOfFirstItem, indexOfLastItem);

  const totalPages = Math.ceil(ListData.length / itemsPerPage);

  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  useEffect(() => {
    fetchUOMDtl();
    uomFetchfun();
  }, []);

  const fetchUOMDtl = async () => {
    let res = await dispatch(
      getWholesaleQuantityDatawithActiveStatus()
    ).unwrap();
    if (res?.data?.statusCode == 1) {
      SetListData(res?.data?.data);
      setParentUomdata(res?.data?.data);
    }
  };

  const uomFetchfun = async () => {
    dispatch(getActiveConfigTypeNames({ Type: 'AW' })).unwrap();
  };
  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);
  const handleSetAsDefault = async (e) => {
    let data = TypeNames?.find(
      (e) => e?.TypeName == 'Wholesale Quantity'
    )?.TypeId;
    let Putdata = {
      TypeId: data,
      ConfigId: e,
      UpdatedBy: UserId,
    };
    let defaultprod = await dispatch(
      putWholeSaleUOMDtlStatusPreorder(Putdata)
    ).unwrap();
    if (defaultprod?.data?.statusCode == 1) {
      await fetchUOMDtl();
      props.HandleModalClose();
      setSearchQuery('');
      SetListData(ParentUomdata);
    }
  };

  const DeleteProduct = async (row, ActiveStatus) => {
    let deleteData = {
      ConfigId: row.ConfigId,
      ActiveStatus: row.ActiveStatus == 'A' ? 'D' : 'A',
      UpdatedBy: getSession('UserId'),
    };
    let response = await dispatch(deleteConfiguration(deleteData)).unwrap();
    if (response?.data?.statusCode == 1) {
      await fetchUOMDtl();
      await dispatch(getWholesaleQuantityData());
    }
  };

  const addUOMData = async () => {
    let data = TypeNames?.find(
      (e) => e?.TypeName == 'Wholesale Quantity'
    )?.TypeId;
    const postData = {
      TypeId: data,
      ConfigName: WSUomName,
      AlphaNumFId: AppId,
      // NumFId: selectedNumericId,
      CreatedBy: getSession('UserId'),
    };

    let response = await dispatch(postConfiguration(postData)).unwrap();

    if (response?.data?.statusCode == 1) {
      fetchUOMDtl();
      setWSUomName();
      formRef.current.resetFields();
    }
  };
  const handleSearchChange = (e) => {
    const searchValue = e?.toLowerCase(); // Ensure case-insensitivity
    setSearchQuery(searchValue);
    setCurrentPage(1); // Update the search query state
    if (e != '') {
      const filteredProducts = ParentUomdata?.filter((item) =>
        item.ConfigName?.toLowerCase()?.includes(searchValue)
      );
      SetListData(filteredProducts);
    } else {
      SetListData(ParentUomdata);
    }
  };
  return (
    <div className="AddUOMTest-Master">
      <DefaultModal
        open={props.AddsuppOpen}
        //   title="SUPPLIER"
        handleCancel={() => {
          props.HandleModalClose();
          setSearchQuery('');
          SetListData(ParentUomdata);
        }}
        footer={false}
        width={500}
        className={'AddUOMTest-MasterModal'}
        children={
          <>
            <Messages
              messageType={messageType}
              messageData={messageData}
              onComplete={onComplete}
            />
            <div className="main-adduomtest">
              {/* <h>Add UOM</h> */}
              <Form ref={formRef} className="adduom-main">
                <div className="centerDiv">
                  <div className="uomInput1">
                    <Form.Item
                      name="ConfigName"
                      rules={[
                        {
                          required: true,
                          pattern: /^(?!\s*$).+/,
                          message: 'Please Enter UOM Name',
                        },
                        {
                          validator: async (_, value) => {
                            await validateSafeInput(value);

                            if (value && value.length > 20) {
                              return Promise.reject(
                                'UOM Name should not exceed 20 characters'
                              );
                            }

                            return Promise.resolve();
                          },
                        },
                      ]}
                    >
                      <InputField
                        // label={<label class="required">UOM Name</label>}
                        autocomplete="off"
                        value={WSUomName}
                        onChange={(e) => setWSUomName(e?.target?.value)}
                        isOnChange={WSUomName?.length > 0 ? true : false}
                      />
                    </Form.Item>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      gap: '10px',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                    }}
                  >
                    <div>
                      {' '}
                      <button
                        className="inputsof-TGT-btn"
                        onClick={() => {
                          addUOMData();
                        }}
                      >
                        ADD
                      </button>
                    </div>

                    <div className="Uomsearch">
                      <InputField
                        value={searchQuery}
                        onChange={(e) => handleSearchChange(e?.target?.value)}
                        autoComplete="off"
                        label="Search"
                      />
                    </div>
                  </div>
                </div>
              </Form>
              <div className="centerDiv1">
                {currentItems?.map((item, index) => (
                  <div key={index} className="RemoveProdList">
                    <div>{`${indexOfFirstItem + index + 1}. ${item?.ConfigName}`}</div>
                    {item?.ActiveStatus === 'A' ? (
                      <div className="reloadCloseSelect">
                        <Checkbox
                          onClick={() => {
                            handleSetAsDefault(item?.ConfigId);
                          }}
                          checked={item?.NumFId == '1'}
                        ></Checkbox>
                        <CgCloseR
                          color="#ff7875"
                          onClick={() => {
                            DeleteProduct(item, item?.ActiveStatus);
                          }}
                        />
                      </div>
                    ) : (
                      <div className="reloadCloseSelect">
                        <ReloadOutlined
                          style={{
                            color: '#52C41A',
                          }}
                          onClick={() => {
                            DeleteProduct(item, item?.ActiveStatus);
                          }}
                        />
                      </div>
                    )}
                  </div>
                ))}
              </div>

              {/* Pagination Controls */}
              <div className="paginationControls">
                {[...Array(totalPages)].map((_, pageIndex) => (
                  <button
                    key={pageIndex}
                    onClick={() => handlePageChange(pageIndex + 1)}
                    className={currentPage === pageIndex + 1 ? 'active' : ''}
                  >
                    {pageIndex + 1}
                  </button>
                ))}
              </div>
            </div>
          </>
        }
      ></DefaultModal>
    </div>
  );
};
export default AddUOMPreorder;