71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
import { createListPageModule } from '../core/app-list-page-module.js';
|
|
import { escapeHtml } from './app-list-utils.js';
|
|
|
|
createListPageModule({
|
|
configId: 'search-index',
|
|
moduleId: 'search-index',
|
|
missingGridMessage: 'Search results grid init failed: Grid.js missing',
|
|
initErrorMessage: 'Search results grid init failed',
|
|
setup: ({ config, gridjs, appBase, initListPage }) => {
|
|
const gridSearch = config.gridSearch ?? null;
|
|
const filterSchema = config.filterSchema ?? [];
|
|
const labels = config.labels ?? {};
|
|
|
|
const renderResult = (cell) => {
|
|
const title = escapeHtml(cell?.title ?? '');
|
|
const description = escapeHtml(cell?.description ?? '');
|
|
const url = cell?.url ?? '#';
|
|
const image = cell?.image ?? '';
|
|
const icon = escapeHtml(cell?.icon ?? 'bi-search');
|
|
const avatar = image
|
|
? `<img class="search-result-avatar" src="${image}" alt="" loading="lazy">`
|
|
: `<span class="search-result-avatar-placeholder"><i class="bi ${icon}"></i></span>`;
|
|
|
|
return gridjs.html(`
|
|
<div class="search-result-row">
|
|
${avatar}
|
|
<div class="search-result-content">
|
|
<a class="search-result-title" href="${url}">${title}</a>
|
|
${description ? `<p class="search-result-desc">${description}</p>` : ''}
|
|
</div>
|
|
</div>
|
|
`);
|
|
};
|
|
|
|
const renderType = (cell) => gridjs.html(`<span class="search-result-type">${escapeHtml(cell ?? '')}</span>`);
|
|
|
|
const { gridConfig } = initListPage({
|
|
grid: {
|
|
gridjs,
|
|
container: '#search-results-grid',
|
|
dataUrl: 'search/data',
|
|
appBase,
|
|
columns: [
|
|
{
|
|
name: labels.result || 'Result',
|
|
sort: false,
|
|
formatter: (cell) => renderResult(cell),
|
|
},
|
|
{
|
|
name: labels.type || 'Type',
|
|
sort: false,
|
|
formatter: (cell) => renderType(cell),
|
|
},
|
|
],
|
|
sortColumns: [null, null],
|
|
paginationLimit: 10,
|
|
language: config.gridLang ?? {},
|
|
mapData: (data) => data.data.map((row) => [row, row.type]),
|
|
search: gridSearch,
|
|
filterSchema,
|
|
urlSync: true,
|
|
},
|
|
filters: {
|
|
mode: 'search-only',
|
|
},
|
|
}) || {};
|
|
|
|
return gridConfig;
|
|
},
|
|
});
|