) {\r\n var divFirstTimePanel = {\r\n display: this.state.firstTimePanel ? 'block' : 'none'\r\n };\r\n var divLoginPanel = {\r\n display: this.state.loginPanel ? 'block' : 'none'\r\n };\r\n\r\n var disableMe = (this.state.formType == null ? true : false)\r\n var reverseDisableMe = (this.state.formType == null ? false : true)\r\n var title = \"\";\r\n if (this.state.formType == \"CR\")\r\n title = \"Continue Registration\";\r\n else if (this.state.formType == \"RR\")\r\n title = \"Renew Registration\";\r\n else if (this.state.formType == \"FT\")\r\n title = \"First Time Registration\";\r\n else if (this.state.formType == \"VP\")\r\n title = \"View Profile\";\r\n else\r\n title = \"First Time Registration\";\r\n\r\n //const selectedRCountry = (this.state.vendorMainData != null ? this.state.vendorMainData.vrRcountryid : this.state.selectedRCountry);\r\n //const selectedRState = (this.state.vendorMainData != null ? this.state.vendorMainData.vrRstateid : this.state.selectedRState);\r\n //const selectedMCountry = (this.state.vendorMainData != null ? this.state.vendorMainData.vrMcountryid : this.state.selectedMCountry);\r\n //const selectedMState = (this.state.vendorMainData != null ? this.state.vendorMainData.vrMstateid : this.state.selectedMState);\r\n //const selectedBCountry = (this.state.vendorMainData != null ? this.state.vendorMainData.vrBcountryid : this.state.selectedBCountry);\r\n //const selectedBState = (this.state.vendorMainData != null ? this.state.vendorMainData.vrBstateid : this.state.selectedBState);\r\n //const selectedACountry = (this.state.vendorMainData != null ? this.state.vendorMainData.vrAcountryid : this.state.selectedACountry);\r\n //const selectedAState = (this.state.vendorMainData != null ? this.state.vendorMainData.vrAstateid : this.state.selectedAState);\r\n const FTCountryItems = this.CountryListItems(this.state.FTCountryList, this.state.selectedRCountry);\r\n const RCountryItems = this.CountryListItems(this.state.RCountryList, this.state.selectedRCountry);\r\n const MCountryItems = this.CountryListItems(this.state.MCountryList, this.state.selectedMCountry);\r\n const BCountryItems = this.CountryListItems(this.state.BCountryList, this.state.selectedBCountry);\r\n const ACountryItems = this.CountryListItems(this.state.ACountryList, this.state.selectedACountry);\r\n const FTStateItems = this.StateListItems(this.state.FTStateList, this.state.selectedRState);\r\n const RStateItems = this.StateListItems(this.state.RStateList, this.state.selectedRState);\r\n const MStateItems = this.StateListItems(this.state.MStateList, this.state.selectedMState);\r\n const BStateItems = this.StateListItems(this.state.BStateList, this.state.selectedBState);\r\n const AStateItems = this.StateListItems(this.state.AStateList, this.state.selectedAState);\r\n const RCityItems = this.CityListItems(this.state.RCityList, this.state.selectedRCity);\r\n const MCityItems = this.CityListItems(this.state.MCityList, this.state.selectedMCity);\r\n const BCityItems = this.CityListItems(this.state.BCityList, this.state.selectedBCity);\r\n const ACityItems = this.CityListItems(this.state.ACityList, this.state.selectedACity);\r\n const buildTypeItems = this.buildTypeListItems(this.state.buildtypeList, this.state.selectedBT);\r\n const bizTypeItems = this.bizTypeListItems(this.state.biztypeList, this.state.selectedBizType);\r\n const soleTypeItems = this.soleTypeListItems(this.state.soletypeList, this.state.selectedSole);\r\n const buildAddItems = this.buildAddListItems(this.state.buildaddList, this.state.selectedBA);\r\n const comGrpItems = this.comGrpListItems(this.state.comgrpList, this.state.isBumiputera);\r\n const vaccgrpItems = this.vaccgrpListItems(this.state.vaccgrpList, this.state.selectedVacc);\r\n const routeComponentPropsMock = {\r\n history: {} as any,\r\n location: {} as any,\r\n match: {} as any\r\n }\r\n const tab1Stat = (!this.state.tab1 ? ' disabled' : 'enabled') + (!this.state.tab1view ? ' d-none' : '');\r\n const tab2Stat = (!this.state.tab2 ? ' disabled' : 'enabled') + (!this.state.tab2view ? ' d-none' : '');\r\n const tab3Stat = (!this.state.tab3 ? ' disabled' : 'enabled') + (!this.state.tab3view ? ' d-none' : '');\r\n const tab4Stat = (!this.state.tab4 ? ' disabled' : 'enabled') + (!this.state.tab4view ? ' d-none' : '');\r\n const tab5Stat = (!this.state.tab5 ? ' disabled' : 'enabled') + (!this.state.tab5view ? ' d-none' : '');\r\n const tab6Stat = (!this.state.tab6 ? ' disabled' : 'enabled') + (!this.state.tab6view ? ' d-none' : '');\r\n const tab7Stat = (!this.state.tab7 ? ' disabled' : 'enabled') + (!this.state.tab7view ? ' d-none' : '');\r\n const tab8Stat = (!this.state.tab8 ? ' disabled' : 'enabled') + (!this.state.tab8view ? ' d-none' : '');\r\n const tab9Stat = (!this.state.tab9 ? ' disabled' : 'enabled') + (!this.state.tab9view ? ' d-none' : '');\r\n const tab10Stat = (!this.state.tab10 ? ' disabled' : 'enabled') + (!this.state.tab10view ? ' d-none' : '');\r\n \r\n const registerDate = (this.state.registerDate.toString().indexOf(\"9999\") == -1 ? utilities.dateTimeFormatter(this.state.registerDate.toString()) : \"-\");\r\n const renewDate = (this.state.renewDate.toString().indexOf(\"9999\") == -1 ? utilities.dateTimeFormatter(this.state.renewDate.toString()) : \"-\");\r\n const expiryDate = (this.state.expiryDate.toString().indexOf(\"9999\") == -1 ? utilities.dateTimeFormatter(this.state.expiryDate.toString()) : \"-\");\r\n const docDate = (this.state.docDate.toString().indexOf(\"9999\") == -1 ? utilities.dateFormatter(this.state.docDate) : \"\");\r\n const receiptDate = (this.state.receiptDate.toString().indexOf(\"9999\") == -1 ? utilities.dateFormatter(this.state.receiptDate) : \"\");\r\n const updateDate = (this.state.updateDate.toString().indexOf(\"9999\") == -1 ? utilities.dateTimeFormatter(this.state.updateDate) : \"-\");\r\n const verifyDate = (this.state.verifyDate.toString().indexOf(\"9999\") == -1 ? utilities.dateTimeFormatter(this.state.verifyDate) : \"-\");\r\n \r\n const approveDate = (this.state.approveDate.toString().indexOf(\"9999\") == -1 ? utilities.dateTimeFormatter(this.state.approveDate) : \"-\");\r\n return (\r\n {/*
*/}\r\n {this.state.formSuccess && Thank you for submitting your application. You will receive your application progress update through email notification.
}\r\n />}\r\n
\r\n
\r\n
VENDOR DETAIL INFORMATION
\r\n
window.close()} className=\"btn btn-primary btn-sm d-print-none\">Close window.print()} className=\"btn btn-primary btn-sm d-print-none\">Print
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n Registration Number \r\n
\r\n
\r\n {this.state.roc} \r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n Vendor Current Status \r\n
\r\n
\r\n {this.state.statusDesc} \r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n Registered Date \r\n
\r\n
\r\n {registerDate} \r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n Last Renewal Date \r\n
\r\n
\r\n {renewDate} \r\n
\r\n
\r\n Expiry Date \r\n
\r\n \r\n {expiryDate} \r\n
\r\n \r\n \r\n\r\n \r\n
\r\n {/*detail*/}\r\n
\r\n
DETAILS OF COMPANY
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n ROC NO/SSM NO \r\n
\r\n
\r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n NEW ROC NO/SSM NO \r\n
\r\n
\r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n DATE OF INCORPORATION \r\n
\r\n
\r\n
\r\n
\r\n COMPANY STATUS \r\n
\r\n \r\n \r\n - PLEASE SELECT - \r\n {comGrpItems}\r\n \r\n
\r\n {this.state.isBumiputera == \"BU\" &&\r\n \r\n PERCENTAGE \r\n
\r\n }\r\n {this.state.isBumiputera == \"BU\" &&\r\n \r\n
\r\n }\r\n \r\n < div className=\"form-group row\" >\r\n \r\n SALE & SERVICES TAX (SST) NO \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n PRODUCT STATUS \r\n
\r\n \r\n
\r\n \r\n {this.state.showProduct && \r\n < div className=\"form-group row\" >\r\n
\r\n TYPE OF SOLE AGENCY \r\n
\r\n
\r\n \r\n - PLEASE SELECT - \r\n {soleTypeItems}\r\n \r\n
\r\n
\r\n PRODUCT {/* (Example:AGL Lighting) */}\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n BRAND {/* (Example:ADB) */}\r\n
\r\n \r\n
\r\n \r\n }\r\n < div className=\"form-group row\" >\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n E-MAIL ADDRESS \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n OFFICIAL WEBSITE \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n CATEGORY OF REGISTRATION \r\n
\r\n \r\n \r\n {/*NOT APPLICABLE */}\r\n CONSULTANT \r\n SERVICES \r\n SUPPLIES \r\n WORKS \r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n ADDRESS OF REGISTERED OFFICE \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n COUNTRY \r\n
\r\n \r\n \r\n {RCountryItems}\r\n \r\n
\r\n \r\n STATE \r\n
\r\n \r\n \r\n {RStateItems}\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n CITY \r\n
\r\n \r\n \r\n {RCityItems}\r\n \r\n
\r\n \r\n POSTCODE \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n TEL \r\n
\r\n \r\n
\r\n \r\n FAX \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n ADDRESS OF MAIN OFFICE \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n COUNTRY \r\n
\r\n \r\n \r\n {MCountryItems}\r\n \r\n
\r\n \r\n STATE \r\n
\r\n \r\n \r\n {MStateItems}\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n CITY \r\n
\r\n \r\n \r\n {MCityItems}\r\n \r\n
\r\n \r\n POSTCODE \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n TEL \r\n
\r\n \r\n
\r\n \r\n FAX \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n P.O. BOX ADDRESS \r\n
\r\n \r\n\r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n P.O. BOX \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n POSTCODE \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n ADDRESS OF BRANCH OFFICE (IF ANY) \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n COUNTRY \r\n
\r\n \r\n \r\n {BCountryItems}\r\n \r\n
\r\n \r\n STATE \r\n
\r\n \r\n \r\n {BStateItems}\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n CITY \r\n
\r\n \r\n \r\n {BCityItems}\r\n \r\n
\r\n \r\n POSTCODE \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n TEL \r\n
\r\n \r\n
\r\n \r\n FAX \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n TYPE OF BUSINESS \r\n
\r\n \r\n \r\n - PLEASE SELECT - \r\n {bizTypeItems}\r\n \r\n
\r\n \r\n {/**/}\r\n {/*
Previous */}\r\n {/* */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/*
*/}\r\n\r\n\r\n {/*
\r\n
ORGANIZATION STRUCTURE
\r\n
\r\n {/*
\r\n PERMANENT \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n CONTRACT \r\n
\r\n \r\n
\r\n \r\n {/**/}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/*
*/}\r\n\r\n\r\n {/*
\r\n
FINANCIAL RESOURCES
\r\n
\r\n {/*
\r\n AUTHORISED CAPITAL (RM) \r\n
\r\n \r\n {/* {\r\n const { formattedValue, value } = values;\r\n // formattedValue = $2,223\r\n // value ie, 2223\r\n this.setState({ depoAuthorised: formattedValue });\r\n }}\r\n readOnly\r\n />\r\n
\r\n \r\n }\r\n < div className=\"form-group row\" >\r\n \r\n PAID-UP CAPITAL (RM) \r\n
\r\n \r\n {/* {\r\n const { formattedValue, value } = values;\r\n // formattedValue = $2,223\r\n // value ie, 2223\r\n this.setState({ depoPaidup: formattedValue });\r\n }}\r\n readOnly\r\n />\r\n
\r\n\r\n \r\n {/**/}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/*
*/}\r\n\r\n\r\n {/*
\r\n
EXPERIENCE
\r\n
\r\n
{/*{...routeComponentPropsMock}*/}\r\n
\r\n {/*
*/}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/* */}{/*Next */}\r\n {/*
*/}\r\n {/*
*/}\r\n
\r\n ADDRESS OF \r\n\r\n
\r\n \r\n \r\n - PLEASE SELECT - \r\n {buildAddItems}\r\n \r\n
\r\n \r\n {(this.state.selectedBA == \"5\") && \r\n
}\r\n {(this.state.selectedBA != \"5\" && this.state.selectedBA != \"-\") && \r\n < div className=\"form-group row\" >\r\n \r\n COUNTRY \r\n
\r\n \r\n \r\n {ACountryItems}\r\n \r\n
\r\n \r\n STATE \r\n
\r\n \r\n \r\n {AStateItems}\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n CITY \r\n
\r\n \r\n \r\n {ACityItems}\r\n \r\n
\r\n \r\n POSTCODE \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n TEL \r\n
\r\n \r\n
\r\n \r\n FAX \r\n
\r\n \r\n
\r\n \r\n\r\n \r\n }\r\n {/* */}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/*
*/}\r\n {/*
\r\n
REGISTRATION WITH AUTHORITY
\r\n
\r\n
{/*{...routeComponentPropsMock}*/}\r\n
\r\n
\r\n
SUB FIELD CODE APPLIED
\r\n
\r\n
{/*{...routeComponentPropsMock}*/}\r\n
\r\n
*/}\r\n {/* */}{/*
*/}\r\n {/*
*/}\r\n {/*
OFFICE USE ONLY
*/}\r\n {/* {(this.state.statusid == \"BP\" || this.state.statusid == \"AP\") &&*/}\r\n {/*
*/}\r\n \r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* To activate vendor registration, enter the registration payment receipt number */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* PAYMENT RECEIPT ISSUED BY */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* PAYMENT RECEIPT ISSUED DATE */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/*
*/}\r\n {/* PAYMENT REMARKS */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}{/*
*/}\r\n {/* */}{/*
*/}\r\n {/* */}{/* UPDATE VENDOR INFORMATION */}\r\n {/* */}{/*
*/}\r\n {/* */}{/*
*/}\r\n {/* */}{/* UPDATE INFORMATION */}\r\n {/* */}{/*
*/}\r\n {/* */}{/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* LAST UPDATED BY */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* {this.state.updateBy} */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* LAST UPDATED DATE */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* {updateDate} */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}{/*
Previous */}{/*Temp Next */}\r\n {/* */}{/*
*/}\r\n {/* */}{/*
Next */}\r\n {/* */}{/*
*/}\r\n {/* */}{/*
*/}\r\n {/*
this.setState({ key: k })}*/}\r\n {/* className=\"nav nav-tabs\">*/}\r\n {/* */}{/*{!this.state.tab1view ? 'd-none' : ''}*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/*
DETAILS OF COMPANY
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* Please enter company information.*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/*
*/}\r\n {/* ROC NO/SSM NO */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* NEW ROC NO/SSM NO */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* DATE OF INCORPORATION */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* COMPANY STATUS */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* - PLEASE SELECT - */}\r\n {/* {comGrpItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* {this.state.isBumiputera == \"BU\" &&*/}\r\n {/* */}\r\n {/* PERCENTAGE */}\r\n {/*
*/}\r\n {/* }*/}\r\n {/* {this.state.isBumiputera == \"BU\" &&*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* }*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* SALE & SERVICES TAX (SST) NO */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* PRODUCT STATUS */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* {this.state.showProduct && */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/*
*/}\r\n {/* TYPE OF SOLE AGENCY */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}\r\n {/* - PLEASE SELECT - */}\r\n {/* {soleTypeItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* PRODUCT */}{/* (Example:AGL Lighting) */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* BRAND */}{/* (Example:ADB) */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* }*/}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* E-MAIL ADDRESS */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* OFFICIAL WEBSITE */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* CATEGORY OF REGISTRATION */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}{/*NOT APPLICABLE */}\r\n {/* CONSULTANT */}\r\n {/* SERVICES */}\r\n {/* SUPPLIES */}\r\n {/* WORKS */}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* ADDRESS OF REGISTERED OFFICE */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* COUNTRY */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {RCountryItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* STATE */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {RStateItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* CITY */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {RCityItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* POSTCODE */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* TEL */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* FAX */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* ADDRESS OF MAIN OFFICE */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* COUNTRY */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {MCountryItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* STATE */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {MStateItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* CITY */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {MCityItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* POSTCODE */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* TEL */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* FAX */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* P.O. BOX ADDRESS */}\r\n {/*
*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* P.O. BOX */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* POSTCODE */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* ADDRESS OF BRANCH OFFICE (IF ANY) */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* COUNTRY */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {BCountryItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* STATE */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {BStateItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* CITY */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {BCityItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* POSTCODE */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* TEL */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* FAX */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* TYPE OF BUSINESS */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* - PLEASE SELECT - */}\r\n {/* {bizTypeItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/*
Previous */}\r\n {/* */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/*
*/}\r\n\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/*
ORGANIZATION STRUCTURE
*/}\r\n {/*
*/}\r\n {/* */}{/*
Reference Data - City */}\r\n {/*
*/}\r\n {/* Please provide management team member(s) information.*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}{/*
*/}{/* */}{/*{...routeComponentPropsMock}*/}\r\n {/* */}{/*
*/}\r\n {/* */}{/* */}\r\n {/* */}{/* */}\r\n {/* */}{/* */}{/* this.handlePopupOrg(true)}>*/}\r\n {/* */}{/* */}{/* Add New Organization Chart */}\r\n {/* */}{/* */}{/* */}\r\n {/* */}{/* */}\r\n {/* */}{/* */}\r\n {/* */}{/* */}{/*
*/}\r\n {/* */}{/**/}\r\n {/* */}{/**/}\r\n {/* */}{/* */}\r\n {/* */}{/* */}\r\n {/* */}{/* Information */}\r\n {/* */}{/* Date Publish */}\r\n {/* */}{/* Date End */}\r\n {/* */}{/* */}\r\n {/* */}{/* */}\r\n {/* */}{/* */}\r\n {/* */}{/* {announcementList.map((ann, index) => {*/}\r\n {/* */}{/* return (*/}\r\n {/* */}{/* */}\r\n {/* */}{/* {ann.anouInfo} */}\r\n {/* */}{/* {moment(ann.anouDatep).format(\"D MMMM YYYY\")} */}\r\n {/* */}{/* {moment(ann.anouDatee).format(\"D MMMM YYYY\")} */}\r\n {/* */}{/* */}\r\n {/* */}{/* */}{/* this.handleEdit(ann.anouId)}>Edit |*/}\r\n {/* */}{/* */}{/* this.handleDelete(ann.anouId)}>Delete |*/}\r\n {/* */}{/* */}{/* this.handleCreateMailLog(\"A\", \"B\", \"TES\", new Date())}>Mail */}\r\n {/* */}{/* */}\r\n {/* */}{/* */}\r\n {/* */}{/* )*/}\r\n {/* */}{/* })}*/}\r\n\r\n {/* */}{/* */}\r\n {/* */}{/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* */}\r\n {/*
FINANCIAL RESOURCES
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* Please provide financial resources information..*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* AUTHORISED CAPITAL (RM) */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}{/* {*/}\r\n {/* const { formattedValue, value } = values;*/}\r\n {/* // formattedValue = $2,223*/}\r\n {/* // value ie, 2223*/}\r\n {/* this.setState({ depoAuthorised: formattedValue });*/}\r\n {/* }}*/}\r\n {/* />*/}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* PAID-UP CAPITAL (RM) */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}{/* {*/}\r\n {/* const { formattedValue, value } = values;*/}\r\n {/* // formattedValue = $2,223*/}\r\n {/* // value ie, 2223*/}\r\n {/* this.setState({ depoPaidup: formattedValue });*/}\r\n {/* }}*/}\r\n {/* />*/}\r\n {/*
*/}\r\n\r\n {/* */}\r\n {/* */}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/*
*/}\r\n\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/*
EXPERIENCE
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* Please provide on going and completed projects(s) undertaken for the last 3 years.*/}\r\n {/*
*/}\r\n {/*
*/}{/*{...routeComponentPropsMock}*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/* */}{/*Next */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* ADDRESS OF */}\r\n\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* - PLEASE SELECT - */}\r\n {/* {buildAddItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* {(this.state.selectedBA == \"5\") && */}\r\n {/*
}*/}\r\n {/* {(this.state.selectedBA != \"5\" && this.state.selectedBA != \"-\") && */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* COUNTRY */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {ACountryItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* STATE */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {AStateItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* CITY */}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}\r\n {/* {ACityItems}*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* POSTCODE */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* < div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* TEL */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n {/* FAX */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/* */}\r\n\r\n {/* */}\r\n {/* }*/}\r\n {/* */}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}{/*7*/}\r\n {/*
REGISTRATION WITH AUTHORITY
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* Please select appropriate authority(s) associated to your company (if any)*/}\r\n {/*
*/}\r\n {/*
*/}{/*{...routeComponentPropsMock}*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/* */}{/*Next */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}{/*8*/}\r\n {/*
SUB FIELD CODE APPLIED
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* Please select MAHB field code(s) to register (Maximum 10 codes)*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* DOWNLOAD MAHB CODE REFERENCE*/}\r\n {/* */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}{/*{...routeComponentPropsMock}*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/* */}{/*Next */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}\r\n {/* */}{/*9 */}\r\n {/* */}\r\n {/* */}{/*10*/}\r\n {/*
OFFICE USE ONLY
*/}\r\n {/* {(this.state.statusid == \"BP\" || this.state.statusid == \"AP\") &&*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* UPDATE VENDOR INFORMATION */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* UPDATE INFORMATION */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* LAST UPDATED BY */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* {this.state.updateBy} */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* LAST UPDATED DATE */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* {updateDate} */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
Previous */}{/*Temp Next */}\r\n {/*
*/}\r\n {/*
Next */}\r\n {/*
*/}\r\n {/*
*/}\r\n {/* */}\r\n\r\n {/**/}\r\n \r\n \r\n\r\n \r\n \r\n {/**/}\r\n \r\n );\r\n\r\n }\r\n}\r\n","import React, { Fragment} from 'react';\r\nimport { RouteComponentProps } from 'react-router';\r\nimport \"../css/Share.css\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.css';\r\nimport 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';\r\nimport ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';\r\nimport filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';\r\n//import MultiSelectListBox from 'react-multiselect-listbox';\r\nimport { postDataForLogin, getURL } from \"../../../services/AccessAPI\";\r\nimport SessionManager from \"../../../auth/SessionManager\";\r\nimport { VendorSelectionAllParentData,VendorSelectionAllData,VendorSelectionAddData,VendorSelectionParentData,VendorSelectionReturnData,VendorSelectionData, VendorSelectionLocationData,VendorSelectionAuthorityData,VendorTempSpecialData, AuthoNData, AuthCRNData, AuthHNData, AuthSHNData, AuthCNData, MahbgrefData, MahbfrefData,MahbsfrfData,CityData, TenderRegData, StateData,TorFilenameData, TorData, TosData } from '../../../util/SharedClassStructure';\r\nimport { dateFormatter, dateFormatterExcel, emptyIndication } from '../../../util/SharedFunctions';\r\nimport moment from \"moment\";\r\n//import { ModalPopupVendorSelection } from './ModalPopupVendorSelection';\r\ninterface FetchVenSelectionDataState {\r\n vendorResult: VendorSelectionAllData[];\r\n vendorFilter: VendorSelectionAddData[];\r\n vendorMiss: VendorSelectionReturnData[];\r\n vendorIgnore: VendorSelectionReturnData[];\r\n vendorNever: VendorSelectionReturnData[];\r\n vendorInvite: VendorSelectionReturnData[];\r\n vendorLocationSelection: VendorSelectionLocationData[];\r\n vendorAuthoritySelection: VendorSelectionAuthorityData[];\r\n tenderList: TenderRegData[];\r\n stateList: StateData[];\r\n cityList: CityData[];\r\n selectedCityList: CityData[];\r\n specialList: VendorTempSpecialData[];\r\n mgrefList: MahbgrefData[];\r\n mfrefList: MahbfrefData[];\r\n msfrfList: MahbsfrfData[];\r\n authList: AuthoNData[];\r\n authcrList: AuthCRNData[];\r\n authhList: AuthHNData[];\r\n authshList: AuthSHNData[];\r\n authcList: AuthCNData[];\r\n //torList: TorData[];\r\n //tor: TorData;\r\n //torFilename: TorFilenameData;\r\n columns: [];\r\n loading: boolean;\r\n showModalPopupAnn: boolean;\r\n actionType: string;\r\n returnMessage: string;\r\n pagez: number;\r\n pagezStatus: false;\r\n currentPage: number;\r\n rowPerPage: number;\r\n pagezOPT: number;\r\n pagezStatusOPT: false;\r\n currentPageOPT: number;\r\n rowPerPageOPT: number;\r\n pagezMAN: number;\r\n pagezStatusMAN: false;\r\n currentPageMAN: number;\r\n rowPerPageMAN: number;\r\n pagezMiss: number;\r\n pagezStatusMiss: false;\r\n currentPageMiss: number;\r\n rowPerPageMiss: number;\r\n pagezNever: number;\r\n pagezStatusNever: false;\r\n currentPageNever: number;\r\n rowPerPageNever: number;\r\n pagezInvite: number;\r\n pagezStatusInvite: false;\r\n currentPageInvite: number;\r\n rowPerPageInvite: number;\r\n pagezIgnore: number;\r\n pagezStatusIgnore: false;\r\n currentPageIgnore: number;\r\n rowPerPageIgnore: number;\r\n pagezFilter: number;\r\n pagezStatusFilter: false;\r\n currentPageFilter: number;\r\n rowPerPageFilter: number;\r\n tenderId: string;\r\n tenderNo: string;\r\n tenderDesc: string;\r\n stateId: string;\r\n cityId: string;\r\n stateDesc: string;\r\n cityDesc: string;\r\n classId: string;\r\n authorityId: string;\r\n optionId: string;\r\n selectedGroupAuthDesc: string;\r\n selectedGroup: string;\r\n selectedSubgroup: string;\r\n selectedChild: string;\r\n selectedAuth: string;\r\n selectedAuthh: string;\r\n selectedAuthsh: string;\r\n selectedAuthc: string;\r\n selectedAuthcr: string;\r\n specialization: string;\r\n showResult: string;\r\n costCenter: string;\r\n uname: string;\r\n}\r\nvar reload = (status: any) => window.location.href = '/admin/tools/hfetchvsel?s=' + status;\r\n\r\nexport class PrintViewVendorSelection extends React.Component, FetchVenSelectionDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = {\r\n uname:\"\",\r\n costCenter:\"\",\r\n vendorResult: [],\r\n selectedGroupAuthDesc: \"\",\r\n showResult: \"input\",\r\n vendorFilter: [],\r\n vendorMiss: [],\r\n vendorNever: [],\r\n vendorIgnore: [],\r\n vendorInvite: [],\r\n vendorLocationSelection: [],\r\n vendorAuthoritySelection: [],\r\n selectedAuth: \"\",\r\n selectedAuthh: \"-\",\r\n selectedAuthsh: \"-\",\r\n selectedAuthc: \"-\",\r\n selectedAuthcr: \"-\",\r\n authorityId: \"-\",\r\n optionId:\"-\",\r\n selectedGroup: \"-\",\r\n selectedSubgroup: \"-\",\r\n selectedChild: \"-\",\r\n specialization: \"\",\r\n authList: [],\r\n authcrList: [],\r\n authhList: [],\r\n authshList: [],\r\n authcList: [],\r\n specialList: [],\r\n mgrefList: [],\r\n mfrefList: [],\r\n msfrfList: [], classId: \"-\", stateId: \"-\", cityId: \"-\", stateDesc: \"\", cityDesc: \"\", tenderId: \"\", tenderNo: \"-\", tenderDesc: \"\", /*torFilename: new TorFilenameData, tosValue: new TosData, tor: new TorData,*/ selectedCityList: [], cityList: [], stateList: [], tenderList: [], loading: true, columns: [], showModalPopupAnn: false, actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 10, pagezOPT: 1, pagezStatusOPT: false, currentPageOPT: 1, rowPerPageOPT: 10, pagezMAN: 1, pagezStatusMAN: false, currentPageMAN: 1, rowPerPageMAN: 10, pagezMiss: 1, pagezStatusMiss: false, currentPageMiss: 1, rowPerPageMiss: 10, pagezNever: 1, pagezStatusNever: false, currentPageNever: 1, rowPerPageNever: 10, pagezInvite: 1, pagezStatusInvite: false, currentPageInvite: 1, rowPerPageInvite: 10, pagezIgnore: 1, pagezStatusIgnore: false, currentPageIgnore: 1, rowPerPageIgnore: 10, pagezFilter: 1, pagezStatusFilter: false, currentPageFilter: 1, rowPerPageFilter: 10 };\r\n fetch(getURL() + 'api/states/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n stateList: data\r\n });\r\n this.setState({ stateList: [{ \"srId\": \"ALL\", \"srDesc\": \"All State\", \"srCountryid\": \"\", \"srStatus\": \"DF\" }, ...this.state.stateList] });\r\n });\r\n fetch(getURL() + 'api/tenderreg/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data2 => {\r\n this.setState({\r\n tenderList: data2\r\n });\r\n });\r\n fetch(getURL() + 'api/mgref/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n mgrefList: data\r\n });\r\n });\r\n\r\n const authResult = new URLSearchParams(window.location.search);\r\n const code: any = authResult.get('s');\r\n fetch(getURL() + 'api/vselection/listp/' + code)\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n vendorResult: data.resultList, tenderNo: data.tenderNo, tenderDesc: data.tenderDesc, costCenter:data.costCenter, uname: data.uname\r\n });\r\n });\r\n //var regex = /^[\\-\\+]?[\\d]+\\.?(\\d+)?$/;\r\n //var empid = regex.test(code) ? parseInt(code) : '';\r\n //if (empid == 1) {\r\n // alert('Tender Evaluation Result successfully saved')\r\n //}\r\n //else if (empid == 2) {\r\n // alert('Tender Evaluation Result successfully updated')\r\n //}\r\n //else if (empid == 3) {\r\n // alert('Tender Evaluation Result successfully deleted')\r\n //}\r\n //else if (empid == 4) {\r\n // alert('Unable to proceed with current process. Please contact system administrator')\r\n //}\r\n\r\n // This binding is necessary to make \"this\" work in the callback \r\n //this.handleDelete = this.handleDelete.bind(this);\r\n //this.handleEdit = this.handleEdit.bind(this);\r\n //this.handleAdd = this.handleAdd.bind(this);\r\n //this.handleNewTender = this.handleNewTender.bind(this);\r\n }\r\n \r\n componentDidMount() {\r\n }\r\n\r\n \r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n }\r\n //let contents = this.state.loading\r\n // ? Loading...
\r\n // : this.renderAnnouncementTable(this.state.announcementList);\r\n //let contents = this.state.loading\r\n // ?
\r\n // : this.renderTosTable(this.state.torList);\r\n let contents = this.renderTable();\r\n return \r\n {contents}\r\n
;\r\n }\r\n\r\n handleAddVendor = (e: any) => { //RENEW\r\n e.preventDefault();\r\n //if (this.state.formType == \"RR\") { //pre registration\r\n let result = window.confirm('Add selected vendors?')\r\n if (result) {\r\n e.preventDefault();\r\n const datax = new FormData(e.target);\r\n var proceedPreRegister = true;\r\n const object: { [key: string]: FormDataEntryValue | null } = {};\r\n datax.forEach((value, key) => {\r\n //if (key == \"ftCategory\") {\r\n // object[key] = this.state.formType;\r\n //}\r\n //else if (key == \"ftComName\") {\r\n // if (value.toString().length > 0) {\r\n // object[key] = value;\r\n // }\r\n // else {\r\n // alert('Please enter Company Name')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else if (key == \"ftRoc\") {\r\n // if (value.toString().length > 0) {\r\n // object[key] = value;\r\n // /* this.setState({ftRoc:value, roc:value});*/\r\n // }\r\n // else {\r\n // alert('Please enter ROC/SSM No')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else if (key == \"ftCountry\") {\r\n // if (this.state.selectedFTCountry != \"-\") {\r\n // object[key] = this.state.selectedFTCountry;\r\n // }\r\n // else {\r\n // alert('Please select country')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else if (key == \"ftCode\") {\r\n // if (value != \"-\") {\r\n // object[key] = this.state.selectedCode\r\n // }\r\n // else {\r\n // alert('Please select MAHB code')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else if (key == \"ftState\") {\r\n // if (this.state.selectedFTState != \"-\") {\r\n // object[key] = this.state.selectedFTState;\r\n // }\r\n // else {\r\n // alert('Please select state')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else {\r\n // object[key] = value\r\n //}\r\n }\r\n );\r\n\r\n //if (proceedPreRegister) {\r\n //alert(this.state.vendorFilter)\r\n var json = JSON.stringify(this.state.vendorFilter)\r\n fetch(getURL() + 'api/vselection/add', {\r\n method: 'POST',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: json\r\n\r\n }).then(response =>\r\n response.json() as Promise\r\n )\r\n .then((responseJson) => {\r\n this.setState({ showResult: \"result\", vendorResult: responseJson })\r\n \r\n //if (responseJson == 1) {\r\n\r\n //}\r\n })\r\n //}\r\n }\r\n //}\r\n }\r\n\r\n handleLocationAdd = () => {\r\n if (this.state.vendorLocationSelection.find(item => item.city === this.state.cityId)) {\r\n alert('Duplicate location. Please select other location.')\r\n }\r\n else {\r\n if (this.state.cityId !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorLocationSelection: [...prevState.vendorLocationSelection, {\r\n \"city\": this.state.cityId,\r\n \"cityDesc\": this.state.cityDesc,\r\n \"state\": this.state.stateId,\r\n \"stateDesc\": this.state.stateDesc\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n handleLocationDelete(id: string) {\r\n this.setState(prevState => ({ vendorLocationSelection: prevState.vendorLocationSelection.filter(item => item.city !== id) }));\r\n }\r\n getLocationActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handleLocationDelete(row.city)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n\r\n handleOPTAdd = () => {\r\n if (this.state.vendorAuthoritySelection.find(item => item.authority === this.state.authorityId)) {\r\n alert('Duplicate authority. Please select other authority.')\r\n }\r\n else {\r\n if (this.state.authorityId !== \"-\" && this.state.optionId !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorAuthoritySelection: [...prevState.vendorAuthoritySelection, {\r\n \"authority\": this.state.authorityId,\r\n \"category\": \"-\",\r\n \"categoryDesc\": \"-\",\r\n \"specialization\": \"-\",\r\n \"grade\": \"-\",\r\n \"option\": this.state.optionId\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n \r\n\r\n handleOPTDelete(id: string) {\r\n this.setState(prevState => ({ vendorAuthoritySelection: prevState.vendorAuthoritySelection.filter(item => item.authority !== id) }));\r\n }\r\n\r\n getOPTActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handleOPTDelete(row.authority)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n handleOPTSearch = (e: any) => {\r\n e.preventDefault();\r\n let result = window.confirm('Proceed to search?')\r\n if (result) {\r\n //e.preventDefault();\r\n const datax = new FormData(e.target);\r\n const object: { [key: string]: FormDataEntryValue | null} = {};\r\n //datax.forEach((value, key:any) => {\r\n // if (key == \"tenderNo\")\r\n // object[key] = this.state.tenderNo;\r\n // else if (key == \"class\")\r\n // object[key] = this.state.classId;\r\n // else if (key == \"cityList\")\r\n // object[key] = this.state.vendorLocationSelection;\r\n // else if (key == \"specializationList\")\r\n // object[key] = this.state.vendorLocationSelection;\r\n // else\r\n // object[key] = value\r\n //}\r\n //);\r\n let postdata = {\r\n \"tenderNo\": this.state.tenderNo,\r\n \"classType\": this.state.classId,\r\n \"cityList\": this.state.vendorLocationSelection,\r\n \"specializationList\": this.state.vendorAuthoritySelection\r\n };\r\n //if (proceedSave) {\r\n var json = JSON.stringify(postdata)\r\n fetch(getURL() + 'api/vselection/opt', {\r\n method: 'POST',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: json\r\n\r\n }).then(response =>\r\n response.json() as Promise\r\n ).then((data) => {\r\n if (data != null) {\r\n this.setState({ vendorMiss: data.missList, vendorInvite: data.inviteList, vendorIgnore: data.ignoreList, vendorNever: data.neverList, showResult:\"search\" });\r\n //alert(data.message)\r\n }\r\n //this.handleButtonFwdTab10(e);\r\n })\r\n //Then with the error genereted...\r\n .catch((error) => {\r\n console.error('Error:', error);\r\n alert(error)\r\n });\r\n //}\r\n }\r\n }\r\n\r\n handleMANMAHBAdd = () => {\r\n if (this.state.vendorAuthoritySelection.find(item => item.specialization === this.state.specialization)) {\r\n alert('Duplicate code. Please select other code.')\r\n }\r\n else {\r\n if (this.state.selectedGroup !== \"-\" && this.state.selectedSubgroup !== \"-\" && this.state.selectedChild !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorAuthoritySelection: [...prevState.vendorAuthoritySelection, {\r\n \"authority\": this.state.authorityId,\r\n \"category\": this.state.selectedGroup,\r\n \"categoryDesc\": this.state.selectedGroupAuthDesc,\r\n \"specialization\": this.state.selectedChild,\r\n \"grade\": \"-\",\r\n \"option\": \"-\"\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n handleMANCIDBAdd = () => {\r\n if (this.state.vendorAuthoritySelection.find(item => item.specialization === this.state.selectedAuthc)) {\r\n alert('Duplicate code. Please select other code.')\r\n }\r\n else {\r\n if (this.state.selectedAuthcr !== \"-\" && this.state.selectedAuthh !== \"-\" && this.state.selectedAuthsh !== \"-\" && this.state.selectedAuthc !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorAuthoritySelection: [...prevState.vendorAuthoritySelection, {\r\n \"authority\": this.state.authorityId,\r\n \"category\": this.state.selectedAuthh,\r\n \"categoryDesc\": this.state.selectedGroupAuthDesc,\r\n \"specialization\": this.state.selectedAuthc,\r\n \"grade\": this.state.selectedAuthcr,\r\n \"option\": \"-\"\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n handleMANMOFAdd = () => {\r\n if (this.state.vendorAuthoritySelection.find(item => item.specialization === this.state.selectedAuthc)) {\r\n alert('Duplicate code. Please select other code.')\r\n }\r\n else {\r\n if (this.state.selectedAuthh !== \"-\" && this.state.selectedAuthsh !== \"-\" && this.state.selectedAuthc !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorAuthoritySelection: [...prevState.vendorAuthoritySelection, {\r\n \"authority\": this.state.authorityId,\r\n \"category\": this.state.selectedAuthh,\r\n \"categoryDesc\": this.state.selectedGroupAuthDesc,\r\n \"specialization\": this.state.selectedAuthc,\r\n \"grade\": \"-\",\r\n \"option\": \"-\"\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n handleMANDelete(id: string) {\r\n this.setState(prevState => ({ vendorAuthoritySelection: prevState.vendorAuthoritySelection.filter(item => item.specialization !== id) }));\r\n }\r\n\r\n handleFilterCheckbox(e:any, row: VendorSelectionReturnData, xtra:any) {\r\n /*this.setState(prevState => ({ vendorAuthoritySelection: prevState.vendorAuthoritySelection.filter(item => item.specialization !== id) }));*/\r\n //alert(e.target.checked + \" \" + row.roc)\r\n if (e.target.checked == true) {\r\n this.setState(prevState => ({\r\n vendorFilter: [...prevState.vendorFilter, {\r\n \"tenderid\": this.state.tenderId,\r\n \"tenderno\": this.state.tenderNo,\r\n \"roc\": row.roc,\r\n \"name\": row.name,\r\n \"indicator\": (xtra == \"B-\" ? xtra + row.job + \"-\" + row.roc : xtra + row.roc)\r\n }]\r\n }));\r\n }\r\n else {\r\n this.setState(prevState => ({ vendorFilter: prevState.vendorFilter.filter(item => item.roc !== row.roc) }));\r\n }\r\n }\r\n\r\n handleDeleteVendor = (roc: any, tid: any ) => { //RENEW\r\n let result = window.confirm('Proceed to delete?')\r\n if (result) {\r\n fetch(getURL() + 'api/vselection/delete/' + roc +'/'+tid, {\r\n method: 'delete'\r\n }).then(data => {\r\n this.setState(\r\n {\r\n vendorResult: this.state.vendorResult.filter((rec: any) => {\r\n return (rec.roc != roc);\r\n })\r\n });\r\n alert('Vendor deleted from list');\r\n });\r\n }\r\n }\r\n\r\n getMANActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handleMANDelete(row.specialization)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n getFilterActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n getResultActionList(cell: any, row: VendorSelectionAllData, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n {\r\n this.handleDeleteVendor(row.roc, row.tenderid)\r\n }}>\r\n \r\n
\r\n );\r\n }\r\n\r\n handleMANSearch = (e: any) => {\r\n e.preventDefault();\r\n let result = window.confirm('Proceed to search?')\r\n if (result) {\r\n //e.preventDefault();\r\n const datax = new FormData(e.target);\r\n const object: { [key: string]: FormDataEntryValue | null } = {};\r\n //datax.forEach((value, key:any) => {\r\n // if (key == \"tenderNo\")\r\n // object[key] = this.state.tenderNo;\r\n // else if (key == \"class\")\r\n // object[key] = this.state.classId;\r\n // else if (key == \"cityList\")\r\n // object[key] = this.state.vendorLocationSelection;\r\n // else if (key == \"specializationList\")\r\n // object[key] = this.state.vendorLocationSelection;\r\n // else\r\n // object[key] = value\r\n //}\r\n //);\r\n let postdata = {\r\n \"tenderNo\": this.state.tenderNo,\r\n \"classType\": this.state.classId,\r\n \"cityList\": this.state.vendorLocationSelection,\r\n \"specializationList\": this.state.vendorAuthoritySelection\r\n };\r\n //if (proceedSave) {\r\n var json = JSON.stringify(postdata)\r\n fetch(getURL() + 'api/vselection/man', {\r\n method: 'POST',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: json\r\n\r\n }).then(response =>\r\n response.json() as Promise\r\n )\r\n .then((data) => {\r\n if (data != null) {\r\n this.setState({ vendorMiss: data.missList, vendorInvite: data.inviteList, vendorIgnore: data.ignoreList, vendorNever: data.neverList, showResult: \"search\" });\r\n //alert(data.message)\r\n }\r\n //this.handleButtonFwdTab10(e);\r\n })\r\n //Then with the error genereted...\r\n .catch((error) => {\r\n console.error('Error:', error);\r\n alert(error)\r\n });\r\n //}\r\n }\r\n }\r\n\r\n handleClassChange = (e: any) => {\r\n this.setState({ classId: e.target.value });\r\n }\r\n\r\n handleAuthorityChange = (e: any) => {\r\n this.setState({ authorityId: e.target.value, selectedAuth: e.target.value });\r\n //this.setState({ classId: e.target.options[e.target.selectedIndex].text });\r\n //fetch(getURL() + 'api/tenderreg/detail/' + e.target.value)\r\n // .then(response => response.json() as Promise)\r\n // .then(data => {\r\n // this.setState({ tenderDesc: data.trDesc });\r\n // });\r\n this.handleAuthority(e.target.value);\r\n }\r\n\r\n handleOPTAuthorityChange = (e: any) => {\r\n this.setState({ authorityId: e.target.value });\r\n //this.handleAuthority(e.target.value);\r\n }\r\n\r\n handleOPTOptionChange = (e: any) => {\r\n this.setState({ optionId: e.target.value });\r\n //this.handleAuthority(e.target.value);\r\n }\r\n\r\n handleTenderChange = (e:any) => {\r\n this.setState({ tenderId: e.target.value, tenderNo: e.target.options[e.target.selectedIndex].text });\r\n fetch(getURL() + 'api/tenderreg/detail/' + e.target.value)\r\n .then(response => response.json() as Promise)\r\n .then(data => {\r\n this.setState({ tenderDesc: data.trDesc });\r\n });\r\n }\r\n\r\n handleStateChange = (e: any) => {\r\n this.setState({ stateId: e.target.value, stateDesc: e.target.options[e.target.selectedIndex].text});\r\n fetch(getURL() + 'api/city/getcitylist/' + e.target.value)\r\n .then(response => response.json() as Promise)\r\n .then(data => {\r\n this.setState({ cityList: data });\r\n this.setState({ cityList: [{ \"crId\": 0, \"crDesc\": \"All \" + (e.target.options[e.target.selectedIndex].text == \"All State\" ? \"City\" : e.target.options[e.target.selectedIndex].text), \"crStateid\": e.target.value, \"crStateDesc\": e.target.options[e.target.selectedIndex].text}, ...this.state.cityList] });\r\n });\r\n }\r\n\r\n handleCityChange = (e: any) => {\r\n this.setState({ cityId: e.target.value, cityDesc: e.target.options[e.target.selectedIndex].text });\r\n //fetch(getURL() + 'api/city/getcitylist/' + e.target.value)\r\n // .then(response => response.json() as Promise)\r\n // .then(data => {\r\n // /this.setState({ cityList: data });\r\n // //this.setState({ cityList: [{ \"crId\": 0, \"crDesc\": \"All \" + (e.target.options[e.target.selectedIndex].text == \"All State\" ? \"City\" : e.target.options[e.target.selectedIndex].text), \"crStateid\": e.target.value, \"crStateDesc\": e.target.options[e.target.selectedIndex].text }, ...this.state.cityList] });\r\n // });\r\n }\r\n\r\n\r\n\r\n handleAuthority(auth: string) {\r\n fetch(getURL() + 'api/authohn/list/' + auth) //mof\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n this.setState({ authhList: data, authshList: [], authcList: [] });\r\n });\r\n fetch(getURL() + 'api/authocrn/list/' + auth) //cidb\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n this.setState({ authcrList: data });\r\n });\r\n }\r\n\r\n handleAuthorityHead(auth: string) {\r\n fetch(getURL() + 'api/authoshn/list/' + auth)\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n this.setState({ authshList: data, authcList: [] });\r\n //return data;\r\n });\r\n }\r\n\r\n handleAuthoritySubHead(auth: string) {\r\n fetch(getURL() + 'api/authoshcn/list/' + auth)\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n this.setState({ authcList: data });\r\n //return data;\r\n });\r\n }\r\n\r\n handleGroupChange = (e:any) => {\r\n this.setState({ selectedGroup: e.target.value, selectedGroupAuthDesc: e.target.options[e.target.selectedIndex].text });\r\n this.handleGroup(e.target.value);\r\n }\r\n\r\n handleSubGroupChange = (e:any) => {\r\n this.setState({ selectedSubgroup: e.target.value });\r\n this.handleSubGroup(e.target.value);\r\n }\r\n\r\n handleChildChange = (e:any) => {\r\n this.setState({ selectedChild: e.target.value });\r\n \r\n }\r\n\r\n\r\n handleAuthorityHeadChange = (e: any) => {\r\n this.setState({ selectedAuthh: e.target.value, selectedGroupAuthDesc: e.target.options[e.target.selectedIndex].text });\r\n this.handleAuthorityHead(e.target.value);\r\n\r\n }\r\n\r\n handleAuthoritySubHeadChange = (e: any) => {\r\n this.setState({ selectedAuthsh: e.target.value });\r\n this.handleAuthoritySubHead(e.target.value);\r\n }\r\n\r\n handleAuthorityChildChange = (e: any) => {\r\n this.setState({ selectedAuthc: e.target.value });\r\n //this.handleAuthoritySubHead(e.target.value);\r\n }\r\n\r\n handleAuthorityClassChange = (e: any) => {\r\n this.setState({ selectedAuthcr: e.target.value });\r\n this.handleAuthoritySubHead(e.target.value);\r\n }\r\n\r\n\r\n handleGroup(auth: string) {\r\n fetch(getURL() + 'api/mfref/list/' + auth) //mof\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n this.setState({ mfrefList: data });\r\n\r\n });\r\n }\r\n\r\n handleSubGroup(auth: string) {\r\n fetch(getURL() + 'api/msfrf/list/' + auth)\r\n .then(response => response.json() as Promise)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n .then(data => {//alert(data.dtId)\r\n this.setState({ msfrfList: data });\r\n //return data;\r\n });\r\n }\r\n\r\n\r\n tenderListItems = (items:any) => {\r\n const tenderItems:any = []\r\n items.forEach((item:any) => {\r\n tenderItems.push({item.trTendregno} )\r\n });\r\n return tenderItems;\r\n }\r\n\r\n stateListItems = (items: any) => {\r\n const stateItems: any = []\r\n items.forEach((item: any) => {\r\n stateItems.push({item.srDesc} )\r\n });\r\n //stateItems.push( All-{this.state.stateId} )\r\n return stateItems;\r\n }\r\n\r\n cityListItems = (items: any) => {\r\n const cityItems: any = []\r\n items.forEach((item: any) => {\r\n cityItems.push({item.crDesc} )\r\n });\r\n //cityItems.push(All State )\r\n return cityItems;\r\n }\r\n\r\n groupListItems = (items:any, selected:any) => {\r\n const groupItems:any = []\r\n items.forEach((item:any) => {\r\n groupItems.push({item.mhGroupdesc} )\r\n });\r\n return groupItems;\r\n }\r\n\r\n subgroupListItems = (items:any, selected:any) => {\r\n const subgroupItems:any = []\r\n items.forEach((item:any) => {\r\n subgroupItems.push({item.mfFielddesc} )\r\n });\r\n return subgroupItems;\r\n }\r\n\r\n childListItems = (items:any, selected:any) => {\r\n const childItems:any = []\r\n items.forEach((item:any) => {\r\n childItems.push({item.msSbflddesc} )\r\n });\r\n return childItems;\r\n }\r\n\r\n authListItems = (items: any, selected: any) => {\r\n const authItems:any = []\r\n items.forEach((item:any) => {\r\n authItems.push({item.arAuthodesc} )\r\n });\r\n return authItems;\r\n }\r\n\r\n authhListItems = (items:any, selected:any) => {\r\n const authhItems: any = []\r\n items.forEach((item: any) => {\r\n authhItems.push({item.ahAheaddesc} )\r\n });\r\n return authhItems;\r\n }\r\n\r\n authshListItems = (items: any, selected: any) => {\r\n const authshItems: any = []\r\n items.forEach((item: any) => {\r\n authshItems.push({item.asSheaddesc} )\r\n });\r\n return authshItems;\r\n }\r\n\r\n //authcListItems = (items) => {\r\n // const authcItems = []\r\n // items.forEach((item) => {\r\n // authcItems.push({item.hcChilddesc} )\r\n // });\r\n // return authcItems;\r\n //}\r\n authcListItems = (items: any, selected: any) => {\r\n const authcItems: any = []\r\n items.forEach((item: any) => {\r\n authcItems.push({item.hcChilddesc} )\r\n });\r\n return authcItems;\r\n }\r\n\r\n authcrListItems = (items: any, selected: any) => {\r\n const authcrItems: any = []\r\n items.forEach((item: any) => {\r\n authcrItems.push({item.acClssgdesc} )\r\n });\r\n return authcrItems;\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderTable() {\r\n const optionzLocation = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPage,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorLocationSelection.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n };\r\n const optionzOPT= {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageOPT,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorAuthoritySelection.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageOPT: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageOPT: sizePerPage, currentPageOPT: 1 });\r\n },\r\n };\r\n const optionzMAN = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageMAN,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorAuthoritySelection.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageMAN: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageMAN: sizePerPage, currentPageMAN: 1 });\r\n },\r\n };\r\n const optionzMiss = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageMiss,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorMiss.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageMiss: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageMiss: sizePerPage, currentPageMiss: 1 });\r\n },\r\n };\r\n const optionzNever = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageNever,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorNever.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageNever: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageNever: sizePerPage, currentPageNever: 1 });\r\n },\r\n };\r\n const optionzInvite = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageInvite,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorInvite.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageInvite: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageInvite: sizePerPage, currentPageInvite: 1 });\r\n },\r\n };\r\n const optionzIgnore = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageIgnore,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorIgnore.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageIgnore: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageIgnore: sizePerPage, currentPageIgnore: 1 });\r\n },\r\n };\r\n const optionzResult = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageFilter,\r\n sizePerPage: this.state.vendorResult.length,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorFilter.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: false, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: true, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageFilter: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageFilter: sizePerPage, currentPageFilter: 1 });\r\n },\r\n };\r\n\r\n const columnzLocation = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'stateDesc',\r\n text: 'STATE',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small',width:'100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'cityDesc',\r\n text: 'CITY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getLocationActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzOPT = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezOPT,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageOPT;\r\n var pageNumber = this.state.currentPageOPT;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'authority',\r\n text: 'AUTHORITY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'option',\r\n text: 'OPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getOPTActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzMAN = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezMAN,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageMAN;\r\n var pageNumber = this.state.currentPageMAN;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'authority',\r\n text: 'AUTHORITY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'option',\r\n text: 'OPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getMANActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzMANOPT = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezOPT,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageOPT;\r\n var pageNumber = this.state.currentPageOPT;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'authority',\r\n text: 'AUTHORITY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'categoryDesc',\r\n text: 'CATEGORY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'specialization',\r\n text: 'CODE',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'grade',\r\n text: 'CLASS/GRADE',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'option',\r\n text: 'OPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getOPTActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzMiss = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezMiss,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageMiss;\r\n var pageNumber = this.state.currentPageMiss;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerdate',\r\n text: 'DATE REGISTER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'DATE EXPIRY',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'times',\r\n text: 'TIMES',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n ,\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, \"B-\"),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzNever = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezNever,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageNever;\r\n var pageNumber = this.state.currentPageNever;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerdate',\r\n text: 'DATE REGISTER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'DATE EXPIRY',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n ,\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, \"A-\"),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzInvite = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezInvite,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageInvite;\r\n var pageNumber = this.state.currentPageInvite;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerdate',\r\n text: 'DATE REGISTER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'DATE EXPIRY',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'job',\r\n text: 'JOBS',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n ,\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, \"C-\"),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzIgnore = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezIgnore,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageIgnore;\r\n var pageNumber = this.state.currentPageIgnore;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerdate',\r\n text: 'DATE REGISTER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'DATE EXPIRY',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n ,\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, \"D-\"),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzResult = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezFilter,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageFilter;\r\n var pageNumber = this.state.currentPageFilter;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small',\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '17%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL NO',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX NO',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'email',\r\n text: 'EMAIL',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'EXPIRY DATE',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'status',\r\n text: 'STATUS',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getResultActionList(cell, row, rowIndex, extraData),\r\n // text: '',\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // width: '7%',\r\n // fontSize: 'x-small'\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // },\r\n // csvExport: false\r\n //}\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n //,\r\n //{\r\n // formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, extraData),\r\n // text: '',\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // width: '7%'\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // },\r\n // csvExport: false\r\n //}\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n const tenderItems = this.tenderListItems(this.state.tenderList);\r\n const stateItems = this.stateListItems(this.state.stateList);\r\n const cityItems = this.cityListItems(this.state.cityList);\r\n const groupItems = this.groupListItems(this.state.mgrefList, this.state.selectedGroup);\r\n const subgroupItems = this.subgroupListItems(this.state.mfrefList, this.state.selectedSubgroup);\r\n const childItems = this.childListItems(this.state.msfrfList, this.state.selectedChild);\r\n const authItems = this.authListItems(this.state.authList, this.state.selectedAuth);\r\n const authhItems = this.authhListItems(this.state.authhList, this.state.selectedAuthh);\r\n const authshItems = this.authshListItems(this.state.authshList, this.state.selectedAuthsh);\r\n const authcItems = this.authcListItems(this.state.authcList, this.state.selectedAuthc);\r\n const authcrItems = this.authcrListItems(this.state.authcrList, this.state.selectedAuthcr);\r\n //const current = new Date();\r\n //const date = ${current.getDate()}-${current.getMonth() + 1}-${current.getFullYear()};\r\n //alert((this.state.tenderNo === \"-\" && this.state.stateId === \"-\") ? true : false)\r\n //alert(\"state id : \" + this.state.stateId)\r\n return (\r\n\r\n \r\n\r\n {/*
VENDOR SELECTION
*/}\r\n {/*
*/}\r\n\r\n {/*
*/}\r\n {/*
*/}\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n
\r\n
\r\n Printed Date/Time \r\n
\r\n
\r\n {moment().format(\"DD-MM-YYYY hh:mm:ss A\")} \r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n
\r\n
\r\n Printed By \r\n
\r\n
\r\n {this.state.uname} \r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n
\r\n
\r\n Cost Center \r\n
\r\n
\r\n {this.state.costCenter} \r\n
\r\n
\r\n Tender No \r\n
\r\n \r\n {this.state.tenderNo} \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Tender Description \r\n
\r\n \r\n {this.state.tenderDesc} \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Record Found \r\n
\r\n \r\n {this.state.vendorResult.length} \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n this.state.vendorResult.length > 0 &&\r\n \r\n {/*
PROJECT'S AWARDED*/}\r\n {/*
*/}\r\n
\r\n
\r\n LIST OF VENDOR FILTERED\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n
, FetchVenSelectionDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = {\r\n uname:\"\",\r\n costCenter:\"\",\r\n vendorResult: [],\r\n selectedGroupAuthDesc: \"\",\r\n showResult: \"input\",\r\n vendorFilter: [],\r\n vendorMiss: [],\r\n vendorNever: [],\r\n vendorIgnore: [],\r\n vendorInvite: [],\r\n vendorLocationSelection: [],\r\n vendorAuthoritySelection: [],\r\n selectedAuth: \"\",\r\n selectedAuthh: \"-\",\r\n selectedAuthsh: \"-\",\r\n selectedAuthc: \"-\",\r\n selectedAuthcr: \"-\",\r\n authorityId: \"-\",\r\n optionId:\"-\",\r\n selectedGroup: \"-\",\r\n selectedSubgroup: \"-\",\r\n selectedChild: \"-\",\r\n specialization: \"\",\r\n authList: [],\r\n authcrList: [],\r\n authhList: [],\r\n authshList: [],\r\n authcList: [],\r\n specialList: [],\r\n mgrefList: [],\r\n mfrefList: [],\r\n msfrfList: [], classId: \"-\", stateId: \"-\", cityId: \"-\", stateDesc: \"\", cityDesc: \"\", tenderId: \"\", tenderNo: \"-\", tenderDesc: \"\", /*torFilename: new TorFilenameData, tosValue: new TosData, tor: new TorData,*/ selectedCityList: [], cityList: [], stateList: [], tenderList: [], loading: true, columns: [], showModalPopupAnn: false, actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 10, pagezOPT: 1, pagezStatusOPT: false, currentPageOPT: 1, rowPerPageOPT: 10, pagezMAN: 1, pagezStatusMAN: false, currentPageMAN: 1, rowPerPageMAN: 10, pagezMiss: 1, pagezStatusMiss: false, currentPageMiss: 1, rowPerPageMiss: 10, pagezNever: 1, pagezStatusNever: false, currentPageNever: 1, rowPerPageNever: 10, pagezInvite: 1, pagezStatusInvite: false, currentPageInvite: 1, rowPerPageInvite: 10, pagezIgnore: 1, pagezStatusIgnore: false, currentPageIgnore: 1, rowPerPageIgnore: 10, pagezFilter: 1, pagezStatusFilter: false, currentPageFilter: 1, rowPerPageFilter: 10 };\r\n fetch(getURL() + 'api/states/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n stateList: data\r\n });\r\n this.setState({ stateList: [{ \"srId\": \"ALL\", \"srDesc\": \"All State\", \"srCountryid\": \"\", \"srStatus\": \"DF\" }, ...this.state.stateList] });\r\n });\r\n fetch(getURL() + 'api/tenderreg/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data2 => {\r\n this.setState({\r\n tenderList: data2\r\n });\r\n });\r\n fetch(getURL() + 'api/mgref/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n mgrefList: data\r\n });\r\n });\r\n\r\n const authResult = new URLSearchParams(window.location.search);\r\n const code: any = authResult.get('s');\r\n \r\n const result = localStorage.getItem('vendorResultlocal');\r\n //const resultObj = (result != null ? JSON.parse(result) : \"\");\r\n this.setState({\r\n vendorResult: (result != null ? JSON.parse(result) : [])\r\n });\r\n // });\r\n //var regex = /^[\\-\\+]?[\\d]+\\.?(\\d+)?$/;\r\n //var empid = regex.test(code) ? parseInt(code) : '';\r\n //if (empid == 1) {\r\n // alert('Tender Evaluation Result successfully saved')\r\n //}\r\n //else if (empid == 2) {\r\n // alert('Tender Evaluation Result successfully updated')\r\n //}\r\n //else if (empid == 3) {\r\n // alert('Tender Evaluation Result successfully deleted')\r\n //}\r\n //else if (empid == 4) {\r\n // alert('Unable to proceed with current process. Please contact system administrator')\r\n //}\r\n\r\n // This binding is necessary to make \"this\" work in the callback \r\n //this.handleDelete = this.handleDelete.bind(this);\r\n //this.handleEdit = this.handleEdit.bind(this);\r\n //this.handleAdd = this.handleAdd.bind(this);\r\n //this.handleNewTender = this.handleNewTender.bind(this);\r\n }\r\n \r\n componentDidMount() {\r\n }\r\n\r\n \r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n }\r\n //let contents = this.state.loading\r\n // ? Loading...
\r\n // : this.renderAnnouncementTable(this.state.announcementList);\r\n //let contents = this.state.loading\r\n // ?
\r\n // : this.renderTosTable(this.state.torList);\r\n let contents = this.renderTable();\r\n return \r\n {contents}\r\n
;\r\n }\r\n\r\n handleAddVendor = (e: any) => { //RENEW\r\n e.preventDefault();\r\n //if (this.state.formType == \"RR\") { //pre registration\r\n let result = window.confirm('Add selected vendors?')\r\n if (result) {\r\n e.preventDefault();\r\n const datax = new FormData(e.target);\r\n var proceedPreRegister = true;\r\n const object: { [key: string]: FormDataEntryValue | null } = {};\r\n datax.forEach((value, key) => {\r\n //if (key == \"ftCategory\") {\r\n // object[key] = this.state.formType;\r\n //}\r\n //else if (key == \"ftComName\") {\r\n // if (value.toString().length > 0) {\r\n // object[key] = value;\r\n // }\r\n // else {\r\n // alert('Please enter Company Name')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else if (key == \"ftRoc\") {\r\n // if (value.toString().length > 0) {\r\n // object[key] = value;\r\n // /* this.setState({ftRoc:value, roc:value});*/\r\n // }\r\n // else {\r\n // alert('Please enter ROC/SSM No')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else if (key == \"ftCountry\") {\r\n // if (this.state.selectedFTCountry != \"-\") {\r\n // object[key] = this.state.selectedFTCountry;\r\n // }\r\n // else {\r\n // alert('Please select country')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else if (key == \"ftCode\") {\r\n // if (value != \"-\") {\r\n // object[key] = this.state.selectedCode\r\n // }\r\n // else {\r\n // alert('Please select MAHB code')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else if (key == \"ftState\") {\r\n // if (this.state.selectedFTState != \"-\") {\r\n // object[key] = this.state.selectedFTState;\r\n // }\r\n // else {\r\n // alert('Please select state')\r\n // proceedPreRegister = false;\r\n // }\r\n //}\r\n //else {\r\n // object[key] = value\r\n //}\r\n }\r\n );\r\n\r\n //if (proceedPreRegister) {\r\n //alert(this.state.vendorFilter)\r\n var json = JSON.stringify(this.state.vendorFilter)\r\n fetch(getURL() + 'api/vselection/add', {\r\n method: 'POST',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: json\r\n\r\n }).then(response =>\r\n response.json() as Promise\r\n )\r\n .then((responseJson) => {\r\n this.setState({ showResult: \"result\", vendorResult: responseJson })\r\n \r\n //if (responseJson == 1) {\r\n\r\n //}\r\n })\r\n //}\r\n }\r\n //}\r\n }\r\n\r\n handleLocationAdd = () => {\r\n if (this.state.vendorLocationSelection.find(item => item.city === this.state.cityId)) {\r\n alert('Duplicate location. Please select other location.')\r\n }\r\n else {\r\n if (this.state.cityId !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorLocationSelection: [...prevState.vendorLocationSelection, {\r\n \"city\": this.state.cityId,\r\n \"cityDesc\": this.state.cityDesc,\r\n \"state\": this.state.stateId,\r\n \"stateDesc\": this.state.stateDesc\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n handleLocationDelete(id: string) {\r\n this.setState(prevState => ({ vendorLocationSelection: prevState.vendorLocationSelection.filter(item => item.city !== id) }));\r\n }\r\n getLocationActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handleLocationDelete(row.city)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n\r\n handleOPTAdd = () => {\r\n if (this.state.vendorAuthoritySelection.find(item => item.authority === this.state.authorityId)) {\r\n alert('Duplicate authority. Please select other authority.')\r\n }\r\n else {\r\n if (this.state.authorityId !== \"-\" && this.state.optionId !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorAuthoritySelection: [...prevState.vendorAuthoritySelection, {\r\n \"authority\": this.state.authorityId,\r\n \"category\": \"-\",\r\n \"categoryDesc\": \"-\",\r\n \"specialization\": \"-\",\r\n \"grade\": \"-\",\r\n \"option\": this.state.optionId\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n \r\n\r\n handleOPTDelete(id: string) {\r\n this.setState(prevState => ({ vendorAuthoritySelection: prevState.vendorAuthoritySelection.filter(item => item.authority !== id) }));\r\n }\r\n\r\n getOPTActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handleOPTDelete(row.authority)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n handleOPTSearch = (e: any) => {\r\n e.preventDefault();\r\n let result = window.confirm('Proceed to search?')\r\n if (result) {\r\n //e.preventDefault();\r\n const datax = new FormData(e.target);\r\n const object: { [key: string]: FormDataEntryValue | null} = {};\r\n //datax.forEach((value, key:any) => {\r\n // if (key == \"tenderNo\")\r\n // object[key] = this.state.tenderNo;\r\n // else if (key == \"class\")\r\n // object[key] = this.state.classId;\r\n // else if (key == \"cityList\")\r\n // object[key] = this.state.vendorLocationSelection;\r\n // else if (key == \"specializationList\")\r\n // object[key] = this.state.vendorLocationSelection;\r\n // else\r\n // object[key] = value\r\n //}\r\n //);\r\n let postdata = {\r\n \"tenderNo\": this.state.tenderNo,\r\n \"classType\": this.state.classId,\r\n \"cityList\": this.state.vendorLocationSelection,\r\n \"specializationList\": this.state.vendorAuthoritySelection\r\n };\r\n //if (proceedSave) {\r\n var json = JSON.stringify(postdata)\r\n fetch(getURL() + 'api/vselection/opt', {\r\n method: 'POST',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: json\r\n\r\n }).then(response =>\r\n response.json() as Promise\r\n ).then((data) => {\r\n if (data != null) {\r\n this.setState({ vendorMiss: data.missList, vendorInvite: data.inviteList, vendorIgnore: data.ignoreList, vendorNever: data.neverList, showResult:\"search\" });\r\n //alert(data.message)\r\n }\r\n //this.handleButtonFwdTab10(e);\r\n })\r\n //Then with the error genereted...\r\n .catch((error) => {\r\n console.error('Error:', error);\r\n alert(error)\r\n });\r\n //}\r\n }\r\n }\r\n\r\n handleMANMAHBAdd = () => {\r\n if (this.state.vendorAuthoritySelection.find(item => item.specialization === this.state.specialization)) {\r\n alert('Duplicate code. Please select other code.')\r\n }\r\n else {\r\n if (this.state.selectedGroup !== \"-\" && this.state.selectedSubgroup !== \"-\" && this.state.selectedChild !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorAuthoritySelection: [...prevState.vendorAuthoritySelection, {\r\n \"authority\": this.state.authorityId,\r\n \"category\": this.state.selectedGroup,\r\n \"categoryDesc\": this.state.selectedGroupAuthDesc,\r\n \"specialization\": this.state.selectedChild,\r\n \"grade\": \"-\",\r\n \"option\": \"-\"\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n handleMANCIDBAdd = () => {\r\n if (this.state.vendorAuthoritySelection.find(item => item.specialization === this.state.selectedAuthc)) {\r\n alert('Duplicate code. Please select other code.')\r\n }\r\n else {\r\n if (this.state.selectedAuthcr !== \"-\" && this.state.selectedAuthh !== \"-\" && this.state.selectedAuthsh !== \"-\" && this.state.selectedAuthc !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorAuthoritySelection: [...prevState.vendorAuthoritySelection, {\r\n \"authority\": this.state.authorityId,\r\n \"category\": this.state.selectedAuthh,\r\n \"categoryDesc\": this.state.selectedGroupAuthDesc,\r\n \"specialization\": this.state.selectedAuthc,\r\n \"grade\": this.state.selectedAuthcr,\r\n \"option\": \"-\"\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n handleMANMOFAdd = () => {\r\n if (this.state.vendorAuthoritySelection.find(item => item.specialization === this.state.selectedAuthc)) {\r\n alert('Duplicate code. Please select other code.')\r\n }\r\n else {\r\n if (this.state.selectedAuthh !== \"-\" && this.state.selectedAuthsh !== \"-\" && this.state.selectedAuthc !== \"-\") {\r\n this.setState(prevState => ({\r\n vendorAuthoritySelection: [...prevState.vendorAuthoritySelection, {\r\n \"authority\": this.state.authorityId,\r\n \"category\": this.state.selectedAuthh,\r\n \"categoryDesc\": this.state.selectedGroupAuthDesc,\r\n \"specialization\": this.state.selectedAuthc,\r\n \"grade\": \"-\",\r\n \"option\": \"-\"\r\n }]\r\n }));\r\n }\r\n }\r\n }\r\n\r\n handleMANDelete(id: string) {\r\n this.setState(prevState => ({ vendorAuthoritySelection: prevState.vendorAuthoritySelection.filter(item => item.specialization !== id) }));\r\n }\r\n\r\n handleFilterCheckbox(e:any, row: VendorSelectionReturnData, xtra:any) {\r\n /*this.setState(prevState => ({ vendorAuthoritySelection: prevState.vendorAuthoritySelection.filter(item => item.specialization !== id) }));*/\r\n //alert(e.target.checked + \" \" + row.roc)\r\n if (e.target.checked == true) {\r\n this.setState(prevState => ({\r\n vendorFilter: [...prevState.vendorFilter, {\r\n \"tenderid\": this.state.tenderId,\r\n \"tenderno\": this.state.tenderNo,\r\n \"roc\": row.roc,\r\n \"name\": row.name,\r\n \"indicator\": (xtra == \"B-\" ? xtra + row.job + \"-\" + row.roc : xtra + row.roc)\r\n }]\r\n }));\r\n }\r\n else {\r\n this.setState(prevState => ({ vendorFilter: prevState.vendorFilter.filter(item => item.roc !== row.roc) }));\r\n }\r\n }\r\n\r\n handleDeleteVendor = (roc: any, tid: any ) => { //RENEW\r\n let result = window.confirm('Proceed to delete?')\r\n if (result) {\r\n fetch(getURL() + 'api/vselection/delete/' + roc +'/'+tid, {\r\n method: 'delete'\r\n }).then(data => {\r\n this.setState(\r\n {\r\n vendorResult: this.state.vendorResult.filter((rec: any) => {\r\n return (rec.roc != roc);\r\n })\r\n });\r\n alert('Vendor deleted from list');\r\n });\r\n }\r\n }\r\n\r\n getMANActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handleMANDelete(row.specialization)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n getFilterActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n\r\n getResultActionList(cell: any, row: VendorSelectionAllData, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n {\r\n this.handleDeleteVendor(row.roc, row.tenderid)\r\n }}>\r\n \r\n
\r\n );\r\n }\r\n\r\n handleMANSearch = (e: any) => {\r\n e.preventDefault();\r\n let result = window.confirm('Proceed to search?')\r\n if (result) {\r\n //e.preventDefault();\r\n const datax = new FormData(e.target);\r\n const object: { [key: string]: FormDataEntryValue | null } = {};\r\n //datax.forEach((value, key:any) => {\r\n // if (key == \"tenderNo\")\r\n // object[key] = this.state.tenderNo;\r\n // else if (key == \"class\")\r\n // object[key] = this.state.classId;\r\n // else if (key == \"cityList\")\r\n // object[key] = this.state.vendorLocationSelection;\r\n // else if (key == \"specializationList\")\r\n // object[key] = this.state.vendorLocationSelection;\r\n // else\r\n // object[key] = value\r\n //}\r\n //);\r\n let postdata = {\r\n \"tenderNo\": this.state.tenderNo,\r\n \"classType\": this.state.classId,\r\n \"cityList\": this.state.vendorLocationSelection,\r\n \"specializationList\": this.state.vendorAuthoritySelection\r\n };\r\n //if (proceedSave) {\r\n var json = JSON.stringify(postdata)\r\n fetch(getURL() + 'api/vselection/man', {\r\n method: 'POST',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: json\r\n\r\n }).then(response =>\r\n response.json() as Promise\r\n )\r\n .then((data) => {\r\n if (data != null) {\r\n this.setState({ vendorMiss: data.missList, vendorInvite: data.inviteList, vendorIgnore: data.ignoreList, vendorNever: data.neverList, showResult: \"search\" });\r\n //alert(data.message)\r\n }\r\n //this.handleButtonFwdTab10(e);\r\n })\r\n //Then with the error genereted...\r\n .catch((error) => {\r\n console.error('Error:', error);\r\n alert(error)\r\n });\r\n //}\r\n }\r\n }\r\n\r\n handleClassChange = (e: any) => {\r\n this.setState({ classId: e.target.value });\r\n }\r\n\r\n handleAuthorityChange = (e: any) => {\r\n this.setState({ authorityId: e.target.value, selectedAuth: e.target.value });\r\n //this.setState({ classId: e.target.options[e.target.selectedIndex].text });\r\n //fetch(getURL() + 'api/tenderreg/detail/' + e.target.value)\r\n // .then(response => response.json() as Promise)\r\n // .then(data => {\r\n // this.setState({ tenderDesc: data.trDesc });\r\n // });\r\n this.handleAuthority(e.target.value);\r\n }\r\n\r\n handleOPTAuthorityChange = (e: any) => {\r\n this.setState({ authorityId: e.target.value });\r\n //this.handleAuthority(e.target.value);\r\n }\r\n\r\n handleOPTOptionChange = (e: any) => {\r\n this.setState({ optionId: e.target.value });\r\n //this.handleAuthority(e.target.value);\r\n }\r\n\r\n handleTenderChange = (e:any) => {\r\n this.setState({ tenderId: e.target.value, tenderNo: e.target.options[e.target.selectedIndex].text });\r\n fetch(getURL() + 'api/tenderreg/detail/' + e.target.value)\r\n .then(response => response.json() as Promise)\r\n .then(data => {\r\n this.setState({ tenderDesc: data.trDesc });\r\n });\r\n }\r\n\r\n handleStateChange = (e: any) => {\r\n this.setState({ stateId: e.target.value, stateDesc: e.target.options[e.target.selectedIndex].text});\r\n fetch(getURL() + 'api/city/getcitylist/' + e.target.value)\r\n .then(response => response.json() as Promise)\r\n .then(data => {\r\n this.setState({ cityList: data });\r\n this.setState({ cityList: [{ \"crId\": 0, \"crDesc\": \"All \" + (e.target.options[e.target.selectedIndex].text == \"All State\" ? \"City\" : e.target.options[e.target.selectedIndex].text), \"crStateid\": e.target.value, \"crStateDesc\": e.target.options[e.target.selectedIndex].text}, ...this.state.cityList] });\r\n });\r\n }\r\n\r\n handleCityChange = (e: any) => {\r\n this.setState({ cityId: e.target.value, cityDesc: e.target.options[e.target.selectedIndex].text });\r\n //fetch(getURL() + 'api/city/getcitylist/' + e.target.value)\r\n // .then(response => response.json() as Promise)\r\n // .then(data => {\r\n // /this.setState({ cityList: data });\r\n // //this.setState({ cityList: [{ \"crId\": 0, \"crDesc\": \"All \" + (e.target.options[e.target.selectedIndex].text == \"All State\" ? \"City\" : e.target.options[e.target.selectedIndex].text), \"crStateid\": e.target.value, \"crStateDesc\": e.target.options[e.target.selectedIndex].text }, ...this.state.cityList] });\r\n // });\r\n }\r\n\r\n\r\n\r\n handleAuthority(auth: string) {\r\n fetch(getURL() + 'api/authohn/list/' + auth) //mof\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n this.setState({ authhList: data, authshList: [], authcList: [] });\r\n });\r\n fetch(getURL() + 'api/authocrn/list/' + auth) //cidb\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n this.setState({ authcrList: data });\r\n });\r\n }\r\n\r\n handleAuthorityHead(auth: string) {\r\n fetch(getURL() + 'api/authoshn/list/' + auth)\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n this.setState({ authshList: data, authcList: [] });\r\n //return data;\r\n });\r\n }\r\n\r\n handleAuthoritySubHead(auth: string) {\r\n fetch(getURL() + 'api/authoshcn/list/' + auth)\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n this.setState({ authcList: data });\r\n //return data;\r\n });\r\n }\r\n\r\n handleGroupChange = (e:any) => {\r\n this.setState({ selectedGroup: e.target.value, selectedGroupAuthDesc: e.target.options[e.target.selectedIndex].text });\r\n this.handleGroup(e.target.value);\r\n }\r\n\r\n handleSubGroupChange = (e:any) => {\r\n this.setState({ selectedSubgroup: e.target.value });\r\n this.handleSubGroup(e.target.value);\r\n }\r\n\r\n handleChildChange = (e:any) => {\r\n this.setState({ selectedChild: e.target.value });\r\n \r\n }\r\n\r\n\r\n handleAuthorityHeadChange = (e: any) => {\r\n this.setState({ selectedAuthh: e.target.value, selectedGroupAuthDesc: e.target.options[e.target.selectedIndex].text });\r\n this.handleAuthorityHead(e.target.value);\r\n\r\n }\r\n\r\n handleAuthoritySubHeadChange = (e: any) => {\r\n this.setState({ selectedAuthsh: e.target.value });\r\n this.handleAuthoritySubHead(e.target.value);\r\n }\r\n\r\n handleAuthorityChildChange = (e: any) => {\r\n this.setState({ selectedAuthc: e.target.value });\r\n //this.handleAuthoritySubHead(e.target.value);\r\n }\r\n\r\n handleAuthorityClassChange = (e: any) => {\r\n this.setState({ selectedAuthcr: e.target.value });\r\n this.handleAuthoritySubHead(e.target.value);\r\n }\r\n\r\n\r\n handleGroup(auth: string) {\r\n fetch(getURL() + 'api/mfref/list/' + auth) //mof\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n this.setState({ mfrefList: data });\r\n\r\n });\r\n }\r\n\r\n handleSubGroup(auth: string) {\r\n fetch(getURL() + 'api/msfrf/list/' + auth)\r\n .then(response => response.json() as Promise)\r\n //this.handlePopupAnn(true, data, \"Add\", \"\")\r\n .then(data => {//alert(data.dtId)\r\n this.setState({ msfrfList: data });\r\n //return data;\r\n });\r\n }\r\n\r\n\r\n tenderListItems = (items:any) => {\r\n const tenderItems:any = []\r\n items.forEach((item:any) => {\r\n tenderItems.push({item.trTendregno} )\r\n });\r\n return tenderItems;\r\n }\r\n\r\n stateListItems = (items: any) => {\r\n const stateItems: any = []\r\n items.forEach((item: any) => {\r\n stateItems.push({item.srDesc} )\r\n });\r\n //stateItems.push( All-{this.state.stateId} )\r\n return stateItems;\r\n }\r\n\r\n cityListItems = (items: any) => {\r\n const cityItems: any = []\r\n items.forEach((item: any) => {\r\n cityItems.push({item.crDesc} )\r\n });\r\n //cityItems.push(All State )\r\n return cityItems;\r\n }\r\n\r\n groupListItems = (items:any, selected:any) => {\r\n const groupItems:any = []\r\n items.forEach((item:any) => {\r\n groupItems.push({item.mhGroupdesc} )\r\n });\r\n return groupItems;\r\n }\r\n\r\n subgroupListItems = (items:any, selected:any) => {\r\n const subgroupItems:any = []\r\n items.forEach((item:any) => {\r\n subgroupItems.push({item.mfFielddesc} )\r\n });\r\n return subgroupItems;\r\n }\r\n\r\n childListItems = (items:any, selected:any) => {\r\n const childItems:any = []\r\n items.forEach((item:any) => {\r\n childItems.push({item.msSbflddesc} )\r\n });\r\n return childItems;\r\n }\r\n\r\n authListItems = (items: any, selected: any) => {\r\n const authItems:any = []\r\n items.forEach((item:any) => {\r\n authItems.push({item.arAuthodesc} )\r\n });\r\n return authItems;\r\n }\r\n\r\n authhListItems = (items:any, selected:any) => {\r\n const authhItems: any = []\r\n items.forEach((item: any) => {\r\n authhItems.push({item.ahAheaddesc} )\r\n });\r\n return authhItems;\r\n }\r\n\r\n authshListItems = (items: any, selected: any) => {\r\n const authshItems: any = []\r\n items.forEach((item: any) => {\r\n authshItems.push({item.asSheaddesc} )\r\n });\r\n return authshItems;\r\n }\r\n\r\n //authcListItems = (items) => {\r\n // const authcItems = []\r\n // items.forEach((item) => {\r\n // authcItems.push({item.hcChilddesc} )\r\n // });\r\n // return authcItems;\r\n //}\r\n authcListItems = (items: any, selected: any) => {\r\n const authcItems: any = []\r\n items.forEach((item: any) => {\r\n authcItems.push({item.hcChilddesc} )\r\n });\r\n return authcItems;\r\n }\r\n\r\n authcrListItems = (items: any, selected: any) => {\r\n const authcrItems: any = []\r\n items.forEach((item: any) => {\r\n authcrItems.push({item.acClssgdesc} )\r\n });\r\n return authcrItems;\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderTable() {\r\n const optionzLocation = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPage,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorLocationSelection.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n };\r\n const optionzOPT= {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageOPT,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorAuthoritySelection.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageOPT: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageOPT: sizePerPage, currentPageOPT: 1 });\r\n },\r\n };\r\n const optionzMAN = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageMAN,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorAuthoritySelection.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageMAN: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageMAN: sizePerPage, currentPageMAN: 1 });\r\n },\r\n };\r\n const optionzMiss = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageMiss,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorMiss.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageMiss: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageMiss: sizePerPage, currentPageMiss: 1 });\r\n },\r\n };\r\n const optionzNever = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageNever,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorNever.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageNever: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageNever: sizePerPage, currentPageNever: 1 });\r\n },\r\n };\r\n const optionzInvite = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageInvite,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorInvite.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageInvite: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageInvite: sizePerPage, currentPageInvite: 1 });\r\n },\r\n };\r\n const optionzIgnore = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageIgnore,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorIgnore.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageIgnore: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageIgnore: sizePerPage, currentPageIgnore: 1 });\r\n },\r\n };\r\n const optionzResult = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageFilter,\r\n sizePerPage: this.state.vendorResult.length,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorFilter.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: false, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: true, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPageFilter: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPageFilter: sizePerPage, currentPageFilter: 1 });\r\n },\r\n };\r\n\r\n const columnzLocation = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'stateDesc',\r\n text: 'STATE',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small',width:'100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'cityDesc',\r\n text: 'CITY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getLocationActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzOPT = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezOPT,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageOPT;\r\n var pageNumber = this.state.currentPageOPT;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'authority',\r\n text: 'AUTHORITY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'option',\r\n text: 'OPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getOPTActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzMAN = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezMAN,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageMAN;\r\n var pageNumber = this.state.currentPageMAN;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'authority',\r\n text: 'AUTHORITY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'option',\r\n text: 'OPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getMANActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzMANOPT = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezOPT,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageOPT;\r\n var pageNumber = this.state.currentPageOPT;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'authority',\r\n text: 'AUTHORITY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'categoryDesc',\r\n text: 'CATEGORY',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'specialization',\r\n text: 'CODE',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'grade',\r\n text: 'CLASS/GRADE',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'option',\r\n text: 'OPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getOPTActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzMiss = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezMiss,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageMiss;\r\n var pageNumber = this.state.currentPageMiss;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerdate',\r\n text: 'DATE REGISTER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'DATE EXPIRY',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'times',\r\n text: 'TIMES',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n ,\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, \"B-\"),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzNever = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezNever,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageNever;\r\n var pageNumber = this.state.currentPageNever;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerdate',\r\n text: 'DATE REGISTER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'DATE EXPIRY',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n ,\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, \"A-\"),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzInvite = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezInvite,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageInvite;\r\n var pageNumber = this.state.currentPageInvite;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerdate',\r\n text: 'DATE REGISTER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'DATE EXPIRY',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'job',\r\n text: 'JOBS',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n ,\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, \"C-\"),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzIgnore = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezIgnore,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageIgnore;\r\n var pageNumber = this.state.currentPageIgnore;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerdate',\r\n text: 'DATE REGISTER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'DATE EXPIRY',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n ,\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, \"D-\"),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const columnzResult = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezFilter,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPageFilter;\r\n var pageNumber = this.state.currentPageFilter;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small',\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '17%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'phone',\r\n text: 'TEL NO',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'fax',\r\n text: 'FAX NO',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'email',\r\n text: 'EMAIL',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expirydate',\r\n text: 'EXPIRY DATE',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expirydate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'status',\r\n text: 'STATUS',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n }\r\n //,\r\n //{\r\n // formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getResultActionList(cell, row, rowIndex, extraData),\r\n // text: '',\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // width: '7%',\r\n // fontSize: 'x-small'\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // },\r\n // csvExport: false\r\n //}\r\n //,\r\n //{\r\n // dataField: 'status',\r\n // text: 'STATUS',\r\n // sort: true,\r\n // filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n // }),\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // }\r\n //}\r\n //,\r\n //{\r\n // formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getFilterActionList(cell, row, rowIndex, extraData),\r\n // text: '',\r\n // headerStyle: {\r\n // backgroundColor: '#B171C8',\r\n // color: 'white',\r\n // width: '7%'\r\n // },\r\n // style: {\r\n // fontSize: 'x-small'\r\n // },\r\n // csvExport: false\r\n //}\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n const tenderItems = this.tenderListItems(this.state.tenderList);\r\n const stateItems = this.stateListItems(this.state.stateList);\r\n const cityItems = this.cityListItems(this.state.cityList);\r\n const groupItems = this.groupListItems(this.state.mgrefList, this.state.selectedGroup);\r\n const subgroupItems = this.subgroupListItems(this.state.mfrefList, this.state.selectedSubgroup);\r\n const childItems = this.childListItems(this.state.msfrfList, this.state.selectedChild);\r\n const authItems = this.authListItems(this.state.authList, this.state.selectedAuth);\r\n const authhItems = this.authhListItems(this.state.authhList, this.state.selectedAuthh);\r\n const authshItems = this.authshListItems(this.state.authshList, this.state.selectedAuthsh);\r\n const authcItems = this.authcListItems(this.state.authcList, this.state.selectedAuthc);\r\n const authcrItems = this.authcrListItems(this.state.authcrList, this.state.selectedAuthcr);\r\n //const current = new Date();\r\n //const date = ${current.getDate()}-${current.getMonth() + 1}-${current.getFullYear()};\r\n //alert((this.state.tenderNo === \"-\" && this.state.stateId === \"-\") ? true : false)\r\n //alert(\"state id : \" + this.state.stateId)\r\n return (\r\n\r\n \r\n\r\n {/*
VENDOR SELECTION
*/}\r\n {/*
*/}\r\n\r\n {/*
*/}\r\n {/*
*/}\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n
\r\n
\r\n Printed Date/Time \r\n
\r\n
\r\n {moment().format(\"DD-MM-YYYY hh:mm:ss A\")} \r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n
\r\n
\r\n Printed By \r\n
\r\n
\r\n {this.state.uname} \r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n
\r\n
\r\n Cost Center \r\n
\r\n
\r\n {this.state.costCenter} \r\n
\r\n
*/}\r\n {/* Tender No */}\r\n {/*
*/}\r\n {/* */}\r\n {/* {this.state.tenderNo} */}\r\n {/*
*/}\r\n {/**/}\r\n {/*< div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* Tender Description */}\r\n {/*
*/}\r\n {/* */}\r\n {/* {this.state.tenderDesc} */}\r\n {/*
*/}\r\n {/**/}\r\n < div className=\"form-group row\" >\r\n \r\n Record Found \r\n
\r\n \r\n {this.state.vendorResult.length} \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n this.state.vendorResult.length > 0 &&\r\n \r\n {/*
PROJECT'S AWARDED*/}\r\n {/*
*/}\r\n
\r\n
\r\n LIST OF VENDOR FILTERED\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport { Container } from 'reactstrap';\r\nimport \"../../../css/Home.css\";\r\nimport \"../../../css/DropdownMenu.css\";\r\n//import Navbar2 from \"./Navbar\";\r\n\r\nconst HomeHeader = () => {\r\n document.addEventListener(\"DOMContentLoaded\", function () {\r\n\r\n\r\n /////// Prevent closing from click inside dropdown\r\n document.querySelectorAll('.dropdown-menu').forEach(function (element) {\r\n element.addEventListener('click', function (e) {\r\n e.stopPropagation();\r\n });\r\n })\r\n\r\n //alert(window.innerWidth)\r\n\r\n // make it as accordion for smaller screens\r\n if (window.innerWidth < 992) {\r\n\r\n // close all inner dropdowns when parent is closed\r\n document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {\r\n everydropdown.addEventListener('hidden.bs.dropdown', function () {\r\n // after dropdown is hidden, then find all submenus\r\n this.querySelectorAll('.submenu').forEach(function (everysubmenu) {\r\n // hide every submenu as well\r\n everysubmenu.style.display = 'none';\r\n });\r\n })\r\n });\r\n\r\n document.querySelectorAll('.dropdown-menu a').forEach(function (element) {\r\n element.addEventListener('click', function (e) {\r\n\r\n let nextEl = this.nextElementSibling;\r\n if (nextEl && nextEl.classList.contains('submenu')) {\r\n // prevent opening link if link needs to open dropdown\r\n e.preventDefault();\r\n console.log(nextEl);\r\n if (nextEl.style.display == 'block') {\r\n nextEl.style.display = 'none';\r\n } else {\r\n nextEl.style.display = 'block';\r\n }\r\n\r\n }\r\n });\r\n })\r\n }\r\n // end if innerWidth\r\n\r\n });\r\n\t// DOMContentLoaded end\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n
\r\n {/**/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
VENDOR MANAGEMENT SYSTEM */}{/*
*/}\r\n {/*
*/}\r\n {/*
*/}\r\n {/*
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
VENDOR MANAGEMENT SYSTEM {/*
*/}\r\n
\r\n
\r\n
\r\n
\r\n
\r\n //
\r\n //
\r\n //
\r\n // Malaysia Airports Holdings Berhad
\r\n //
\r\n //
\r\n //
\r\n //
\r\n //
\r\n //
\r\n //
\r\n
\r\n
\r\n {/*Malaysia Airports Holdings BerhadProcurement & Contract Division, MAHB
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n {/*
*/}\r\n {/*
*/}\r\n {/**/}\r\n {/**/}\r\n {/*{this.props.children}*/}\r\n {/* */}\r\n {/*
*/}\r\n \r\n \r\n \r\n {this.props.children}\r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n","import React, { Fragment } from 'react';\r\nimport { RouteComponentProps } from 'react-router';\r\nimport \"./css/Share.css\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.css';\r\nimport 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';\r\nimport ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';\r\nimport filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';\r\n\r\nimport { PageButton, AnnouncementData, CombineVendornStatusnDetail } from '../../util/SharedClassStructure';\r\nimport { dateFormatter, emptyIndication } from '../../util/SharedFunctions';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\n//import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css\r\nimport { postDataForLogin, getURL } from \"../../services/AccessAPI\";\r\nimport SessionManager from \"../../auth/SessionManager\";\r\nimport { BsMegaphone } from \"react-icons/bs\";\r\nimport Marquee from 'react-marquee-master';\r\n\r\ninterface FetchVideoDataState {\r\n vendor: CombineVendornStatusnDetail[];\r\n marqList: AnnouncementData[];\r\n uname: string;\r\n urole: string;\r\n loading: boolean;\r\n reload: boolean;\r\n selectedRoc: string;\r\n pagez: number;\r\n pagezStatus: boolean;\r\n currentPage: number;\r\n rowPerPage: number;\r\n}\r\nexport class Home extends React.Component
, FetchVideoDataState> {\r\n constructor(props: any) {\r\n super(props);\r\n this.state={\r\n loading: true, selectedRoc: '', pagez: 1,\r\n pagezStatus: false,\r\n currentPage: 1,\r\n rowPerPage: 10,\r\n vendor: [],\r\n marqList: [],\r\n reload: false,\r\n uname: '',\r\n urole:''\r\n };\r\n\r\n fetch(getURL() + 'api/logauth/validate')\r\n .then(response => response.json())\r\n .then(data => {\r\n if (data != null) {\r\n this.setState({ uname: data.name, urole: data.role });\r\n\r\n } else { }\r\n });\r\n\r\n }\r\n\r\n selectStatusOptions = [\r\n { value: 'REQUEST FOR APPROVAL', label: 'REQUEST FOR APPROVAL' },\r\n { value: 'RENEW', label: 'RENEW' },\r\n ];\r\n\r\n componentDidMount() {\r\n fetch(getURL() + 'api/vndor/homevendorlist')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n vendor: data,\r\n loading: false,\r\n });\r\n }\r\n );\r\n fetch(getURL() + 'api/link/aall')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data2 => {\r\n this.setState({ marqList: data2 });\r\n });\r\n }\r\n\r\n getActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n const status = row.statusDesc;\r\n return (\r\n \r\n {\r\n window.location.href = '/admin/hviewvendor/?s=' + encodeURIComponent(row.roc) /*this.handleDetail(row.roc);*/\r\n }}>\r\n \r\n
\r\n );\r\n }\r\n\r\n getRemarkList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n const status = row.statusDesc;\r\n if (row.remark != null) {\r\n if (row.remark.length > 50) {\r\n return (\r\n \r\n {row.remark.substring(0, 50)}... {\r\n alert(row.remark)\r\n }}>\r\n View Full Remark\r\n \r\n
\r\n\r\n );\r\n } else {\r\n return (\r\n \r\n {row.remark}\r\n
\r\n\r\n );\r\n }\r\n }\r\n }\r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n alert('Session expired. Please re-login.')\r\n history.push('/home/alogin');\r\n }\r\n //if (this.state.urole == \"5\" || this.state.urole == \"-\" || this.state.urole == \"\" || this.state.urole == null) {\r\n // SessionManager.removeUserSession();\r\n // const { history } = this.props;\r\n // history.push('/home/alogin');\r\n //}\r\n let contents = this.state.loading\r\n ?
\r\n : this.renderVendorTable();\r\n\r\n return (\r\n \r\n {contents}\r\n
);\r\n }\r\n\r\n // Returns the HTML table to the render() method. \r\n private renderVendorTable() {\r\n\r\n const optionz = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPage,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendor.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page: any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage: any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n };\r\n const statusOptions = [\r\n { value: 'REQUEST FOR APPROVAL', label: 'REQUEST FOR APPROVAL' },\r\n { value: 'RENEW', label: 'RENEW' }\r\n ];\r\n const columnz = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n width: '3%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'COMPANY REG. NO',\r\n filter: textFilter({\r\n style: { fontSize: 'x-small' }\r\n }),\r\n headerStyle: {\r\n width: '10%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'gst',\r\n text: 'GST NO',\r\n filter: textFilter({\r\n style: { fontSize: 'x-small' }\r\n }),\r\n sort: true,\r\n headerStyle: {\r\n width: '10%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'taxDate',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.taxDate),\r\n text: 'GST NO VALIDATION DATE',\r\n sort: true,\r\n headerStyle: {\r\n width: '7%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'NAME',\r\n filter: textFilter({\r\n style: { fontSize: 'x-small' }\r\n }),\r\n sort: true,\r\n headerStyle: {\r\n width: '20%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'statusDesc',\r\n text: 'STATUS',\r\n filter: selectFilter({\r\n options: this.selectStatusOptions,\r\n defaultValue: 'REQUEST FOR APPROVAL',\r\n style: { fontSize: 'x-small' }\r\n }),\r\n sort: true,\r\n headerStyle: {\r\n width: '13%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'registerDate',\r\n text: 'REGISTRATION DATE',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.registerDate),\r\n sort: true,\r\n headerStyle: {\r\n width: '7%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'expiryDate',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.expiryDate),\r\n text: 'EXPIRY DATE',\r\n sort: true,\r\n headerStyle: {\r\n width: '7%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'renewDate',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.renewDate),\r\n text: 'RENEWAL DATE',\r\n sort: true,\r\n headerStyle: {\r\n width: '7%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n //dataField: 'remark',\r\n text: 'ADMIN REMARK',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getRemarkList(cell, row, rowIndex, extraData),\r\n sort: true,\r\n headerStyle: {\r\n width: '13%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n text: '',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getActionList(cell, row, rowIndex, extraData),\r\n headerStyle: {\r\n width: '3%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n events: {\r\n onClick: (e: any, column: any, columnIndex: any, row: any, rowIndex: any) => {\r\n this.setState({ selectedRoc: row.roc });\r\n }\r\n }\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props: any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n let a: string[] = [];\r\n this.state.marqList.map((vid, index) => {\r\n let z = index + 1;\r\n let newz = z.toString().length == 1 ? \"0\" + z.toString() : z.toString();\r\n let newMarq = \"Announcement \" + (newz) + \" > \" + vid.anouInfo;\r\n a.push(newMarq);\r\n a.push(\" \"); a.push(\" \");\r\n });\r\n return (\r\n \r\n {this.state.urole == \"1\" || this.state.urole == \"2\" ? \r\n
\r\n
ADMIN HOME
\r\n
\r\n
\r\n Welcome to Vendor Management System Administration... {this.state.uname}\r\n
\r\n
\r\n\r\n Vendor with 'Request For Approval' and 'Renew' status only.\r\n
\r\n
\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n\r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n :
\r\n
USER HOME
\r\n
\r\n Welcome to Vendor Management System Administration... {this.state.uname}\r\n
\r\n
\r\n
\r\n {a.length > 0 &&
\r\n
\r\n }\r\n
\r\n {/*onExiting={reload}*/}\r\n \r\n \r\n {this.props.actionType} Announcement \r\n \r\n \r\n \r\n \r\n < div className=\"form-group row\" >\r\n \r\n Publish Date \r\n
\r\n \r\n {/**/}\r\n {/* Select Date */}\r\n {/* */}\r\n
\r\n \r\n End Date \r\n
\r\n \r\n {/*
\r\n \r\n \r\n
\r\n
\r\n
\r\n {this.props.actionType} \r\n this.isShowModal(true)}> Cancel \r\n
\r\n
, FetchAnnouncemetDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = { announcement: new AnnouncementData, announcementList: [], loading: true, columns: [], showModalPopupAnn: false, rowValue: new AnnouncementData, actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 10 };\r\n fetch(getURL() + 'api/ann/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n announcementList: data, loading: false, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n const authResult = new URLSearchParams(window.location.search);\r\n const code: any = authResult.get('s')\r\n var regex = /^[\\-\\+]?[\\d]+\\.?(\\d+)?$/;\r\n var empid = regex.test(code) ? parseInt(code) : '';\r\n if (empid == 1) {\r\n alert('Announcement successfully saved')\r\n }\r\n else if (empid == 2) {\r\n alert('Announcement successfully updated')\r\n }\r\n else if (empid == 3) {\r\n alert('Announcement successfully deleted')\r\n }\r\n else if (empid == 4) {\r\n alert('Unable to proceed with current process. Please contact system administrator')\r\n }\r\n\r\n // This binding is necessary to make \"this\" work in the callback \r\n this.handleDelete = this.handleDelete.bind(this);\r\n this.handleEdit = this.handleEdit.bind(this);\r\n this.handleAdd = this.handleAdd.bind(this);\r\n }\r\n \r\n\r\n componentDidMount() {\r\n }\r\n\r\n \r\n\r\n getActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handlePopupAnn(true, row, \"Update\", \"\")}> \r\n this.handleDelete(row.anouId)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n //return window.location.href = \"/login\";\r\n }\r\n let contents = this.state.loading\r\n ?
\r\n : this.renderAnnouncementTable(this.state.announcementList);\r\n\r\n return \r\n {contents}\r\n
;\r\n }\r\n \r\n handleDelete(id: number) {\r\n if (!window.confirm(\"Proceed to delete the selected announcement?\"))\r\n return;\r\n else {\r\n fetch(getURL() + 'api/ann/delete/' + id, {\r\n method: 'delete'\r\n }).then(data => {\r\n this.setState(\r\n {\r\n announcementList: this.state.announcementList.filter((rec) => {\r\n return (rec.anouId != id);\r\n })\r\n });\r\n reload(3);\r\n });\r\n }\r\n }\r\n\r\n handleEdit(id: number) {\r\n this.props.history.push(\"/admin/haddann?id=\" + id);\r\n }\r\n\r\n handleAdd(e: any) {\r\n this.props.history.push(\"/admin/haddann\");\r\n }\r\n\r\n //onChangeEmail = async x => {\r\n // await this.setState({ email: x })\r\n //}\r\n //handlePageChange(pageNo: any) {\r\n // alert(pageNo)\r\n // this.setState({ pagez: pageNo });\r\n //}\r\n //handlePageChange: React.ChangeEventHandler = (e) => {\r\n // alert(e)\r\n // this.setState({ pagez: parseInt(e)})\r\n //}\r\n //handlePageChange(e: any) {\r\n // //useEffect(() => {\r\n // // setTimeout(() => {\r\n // // this.setState({ pagez: e.target.value });\r\n // // }, 1000);\r\n // //});\r\n // alert(\"e : \" + e.target.value)\r\n // this.setState({ pagez: e.target.value });\r\n //}\r\n\r\n //static getDerivedStateFromProps(nextProps:any, prevState:any) {\r\n // //alert(\"derived : \" + new Date(nextProps.rowValue.anouDatep) + \", state : \" + prevState.publishDate)\r\n // //alert(\"1 status : \" + prevState.pagezStatus)\r\n // //if (nextProps.pagez != null) {\r\n // var tempPagez = prevState.pagez;\r\n // //var tempEndDate = prevState.endDate;\r\n // if (prevState.pagezStatus == false) {\r\n // //alert(\"2 status : \" + prevState.publishDateStatus)\r\n // if (parseInt(nextProps.pagez) !== prevState.pagez) {\r\n // //Change in props\r\n // //alert(\"date : \" + new Date(nextProps.rowValue.anouDatep))\r\n // //return {\r\n // // publishDate: new Date(nextProps.rowValue.anouDatep)\r\n // //};\r\n // tempPagez = parseInt(nextProps.pagez);\r\n\r\n // }\r\n // }\r\n // ////alert(\"1 status : \" + prevState.endDateStatus)\r\n // //if (prevState.endDateStatus == false) {\r\n // // //alert(\"2 status : \" + prevState.publishDateStatus)\r\n // // if (new Date(nextProps.rowValue.anouDatee) !== prevState.endDate) {\r\n // // //Change in props\r\n // // //alert(\"date : \" + new Date(nextProps.rowValue.anouDatep))\r\n // // //return {\r\n // // // endDate: new Date(nextProps.rowValue.anouDatee)\r\n // // //};\r\n // // tempEndDate = new Date(nextProps.rowValue.anouDatee);\r\n // // }\r\n // //}\r\n // return {\r\n // pagez: tempPagez,\r\n // pagezStatus: false\r\n // //endDate: tempEndDate\r\n // };\r\n // //else { return null;}\r\n // //}\r\n // //alert('sdads')\r\n // return null; // No change to states\r\n // //return { publishDate: props.rowValue.anouDatep }\r\n\r\n //}\r\n\r\n handlePopupAnn = (status: boolean, row: AnnouncementData, action: string, message: string) => {\r\n this.setState({ showModalPopupAnn: status, rowValue : row, actionType: action, returnMessage:message });\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderAnnouncementTable(announcementList: AnnouncementData[]) {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n //return window.location.href = \"/login\";\r\n }\r\n const optionz = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n //page: 1,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.announcementList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n page: this.state.currentPage\r\n };\r\n\r\n const columnz = [\r\n {\r\n dataField: '',\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'anouInfo',\r\n text: 'INFORMATION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small',width:'100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '70%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'anouDatep',\r\n text: 'DATE PUBLISH',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.anouDatep),\r\n csvFormatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.anouDatep),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'anouDatee',\r\n text: 'DATE END',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.anouDatee),\r\n csvFormatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatterExcel(row.anouDatee),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: '',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n\r\n return (\r\n \r\n
ANNOUNCEMENT
\r\n
\r\n Announcement List\r\n
\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n {item.plDescription} )\r\n });\r\n return tenderItems;\r\n }\r\n\r\n saveFileSelected = (e) => {\r\n this.setState({ fileSelected: e.target.files[0], fileNameSelected: e.target.files[0].name, tenderId: this.props.rowValue.dtId });\r\n };\r\n\r\n viewAttachment = (e) => {\r\n if (this.props.rowValue != null) {\r\n if (this.props.rowValue.dtPath != \"\" && this.props.rowValue.dtPath != null) {\r\n return View Attachment \r\n }\r\n }\r\n };\r\n\r\n openAttachment = (e) => {\r\n if (this.props.rowValue != null) { window.open(getURL() + 'file/advertisement/' + this.props.rowValue.dtPath, \"_blank\") };\r\n };\r\n\r\n static getDerivedStateFromProps(nextProps, prevState) {\r\n if (nextProps.rowValue != null) {\r\n var tempStartDate = prevState.startDate;\r\n var tempEndDate = prevState.endDate;\r\n if (prevState.startDateStatus == false) {\r\n if (new Date(nextProps.rowValue.dtStartdate) !== prevState.startDate) {\r\n tempStartDate = new Date(nextProps.rowValue.dtStartdate);\r\n }\r\n }\r\n if (prevState.endDateStatus == false) {\r\n if (new Date(nextProps.rowValue.dtEnddate) !== prevState.endDate) {\r\n tempEndDate = new Date(nextProps.rowValue.dtEnddate);\r\n }\r\n }\r\n return {\r\n startDate: tempStartDate,\r\n endDate: tempEndDate\r\n };\r\n }\r\n return null; // No change to states\r\n }\r\n\r\n render() {\r\n const tenderItems = this.tenderListItems(this.props.tenderList);\r\n const viewButton = this.viewAttachment();\r\n const memoValue = (this.props.rowValue != null ? this.props.rowValue.dtMemo : \"\");\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n {this.props.actionType} Tender Advertisement \r\n \r\n \r\n \r\n \r\n < div className=\"form-group row\" >\r\n \r\n Tender No \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Description \r\n
\r\n \r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Start Date \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n End Date \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Select Attachment \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Current Advertisement Attachment \r\n
\r\n \r\n {(this.props.rowValue != null ? this.props.rowValue.dtPath : \"\")} {viewButton}\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n {this.props.actionType} \r\n this.isShowModal(true)}> Cancel \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}","import React, { Fragment} from 'react';\r\nimport { RouteComponentProps } from 'react-router';\r\nimport \"../css/Share.css\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.css';\r\nimport 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';\r\nimport ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';\r\nimport filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';\r\nimport SessionManager from \"../../../auth/SessionManager\";\r\nimport { postDataForLogin, getURL } from \"../../../services/AccessAPI\";\r\nimport { AdvertisementData } from '../../../util/SharedClassStructure';\r\nimport { dateFormatter, dateFormatterExcel, emptyIndication } from '../../../util/SharedFunctions';\r\nimport { ModalPopupAdvertisement } from './ModalPopupAdvertisement';\r\n\r\ninterface FetchAnnouncemetDataState {\r\n tenderList: AdvertisementData[];\r\n advertisementList: AdvertisementData[];\r\n advertisement: AdvertisementData;\r\n columns: [];\r\n loading: boolean;\r\n showModalPopupAnn: boolean;\r\n rowValue: AdvertisementData;\r\n actionType: string;\r\n returnMessage: string;\r\n pagez: number;\r\n pagezStatus: false,\r\n currentPage: number,\r\n rowPerPage: number\r\n}\r\nvar reload = (status: any) => window.location.href = '/admin/manage/hfetchadv?s=' + status;\r\n\r\nexport class FetchAdvertisement extends React.Component, FetchAnnouncemetDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = { advertisement: new AdvertisementData, tenderList: [], advertisementList: [], loading: true, columns: [], showModalPopupAnn: false, rowValue: new AdvertisementData, actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 10 };\r\n fetch(getURL() + 'api/adv/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n advertisementList: data, loading: false, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n fetch(getURL() + 'api/adv/list/advertisenp')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data2 => {\r\n this.setState({\r\n tenderList: data2, loading: false, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n \r\n const authResult = new URLSearchParams(window.location.search);\r\n const code: any = authResult.get('s')\r\n var regex = /^[\\-\\+]?[\\d]+\\.?(\\d+)?$/;\r\n var empid = regex.test(code) ? parseInt(code) : '';\r\n if (empid == 1) {\r\n alert('Tender advertisement successfully saved')\r\n }\r\n else if (empid == 2) {\r\n alert('Tender advertisement successfully updated')\r\n }\r\n else if (empid == 3) {\r\n alert('Tender advertisement successfully deleted')\r\n }\r\n else if (empid == 4) {\r\n alert('Unable to proceed with current process. Please contact system administrator')\r\n }\r\n\r\n // This binding is necessary to make \"this\" work in the callback \r\n this.handleDelete = this.handleDelete.bind(this);\r\n //this.handleEdit = this.handleEdit.bind(this);\r\n //this.handleAdd = this.handleAdd.bind(this);\r\n this.handleNewTender = this.handleNewTender.bind(this);\r\n }\r\n \r\n componentDidMount() {\r\n }\r\n\r\n getActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handlePopupAnn(true, row, \"Update\", \"\")}> \r\n this.handleDelete(row.anouId)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n //return window.location.href = \"/login\";\r\n }\r\n //let contents = this.state.loading\r\n // ? Loading...
\r\n // : this.renderAnnouncementTable(this.state.announcementList);\r\n let contents = this.state.loading\r\n ?
\r\n : this.renderAnnouncementTable(this.state.advertisementList);\r\n\r\n return \r\n {contents}\r\n
;\r\n }\r\n \r\n handleDelete(id: number) {\r\n if (!window.confirm(\"Proceed to delete the selected tender advertisement?\"))\r\n return;\r\n else {\r\n fetch(getURL() + 'api/adv/delete/' + id, {\r\n method: 'delete'\r\n }).then(data => {\r\n this.setState(\r\n {\r\n advertisementList: this.state.advertisementList.filter((rec) => {\r\n return (rec.dtId != id);\r\n })\r\n });\r\n reload(3);\r\n });\r\n }\r\n }\r\n\r\n handleNewTender(id: number) {\r\n if (id != 1) {\r\n fetch(getURL() + 'api/adv/detail/' + id)\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n this.handlePopupAnn(true, data, \"Add\", \"\")\r\n });\r\n }\r\n else\r\n this.handlePopupAnn(true, new AdvertisementData, \"Add\", \"\")\r\n }\r\n\r\n //handleEdit(id: number) {\r\n // this.props.history.push(\"/admin/haddann?id=\" + id);\r\n //}\r\n\r\n //handleAdd(e: any) {\r\n // this.props.history.push(\"/admin/haddann\");\r\n //}\r\n\r\n handlePopupAnn = (status: boolean, row: AdvertisementData, action: string, message: string) => {\r\n this.setState({ showModalPopupAnn: status, rowValue : row, actionType: action, returnMessage:message });\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderAnnouncementTable(advertisementList: AdvertisementData[]) {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n //return window.location.href = \"/login\";\r\n }\r\n const optionz = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPage,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.advertisementList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n };\r\n\r\n const columnz = [\r\n {\r\n dataField: '',\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'dtTenderno',\r\n text: 'TENDER NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small',width:'100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '24%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'dtMemo',\r\n text: 'DESCRIPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'dtStartdate',\r\n text: 'START DATE',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.dtStartdate),\r\n csvFormatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.dtStartdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'dtEnddate',\r\n text: 'END DATE',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.dtEnddate),\r\n csvFormatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatterExcel(row.dtEnddate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: '',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '8%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n\r\n return (\r\n \r\n
TENDER ADVERTISEMENT
\r\n
\r\n Tender Advertisement List\r\n
\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n \r\n \r\n \r\n {this.props.actionType} Commercial Tender Advertisement \r\n \r\n \r\n \r\n */}\r\n < div className=\"form-group row\" >\r\n \r\n Tender No \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Description \r\n
\r\n \r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Start Date \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n End Date \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Status \r\n
\r\n \r\n \r\n - PLEASE SELECT - \r\n Evaluation Stage \r\n Retender \r\n Awarded \r\n Null \r\n \r\n
\r\n \r\n {/*< div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* Select Attachment */}\r\n {/*
*/}\r\n {/* */}\r\n {/*
*/}\r\n {/**/}\r\n {/*< div className=\"form-group row\" >*/}\r\n {/* */}\r\n {/* Current Advertisement Attachment */}\r\n {/*
*/}\r\n {/* */}\r\n {/* {(this.props.rowValue != null ? this.props.rowValue.dtPath : \"\")} {viewButton}*/}\r\n {/*
*/}\r\n {/**/}\r\n \r\n
\r\n
\r\n
\r\n {this.props.actionType} \r\n this.isShowModal(true)}> Cancel \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}","import React, { Fragment} from 'react';\r\nimport { RouteComponentProps } from 'react-router';\r\nimport \"../css/Share.css\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.css';\r\nimport 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';\r\nimport ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';\r\nimport filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';\r\nimport SessionManager from \"../../../auth/SessionManager\";\r\nimport { postDataForLogin, getURL } from \"../../../services/AccessAPI\";\r\nimport { AdvertisementData, CommTenderData } from '../../../util/SharedClassStructure';\r\nimport { dateFormatter, dateFormatterExcel, emptyIndication } from '../../../util/SharedFunctions';\r\nimport { ModalPopupCommAdvertisement } from './ModalPopupCommAdvertisement';\r\n\r\ninterface FetchAnnouncemetDataState {\r\n tenderList: AdvertisementData[];\r\n advertisementList: CommTenderData[];\r\n advertisement: CommTenderData;\r\n columns: [];\r\n loading: boolean;\r\n showModalPopupAnn: boolean;\r\n rowValue: CommTenderData;\r\n actionType: string;\r\n returnMessage: string;\r\n pagez: number;\r\n pagezStatus: false,\r\n currentPage: number,\r\n rowPerPage: number\r\n}\r\nvar reload = (status: any) => window.location.href = '/admin/manage/hfetchcommadv?s=' + status;\r\n\r\nexport class FetchCommAdvertisement extends React.Component, FetchAnnouncemetDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = { advertisement: new CommTenderData, tenderList: [], advertisementList: [], loading: true, columns: [], showModalPopupAnn: false, rowValue: new CommTenderData, actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 10 };\r\n fetch(getURL() + 'api/commadv/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n advertisementList: data, loading: false, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n fetch(getURL() + 'api/adv/list/advertisenp')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data2 => {\r\n this.setState({\r\n tenderList: data2, loading: false, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n \r\n const authResult = new URLSearchParams(window.location.search);\r\n const code: any = authResult.get('s')\r\n var regex = /^[\\-\\+]?[\\d]+\\.?(\\d+)?$/;\r\n var empid = regex.test(code) ? parseInt(code) : '';\r\n if (empid == 1) {\r\n alert('Commercial Tender advertisement successfully saved')\r\n }\r\n else if (empid == 2) {\r\n alert('Commercial Tender advertisement successfully updated')\r\n }\r\n else if (empid == 3) {\r\n alert('Commercial Tender advertisement successfully deleted')\r\n }\r\n else if (empid == 4) {\r\n alert('Unable to proceed with current process. Please contact system administrator')\r\n }\r\n\r\n // This binding is necessary to make \"this\" work in the callback \r\n this.handleDelete = this.handleDelete.bind(this);\r\n //this.handleEdit = this.handleEdit.bind(this);\r\n //this.handleAdd = this.handleAdd.bind(this);\r\n this.handleNewTender = this.handleNewTender.bind(this);\r\n }\r\n\r\n selectStatusOptions = [\r\n { value: 'Evaluation', label: 'Evaluation' },\r\n { value: 'Awarded', label: 'Awarded' },\r\n { value: 'Retender', label: 'Retender' },\r\n { value: 'Null', label: 'Null' }\r\n ];\r\n \r\n componentDidMount() {\r\n }\r\n\r\n getActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handlePopupAnn(true, row, \"Update\", \"\")}> \r\n this.handleDelete(row.dcUid)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n //return window.location.href = \"/login\";\r\n }\r\n //let contents = this.state.loading\r\n // ? Loading...
\r\n // : this.renderAnnouncementTable(this.state.announcementList);\r\n let contents = this.state.loading\r\n ?
\r\n : this.renderAnnouncementTable(this.state.advertisementList);\r\n\r\n return \r\n {contents}\r\n
;\r\n }\r\n \r\n handleDelete(id: string) {\r\n if (!window.confirm(\"Proceed to delete the selected commercial tender advertisement?\"))\r\n return;\r\n else {\r\n fetch(getURL() + 'api/commadv/delete/' + id, {\r\n method: 'delete'\r\n }).then(data => {\r\n this.setState(\r\n {\r\n advertisementList: this.state.advertisementList.filter((rec) => {\r\n return (rec.dcUid != id);\r\n })\r\n });\r\n reload(3);\r\n });\r\n }\r\n }\r\n\r\n handleNewTender(id: number) {\r\n fetch(getURL() + 'api/adv/detail/' + id)\r\n .then(response => response.json() as Promise)\r\n .then(data => {//alert(data.dtId)\r\n this.handlePopupAnn(true, data, \"Add\", \"\")\r\n });\r\n }\r\n\r\n //handleEdit(id: number) {\r\n // this.props.history.push(\"/admin/haddann?id=\" + id);\r\n //}\r\n\r\n //handleAdd(e: any) {\r\n // this.props.history.push(\"/admin/haddann\");\r\n //}\r\n\r\n handlePopupAnn = (status: boolean, row: CommTenderData, action: string, message: string) => {\r\n this.setState({ showModalPopupAnn: status, rowValue : row, actionType: action, returnMessage:message });\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderAnnouncementTable(advertisementList: CommTenderData[]) {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n //return window.location.href = \"/login\";\r\n }\r\n const optionz = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPage,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.advertisementList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n };\r\n\r\n const columnz = [\r\n {\r\n dataField: '',\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'dcTenderno',\r\n text: 'TENDER NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small',width:'100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '24%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'dcMemo',\r\n text: 'DESCRIPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '35%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'dcStartdate',\r\n text: 'START DATE',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.dcStartdate),\r\n csvFormatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.dcStartdate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'dcEnddate',\r\n text: 'END DATE',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.dcEnddate),\r\n csvFormatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatterExcel(row.dcEnddate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'dcStatus',\r\n text: 'STATUS',\r\n sort: true,\r\n //filter: textFilter({\r\n // style: { fontSize: 'x-small', width: '100%' }\r\n //}),\r\n filter: selectFilter({\r\n options: this.selectStatusOptions,\r\n defaultValue: 'Awarded',\r\n style: { fontSize: 'x-small' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: '',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '8%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n\r\n return (\r\n \r\n
COMMERCIAL TENDER ADVERTISEMENT STATUS
\r\n
\r\n Commercial Tender Advertisement List\r\n
\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n {/* this.handleDelete(row.roc, row.tenderid)}>\r\n \r\n
\r\n );\r\n }\r\n getActionListSole(cell, row, rowIndex, extraData) {\r\n return (\r\n \r\n this.handleOperation(row)}> \r\n {/* this.handleDelete(row.roc, row.tenderid)}>*/}\r\n {/* */}\r\n
\r\n );\r\n }\r\n\r\n render() {\r\n const optionzInvitee = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageInvitee,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.props.inviteeList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page) => {\r\n this.setState({ currentPageInvitee: page });\r\n },\r\n onSizePerPageChange: (sizePerPage) => {\r\n this.setState({ rowPerPageInvitee: sizePerPage, currentPageInvitee: 1 });\r\n },\r\n };\r\n\r\n const columnzInvitee = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezInvitee,\r\n formatter: (cell, row, rowIndex, formatExtraData) => {\r\n var pageSize = this.state.rowPerPageInvitee;\r\n var pageNumber = this.state.currentPageInvitee;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'mtel',\r\n text: 'TEL NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'mfax',\r\n text: 'FAX NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'email',\r\n text: 'EMAIL',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n wordWrap: 'break-word',\r\n whiteSpace:'normal'\r\n }\r\n\r\n },\r\n {\r\n dataField: 'comStatus',\r\n text: 'STATUS',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell, row, rowIndex, extraData) => this.getActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n const optionzSole = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPageSole,\r\n sizePerPage: 3,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '3', value: 3\r\n }, {\r\n text: '5', value: 5\r\n }, {\r\n text: 'All', value: this.props.inviteeList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page) => {\r\n this.setState({ currentPageSole: page });\r\n },\r\n onSizePerPageChange: (sizePerPage) => {\r\n this.setState({ rowPerPageSole: sizePerPage, currentPageSole: 1 });\r\n },\r\n };\r\n\r\n const columnzSole = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagezSole,\r\n formatter: (cell, row, rowIndex, formatExtraData) => {\r\n var pageSize = this.state.rowPerPageSole;\r\n var pageNumber = this.state.currentPageSole;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'sole',\r\n text: 'SOLE STATUS',\r\n sort: true,\r\n filter: selectFilter({\r\n options: this.selectStatusOptions,\r\n defaultValue: 'NONSOLE',\r\n style: { fontSize: 'x-small' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '15%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'roc',\r\n text: 'ROC NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'name',\r\n text: 'COMPANY NAME',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '45%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'mtel',\r\n text: 'TEL NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'mfax',\r\n text: 'FAX NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell, row, rowIndex, extraData) => this.getActionListSole(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n CLOSE TENDER SELECTION\r\n \r\n \r\n \r\n \r\n
\r\n
ATTACHED COMPANY
\r\n
\r\n Search and Add to Selection Result\r\n
\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n RESULT
\r\n \r\n Invitee List\r\n
\r\n \r\n {\r\n props => (\r\n \r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n
\r\n this.isShowModal(true)}> Close \r\n
\r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n","import React, { Fragment} from 'react';\r\nimport { RouteComponentProps } from 'react-router';\r\nimport \"../css/Share.css\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.css';\r\nimport 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';\r\nimport ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';\r\nimport filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';\r\nimport { postDataForLogin, getURL } from \"../../../services/AccessAPI\";\r\nimport SessionManager from \"../../../auth/SessionManager\";\r\nimport { CombineVendorInviteeData, TenderRegData } from '../../../util/SharedClassStructure';\r\nimport { dateFormatter, dateFormatterExcel, emptyIndication } from '../../../util/SharedFunctions';\r\nimport { ModalPopupFilterResult } from './ModalPopupFilterResult';\r\n\r\ninterface FetchFilterResultDataState {\r\n tenderList: TenderRegData[];\r\n inviteeList: CombineVendorInviteeData[];\r\n soleList: CombineVendorInviteeData[];\r\n loading: boolean;\r\n showModalPopupAnn: boolean;\r\n rowValue: TenderRegData;\r\n actionType: string;\r\n returnMessage: string;\r\n pagez: number;\r\n pagezStatus: false;\r\n currentPage: number;\r\n rowPerPage: number;\r\n tenderId: string;\r\n tenderNo: string;\r\n}\r\nvar reload = (status: any) => window.location.href = '/admin/tools/hfetchfrrt?s=' + status;\r\n\r\nexport class FetchFilterResult extends React.Component, FetchFilterResultDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = { tenderId: \"\", tenderNo: \"\", tenderList: [], soleList: [], inviteeList: [], rowValue: new TenderRegData(), loading: true, showModalPopupAnn: false, actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 10 };\r\n\r\n fetch(getURL() + 'api/tenderreg/list/3000')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data2 => {\r\n this.setState({\r\n tenderList: data2, loading: false, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n \r\n // This binding is necessary to make \"this\" work in the callback \r\n //this.handleDelete = this.handleDelete.bind(this);\r\n //this.handleEdit = this.handleEdit.bind(this);\r\n //this.handleAdd = this.handleAdd.bind(this);\r\n //this.handleNewTender = this.handleNewTender.bind(this);\r\n this.handleUpdateParent = this.handleUpdateParent.bind(this);\r\n this.handleDeleteParent = this.handleDeleteParent.bind(this);\r\n }\r\n \r\n componentDidMount() {\r\n }\r\n\r\n getActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handlePopupAnn(true, row, \"Update\", \"\")}> \r\n
\r\n );\r\n }\r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n }\r\n //let contents = this.state.loading\r\n // ? Loading...
\r\n // : this.renderAnnouncementTable(this.state.announcementList);\r\n let contents = this.state.loading\r\n ?
\r\n : this.renderFilterTable(this.state.tenderList);\r\n\r\n return \r\n {contents}\r\n
;\r\n }\r\n\r\n handleDeleteParent = (status: boolean, roc: string, tender: string) => {\r\n if (status) {\r\n this.handleUpdateParent(true);\r\n }\r\n }\r\n\r\n handleUpdateParent = (status: boolean) => {\r\n if (status) {\r\n fetch(getURL() + 'api/vndor/invitee/' + this.state.tenderId)\r\n .then(response => response.json() as Promise)\r\n .then(data => {\r\n this.setState({ inviteeList: data });\r\n });\r\n }\r\n }\r\n \r\n handlePopupAnn = (status: boolean, row: TenderRegData, action: string, message: string) => {\r\n if (row != null) {\r\n fetch(getURL() + 'api/vndor/sole')\r\n .then(response => response.json() as Promise)\r\n .then(data => {\r\n this.setState({ soleList: data });\r\n });\r\n\r\n fetch(getURL() + 'api/vndor/invitee/' + row.trTenderid)\r\n .then(response => response.json() as Promise)\r\n .then(data => {\r\n this.setState({ showModalPopupAnn: status, tenderId: row.trTenderid, tenderNo: row.trTendregno, inviteeList: data, actionType: action, returnMessage: message });\r\n });\r\n }\r\n else\r\n this.setState({ showModalPopupAnn: status, inviteeList: [], soleList:[], actionType: action, returnMessage: message });\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderFilterTable(tenderList: TenderRegData[]) {\r\n const optionz = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPage,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.tenderList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n };\r\n\r\n const columnz = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'trTendregno',\r\n text: 'TENDER NO',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small',width:'100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '35%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'trDesc',\r\n text: 'TENDER DESCRIPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small', width: '100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '35%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n\r\n return (\r\n \r\n
FILTER RESULT
\r\n
\r\n Close Tender Selection Result List\r\n
\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n {value} )\r\n //}\r\n const selectedMonth = (this.props.rowValue != null ? (this.props.rowValue.plMonth != 0 ? this.props.rowValue.plMonth : new Date().getMonth()) : new Date().getMonth());\r\n const selectedYear = (this.props.rowValue != null ? (this.props.rowValue.plYear != 0 ? this.props.rowValue.plYear : new Date().getFullYear()) : new Date().getFullYear());\r\n const monthz = monthListItems(selectedMonth);\r\n const yearz = yearListItems(selectedYear);\r\n \r\n \r\n \r\n\r\n //this.setState({ publishDate: \"\", endDate: \"\" });\r\n //var newPublishDate = (publishDate != \"\" ? publishDate : this.state.publishDate);\r\n //alert(\"get year value \" + yearz + \", rowvalue \" + this.props.rowValue)\r\n return (\r\n\r\n \r\n {/*onExiting={reload}*/}\r\n \r\n \r\n {this.props.actionType} Tender Plan Calendar \r\n \r\n \r\n \r\n \r\n < div className=\"form-group row\" >\r\n \r\n Tentative Month to Tender \r\n
\r\n \r\n {/*\r\n {/*January */}\r\n {/*February */}\r\n {/*March */}\r\n {/*April */}\r\n {/*May */}\r\n {/*June */}\r\n {/*July */}\r\n {/*August */}\r\n {/*September */}\r\n {/*October */}\r\n {/*November */}\r\n {/*December */}\r\n {monthz}\r\n \r\n \r\n {yearz}\r\n \r\n \r\n {/*{(this.props.rowValue != null ? (this.props.rowValue.plMonth == 12 ? \"selected\" : \"\") : new Date().getMonth())}*/}\r\n {/**/}\r\n {/* Select Date */}\r\n {/* */}\r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Update Date \r\n
\r\n \r\n {/*
\r\n \r\n \r\n
\r\n
\r\n
\r\n {this.props.actionType} \r\n this.isShowModal(true)}> Cancel \r\n
\r\n
\r\n\r\n \r\n \r\n\r\n );\r\n }\r\n}","import React, { Fragment, useEffect, useRef } from 'react';\r\nimport { RouteComponentProps } from 'react-router';\r\nimport \"../css/Share.css\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.css';\r\nimport 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';\r\nimport ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';\r\nimport filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';\r\nimport { postDataForLogin, getURL } from \"../../../services/AccessAPI\";\r\nimport SessionManager from \"../../../auth/SessionManager\";\r\nimport { AdvertisementPlanOnlyData } from '../../../util/SharedClassStructure';\r\nimport { dateFormatter, dateFormatterExcel, emptyIndication, fullMonthName } from '../../../util/SharedFunctions';\r\nimport { ModalPopupTenderPlanCalendar } from './ModalPopupTenderPlanCalendar';\r\n\r\ninterface FetchTenderPlanCalendarDataState {\r\n tenderPlanCalendarList: AdvertisementPlanOnlyData[];\r\n tenderPlanCalendar: AdvertisementPlanOnlyData;\r\n columns: [];\r\n loading: boolean;\r\n showModalPopupAnn: boolean;\r\n rowValue: AdvertisementPlanOnlyData;\r\n actionType: string;\r\n returnMessage: string;\r\n pagez: number;\r\n pagezStatus: false,\r\n currentPage: number,\r\n rowPerPage: number\r\n}\r\nvar reload = (status: any) => window.location.href = '/admin/manage/hfetchtpc?s=' + status;\r\n\r\nexport class FetchTenderPlanCalendar extends React.Component, FetchTenderPlanCalendarDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = { tenderPlanCalendar: new AdvertisementPlanOnlyData, tenderPlanCalendarList: [], loading: true, columns: [], showModalPopupAnn: false, rowValue: new AdvertisementPlanOnlyData, actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 5 };\r\n fetch(getURL() + 'api/adv/list/tpc')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n tenderPlanCalendarList: data, loading: false, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n\r\n const authResult = new URLSearchParams(window.location.search);\r\n const code: any = authResult.get('s')\r\n var regex = /^[\\-\\+]?[\\d]+\\.?(\\d+)?$/;\r\n var empid = regex.test(code) ? parseInt(code) : '';\r\n if (empid == 1) {\r\n alert('Tender Plan Calendar successfully saved')\r\n }\r\n else if (empid == 2) {\r\n alert('Tender Plan Calendar successfully updated')\r\n }\r\n else if (empid == 3) {\r\n alert('Tender Plan Calendar successfully deleted')\r\n }\r\n else if (empid == 4) {\r\n alert('Unable to proceed with current process. Please contact system administrator')\r\n }\r\n\r\n // This binding is necessary to make \"this\" work in the callback \r\n this.handleDelete = this.handleDelete.bind(this);\r\n this.handleEdit = this.handleEdit.bind(this);\r\n this.handleAdd = this.handleAdd.bind(this);\r\n }\r\n \r\n componentDidMount() {\r\n }\r\n \r\n getActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n \r\n this.handlePopupAnn(true, row, \"Update\", \"\")}> \r\n this.handleDelete(row.dtId)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n }\r\n let contents = this.state.loading\r\n ?
\r\n : this.renderTenderPlanCalendarTable(this.state.tenderPlanCalendarList);\r\n\r\n return \r\n {contents}\r\n
;\r\n }\r\n \r\n handleDelete(id: number) {\r\n if (!window.confirm(\"Proceed to delete the selected tender plan calendar?\"))\r\n return;\r\n else {\r\n fetch(getURL() + 'api/adv/deletetpc/' + id, {\r\n method: 'delete'\r\n }).then(data => {\r\n this.setState(\r\n {\r\n tenderPlanCalendarList: this.state.tenderPlanCalendarList.filter((rec) => {\r\n return (rec.dtId != id);\r\n })\r\n });\r\n reload(3);\r\n });\r\n }\r\n }\r\n\r\n handleEdit(id: number) {\r\n this.props.history.push(\"/admin/haddann?id=\" + id);\r\n }\r\n\r\n handleAdd(e: any) {\r\n this.props.history.push(\"/admin/haddann\");\r\n }\r\n\r\n //onChangeEmail = async x => {\r\n // await this.setState({ email: x })\r\n //}\r\n //handlePageChange(pageNo: any) {\r\n // alert(pageNo)\r\n // this.setState({ pagez: pageNo });\r\n //}\r\n //handlePageChange: React.ChangeEventHandler = (e) => {\r\n // alert(e)\r\n // this.setState({ pagez: parseInt(e)})\r\n //}\r\n //handlePageChange(e: any) {\r\n // //useEffect(() => {\r\n // // setTimeout(() => {\r\n // // this.setState({ pagez: e.target.value });\r\n // // }, 1000);\r\n // //});\r\n // alert(\"e : \" + e.target.value)\r\n // this.setState({ pagez: e.target.value });\r\n //}\r\n\r\n //static getDerivedStateFromProps(nextProps:any, prevState:any) {\r\n // //alert(\"derived : \" + new Date(nextProps.rowValue.anouDatep) + \", state : \" + prevState.publishDate)\r\n // //alert(\"1 status : \" + prevState.pagezStatus)\r\n // //if (nextProps.pagez != null) {\r\n // var tempPagez = prevState.pagez;\r\n // //var tempEndDate = prevState.endDate;\r\n // if (prevState.pagezStatus == false) {\r\n // //alert(\"2 status : \" + prevState.publishDateStatus)\r\n // if (parseInt(nextProps.pagez) !== prevState.pagez) {\r\n // //Change in props\r\n // //alert(\"date : \" + new Date(nextProps.rowValue.anouDatep))\r\n // //return {\r\n // // publishDate: new Date(nextProps.rowValue.anouDatep)\r\n // //};\r\n // tempPagez = parseInt(nextProps.pagez);\r\n\r\n // }\r\n // }\r\n // ////alert(\"1 status : \" + prevState.endDateStatus)\r\n // //if (prevState.endDateStatus == false) {\r\n // // //alert(\"2 status : \" + prevState.publishDateStatus)\r\n // // if (new Date(nextProps.rowValue.anouDatee) !== prevState.endDate) {\r\n // // //Change in props\r\n // // //alert(\"date : \" + new Date(nextProps.rowValue.anouDatep))\r\n // // //return {\r\n // // // endDate: new Date(nextProps.rowValue.anouDatee)\r\n // // //};\r\n // // tempEndDate = new Date(nextProps.rowValue.anouDatee);\r\n // // }\r\n // //}\r\n // return {\r\n // pagez: tempPagez,\r\n // pagezStatus: false\r\n // //endDate: tempEndDate\r\n // };\r\n // //else { return null;}\r\n // //}\r\n // //alert('sdads')\r\n // return null; // No change to states\r\n // //return { publishDate: props.rowValue.anouDatep }\r\n\r\n //}\r\n\r\n handlePopupAnn = (status: boolean, row: AdvertisementPlanOnlyData, action: string, message: string) => {\r\n //alert(row)\r\n //fetch('https://localhost:44300/List/DetailsAnn/' + row.anouId)\r\n // .then(response => response.json())\r\n // .then(data => {\r\n // this.setState({ announcement: data });\r\n // });\r\n this.setState({ showModalPopupAnn: status, rowValue : row, actionType: action, returnMessage:message });\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderTenderPlanCalendarTable(tenderPlanCalendarList: AdvertisementPlanOnlyData[]) {\r\n const optionz = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n //page: 1,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.tenderPlanCalendarList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n page: this.state.currentPage\r\n };\r\n\r\n const columnz = [\r\n {\r\n dataField: '',\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'plDescription',\r\n text: 'DESCRIPTION',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small',width:'100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '70%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'plMonth',\r\n text: 'TENTATIVE MONTH TO TENDER',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => {\r\n //console.log(row);\r\n return {fullMonthName(row.plMonth)} {row.plYear}
;\r\n },\r\n //formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.anouDatep),\r\n //csvFormatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.anouDatep),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'plDate',\r\n text: 'UPDATE DATE',\r\n sort: true,\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.plDate),\r\n csvFormatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatterExcel(row.plDate),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: '',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '8%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n\r\n return (\r\n \r\n
TENDER PLAN CALENDAR
\r\n
\r\n Tender Plan Calendar List\r\n
\r\n
\r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n \r\n\r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n View Attachment \r\n // }\r\n // }\r\n //};\r\n\r\n //openAttachment = (e) => {\r\n // if (this.props.rowValue != null) { window.open(\"https://localhost:44300/file/\" + this.props.rowValue.dtPath, \"_blank\") };\r\n //};\r\n handleChangeChk = (e) => {\r\n this.setState({ chkbox: e.target.checked });\r\n }\r\n\r\n handleCCChange = (e) => {\r\n this.setState({ccId: e.target.value });\r\n }\r\n\r\n handleroleChange = (e) => {\r\n this.setState({ roleId: e.target.value });\r\n }\r\n\r\n handleSalaryChange = (e) => {\r\n if (rx_live.test(e.target.value))\r\n this.props.handleNewSalary( e.target.value);\r\n }\r\n\r\n ccListItems = (items, selected) => {\r\n const ccItems = []\r\n items.forEach((item) => {\r\n \r\n ccItems.push({(item.ccLongdesc != \"Malaysia Airports Holdings Berhad\" ? item.ccLongdesc : item.ccLongdesc + \" (Code : \" + item.ccId + \")\")} )\r\n });\r\n return ccItems;\r\n }\r\n\r\n roleListItems = (items, selected) => {\r\n const roleItems = []\r\n items.forEach((item) => {\r\n if (this.props.actionType == \"Add\") {\r\n if (item.rfRoleid != \"5\")\r\n roleItems.push({item.rfDesc} )\r\n } else {\r\n if (this.props.rowValue != null && this.props.rowValue.udCcid == \"-\") {\r\n if (item.rfRoleid == \"5\")\r\n roleItems.push({item.rfDesc} )\r\n }\r\n else\r\n roleItems.push({item.rfDesc} )\r\n }\r\n });\r\n return roleItems;\r\n }\r\n\r\n domainListItems = (items, selected) => {\r\n const domainItems = []\r\n items.forEach((item) => {\r\n domainItems.push({item.edDomain} )\r\n });\r\n return domainItems;\r\n }\r\n\r\n render() {\r\n const cc = this.ccListItems(this.props.ccList, (this.props.rowValue != null ? (this.props.rowValue.udCcid == \"\" ? \"1000\" : this.props.rowValue.udCcid) : \"1000\"));\r\n const cccheck = (this.props.rowValue != null ? (this.props.rowValue.tuSalary == \"\" ? \"1000\" : this.props.rowValue.tuSalary) : \"1000\"); //(this.props.rowValue != null ? (this.props.rowValue.udCcid != \"-\" ? this.props.rowValue.udCcid : \"1000\") : \"1000\");\r\n const role = this.roleListItems(this.props.roleList, (this.props.rowValue != null ? this.props.rowValue.ruRoleid : \"\"));\r\n const domain = this.domainListItems(this.props.domainList, (this.props.rowValue != null ? this.props.rowValue.udEmail.substr(this.props.rowValue.udEmail.indexOf(\"@\"), this.props.rowValue.udEmail.length - this.props.rowValue.udEmail.indexOf(\"@\")) : \"@malaysiaairports.com.my\"));\r\n const domcheck = (this.props.rowValue != null ? this.props.rowValue.udEmail.substr(this.props.rowValue.udEmail.indexOf(\"@\"), this.props.rowValue.udEmail.length - this.props.rowValue.udEmail.indexOf(\"@\")) : \"@malaysiaairports.com.my\");\r\n let newfname = (this.props.rowEmpValue != null ? this.props.rowEmpValue.srEname.trim() : \"\");\r\n let newuname = ((this.props.rowValue != null ? this.props.rowValue.ulUsercode : this.props.rowEmpValue != null ? this.props.rowEmpValue.srEname.substr(0, this.props.rowEmpValue.srEname.indexOf(\" \")) + this.props.rowEmpValue.srPernr : \"\"));\r\n //alert(newuname)\r\n //const newuname = (this.props.rowEmpValue != null ? this.props.rowEmpValue.srEname.substr(0,this.props.rowEmpValue.srEname.length - this.props.rowEmpValue.srEname.indexOf(\"@\")) : \"\");\r\n //const selectedSection = (this.props.rowValue != null ? this.props.rowValue.dtSection : this.state.selectedSection);\r\n //const sectionItems = this.sectionListItems;\r\n //const viewButton = this.viewAttachment();\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n {this.props.actionType} User\r\n \r\n \r\n \r\n \r\n < div className=\"form-group row\" >\r\n \r\n Access Level \r\n
\r\n \r\n \r\n {role}\r\n \r\n
\r\n \r\n {this.props.rowValue == null &&\r\n < div className=\"form-group row\" >\r\n \r\n Salary No \r\n
\r\n \r\n
\r\n \r\n }\r\n {(this.props.rowValue != null && this.props.rowValue.ruRoleid != \"5\") &&\r\n < div className=\"form-group row\" >\r\n \r\n Salary No \r\n
\r\n \r\n {/*
\r\n \r\n \r\n }\r\n {this.props.rowValue == null &&\r\n < div className=\"form-group row\" >\r\n \r\n Name \r\n
\r\n \r\n
\r\n }\r\n {this.props.rowValue != null &&\r\n < div className=\"form-group row\" >\r\n \r\n Name \r\n
\r\n \r\n
\r\n }\r\n {(this.props.rowValue != null && this.props.rowValue.ruRoleid == \"5\") &&\r\n < div className=\"form-group row\" >\r\n \r\n Email \r\n
\r\n \r\n
\r\n \r\n }\r\n {(this.props.rowValue == null || this.props.rowValue.ruRoleid != \"5\") &&\r\n < div className=\"form-group row\" >\r\n \r\n Email \r\n
\r\n \r\n
\r\n \r\n \r\n {domain}\r\n \r\n
\r\n \r\n }\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Username \r\n
\r\n \r\n
\r\n \r\n \r\n < div className=\"form-group row\" >\r\n \r\n {(this.props.actionType == \"Add\" ? Password : \"\")}\r\n
\r\n {(this.props.actionType == \"Add\" ?
\r\n \r\n \r\n
\r\n
\r\n
\r\n {this.props.actionType} \r\n this.isShowModal(true)}> Cancel \r\n
\r\n
\r\n \r\n \r\n );\r\n }\r\n}","import React, { Fragment} from 'react';\r\nimport { RouteComponentProps } from 'react-router';\r\nimport \"../css/Share.css\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.css';\r\nimport 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';\r\nimport ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';\r\nimport filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';\r\nimport { postDataForLogin, getURL } from \"../../../services/AccessAPI\";\r\nimport SessionManager from \"../../../auth/SessionManager\";\r\nimport { UserMgmtData, CostCenterData, RoleData, DomainData, EmpData } from '../../../util/SharedClassStructure';\r\nimport { dateFormatter, dateFormatterExcel, emptyIndication } from '../../../util/SharedFunctions';\r\nimport { ModalPopupUserMgmt } from './ModalPopupUserMgmt';\r\n\r\ninterface FetchUserMgmtDataState {\r\n ccList: CostCenterData[];\r\n roleList: RoleData[];\r\n userList: UserMgmtData[];\r\n domainList: DomainData[];\r\n advertisement: UserMgmtData;\r\n columns: [];\r\n loading: boolean;\r\n showModalPopupAnn: boolean;\r\n rowValue: UserMgmtData;\r\n rowEmpValue: EmpData;\r\n actionType: string;\r\n returnMessage: string;\r\n ccId: string;\r\n pagez: number;\r\n pagezStatus: false;\r\n currentPage: number;\r\n rowPerPage: number;\r\n salaryName: string;\r\n}\r\nvar reload = (status: any) => window.location.href = '/admin/tools/hfetchumd?s=' + status;\r\n\r\nexport class FetchUserMgmt extends React.Component, FetchUserMgmtDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = { salaryName:\"\", ccId:\"\",advertisement: new UserMgmtData(), ccList: [], roleList: [], userList: [], domainList: [], loading: false, columns: [], showModalPopupAnn: false, rowValue: new UserMgmtData(), rowEmpValue: new EmpData(), actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 10 };\r\n\r\n const authResult = new URLSearchParams(window.location.search);\r\n const code: any = authResult.get('s')\r\n var regex = /^[\\-\\+]?[\\d]+\\.?(\\d+)?$/;\r\n var empid = regex.test(code) ? parseInt(code) : '';\r\n if (empid === 1) {\r\n alert('User successfully saved')\r\n }\r\n else if (empid === 2) {\r\n alert('User successfully updated')\r\n }\r\n else if (empid === 3) {\r\n alert('User successfully deleted')\r\n }\r\n else if (empid === 4) {\r\n alert('Salary number does not exist. Please refer Human Capital.')\r\n }\r\n else if (empid === 5) {\r\n alert('User already exist. You can only Delete or Update existing data')\r\n }\r\n else if (empid === 6) {\r\n alert('Unable to proceed with current process. Please contact system administrator')\r\n }\r\n\r\n // This binding is necessary to make \"this\" work in the callback \r\n this.handleDelete = this.handleDelete.bind(this);\r\n this.handleNewSalary = this.handleNewSalary.bind(this);\r\n }\r\n\r\n componentDidMount() {\r\n \r\n fetch(getURL() + 'api/cc/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data2 => {\r\n this.setState({\r\n ccList: data2, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n fetch(getURL() + 'api/rolez/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data3 => {\r\n this.setState({\r\n roleList: data3, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n fetch(getURL() + 'api/domain/all')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data4 => {\r\n this.setState({\r\n domainList: data4, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n }\r\n\r\n getActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n \r\n {this.state.ccId != \"-\" ? this.handlePopupAnn(true, row, new EmpData(), \"Update\", \"\")}> : \"\"}\r\n this.handleDelete(row.ulUserid)}>\r\n \r\n this.handleReset(row)}>\r\n \r\n
\r\n );\r\n }\r\n\r\n handleCCChange = (e: any) => {\r\n this.setState({ ccId: e.target.value, userList: [], loading: true });\r\n this.handleUpdateParent(e.target.value, true);\r\n }\r\n\r\n CCListItems = (items: any) => {\r\n const CCItems: any = []\r\n items.forEach((item: any) => {\r\n CCItems.push({(item.ccLongdesc != \"Malaysia Airports Holdings Berhad\" ? item.ccLongdesc : item.ccLongdesc + \" (Code : \" + item.ccId + \")\")} )\r\n });\r\n return CCItems;\r\n }\r\n\r\n handleUpdateParent = (cc:string, status: boolean) => {\r\n if (status && cc != \"\") {\r\n fetch(getURL() + 'api/user/list/cc/' + cc)\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data => {\r\n this.setState({\r\n userList: data, loading: false\r\n });\r\n });\r\n }\r\n }\r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n }\r\n //let contents = this.state.loading\r\n // ?
\r\n // : this.renderUserMgmtTable(this.state.userList);\r\n let contents = this.renderUserMgmtTable(this.state.userList);\r\n\r\n return \r\n {contents}\r\n
;\r\n }\r\n \r\n handleDelete(id: string) {\r\n if (!window.confirm(\"Proceed to delete the selected user?\"))\r\n return;\r\n else {\r\n fetch(getURL() + 'api/user/delete/' + id, {\r\n method: 'delete'\r\n }).then(data => {\r\n this.setState(\r\n {\r\n userList: this.state.userList.filter((rec) => {\r\n return (rec.ulUserid !== id);\r\n })\r\n });\r\n this.handleUpdateParent(this.state.ccId, true);\r\n alert('User successfully deleted');\r\n //reload(3);\r\n });\r\n }\r\n }\r\n\r\n handleReset(row: UserMgmtData) {\r\n if (!window.confirm(\"Proceed to reset this user password? An email notification regarding password reset will be sent to user email address\"))\r\n return;\r\n else {\r\n var json = JSON.stringify(row)\r\n fetch(getURL() + 'api/user/areset', {\r\n method: 'POST',\r\n headers: {\r\n Accept: 'application/json',\r\n 'Content-Type': 'application/json'\r\n },\r\n body: json\r\n\r\n }).then((response) => response.json())\r\n .then((responseJson) => {\r\n if (responseJson === 1) {\r\n alert('Password successfully reset.');\r\n } else { alert('Unable to reset password.')}\r\n })\r\n }\r\n }\r\n\r\n handlePopupAnn = (status: boolean, row: UserMgmtData, rowEmp: EmpData, action: string, message: string) => {\r\n this.setState({ showModalPopupAnn: status, rowValue: row, rowEmpValue: rowEmp, actionType: action, returnMessage: message });\r\n }\r\n\r\n handleNewSalary(id: string) {\r\n fetch(getURL() + 'api/emp/detail/' + id)\r\n .then(response => response.json() as Promise)\r\n .then(data => {\r\n this.setState({ salaryName: data.srEname })\r\n });\r\n }\r\n\r\n ccListItems = (items: CostCenterData[]) => {\r\n const ccItems: any = []\r\n items.forEach((item: CostCenterData) => {\r\n ccItems.push({ value: item.ccShortdesc, label: item.ccShortdesc })\r\n });\r\n return ccItems;\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderUserMgmtTable(userList: UserMgmtData[]) {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n }\r\n const ccItems = this.ccListItems(this.state.ccList);\r\n const optionz = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPage,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.userList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n };\r\n\r\n const columnz = [\r\n {\r\n dataField: '',\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n width: '3%',\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n \r\n {\r\n dataField: 'udUsername',\r\n text: 'NAME',\r\n filter: textFilter({\r\n style: { fontSize: 'x-small' }\r\n }),\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '19%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'ccShortdesc',\r\n text: 'COST CENTER',\r\n //filter: selectFilter({\r\n // options: ccItems,\r\n // defaultValue: 'MAHB',\r\n // style: { fontSize: 'small' }\r\n //}),\r\n filter: textFilter({\r\n style: { fontSize: 'x-small' }\r\n }),\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'ulUsercode',\r\n text: 'USERNAME',\r\n filter: textFilter({\r\n style: { fontSize: 'x-small' }\r\n }),\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '18%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'udEmail',\r\n text: 'EMAIL',\r\n filter: textFilter({\r\n style: { fontSize: 'x-small' }\r\n }),\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'udCreatedate',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => dateFormatter(row.udCreatedate),\r\n text: 'CREATED DATE',\r\n sort: true,\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: '',\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n const CCostItems = this.CCListItems(this.state.ccList);\r\n return (\r\n \r\n
USER MANAGEMENT
\r\n
\r\n User List\r\n
\r\n
\r\n < div className=\"form-group row\" >\r\n
\r\n Cost Center \r\n
\r\n
\r\n \r\n - PLEASE SELECT - \r\n ALL COST CENTER \r\n {CCostItems}\r\n \r\n
\r\n
\r\n
\r\n : \r\n {\r\n props => (\r\n \r\n
\r\n \r\n \r\n \r\n {/*handleNewTender={this.handleNewTender}*/}\r\n
\r\n
\r\n {\r\n ({\r\n paginationProps,\r\n paginationTableProps\r\n }) => (\r\n \r\n { this.node = node; }}\r\n filter={filterFactory()}\r\n filterPosition='top'\r\n noDataIndication={emptyIndication}\r\n hover\r\n condensed\r\n bootstrap4 >\r\n \r\n
\r\n )\r\n }\r\n \r\n \r\n \r\n \r\n \r\n Update MAHB Quota\r\n \r\n \r\n \r\n \r\n < div className=\"form-group row\" >\r\n \r\n State \r\n
\r\n \r\n {(this.props.rowValue != null ? this.props.rowValue.stateDesc : \"\")} \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Registered (Supplies) \r\n
\r\n \r\n
\r\n \r\n Quota (Supplies) \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Registered (Services) \r\n
\r\n \r\n
\r\n \r\n Quota (Services) \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Registered (Works) \r\n
\r\n \r\n
\r\n \r\n Quota (Works) \r\n
\r\n \r\n
\r\n \r\n < div className=\"form-group row\" >\r\n \r\n Registered (Consultant) \r\n
\r\n \r\n
\r\n \r\n Quota (Consultant) \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n (this.state.button = 1)} className=\"btn btn-primary btn-sm btn-block\" style={{ fontSize: \"x-small\" }}>Update \r\n this.isShowModal(true)}> Close \r\n
\r\n
\r\n \r\n \r\n );\r\n }\r\n}","import React, { Fragment} from 'react';\r\nimport { RouteComponentProps } from 'react-router';\r\nimport \"../css/Share.css\";\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport 'react-bootstrap-table-next/dist/react-bootstrap-table2.css';\r\nimport 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';\r\nimport 'font-awesome/css/font-awesome.min.css';\r\nimport BootstrapTable from 'react-bootstrap-table-next';\r\nimport paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';\r\nimport ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';\r\nimport filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';\r\nimport { postDataForLogin, getURL } from \"../../../services/AccessAPI\";\r\nimport SessionManager from \"../../../auth/SessionManager\";\r\nimport { CombineQuotaData } from '../../../util/SharedClassStructure';\r\nimport { dateFormatter, dateFormatterExcel, emptyIndication } from '../../../util/SharedFunctions';\r\nimport { ModalPopupQuota } from './ModalPopupQuota';\r\n\r\ninterface FetchResetEmailDataState {\r\n vendorList: CombineQuotaData[];\r\n loading: boolean;\r\n showModalPopupAnn: boolean;\r\n rowValue: CombineQuotaData;\r\n actionType: string;\r\n returnMessage: string;\r\n pagez: number;\r\n pagezStatus: false,\r\n currentPage: number,\r\n rowPerPage: number\r\n}\r\nvar reload = (status: any) => window.location.href = '/admin/admin/hfetchquota?s=' + status;\r\n\r\nexport class FetchQuota extends React.Component, FetchResetEmailDataState> {\r\n node: BootstrapTable | null | undefined;\r\n constructor(props: any) {\r\n super(props);\r\n this.state = { vendorList: [], rowValue: new CombineQuotaData, loading: true, showModalPopupAnn: false, actionType: \"\", returnMessage: \"\", pagez: 1, pagezStatus: false, currentPage: 1, rowPerPage: 10 };\r\n\r\n fetch(getURL() + 'api/quota/listall')\r\n .then(response =>\r\n response.json() as Promise\r\n )\r\n .then(data2 => {\r\n this.setState({\r\n vendorList: data2, loading: false, actionType: \"Add\", returnMessage: \"\"\r\n });\r\n });\r\n \r\n const authResult = new URLSearchParams(window.location.search);\r\n const code: any = authResult.get('s')\r\n var regex = /^[\\-\\+]?[\\d]+\\.?(\\d+)?$/;\r\n var empid = regex.test(code) ? parseInt(code) : '';\r\n if (empid == 1) {\r\n alert('MAHB quota successfully updated')\r\n }\r\n //else if (empid == 0) {\r\n // alert('Unable to proceed with current process. Please contact system administrator')\r\n //}\r\n\r\n // This binding is necessary to make \"this\" work in the callback \r\n //this.handleDelete = this.handleDelete.bind(this);\r\n //this.handleEdit = this.handleEdit.bind(this);\r\n //this.handleAdd = this.handleAdd.bind(this);\r\n //this.handleNewTender = this.handleNewTender.bind(this);\r\n }\r\n \r\n componentDidMount() {\r\n }\r\n\r\n getActionList(cell: any, row: any, rowIndex: any, extraData: any) {\r\n return (\r\n \r\n this.handlePopupAnn(true, row, \"Update\", \"\")}> \r\n {/* this.handleDelete(row.anouId)}>*/}\r\n {/* */}\r\n
\r\n );\r\n }\r\n\r\n public render() {\r\n if (!SessionManager.getToken()) {\r\n const { history } = this.props;\r\n history.push('/home/alogin');\r\n }\r\n //let contents = this.state.loading\r\n // ? Loading...
\r\n // : this.renderAnnouncementTable(this.state.announcementList);\r\n let contents = this.state.loading\r\n ?
\r\n : this.renderResetTable(this.state.vendorList);\r\n\r\n return \r\n {contents}\r\n
;\r\n }\r\n \r\n handlePopupAnn = (status: boolean, row: CombineQuotaData, action: string, message: string) => {\r\n this.setState({ showModalPopupAnn: status, rowValue:row, actionType: action, returnMessage: message });\r\n }\r\n \r\n // Returns the HTML table to the render() method. \r\n renderResetTable(vendorList: CombineQuotaData[]) {\r\n const optionz = {\r\n //custom: true,\r\n //totalSize: this.state.vendor.length,\r\n page: this.state.currentPage,\r\n sizePerPage: 10,\r\n showTotal: true, // display pagination information\r\n sizePerPageList: [{\r\n text: '10', value: 10\r\n }, {\r\n text: '15', value: 15\r\n }, {\r\n text: 'All', value: this.state.vendorList.length\r\n }], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text\r\n withFirstAndLast: false, // hide the going to first and last page button\r\n alwaysShowAllBtns: true, // always show the next and previous page button\r\n firstPageText: 'First', // the text of first page button\r\n prePageText: 'Prev', // the text of previous page button\r\n nextPageText: 'Next', // the text of next page button\r\n lastPageText: 'Last', // the text of last page button\r\n nextPageTitle: 'Go to next', // the title of next page button\r\n prePageTitle: 'Go to previous', // the title of previous page button\r\n firstPageTitle: 'Go to first', // the title of first page button\r\n lastPageTitle: 'Go to last', // the title of last page button\r\n hideSizePerPage: false, // hide the size per page dropdown\r\n hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false\r\n onPageChange: (page:any) => {\r\n this.setState({ currentPage: page });\r\n },\r\n onSizePerPageChange: (sizePerPage:any) => {\r\n this.setState({ rowPerPage: sizePerPage, currentPage: 1 });\r\n },\r\n };\r\n\r\n const columnz = [\r\n {\r\n text: '##',\r\n formatExtraData: this.state.pagez,\r\n formatter: (cell: any, row: any, rowIndex: any, formatExtraData: any) => {\r\n var pageSize = this.state.rowPerPage;\r\n var pageNumber = this.state.currentPage;\r\n return ((pageSize * (pageNumber - 1)) + (rowIndex + 1));\r\n },\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '3%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n },\r\n {\r\n dataField: 'stateDesc',\r\n text: 'STATE',\r\n sort: true,\r\n filter: textFilter({\r\n style: { fontSize: 'x-small',width:'100%' }\r\n }),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '10%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'svCombineQuota',\r\n text: 'SERVICES(Registered / Quota)',\r\n sort: true,\r\n //filter: textFilter({\r\n // style: { fontSize: 'small', width: '100%' }\r\n //}),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'spCombineQuota',\r\n text: 'SUPPLIES (Registered / Quota)',\r\n sort: true,\r\n //filter: textFilter({\r\n // style: { fontSize: 'small', width: '100%' }\r\n //}),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'wkCombineQuota',\r\n text: 'WORKS (Registered / Quota)',\r\n sort: true,\r\n //filter: textFilter({\r\n // style: { fontSize: 'small', width: '100%' }\r\n //}),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n dataField: 'cnCombineQuota',\r\n text: 'CONSULTANT (Registered / Quota)',\r\n sort: true,\r\n //filter: textFilter({\r\n // style: { fontSize: 'small', width: '100%' }\r\n //}),\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '20%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n }\r\n },\r\n {\r\n formatter: (cell: any, row: any, rowIndex: any, extraData: any) => this.getActionList(cell, row, rowIndex, extraData),\r\n text: '',\r\n headerStyle: {\r\n backgroundColor: '#B171C8',\r\n color: 'white',\r\n width: '7%',\r\n fontSize: 'x-small'\r\n },\r\n style: {\r\n fontSize: 'x-small'\r\n },\r\n csvExport: false\r\n }\r\n ];\r\n\r\n const MyExportCSV = (props:any) => {\r\n const handleClick = () => {\r\n props.onExport();\r\n };\r\n return (\r\n Export to Excel \r\n );\r\n };\r\n\r\n return (\r\n \r\n
MAHB VENDOR QUOTA MANAGEMENT
\r\n
\r\n Quota List\r\n
\r\n
\r\n {\r\n props => (\r\n \r\n \r\n
![](\".\\images\\logo-mahb_2021.png\")
\r\n ![](\".\\images\\vms_banner_test.png\")
*/}\r\n ![](\"/images/pdf.gif\")
![](\"UI/Image/vmsqrcode.png\")
\r\n