SAK-46329 Task editor now uses textarea, thus avoiding ck (sakaiproje…

…ct#10094) * SAK-46329 Task editor now uses textarea, thus avoiding ck https://sakaiproject.atlassian.net/browse/SAK-46329 * Update webcomponents/tool/src/main/frontend/js/widgets/sakai-dashboard-widget.js
WritingPanda · Feb 4, 2022 · c3c83b8 · c3c83b8
1 parent 4f5cccd
commit c3c83b8
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 99 deletions.
diff --git a/webapi/src/main/java/org/sakaiproject/webapi/controllers/TasksController.java b/webapi/src/main/java/org/sakaiproject/webapi/controllers/TasksController.java
@@ -30,6 +30,7 @@
 import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RestController;
@@ -75,7 +76,7 @@ public List<UserTaskAdapterBean> getTasks() throws UserNotDefinedException {
             }).collect(Collectors.toList());
     }
 
-    @PutMapping(value = "/tasks", produces = MediaType.APPLICATION_JSON_VALUE)
+    @PostMapping(value = "/tasks", produces = MediaType.APPLICATION_JSON_VALUE)
     public UserTaskAdapterBean createTask(@RequestBody UserTaskAdapterBean taskTransfer) {
 
         checkSakaiSession();

diff --git a/webcomponents/tool/src/main/frontend/js/calendar/sakai-calendar.js b/webcomponents/tool/src/main/frontend/js/calendar/sakai-calendar.js
@@ -6,6 +6,7 @@ import { LionCalendar } from "../assets/@lion/calendar/src/LionCalendar.js";
 import moment from "../assets/moment/dist/moment.js";
 import '../sakai-icon.js';
 import { loadProperties } from "../sakai-i18n.js";
+import "../assets/@lion/dialog/lion-dialog.js";
 
 export class SakaiCalendar extends LionCalendar {
 
@@ -166,14 +167,6 @@ export class SakaiCalendar extends LionCalendar {
           <sakai-calendar-display-event slot="content" selected="${ifDefined(this.selected ? JSON.stringify(this.selected): undefined)}"></sakai-calendar-display-event>
           <button slot="invoker" style="display: none">none</button>
         </lion-dialog>
-        ${this.readOnly ? "" : html`
-        <div id="add-block">
-          <lion-dialog id="add-dialog">
-            <sakai-calendar-create-event slot="content"></sakai-calendar-create-event>
-            <a href="javascript:;" slot="invoker"><sakai-icon type="add" size="small"></a>
-          </lion-dialog>
-        </div>
-        `}
         ${super.render()}
         ${this.selectedDate && this.daysEvents.length > 0 ? html`
         <div id="days-events">

diff --git a/...nents/tool/src/main/frontend/js/coursedashboard/sakai-course-dashboard-template-picker.js b/...nents/tool/src/main/frontend/js/coursedashboard/sakai-course-dashboard-template-picker.js
@@ -1,7 +1,6 @@
 import { css, html } from "../assets/lit-element/lit-element.js";
 import { loadProperties } from "../sakai-i18n.js";
 import { SakaiDialogContent } from "../sakai-dialog-content.js";
-import "../sakai-editor.js";
 
 export class SakaiCourseDashboardTemplatePicker extends SakaiDialogContent {
 

diff --git a/webcomponents/tool/src/main/frontend/js/datepicker/sakai-date-picker.js b/webcomponents/tool/src/main/frontend/js/datepicker/sakai-date-picker.js
@@ -87,6 +87,7 @@ class SakaiDatePicker extends LitElement {
     const config = {
       enableTime: true,
       appendTo: this.shadowRoot,
+      static: true,
       time_24hr: true,
       allowInput: !this.disabled,
       defaultHour: this.start.hours(),

diff --git a/webcomponents/tool/src/main/frontend/js/sakai-editor.js b/webcomponents/tool/src/main/frontend/js/sakai-editor.js
@@ -13,6 +13,7 @@ class SakaiEditor extends SakaiElement {
       content: String,
       active: { type: Boolean },
       delay: { type: Boolean },
+      textarea: { type: Boolean },
       toolbar: String,
       setFocus: { attribute: "set-focus", type: Boolean },
     };
@@ -28,24 +29,35 @@ class SakaiEditor extends SakaiElement {
   }
 
   getContent() {
+
+    if (this.textarea) {
+      return this.querySelector(`#${this.elementId}`).value;
+    }
     return this.editor.getData();
   }
 
   clear() {
-    this.editor.setData("");
+
+    if (this.textarea) {
+      this.querySelector(`#${this.elementId}`).value = "";
+    } else {
+      this.editor.setData("");
+    }
   }
 
   shouldUpdate() {
-    return (this.content || this.elementId) && typeof CKEDITOR !== "undefined";
+    return (this.content || this.elementId);
   }
 
   set active(value) {
 
     this._active = value;
-    if (value) {
-      this.attachEditor();
-    } else {
-      this.editor.destroy();
+    if (!this.textarea) {
+      if (value) {
+        this.attachEditor();
+      } else {
+        this.editor.destroy();
+      }
     }
   }
 
@@ -78,22 +90,27 @@ class SakaiEditor extends SakaiElement {
 
     super.firstUpdated(changed);
 
-    if (!this.delay) {
+    if (!this.delay && !this.textarea) {
       this.attachEditor();
     }
   }
 
   render() {
 
+    if (this.textarea) {
+      return html `
+        <textarea style="width: 100%" id="${this.elementId}" aria-label="Sakai editor textarea" tabindex="0">${unsafeHTML(this.content)}</textarea>
+      `;
+    }
+
     return html `
       <div id="${this.elementId}" tabindex="0" contenteditable=${ifDefined(this.type === "inline" && this.active ? "true" : undefined)}>${unsafeHTML(this.content)}</div>
     `;
   }
 }
 
-if (!customElements.get("sakai-editor")) {
-  customElements.define("sakai-editor", SakaiEditor);
-}
+const tagName = "sakai-editor";
+!customElements.get(tagName) && customElements.define(tagName, SakaiEditor);
 
 SakaiEditor.toolbars = new Map();
 SakaiEditor.toolbars.set("basic", [{ name: 'document', items : ['Source', '-', 'Bold', 'Italic', 'Underline', '-', 'Link', 'Unlink', '-', 'NumberedList', 'BulletedList', 'Blockquote']}]);
diff --git a/webcomponents/tool/src/main/frontend/js/tasks/sakai-tasks-create-task.js b/webcomponents/tool/src/main/frontend/js/tasks/sakai-tasks-create-task.js
@@ -35,32 +35,32 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
   save() {
 
     this.task.description = this.shadowRoot.getElementById("description").value;
-    this.task.notes = this.getEditor().getData();
+    this.task.notes = this.getEditorTag().getContent();
 
-    fetch(`/api/tasks/${this.task.taskId}`, {
+    const url = `/api/tasks${this.task.taskId ? `/${this.task.taskId}` : ""}`;
+    fetch(url, {
       credentials: "include",
-      method: "PUT",
+      method: this.task.taskId ? "PUT" : "POST",
       cache: "no-cache",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(this.task),
     })
-      .then(r => {
+    .then(r => {
 
-        if (r.ok) {
-          this.error = false;
-          return r.json();
-        }
-        this.error = true;
-        throw new Error();
-
-      })
-      .then(savedTask => {
+      if (r.ok) {
+        this.error = false;
+        return r.json();
+      }
+      this.error = true;
+      throw new Error("Network error while saving task");
+    })
+    .then(savedTask => {
 
-        this.task = savedTask;
-        this.dispatchEvent(new CustomEvent("task-created", {detail: { task: this.task }, bubbles: true }));
-        this.close();
-      })
-      .catch(() => {});
+      this.task = savedTask;
+      this.dispatchEvent(new CustomEvent("task-created", {detail: { task: this.task }, bubbles: true }));
+      this.close();
+    })
+    .catch(error => console.error(error));
   }
 
   resetDate() {
@@ -111,13 +111,7 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
   }
 
   getEditorTag() {
-
-    const el = this.shadowRoot.querySelector("slot[name='task-text'");
-
-    if (el) {
-      const slottedNodes = this.shadowRoot.querySelector("slot[name='task-text'").assignedNodes();
-      return slottedNodes[0].querySelector("sakai-editor");
-    }
+    return this.shadowRoot.querySelector("sakai-editor");
   }
 
   getEditor() {
@@ -135,24 +129,6 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
     if (e.target.checked) {
       this.task.softDeleted = false;
     }
-
-    console.log(this.task);
-  }
-
-  resetEditor() {
-    this.getEditor().setData(this.task.notes || "");
-  }
-
-  connectedCallback() {
-
-    super.connectedCallback();
-
-    if (typeof CKEDITOR !== "undefined") {
-      const tag = this.getEditorTag();
-      if (tag) {
-        return tag.attachEditor();
-      }
-    }
   }
 
   content() {
@@ -162,7 +138,9 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
       <div class="label">
         <label for="description">${this.i18n.description}</label>
       </div>
-      <div class="input"><input type="text" id="description" size="50" maxlength="150" .value=${this.task.description}></div>
+      <div class="input">
+        <input type="text" id="description" size="50" maxlength="150" .value=${this.task.description}>
+      </div>
       <div id="due-and-priority-block">
         <div id="due-block">
           <div class="label">
@@ -206,7 +184,7 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
         <label for="text">${this.i18n.text}</label>
       </div>
       <div class="input">
-        <slot id="task-text" name="task-text"></slot>
+        <sakai-editor element-id="task-text-editor" textarea></sakai-editor>
       </div>
       ${this.error ? html`<div id="error">${this.i18n.save_failed}</div>` : ""}
     `;
@@ -246,10 +224,12 @@ export class SakaiTasksCreateTask extends SakaiDialogContent {
         font-weight: bold;
         color: var(--sakai-tasks-save-failed-color, red)
       }
+      sakai-editor {
+        width: 100%;
+      }
     `];
   }
 }
 
-if (!customElements.get("sakai-tasks-create-task")) {
-  customElements.define("sakai-tasks-create-task", SakaiTasksCreateTask);
-}
+const tagName = "sakai-tasks-create-task";
+!customElements.get(tagName) && customElements.define(tagName, SakaiTasksCreateTask);
diff --git a/webcomponents/tool/src/main/frontend/js/tasks/sakai-tasks.js b/webcomponents/tool/src/main/frontend/js/tasks/sakai-tasks.js
@@ -5,7 +5,6 @@ import '../sakai-icon.js';
 import moment from "../assets/moment/dist/moment.js";
 import "../assets/@lion/dialog/lion-dialog.js";
 import "./sakai-tasks-create-task.js";
-import "../sakai-editor.js";
 
 export class SakaiTasks extends SakaiPageableElement {
 
@@ -267,14 +266,13 @@ export class SakaiTasks extends SakaiPageableElement {
             slot="content"
             @task-created=${this.taskCreated}
             @soft-deleted=${this.softDeleteTask}>
-
-            <div slot="task-text">
-              <sakai-editor element-id="task-text-editor" toolbar="basic" delay></sakai-editor>
-            </div>
-
           </sakai-tasks-create-task>
 
-          <div slot="invoker"><a @click=${this.add} href="javascript:;" title="${this.i18n.add_task}" aria-label="${this.i18n.add_task}"><sakai-icon type="add" size="small"></a></div>
+          <div slot="invoker">
+            <a @click=${this.add} href="javascript:;" title="${this.i18n.add_task}" aria-label="${this.i18n.add_task}">
+              <sakai-icon type="add" size="medium">
+            </a>
+          </div>
 
         </lion-dialog>
       </div>

diff --git a/webcomponents/tool/src/main/frontend/js/widgets/sakai-dashboard-widget.js b/webcomponents/tool/src/main/frontend/js/widgets/sakai-dashboard-widget.js
@@ -1,6 +1,5 @@
 import { css, html, LitElement } from "../assets/lit-element/lit-element.js";
 import '../sakai-icon.js';
-import '../sakai-options-menu.js';
 import { loadProperties } from "../sakai-i18n.js";
 import "../sakai-pager.js";
 
@@ -129,15 +128,6 @@ export class SakaiDashboardWidget extends LitElement {
     `;
   }
 
-  moved() {
-
-    // This may not have been rendered if we are in the remove state.
-    const optionsMenu = this.shadowRoot.querySelector("sakai-options-menu");
-    if (optionsMenu) {
-      optionsMenu.refresh();
-    }
-  }
-
   static get styles() {
 
     return [

diff --git a/webcomponents/tool/src/main/frontend/stories/sakai-course-dashboard.stories.js b/webcomponents/tool/src/main/frontend/stories/sakai-course-dashboard.stories.js
@@ -6,7 +6,7 @@ import { coursecardI18n } from "./i18n/course-card-i18n.js";
 import { courselistI18n } from "./i18n/course-list-i18n.js";
 import { dashboardI18n } from "./i18n/dashboard-i18n.js";
 import { widgetpanelI18n } from "./i18n/widgetpanel-i18n.js";
-import { tasksI18n } from "./i18n/tasks-i18n.js";
+import { tasksI18n } from "./tasks/i18n/tasks.js";
 import { gradesI18n } from "./i18n/grades-i18n.js";
 import { announcementsI18n } from "./i18n/announcements-i18n.js";
 import { calendarI18n } from "./i18n/calendar-i18n.js";
@@ -19,7 +19,7 @@ import { imageeditorI18n } from "./i18n/image-editor-i18n.js";
 import { dialogcontentI18n } from "./i18n/dialog-content-i18n.js";
 import { dashboardData } from "./data/course-dashboard-data.js";
 import { calendarData } from "./data/calendar-data.js";
-import { tasksData } from "./data/tasks-data.js";
+import { tasksData } from "./tasks/data/tasks.js";
 import { forumsData } from "./data/forums-data.js";
 import { announcementsData } from "./data/course-announcements-data.js";
 import { gradesData } from "./data/course-grades-data.js";

diff --git a/webcomponents/tool/src/main/frontend/stories/sakai-home-dashboard.stories.js b/webcomponents/tool/src/main/frontend/stories/sakai-home-dashboard.stories.js
@@ -6,7 +6,7 @@ import { coursecardI18n } from "./i18n/course-card-i18n.js";
 import { courselistI18n } from "./i18n/course-list-i18n.js";
 import { dashboardI18n } from "./i18n/dashboard-i18n.js";
 import { widgetpanelI18n } from "./i18n/widgetpanel-i18n.js";
-import { tasksI18n } from "./i18n/tasks-i18n.js";
+import { tasksI18n } from "./tasks/i18n/tasks.js";
 import { gradesI18n } from "./i18n/grades-i18n.js";
 import { announcementsI18n } from "./i18n/announcements-i18n.js";
 import { calendarI18n } from "./i18n/calendar-i18n.js";
@@ -20,7 +20,7 @@ import { toolnamesI18n } from "./i18n/toolnames-i18n.js";
 import { dashboardData } from "./data/home-dashboard-data.js";
 import { announcementsData } from "./data/home-announcements-data.js";
 import { calendarData } from "./data/calendar-data.js";
-import { tasksData } from "./data/tasks-data.js";
+import { tasksData } from "./tasks/data/tasks.js";
 import { forumsData } from "./data/forums-data.js";
 import { gradesData } from "./data/home-grades-data.js";
 import { sitesData } from "./data/sites-data.js";

diff --git a/.../main/frontend/stories/data/tasks-data.js → ...main/frontend/stories/tasks/data/tasks.js b/.../main/frontend/stories/data/tasks-data.js → ...main/frontend/stories/tasks/data/tasks.js
@@ -1,4 +1,4 @@
-export var tasksData = `
+export const tasksData = `
 [
   {
     "userTaskId":611,

diff --git a/.../main/frontend/stories/i18n/tasks-i18n.js → ...main/frontend/stories/tasks/i18n/tasks.js b/.../main/frontend/stories/i18n/tasks-i18n.js → ...main/frontend/stories/tasks/i18n/tasks.js
@@ -1,4 +1,4 @@
-export var tasksI18n = `
+export const tasksI18n = `
 filter_current=All Current
 filter_priority_5=Priority: 5
 filter_priority_4=Priority: 4