87 lines
2.7 KiB
PHTML
87 lines
2.7 KiB
PHTML
<?php
|
|
use MintyPHP\Buffer;
|
|
?>
|
|
<div class="app-breadcrumb">
|
|
<a href="/admin">Startseite</a><i class="bi bi-chevron-right"></i><?php e(t('Search')); ?>
|
|
</div>
|
|
<div class="app-list-titlebar">
|
|
<h1><?php e(t('Search results')); ?></h1>
|
|
</div>
|
|
<div class="app-list-toolbar">
|
|
<label class="app-field">
|
|
<span><?php e(t('Search')); ?></span>
|
|
<input type="search" id="search-results-input" placeholder="<?php e(t('Search...')); ?>">
|
|
</label>
|
|
</div>
|
|
<div class="app-list-table">
|
|
<div id="search-results-grid"></div>
|
|
</div>
|
|
|
|
<?php $gridFactoryVersion = @filemtime('web/js/core/app-grid-factory.js') ?: time(); ?>
|
|
<script src="<?php e(asset('vendor/gridjs/gridjs.umd.js')); ?>"></script>
|
|
<script type="module">
|
|
import { createServerGrid } from "<?php e(asset('js/core/app-grid-factory.js?v=' . $gridFactoryVersion)); ?>";
|
|
|
|
const appBase = "<?php e(localeBase()); ?>";
|
|
const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({
|
|
'&': '&',
|
|
'<': '<',
|
|
'>': '>',
|
|
'"': '"',
|
|
"'": '''
|
|
}[char]));
|
|
|
|
const renderResult = (cell) => {
|
|
const title = escapeHtml(cell?.title ?? '');
|
|
const description = escapeHtml(cell?.description ?? '');
|
|
const url = cell?.url ?? '#';
|
|
const typeLabel = escapeHtml(cell?.type ?? '');
|
|
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>`);
|
|
|
|
createServerGrid({
|
|
gridjs: window.gridjs,
|
|
container: '#search-results-grid',
|
|
dataUrl: 'search/data',
|
|
appBase,
|
|
columns: [
|
|
{
|
|
name: "<?php e(t('Result')); ?>",
|
|
sort: false,
|
|
formatter: (cell) => renderResult(cell)
|
|
},
|
|
{
|
|
name: "<?php e(t('Type')); ?>",
|
|
sort: false,
|
|
formatter: (cell) => renderType(cell)
|
|
}
|
|
],
|
|
sortColumns: [null, null],
|
|
paginationLimit: 10,
|
|
language: <?php MintyPHP\Buffer::get('grid_lang'); ?>,
|
|
mapData: (data) => data.data.map((row) => [row, row.type]),
|
|
search: {
|
|
input: '#search-results-input',
|
|
param: 'search',
|
|
debounce: 250
|
|
},
|
|
urlSync: true
|
|
});
|
|
</script>
|