diff --git a/priv/static/index.html b/priv/static/index.html index c5f8ba2..9549ee0 100644 --- a/priv/static/index.html +++ b/priv/static/index.html @@ -63,6 +63,9 @@
Reset
+
+ +
diff --git a/priv/static/js/jenot.js b/priv/static/js/jenot.js index be51c06..86c06fe 100644 --- a/priv/static/js/jenot.js +++ b/priv/static/js/jenot.js @@ -92,6 +92,36 @@ if (notificationsAvailable()) { }); } +// Search + +let filter = ""; +const search = document.querySelector("#search"); + +search.addEventListener("input", (e) => { + filter = e.target.value.trim().toLowerCase(); + Notes.saveStorage(); +}); + +function filterNotes(notes) { + if (filter !== "") { + return notes.filter( + (n) => + n.title.toLowerCase().indexOf(filter) > -1 || + textOf(n.content).toLowerCase().indexOf(filter) > -1, + ); + } + + return notes; +} + +function textOf(content) { + if (typeof content === "object") { + return content.map((n) => n.content).join(""); + } else { + return content; + } +} + // There are two note-form component instances - one for // composing new notes and another one for editing existing notes. @@ -155,7 +185,8 @@ function notesEqual(note1, note2) { } async function render() { - const notes = await Notes.all(); + const allNotes = await Notes.all(); + const notes = filterNotes(allNotes); const notesContainer = document.querySelector("#notes"); let previousId = null; diff --git a/priv/static/style.css b/priv/static/style.css index 0f4a67a..5f5e3de 100644 --- a/priv/static/style.css +++ b/priv/static/style.css @@ -311,6 +311,11 @@ button { gap: var(--gap-1); } +#search { + width: 10em; + min-width: 0; +} + #notes { display: flex; flex-direction: column;