diff --git a/index.html b/index.html index 1128287..ec225c6 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,6 @@ -

Maid Notes

diff --git a/src/main.ts b/src/main.ts index aca2cb0..f970fb6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,6 +9,7 @@ let createNoteTagEl: HTMLInputElement | null; let searchbarEl: HTMLInputElement | null; let noteSidebarContainerEl: HTMLDivElement | null; +let searchbarContents = ""; let noteArray: Note[] = [] @@ -21,8 +22,14 @@ enum EditorState { EDITING } +enum SearchState { + EMPTY, + RESULTS +} + /** Editor always initializes in the NEW state */ -let editorState = EditorState.NEW +let editorState = EditorState.NEW; +let searchState = SearchState.EMPTY; /** * Saves the note. @@ -59,22 +66,28 @@ async function saveNote() { } /** - * Retrieve Notes from DB and fill the sidebar with them + * Retrieve Notes from DB and fill the sidebar with them. + * + * If there's something in the searchbar, do not clear that. */ async function showNotes() { if (notesMsgEl) { - const array: Array = await retrieveNotes(); + if (searchState == SearchState.EMPTY) { + const array: Array = await retrieveNotes(); - noteArray = array.map((jsonObj) => ({ - id: jsonObj.id, - content: jsonObj.content, - date: jsonObj.date, - tag: jsonObj.tag - })); + noteArray = array.map((jsonObj) => ({ + id: jsonObj.id, + content: jsonObj.content, + date: jsonObj.date, + tag: jsonObj.tag + })); - console.log(noteArray[0]) + console.log(noteArray[0]) - fillNoteSidebar(noteArray); + fillNoteSidebar(noteArray); + } else { + searchNote(searchbarContents); + } } } @@ -136,6 +149,14 @@ window.addEventListener("DOMContentLoaded", () => { const target = event.target as HTMLInputElement; const input = target.value; + if (target.value == "") { + searchState = SearchState.EMPTY; + } else { + searchState = SearchState.RESULTS; + } + + searchbarContents = input; + searchNote(input); }) diff --git a/src/styles.css b/src/styles.css index c12a66e..ceed057 100644 --- a/src/styles.css +++ b/src/styles.css @@ -13,6 +13,8 @@ -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; + margin-top: 0.5em; + overflow-y: hidden; }