From 69b02569ee0cfe29935983f1a3d81f33ab39c173 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 13 Oct 2022 21:00:50 +0200
Subject: [PATCH] added button to the result page that allows you to update
 tags for the result only shows up if user has tags closes #3642

---
 frontend/src/styles/test.scss               |  6 ++
 frontend/src/ts/popups/result-tags-popup.ts | 63 ++++++++++++++-------
 frontend/src/ts/test/result.ts              | 17 +++++-
 frontend/src/ts/test/test-logic.ts          |  6 ++
 frontend/static/html/pages/test.html        | 13 ++++-
 5 files changed, 82 insertions(+), 23 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 013802749..bfde9db7b 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -447,6 +447,12 @@
   // "login login"
   // "ssw ssw";
 
+  .editTagsButton {
+    display: inline-block;
+    font-size: 0.75rem;
+    padding-bottom: 0;
+  }
+
   &:focus {
     outline: none;
   }
diff --git a/frontend/src/ts/popups/result-tags-popup.ts b/frontend/src/ts/popups/result-tags-popup.ts
index ee1dc1a36..47a6e4144 100644
--- a/frontend/src/ts/popups/result-tags-popup.ts
+++ b/frontend/src/ts/popups/result-tags-popup.ts
@@ -40,7 +40,7 @@ export function updateButtons(): void {
 }
 
 function updateActiveButtons(active: string[]): void {
-  if (active === []) return;
+  if (active.length === 0) return;
   $.each($("#resultEditTagsPanel .buttons .button"), (_, obj) => {
     const tagid: string = $(obj).attr("tagid") ?? "";
     if (active.includes(tagid)) {
@@ -57,6 +57,7 @@ $(document).on("click", ".pageAccount .group.history #resultEditTags", (f) => {
     const tags = $(f.target).parents("span").attr("tags") as string;
     $("#resultEditTagsPanel").attr("resultid", resultid);
     $("#resultEditTagsPanel").attr("tags", tags);
+    $("#resultEditTagsPanel").attr("source", "accountPage");
     updateActiveButtons(JSON.parse(tags));
     show();
   } else {
@@ -68,6 +69,22 @@ $(document).on("click", ".pageAccount .group.history #resultEditTags", (f) => {
   }
 });
 
+$(document).on("click", ".pageTest .tags .editTagsButton", () => {
+  if (DB.getSnapshot().tags?.length ?? 0 > 0) {
+    const resultid = $(".pageTest .tags .editTagsButton").attr(
+      "result-id"
+    ) as string;
+    const tags = $(".pageTest .tags .editTagsButton")
+      .attr("active-tag-ids")
+      ?.split(",") as string[];
+    $("#resultEditTagsPanel").attr("resultid", resultid);
+    $("#resultEditTagsPanel").attr("tags", JSON.stringify(tags));
+    $("#resultEditTagsPanel").attr("source", "resultPage");
+    updateActiveButtons(tags);
+    show();
+  }
+});
+
 $(document).on("click", "#resultEditTagsPanelWrapper .button.tag", (f) => {
   $(f.target).toggleClass("active");
 });
@@ -111,17 +128,16 @@ $("#resultEditTagsPanel .confirmButton").on("click", async () => {
     }
   );
 
-  let tagNames = "";
+  const tagNames: string[] = [];
 
   if (newTags.length > 0) {
     newTags.forEach((tag) => {
       DB.getSnapshot().tags?.forEach((snaptag) => {
         if (tag === snaptag._id) {
-          tagNames += snaptag.display + ", ";
+          tagNames.push(snaptag.display);
         }
       });
     });
-    tagNames = tagNames.substring(0, tagNames.length - 2);
   }
 
   let restags;
@@ -135,20 +151,29 @@ $("#resultEditTagsPanel .confirmButton").on("click", async () => {
     "tags",
     restags
   );
-  if (newTags.length > 0) {
-    $(`.pageAccount #resultEditTags[resultid='${resultId}']`).css("opacity", 1);
-    $(`.pageAccount #resultEditTags[resultid='${resultId}']`).attr(
-      "aria-label",
-      tagNames
-    );
-  } else {
-    $(`.pageAccount #resultEditTags[resultid='${resultId}']`).css(
-      "opacity",
-      0.25
-    );
-    $(`.pageAccount #resultEditTags[resultid='${resultId}']`).attr(
-      "aria-label",
-      "no tags"
-    );
+  const source = $("#resultEditTagsPanel").attr("source") as string;
+
+  if (source === "accountPage") {
+    if (newTags.length > 0) {
+      $(`.pageAccount #resultEditTags[resultid='${resultId}']`).css(
+        "opacity",
+        1
+      );
+      $(`.pageAccount #resultEditTags[resultid='${resultId}']`).attr(
+        "aria-label",
+        tagNames.join(", ")
+      );
+    } else {
+      $(`.pageAccount #resultEditTags[resultid='${resultId}']`).css(
+        "opacity",
+        0.25
+      );
+      $(`.pageAccount #resultEditTags[resultid='${resultId}']`).attr(
+        "aria-label",
+        "no tags"
+      );
+    }
+  } else if (source === "resultPage") {
+    $(`.pageTest #result .tags .bottom`).html(tagNames.join("<br>"));
   }
 });
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index a07be1266..84d550918 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -402,6 +402,7 @@ export async function updateCrown(): Promise<void> {
 
 function updateTags(dontSave: boolean): void {
   const activeTags: MonkeyTypes.Tag[] = [];
+  const userTagsCount = DB.getSnapshot().tags?.length ?? 0;
   try {
     DB.getSnapshot().tags?.forEach((tag) => {
       if (tag.active === true) {
@@ -410,13 +411,23 @@ function updateTags(dontSave: boolean): void {
     });
   } catch (e) {}
 
-  $("#result .stats .tags").addClass("hidden");
-  if (activeTags.length == 0) {
+  if (userTagsCount === 0) {
     $("#result .stats .tags").addClass("hidden");
   } else {
     $("#result .stats .tags").removeClass("hidden");
   }
-  $("#result .stats .tags .bottom").text("");
+  if (activeTags.length === 0) {
+    $("#result .stats .tags .bottom").text("no tags");
+  } else {
+    $("#result .stats .tags .bottom").text("");
+  }
+  $("#result .stats .tags .editTagsButton").attr("result-id", "");
+  $("#result .stats .tags .editTagsButton").attr(
+    "active-tag-ids",
+    activeTags.map((t) => t._id).join(",")
+  );
+  $("#result .stats .tags .editTagsButton").addClass("invisible");
+
   let annotationSide = "start";
   let labelAdjust = 15;
   activeTags.forEach(async (tag) => {
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 1de75f140..0e45b2388 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -1746,6 +1746,12 @@ async function saveResult(
     return Notifications.add("Failed to save result: " + response.message, -1);
   }
 
+  $("#result .stats .tags .editTagsButton").attr(
+    "result-id",
+    response.data.insertedId
+  );
+  $("#result .stats .tags .editTagsButton").removeClass("invisible");
+
   if (response?.data?.xp) {
     const snapxp = DB.getSnapshot().xp;
     AccountButton.updateXpBar(
diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html
index b29155636..1144e4338 100644
--- a/frontend/static/html/pages/test.html
+++ b/frontend/static/html/pages/test.html
@@ -191,7 +191,18 @@
         <div class="top">test type</div>
         <div class="bottom">-</div>
         <div class="tags hidden" style="margin-top: 0.5rem">
-          <div class="top">tags</div>
+          <div class="top">
+            tags
+            <div
+              class="textButton editTagsButton"
+              result-id=""
+              active-tag-ids=""
+              aria-label="Edit tags"
+              data-balloon-pos="right"
+            >
+              <i class="fas fa-pen fa-fw"></i>
+            </div>
+          </div>
           <div class="bottom">-</div>
         </div>
       </div>