` : '';
searchNoResultsEl.innerHTML = `No results found${forString}${selectedCategoryValue ? `
in the category '${selectedCategoryValue}'
` : ''}.` // ' We have some suggestions for you:'
if (count === 0) {
searchNoResultsEl.classList.remove('hidden');
} else {
searchNoResultsEl.classList.add('hidden');
}
});
const targetTotalCountObserverFn = (val, elem, cntElem) => {
if (cntElem) {
cntElem.innerHTML = val;
}
if (elem) {
if (val === 0) {
elem.classList.add('hidden');
} else {
elem.classList.remove('hidden');
}
}
const count = Object.keys(totalCountObservers).reduce((sum, searchTarget) => {
return sum + totalCountObservers[searchTarget].trackedProp;
}, 0);
// if (totalCountObserver.trackedProp !== count) {
totalCountObserver.trackedProp = count; /* Call onChange even if the numeric value stayed the same, cause inputEl.value could have changed even if the result count is still 0 for example */
// }
};
const loaderObservers = {};
const loaderObserver = new DataboxMetricLibraryUtils.PropertyTracker(false);
loaderObserver.registerOnChange((isLoading) => {
if (isLoading) {
searchResultsEl.classList.add('hidden');
singleLoaderEl?.classList.remove('hidden');
} else {
searchResultsEl.classList.remove('hidden');
singleLoaderEl?.classList.add('hidden');
}
});
const targetLoaderObserverFn = (_val) => {
const isLoading = Object.keys(loaderObservers).map(searchTarget => {
return loaderObservers[searchTarget].trackedProp;
}).some(l => l);
if (loaderObserver.trackedProp !== isLoading) {
loaderObserver.trackedProp = isLoading;
}
};
const metricsEl = el.querySelector('.search-results-metrics');
const metricsCountEl = metricsEl.querySelector('.badge.count');
const metricsSearch = {
id: 'metrics',
el: metricsEl,
fetchHelper: new DataboxMetricLibraryUtils.FetchHelper({
element: metricsEl }, true),
countObserver: new DataboxMetricLibraryUtils.PropertyTracker(0),
loaderObserver: new DataboxMetricLibraryUtils.PropertyTracker(false),
chunkLoaderList: new DataboxChunkLoader.List({
element: metricsEl.querySelector('ul')
}, [], {
item: DataboxMetricLibraryUtils.searchOptions.metrics.listItem
}),
showMoreEl: metricsEl.querySelector('.item-list-show-more'),
fetchParams: {
baseUrl: `https://databox.com/metric-library/wp-json/metric-library/v1/metrics/search`,
pageSize: DataboxMetricLibraryUtils.searchOptions.metrics.pageSize,
projection: DataboxMetricLibraryUtils.searchOptions.metrics.projection
}
};
metricsSearch.countObserver.registerOnChange((val) => {
targetTotalCountObserverFn(
val,
metricsEl,
metricsCountEl )
});
totalCountObservers['metrics'] = metricsSearch.countObserver;
metricsSearch.showMoreEl.classList.add('hidden');
metricsSearch.loaderObserver.registerOnChange(targetLoaderObserverFn);
loaderObservers['metrics'] = metricsSearch.loaderObserver;
const dashboardTemplatesEl = el.querySelector('.search-results-dashboard-templates');
const dashboardTemplatesCountEl = dashboardTemplatesEl.querySelector('.badge.count');
const dashboardTemplatesSearch = {
id: 'dashboard-templates',
el: dashboardTemplatesEl,
fetchHelper: new DataboxMetricLibraryUtils.FetchHelper({
element: dashboardTemplatesEl }, true),
countObserver: new DataboxMetricLibraryUtils.PropertyTracker(0),
loaderObserver: new DataboxMetricLibraryUtils.PropertyTracker(false),
chunkLoaderList: new DataboxChunkLoader.List({
element: dashboardTemplatesEl.querySelector('ul')
}, [], {
item: DataboxMetricLibraryUtils.searchOptions.dashboardTemplates.listItem
}),
showMoreEl: dashboardTemplatesEl.querySelector('.item-list-show-more'),
fetchParams: {
baseUrl: `https://databox.com/metric-library/wp-json/metric-library/v1/dashboard-templates/search`,
pageSize: DataboxMetricLibraryUtils.searchOptions.dashboardTemplates.pageSize,
projection: DataboxMetricLibraryUtils.searchOptions.dashboardTemplates.projection
}
};
dashboardTemplatesSearch.countObserver.registerOnChange((val) => {
targetTotalCountObserverFn(
val,
dashboardTemplatesEl,
dashboardTemplatesCountEl )
});
totalCountObservers['dashboard-templates'] = dashboardTemplatesSearch.countObserver;
dashboardTemplatesSearch.showMoreEl.classList.add('hidden');
dashboardTemplatesSearch.loaderObserver.registerOnChange(targetLoaderObserverFn);
loaderObservers['dashboard-templates'] = dashboardTemplatesSearch.loaderObserver;
const reportTemplatesEl = el.querySelector('.search-results-report-templates');
const reportTemplatesCountEl = reportTemplatesEl.querySelector('.badge.count');
const reportTemplatesSearch = {
id: 'report-templates',
el: reportTemplatesEl,
fetchHelper: new DataboxMetricLibraryUtils.FetchHelper({
element: reportTemplatesEl }, true),
countObserver: new DataboxMetricLibraryUtils.PropertyTracker(0),
loaderObserver: new DataboxMetricLibraryUtils.PropertyTracker(false),
chunkLoaderList: new DataboxChunkLoader.List({
element: reportTemplatesEl.querySelector('ul')
}, [], {
item: DataboxMetricLibraryUtils.searchOptions.reportTemplates.listItem
}),
showMoreEl: reportTemplatesEl.querySelector('.item-list-show-more'),
fetchParams: {
baseUrl: `https://databox.com/metric-library/wp-json/metric-library/v1/report-templates/search`,
pageSize: DataboxMetricLibraryUtils.searchOptions.reportTemplates.pageSize,
projection: DataboxMetricLibraryUtils.searchOptions.reportTemplates.projection
}
};
reportTemplatesSearch.countObserver.registerOnChange((val) => {
targetTotalCountObserverFn(
val,
reportTemplatesEl,
reportTemplatesCountEl )
});
totalCountObservers['report-templates'] = reportTemplatesSearch.countObserver;
reportTemplatesSearch.showMoreEl.classList.add('hidden');
reportTemplatesSearch.loaderObserver.registerOnChange(targetLoaderObserverFn);
loaderObservers['report-templates'] = reportTemplatesSearch.loaderObserver;
function searchFn() {
let fetchParams = {};
fetchParams = JSON.parse(JSON.stringify(fetchBodyBase));
fetchParams.tempBody = {
filter: fetchBodyFilter,
projection: metricsSearch.fetchParams.projection,
sortOrder: fetchBodySort
};
fetchParams.body = JSON.stringify(fetchParams.tempBody);
delete fetchParams.tempBody;
metricsSearch.countObserver.trackedProp = 0;
DataboxMetricLibraryUtils.search([
`${metricsSearch.fetchParams.baseUrl}?pageSize=${metricsSearch.fetchParams.pageSize}&pageIndex=0`,
fetchParams
], metricsSearch);
fetchParams = JSON.parse(JSON.stringify(fetchBodyBase));
fetchParams.tempBody = {
filter: fetchBodyFilter,
projection: dashboardTemplatesSearch.fetchParams.projection,
sortOrder: fetchBodySort
};
fetchParams.body = JSON.stringify(fetchParams.tempBody);
delete fetchParams.tempBody;
dashboardTemplatesSearch.countObserver.trackedProp = 0;
DataboxMetricLibraryUtils.search([
`${dashboardTemplatesSearch.fetchParams.baseUrl}?pageSize=${dashboardTemplatesSearch.fetchParams.pageSize}&pageIndex=0`,
fetchParams
], dashboardTemplatesSearch);
fetchParams = JSON.parse(JSON.stringify(fetchBodyBase));
fetchParams.tempBody = {
filter: fetchBodyFilter,
projection: reportTemplatesSearch.fetchParams.projection,
sortOrder: fetchBodySort
};
fetchParams.body = JSON.stringify(fetchParams.tempBody);
delete fetchParams.tempBody;
reportTemplatesSearch.countObserver.trackedProp = 0;
DataboxMetricLibraryUtils.search([
`${reportTemplatesSearch.fetchParams.baseUrl}?pageSize=${reportTemplatesSearch.fetchParams.pageSize}&pageIndex=0`,
fetchParams
], reportTemplatesSearch);
}
searchFn();
});