From 54188fe54284b81d3cfda17ee2e03fa03b708011 Mon Sep 17 00:00:00 2001
From: Adrian Fish <adrian.r.fish@gmail.com>
Date: Tue, 16 May 2023 13:56:07 +0100
Subject: [PATCH] SAK-48451 fix criterion edit popover (#11556)

* SAK-48451 fix criterion edit popover

https://sakaiproject.atlassian.net/browse/SAK-48451

* Update webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric.js

* Update webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric.js

* Update webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric.js

* Update webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criterion-edit.js

* Update webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric.js
---
 .../sass/modules/tool/rubrics/_rubrics.scss   |   1 +
 .../js/rubrics/sakai-rubric-criteria.js       |   2 +
 .../js/rubrics/sakai-rubric-criterion-edit.js | 172 +++++++-----------
 .../frontend/js/rubrics/sakai-rubric-edit.js  |   3 +-
 4 files changed, 74 insertions(+), 104 deletions(-)

diff --git a/library/src/skins/default/src/sass/modules/tool/rubrics/_rubrics.scss b/library/src/skins/default/src/sass/modules/tool/rubrics/_rubrics.scss
index 436a849d29b7..ba55d8a1e89e 100644
--- a/library/src/skins/default/src/sass/modules/tool/rubrics/_rubrics.scss
+++ b/library/src/skins/default/src/sass/modules/tool/rubrics/_rubrics.scss
@@ -559,6 +559,7 @@ sakai-rubric-student-comment {
 
 [class*="edit-popover"] {
     width: 400px;
+    --bs-popover-max-width: 800px;
 
     .popover-content {
         word-break: break-word;
diff --git a/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criteria.js b/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criteria.js
index f623b3e066fb..5b472ec650c5 100644
--- a/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criteria.js
+++ b/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criteria.js
@@ -76,6 +76,7 @@ export class SakaiRubricCriteria extends RubricsElement {
                 <span @focus="${this.onFocus}" @focusout="${this.focusOut}" tabindex="0" role="button" title="${tr("drag_order")}" aria-label="${tr("drag_order")}" class="reorder-icon fa fa-bars"></span>
                 ${c.title}
                 <sakai-rubric-criterion-edit
+                    id="criterion-edit-${this.criterion.id}"
                     @criterion-edited="${this.criterionEdited}"
                     site-id="${this.siteId}"
                     rubric-id="${this.rubricId}"
@@ -100,6 +101,7 @@ export class SakaiRubricCriteria extends RubricsElement {
                 <span @focus="${this.onFocus}" @focusout="${this.focusOut}" tabindex="0" role="button" title="${tr("drag_order")}" aria-label="${tr("drag_order")}" class="reorder-icon fa fa-bars"></span>
                 ${c.title}
                 <sakai-rubric-criterion-edit
+                    id="criterion-edit-${c.id}"
                     @criterion-edited="${this.criterionEdited}"
                     site-id="${this.siteId}"
                     rubric-id="${this.rubricId}"
diff --git a/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criterion-edit.js b/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criterion-edit.js
index 4de827955838..5ce3895cf44b 100644
--- a/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criterion-edit.js
+++ b/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-criterion-edit.js
@@ -37,34 +37,52 @@ export class SakaiRubricCriterionEdit extends RubricsElement {
 
   get criterion() { return this._criterion; }
 
+  firstUpdated() {
+
+    new bootstrap.Popover(this.querySelector("button"), {
+      content: () => this.querySelector(`#edit-criterion-${this.criterion.id}`).innerHTML,
+      customClass: "criterion-edit-popover",
+      html: true,
+      placement: "bottom",
+      sanitize: false,
+    });
+
+    this.querySelector("button").addEventListener("shown.bs.popover", () => {
+
+      const save = document.querySelector(".popover.show .btn-primary");
+      save.addEventListener("click", this.saveEdit);
+      save.closest(".popover-body").querySelector("input").focus();
+
+      document.querySelector(".popover.show .btn-secondary")
+        .addEventListener("click", this.cancelEdit);
+    });
+  }
+
   render() {
 
     return html`
-      <a tabindex="0" role="button" class="linkStyle edit fa fa-edit" @focus="${this.onFocus}" @keyup="${this.openEditWithKeyboard}" @click="${this.editCriterion}" title="${tr("edit_criterion")} ${this.criterion.title}" aria-label="${tr("edit_criterion")} ${this.criterion.title}" href="#"></a>
-
-      <div id="edit_criterion_${this.criterion.id}" class="popover criterion-edit-popover bottom rubrics-popover">
-        <div class="arrow-1"></div>
-        <div class="popover-title">
-          <div class="buttons act">
-            <button class="active save" @click="${this.saveEdit}">
-              <sr-lang key="save">Save</sr-lang>
-            </button>
-            <button class="btn btn-link btn-xs cancel" @click="${this.cancelEdit}">
-              <sr-lang key="cancel">Cancel</sr-lang>
-            </button>
-          </div>
-        </div>
-        <div class="popover-content form">
-          <div class="form-group">
-            <label class="label-rubrics" for="criterion-title-field-${this.criterion.id}">
-              ${this.isCriterionGroup ? html`
-                <sr-lang key="criterion_group_title">Criterion Group Title</sr-lang>
-              ` : html`
-                <sr-lang key="criterion_title">Criterion Title</sr-lang>
-              `}
+      <button class="btn btn-icon edit"
+          id="edit-criterion-trigger-${this.criterion.id}"
+          type="button
+          data-bs-toggle="popup"
+          aria-haspopup="true"
+          aria-expanded="false"
+          aria-controls="edit-criterion-${this.criterion.id}"
+          title="${tr("edit_criterion")} ${this.criterion.title}"
+          aria-label="${tr("edit_criterion")} ${this.criterion.title}">
+        <i class="si si-edit"></i>
+      </button>
+
+      <div id="edit-criterion-${this.criterion.id}" class="criterion-edit-popover d-none">
+        <div>
+          <div>
+            <label class="label-rubrics" for="criterion-title-edit-${this.criterion.id}">
+              <sr-lang key="criterion_title">Criterion Title</sr-lang>
             </label>
-            <input id="criterion-title-field-${this.criterion.id}" type="text" class="form-control" value="${this.criterionClone.title}" maxlength="255">
+            <input title="${tr("criterion_title")}" id="criterion-title-edit-${this.criterion.id}" type="text" value="${this.criterionClone.title}" maxlength="255">
           </div>
+        </div>
+        <div class="form">
           <div class="form-group">
             <label class="label-rubrics" for="criterion-description-field-${this.criterion.id}">
               ${this.isCriterionGroup ? html`
@@ -80,91 +98,43 @@ export class SakaiRubricCriterionEdit extends RubricsElement {
               id="criterion-description-field-${this.criterion.id}">
             </sakai-editor>
           </div>
+
+          <div class="mt-2">
+            <div>
+              <button class="btn btn-primary" type="button" data-site-id="${this.siteId}" data-rubric-id="${this.rubricId}" data-criterion-id="${this.criterion.id}">
+                <sr-lang key="save">Save</sr-lang>
+              </button>
+              <button class="btn btn-secondary" type="button" data-criterion-id="${this.criterion.id}">
+                <sr-lang key="cancel">Cancel</sr-lang>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     `;
   }
 
-  onFocus(e) {
-
-    e.target.closest('.criterion-row').classList.add("focused");
-  }
-
-  closeOpen() {
-    $('.show-tooltip .cancel').click();
-  }
-
-  editCriterion(e) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.dispatchEvent(new CustomEvent('show-tooltip', {detail: this.criterion}));
-
-    // title input box reference
-    const titleinput = this.querySelector('[type="text"]');
-
-    if (!this.classList.contains("show-tooltip")) {
-
-      this.closeOpen();
-      this.classList.add("show-tooltip");
-
-      const popover = $(`#edit_criterion_${this.criterion.id}`);
-      popover[0].style.top = `${e.target.offsetTop + 20  }px`;
-      popover[0].style.left = `${e.target.offsetLeft - popover.width() / 2  }px`;
-      popover.show();
-
-      // and highlight the title
-      titleinput.setSelectionRange(0, titleinput.value.length);
-      titleinput.focus();
-
-    } else {
-      // if the tooltip is showing
-      // hide the tooltip
-      this.hideToolTip();
-      $(`#edit_criterion_${this.criterion.id}`).hide();
-    }
-  }
-
-  hideToolTip() {
-
-    // hide the edit popover
-    this.classList.remove("show-tooltip");
-
-    // fire hide-tooltip event to allow parent components to take action.
-    this.dispatchEvent(new CustomEvent('hide-tooltip', {details: {criterion: this.criterion}}));
-  }
-
   cancelEdit(e) {
 
     e.stopPropagation();
-
-    // revert changed data
-    this.criterionClone.title = this.criterion.title;
-    this.criterionClone.description = this.criterion.description;
-
-    // hide popover
-    this.hideToolTip();
-    this.dispatchEvent(new CustomEvent('hide-tooltip', {details: this.criterion}));
-    $(`#edit_criterion_${this.criterion.id}`).hide();
-    const popover = $(`#edit_criterion_${this.criterion.id}`);
-    popover.find("input[type='text']")[0].value = this.criterion.title;
-    this.querySelector("sakai-editor").setContent(this.criterion.description);
-    popover.hide();
+    const trigger = document.getElementById(`edit-criterion-trigger-${this.dataset.criterionId}`);
+    bootstrap.Popover.getInstance(trigger).hide();
+    trigger.focus();
   }
 
   saveEdit(e) {
 
     e.stopPropagation();
 
-    const title = document.getElementById(`criterion-title-field-${this.criterion.id}`).value;
-    const description = this.criterionClone.description;
+    const title = e.target.closest(".popover-body").querySelector("input").value;
+    const description = e.target.closest("div.form").querySelector("sakai-editor").getContent();
 
     const body = JSON.stringify([
       { "op": "replace", "path": "/title", "value": title },
       { "op": "replace", "path": "/description", "value": description },
     ]);
 
-    const url = `/api/sites/${this.siteId}/rubrics/${this.rubricId}/criteria/${this.criterion.id}`;
+    const url = `/api/sites/${this.dataset.siteId}/rubrics/${this.dataset.rubricId}/criteria/${this.dataset.criterionId}`;
     fetch(url, {
       credentials: "include",
       headers: { "Content-Type": "application/json-patch+json" },
@@ -178,24 +148,19 @@ export class SakaiRubricCriterionEdit extends RubricsElement {
       }
 
       throw new Error("Network error while updating criterion");
-    }).then(criterion => {
+    })
+    .then(criterion => {
 
-      this.dispatchEvent(new CustomEvent('criterion-edited', { detail: criterion }));
-      this.dispatchEvent(new SharingChangeEvent());
+      const originalEditor = document.getElementById(`criterion-edit-${this.dataset.criterionId}`);
+      originalEditor.dispatchEvent(new CustomEvent("criterion-edited", { detail: criterion }));
+      originalEditor.dispatchEvent(new SharingChangeEvent());
     })
     .catch (error => console.error(error));
 
-    // hide the popover
-    this.hideToolTip();
-    this.dispatchEvent(new CustomEvent('hide-tooltip', {detail: this.criterion}));
-    document.getElementById(`edit_criterion_${this.criterion.id}`).style.display = "none";
-  }
-
-  openEditWithKeyboard(e) {
-
-    if (e.keyCode == 32) {
-      this.editCriterion(e);
-    }
+    const trigger = document.getElementById(`edit-criterion-trigger-${this.dataset.criterionId}`);
+    bootstrap.Popover.getInstance(trigger).hide();
+    trigger.focus();
+    document.getElementById(`edit-criterion-${this.dataset.criterionId}`).style.display = "none";
   }
 
   updateCriterionDescription(e) {
@@ -203,4 +168,5 @@ export class SakaiRubricCriterionEdit extends RubricsElement {
   }
 }
 
-customElements.define("sakai-rubric-criterion-edit", SakaiRubricCriterionEdit);
+const tagName = "sakai-rubric-criterion-edit";
+!customElements.get(tagName) && customElements.define(tagName, SakaiRubricCriterionEdit);
diff --git a/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-edit.js b/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-edit.js
index 869caf63c589..3d94184a5a0b 100644
--- a/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-edit.js
+++ b/webcomponents/tool/src/main/frontend/js/rubrics/sakai-rubric-edit.js
@@ -36,6 +36,7 @@ export class SakaiRubricEdit extends RubricsElement {
       <button class="btn btn-icon edit"
           id="edit-rubric-trigger-${this.rubric.id}"
           type="button"
+          @click=${e => e.stopPropagation()}
           data-bs-toggle="popup"
           aria-haspopup="true"
           aria-expanded="false"
@@ -48,7 +49,7 @@ export class SakaiRubricEdit extends RubricsElement {
       <div id="edit-rubric-${this.rubric.id}" class="rubric-edit-popover d-none">
         <div>
           <div>
-            <label class="label-rubrics" for="rubric_title_edit">
+            <label class="label-rubrics" for="rubric-title-edit-${this.rubric.id}">
               <sr-lang key="rubric_title">Rubric Title</sr-lang>
             </label>
             <input title="${tr("rubric_title")}" id="rubric-title-edit-${this.rubric.id}" type="text" value="${this.rubricClone.title}" maxlength="255">