#212 Hook up the tag insertion dialog to tag validation

src/ts/content/dialogs/insertTags.ts

@@ -1,21 +1,24 @@
 import {createModal} from "../../common/ui/modal";
 import {UIColour} from "../../common/ui/colour";
 
-const insertTags = async (tags: string[]): Promise<boolean> => {
+const toInsertionButton = (remainingTags: string[], resolve: (value) => void) => (tag: string) => ({
+	kind: "button" as const,
+	colour: UIColour.BLUE,
+	text: tag,
+	onClick: async () => resolve(insertTag(tag, remainingTags).then(insertTagsDialogs)),
+});
+
+const insertTagsDialogs = async (tags: string[]): Promise<boolean> => {
 	if (tags.length === 0) {
 		return Promise.resolve(true);
 	} else {
 		return new Promise<boolean>((resolve) =>
 			createModal({
 				text: "Which tag would you like to insert?",
-				elements: tags.map((tag) => ({
-					kind: "button",
-					colour: UIColour.BLUE,
-					text: tag,
-					onClick: async () => {
-						resolve(insertTag(tag, tags).then(insertTags));
-					},
-				})),
+				elements: [
+					...tags.map(toInsertionButton(tags, resolve)),
+					{kind: "button", colour: UIColour.RED, text: "Back", onClick: async () => resolve(false)},
+				],
 				colour: UIColour.BLUE,
 				onCancel: async () => resolve(false),
 			})
@@ -41,4 +44,4 @@ const insertTag = (tag: string, remainingTags: string[]): Promise<string[]> =>
 		})
 	);
 
-export {insertTags};
+export {insertTagsDialogs};

src/ts/content/extensions/util/tagValidation.ts

@@ -2,9 +2,10 @@ import {getTagsFromElement, getTagTrees, TagTrees} from "../../adapters/tags";
 import {createModal} from "../../../common/ui/modal";
 import {loaderOverlaid} from "../../../common/ui/loadingIndicator";
 import {UIColour} from "../../../common/ui/colour";
-import {OnSave, OffSave} from "../../entities/bookForm";
+import {OffSave, OnSave} from "../../entities/bookForm";
 import {Highlight, Highlightable, highlighted} from "../../../common/ui/highlighter";
 import {getSheetLink} from "../../../common/entities/spreadsheet";
+import {insertTagsDialogs} from "../../dialogs/insertTags";
 
 type GetTagsOptions = {noCache: boolean};
 
@@ -47,6 +48,13 @@ const getUserAcceptance = (
 					colour: UIColour.GREY,
 					onClick: async () => resolve(getSecondaryAcceptance(saveHandler)),
 				},
+				{
+					kind: "button",
+					text: "Insert Tags",
+					colour: UIColour.GREY,
+					onClick: async () =>
+						resolve(insertTagsDialogs(invalidTags).then(() => saveHandler({noCache: true}))),
+				},
 				{kind: "button", text: "Save anyway", colour: UIColour.GREY, onClick: async () => resolve(true)},
 				{kind: "button", text: "Cancel", colour: UIColour.PURPLE, onClick: async () => resolve(false)},
 			],

src/ts/content/index.ts

@@ -10,18 +10,3 @@ import "./extensions/resize";
 import "./extensions/tags";
 import "./extensions/sort";
 import "./extensions/enforceTagIndexAccess";
-
-// import {insertTags} from "./dialogs/insertTags";
-
-// insertTags([
-// 	"Tag 0",
-// 	"Tag 1",
-// 	"Tag 2",
-// 	"Tag 3",
-// 	"Tag 4",
-// 	"Tag 5",
-// 	"Tag 6",
-// 	"Tag 7",
-// 	"Tag 8",
-// 	"Tag 9",
-// ]).then(() => alert("done"));