fix: allow users to set an existing notebook as the templates notebook

Author: nishantwrp

src/index.ts

@@ -33,8 +33,8 @@ joplin.plugins.register({
 
 
         // Global variables
-        const templatesFolderId = await getTemplatesFolderId();
         const dialogViewHandle = await joplin.views.dialogs.create("dialog");
+        let templatesFolderId = await getTemplatesFolderId(dialogViewHandle);
 
         const userLocale = await joplin.settings.globalValue("locale");
         const userDateFormat = await joplin.settings.globalValue("dateFormat");
@@ -145,6 +145,14 @@ joplin.plugins.register({
             }
         });
 
+        await joplin.commands.register({
+            name: "changeTemplatesFolder",
+            label: "Change templates notebook",
+            execute: async () => {
+                templatesFolderId = await getTemplatesFolderId(dialogViewHandle, true);
+            }
+        });
+
 
         // Create templates menu
         await joplin.views.menus.create("templates", "Templates", [
@@ -179,6 +187,9 @@ joplin.plugins.register({
                         accelerator: "Alt+Shift+T"
                     }
                 ]
+            },
+            {
+                commandName: "changeTemplatesFolder"
             }
         ]);
     },

src/utils/folders.ts

@@ -1,5 +1,16 @@
 import joplin from "api";
 
+export interface Note {
+    id: string;
+    title: string;
+    body: string;
+}
+
+export interface Folder {
+    id: string;
+    title: string;
+}
+
 export const doesFolderExist = async (folderId: string): Promise<boolean> => {
     try {
         await joplin.data.get([ "folders", folderId ], { fields: ["title"] });
@@ -9,12 +20,6 @@ export const doesFolderExist = async (folderId: string): Promise<boolean> => {
     }
 };
 
-export interface Note {
-    id: string;
-    title: string;
-    body: string;
-}
-
 export const getAllNotesInFolder = async (folderId: string): Promise<Note[]> => {
     let pageNum = 1;
     let response;
@@ -28,3 +33,17 @@ export const getAllNotesInFolder = async (folderId: string): Promise<Note[]> =>
 
     return notes;
 }
+
+export const getAllFolders = async (): Promise<Folder[]> => {
+    let pageNum = 1;
+    let response;
+    let folders = [];
+
+    do {
+        response = await joplin.data.get(["folders"], { fields: ["id", "title"], page: pageNum });
+        folders = folders.concat(response.items);
+        pageNum++;
+    } while (response.has_more);
+
+    return folders;
+}

src/utils/templates.ts

@@ -1,16 +1,36 @@
 import joplin from "api";
 import { doesFolderExist, getAllNotesInFolder, Note } from "./folders";
 import { getAllNotesWithTag, getTagWithTitle } from "./tags";
+import { setTemplatesFolderView } from "../views/templatesFolder";
 
 type NoteProperty = "body" | "id" | "title";
+const WELCOME_MESSAGE = (
+    `Thanks for downloading the templates plugin. This plugin allows you to create and use templates in the Joplin desktop application. Please read the following instructions very carefully to get started.
 
-export const getTemplatesFolderId = async (): Promise<string> => {
+    1. You can see the menu for this plugin under the tools category in the menu bar. To read the complete plugin documentation you can click on the help option in the menu itself.
+    2. To use this plugin it is mandatory to have a templates notebook i.e. a notebook dedicated to storing templates. After you close this popup you'll be presented with another dialog to select or create a new templates notebook.
+    3. If you used the native templates feature, your templates will be automatically loaded by this plugin into your templates notebook.`
+);
+
+export const getTemplatesFolderId = async (dialogViewHandle: string, changeFolder = false): Promise<string> => {
     const templatesFolderId = await joplin.settings.value("templatesFolderId");
 
-    if (templatesFolderId == null || !(await doesFolderExist(templatesFolderId))) {
-        const folder = await joplin.data.post(["folders"], null, { title: "Templates" });
-        await joplin.settings.setValue("templatesFolderId", folder.id);
-        return folder.id;
+    if (templatesFolderId == null || !(await doesFolderExist(templatesFolderId)) || changeFolder) {
+        if (!changeFolder) await joplin.views.dialogs.showMessageBox(WELCOME_MESSAGE);
+
+        await setTemplatesFolderView(dialogViewHandle);
+        const dialogResponse = await joplin.views.dialogs.open(dialogViewHandle);
+
+        const newTemplatesFolderId = dialogResponse.formData.folders.folder;
+
+        if (newTemplatesFolderId === "new") {
+            const folder = await joplin.data.post(["folders"], null, { title: "Templates" });
+            await joplin.settings.setValue("templatesFolderId", folder.id);
+            return folder.id;
+        }
+
+        await joplin.settings.setValue("templatesFolderId", newTemplatesFolderId);
+        return newTemplatesFolderId;
     }
 
     return templatesFolderId;

src/views/templatesFolder.ts

@@ -0,0 +1,34 @@
+import joplin from "api";
+import { encode } from "html-entities";
+import { getAllFolders } from "../utils/folders";
+
+export const setTemplatesFolderView = async (viewHandle: string): Promise<void> => {
+    await joplin.views.dialogs.addScript(viewHandle, "./views/webview.css");
+
+    const allFolders = await getAllFolders();
+    const folderOptionsHtml = allFolders.map(folder => {
+        return `<option value="${encode(folder.id)}">${encode(folder.title)}</option>`;
+    }).join("");
+
+    await joplin.views.dialogs.setHtml(
+        viewHandle,
+        `
+        <h2> Templates notebook </h2>
+        <form name="folders">
+            <div>
+                <div class="formLabel">
+                    Choose an existing notebook or create a new one
+                </div>
+                <div>
+                    <select name="folder">
+                        <option value="new">Create a new notebook</option>
+                        ${folderOptionsHtml}
+                    </select>
+                </div>
+            </div>
+        </form>
+        `
+    );
+
+    await joplin.views.dialogs.setButtons(viewHandle, [{ id: "ok" }]);
+}

src/views/webview.css

@@ -16,6 +16,10 @@ body {
     padding: 2px;
 }
 
+.formLabel {
+    margin-bottom: 5px;
+}
+
 input, select {
     height: 25px;
     font-size: 16px;