Commit d5998dfd authored by Edu Trevisan's avatar Edu Trevisan

Implement Eixo1 autocomplete

parent 3a044fb0
......@@ -16,6 +16,7 @@ package-lock.json
.env.development.local
.env.test.local
.env.production.local
.vscode
npm-debug.log*
yarn-debug.log*
......
......@@ -54,7 +54,6 @@ class AutocompleteApp extends Component {
ibge:[],
content:[]
};
// this.getDataFromServer(this.props.whichAutocomplete)
this.getDataFromServer = this.getDataFromServer.bind(this);
this.organizeData = this.organizeData.bind(this);
this.queryDb = this.queryDb.bind(this);
......@@ -76,7 +75,6 @@ class AutocompleteApp extends Component {
}
render() {
console.log(this.state.data);
return (
<div className={'AutocompleteApp'}>
<Row >
......@@ -215,13 +213,11 @@ class AutocompleteApp extends Component {
for (var i in this.props.data) {
for (var j in this.props.data[i]) {
newData.push({ name: this.props.data[i][j]['COMUNIDADE']});
// console.log(this.props.data[i][j]);
newData.push({ id: this.props.data[i][j]['ID'], name: this.props.data[i][j]['COMUNIDADE']});
}
}
console.log(newData);
this.setState({ data: newData });
if (this._mounted) this.setState({ data: newData });
} else {
// Execute query and store it
......@@ -231,7 +227,7 @@ class AutocompleteApp extends Component {
// If it is a cad_unico page
if (cad_unico_pages.indexOf(this.props.mainPage) > -1){
newData = res.data.result
this.setState({ data : newData });
if (this._mounted) this.setState({ data : newData });
// getting the cities names
axios.get(`${serverURL}ibge_code?dims=city_name,state,city_code`)
......@@ -264,7 +260,7 @@ class AutocompleteApp extends Component {
if(aux.length > 0)
final_data.push({id: i,data:aux});
}
this.setState({data:autocomplete,content:final_data})
if (this._mounted) this.setState({data:autocomplete,content:final_data})
}
downloadDataFromServer(route) {
......@@ -332,7 +328,7 @@ class AutocompleteApp extends Component {
}else if(this.props.mainPage === 'vacancy' && this.props.whichAutocomplete === 'institution'){
finalArray = this.sumData(finalArray, keyVac).concat(finalArray);
}
this.setState({ chartData : finalArray });
if (this._mounted) this.setState({ chartData : finalArray });
document.getElementById(this.props.whichAutocomplete + 'Preloader').style.display = 'none'
if (document.getElementById(this.props.dropdown)) {
document.getElementById(this.props.dropdown).style.display = 'block';
......@@ -341,7 +337,7 @@ class AutocompleteApp extends Component {
if (chart !== null ) {
chart.style.display = 'block'
}
this.props.saveData({option:this.props.whichAutocomplete, data: finalArray})
if (this._mounted) this.props.saveData({option:this.props.whichAutocomplete, data: finalArray})
if(data.length <= 0){
document.getElementById(this.props.whichAutocomplete + 'Preloader').style.display = 'none'
document.getElementById(this.props.whichAutocomplete + 'Message').style.display = 'block'
......@@ -441,32 +437,45 @@ class AutocompleteApp extends Component {
}
queryDb() {
if (this.state.tagName.length > 0) {
var chart = document.getElementById(this.props.chartDiv);
var message = document.getElementById(this.props.whichAutocomplete + 'Text');
if( this.props.useMap ){
var state = document.getElementById("estado"+this.props.mainPage).value
var region = document.getElementById("regiao"+this.props.mainPage).value
}
if (this.props.mainPage !== 'cad_unico' && this.props.mainPage !== 'african_culture' && this.props.mainPage !== 'ciganos_culture'){
var campiFilter = this.createMessage(chart, message, state, region)
var queryInfo = this.getQueryInfo()
var loadRoute = this.props.mainPage + `?dims=${queryInfo["name"]}${queryInfo["extraname"]}${campiFilter}&filter=${queryInfo["name"]}:"${queryInfo["value"]}"`
var parameters;
if ((( state === 'TD' ) && ( region === 'Todas as regiões' )) || ( !this.props.useMap )) {
parameters = ''
}
else {
parameters = state !== 'TD' ? `,uf:${state}` : `,region:${region}`
if (this.props.mainPage === "quilombolas") {
// TODO: procurar elemento correto pelo índice
var elem = document.getElementById('table').getElementsByTagName('tr')[this.state.tagId];
if (elem) {
elem.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
elem.style.backgroundColor = '#ca3829';
}
this.downloadDataFromServer(loadRoute + parameters);
}
else{
let finalArray = searchHash(this.state.tagId-1, this.state.content,'id')
if(finalArray.length > 0){
this.props.saveData({data: finalArray[0].data})
} else {
var chart = document.getElementById(this.props.chartDiv);
var message = document.getElementById(this.props.whichAutocomplete + 'Text');
if( this.props.useMap ){
var state = document.getElementById("estado"+this.props.mainPage).value
var region = document.getElementById("regiao"+this.props.mainPage).value
}
if (this.props.mainPage !== 'cad_unico' && this.props.mainPage !== 'african_culture' && this.props.mainPage !== 'ciganos_culture'){
var campiFilter = this.createMessage(chart, message, state, region)
var queryInfo = this.getQueryInfo()
var loadRoute = this.props.mainPage + `?dims=${queryInfo["name"]}${queryInfo["extraname"]}${campiFilter}&filter=${queryInfo["name"]}:"${queryInfo["value"]}"`
var parameters;
if ((( state === 'TD' ) && ( region === 'Todas as regiões' )) || ( !this.props.useMap )) {
parameters = ''
}
else {
parameters = state !== 'TD' ? `,uf:${state}` : `,region:${region}`
}
this.downloadDataFromServer(loadRoute + parameters);
}
else{
this.props.saveData({data: finalArray, tagName:this.state.tagName})
let finalArray = searchHash(this.state.tagId-1, this.state.content,'id')
if(finalArray.length > 0){
this.props.saveData({data: finalArray[0].data})
}
else{
this.props.saveData({data: finalArray, tagName:this.state.tagName})
}
}
}
}
......
......@@ -37,15 +37,15 @@ input[type=text]:focus:not([readonly]){
.outerSearchNotice{
width:100%;
/* Firefox */
/* Firefox
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari and Chrome */
Safari and Chrome
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-align:center; */
/* W3C */
display:flex;
......
......@@ -26,12 +26,12 @@ along with Portal-SMPPIR-React. If not, see <https://www.gnu.org/licenses/>.
overflow-x: scroll;
height: 450px;
}
.smallCells td, th{
padding: 0px 0px;
}
@media only screen and (max-width: 900px ) {
.scrolltable{
width: 85vw;
}
}
.smallCells td, th{
padding: 0px 0px;
}
@media only screen and (max-width: 900px ) {
.scrolltable{
width: 85vw;
}
}
\ No newline at end of file
......@@ -135,9 +135,9 @@ class Eixo1 extends Component {
<Card id="e1pannel-4" title="Lista de Comunidades Reconhecidas Oficialmente pelo estado">
<p>Clique na comunidade para ter acesso ao mapa com informações detalhadas sobre ela</p>
<AutocompleteApp data={data.gete1p4()} mainPage='quilombolas' placeholder="Insert here" />
<AutocompleteApp data={data.gete1p4()} mainPage='quilombolas' useMap={true} placeholder="Insert here" />
<Table header={["ID","Comunidade","Território","Certificação","Titulação"]} body={this.jsonToArray(data.gete1p4()[getStateExtendedName(this.state.clickedInMap).currentState])} classes="striped smallCells" divClasses="scrolltable"/>
<Table id="table" header={["ID","Comunidade","Território","Certificação","Titulação"]} body={this.jsonToArray(data.gete1p4()[getStateExtendedName(this.state.clickedInMap).currentState])} classes="striped smallCells" divClasses="scrolltable"/>
<CardFooter source="Comitê Gestor do Programa Brasil Quilombola, Fundação Cultural Palmares / MinC e INCRA (Jan, 2016)"/>
</Card>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment