Good day. The idea of this is that the user can add parameters to the SQL editor from two inputs, one the parameter and the other the value:
and if you type in the SQL editor you automatically add inputs which are the parameters and the value.
From the SQL editor to the inputs it works fine because I pass a regular expression to it. The problem is from the inputs to the editor, I think it's more of a logic problem, but I haven't found a solution yet. The case is that when adding a parameter from the input, it adds more, although always before adding the clean but it seems that it does not affect.
This is the code:
import React, { useEffect, useState} from 'react';
import SQLContainerInput from '../Components/SQLContainerInput';
........
function arrayParamsExec(stringSql) {
const paramsQueryText = [...stringSql.matchAll(/{{(\w+)}}/ig)];
const newArray = paramsQueryText.map(item => item[1]);
return newArray;
}
const initalStateCurrentChartInfo = {
SQLQuery: '',
dataType: 'TABLE',
columns: [],
};
const CustomSQLEditor = ({
fromQuery, // del Redux
}) = {
const [currentChartInfo, setCurrentChartInfo] = useState(
initalStateCurrentChartInfo,
);
const [params, setParams] = useState([]);
const [textSql, setTextSql] = useState('');
useEffect(() => {
....
let sqlDefaultString = '';
sqlDefaultString = fromQuery.internal_name
? `SELECT * FROM \`${fromQuery.internal_name}__${fromQuery.items[0]}\` LIMIT 20`
: '';
setCurrentChartInfo({
...currentChartInfo,
SQLQuery: `${sqlQuery}`,
});
},[fromQuery]);
// ------------------params---------------------
const addProperty = () => {
setParams([
...params,
{ name: '', value: '' },
]);
};
const updateProperty = (event, index, key) => {
const newProperties = [...params];
newProperties[index][key] = event?.target?.value;
// agregar parámetros al editor SQL
let sqlParams = textSql;
if (key === 'name') {
params.forEach(p => {
if (p.name && /^\w+$/i.test(p.name)) {
sqlParams += `{{${p.name}}}`;
}
});
setTextSql('');
setTextSql(`${sqlParams}`);
}
setParams(newProperties);
};
const deleteProperty = index => {
const newProperties = [...params];
newProperties.splice(index, 1);
const newTextSQL = replaceAll(textSql, `{{${params[index]?.name}}}`, '');
setTextSql(newTextSQL);
setParams(newProperties);
};
// ------------------end params---------------------
const changeTextEditor = (valueEditor) => {
const namesParams = arrayParamsExec(valueEditor);
const newProperties = namesParams.map((pName) => {
const valueNew = params.find(p => p.name === pName);
return {name: pName, value: valueNew?.value || ''};
});
setParams(newProperties);
setTextSql(valueEditor);
}
return (
<>
<SQLContainerInput
button={{
onClick: handleSubmit,
}}
input={{
value: `${textSql}\n`,
onChange: changeTextEditor,
}}
/>
<DymanicKeyValueInputInput
properties={params}
updateProperty={updateProperty}
deleteProperty={deleteProperty}
addProperty={addProperty}
/>
</>
);
}
So a solution I put another value that is textSql
in charge of placing the already concatenated string, and the string that comes from the redux that is this value fromQuery
. The redux string is put in a variable sqlParams
, when adding it concatenates with the parameters and from there if I clean the textSql
.
......
const updateProperty = (event, index, key) => {
const newProperties = [...params];
newProperties[index][key] = event?.target?.value;
// agregar parámetros al editor SQL
let sqlParams = currentChartInfo.SQLQuery;
if (key === 'name') {
params.forEach(p => {
if (p.name && /^\w+$/i.test(p.name)) {
sqlParams += `{{${p.name}}}`;
}
});
setTextSql('');
setTextSql(`${sqlParams}`);
}
setParams(newProperties);
};
......
The problem there is that if I write directly from the SQL editor, the entire string is reset, that is,
everything that has been written and of course there, if it works, placing the parameters is not repeated. But I can't find a way to do that there. Forgive my ignorance if I'm doing something wrong.
This is an example when one writes a long sql:
Adding a parameter from input resets:
A video showing the error: https://www.youtube.com/watch?v=rQBPOPyeXlI
repository link: https://gitlab.com/albert925/parametrosui-a-editor-sql
Potential Solution Update
thank you very much @g.4, yes that part works but when I add a parameter from the SQL editor and modify the inputs or add, it breaks what I had before. https://youtu.be/-fqRiAwa1Hs . I already updated the changes in the repository