<commit_before>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators, dispatch } from 'redux';
import ReactDOM from 'react-dom';
import moment from 'moment';
import DataGrid from 'react-datagrid';
import {
  Link,
  hashHistory
} from 'react-router';
import {
  actionFetchBusinessRules,
  actionInsertBusinessRule,
  actionDeleteBusinessRule,
  actionUpdateBusinessRule,
  actionFetchReportLinkage
} from '../../actions/BusinessRulesAction';
import { actionFetchAuditList } from '../../actions/DefChangeAction';
import RightSlidePanel from '../RightSlidePanel/RightSlidePanel';
import ModalAlert from '../ModalAlert/ModalAlert';
import AuditModal from '../AuditModal/AuditModal';
import RegOpzFlatGrid from '../RegOpzFlatGrid/RegOpzFlatGrid';
import { Button, Modal, Media, Label, Badge } from 'react-bootstrap';
import ReactLoading from 'react-loading';
import Breadcrumbs from 'react-breadcrumbs';
import _ from 'lodash';
import { BASE_URL } from '../../Constant/constant';
import axios from 'axios';
import ShowToggleColumns from './ShowToggleColumns';
require('react-datagrid/dist/index.css');
require('./MaintainBusinessRules.css');

class MaintainBusinessRules extends Component {
  constructor(props) {
    super(props);
    this.cols = [];
    this.data = []
    this.newItem = {
      "business_or_validation": "",
      "business_rule": "",
      "data_attributes": "",
      "data_fields_list": "",
      "id": "",
      "logic": "",
      "logical_condition": "",
      "python_implementation": "",
      "rule_description": "",
      "rule_execution_order": 0,
      "rule_type": "",
      "source_id": "",
      "technical_implementation": "",
      "valid_from": "",
      "valid_to": ""
    }
    this.selectedRow = 0;
    this.selectedRowItem = null;
    this.currentPage = 0;
    this.orderBy = null;
    this.customStyles = {
      content: {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)'
      }
    };
    this.state = {
      isModalOpen: false,
      showAuditModal: false,
      showToggleColumns: false
    };

    this.msg = "";
    this.modalInstance = null;
    this.linkageData = null;
    this.flatGrid = null;
    this.filterConditions = {};
    this.selectedRows = [];
    this.selectedRulesAsString = null;
    this.selectedRulesIdAsString = null;
    this.modalType = "";
    this.operationName = "";
    this.auditInfo = {};
    this.updateInfo = null;

    this.handleToggle = this.handleToggle.bind(this);
  }

  componentWillMount() {
    this.props.fetchBusinesRules(this.currentPage);
  }

  handleToggle() {
    let toggleValue = this.state.showToggleColumns;
    this.setState({ showToggleColumns: !toggleValue });
  }

  render() {
    if (this.props.business_rules.length) {
      this.cols = this.props.business_rules[0].cols;
      this.data = this.props.business_rules[0].rows;
      this.count = this.props.business_rules[0].count;
      this.pages = Math.ceil(this.count / 100);
      if (this.modalType == "Report Linkage") {
        this.linkageData = this.props.report_linkage;
      }
      if (this.modalType == "Rule Audit") {
        this.linkageData = this.props.audit_list;
      }
      console.log("Linkage data ", this.linkageData);
      return (
        <div className="maintain_business_rules_container">
          <Breadcrumbs
            routes={this.props.routes}
            params={this.props.params}
            wrapperClass="breadcrumb"
          />
          <h1>Maintain Business Rules</h1>
          <div className="ops_icons">
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Refresh"
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs"
                onClick={
                  (event) => {
                    this.selectedRows = this.flatGrid.deSelectAll();
                    this.selectedRowItem = null;
                    this.selectedRow = null;
                    //this.currentPage = 0;
                    this.props.fetchBusinesRules(this.currentPage);
                    $("button[title='Delete']").prop('disabled', false);
                    $("button[title='Update']").prop('disabled', false);
                    $("button[title='Duplicate']").prop('disabled', false);
                  }
                }
              >
                <i className="fa fa-refresh"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Insert"
                onClick={
                  this.handleInsertClick.bind(this)
                }
                className="btn btn-circle btn-success business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-plus"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Duplicate"
                onClick={
                  this.handleDuplicateClick.bind(this)
                }
                className="btn btn-circle btn-success business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-copy"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Update"
                onClick={
                  this.handleUpdateClick.bind(this)
                }
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-pencil"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Delete"
                onClick={
                  this.handleDeleteClick.bind(this)
                }
                className="btn btn-circle btn-warning business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-remove"></i>
              </button>
            </div>
            <div className="btn-group">
              <button data-toggle="tooltip" data-placement="top" title="First" onClick={(event) => {
                this.currentPage = 0;
                this.props.fetchBusinesRules(this.currentPage, this.orderBy);
                this.forceUpdate();
              }}
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs">
                <i className="fa fa-fast-backward"></i>
              </button>
            </div>
            <div className="btn-group">
              <button data-toggle="tooltip" data-placement="top" title="Prev" onClick={(event) => {
                if (this.currentPage > 0) {
                  this.currentPage--;
                  this.props.fetchBusinesRules(this.currentPage, this.orderBy);
                  this.forceUpdate();
                }

              }}
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs">
                <i className="fa fa-chevron-left"></i>
              </button>
            </div>
            <div className="btn-group reg_flat_grid_page_input">
              <input
                onChange={
                  (event) => {
                    this.currentPage = event.target.value;
                    this.forceUpdate();
                  }
                }
                onKeyPress={
                  (event) => {
                    if (event.key == "Enter") {
                      if (this.isInt(event.target.value)) {
                        if (event.target.value > this.pages) {
                          this.modalInstance.open("Page does not exists");
                        } else {
                          this.props.fetchBusinesRules(this.currentPage);
                        }
                      } else {
                        this.modalInstance.open("Please Enter a valid integer value");
                      }
                    }
                  }
                }
                type="text"
                value={this.currentPage}
                className="form-control" />
            </div>
            <div className="btn-group">
              <button data-toggle="tooltip" data-placement="top" title="Next" onClick={(event) => {
                if (this.currentPage < this.pages - 1) {
                  this.currentPage++;
                  this.props.fetchBusinesRules(this.currentPage, this.orderBy);
                  this.forceUpdate();
                }
              }} className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs">
                <i className="fa fa-chevron-right"></i>
              </button>
            </div>
            <div className="btn-group">
              <button data-toggle="tooltip" data-placement="top" title="End" onClick={(event) => {
                this.currentPage = this.pages - 1;
                this.props.fetchBusinesRules(this.currentPage, this.orderBy);
                this.forceUpdate();
              }} className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs">
                <i className="fa fa-fast-forward"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                onClick={this.showLinkage.bind(this)}
                data-toggle="tooltip"
                data-placement="top"
                title="Report Link"
                className="btn btn-circle btn-info business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-link"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                onClick={this.showHistory.bind(this)}
                data-toggle="tooltip"
                data-placement="top"
                title="History"
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-history"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Export CSV"
                className="btn btn-circle btn-success business_rules_ops_buttons btn-xs"
                onClick={
                  (event) => {
                    axios.get(`${BASE_URL}business-rule/export_to_csv`)
                      .then(function (response) {
                        console.log("export csv", response);
                        window.location.href = BASE_URL + "../../static/" + response.data.file_name;
                      })
                      .catch(function (error) {
                        console.log(error);
                      });
                  }
                }
              >
                <i className="fa fa-table"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Deselect All"
                className="btn btn-circle btn-default business_rules_ops_buttons btn-xs"
                onClick={
                  (event) => {
                    this.selectedRows = this.flatGrid.deSelectAll();
                    this.selectedRowItem = null;
                    this.selectedRow = null;
                    $("button[title='Delete']").prop('disabled', false);
                    $("button[title='Update']").prop('disabled', false);
                    $("button[title='Duplicate']").prop('disabled', false);
                  }
                }
              >
                <i className="fa fa-window-maximize"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                className="btn btn-circle btn-default business_rules_ops_buttons btn-xs"
                onClick={this.handleToggle}
              >
                <i className="fa fa-th-large"></i>
              </button>
            </div>
          </div>
          {
            this.state.showToggleColumns ?
              <ShowToggleColumns
                columns={this.cols}
                saveSelection={(columns) => {
                  console.log(columns);
                  // TODO: Implement this function
                }}
              /> :
              <RegOpzFlatGrid
                columns={this.cols}
                dataSource={this.data}
                onSelectRow={this.handleSelectRow.bind(this)}
                onUpdateRow={this.handleUpdateRow.bind(this)}
                onSort={this.handleSort.bind(this)}
                onFilter={this.handleFilter.bind(this)}
                onFullSelect={this.handleFullSelect.bind(this)}
                ref={(flatGrid) => { this.flatGrid = flatGrid }}
              />
          }
          <ModalAlert
            onClickOkay={
              () => {
                if (this.operationName == "DELETE") {
                  this.setState({ showAuditModal: true });
                }

                if (this.operationName == "INSERT") {
                  console.log("this.operationName........Inside if condition........", this.operationName);
                  this.setState({ showAuditModal: true });
                }
              }
            }
            onClickDiscard={
              () => {
                //  TODO:<commit_msg>Silight Update<commit_after>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators, dispatch } from 'redux';
import ReactDOM from 'react-dom';
import moment from 'moment';
import DataGrid from 'react-datagrid';
import {
  Link,
  hashHistory
} from 'react-router';
import {
  actionFetchBusinessRules,
  actionInsertBusinessRule,
  actionDeleteBusinessRule,
  actionUpdateBusinessRule,
  actionFetchReportLinkage
} from '../../actions/BusinessRulesAction';
import { actionFetchAuditList } from '../../actions/DefChangeAction';
import RightSlidePanel from '../RightSlidePanel/RightSlidePanel';
import ModalAlert from '../ModalAlert/ModalAlert';
import AuditModal from '../AuditModal/AuditModal';
import RegOpzFlatGrid from '../RegOpzFlatGrid/RegOpzFlatGrid';
import { Button, Modal, Media, Label, Badge } from 'react-bootstrap';
import ReactLoading from 'react-loading';
import Breadcrumbs from 'react-breadcrumbs';
import _ from 'lodash';
import { BASE_URL } from '../../Constant/constant';
import axios from 'axios';
import ShowToggleColumns from './ShowToggleColumns';
require('react-datagrid/dist/index.css');
require('./MaintainBusinessRules.css');

class MaintainBusinessRules extends Component {
  constructor(props) {
    super(props);
    this.cols = [];
    this.data = []
    this.newItem = {
      "business_or_validation": "",
      "business_rule": "",
      "data_attributes": "",
      "data_fields_list": "",
      "id": "",
      "logic": "",
      "logical_condition": "",
      "python_implementation": "",
      "rule_description": "",
      "rule_execution_order": 0,
      "rule_type": "",
      "source_id": "",
      "technical_implementation": "",
      "valid_from": "",
      "valid_to": ""
    }
    this.selectedRow = 0;
    this.selectedRowItem = null;
    this.currentPage = 0;
    this.orderBy = null;
    this.customStyles = {
      content: {
        top: '50%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)'
      }
    };
    this.state = {
      isModalOpen: false,
      showAuditModal: false,
      showToggleColumns: false
    };

    this.msg = "";
    this.modalInstance = null;
    this.linkageData = null;
    this.flatGrid = null;
    this.filterConditions = {};
    this.selectedRows = [];
    this.selectedRulesAsString = null;
    this.selectedRulesIdAsString = null;
    this.modalType = "";
    this.operationName = "";
    this.auditInfo = {};
    this.updateInfo = null;

    this.handleToggle = this.handleToggle.bind(this);
    this.displaySelectedColumns = this.displaySelectedColumns.bind(this);
  }

  componentWillMount() {
    this.props.fetchBusinesRules(this.currentPage);
  }

  handleToggle() {
    let toggleValue = this.state.showToggleColumns;
    this.setState({ showToggleColumns: !toggleValue });
  }

  displaySelectedColumns(columns) {
    var selectedColumns = [];
    for (let i = 0; i < columns.length; i++)
      if (columns[i].checked)
        selectedColumns.push(columns[i].name);

    // this.cols = selectedColumns;
    // console.log(selectedColumns);
    // console.log(this.cols);
    // this.setState({ showToggleColumns: false });

    // The commented part is apparently not working need to look into it 
  }

  render() {
    if (this.props.business_rules.length) {
      this.cols = this.props.business_rules[0].cols;
      this.data = this.props.business_rules[0].rows;
      this.count = this.props.business_rules[0].count;
      this.pages = Math.ceil(this.count / 100);
      if (this.modalType == "Report Linkage") {
        this.linkageData = this.props.report_linkage;
      }
      if (this.modalType == "Rule Audit") {
        this.linkageData = this.props.audit_list;
      }
      console.log("Linkage data ", this.linkageData);
      return (
        <div className="maintain_business_rules_container">
          <Breadcrumbs
            routes={this.props.routes}
            params={this.props.params}
            wrapperClass="breadcrumb"
          />
          <h1>Maintain Business Rules</h1>
          <div className="ops_icons">
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Refresh"
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs"
                onClick={
                  (event) => {
                    this.selectedRows = this.flatGrid.deSelectAll();
                    this.selectedRowItem = null;
                    this.selectedRow = null;
                    //this.currentPage = 0;
                    this.props.fetchBusinesRules(this.currentPage);
                    $("button[title='Delete']").prop('disabled', false);
                    $("button[title='Update']").prop('disabled', false);
                    $("button[title='Duplicate']").prop('disabled', false);
                  }
                }
              >
                <i className="fa fa-refresh"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Insert"
                onClick={
                  this.handleInsertClick.bind(this)
                }
                className="btn btn-circle btn-success business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-plus"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Duplicate"
                onClick={
                  this.handleDuplicateClick.bind(this)
                }
                className="btn btn-circle btn-success business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-copy"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Update"
                onClick={
                  this.handleUpdateClick.bind(this)
                }
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-pencil"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Delete"
                onClick={
                  this.handleDeleteClick.bind(this)
                }
                className="btn btn-circle btn-warning business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-remove"></i>
              </button>
            </div>
            <div className="btn-group">
              <button data-toggle="tooltip" data-placement="top" title="First" onClick={(event) => {
                this.currentPage = 0;
                this.props.fetchBusinesRules(this.currentPage, this.orderBy);
                this.forceUpdate();
              }}
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs">
                <i className="fa fa-fast-backward"></i>
              </button>
            </div>
            <div className="btn-group">
              <button data-toggle="tooltip" data-placement="top" title="Prev" onClick={(event) => {
                if (this.currentPage > 0) {
                  this.currentPage--;
                  this.props.fetchBusinesRules(this.currentPage, this.orderBy);
                  this.forceUpdate();
                }

              }}
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs">
                <i className="fa fa-chevron-left"></i>
              </button>
            </div>
            <div className="btn-group reg_flat_grid_page_input">
              <input
                onChange={
                  (event) => {
                    this.currentPage = event.target.value;
                    this.forceUpdate();
                  }
                }
                onKeyPress={
                  (event) => {
                    if (event.key == "Enter") {
                      if (this.isInt(event.target.value)) {
                        if (event.target.value > this.pages) {
                          this.modalInstance.open("Page does not exists");
                        } else {
                          this.props.fetchBusinesRules(this.currentPage);
                        }
                      } else {
                        this.modalInstance.open("Please Enter a valid integer value");
                      }
                    }
                  }
                }
                type="text"
                value={this.currentPage}
                className="form-control" />
            </div>
            <div className="btn-group">
              <button data-toggle="tooltip" data-placement="top" title="Next" onClick={(event) => {
                if (this.currentPage < this.pages - 1) {
                  this.currentPage++;
                  this.props.fetchBusinesRules(this.currentPage, this.orderBy);
                  this.forceUpdate();
                }
              }} className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs">
                <i className="fa fa-chevron-right"></i>
              </button>
            </div>
            <div className="btn-group">
              <button data-toggle="tooltip" data-placement="top" title="End" onClick={(event) => {
                this.currentPage = this.pages - 1;
                this.props.fetchBusinesRules(this.currentPage, this.orderBy);
                this.forceUpdate();
              }} className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs">
                <i className="fa fa-fast-forward"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                onClick={this.showLinkage.bind(this)}
                data-toggle="tooltip"
                data-placement="top"
                title="Report Link"
                className="btn btn-circle btn-info business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-link"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                onClick={this.showHistory.bind(this)}
                data-toggle="tooltip"
                data-placement="top"
                title="History"
                className="btn btn-circle btn-primary business_rules_ops_buttons btn-xs"
              >
                <i className="fa fa-history"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Export CSV"
                className="btn btn-circle btn-success business_rules_ops_buttons btn-xs"
                onClick={
                  (event) => {
                    axios.get(`${BASE_URL}business-rule/export_to_csv`)
                      .then(function (response) {
                        console.log("export csv", response);
                        window.location.href = BASE_URL + "../../static/" + response.data.file_name;
                      })
                      .catch(function (error) {
                        console.log(error);
                      });
                  }
                }
              >
                <i className="fa fa-table"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                data-toggle="tooltip"
                data-placement="top"
                title="Deselect All"
                className="btn btn-circle btn-default business_rules_ops_buttons btn-xs"
                onClick={
                  (event) => {
                    this.selectedRows = this.flatGrid.deSelectAll();
                    this.selectedRowItem = null;
                    this.selectedRow = null;
                    $("button[title='Delete']").prop('disabled', false);
                    $("button[title='Update']").prop('disabled', false);
                    $("button[title='Duplicate']").prop('disabled', false);
                  }
                }
              >
                <i className="fa fa-window-maximize"></i>
              </button>
            </div>
            <div className="btn-group">
              <button
                className="btn btn-circle btn-default business_rules_ops_buttons btn-xs"
                onClick={this.handleToggle}
              >
                <i className="fa fa-th-large"></i>
              </button>
            </div>
          </div>
          {
            this.state.showToggleColumns ?
              <ShowToggleColumns
                columns={this.cols}
                saveSelection={this.displaySelectedColumns}
              /> :
              <RegOpzFlatGrid
                columns={this.cols}
                dataSource={this.data}
                onSelectRow={this.handleSelectRow.bind(this)}
                onUpdateRow={this.handleUpdateRow.bind(this)}
                onSort={this.handleSort.bind(this)}
                onFilter={this.handleFilter.bind(this)}
                onFullSelect={this.handleFullSelect.bind(this)}
                ref={(flatGrid) => { this.flatGrid = flatGrid }}
              />
          }
          <ModalAlert
            onClickOkay={
              () => {
                if (this.operationName == "DELETE") {
                  this.setState({ showAuditModal: true });
                }

                if (this.operationName == "INSERT") {
                  console.log("this.operationName........Inside if condition........", this.operationName);
                  this.setState({ showAuditModal: true });
                }
              }
            }
            onClickDiscard={
              () => {
                //  TODO:
{'fraction_non_alphanumeric': 0.12337938363443146, 'fraction_numerical': 0.0018774353524619199, 'mean_word_length': 1.455083050700061, 'pattern_counts': {'":': 30, '<': 198, '<?xml version=': 0, '>': 222, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2368296', 'n_tokens_mistral': 7423, 'n_tokens_neox': 7072, 'n_words': 1235}