jprdonnelly/airbyte
1
0
Fork 0
mirror of synced 2026-01-06 06:04:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve Slack MeiliSearch Search UI (#2059)

Browse Source
This commit is contained in:
Charles
2021-02-16 16:08:34 -08:00
committed by GitHub
parent 83e4136d71
commit d5f4a80879
1 changed files with 52 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
docs/tutorials/slack-history/index.html
View File

@@ -9,62 +9,68 @@
<div class="wrapper">
<div id="searchbox" focus></div>
<div id="hits"></div>
<div id="hits2"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
<script>
const searchMessages = instantsearch({
indexName: "messages",
searchClient: instantMeiliSearch(
"http://localhost:7700"
)
});
const searchThreads = instantsearch({
indexName: "threads",
searchClient: instantMeiliSearch(
"http://localhost:7700"
)
});
(async function () {
const searchMessages = instantsearch({
indexName: "threads",
searchClient: instantMeiliSearch(
"http://localhost:7700"
)
});
searchMessages.addWidgets([
instantsearch.widgets.searchBox({
container: "#searchbox"
}),
instantsearch.widgets.configure({ hitsPerPage: 8 }),
instantsearch.widgets.hits({
container: "#hits",
templates: {
item: `
const client = new MeiliSearch({host: "http://localhost:7700"});
// put all users in a map so that we can display user names.
const users = await client.getIndex("users")
.then(usersResult => usersResult.getDocuments())
.then(usersResult => usersResult.reduce((map, obj) => {
map[obj.id] = obj.name;
return map;
}, {}));
// put all channels in a map so that we can display channel names.
const channels = await client.getIndex("channels")
.then(usersResult => usersResult.getDocuments())
.then(usersResult => usersResult.reduce((map, obj) => {
map[obj.id] = obj.name;
return map;
}, {}));
searchMessages.addWidgets([
instantsearch.widgets.searchBox({
container: "#searchbox"
}),
instantsearch.widgets.configure({hitsPerPage: 8}),
instantsearch.widgets.hits({
container: "#hits",
templates: {
item(hit) {
return `
<div>
<div class="hit-name">
{{#helpers.highlight}}{ "attribute": "text" }{{/helpers.highlight}}
<b>${users[hit.user] || hit.user}</b>
(<i>${channels[hit.channel_id] || hit.channel_id}, ${instantsearch.highlight({
attribute: 'ts',
highlightedTagName: 'mark',
hit
})}</i>):
${instantsearch.highlight({attribute: 'text', highlightedTagName: 'mark', hit})}
</div>
</div>
`
}
})
]);
searchMessages.start();
}
}
})
]);
searchThreads.addWidgets([
instantsearch.widgets.searchBox({
container: "#searchbox"
}),
instantsearch.widgets.configure({ hitsPerPage: 8 }),
instantsearch.widgets.hits({
container: "#hits",
templates: {
item: `
<div>
<div class="hit-name">
{{#helpers.highlight}}{ "attribute": "text" }{{/helpers.highlight}}
</div>
</div>
`
}
})
]);
searchThreads.start();
searchMessages.start()
})();
</script>
</body>
</html>