Skip to content

GAUD-10314 - Add dialogs and toasts to show all the current problems #7229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
svanherk merged 1 commit into from
Jul 16, 2026
Merged

GAUD-10314 - Add dialogs and toasts to show all the current problems #7229

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 112 additions & 15 deletions components/page/demo/page-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import '../../alert/alert-toast.js';
import '../../button/button-icon.js';
import '../../button/button-subtle.js';
import '../../button/button.js';
Expand All @@ -6,6 +7,7 @@ import '../../collapsible-panel/collapsible-panel-group.js';
import '../../collapsible-panel/collapsible-panel-summary-item.js';
import '../../demo/demo-page-settings.js';
import '../../dialog/dialog.js';
import '../../dialog/dialog-confirm.js';
import '../../filter/filter.js';
import '../../filter/filter-dimension-set.js';
import '../../filter/filter-dimension-set-value.js';
Expand Down Expand Up @@ -51,7 +53,14 @@ class PageDemo extends LitElement {
immersiveHeaderTitleType: { type: String, attribute: 'immersive-header-title-type' },
layout: { type: String, attribute: 'layout' },
widthType: { type: String, attribute: 'width-type' },
_demoDialogOpened: { state: true }
_mainDialogOpened: { state: true },
_mainToastOpened: { state: true },
_sideNavDialogOpened: { state: true },
_sideNavNativeDialogOpened: { state: true },
_sideNavSecondToastOpened: { state: true },
_sideNavToastOpened: { state: true },
_supportingDialogOpened: { state: true },
_supportingToastOpened: { state: true }
};

static styles = [inputLabelStyles, selectStyles, tableStyles, css`
Expand All @@ -78,7 +87,14 @@ class PageDemo extends LitElement {
this.immersiveHeaderTitleType = urlParams.get('immersiveHeaderTitleType') || 'title-subtitle';
this.layout = urlParams.get('layout') || 'main-only';
this.widthType = urlParams.get('widthType') || 'normal';
this._demoDialogOpened = false;
this._mainDialogOpened = false;
this._mainToastOpened = false;
this._sideNavDialogOpened = false;
this._sideNavNativeDialogOpened = false;
this._sideNavToastOpened = false;
this._sideNavSecondToastOpened = false;
this._supportingDialogOpened = false;
this._supportingToastOpened = false;
}

render() {
Expand All @@ -93,14 +109,6 @@ class PageDemo extends LitElement {
`;
}

#handleDialogClose() {
this._demoDialogOpened = false;
}

#handleDialogOpen() {
this._demoDialogOpened = true;
}

#handleHeaderChange(e) {
this.header = e.target.value;
this.#updateUrlParam('header', this.header);
Expand All @@ -116,6 +124,58 @@ class PageDemo extends LitElement {
this.#updateUrlParam('layout', this.layout);
}

#handleMainDialogClose() {
this._mainDialogOpened = false;
this._mainToastOpened = true;
}

#handleMainDialogOpen() {
this._mainDialogOpened = true;
}

#handleMainToastClose() {
this._mainToastOpened = false;
}

#handleSideNavDialogClose() {
this._sideNavDialogOpened = false;
this._sideNavToastOpened = true;
}

#handleSideNavDialogOpen() {
this._sideNavDialogOpened = true;
}

#handleSideNavNativeDialogClose() {
this._sideNavNativeDialogOpened = false;
this._sideNavSecondToastOpened = true;
}

#handleSideNavNativeDialogOpen() {
this._sideNavNativeDialogOpened = true;
}

#handleSideNavSecondToastClose() {
this._sideNavSecondToastOpened = false;
}

#handleSideNavToastClose() {
this._sideNavToastOpened = false;
}

#handleSupportingDialogClose() {
this._supportingDialogOpened = false;
this._supportingToastOpened = true;
}

#handleSupportingDialogOpen() {
this._supportingDialogOpened = true;
}

#handleSupportingToastClose() {
this._supportingToastOpened = false;
}

#handleVisibilityChange(e) {
const key = e.target.dataset.key;
this[key] = e.target.on;
Expand Down Expand Up @@ -238,7 +298,7 @@ class PageDemo extends LitElement {
<d2l-filter-dimension-set-value key="content" text="Content Topics"></d2l-filter-dimension-set-value>
</d2l-filter-dimension-set>
</d2l-filter>
<d2l-button slot="header-end" primary @click="${this.#handleDialogOpen}">New Assignment</d2l-button>
<d2l-button slot="header-end" primary @click="${this.#handleMainDialogOpen}">New Assignment</d2l-button>
` : nothing }

${this.#renderDemoMainControls()}
Expand Down Expand Up @@ -391,7 +451,7 @@ class PageDemo extends LitElement {
</table>
</d2l-table-wrapper>
<div style="align-items: end; display: flex; height: 500px;">End of Content</div>
<d2l-dialog id="demo-dialog" title-text="New Assignment" ?opened="${this._demoDialogOpened}" @d2l-dialog-close="${this.#handleDialogClose}">
<d2l-dialog id="main-dialog" title-text="New Assignment" ?opened="${this._mainDialogOpened}" @d2l-dialog-close="${this.#handleMainDialogClose}">
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<d2l-input-text label="Assignment Name" value=""></d2l-input-text>
<d2l-input-number label="Points" value="100"></d2l-input-number>
Expand All @@ -401,6 +461,7 @@ class PageDemo extends LitElement {
<d2l-button slot="footer" primary data-dialog-action="create">Create</d2l-button>
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
</d2l-dialog>
<d2l-alert-toast type="success" ?open="${this._mainToastOpened}" @d2l-alert-toast-close="${this.#handleMainToastClose}">Assignment saved.</d2l-alert-toast>
</d2l-page-main>
`;
}
Expand All @@ -410,8 +471,8 @@ class PageDemo extends LitElement {
return html`
<d2l-page-side-nav slot="side-nav">
${this.hasSideNavHeader ? html`
<d2l-button-subtle slot="header-start" text="Add Topic" icon="tier1:plus-default"></d2l-button-subtle>
<d2l-button-icon slot="header-end" text="Collapse All" icon="tier1:arrow-collapse"></d2l-button-icon>
<d2l-button-subtle slot="header-start" text="Add Topic" icon="tier1:plus-default" @click="${this.#handleSideNavDialogOpen}"></d2l-button-subtle>
<d2l-button-icon slot="header-end" text="Collapse All" icon="tier1:arrow-collapse" @click="${this.#handleSideNavNativeDialogOpen}"></d2l-button-icon>
<d2l-button-icon slot="header-end" text="Reorder" icon="tier1:dragger"></d2l-button-icon>
` : nothing}
<d2l-list grid drag-multiple style="width: 100%;">
Expand Down Expand Up @@ -506,6 +567,26 @@ class PageDemo extends LitElement {
</d2l-list-item-nav>
</d2l-list>
<div style="align-items: end; display: flex; height: 150px;">End of Content</div>
<d2l-dialog id="side-nav-dialog" title-text="Add Topic" ?opened="${this._sideNavDialogOpened}" @d2l-dialog-close="${this.#handleSideNavDialogClose}">
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<d2l-input-text label="Topic Name" value=""></d2l-input-text>
<select class="d2l-input-select" aria-label="Topic type">
<option selected>Content Topic</option>
<option>Assignment</option>
<option>Quiz</option>
<option>Discussion</option>
</select>
<d2l-input-checkbox checked>Make visible to learners</d2l-input-checkbox>
</div>
<d2l-button slot="footer" primary data-dialog-action="add">Add</d2l-button>
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
</d2l-dialog>
<d2l-dialog-confirm id="side-nav-native-dialog" title-text="Collapse All" text="Are you sure you want to collapse all units? Any unsaved changes to expanded items will remain." ?opened="${this._sideNavNativeDialogOpened}" @d2l-dialog-close="${this.#handleSideNavNativeDialogClose}">
<d2l-button slot="footer" primary data-dialog-action="yes">Collapse All</d2l-button>
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
</d2l-dialog-confirm>
<d2l-alert-toast type="success" ?open="${this._sideNavToastOpened}" @d2l-alert-toast-close="${this.#handleSideNavToastClose}">Topic added.</d2l-alert-toast>
<d2l-alert-toast ?open="${this._sideNavSecondToastOpened}" @d2l-alert-toast-close="${this.#handleSideNavSecondToastClose}">All units collapsed.</d2l-alert-toast>
</d2l-page-side-nav>
`;
}
Expand All @@ -527,7 +608,7 @@ class PageDemo extends LitElement {
<d2l-input-date label="End Date" value="2026-06-30"></d2l-input-date>
<d2l-input-checkbox checked>Has start date</d2l-input-checkbox>
<d2l-input-checkbox checked>Has end date</d2l-input-checkbox>
<d2l-button-subtle text="Manage Release Conditions"></d2l-button-subtle>
<d2l-button-subtle text="Manage Release Conditions" @click="${this.#handleSupportingDialogOpen}"></d2l-button-subtle>
</div>
</d2l-collapsible-panel>
<d2l-collapsible-panel panel-title="Grading and Assessment">
Expand Down Expand Up @@ -566,6 +647,22 @@ class PageDemo extends LitElement {
</d2l-collapsible-panel>
</d2l-collapsible-panel-group>
<div style="align-items: end; display: flex; height: 150px;">End of Content</div>
<d2l-dialog id="supporting-dialog" title-text="Manage Release Conditions" ?opened="${this._supportingDialogOpened}" @d2l-dialog-close="${this.#handleSupportingDialogClose}">
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<select class="d2l-input-select" aria-label="Condition type">
<option selected>Grade received on an item</option>
<option>Assignment submission</option>
<option>Quiz completion</option>
<option>Content topic visited</option>
</select>
<d2l-input-text label="Item" value="Assignment 1: Research Proposal"></d2l-input-text>
<d2l-input-number label="Minimum grade (%)" value="60"></d2l-input-number>
<d2l-input-checkbox checked>All conditions must be met</d2l-input-checkbox>
</div>
<d2l-button slot="footer" primary data-dialog-action="create">Create</d2l-button>
<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
</d2l-dialog>
<d2l-alert-toast type="success" ?open="${this._supportingToastOpened}" @d2l-alert-toast-close="${this.#handleSupportingToastClose}">Release conditions updated.</d2l-alert-toast>
</d2l-page-supporting>
`;
}
Expand Down