joomla/Component-Builder
39
25
Fork 11
Code Issues 78 Pull Requests Projects 4 Wiki Activity

Adds beta search engine to JCB.

Browse Source
This commit is contained in:
Llewellyn van der Merwe
2022-11-02 21:48:20 +02:00
parent f2ea22d0ad
commit f1cb398f7a
19 changed files with 1121 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

598
admin/assets/js/search.js
View File

@ -20,19 +20,236 @@ const doSearch = async (signal, tables) => {
// load the result table
const resultsTable = new DataTable('#search_results_table');
// get the search mode
let typeSearch = modeObject.querySelector('input[type=\'radio\']:checked').value;
// set some search values
let searchValue = searchObject.value;
let replaceValue = replaceObject.value;
// add the form data
formData.append('table_name', '');
formData.append('type_search', typeSearch);
formData.append('search_value', searchValue);
formData.append('replace_value', replaceValue);
formData.append('match_case', matchObject.checked ? 1 : 0);
formData.append('whole_word', wholeObject.checked ? 1 : 0);
formData.append('regex_search', regexObject.checked ? 1 : 0);
let abort_this_search_value = false;
let abort_this_search_values = false;
// reset the progress bar
searchProgressBarObject.style.width = '0%';
searchProgressBarObject.innerHTML = '0%';
// show the progress bar
searchProgressObject.style.display = '';
// start search timer
startSearchTimer();
let total = 0;
let progress = tables.length;
let index;
for (index = 0; index < progress; index++) {
let tableName = tables[index];
// add the table name
formData.set('table_name', tableName);
let options = {
signal: signal,
method: 'POST', // *GET, POST, PUT, DELETE, etc.
body: formData
}
if (abort_this_search_values) {
break;
}
const response = await fetch(Url + 'doSearch', options).then(response => {
total++;
// calculate the percent
let percent = 100.0 * (total / progress);
// update the progress bar
searchProgressBarObject.style.width = percent.toFixed(2) + '%';
searchProgressBarObject.innerHTML = percent.toFixed(2) + '%';
// when complete hide the progress bar
if (progress == total) {
searchProgressBarObject.innerHTML = Joomla.JText._('COM_COMPONENTBUILDER_SEARCH_FINISHED_IN') + ' ' + getSearchLenght() + ' ' + Joomla.JText._('COM_COMPONENTBUILDER_SECONDS');
setTimeout(function () {
searchProgressObject.style.display = 'none';
}, 3000);
}
// return the json response
if (response.ok) {
return response.json();
}
}).then((data) => {
if (typeof data.success !== 'undefined') {
UIkit.notify(data.success, {pos:'top-right', timeout : 200, status:'success'});
//} else if (typeof data.not_found !== 'undefined') {
// UIkit.notify(data.not_found, {pos:'bottom-right', timeout : 200});
}
if (typeof data.items !== 'undefined') {
addTableItems(resultsTable, data.items, typeSearch);
}
}).catch(error => {
console.log(error);
});
}
} catch (error) {
console.log(error);
} finally {
// Executed regardless if we caught the error
}
};
/**
* JS Function to start search timer
*/
const startSearchTimer = () => {
startSearchTime = new Date();
};
/**
* JS Function to get search lenght
*/
const getSearchLenght = () => {
// set ending time
endSearchTime = new Date();
// get diff in ms
var timeDiff = endSearchTime - startSearchTime;
// strip the ms
timeDiff /= 1000;
// get seconds
return Math.round(timeDiff);
}
/**
* JS Function to fetch selected item
*/
const getSelectedItem = async (table, row, field, line) => {
try {
// get the search mode
let mode = modeObject.querySelector('input[type=\'radio\']:checked').value;
// build form
const formData = new FormData();
formData.append('field_name', field);
formData.append('row_id', row);
formData.append('table_name', table);
formData.append('search_value', searchObject.value);
formData.append('replace_value', replaceObject.value);
formData.append('match_case', matchObject.checked ? 1 : 0);
formData.append('whole_word', wholeObject.checked ? 1 : 0);
formData.append('regex_search', regexObject.checked ? 1 : 0);
// get search value
if (mode == 1) {
// calling URL
postURL = Url + 'getSearchValue';
} else {
// add the line value
formData.append('line_nr', line);
// calling URL
postURL = Url + 'getReplaceValue';
}
let options = {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
body: formData
}
const response = await fetch(postURL, options).then(response => {
if (response.ok) {
return response.json();
}
}).then((data) => {
if (typeof data.success !== 'undefined') {
UIkit.notify(data.success, {pos:'top-right', status:'success'});
}
if (typeof data.value !== 'undefined') {
addSelectedItem(data.value, table, row, field, line);
}
}).catch(error => {
console.log(error);
});
} catch (error) {
console.log(error);
} finally {
// Executed regardless if we caught the error
}
};
/**
* JS Function to check if we should save/update the all current found items
*/
const replaceAllCheck = () => {
// load question
let question = Joomla.JText._('COM_COMPONENTBUILDER_YOUR_ARE_ABOUT_TO_REPLACE_BALLB_SEARCH_RESULTS') + '<br />' +
Joomla.JText._('COM_COMPONENTBUILDER_THIS_CAN_NOT_BE_UNDONE_BYOU_HAVE_BEEN_WARNEDB') + '<br /><br />' +
Joomla.JText._('COM_COMPONENTBUILDER_ARE_YOU_THEREFORE_ABSOLUTELY_SURE_YOU_WANT_TO_CONTINUE');
// do check
UIkit.modal.confirm(question, function () {
// we clear the table again
clearAll();
// show the search settings again
showSearch();
// clear search values
clearSearch();
// Create new controller and issue new request
controller = new AbortController();
// check if any specific table was set
let tables = [];
let table = tableObject.value;
if (table != -1) {
tables.push(table);
replaceAll(controller.signal, tables);
} else {
replaceAll(controller.signal, searchTables);
}
});
};
/**
* JS Function to execute the search
*/
const replaceAll = async (signal, tables) => {
try {
// build form
const formData = new FormData();
// load the result table
const resultsTable = new DataTable('#search_results_table');
// get the search mode
let typeSearch = modeObject.querySelector('input[type=\'radio\']:checked').value;
// set some search values
let searchValue = searchObject.value;
let replaceValue = replaceObject.value;
// add the form data
formData.append('table_name', '');
formData.append('type_search', typeSearch);
formData.append('search_value', searchValue);
formData.append('replace_value', replaceValue);
formData.append('match_case', matchObject.checked ? 1 : 0);
formData.append('whole_word', wholeObject.checked ? 1 : 0);
formData.append('regex_search', regexObject.checked ? 1 : 0);
let abort_this_replace_values = false;
let total = 0;
let index;
@ -50,19 +267,19 @@ const doSearch = async (signal, tables) => {
body: formData
}
if (abort_this_search_value) {
console.log('Aborting this searchValue:' + searchValue);
if (abort_this_replace_values) {
break;
}
const response = await fetch(Url + 'doSearch', options).then(response => {
const response = await fetch(Url + 'replaceAll', options).then(response => {
total++;
if (response.ok) {
return response.json();
}
}).then((data) => {
if (typeof data.items !== 'undefined') {
console.log('++ Fetched for ' + searchValue + ' [' + tableName + ']');
addTableItems(resultsTable, data.items);
if (typeof data.success !== 'undefined') {
UIkit.notify(data.success, {pos:'top-right', timeout : 200, status:'success'});
} else if (typeof data.error !== 'undefined') {
UIkit.notify(data.error, {pos:'bottom-right', timeout : 200});
}
}).catch(error => {
console.log(error);
@ -76,51 +293,49 @@ const doSearch = async (signal, tables) => {
};
/**
* JS Function to fetch selected item
* JS Function to check if we should save/update the current selected item
*/
const getSelectedItem = async (table, row, field, line) => {
const setValueCheck = (row, field, table) => {
// load question
let question = Joomla.JText._('COM_COMPONENTBUILDER_YOUR_ARE_ABOUT_TO_UPDATE_ROW') + ' (' + row + ') -> (' + field + ') ' +
Joomla.JText._('COM_COMPONENTBUILDER_FIELD_IN_THE') + ' (' + table + ') ' + Joomla.JText._('COM_COMPONENTBUILDER_TABLE') + '.<br /><br />' +
Joomla.JText._('COM_COMPONENTBUILDER_THIS_CAN_NOT_BE_UNDONE_ARE_YOU_SURE_YOU_WANT_TO_CONTINUE');
// do check
UIkit.modal.confirm(question, function () {
setValue(row, field, table);
});
};
/**
* JS Function to set the current selected item
*/
const setValue = async (row, field, table) => {
try {
// get the search mode
let mode = modeObject.querySelector('input[type=\'radio\']:checked').value;
// get the value from the editor
let value = editorObject.getValue();
// build form
const formData = new FormData();
// get search value
if (mode == 1) {
formData.append('field_name', field);
formData.append('row_id', row);
formData.append('table_name', table);
// calling URL
getURL = Url + 'getSearchValue';
} else {
formData.append('field_name', field);
formData.append('row_id', row);
formData.append('line_nr', line);
formData.append('table_name', table);
formData.append('search_value', searchObject.value);
formData.append('replace_value', replaceObject.value);
formData.append('match_case', matchObject.checked ? 1 : 0);
formData.append('whole_word', wholeObject.checked ? 1 : 0);
formData.append('regex_search', regexObject.checked ? 1 : 0);
// calling URL
getURL = Url + 'getReplaceValue';
}
formData.append('value', value);
formData.append('row_id', row);
formData.append('field_name', field);
formData.append('table_name', table);
let options = {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
body: formData
}
const response = await fetch(getURL, options).then(response => {
const response = await fetch(Url + 'setValue', options).then(response => {
if (response.ok) {
return response.json();
}
}).then((data) => {
if (typeof data.value !== 'undefined') {
addSelectedItem(data.value, table, row, field, line);
if (typeof data.success !== 'undefined') {
UIkit.notify(data.success, {pos:'top-right', status:'success'});
clearSelectedItem();
tableActiveObject.remove().draw();
}
}).catch(error => {
console.log(error);
@ -130,7 +345,7 @@ const getSelectedItem = async (table, row, field, line) => {
} finally {
// Executed regardless if we caught the error
}
}
};
/**
* JS Function to add item to the editor
@ -139,8 +354,33 @@ const addSelectedItem = async (value, table, row, field, line) => {
// display area
if (value.length > 1)
{
// add value to editor
editorObject.setValue(value);
editorNoticeObject.innerHTML = 'Table: <b>' + table + '</b>(id:<b>' + row + '</b>) | Field: <b>' + field + '</b>(line:<b>' + line + '</b>)';
// set item details notice area
itemNoticeObject.style.display = '';
itemEditButtonObject.innerHTML = editButtonSelected;
itemTableNameObject.innerHTML = table;
itemRowIdObject.innerHTML = row;
itemFieldNameObject.innerHTML = field;
itemLineNumberObject.innerHTML = line;
// set button and editor line if we have a line number
if (typeof line == 'number') {
// show and set the save button
buttonUpdateItemObject.style.display = '';
buttonUpdateItemObject.setAttribute('onclick',"setValueCheck(" + row + ", '" + field + "', '" + table + "');");
// get top of the code line
let top = editorObject.charCoords({line: line, ch: 0}, "local").top;
// scroll to the line
editorObject.scrollTo(null, top - 12);
// select the line
editorObject.setCursor(line - 1);
} else {
// no line so no data we can't save this data
buttonUpdateItemObject.setAttribute('onclick', "");
buttonUpdateItemObject.style.display = 'none';
}
}
}
@ -150,7 +390,15 @@ const addSelectedItem = async (value, table, row, field, line) => {
const clearSelectedItem = async () => {
// display area
editorObject.setValue('');
editorNoticeObject.innerHTML = '';
// clear notice area
itemNoticeObject.style.display = 'none';
itemEditButtonObject.innerHTML = '...';
itemTableNameObject.innerHTML = '...';
itemRowIdObject.innerHTML = '...';
itemFieldNameObject.innerHTML = '...';
itemLineNumberObject.innerHTML = '...';
// clear update button
buttonUpdateItemObject.setAttribute('onclick', '');
}
/**
@ -159,6 +407,9 @@ const clearSelectedItem = async () => {
const clearTableItems = async () => {
let table = new DataTable('#search_results_table');
table.clear().draw( true );
// hide the update all items
buttonUpdateAllObject.style.display = 'none';
}
/**
@ -168,19 +419,43 @@ const clearAll = async () => {
// clear all details
clearTableItems();
clearSelectedItem();
searchedObject.innerHTML = '....';
}
/**
* JS Function to clear the search and replace values
*/
const clearSearch = async () => {
// clear the search and replace values
searchObject.value = '';
replaceObject.value = '';
}
/**
* JS Function to add items to the table
*/
const addTableItems = async (table, items) => {
const addTableItems = async (table, items, typeSearch) => {
table.rows.add(items).draw( false );
if (typeSearch == 2) {
buttonUpdateAllObject.style.display = ''; // TODO should only show once all items are loaded
} else {
buttonUpdateAllObject.style.display = 'none'; // TODO should only show once all items are loaded
}
}
/**
* JS Function to execute (A) on search text change , (B) on search options changes
* JS Function to execute (A) on search/replace text change , (B) on search options changes
*/
const onChange = () => {
// get replace value if set
const replaceValue = replaceObject.value;
if (replaceValue.length > 0) {
// set the searched value
replacedObject.innerHTML = htmlentities(replaceValue);
} else {
replacedObject.innerHTML = '';
}
// get search value
const searchValue = searchObject.value;
if (searchValue.length > 2) {
// Cancel any ongoing requests
@ -189,6 +464,9 @@ const onChange = () => {
// we clear the table again
clearAll();
// set the searched value
searchedObject.innerHTML = htmlentities(searchValue);
// Create new controller and issue new request
controller = new AbortController();
@ -206,3 +484,241 @@ const onChange = () => {
clearAll();
}
};
/**
* JS Function to hide search settings and show table search
*/
const showSearch = () => {
searchSettingsObject.style.display = '';
searchDetailsObject.style.display = 'none';
replaceDetailsObject.style.display = 'none';
tableSearchObject.style.display = 'none';
tableLengthObject.style.display = 'none';
};
/**
* JS Function to show search settings and hide table search
*/
const hideSearch = () => {
searchSettingsObject.style.display = 'none';
searchDetailsObject.style.display = '';
tableSearchObject.style.display = '';
tableLengthObject.style.display = '';
// check if we are in replace mode
let mode = modeObject.querySelector('input[type=\'radio\']:checked').value;
if (mode == 2) {
replaceDetailsObject.style.display = '';
}
};
function htmlentities(string, quoteStyle, charset, doubleEncode) {
// discuss at: https://locutus.io/php/htmlentities/
// original by: Kevin van Zonneveld (https://kvz.io)
// revised by: Kevin van Zonneveld (https://kvz.io)
// revised by: Kevin van Zonneveld (https://kvz.io)
// improved by: nobbler
// improved by: Jack
// improved by: Rafał Kukawski (https://blog.kukawski.pl)
// improved by: Dj (https://locutus.io/php/htmlentities:425#comment_134018)
// bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
// bugfixed by: Brett Zamir (https://brett-zamir.me)
// input by: Ratheous
// note 1: function is compatible with PHP 5.2 and older
// example 1: htmlentities('Kevin & van Zonneveld')
// returns 1: 'Kevin &amp; van Zonneveld'
// example 2: htmlentities("foo'bar","ENT_QUOTES")
// returns 2: 'foo&#039;bar'
const hashMap = getHtmlTranslationTable('HTML_ENTITIES', quoteStyle)
string = string === null ? '' : string + ''
if (!hashMap) {
return false
}
if (quoteStyle && quoteStyle === 'ENT_QUOTES') {
hashMap["'"] = '&#039;'
}
doubleEncode = doubleEncode === null || !!doubleEncode
const regex = new RegExp('&(?:#\\d+|#x[\\da-f]+|[a-zA-Z][\\da-z]*);|[' +
Object.keys(hashMap)
.join('')
// replace regexp special chars
.replace(/([()[\]{}\-.*+?^$|/\\])/g, '\\$1') + ']',
'g')
return string.replace(regex, function (ent) {
if (ent.length > 1) {
return doubleEncode ? hashMap['&'] + ent.substr(1) : ent
}
return hashMap[ent]
})
}
function getHtmlTranslationTable(table, quoteStyle) { // eslint-disable-line camelcase
// discuss at: https://locutus.io/php/get_html_translation_table/
// original by: Philip Peterson
// revised by: Kevin van Zonneveld (https://kvz.io)
// bugfixed by: noname
// bugfixed by: Alex
// bugfixed by: Marco
// bugfixed by: madipta
// bugfixed by: Brett Zamir (https://brett-zamir.me)
// bugfixed by: T.Wild
// improved by: KELAN
// improved by: Brett Zamir (https://brett-zamir.me)
// input by: Frank Forte
// input by: Ratheous
// note 1: It has been decided that we're not going to add global
// note 1: dependencies to Locutus, meaning the constants are not
// note 1: real constants, but strings instead. Integers are also supported if someone
// note 1: chooses to create the constants themselves.
// example 1: get_html_translation_table('HTML_SPECIALCHARS')
// returns 1: {'"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;'}
const entities = {}
const hashMap = {}
let decimal
const constMappingTable = {}
const constMappingQuoteStyle = {}
let useTable = {}
let useQuoteStyle = {}
// Translate arguments
constMappingTable[0] = 'HTML_SPECIALCHARS'
constMappingTable[1] = 'HTML_ENTITIES'
constMappingQuoteStyle[0] = 'ENT_NOQUOTES'
constMappingQuoteStyle[2] = 'ENT_COMPAT'
constMappingQuoteStyle[3] = 'ENT_QUOTES'
useTable = !isNaN(table)
? constMappingTable[table]
: table
? table.toUpperCase()
: 'HTML_SPECIALCHARS'
useQuoteStyle = !isNaN(quoteStyle)
? constMappingQuoteStyle[quoteStyle]
: quoteStyle
? quoteStyle.toUpperCase()
: 'ENT_COMPAT'
if (useTable !== 'HTML_SPECIALCHARS' && useTable !== 'HTML_ENTITIES') {
throw new Error('Table: ' + useTable + ' not supported')
}
entities['38'] = '&amp;'
if (useTable === 'HTML_ENTITIES') {
entities['160'] = '&nbsp;'
entities['161'] = '&iexcl;'
entities['162'] = '&cent;'
entities['163'] = '&pound;'
entities['164'] = '&curren;'
entities['165'] = '&yen;'
entities['166'] = '&brvbar;'
entities['167'] = '&sect;'
entities['168'] = '&uml;'
entities['169'] = '&copy;'
entities['170'] = '&ordf;'
entities['171'] = '&laquo;'
entities['172'] = '&not;'
entities['173'] = '&shy;'
entities['174'] = '&reg;'
entities['175'] = '&macr;'
entities['176'] = '&deg;'
entities['177'] = '&plusmn;'
entities['178'] = '&sup2;'
entities['179'] = '&sup3;'
entities['180'] = '&acute;'
entities['181'] = '&micro;'
entities['182'] = '&para;'
entities['183'] = '&middot;'
entities['184'] = '&cedil;'
entities['185'] = '&sup1;'
entities['186'] = '&ordm;'
entities['187'] = '&raquo;'
entities['188'] = '&frac14;'
entities['189'] = '&frac12;'
entities['190'] = '&frac34;'
entities['191'] = '&iquest;'
entities['192'] = '&Agrave;'
entities['193'] = '&Aacute;'
entities['194'] = '&Acirc;'
entities['195'] = '&Atilde;'
entities['196'] = '&Auml;'
entities['197'] = '&Aring;'
entities['198'] = '&AElig;'
entities['199'] = '&Ccedil;'
entities['200'] = '&Egrave;'
entities['201'] = '&Eacute;'
entities['202'] = '&Ecirc;'
entities['203'] = '&Euml;'
entities['204'] = '&Igrave;'
entities['205'] = '&Iacute;'
entities['206'] = '&Icirc;'
entities['207'] = '&Iuml;'
entities['208'] = '&ETH;'
entities['209'] = '&Ntilde;'
entities['210'] = '&Ograve;'
entities['211'] = '&Oacute;'
entities['212'] = '&Ocirc;'
entities['213'] = '&Otilde;'
entities['214'] = '&Ouml;'
entities['215'] = '&times;'
entities['216'] = '&Oslash;'
entities['217'] = '&Ugrave;'
entities['218'] = '&Uacute;'
entities['219'] = '&Ucirc;'
entities['220'] = '&Uuml;'
entities['221'] = '&Yacute;'
entities['222'] = '&THORN;'
entities['223'] = '&szlig;'
entities['224'] = '&agrave;'
entities['225'] = '&aacute;'
entities['226'] = '&acirc;'
entities['227'] = '&atilde;'
entities['228'] = '&auml;'
entities['229'] = '&aring;'
entities['230'] = '&aelig;'
entities['231'] = '&ccedil;'
entities['232'] = '&egrave;'
entities['233'] = '&eacute;'
entities['234'] = '&ecirc;'
entities['235'] = '&euml;'
entities['236'] = '&igrave;'
entities['237'] = '&iacute;'
entities['238'] = '&icirc;'
entities['239'] = '&iuml;'
entities['240'] = '&eth;'
entities['241'] = '&ntilde;'
entities['242'] = '&ograve;'
entities['243'] = '&oacute;'
entities['244'] = '&ocirc;'
entities['245'] = '&otilde;'
entities['246'] = '&ouml;'
entities['247'] = '&divide;'
entities['248'] = '&oslash;'
entities['249'] = '&ugrave;'
entities['250'] = '&uacute;'
entities['251'] = '&ucirc;'
entities['252'] = '&uuml;'
entities['253'] = '&yacute;'
entities['254'] = '&thorn;'
entities['255'] = '&yuml;'
}
if (useQuoteStyle !== 'ENT_NOQUOTES') {
entities['34'] = '&quot;'
}
if (useQuoteStyle === 'ENT_QUOTES') {
entities['39'] = '&#39;'
}
entities['60'] = '&lt;'
entities['62'] = '&gt;'
// ascii decimals to real symbols
for (decimal in entities) {
if (entities.hasOwnProperty(decimal)) {
hashMap[String.fromCharCode(decimal)] = entities[decimal]
}
}
return hashMap
}