open note by id modal menu

index.html

@@ -57,6 +57,13 @@
 
     </div>
 
+    <div id="id-modal-bg"></div>
+    <div id="id-modal-container">
+      <div class="openbyid-bar-container">
+        <input type="text" name="id-search" id="id-search" placeholder="Note ID...">
+      </div>
+    </div>
+
 
 
 

libsnotes/src/lib.rs

@@ -142,8 +142,8 @@ pub fn search_notes(query: &str) -> Result<String, String> {
     let connection = Connection::open(home).map_err(|e| format!("Database Error: {}", e))?;
 
     let query = format!(
-        "SELECT * FROM notes WHERE content LIKE '%{}%' OR tag LIKE '%{}%'",
+        "SELECT * FROM notes WHERE nid LIKE '%{}%' OR content LIKE '%{}%' OR tag LIKE '%{}%'",
-        query, query
+        query, query, query
     );
 
     let mut prepare = connection
@@ -187,7 +187,47 @@ pub fn get_latest_note() -> Result<String, String> {
     let connection = Connection::open(home).map_err(|e| format!("Database Error: {}", e))?;
 
     let query = "SELECT * FROM notes WHERE ROWID IN (SELECT max(ROWID) FROM notes);
-    ".to_string();
+    "
+    .to_string();
+    let mut prepare = connection
+        .prepare(&query)
+        .map_err(|e| format!("Query Error: {}", e))?;
+
+    let notes = prepare
+        .query_map([], |row| {
+            Ok(Note {
+                id: row.get(0)?,
+                content: row.get(1)?,
+                date: row.get(2)?,
+                tag: row.get(3)?,
+            })
+        })
+        .map_err(|e| format!("Mapping Error: {}", e))?;
+
+    let mut json_array = Vec::new();
+
+    for note in notes {
+        let unwrapped = note.map_err(|e| format!("Note Error: {}", e))?;
+        let note_json = json!({
+            "id": unwrapped.id,
+            "date": unwrapped.date,
+            "content": unwrapped.content,
+            "tag": unwrapped.tag
+        });
+        json_array.push(note_json);
+    }
+
+    let json_string =
+        serde_json::to_string(&json_array).map_err(|e| format!("JSON Error: {}", e))?;
+    println!("{}", json_string);
+    Ok(json_string)
+}
+
+pub fn get_note_by_id(id: u32) -> Result<String, String> {
+    let home = home_dir().unwrap().join(".snotes.db");
+    let connection = Connection::open(home).map_err(|e| format!("Database Error: {}", e))?;
+
+    let query = format!("SELECT * FROM notes WHERE nid IS {};", id.to_string());
     let mut prepare = connection
         .prepare(&query)
         .map_err(|e| format!("Query Error: {}", e))?;
@@ -231,4 +271,12 @@ mod tests {
         let result = init_db();
         assert_eq!(result, Ok(()));
     }
+
+    #[test]
+    #[ignore = "debug thing"]
+    fn test_id_10() {
+        let result = get_note_by_id(10).unwrap();
+        println!("{}", result);
+        assert!(true)
+    }
 }

src-tauri/src/main.rs

@@ -22,6 +22,12 @@ fn get_latest_note() -> String {
     note.to_string()
 }
 
+#[tauri::command]
+fn get_note_by_id(id: u32) -> String {
+    let result = libsnotes::get_note_by_id(id).unwrap();
+    result
+}
+
 #[tauri::command]
 fn search_notes(query: &str) -> String {
     let results = libsnotes::search_notes(query).unwrap();
@@ -50,6 +56,7 @@ fn main() {
             greet,
             get_notes_list,
             get_latest_note,
+            get_note_by_id,
             search_notes,
             create_note,
             delete_specific_note,

src/main.ts

@@ -18,6 +18,7 @@ let noteArray: Note[] = []
 let currentNoteId: number | null = null;
 /** reverse the order of note by id in the sidebar */
 let reversed = true;
+let idModalActive = false;
 
 let typingTimer: number | null = null;
 const AUTOSAVE_DELAY = 5000;
@@ -390,7 +391,47 @@ function handleKeyboardShortcuts(event: KeyboardEvent) {
       console.error("failed to focus on searchbar");
     }
   }
-  // open by id
+  // open by id: open modal
+  if (event.ctrlKey && event.key === 't') {
+    event.preventDefault();
+    const modalBg = document.getElementById("id-modal-bg");
+    const modal = document.getElementById("id-modal-container");
+    const idSearchBar = document.getElementById("id-search")
+    if (modalBg && modal && idSearchBar) {
+      modalBg.style.display = "block";
+      modal.style.display = "block";
+      idSearchBar.focus();
+      (idSearchBar as HTMLInputElement).value = "";
+      idModalActive = true;
+
+      modalBg.addEventListener("click", () => {
+        modal.style.display = "none";
+        modalBg.style.display = "none";
+        idModalActive = false;
+      })
+
+      idSearchBar.addEventListener("keydown", async (event: KeyboardEvent) => {
+        if (event.key === "Enter" && idModalActive) {
+          let value = (idSearchBar as HTMLInputElement).value;
+          console.log("value: " + value);
+          if (await openNoteById(value)) {
+            modal.style.display = "none";
+            modalBg.style.display = "none";
+            idModalActive = false;
+          } else {
+            (idSearchBar as HTMLInputElement).value = "";
+            (idSearchBar as HTMLInputElement).placeholder = "no Note found for ID";
+          }
+        }
+        if (event.key === "Escape" && idModalActive) {
+          modal.style.display = "none";
+          modalBg.style.display = "none";
+          idModalActive = false;
+        }
+      });
+
+    } else { console.error("failed to get modal"); }
+  }
   // quick switch note 1-9
 }
 
@@ -446,3 +487,30 @@ function toggleReverse(val: boolean) {
   reversed = val;
   showNotes();
 }
+
+async function openNoteById(value: string): Promise<boolean> {
+  const id: Number | null = parseInt(value);
+  if (id) {
+    const noteString = await invoke("get_note_by_id", {
+      id: id
+    });
+    console.log("id called: " + id)
+    console.log("note string: " + noteString)
+    const noteJson = JSON.parse(noteString as string);
+
+    if (noteJson.length == 0) {
+      return false;
+    }
+
+    const foundNote: Note = {
+      id: noteJson[0].id,
+      content: noteJson[0].content,
+      date: noteJson[0].date,
+      tag: noteJson[0].tag
+    }
+
+    openNote(foundNote);
+    return true;
+  }
+  return false;
+}

src/styles.css

@@ -228,6 +228,36 @@ button {
 
 #note-searchbar::placeholder {}
 
+/* Open by ID Modal */
+
+
+#id-modal-bg {
+  display: none;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.534);
+  filter: grayscale();
+  /* Semi-transparent black */
+  z-index: 1;
+  /* Ensure it's behind the modal */
+}
+
+
+#id-modal-container {
+  display: none;
+
+  position: fixed;
+
+  margin-top: 20%;
+  margin-left: 50%;
+
+  z-index: 3;
+}
+
 /* MISC */
 
 /* Fancier Scrollbar */