1. /**
2.  * SearchPayeePanel.js
3.  */
4.  
5. import React, { Component } from "react";
6. import { observer } from "mobx-react";
7. import { BaseContext } from "frontend-react-f4-base-commons";
8. import { BaseComponents } from "frontend-react-f4-base-ui";
9. import { Modal } from "antd";
10. import RightPanel from "../RightPanel/RightPanel";
11. import CitrineFunctionCodes from "../../enums/CitrineFunctionCodes";
12. import _ from "underscore";
13. import { browserHistory } from "react-router";
14. import BoNoRecords from "../../components/BoNoRecords/BoNoRecords";
15. import TemplateTable from "../TemplateTable/TemplateTable";
16. import FeedbackModalMessage from "../FeedbackModalMessage/FeedbackModalMessage";
17.  
18. const { connect } = BaseContext;
19.  
20. const {
21.   strings,
22.   // F4DataTable,
23.   FeedbackModal1,
24.   Feedback,
25.   F4Confirmation,
26.   ActionButton
27. } = BaseComponents;
28.  
29. @observer
30. @connect
31. class SearchPayeePanel extends Component {
32.   constructor(props) {
33.     super(props);
34.  
35.     this.state = {
36.       showErrorModal: false,
37.       errorModalMsg: "",
38.       hasAuth: false
39.     };
40.   }
41.  
42.   checkAuth = () => {
43.     const { SessionStore, auth } = this.context.store;
44.     SessionStore.checkFuncAuthorization(
45.       auth.sessionUser.user.grp.id,
46.       CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL
47.     ).then(hasAuth => {
48.       if (hasAuth) {
49.         this.setState({
50.           hasAuth: hasAuth
51.         });
52.       }
53.     });
54.   };
55.  
56.   onClickCd = data => {
57.     const { RestrictedPayeeStore } = this.context.store;
58.     let fields = RestrictedPayeeStore.payeeFields;
59.  
60.     RestrictedPayeeStore.restrictedPayeeInputs = data;
61.     console.log("id input: ", RestrictedPayeeStore.restrictedPayeeInputs);
62.     RestrictedPayeeStore.restrictedPayeeList = null;
63.     RestrictedPayeeStore.resetSearchFields();
64.     RestrictedPayeeStore.resetErrorList();
65.     RestrictedPayeeStore.selectedMenuOnSearch = 1;
66.     // browserHistory.push("/bo-bsc/departmentSearch");
67.   };
68.  
69.   _createData = () => {
70.     return [
71.       {
72.         headerTitle: strings.global_restrictedpayeenm,
73.         name: "payeeName",
74.         type: "text",
75.         width: 100,
76.         cell: props => (
77.           <span
78.             className="linkInTable"
79.             onClick={() => this.onClickCd(props.data)}
80.           >
81.             {props.data.payeeName}
82.           </span>
83.         )
84.       },
85.  
86.       {
87.         headerTitle: strings.global_amount,
88.         name: "amount",
89.         type: "text",
90.         width: 100,
91.         align: "right"
92.       },
93.       {
94.         headerTitle: strings.global_action,
95.         name: "isAllowedStr",
96.         type: "text",
97.         width: 100,
98.         sortBy: "isAllowed"
99.       },
100.       {
101.         headerTitle: strings.global_character_ignore,
102.         name: "charToIgnore",
103.         type: "text",
104.         width: 100
105.       },
106.  
107.       {
108.         headerTitle: null,
109.         name: "actions",
110.         type: "text",
111.         width: 80,
112.         isSortable: false,
113.         hideInColumnDisplay: true,
114.         hideInGrouping: true,
115.         isInReport: false,
116.         cell: props => (
117.           <div className="tableButtons">
118.             <ActionButton
119.               showEdit={props.data.showEdit}
120.               showDelete={props.data.showDelete}
121.               onEdit={() => this.onEdit(props.data)}
122.               onDelete={() => this.confirmDelete(false, props.data)}
123.             />
124.           </div>
125.         )
126.       }
127.     ];
128.   };
129.  
130.   showIcon = iconDirectory => {
131.     let icon = iconDirectory;
132.     return (
133.       <div className="scIcon">
134.         {" "}
135.         <img src={icon} />{" "}
136.       </div>
137.     );
138.   };
139.  
140.   onClickDownload = multiSort => {
141.     const { RestrictedPayeeStore } = this.context.store;
142.     return new Promise(resolve => {
143.       RestrictedPayeeStore.findBySearchModel(
144.         RestrictedPayeeStore.searchFilter,
145.         multiSort,
146.         res => {
147.           console.log("report", res);
148.           if (res.body && !res.body.error) {
149.             resolve(res.body.content);
150.           }
151.         }
152.       );
153.     });
154.   };
155.  
156.   showDataTable = () => {
157.     const { RestrictedPayeeStore, DownloadReportStore } = this.context.store;
158.     if (
159.       RestrictedPayeeStore.restrictedPayeeList &&
160.       RestrictedPayeeStore.restrictedPayeeList.length > 0
161.     ) {
162.       return (
163.         <div style={{ padding: "5px 60px 10px" }}>
164.           <TemplateTable
165.             tableKey={CitrineFunctionCodes.RESTRICTED_PAYEE_NM_SEARCH}
166.             onClickDownload={this.onClickDownload}
167.             downloadProps={{
168.               isDynamic: true,
169.               params: {
170.                 reportHeader2: strings.formatString(
171.                   strings.global_reportobj,
172.                   strings.global_restrictedpayeenm
173.                 )
174.               },
175.               fileName: "Restricted_Payee_Report"
176.             }}
177.             dataTableRef={table => (RestrictedPayeeStore.dataTableRef = table)}
178.             options={this._createData()}
179.             data={
180.               RestrictedPayeeStore.restrictedPayeeList
181.                 ? RestrictedPayeeStore.restrictedPayeeList
182.                 : null
183.             }
184.             hasSelectAll={this.state.hasAuth}
185.             defaultSort={{ updatedDt: "DESC" }}
186.             serverSideTotalCount={
187.               RestrictedPayeeStore.responseBody.totalElements
188.             }
189.             onSearch={this.onSearch}
190.             showDeleteButton={this.state.hasAuth}
191.             hasExpandable={false}
192.             onDelete={() => {
193.               const { RestrictedPayeeStore } = this.context.store;
194.               let data = RestrictedPayeeStore.dataTableRef.getSelectedRows();
195.               this.confirmDelete(true, data);
196.             }}
197.           />
198.         </div>
199.       );
200.     } else if (
201.       RestrictedPayeeStore.restrictedPayeeList &&
202.       RestrictedPayeeStore.restrictedPayeeList.length === 0
203.     ) {
204.       return <BoNoRecords />;
205.     } else {
206.       let searchIcon = "images/ego-icons/search.svg";
207.       return (
208.         <div className="scNoRecordsPanel">
209.           <div className="scSearch">
210.             {" "}
211.             {this.showIcon(searchIcon)}
212.             <br />{" "}
213.           </div>
214.           <div className="scNoRecordsText">
215.             <span>{strings.message_searchusingrightpanel}</span>
216.           </div>
217.         </div>
218.       );
219.     }
220.   };
221.  
222.   showSearchIcon = () => {
223.     console.log("Entered at showSearchIcon");
224.     let searchIcon = "images/ego-icons/search.svg";
225.     return (
226.       <div className="scNoRecordsPanel">
227.         <div className="scSearch">
228.           {this.showIcon(searchIcon)}
229.           <br />
230.         </div>
231.         <div className="scNoRecordsText">
232.           <span>{strings.message_searchusingrightpanel}</span>
233.         </div>
234.       </div>
235.     );
236.   };
237.  
238.   onSearch = multiSort => {
239.     const { auth, RestrictedPayeeStore } = this.context.store;
240.  
241.     RestrictedPayeeStore.resetErrorList();
242.  
243.     if (!multiSort) {
244.       multiSort = {
245.         page: 0,
246.         count: 10,
247.         sortList: [
248.           {
249.             direction: "desc",
250.             sort: "updatedDt"
251.           }
252.         ]
253.       };
254.     }
255.  
256.     let fields = RestrictedPayeeStore.searchRestrictedPayeeFields;
257.  
258.     {
259.       fields != undefined &&
260.         fields.map(
261.           field =>
262.             (RestrictedPayeeStore.searchFilter[field.index] = field.value)
263.         );
264.     }
265.  
266.     RestrictedPayeeStore.searchFilter.grpId = auth.sessionUser.user.grp.id;
267.     RestrictedPayeeStore.searchFilter.filterList = [
268.       RestrictedPayeeStore.searchFilter.payeeName,
269.       RestrictedPayeeStore.searchFilter.amount,
270.       RestrictedPayeeStore.searchFilter.isAllowed,
271.       RestrictedPayeeStore.searchFilter.charToIgnore
272.     ];
273.  
274.     RestrictedPayeeStore.findBySearchModelForMaintenance(
275.       RestrictedPayeeStore.searchFilter,
276.       multiSort,
277.       res => {
278.         console.log("res on Search: ", res);
279.         if (res.body && !res.body.error) {
280.           RestrictedPayeeStore.copyFromStore = res.body;
281.           RestrictedPayeeStore.responseBody = res.body;
282.           RestrictedPayeeStore.restrictedPayeeList = res.body.content;
283.           let data = RestrictedPayeeStore.restrictedPayeeList;
284.           RestrictedPayeeStore.dataTableRef.setState({
285.             data: data,
286.             copyOfData: data,
287.             totalItemsCount: res.body.totalElements
288.           });
289.           RestrictedPayeeStore.dataTableRef.forceUpdate();
290.         } else {
291.           console.log("Error:", res.body.error);
292.           _.each(res.body.error.errors, errStr => {
293.             RestrictedPayeeStore.errors.push(errStr.message);
294.           });
295.         }
296.       }
297.     );
298.   };
299.  
300.   onEdit = data => {
301.     const { RestrictedPayeeStore } = this.context.store;
302.  
303.     RestrictedPayeeStore.resetSearchFields();
304.     RestrictedPayeeStore.restrictedPayeeInputs = data;
305.     console.log("id input:  ", RestrictedPayeeStore.restrictedPayeeInputs);
306.     //console.log("props datas: ", props.data);
307.     RestrictedPayeeStore.restrictedPayeeList = null;
308.     browserHistory.push("/bo-bsc/restrictedPayeeEdit");
309.   };
310.  
311.   confirmDelete = (isMultiple, data) => {
312.     const {
313.       RestrictedPayeeStore,
314.       auth,
315.       SettingsStore,
316.       MaintenanceStore
317.     } = this.context.store;
318.  
319.     MaintenanceStore.requestModel.localUserCd = auth.sessionUser.user.cd;
320.     MaintenanceStore.requestModel.requiresApprovalFuncCd =
321.       CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL;
322.     MaintenanceStore.requestModel.editFuncCd =
323.       CitrineFunctionCodes.RESTRICTED_PAYEE_NM_EDIT;
324.     MaintenanceStore.requestModel.deleteFuncCd =
325.       CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL;
326.     MaintenanceStore.requestModel.actnFuncCd =
327.       CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL;
328.     MaintenanceStore.requestModel.approveRejectFuncCd =
329.       CitrineFunctionCodes.RESTRICTED_PAYEE_NM_APPROVE_REJECT;
330.     MaintenanceStore.requestModel.modelNm = strings.global_payee;
331.     MaintenanceStore.requestModel.grpId = auth.sessionUser.user.grp.id;
332.     MaintenanceStore.requestModel.dtlString = JSON.stringify({
333.       id: data.id,
334.       payeeName: data.payeeName,
335.       amount: data.amount,
336.       isAllowed: data.isAllowed,
337.       charToIgnore: data.charToIgnore
338.     });
339.  
340.     if (!isMultiple) {
341.       SettingsStore.confirm(
342.         strings.message_del,
343.         () => {
344.           MaintenanceStore.requestModel.filterValues = [
345.             data.payeeName,
346.             data.amount,
347.             data.isAllowed,
348.             data.charToIgnore
349.           ];
350.           MaintenanceStore.requestModel.uniqueCds = [data.payeeName];
351.  
352.           MaintenanceStore.saveOrUpdate(
353.             MaintenanceStore.requestModel,
354.             response => {
355.               RestrictedPayeeStore.resetErrorList();
356.               if (response.body && response.body.error) {
357.                 console.log("Error on Del: ", response);
358.                 MaintenanceStore.errors = [];
359.                 response.body.error.errors.map(error => {
360.                   MaintenanceStore.errors.push(error.message);
361.                 });
362.                 this.setState({
363.                   showErrorModal: true,
364.                   errorModalMsg: MaintenanceStore.errors
365.                 });
366.                 SettingsStore.isScreenLoading = false;
367.               } else if (!response.body && response.text) {
368.                 console.log("Res on Del: ", response);
369.                 RestrictedPayeeStore.ackMessage = {
370.                   header: strings.formatString(
371.                     strings.feedback_success_forapproval,
372.                     strings.formatString(
373.                       strings.global_deleteobj,
374.                       strings.global_restrictedpayeenm
375.                     )
376.                   ),
377.                   refNo: response.text
378.                 };
379.  
380.                 SettingsStore.modalSettings.message = (
381.                   <FeedbackModalMessage
382.                     header={RestrictedPayeeStore.ackMessage.header}
383.                     refNo={RestrictedPayeeStore.ackMessage.refNo}
384.                   />
385.                 );
386.                 SettingsStore.modalSettings.showModal = true;
387.  
388.                 SettingsStore.isScreenLoading = false;
389.                 RestrictedPayeeStore.isForApproval = true;
390.                 RestrictedPayeeStore.resetSearchFields();
391.                 RestrictedPayeeStore.restrictedPayeeList = null;
392.                 RestrictedPayeeStore.reset();
393.                 RestrictedPayeeStore.dataTableRef.forceUpdate();
394.               } else if (!response.text) {
395.                 let request = data;
396.                 request.localUserCd = auth.sessionUser.user.cd;
397.                 if (request && request.localUserCd) {
398.                   this.onDelete(request);
399.                 }
400.               }
401.             }
402.           );
403.         },
404.         () => {
405.           SettingsStore.isScreenLoading = false;
406.         }
407.       );
408.     } else {
409.       if (data.length > 0) {
410.         let maintenanceList = [];
411.         {
412.           data.map(item => {
413.             maintenanceList.push({
414.               localUserCd: auth.sessionUser.user.cd,
415.               requiresApprovalFuncCd:
416.                 CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL,
417.               editFuncCd: CitrineFunctionCodes.RESTRICTED_PAYEE_NM_EDIT,
418.               deleteFuncCd: CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL,
419.               approveRejectFuncCd:
420.                 CitrineFunctionCodes.RESTRICTED_PAYEE_NM_APPROVE_REJECT,
421.               actnFuncCd: CitrineFunctionCodes.RESTRICTED_PAYEE_NM_DEL,
422.               modelNm: strings.global_payee,
423.               grpId: auth.sessionUser.user.grp.id,
424.               isAdd: false,
425.               dtlString: JSON.stringify({
426.                 id: item.id,
427.                 payeeName: item.payeeName,
428.                 amount: item.amount,
429.                 isAllowed: item.isAllowed,
430.                 charToIgnore: item.charToIgnore
431.               }),
432.               filterValues: [
433.                 item.payeeName,
434.                 item.amount,
435.                 item.isAllowed,
436.                 item.charToIgnore
437.               ],
438.               uniqueCds: [item.payeeName]
439.             });
440.           });
441.         }
442.  
443.         SettingsStore.confirm(
444.           strings.global_confirm_delete_records,
445.           () => {
446.             SettingsStore.isScreenLoading = true;
447.             MaintenanceStore.saveOrUpdateMultiple(
448.               {
449.                 requiresApprovalFuncCd:
450.                   CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL,
451.                 grpId: auth.sessionUser.user.grp.id,
452.                 list: maintenanceList,
453.                 localUserCd: auth.sessionUser.user.cd
454.               },
455.               response => {
456.                 MaintenanceStore.errors = [];
457.                 if (response.body && response.body.error.errors) {
458.                   console.log("Error on Del: ", response);
459.                   MaintenanceStore.errors = [];
460.                   response.body.error.errors.map(error => {
461.                     MaintenanceStore.errors.push(error.message);
462.                   });
463.                   this.setState({
464.                     showErrorModal: true,
465.                     errorModalMsg: MaintenanceStore.errors
466.                   });
467.                   SettingsStore.isScreenLoading = false;
468.                   RestrictedPayeeStore.restrictedPayeeList = null;
469.                   RestrictedPayeeStore.reset();
470.                 } else if (!response.body && response.text) {
471.                   console.log("Res on saveOrUpdate DelMultiple: ", response);
472.  
473.                   SettingsStore.modalSettings.message = (
474.                     <FeedbackModalMessage
475.                       header={strings.formatString(
476.                         strings.feedback_success_forapproval_plural,
477.                         strings.formatString(
478.                           strings.global_deleteobj,
479.                           strings.global_restrictedpayeenms
480.                         )
481.                       )}
482.                       refNo={response.text}
483.                     />
484.                   );
485.                   SettingsStore.modalSettings.showModal = true;
486.  
487.                   RestrictedPayeeStore.isForApproval = true;
488.                   RestrictedPayeeStore.resetSearchFields();
489.                   RestrictedPayeeStore.restrictedPayeeList = null;
490.                   RestrictedPayeeStore.reset();
491.                   SettingsStore.isScreenLoading = false;
492.                 } else if (!response.body && !response.text) {
493.                   this.onDeleteMultiple(data);
494.                 }
495.               }
496.             );
497.           },
498.           () => {
499.             SettingsStore.isScreenLoading = false;
500.           }
501.         );
502.       }
503.     }
504.   };
505.  
506.   setErrors = (resBody, showOnModal) => {
507.     const { RestrictedPayeeStore, SettingsStore } = this.context.store;
508.     if (resBody && resBody.error) {
509.       RestrictedPayeeStore.resetErrorList();
510.       if (resBody.error.errors && resBody.error.errors.length > 0) {
511.         resBody.error.errors.map(err => {
512.           RestrictedPayeeStore.errors.push(err.message);
513.         });
514.       } else {
515.         RestrictedPayeeStore.errors.push(resBody.error.message);
516.       }
517.       if (
518.         showOnModal &&
519.         RestrictedPayeeStore.errors &&
520.         RestrictedPayeeStore.errors.length > 0
521.       ) {
522.         SettingsStore.modalSettings = {
523.           status: "error",
524.           message: RestrictedPayeeStore.errors,
525.           showModal: true
526.         };
527.       }
528.     }
529.   };
530.  
531.   onDelete = payeee => {
532.     const { RestrictedPayeeStore, SettingsStore } = this.context.store;
533.  
534.     console.log("ID TO BE DELETED: ", payeee);
535.     RestrictedPayeeStore.deleteRestrictedPayee(payeee, res => {
536.       console.log("DELETE res:", res);
537.       if (res.body && !res.body.error) {
538.         RestrictedPayeeStore.payeeSaved = res.body;
539.         SettingsStore.isScreenLoading = false;
540.         SettingsStore.modalSettings = {
541.           status: "success",
542.           message: (
543.             <FeedbackModalMessage
544.               header={strings.formatString(
545.                 strings.global_successfullydeletednorefno,
546.                 strings.global_restrictedpayeenm
547.               )}
548.               refNo={
549.                 RestrictedPayeeStore.payeeSaved &&
550.                 RestrictedPayeeStore.payeeSaved.localRefNo
551.               }
552.             />
553.           ),
554.           showModal: true
555.         };
556.  
557.         RestrictedPayeeStore.resetInputs();
558.         RestrictedPayeeStore.resetSearchFields();
559.         RestrictedPayeeStore.restrictedPayeeList = null;
560.         RestrictedPayeeStore.dataTableRef.reset();
561.       } else {
562.         this.setErrors(res.body, true);
563.         console.log("pending for approval");
564.         SettingsStore.modalSettings = {
565.           status: "error",
566.           message: "Selected transaction is still pending for approval",
567.           showModal: true
568.         };
569.         SettingsStore.isScreenLoading = false;
570.       }
571.     });
572.   };
573.  
574.   onDeleteMultiple = data => {
575.     const { RestrictedPayeeStore, SettingsStore, auth } = this.context.store;
576.     let userCd = auth.sessionUser.user.cd;
577.  
578.     if (data.length > 0) {
579.       console.log("asdasdasd", data);
580.       RestrictedPayeeStore.deleteMultiplerestrictedPayee(
581.         userCd,
582.         data,
583.         response => {
584.           console.log("Delete Multiple Res: ", response);
585.           if (!response.body && response.text) {
586.             RestrictedPayeeStore.refNoDeleteMultiple = response.text;
587.             console.log("Response Body on Delete Multiple: ", response.body);
588.  
589.             SettingsStore.isScreenLoading = false;
590.             SettingsStore.modalSettings = {
591.               status: "success",
592.               message: (
593.                 <FeedbackModalMessage
594.                   header={strings.formatString(
595.                     strings.global_successfullydeletedmultinorefno,
596.                     strings.global_restrictedpayeenms
597.                   )}
598.                   refNo={response.text}
599.                 />
600.               ),
601.               showModal: true
602.             };
603.  
604.             RestrictedPayeeStore.resetInputs();
605.             RestrictedPayeeStore.resetSearchFields();
606.             RestrictedPayeeStore.restrictedPayeeList = null;
607.             RestrictedPayeeStore.dataTableRef.reset();
608.           } else {
609.             SettingsStore.isScreenLoading = false;
610.             this.setErrors(res.body, true);
611.             RestrictedPayeeStore.resetInputs();
612.             RestrictedPayeeStore.resetSearchFields();
613.             RestrictedPayeeStore.restrictedPayeeList = null;
614.             RestrictedPayeeStore.dataTableRef.reset();
615.           }
616.         }
617.       );
618.     } else {
619.       this.setState({
620.         errorModalMsg: "Selected transaction is still pending for approval",
621.         showModal: true
622.       });
623.       // SettingsStore.modalSettings = {
624.       //   status: "error",
625.       //   message: "Selected transaction is still pending for approval",
626.       //   showModal: true
627.       // };
628.       SettingsStore.isScreenLoading = false;
629.     }
630.   };
631.  
632.   componentDidMount() {
633.     const { SettingsStore, RestrictedPayeeStore } = this.context.store;
634.     SettingsStore.confirmationRef = this.confirmation;
635.     this.checkAuth();
636.     RestrictedPayeeStore.resetErrorList();
637.   }
638.  
639.   handleCancel = () => {
640.     this.setState({
641.       showErrorModal: false,
642.       errorModalMsg: ""
643.     });
644.   };
645.  
646.   render() {
647.     const { RestrictedPayeeStore, SettingsStore } = this.context.store;
648.     return (
649.       <div>
650.         <div className="forSearch">
651.           <div className="col-sm-9 scPanel">
652.             <div className="enrollmentProcessingPanelHeader">
653.               <span>
654.                 {strings.formatString(
655.                   strings.global_searchobj,
656.                   strings.global_restrictedpayeenm
657.                 )}
658.               </span>
659.             </div>
660.  
661.             <F4Confirmation ref={r => (this.confirmation = r)} isBo isYesNo />
662.             <FeedbackModal1
663.               title="Success"
664.               modalSettings={SettingsStore.modalSettings}
665.             />
666.             {this.showDataTable()}
667.           </div>
668.           <RightPanel
669.             initialFields={RestrictedPayeeStore.searchRestrictedPayeeFields}
670.             onClickSearch={e => {
671.               this.onSearch(null);
672.               RestrictedPayeeStore.dataTableRef &&
673.                 RestrictedPayeeStore.dataTableRef.reset();
674.             }}
675.             funcCd={CitrineFunctionCodes.RESTRICTED_PAYEE_NM_SEARCH}
676.             hasSuggestedLinks
677.             hasSearchFilters
678.             hasAddToBookmarks
679.           />
680.         </div>
681.       </div>
682.     );
683.   }
684. }
685.  
686. SearchPayeePanel.propTypes = {
687.   // props definition
688. };
689.  
690. SearchPayeePanel.defaultProps = {
691.   // default props
692. };
693.  
694. export default SearchPayeePanel;
695.