Skip to content

Commit

Permalink
chore: working draft version with data from dataset and datasource. E…
Browse files Browse the repository at this point in the history 
…njoy the 05:00 PM
  • Loading branch information
@steve-lebleu
steve-lebleu committed Feb 28, 2024
1 parent f046f81 commit c909488
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 31 deletions.
129 changes: 122 additions & 7 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,6 @@
perPage: 10,
}
},
fieldsToDisplay: [
'Name',
'CountryCode',
'Population'
],
propertyToValue: null,
};

Expand All @@ -80,12 +75,132 @@
type: 'fadeIn',
duration: 500
},
cache: 5000
cache: 5000,
fieldsToDisplay: [
'Name',
'CountryCode',
'Population'
],
};

const d = {
data: [
{
"0": "Breda",
"1": "NLD",
"2": "160398",
"Name": "Breda",
"CountryCode": "NLD",
"Population": "160398"
},
{
"0": "Tres de Febrero",
"1": "ARG",
"2": "352311",
"Name": "Tres de Febrero",
"CountryCode": "ARG",
"Population": "352311"
},
{
"0": "L´Hospitalet de Llobregat",
"1": "ESP",
"2": "247986",
"Name": "L´Hospitalet de Llobregat",
"CountryCode": "ESP",
"Population": "247986"
},
{
"0": "Libreville",
"1": "GAB",
"2": "419000",
"Name": "Libreville",
"CountryCode": "GAB",
"Population": "419000"
},
{
"0": "Brescia",
"1": "ITA",
"2": "191317",
"Name": "Brescia",
"CountryCode": "ITA",
"Population": "191317"
},
{
"0": "Cape Breton",
"1": "CAN",
"2": "114733",
"Name": "Cape Breton",
"CountryCode": "CAN",
"Population": "114733"
},
{
"0": "Brest",
"1": "FRA",
"2": "149634",
"Name": "Brest",
"CountryCode": "FRA",
"Population": "149634"
},
{
"0": "Bremen",
"1": "DEU",
"2": "540330",
"Name": "Bremen",
"CountryCode": "DEU",
"Population": "540330"
},
{
"0": "Freiburg im Breisgau",
"1": "DEU",
"2": "202455",
"Name": "Freiburg im Breisgau",
"CountryCode": "DEU",
"Population": "202455"
},
{
"0": "Bremerhaven",
"1": "DEU",
"2": "122735",
"Name": "Bremerhaven",
"CountryCode": "DEU",
"Population": "122735"
},
{
"0": "Debrecen",
"1": "HUN",
"2": "203648",
"Name": "Debrecen",
"CountryCode": "HUN",
"Population": "203648"
},
{
"0": "Brest",
"1": "BLR",
"2": "286000",
"Name": "Brest",
"CountryCode": "BLR",
"Population": "286000"
}
]
}

const cbs = {
onKeyup: (value, cb) => {
console.log('cb.onKeyup ', value);
console.log('I\'m doing scrappy stuffs with the data!');
console.log('You want the data? There is!');
cb(dataSet);
},
onSelect: (value) => {
console.log('cb.onSelect', value);
},
onError: (value) => {
console.log('cb.onError ', value);
}
};

// Way 1
input.kompleter(dataSource, options, { onKeyup: (value) => { console.log('cb.onKeyup ', value); }, onSelect: (value) => { console.log('cb.onSelect', value); }, onError: (value) => { console.log('cb.onError ', value); } })
input.kompleter(d, options, cbs)

// Way 2
// kompleter(input, options);
Expand Down
42 changes: 18 additions & 24 deletions src/js/vanilla/kompleter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@
.then(cache => {
cache.match(queryString)
.then(async (data) => {
console.log('cache.emit', data)
document.dispatchEvent(kompleter.events.requestDone({ fromCache: true, data: await data.json() }));
});
})
Expand Down Expand Up @@ -145,7 +144,7 @@
*/
callbacks: {
onError: (error) => {},
onKeyup: (value) => {},
onKeyup: (value, cb) => {},
onSelect: (selected) => {},
},

Expand Down Expand Up @@ -225,7 +224,6 @@
return true;
},
qs: function(term = '') {
console.log('qs func')
const qs = new URLSearchParams();
Object.keys(kompleter.props.dataSource.queryString.keys)
.forEach(param => qs.append(kompleter.props.dataSource.queryString.keys[param], param === 'term' ? term : kompleter.props.dataSource.queryString.values[param]));
Expand All @@ -236,7 +234,6 @@
headers.append('content-type', 'application/x-www-form-urlencoded');
headers.append('method', 'GET');

console.log('request', request);
fetch(`${kompleter.props.dataSource.url}?${this.qs(kompleter.htmlElements.input.value)}`, headers)
.then(result => result.json())
.then(data => {
Expand Down Expand Up @@ -316,7 +313,6 @@
onRequestDone: () => {
document.addEventListener('kompleter.request.done', (e) => {
kompleter.props.dataSource.data = e.detail.data;
// TODO: tu set de la data alors que c'est normalement interdit -> du coup ça plante -> TOFIX
if (!e.detail.fromCache) {
kompleter.cache.set(e.detail);
}
Expand All @@ -342,15 +338,12 @@
default:
if ( kompleter.htmlElements.input.value !== kompleter.props.previousValue ) {
if (kompleter.props.dataSource.url) {
console.log('Here')
const qs = kompleter.handlers.qs(kompleter.htmlElements.input.value);
console.log('qs', qs);
console.log('cache is active', kompleter.cache.isActive());
console.log('cache is valid', await kompleter.cache.isValid(qs))
kompleter.cache.isActive() && await kompleter.cache.isValid(qs) ? kompleter.cache.emit(qs) : kompleter.handlers.request();
} else if (kompleter.props.dataSource.data) {
console.log('there')
kompleter.callbacks.onKeyup(kompleter.htmlElements.input.value);
kompleter.callbacks.onKeyup(kompleter.htmlElements.input.value, (data) => {
document.dispatchEvent(kompleter.events.requestDone({ fromCache: false, queryString: 'test', data })); // TODO: change fromCache by from: cache|local|request
});
} else {
document.dispatchEvent(kompleter.events.error(new Error('None of url or data found on dataSource')));
}
Expand Down Expand Up @@ -382,6 +375,7 @@
duration: 500
},
cache: 5000,
fieldsToDisplay: null,
maxResults: 10,
startQueriyngFromChar: 2,
},
Expand All @@ -406,7 +400,6 @@
perPage: 10,
}
},
fieldsToDisplay: null,
propertyToValue: null,
},
pointer: -1,
Expand All @@ -429,7 +422,7 @@
throw new Error(`Valid URL is required as dataSource.url when you delegate querying. Please provide a valid url (${dataSource.url} given)`);
}

if (dataSource?.data && Array.isArray(dataSource.data)) {
if (dataSource?.data && !Array.isArray(dataSource.data)) {
throw new Error(`Valid dataset is required as dataSource.data when you take ownsership on the data hydratation. Please provide a valid data set array (${dataSource.data} given)`);
}

Expand Down Expand Up @@ -461,6 +454,11 @@
document.dispatchEvent(kompleter.events.warning({ message: `options.cache should be integer, ${options.cache.toString()} given. Fallback on default value of 5000ms.` }));
}

if (options.fieldsToDisplay && (!Array.isArray(options.fieldsToDisplay) || !options.fieldsToDisplay.length)) {
options.fieldsToDisplay = kompleter.options.fieldsToDisplay;
document.dispatchEvent(kompleter.events.warning({ message: `options.fieldsToDisplay should be array, ${options.fieldsToDisplay.toString()} given. Fallback on default value of 10` }));
}

if (options.maxResults && isNaN(parseInt(options.maxResults))) {
options.maxResults = kompleter.options.maxResults;
document.dispatchEvent(kompleter.events.warning({ message: `options.maxResults should be integer, ${options.maxResults.toString()} given. Fallback on default value of 10` }));
Expand Down Expand Up @@ -516,8 +514,8 @@
results: function(e) {
let html = '';
if(kompleter.props.dataSource.data && kompleter.props.dataSource.data.length) {
const properties = kompleter.props.dataSource.fieldsToDisplay.length; // TODO should be validated as 3 or 4 max + flexbox design
for(let i = 0; i < kompleter.props.dataSource.data.length && i <= kompleter.options.maxResults || true ; i++) {
const properties = kompleter.options.fieldsToDisplay.length; // TODO should be validated as 3 or 4 max + flexbox design + this works only on current dataSet ?
for(let i = 0; i < kompleter.props.dataSource.data.length && i <= kompleter.options.maxResults; i++) {
if(typeof kompleter.props.dataSource.data[i] !== 'undefined') {
html += `<div id="${i}" class="item--result ${i + 1 === kompleter.props.dataSource.data.length ? 'last' : ''}">`;
for(let j = 0; j < properties; j++) {
Expand All @@ -544,23 +542,18 @@
*/
init: function(input, dataSource, options, callbacks) {

// ---------- Manage datasource
// provided by consummer

// TODO: next feature, with input hidden - Manage result as [string] or [object] with a mapPropertyValue

try {

// 1. Validate

kompleter.validators.input(input);
kompleter.validators.dataSource(dataSource);
options && kompleter.validators.options(options);
dataSource.data && kompleter.validators.callbacks(callbacks);

// 2. Assign

kompleter.props.dataSource = dataSource;
kompleter.props.dataSource = Object.assign(kompleter.props.dataSource, dataSource);

if(options) {
kompleter.options = Object.assign(kompleter.options, options);
Expand Down Expand Up @@ -590,6 +583,7 @@
kompleter.listeners.onViewResultDone();
kompleter.listeners.onWarning();

console.log('Kompleter', kompleter);
} catch(e) {
console.error(e);
}
Expand All @@ -598,8 +592,8 @@

window.kompleter = kompleter.init;

window.HTMLInputElement.prototype.kompleter = function(options) {
window.kompleter(this, options);
window.HTMLInputElement.prototype.kompleter = function(dataSource, options, callbacks) {
window.kompleter(this, dataSource, options, callbacks);
}

})(window);

0 comments on commit c909488

Please sign in to comment.