Fixed and finished the search function
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
const STATES = [
|
||||
{ key: "completed", label: "Completed" },
|
||||
{ key: "manager_review", label: "Manager Review" },
|
||||
{ key: "in_progress", label: "In Progress" },
|
||||
{ key: "not_started", label: "Not Started" },
|
||||
{ key: "comments", label: "Comments" }
|
||||
{ key: "completed", label: "Completed" },
|
||||
{ key: "manager_review", label: "Manager Review" },
|
||||
{ key: "in_progress", label: "In Progress" },
|
||||
{ key: "not_started", label: "Not Started" },
|
||||
{ key: "comments", label: "Comments" },
|
||||
];
|
||||
|
||||
function isMobile() {
|
||||
@@ -20,9 +20,9 @@ function populateMobileControls(items) {
|
||||
|
||||
itemSelect.innerHTML = "<option value=''>Select competency</option>";
|
||||
fromSelect.innerHTML = "<option value=''>From</option>";
|
||||
toSelect.innerHTML = "<option value=''>To</option>";
|
||||
toSelect.innerHTML = "<option value=''>To</option>";
|
||||
|
||||
items.forEach(item => {
|
||||
items.forEach((item) => {
|
||||
const opt = document.createElement("option");
|
||||
opt.value = item.id;
|
||||
opt.textContent = item.title;
|
||||
@@ -30,7 +30,7 @@ function populateMobileControls(items) {
|
||||
itemSelect.appendChild(opt);
|
||||
});
|
||||
|
||||
STATES.forEach(s => {
|
||||
STATES.forEach((s) => {
|
||||
fromSelect.appendChild(new Option(s.label, s.key));
|
||||
toSelect.appendChild(new Option(s.label, s.key));
|
||||
});
|
||||
@@ -46,8 +46,8 @@ function populateMobileControls(items) {
|
||||
|
||||
document.getElementById("move-confirm").addEventListener("click", async () => {
|
||||
const itemId = document.getElementById("move-item").value;
|
||||
const from = document.getElementById("move-from").value;
|
||||
const to = document.getElementById("move-to").value;
|
||||
const from = document.getElementById("move-from").value;
|
||||
const to = document.getElementById("move-to").value;
|
||||
|
||||
if (!itemId || !to) {
|
||||
alert("Select an item and target column");
|
||||
@@ -62,7 +62,7 @@ document.getElementById("move-confirm").addEventListener("click", async () => {
|
||||
const res = await fetch(`/api/competencies/items/${itemId}/state`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ state: to })
|
||||
body: JSON.stringify({ state: to }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
@@ -72,8 +72,6 @@ document.getElementById("move-confirm").addEventListener("click", async () => {
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
let draggedItemId = null;
|
||||
|
||||
function countByState(items) {
|
||||
@@ -113,11 +111,11 @@ function createColumn(state, items, counts) {
|
||||
<span class="kanban-title">${state.label}</span>
|
||||
<span class="kanban-count">${counts[state.key] || 0}</span>
|
||||
`;
|
||||
|
||||
|
||||
const list = document.createElement("div");
|
||||
list.className = "kanban-list";
|
||||
|
||||
list.addEventListener("dragover", e => e.preventDefault());
|
||||
list.addEventListener("dragover", (e) => e.preventDefault());
|
||||
|
||||
list.addEventListener("drop", async () => {
|
||||
if (!draggedItemId) return;
|
||||
@@ -125,7 +123,7 @@ function createColumn(state, items, counts) {
|
||||
const res = await fetch(`/api/competencies/items/${draggedItemId}/state`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ state: state.key })
|
||||
body: JSON.stringify({ state: state.key }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
@@ -136,8 +134,8 @@ function createColumn(state, items, counts) {
|
||||
});
|
||||
|
||||
items
|
||||
.filter(i => i.state === state.key)
|
||||
.forEach(i => list.appendChild(createCard(i)));
|
||||
.filter((i) => i.state === state.key)
|
||||
.forEach((i) => list.appendChild(createCard(i)));
|
||||
|
||||
col.appendChild(header);
|
||||
col.appendChild(list);
|
||||
@@ -152,12 +150,11 @@ function renderBoard(items) {
|
||||
|
||||
const counts = countByState(items);
|
||||
|
||||
STATES.forEach(state => {
|
||||
STATES.forEach((state) => {
|
||||
board.appendChild(createColumn(state, items, counts));
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
async function loadBoard() {
|
||||
const res = await fetch("/api/competencies/items");
|
||||
const items = await res.json();
|
||||
@@ -165,5 +162,4 @@ async function loadBoard() {
|
||||
populateMobileControls(items);
|
||||
}
|
||||
|
||||
|
||||
loadBoard();
|
||||
|
||||
@@ -1,138 +1,16 @@
|
||||
let lunrIndex;
|
||||
let documents = [];
|
||||
|
||||
/* ------------------------------
|
||||
JSON → documents
|
||||
-------------------------------- */
|
||||
function extractDocuments(node, currentPath = "") {
|
||||
if (node.type === "folder" && node.children) {
|
||||
const nextPath = currentPath
|
||||
? `${currentPath}/${node.name}`
|
||||
: node.name;
|
||||
|
||||
node.children.forEach(child => {
|
||||
extractDocuments(child, nextPath);
|
||||
});
|
||||
}
|
||||
|
||||
if (node.type === "file") {
|
||||
const filePath = currentPath
|
||||
? `${currentPath}/${node.name}`
|
||||
: node.name;
|
||||
|
||||
documents.push({
|
||||
id: documents.length.toString(),
|
||||
title: node.name,
|
||||
content: node.content || "",
|
||||
path: "/" + filePath.replace(/^output\//, "")
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------
|
||||
Lunr index
|
||||
-------------------------------- */
|
||||
function buildIndex() {
|
||||
lunrIndex = lunr(function () {
|
||||
this.ref("id");
|
||||
this.field("title", { boost: 10 });
|
||||
this.field("content");
|
||||
|
||||
documents.forEach(doc => this.add(doc));
|
||||
});
|
||||
|
||||
console.log("Lunr index built with", documents.length, "documents");
|
||||
}
|
||||
|
||||
async function initSearch() {
|
||||
const response = await fetch("test.json");
|
||||
const json = await response.json();
|
||||
|
||||
extractDocuments(json);
|
||||
buildIndex();
|
||||
}
|
||||
|
||||
initSearch();
|
||||
|
||||
/* ------------------------------
|
||||
Fuzzy search
|
||||
-------------------------------- */
|
||||
function buildFuzzyQuery(query) {
|
||||
return query
|
||||
.split(/\s+/)
|
||||
.map(term => `${term}~1`)
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function search(query) {
|
||||
if (!lunrIndex) return [];
|
||||
|
||||
const results = lunrIndex.search(buildFuzzyQuery(query));
|
||||
|
||||
return results.map(r => {
|
||||
const doc = documents.find(d => d.id === r.ref);
|
||||
return {
|
||||
title: doc.title,
|
||||
path: doc.path,
|
||||
score: r.score,
|
||||
preview: doc.content.slice(0, 200) + "…"
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/* ------------------------------
|
||||
DOM elements
|
||||
-------------------------------- */
|
||||
let activeIndex = -1;
|
||||
const searchInput = document.getElementById("search-input");
|
||||
const searchBtn = document.getElementById("search-btn");
|
||||
|
||||
/* ------------------------------
|
||||
Live dropdown results
|
||||
-------------------------------- */
|
||||
const searchBtn = document.getElementById("search-btn");
|
||||
const resultsBox = document.createElement("div");
|
||||
const searchForm = searchInput.closest("form");
|
||||
const modal = document.createElement("div");
|
||||
const modalResults = modal.querySelector("#search-modal-results");
|
||||
|
||||
resultsBox.id = "search-results";
|
||||
document.body.appendChild(resultsBox);
|
||||
|
||||
function showResults(results) {
|
||||
resultsBox.innerHTML = "";
|
||||
|
||||
if (results.length === 0) {
|
||||
resultsBox.style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = searchInput.getBoundingClientRect();
|
||||
resultsBox.style.top = `${rect.bottom + window.scrollY}px`;
|
||||
resultsBox.style.left = `${rect.left + window.scrollX}px`;
|
||||
resultsBox.style.width = `${rect.width}px`;
|
||||
|
||||
results.slice(0, 5).forEach(result => {
|
||||
const item = document.createElement("div");
|
||||
item.className = "search-result";
|
||||
item.innerHTML = `
|
||||
<div class="search-result-title">${result.title}</div>
|
||||
<div class="search-result-preview">${result.preview}</div>
|
||||
`;
|
||||
item.onclick = () => window.location.href = result.path;
|
||||
resultsBox.appendChild(item);
|
||||
});
|
||||
|
||||
resultsBox.style.display = "block";
|
||||
}
|
||||
|
||||
searchInput.addEventListener("input", () => {
|
||||
const q = searchInput.value.trim();
|
||||
if (!q) {
|
||||
resultsBox.style.display = "none";
|
||||
return;
|
||||
}
|
||||
showResults(search(q));
|
||||
});
|
||||
|
||||
/* ------------------------------
|
||||
Modal popup
|
||||
-------------------------------- */
|
||||
const modal = document.createElement("div");
|
||||
modal.id = "search-modal";
|
||||
modal.innerHTML = `
|
||||
<div class="search-modal-backdrop"></div>
|
||||
@@ -141,70 +19,311 @@ modal.innerHTML = `
|
||||
<div id="search-modal-results"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
const modalResults = modal.querySelector("#search-modal-results");
|
||||
function extractDocuments(node, currentPath = "") {
|
||||
if (node.type === "folder" && node.children) {
|
||||
const nextPath = currentPath ? `${currentPath}/${node.name}` : node.name;
|
||||
|
||||
node.children.forEach((child) => {
|
||||
extractDocuments(child, nextPath);
|
||||
});
|
||||
}
|
||||
|
||||
if (node.type === "file") {
|
||||
documents.push({
|
||||
id: documents.length.toString(),
|
||||
title: node.name,
|
||||
content: node.content || "",
|
||||
path: node.url,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function buildIndex() {
|
||||
lunrIndex = lunr(function () {
|
||||
this.ref("id");
|
||||
this.field("title", { boost: 10 });
|
||||
this.field("url");
|
||||
this.field("content");
|
||||
|
||||
documents.forEach((doc) => this.add(doc));
|
||||
});
|
||||
}
|
||||
|
||||
async function initSearch() {
|
||||
const response = await fetch("/test.json");
|
||||
const json = await response.json();
|
||||
|
||||
extractDocuments(json);
|
||||
buildIndex();
|
||||
}
|
||||
|
||||
initSearch();
|
||||
|
||||
function buildExactQuery(query) {
|
||||
return query
|
||||
.toLowerCase()
|
||||
.split(/\s+/)
|
||||
.filter((term) => term.length > 1)
|
||||
.map((term) => `${term}*`)
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function buildSnippet(content, terms, radius = 80) {
|
||||
if (!content || terms.length === 0) return "";
|
||||
|
||||
const lower = content.toLowerCase();
|
||||
|
||||
let index = -1;
|
||||
let matchedTerm = "";
|
||||
|
||||
for (const term of terms) {
|
||||
const i = lower.indexOf(term);
|
||||
if (i !== -1 && (index === -1 || i < index)) {
|
||||
index = i;
|
||||
matchedTerm = term;
|
||||
}
|
||||
}
|
||||
|
||||
if (index === -1) {
|
||||
return content.slice(0, radius * 2) + "…";
|
||||
}
|
||||
|
||||
const start = Math.max(0, index - radius);
|
||||
const end = Math.min(content.length, index + matchedTerm.length + radius);
|
||||
|
||||
const prefix = start > 0 ? "…" : "";
|
||||
const suffix = end < content.length ? "…" : "";
|
||||
|
||||
return prefix + content.slice(start, end) + suffix;
|
||||
}
|
||||
|
||||
function getSearchTerms(query) {
|
||||
return query
|
||||
.toLowerCase()
|
||||
.split(/\s+/)
|
||||
.filter((t) => t.length > 2);
|
||||
}
|
||||
|
||||
function highlight(text, terms) {
|
||||
if (!text || terms.length === 0) return text;
|
||||
|
||||
const escaped = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
|
||||
|
||||
const regex = new RegExp(`(${escaped.join("|")})`, "gi");
|
||||
|
||||
return text.replace(regex, "<mark>$1</mark>");
|
||||
}
|
||||
|
||||
function search(query) {
|
||||
if (!lunrIndex) return [];
|
||||
|
||||
const q = buildExactQuery(query);
|
||||
if (!q) return [];
|
||||
|
||||
const terms = getSearchTerms(query);
|
||||
const results = lunrIndex.search(q);
|
||||
|
||||
return results
|
||||
.map((r) => {
|
||||
const doc = documents.find((d) => d.id === r.ref);
|
||||
if (!doc) return null;
|
||||
|
||||
const snippet = buildSnippet(doc.content, terms);
|
||||
|
||||
return {
|
||||
title: highlight(doc.title, terms),
|
||||
path: doc.path,
|
||||
score: r.score,
|
||||
preview: highlight(snippet, terms),
|
||||
};
|
||||
})
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
function showResults(results) {
|
||||
resultsBox.innerHTML = "";
|
||||
activeIndex = -1;
|
||||
|
||||
if (results.length === 0) {
|
||||
resultsBox.style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = searchInput.getBoundingClientRect();
|
||||
resultsBox.style.top = `${rect.bottom + window.scrollY}px`;
|
||||
resultsBox.style.left = `${rect.left + window.scrollX}px`;
|
||||
resultsBox.style.width = `${rect.width}px`;
|
||||
|
||||
results.forEach((result, i) => {
|
||||
const item = document.createElement("div");
|
||||
item.className = "search-result";
|
||||
item.dataset.index = i;
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="search-result-title">${result.title}</div>
|
||||
<div class="search-result-preview">${result.preview}</div>
|
||||
`;
|
||||
|
||||
item.onclick = () => {
|
||||
window.location.href = result.path;
|
||||
};
|
||||
|
||||
resultsBox.appendChild(item);
|
||||
});
|
||||
|
||||
resultsBox.style.display = "block";
|
||||
}
|
||||
|
||||
function updateActiveResult() {
|
||||
const items = resultsBox.querySelectorAll(".search-result");
|
||||
|
||||
items.forEach((item) => item.classList.remove("active"));
|
||||
|
||||
if (activeIndex >= 0 && activeIndex < items.length) {
|
||||
const activeItem = items[activeIndex];
|
||||
|
||||
activeItem.classList.add("active");
|
||||
|
||||
activeItem.scrollIntoView({
|
||||
block: "nearest",
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function openSearchModal(results) {
|
||||
modalResults.innerHTML = "";
|
||||
const modal = document.getElementById("search-modal");
|
||||
const modalResults = modal?.querySelector("#search-modal-results");
|
||||
modal.tabIndex = -1;
|
||||
|
||||
if (results.length === 0) {
|
||||
modalResults.innerHTML = "<p>No results found.</p>";
|
||||
}
|
||||
if (!modal || !modalResults) {
|
||||
console.warn("Search modal not available");
|
||||
return;
|
||||
}
|
||||
|
||||
results.forEach(result => {
|
||||
const item = document.createElement("div");
|
||||
item.className = "search-modal-result";
|
||||
item.innerHTML = `
|
||||
<div class="search-modal-title">${result.title}</div>
|
||||
<div class="search-modal-preview">${result.preview}</div>
|
||||
`;
|
||||
item.onclick = () => window.location.href = result.path;
|
||||
modalResults.appendChild(item);
|
||||
});
|
||||
modalResults.innerHTML = "";
|
||||
|
||||
modal.style.display = "block";
|
||||
if (results.length === 0) {
|
||||
modalResults.innerHTML = "<p>No results found.</p>";
|
||||
}
|
||||
|
||||
results.forEach((result) => {
|
||||
const item = document.createElement("div");
|
||||
item.className = "search-modal-result";
|
||||
item.innerHTML = `
|
||||
<div class="search-modal-title">${result.title}</div>
|
||||
<div class="search-modal-preview">${result.preview}</div>
|
||||
`;
|
||||
item.onclick = () => (window.location.href = result.path);
|
||||
modalResults.appendChild(item);
|
||||
});
|
||||
|
||||
modal.style.display = "block";
|
||||
modal.focus();
|
||||
}
|
||||
|
||||
/* ------------------------------
|
||||
Submit search (Enter / 🔍)
|
||||
-------------------------------- */
|
||||
function submitSearch() {
|
||||
const q = searchInput.value.trim();
|
||||
if (!q) return;
|
||||
openSearchModal(search(q));
|
||||
const q = searchInput.value.trim();
|
||||
if (!q) return;
|
||||
openSearchModal(search(q));
|
||||
}
|
||||
|
||||
searchInput.addEventListener("keydown", e => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
/* EVENTS */
|
||||
searchInput.addEventListener("keydown", (e) => {
|
||||
const items = resultsBox.querySelectorAll(".search-result");
|
||||
if (!items.length) return;
|
||||
|
||||
switch (e.key) {
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
if (activeIndex < items.length - 1) {
|
||||
activeIndex++;
|
||||
updateActiveResult();
|
||||
}
|
||||
break;
|
||||
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
if (activeIndex > 0) {
|
||||
activeIndex--;
|
||||
updateActiveResult();
|
||||
}
|
||||
break;
|
||||
|
||||
case "Enter":
|
||||
e.preventDefault();
|
||||
if (activeIndex >= 0 && activeIndex < items.length) {
|
||||
items[activeIndex].click();
|
||||
} else {
|
||||
submitSearch();
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case "Escape":
|
||||
resultsBox.style.display = "none";
|
||||
activeIndex = -1;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
if (
|
||||
!resultsBox.contains(e.target) &&
|
||||
e.target !== searchInput &&
|
||||
e.target !== searchBtn
|
||||
) {
|
||||
resultsBox.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target.classList.contains("search-modal-backdrop")) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
modal.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
modal.style.display = "none";
|
||||
searchInput.focus();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("pageshow", () => {
|
||||
searchInput.value = "";
|
||||
resultsBox.style.display = "none";
|
||||
});
|
||||
window.addEventListener("beforeunload", () => {
|
||||
searchInput.value = "";
|
||||
});
|
||||
|
||||
if (searchForm) {
|
||||
searchForm.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
submitSearch();
|
||||
});
|
||||
}
|
||||
|
||||
searchBtn.addEventListener("click", submitSearch);
|
||||
|
||||
/* ------------------------------
|
||||
Close behaviours
|
||||
-------------------------------- */
|
||||
document.addEventListener("click", e => {
|
||||
if (
|
||||
!resultsBox.contains(e.target) &&
|
||||
e.target !== searchInput &&
|
||||
e.target !== searchBtn
|
||||
) {
|
||||
resultsBox.style.display = "none";
|
||||
}
|
||||
searchInput.addEventListener("input", () => {
|
||||
const q = searchInput.value.trim();
|
||||
|
||||
if (q.length < 3) {
|
||||
resultsBox.style.display = "none";
|
||||
return;
|
||||
}
|
||||
showResults(search(q));
|
||||
});
|
||||
|
||||
modal.addEventListener("click", e => {
|
||||
if (e.target.classList.contains("search-modal-backdrop")) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", e => {
|
||||
if (e.key === "Escape") {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
/* OLD FUNCTIONS */
|
||||
function buildFuzzyQuery(query) {
|
||||
return query
|
||||
.toLowerCase()
|
||||
.split(/\s+/)
|
||||
.filter((term) => term.length > 2)
|
||||
.map((term) => `${term}~1`)
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
@@ -345,3 +345,21 @@ nav {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
mark {
|
||||
background: rgba(255, 230, 150, 0.8);
|
||||
color: inherit;
|
||||
padding: 0 0.15em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.search-result {
|
||||
cursor: pointer;
|
||||
padding: 0.5em 0.75em;
|
||||
}
|
||||
|
||||
.search-result.active {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.search-result.active mark {
|
||||
background: rgba(255, 230, 150, 0.9);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user