Attached below is the code
//code starts here
import React, { Component ,useState } from "react";
import logo from "./logo.svg";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withRouter } from 'react-router-dom';
import "./App.css";
import axios from 'axios';
import "bootstrap/dist/css/bootstrap.css";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from 'react-bootstrap-table2-paginator';
import Select from 'react-select';
import cellEditFactory from 'react-bootstrap-table2-editor';
`
import "react-datepicker/dist/react-datepicker.css";
import DatePicker from "react-datepicker";
import moment from 'moment';
class App extends React.Component {
constructor(props, context){
super(props);
this.state={columns : [],schemaData: [] ,fromDate:null,endDate: null,
submittedValue:[],columnsList: [],schemaDataOriginal: [] ,selectedOption: null,selectedOptionNext: null, options: [{ value: null, label: 'Select...' }] , optionsNext: [{ value: null, label: 'Select...' }] ,
colStyle : {
backgroundColor: '#5F9EA0',
width: '200px',
fontSize: '13px'
},
paginationOption :{
custom: true,
marginLeft: '35px'
}
};
this.state.selectStyles = {
menuList: styles => ({
...styles,
background: 'white',
}),
option: (styles, { isFocused, isSelected }) => ({
...styles,
background: isFocused
? '#5F9EA0'
: isSelected
? '#5F9EA0'
: undefined,
zIndex: 1,
}),
menu: base => ({
...base,
zIndex: 100,
}),
}
}
// first function starts here
fetchEdSource(tableNameFirst){
var paramKey = {};
paramKey['tableNameFirst']= tableNameFirst;
axios.get("/apiEdSource",{responseType: 'json',params: paramKey}).then((res)=>{
this.setState({schemaDataOriginal: res.data});
this.state.schemaData= this.state.schemaDataOriginal;
var sb = [];
var ot = [];
var otn = [];
this.state.columnsList = Object.keys(this.state.schemaDataOriginal[0]);
Object.keys(this.state.schemaDataOriginal[0]).map((key) =>{
sb.push({dataField: key,text: key, sort : true, headerStyle: this.state.colStyle});
})
this.state.columns = sb;
this.state.schemaDataOriginal.map((arrayData) =>{
ot.push({value: arrayData["SOURCE_SYSTEM"]
, label: arrayData["SOURCE_SYSTEM"]
})
})
this.state.schemaDataOriginal.map((arrayData) =>{
otn.push({value: arrayData["TABLE_NAME"]
, label: arrayData["TABLE_NAME"]
});
})
const filtered = ot.filter(function({value, label}) {
const key =`${value}${label}`;
return !this.has(key) && this.add(key);
}, new Set);
console.log(this.state.options);
for(var i=0;i<filtered.length;i++){
this.state.options.push(filtered[i]);
}
const filteredotn = otn.filter(function({value, label}) {
const key =`${value}${label}`;
return !this.has(key) && this.add(key);
}, new Set);
console.log(this.state.optionsNext);
for(var i=0;i<filteredotn.length;i++){
this.state.optionsNext.push(filteredotn[i]);
}
// // this.state.schemaData.map((arrayData)
}).catch(e=>{
console.log(e)
});
}
updateSelectList(selectedOption){
var otn = [];
this.state.optionsNext = [];
this.state.schemaDataOriginal.map((arrayData) =>{
if(selectedOption!==null && selectedOption["label"]==arrayData["SOURCE_SYSTEM"]) {
otn.push({value: arrayData["TABLE_NAME"]
, label: arrayData["TABLE_NAME"]
});
}
else if(selectedOption["label"] == "Select..."){
otn.push({value: arrayData["TABLE_NAME"]
, label: arrayData["TABLE_NAME"]
} )
}
})
for(var i=0;i<otn.length;i++){
this.state.optionsNext.push(otn[i]);
}
this.state.optionsNext.push({ value: null, label: 'Select...' });
const filteredotn = this.state.optionsNext.filter(function({value, label}) {
const key =`${value}${label}`;
return !this.has(key) && this.add(key);
}, new Set);
this.state.optionsNext = filteredotn;
}
updateTableList(selectedOption, selectedOptionNext){
var tempSchemaData = [];
this.state.schemaDataOriginal.map((arrayData) =>{
if(selectedOption!==null || this.state.selectedOptionNext!== null){
if(this.state.selectedOptionNext==null){
if(selectedOption["label"]==arrayData["SOURCE_SYSTEM"]){
tempSchemaData.push(arrayData);
}
else if (selectedOption["label"]=="Select..."){
this.state.schemaData=this.state.schemaDataOriginal;
}
}
else if(this.state.selectedOptionNext!==null && (selectedOption["label"]==arrayData["SOURCE_SYSTEM"]&&this.state.selectedOptionNext["label"]==arrayData["TABLE_NAME"])){
tempSchemaData.push(arrayData);
}
else if(selectedOption["label"]=="Select..."){
this.state.schemaData=this.state.schemaDataOriginal;
}
}
if(selectedOption["label"]!=="Select..."){
this.state.schemaData=tempSchemaData ;
}
})
}
handleChange = (selectedOption) => {
this.setState({ selectedOption }, () =>
console.log(`Option selected:`, this.state.selectedOption)
)
this.state.selectedOption=selectedOption;
this.updateSelectList(selectedOption);
this.updateTableList(this.state.selectedOption,this.state.selectedOptionNext);
};
handleChangeNext = (selectedOptionNext) => {
this.setState({ selectedOptionNext }, () =>
console.log(`Option selected:`, this.state.selectedOptionNext)
);
this.state.selectedOptionNext=selectedOptionNext;
this.updateTableList(this.state.selectedOption,this.state.selectedOptionNext);
};
submitCell=()=>{
var paramKey = {};
if(this.state.submittedValue.length!==0){
var params = new URLSearchParams();
const encodedFilters = encodeURIComponent(JSON.stringify(this.state.submittedValue));
console.log(encodedFilters.toString);
let config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
} ;
var url =`/apiEdSourceUpdate?filters=${encodedFilters}`;
axios.post(url,params, config).then((res)=>{
}).catch(e=>{
console.log(e)
});
}
this.state.submittedValue=[];
}
saveCell=(oldValue, newValue, fieldUpdated,TABLE_ID)=>{
this.state.submittedValue.push({"oldValue": oldValue,"newValue":newValue,"fieldUpdated":fieldUpdated,"TABLE_ID":TABLE_ID});
}
handleFromDateChange(date) {
this.setState({
fromDate: date
});
}
handleEndDateChange(date){
this.setState({
endDate: date
});
}
//here is the render function
render()
{
const { selectedOption } = this.state;
const {selectedOptionNext} = this.state;
const {selectedDate} = this.state;
return (
<div className="App">
{this.state.columns.length !==0 ? <div>
<Select
className="react-select"
value={selectedOption}
onChange={this.handleChange}
options={this.state.options}
styles={this.state.selectStyles}
/>
<Select
className="react-selectNext"
value={selectedOptionNext}
onChange={this.handleChangeNext}
options={this.state.optionsNext}
styles={this.state.selectStyles}
/>
<DatePicker className="date-picker-from" selected={this.state.fromDate} onChange={(date) => this.handleFromDateChange(date)} placeholderText="From Load Date"/>
<DatePicker className="date-picker-end" selected={this.state.endDate} onChange={(date) => this.handleEndDateChange(date)} placeholderText="End Load Date"/>
<button className="label" onClick={()=>{this.submitCell(this.state)}}>SUBMIT</button>
<BootstrapTable className="react-bootstrap" boostrap4 keyField='TABLE_ID' data={ this.state.schemaData } columns={ this.state.columns } pagination={paginationFactory()}
cellEdit={cellEditFactory({ mode: 'click', blurToSave: false ,autoSelectText: false,
afterSaveCell: (oldValue, newValue,row, column) =>{
this.saveCell(oldValue, newValue,row, column)
}
})}/></div>:<div> <ul class="notes">
<li onClick={() => {this.fetchEdSource('[ODIN_WORK.[dbo].[ed_source_table]')}}><a href="#1a" id="notes-list" data-toggle="tab">ED Source Table</a></li>
</ul>
</div>}
</div>
);
}
}
export default App;
how to disable specific columns from editing cellEditFactory from ‘react-bootstrap-table2-editor. Is there a pre-built method to do it.
Above is the code that uses react-bootstrap, react-search, react-date-picker.
Along with that there are couple of user-defined functions.
Please let me know if anything more is needed here to understand the code.
