Features - Implemented "AddNote()" ; Implemented behavior for the submit button in AddNoteModal.ts

src/AnkiConnect.ts

@@ -259,4 +259,39 @@ export async function CreateDeck(deckName: string): Promise<boolean> {
         );
         return false;
     }
+}
+
+/**
+ * Adds a new note to Anki in the specified deck and model.
+ *
+ * @description
+ * This function attempts to create a new note in Anki using the provided deck name, model name, and field data.
+ * If the operation is successful, a notification is displayed to the user. Otherwise, an error message is shown.
+ *
+ * @param {string} deckName - The name of the Anki deck where the note will be added.
+ * @param {string} modelName - The name of the Anki model to use for the note.
+ * @param {Object} fields - An object containing the fields of the note.
+ * @returns {Promise<boolean>} A promise that resolves to `true` if the note was successfully added, otherwise `false`.
+ */
+export async function AddNote(deckName: string, modelName: string, fields: Object): Promise<boolean> {
+    try {
+        // Attempt to create the note in Anki.
+        await Invoke("addNote", {
+            "note": {
+                "deckName": deckName,
+                "modelName": modelName,
+                "fields": fields
+            }
+        });
+
+        // Notify the user of successful note creation.
+        new Notice("Note has been added.");
+        return true;
+    } catch (error) {
+        new Notice(
+            "Failed to add note." +
+            "\n" + error +
+            "\n" + "Make sure that Anki is running."
+        );
+    }
 }

src/modals/AddNoteModal.ts

@@ -4,6 +4,9 @@ import {
     Notice
 } from "obsidian";
 import AnkiIntegration from "../main";
+import {
+    AddNote
+} from "../AnkiConnect";
 import {
     AddButton,
     AddContainer,
@@ -17,8 +20,11 @@ import {
 
 /**
  * A modal dialog for creating a new Anki note.
+ *
+ * @description
  * It provides options to select a deck and a model, and dynamically generates input fields based on the selected model's configuration.
  * It allows users to enter information and submit the data to create a new note.
+ *
  * @extends Modal
  */
 export class AddNoteModal extends Modal {
@@ -128,38 +134,75 @@ export class AddNoteModal extends Modal {
             AddFieldGroups(inputContainer, selectedModel["fields"]);
         });
 
-        // Create the submit button.
-        const submitButtonEl = AddButton(contentEl, "Create note", "submit");
+        /**
+         * @type {HTMLButtonElement} submitButtonEl
+         * @description Submit button for the user to add the note.
+         */
+        const submitButtonEl: HTMLButtonElement = AddButton(contentEl, "Create note", "submit");
 
         /**
          * Event listener triggered when the submit button is clicked.
-         * Validates the form and ensures the required fields are filled before proceeding.
          * @async
          * @param {MouseEvent} event - The click event triggered by the submit button.
+         *
+         * @description
+         * - Check if the value of `deckName` is default, if yes, stop its execution.
+         * - Check if the value of `modelName` is default, if yes, stop its execution.
+         * - Retrieve each active input in the `inputContainer`.
+         *  - Retrieve its placeholder and its value.
+         *  - Push them as a `key => value` line of `modelName`.
+         * - Execute `AddNote()`.
          */
         submitButtonEl.addEventListener("click", async () => {
-            if (deckSelector.getValue() === "default") {
+            /**
+             * @type {string} deckName
+             * @definition The name of the deck selected for the note.
+             */
+            const deckName: string = deckSelector.getValue();
+            if (deckName === "default") {
                 new Notice("Please select a deck.");
                 return;
             }
 
-            if (modelSelector.getValue() === "default") {
+            /**
+             * @type {string} modelName
+             * @definition The name of the model selected for the note.
+             */
+            const modelName: string = modelSelector.getValue();
+            if (modelName === "default") {
                 new Notice("Please select a model.");
                 return;
             }
 
             /**
-             * @type {NodeListOf<HTMLInputElement>} inputFields
-             * @description A list of input fields within the input container.
+             * @type {Object} modelFields
+             * @definition An Object containing the fields and their values stored in the input.
              */
-            const inputFields: NodeListOf<HTMLInputElement> = inputContainer.querySelectorAll("input");
+            const modelFields: Object = {};
+            /**
+             * @type {NodeListOf<HTMLInputElement>} inputs
+             * @description A list of all the inputs generated previously.
+             */
+            const inputs: NodeListOf<HTMLInputElement> = inputContainer.querySelectorAll("input");
 
-            // Ensure at least the first two fields are filled.
-            for (let i = 0; i < 2; i++) {
-                if (inputFields[i].value === "") {
-                    new Notice("Please fill the two first fields, at least.");
-                    return;
-                }
+            for (let i = 0; i < inputs.length; i++) {
+                modelFields[inputs[i].placeholder] = inputs[i].value;
+            }
+
+            /**
+             * @type {boolean} result
+             * @definition Has the note been successfully created ?
+             */
+            const result: boolean = await AddNote(
+                deckName,
+                modelName,
+                modelFields
+            );
+
+            if (result === false) {
+                return;
+            } else {
+                this.close();
             }
         });
     }

src/modals/CreateDeckModal.ts

@@ -13,8 +13,11 @@ import {
 
 /**
  * A modal dialog for creating a new deck.
+ *
+ * @description
  * This modal allows the user to enter a deck name and submit it to create a new deck.
  * Upon successful creation, the modal closes; if creation fails, it remains open.
+ *
  * @extends Modal
  */
 export class CreateDeckModal extends Modal {
@@ -46,10 +49,13 @@ export class CreateDeckModal extends Modal {
          * @type {HTMLInputElement} inputEl
          * @description Input field for the user to enter the name of the new deck.
          */
-        const inputEl = AddInput(contentEl, "text", "Enter the name of your new deck.");
+        const inputEl: HTMLInputElement = AddInput(contentEl, "text", "Enter the name of your new deck.");
 
-        // Adding the submitting button
-        const submitButtonEl = AddButton(contentEl, "Create a new deck", "submit");
+        /**
+         * @type {HTMLButtonElement} submitButtonEl
+         * @description Submit button for the user to create the deck.
+         */
+        const submitButtonEl: HTMLButtonElement = AddButton(contentEl, "Create a new deck", "submit");
 
         /**
          * Event listener triggered when the submit button is clicked.
@@ -59,8 +65,17 @@ export class CreateDeckModal extends Modal {
          * @param {MouseEvent} event - The click event triggered by the submit button.
          */
         submitButtonEl.addEventListener("click", async () => {
-            const deckName = inputEl.value;
-            const result = await CreateDeck(deckName);
+            /**
+             * @type {string} deckName
+             * @definition The name of the deck selected for the note.
+             */
+            const deckName: string = inputEl.value;
+
+            /**
+             * @type {boolean} result
+             * @definition Has the deck been successfully created ?
+             */
+            const result: boolean = await CreateDeck(deckName);
 
             if (result === false) {
                 // If the deck hasn't been created, we do not close the modal.