SAK-50515 dashboard changing layout removes all widgets (#12906)

sakaiproject · Sep 23, 2024 · 7e0991a · 7e0991a
1 parent 756d5b4
commit 7e0991a
Show file tree

Hide file tree

Showing 10 changed files with 214 additions and 243 deletions.
diff --git a/webapi/src/main/java/org/sakaiproject/webapi/controllers/DashboardController.java b/webapi/src/main/java/org/sakaiproject/webapi/controllers/DashboardController.java
@@ -144,21 +144,21 @@ public void init() {
         if (!tasksEnabled) defaultHomeLayout.remove("tasks");
 
         List<String> courseWidgetLayout1 = new ArrayList<>(serverConfigurationService.getStringList("dashboard.course.widget.layout1", null));
-        if (courseWidgetLayout1 == null) {
+        if (courseWidgetLayout1.isEmpty()) {
             courseWidgetLayout1 = new ArrayList<>(List.of("tasks", "calendar", "announcements", "grades"));
         }
         if (!tasksEnabled) courseWidgetLayout1.remove("tasks");
         defaultWidgetLayouts.put("1", courseWidgetLayout1);
 
         List<String> courseWidgetLayout2 = new ArrayList<>(serverConfigurationService.getStringList("dashboard.course.widget.layout2", null));
-        if (courseWidgetLayout2 == null) {
+        if (courseWidgetLayout2.isEmpty()) {
             courseWidgetLayout2 = new ArrayList<>(List.of("tasks", "calendar", "forums", "grades", "announcements"));
         }
         if (!tasksEnabled) courseWidgetLayout2.remove("tasks");
         defaultWidgetLayouts.put("2", courseWidgetLayout2);
 
         List<String> courseWidgetLayout3 = new ArrayList<>(serverConfigurationService.getStringList("dashboard.course.widget.layout3", null));
-        if (courseWidgetLayout3 == null) {
+        if (courseWidgetLayout3.isEmpty()) {
             courseWidgetLayout3 = new ArrayList<>(List.of("tasks", "calendar", "announcements", "grades", "forums"));
         }
         if (!tasksEnabled) courseWidgetLayout3.remove("tasks");

diff --git a/webcomponents/bundle/src/main/bundle/tasks.properties b/webcomponents/bundle/src/main/bundle/tasks.properties
@@ -44,7 +44,7 @@ edit_task=Edit Task
 trash=Trash
 text=Text
 task_url=Click to be taken to the task
-add_task=Add a new task
+add_new_task=Add
 more=More
 less=Less
 show_less=Show less detail about this task

diff --git a/...onents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboard.js b/...onents/tool/src/main/frontend/packages/sakai-course-dashboard/src/SakaiCourseDashboard.js
@@ -1,7 +1,6 @@
 import { html, nothing } from "lit";
 import { SakaiElement } from "@sakai-ui/sakai-element";
 import "@sakai-ui/sakai-button/sakai-button.js";
-import "@sakai-ui/sakai-widgets";
 import "@sakai-ui/sakai-widgets/sakai-widget-panel.js";
 import "@lion/dialog/define";
 import "../sakai-course-dashboard-template-picker.js";
@@ -28,15 +27,14 @@ export class SakaiCourseDashboard extends SakaiElement {
     this.loadTranslations("dashboard").then(r => this.i18n = r);
   }
 
-  set siteId(value) {
+  connectedCallback() {
 
-    this._siteId = value;
-    this.loadData();
-  }
+    super.connectedCallback();
 
-  get siteId() { return this._siteId; }
+    this._loadData();
+  }
 
-  loadData() {
+  _loadData() {
 
     const url = `/api/sites/${this.siteId}/dashboard`;
     fetch(url, { credentials: "include" })
@@ -52,10 +50,6 @@ export class SakaiCourseDashboard extends SakaiElement {
       .catch(error => console.error(error));
   }
 
-  shouldUpdate() {
-    return this.i18n && this.data;
-  }
-
   widgetLayoutChanged(e) {
     this.data.layout = e.detail.layout;
   }
@@ -179,6 +173,10 @@ export class SakaiCourseDashboard extends SakaiElement {
     this.data.programme = e.target.innerText;
   }
 
+  shouldUpdate() {
+    return this.i18n && this.data;
+  }
+
   titleBlock() {
 
     return html`
@@ -204,7 +202,7 @@ export class SakaiCourseDashboard extends SakaiElement {
                 <sakai-button slot="invoker" @click=${this.edit} title="${this.i18n.edit_tooltip}" arial-label="${this.i18n.edit_tooltip}">${this.i18n.edit}</sakai-button>
               </div>
             `}
-          ` : ""}
+          ` : nothing}
         </div>
       </div>
     `;
@@ -259,7 +257,6 @@ export class SakaiCourseDashboard extends SakaiElement {
     `;
   }
 
-
   template3() {
 
     return html`
@@ -278,7 +275,10 @@ export class SakaiCourseDashboard extends SakaiElement {
   renderOverview() {
 
     return html`
-      <sakai-course-overview @changed=${this.overviewChanged} overview="${this.data.overview || ""}" ?editing=${this.editing}></sakai-course-overview>
+      <sakai-course-overview @changed=${this.overviewChanged}
+          overview="${this.data.overview || ""}"
+          ?editing=${this.editing}>
+      </sakai-course-overview>
     `;
   }
 

diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-element/src/SakaiShadowElement.js b/webcomponents/tool/src/main/frontend/packages/sakai-element/src/SakaiShadowElement.js
@@ -1,5 +1,6 @@
 import { css, LitElement } from "lit";
 import { loadProperties, tr } from "@sakai-ui/sakai-i18n";
+import { getGlobalStyleSheets } from "./global-styles.js";
 
 export class SakaiShadowElement extends LitElement {
 
@@ -57,55 +58,12 @@ export class SakaiShadowElement extends LitElement {
     return !currentString ? null : JSON.parse(currentString)[name];
   }
 
-  static styles = css`
-    button {
-      color: var(--sui-btn-color);
-      background: var(--sui-btn-bg-color);
-      padding: var(--sui-btn-padding);
-      border-radius: var(--sui-btn-border-radius);
-      border-width: var(--sui-btn-border-width);
-      border-color: var(--sui-btn-border-color);
-      box-shadow: var(--sui-btn-box-shadow);
-      font-family: var(--sui-btn-font-family);
-      font-size: var(--sui-btn-font-size);
-      font-weight: var(--sui-btn-font-weight);
-      line-height: var(--sui-btn-line-height);
-    }
-
-    button:hover {
-      background: var(--sui-btn-hover-bg-color);
-      border-color: var(--sui-btn-hover-border-color);
-      box-shadow: var(--sui-btn-hover-box-shadow);
-    }
-
-    select {
-      appearance: none;
-      background-color: var(--sakai-background-color-1);
-      background-image: var(--select-background-image-url);
-      background-position: right 50%;
-      background-repeat: no-repeat;
-      color: var(--sakai-text-color-1);
-      font-family: var(--sakai-font-family)y;
-      font-size: 13px;
-      padding: 0.3em 2.2em 0.3em 0.5em;
-      text-align: left;
-      max-width: 100%;
-      border: 1px solid var(--sakai-border-color);
-    }
-
-    select[multiple], select[size]:not([size='1']) {
-      background-image: none;
-    }
-
-    select:focus {
-      box-shadow: 0px 0px $focus-outline-width $focus-outline-width var(--focus-outline-color);
-    }
-
-    select[disabled="disabled"], select[disabled], select[disabled="true"] {
-      opacity: 0.7;
-      background-color: var(--sakai-background-color-1);
-      color: var(--sakai-text-color-disabled);
-      cursor: not-allowed;
-    }
-  `;
+  static styles = [
+    ...getGlobalStyleSheets(),
+    css`
+      select[multiple], select[size]:not([size='1']) {
+        background-image: none;
+      }
+    `
+  ];
 }
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-element/src/global-styles.js b/webcomponents/tool/src/main/frontend/packages/sakai-element/src/global-styles.js
@@ -0,0 +1,21 @@
+let globalSheets = null;
+
+export function getGlobalStyleSheets() {
+  if (globalSheets === null) {
+    globalSheets = Array.from(document.styleSheets)
+      .map(x => {
+        const sheet = new CSSStyleSheet();
+        const css = Array.from(x.cssRules).map(rule => rule.cssText).join(" ");
+        sheet.replaceSync(css);
+        return sheet;
+      });
+  }
+
+  return globalSheets;
+}
+
+export function addGlobalStylesToShadowRoot(shadowRoot) {
+  shadowRoot.adoptedStyleSheets.push(
+    ...getGlobalStyleSheets()
+  );
+}
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-home-dashboard/src/SakaiHomeDashboard.js b/webcomponents/tool/src/main/frontend/packages/sakai-home-dashboard/src/SakaiHomeDashboard.js
@@ -161,7 +161,6 @@ export class SakaiHomeDashboard extends SakaiElement {
               .layout=${this._data.layout}
               site-id=""
               user-id="${ifDefined(this.userId)}"
-              columns="2"
               ?editing=${this._editing}>
             </sakai-widget-panel>
           </div>

diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-tasks/src/SakaiTasks.js b/webcomponents/tool/src/main/frontend/packages/sakai-tasks/src/SakaiTasks.js
@@ -293,9 +293,9 @@ export class SakaiTasks extends SakaiPageableElement {
           </sakai-tasks-create-task>
 
           <div slot="invoker">
-            <a href="javascript:;" @click=${this.editTask} title="${this.i18n.add_task}" aria-label="${this.i18n.add_task}">
-              <button type="button" @click=${this._addTask} class="add-task-button"><sakai-icon type="add" size="small"></sakai-icon>${this.i18n.add_task}</button>
-            </a>
+            <button type="button" @click=${this._addTask} class="btn btn-primary btn-sm d-flex align-items-center ms-auto p-1 pe-2">
+              <i class="si si-add fs-4"></i>${this.i18n.add_new_task}
+            </button>
           </div>
 
         </lion-dialog>