Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: show search results in infowindow #1751

Merged
merged 10 commits into from
Sep 22, 2023
Merged

feature: show search results in infowindow #1751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7011ff1
feature: show search results in infowindow
jokd Apr 24, 2023
b87b7c4
Added exportfunctionality and skip grouping in searchlist
jokd Apr 28, 2023
72d8c80
Update search.js
jokd Apr 28, 2023
e9e269d
Merge branch 'master' into search-result-infowindow2
jokd Jun 21, 2023
cfcbaee
Update infowindow.js
jokd Jun 21, 2023
d573833
Update infowindow_exporthandler.js
jokd Jun 21, 2023
62e22a8
Styling of export buttons
jokd Jun 21, 2023
33332c1
Added searchlistTitle
jokd Jun 21, 2023
f7fb39b
Added selection button
jokd Jun 22, 2023
628195b
Minor fixes
jokd Aug 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/infowindow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const Infowindow = function Infowindow(options = {}) {
}

closeButton = Button({
cls: 'small round margin-top-smaller margin-bottom-auto margin-right icon-smaller grey-lightest no-shrink o-tooltip',
cls: 'small round margin-top-small margin-right-small icon-smaller grey-lightest o-tooltip',
ariaLabel: 'Stäng',
icon: closeIcon,
click() {
Expand All @@ -84,7 +84,7 @@ const Infowindow = function Infowindow(options = {}) {
});

titleComponent = El({
cls: 'flex row justify-start margin-y-smaller margin-left text-weight-bold',
cls: 'flex row justify-start margin-top-small margin-left text-weight-bold padding-right',
style: { width: '100%' },
innerHTML: title
});
Expand Down
285 changes: 260 additions & 25 deletions src/controls/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import Overlay from 'ol/Overlay';
import Point from 'ol/geom/Point';
import Awesomplete from 'awesomplete';
import { Component, Element as El, Button, dom } from '../ui';
import { Component, Element as El, Button, Collapse, CollapseHeader, dom } from '../ui';
import generateUUID from '../utils/generateuuid';
import getAttributes from '../getattributes';
import getCenter from '../geometry/getcenter';
import getFeature from '../getfeature';
import mapUtils from '../maputils';
import popup from '../popup';
import utils from '../utils';
import Infowindow from '../components/infowindow';
import { listExportHandler } from '../infowindow_exporthandler';

const Search = function Search(options = {}) {
const keyCodes = {
Expand Down Expand Up @@ -43,9 +45,12 @@ const Search = function Search(options = {}) {
const {
geometryAttribute,
url,
queryParameterName = 'q'
queryParameterName = 'q',
autocompletePlacement,
searchlistOptions = {}
} = options;

const searchlistPlacement = searchlistOptions.placement;
let searchDb = {};
let map;
let projectionCode;
Expand All @@ -57,6 +62,7 @@ const Search = function Search(options = {}) {
let closeButton;
let containerElement;
let wrapperElement;
let infowindow;

function clear() {
featureInfo.clear();
Expand Down Expand Up @@ -173,14 +179,19 @@ const Search = function Search(options = {}) {
setSearchDb([]);
}

function clearAll() {
clearSearchResults();
clear();
document.getElementById(`${containerElement.getId()}`).classList.remove('o-search-true');
document.getElementById(`${containerElement.getId()}`).classList.add('o-search-false');
document.getElementsByClassName('o-search-field')[0].value = '';
document.getElementById(`${searchButton.getId()}`).blur();
document.getElementsByClassName('o-search-field')[0].blur();
}

function onClearSearch() {
document.getElementById(`${closeButton.getId()}`).addEventListener('click', () => {
clearSearchResults();
clear();
document.getElementById(`${containerElement.getId()}`).classList.remove('o-search-true');
document.getElementById(`${containerElement.getId()}`).classList.add('o-search-false');
document.getElementsByClassName('o-search-field')[0].value = '';
document.getElementById(`${searchButton.getId()}`).blur();
clearAll();
});
}

Expand Down Expand Up @@ -303,7 +314,6 @@ const Search = function Search(options = {}) {
*/

function initAutocomplete() {
let list;
const input = document.getElementsByClassName('o-search-field')[0];

awesomplete = new Awesomplete('.o-search-field', {
Expand All @@ -318,40 +328,243 @@ const Search = function Search(options = {}) {
}
});

const handler = function func(data) {
list = [];
searchDb = {};
if (data.length) {
setSearchDb(data);
if (name && groupSuggestions) {
list = groupToList(groupDb(searchDb));
} else {
list = dbToList(data);
const handler = function func(list) {
awesomplete.list = list;
awesomplete.evaluate();
};

const infowindowHandler = function func(list, searchVal) {
const result = list.reduce((r, a) => {
/* eslint-disable-next-line no-param-reassign */
r[a[layerNameAttribute]] = r[a[layerNameAttribute]] || [];
r[a[layerNameAttribute]].push(a);
return r;
}, Object.create(null));
const groups = [];
Object.keys(result).forEach((layername) => {
const resultArray = result[layername];
if (viewer.getLayer(layername)) {
const layertitle = `${viewer.getLayer(layername).get('title')} (${resultArray.length})`;
const rows = [];
if (searchlistOptions.makeSelectionButton) {
const ids = resultArray.map(item => item[idAttribute]);
const buttonText = searchlistOptions.makeSelectionButtonText || 'Gör urval i kartan';
const makeSelectionButton = Button({
cls: 'export-button',
text: buttonText
});
const makeSelection = Component({
addClick() {
document.getElementById(makeSelectionButton.getId()).addEventListener('click', () => {
const source = viewer.getMapSource();
const projCode = viewer.getProjectionCode();
const proj = viewer.getProjection();
const layer = viewer.getLayer(layername);
getFeature(ids.join(), layer, source, projCode, proj)
.then((res) => {
if (res.length > 0) {
const featLayerName = layer.get('name');
featureInfo.showFeatureInfo({ feature: res, layerName: featLayerName });
}
});
});
},
onInit() {
this.addComponent(makeSelectionButton);
},
render() {
return `<li class="flex row text-smaller align-center padding-x padding-y-smaller hover pointer" id="${this.getId()}">${makeSelectionButton.render()}</li>`;
}
});
rows.push(makeSelection);
}

resultArray.forEach((element) => {
const row = Component({
addClick() {
document.getElementById(this.getId()).addEventListener('click', () => {
const source = viewer.getMapSource();
const projCode = viewer.getProjectionCode();
const proj = viewer.getProjection();
const layer = viewer.getLayer(layername);
const id = element[idAttribute];
getFeature(id, layer, source, projCode, proj)
.then((res) => {
if (res.length > 0) {
const featureLayerName = layer.get('name');
featureInfo.showFeatureInfo({ feature: res, layerName: featureLayerName });
}
});
});
},
onInit() {
this.addComponent(El({
cls: 'flex row align-center padding-left padding-right item',
tagName: 'div',
innerHTML: `${element[name]}`
}));
},
render() {
const content = this.getComponents().reduce((acc, item) => {
const rendered = item.render();
return acc + rendered;
}, '');
return `<li class="flex row text-smaller align-center padding-x padding-y-smaller hover pointer" id="${this.getId()}">${content}</li>`;
}
});
rows.push(row);
});

const contentComponent = Component({
onInit() {
this.addComponents(rows);
},
onRender() {
this.getComponents().forEach((comp) => {
comp.addClick();
});
},
render() {
const content = this.getComponents().reduce((acc, item) => {
const rendered = item.render();
return acc + rendered;
}, '');
this.dispatch('render');
return `<ul id="${this.getId()}">${content}</ul>`;
}
});

const groupCmp = Collapse({
cls: '',
expanded: false,
headerComponent: CollapseHeader({
cls: 'hover padding-x padding-y-small grey-lightest border-bottom text-small',
icon: '#ic_chevron_right_24px',
title: layertitle
}),
contentComponent,
collapseX: false
});
groups.push(groupCmp);
}
});

let exportButton;
if (Object.keys(result).length > 0 && searchlistOptions.export && searchlistOptions.exportUrl) {
const roundButton = searchlistOptions.roundButton;
const buttonIcon = searchlistOptions.roundButtonIcon || '#fa-download';
const buttonText = searchlistOptions.exportButtonText || 'Export';
const exportFileName = searchlistOptions.exportFilename || 'export.xlsx';
const exportExcludedFields = searchlistOptions.exportExcludedFields || [];
if (exportExcludedFields.length > 0) {
Object.keys(result).forEach(thisName => {
result[thisName].forEach(res => {
const row = res;
exportExcludedFields.forEach(field => {
if (row[field]) {
delete row[field];
}
});
});
});
}
awesomplete.list = list;
awesomplete.evaluate();

exportButton = Button({
cls: roundButton ? 'padding-small margin-bottom-smaller icon-smaller round light box-shadow o-tooltip margin-right-small' : 'export-button',
style: roundButton ? 'position:absolute; bottom:0.2rem; left:0.75rem' : 'position:absolute; bottom:0.75rem; left:0.75rem',
text: roundButton ? '' : buttonText,
tooltipText: roundButton ? buttonText : '',
icon: roundButton ? buttonIcon : '',
click() {
listExportHandler(
searchlistOptions.exportUrl,
result,
exportFileName
)
.catch((err) => {
console.error(err);
});
}
});
}

const listcomponent = Component({
name: 'searchlist',
onInit() {
this.addComponents(groups);
if (exportButton) {
this.addComponent(exportButton);
}
},
onAdd() {
this.render();
},
render() {
const content = this.getComponents().reduce((acc, item) => acc + item.render(), '');
return `${content}`;
}
});
const searchlistTitle = searchlistOptions.title || 'Sökresultat för "{{value}}"';
infowindow.changeContent(listcomponent, `${searchlistTitle.replace('{{value}}', searchVal)}`);
};

function makeRequest(reqHandler, obj) {
function makeRequest(reqHandler, obj, opt, ignoreGroup = false) {
const searchVal = obj.value;
let queryUrl = `${url}${url.indexOf('?') !== -1 ? '&' : '?'}${queryParameterName}=${encodeURI(obj.value)}`;
if (includeSearchableLayers) {
queryUrl += `&l=${viewer.getSearchableLayers(searchableDefault)}`;
}
fetch(queryUrl)
.then(response => response.json())
.then((data) => {
reqHandler(data);
let list = [];
searchDb = {};
if (data.length) {
setSearchDb(data);
if (name && groupSuggestions && !ignoreGroup) {
list = groupToList(groupDb(searchDb));
} else {
list = dbToList(data);
}
}
reqHandler(list, searchVal, opt);
});
}

input.addEventListener('keyup', (e) => {
const keyCode = e.keyCode;
if (input.value.length >= minLength) {
if (keyCode in keyCodes) {
const keyCode = e.keyCode;
if (keyCode === 13) {
switch (searchlistPlacement) {
case 'floating':
case 'left':
makeRequest(infowindowHandler, input, {}, true);
clearAll();
break;
default:
makeRequest(handler, input);
}
} else if (keyCode in keyCodes) {
// empty
} else {
makeRequest(handler, input);
switch (autocompletePlacement) {
case 'floating':
case 'left':
makeRequest(infowindowHandler, input);
break;
default:
makeRequest(handler, input);
}
}
} else {
switch (searchlistPlacement) {
case 'floating':
case 'left':
infowindowHandler([], '');
infowindow.close();
break;
default:
break;
}
}
});
Expand Down Expand Up @@ -443,6 +656,28 @@ const Search = function Search(options = {}) {
initAutocomplete();
bindUIActions();

if (autocompletePlacement === 'floating' || searchlistPlacement === 'floating') {
infowindow = Infowindow({ viewer,
type: 'floating',
contentComponent: El({
tagName: 'div',
cls: 'padding-y-small overflow-auto text-small',
style: (searchlistOptions.export && searchlistOptions.exportUrl) ? 'margin-bottom:2.7rem' : ''
})
});
this.addComponent(infowindow);
} else if (autocompletePlacement === 'left' || searchlistPlacement === 'left') {
infowindow = Infowindow({ viewer,
type: 'left',
contentComponent: El({
tagName: 'div',
cls: 'padding-y-small overflow-auto text-small',
style: (searchlistOptions.export && searchlistOptions.exportUrl) ? 'margin-bottom:2.7rem' : ''
})
});
this.addComponent(infowindow);
}

this.dispatch('render');
}
});
Expand Down
Loading