@brightspace-ui/labs 2.30.0 → 2.31.1

package/demo/components/ou-filter/demoDataManager.js

@@ -0,0 +1,128 @@
+import { action, decorate, observable } from 'mobx';
+import { COURSE_OFFERING, includesSearch, Tree } from '../../../src/components/ou-filter/tree-filter.js';
+import { OuFilterDataManager } from '../../../src/components/ou-filter/ou-filter.js';
+
+const orgUnitChildrenCache = new Map();
+function fetchCachedChildren() {
+	return orgUnitChildrenCache;
+}
+
+const OU_TYPES = {
+	ORG: 1,
+	DEPT: 2,
+	COURSE: 3,
+	FAC: 7,
+	SEM: 25
+};
+
+/* eslint-disable no-console */
+export class DemoDataManager extends OuFilterDataManager {
+
+	constructor(searchFn) {
+		super();
+		this._orgUnitTree = new Tree({});
+		this._searchFn = searchFn;
+	}
+
+	get orgUnitTree() {
+		return this._orgUnitTree;
+	}
+
+	// the method called only when Tree.isDynamic === true
+	async fetchRelevantChildren(id, bookmark) {
+		console.log(`fetchRelevantChildren ${id}, ${bookmark}`);
+
+		let results;
+		// one case for each child in "Faculty 2 - children loaded on open" (id 9)
+		switch (id) {
+			case 9:
+				if (bookmark !== 'orgUnit-9') {
+					results = { PagingInfo: { HasMoreItems: true, Bookmark: 'orgUnit-9' }, Items: [
+						{ Id: 20, Name: 'Department 3', Type: OU_TYPES.DEPT, Parents: [9], IsActive: false }
+					] };
+				} else {
+					results = { PagingInfo: { HasMoreItems: false, Bookmark: null }, Items: [
+						{ Id: 30, Name: 'Department 4', Type: OU_TYPES.DEPT, Parents: [9], IsActive: false }
+					] };
+				}
+				break;
+			case 20:
+				results = { PagingInfo: { HasMoreItems: false, Bookmark: null }, Items: [
+					{ Id: 21, Name: 'Department 3 Course 1', Type: OU_TYPES.COURSE, Parents: [20], IsActive: false },
+					{ Id: 22, Name: 'Department 3 Course 2', Type: OU_TYPES.COURSE, Parents: [20], IsActive: false }
+				] };
+				break;
+			case 30:
+				results = { PagingInfo: { HasMoreItems: false, Bookmark: null }, Items: [
+					{ Id: 31, Name: 'Department 3 Course 1', Type: OU_TYPES.COURSE, Parents: [20], IsActive: false }
+				] };
+				break;
+			default:
+				// no-op: return object with no children
+				return await super.fetchRelevantChildren(id, bookmark);
+		}
+
+		// example of handling cache
+		if (!orgUnitChildrenCache.has(id)) {
+			orgUnitChildrenCache.set(id, results);
+		} else {
+			const cached = orgUnitChildrenCache.get(id);
+			cached.PagingInfo = results.PagingInfo;
+			cached.Items.push(...results.Items);
+		}
+
+		// return result in 2 sec to show loading spinner
+		return await new Promise(resolve => setTimeout(() => resolve(results), 2000));
+	}
+
+	loadData() {
+		const lastSearchResults = null;
+		const orgUnits = [
+			{ Id: 1, Name: 'Course 1', Type: OU_TYPES.COURSE, Parents: [3, 4], IsActive: false },
+			{ Id: 2, Name: 'Course 2', Type: OU_TYPES.COURSE, Parents: [3, 10], IsActive: true },
+			{ Id: 6, Name: 'Course 3 has a surprisingly long name, but nonetheless this kind of thing is bound to happen sometimes and we do need to design for it. Is that not so?', Type: OU_TYPES.COURSE, Parents: [7, 4], IsActive: true },
+			{ Id: 8, Name: 'ZCourse 4', Type: OU_TYPES.COURSE, Parents: [5], IsActive: false },
+			{ Id: 3, Name: 'Department 1', Type: OU_TYPES.DEPT, Parents: [5], IsActive: false },
+			{ Id: 7, Name: 'Department 2 has a longer name', Type: OU_TYPES.DEPT, Parents: [5], IsActive: false },
+			{ Id: 4, Name: 'Semester 1', Type: OU_TYPES.SEM, Parents: [6606], IsActive: false },
+			{ Id: 10, Name: 'Semester 2', Type: OU_TYPES.SEM, Parents: [6606], IsActive: false },
+			{ Id: 5, Name: 'Faculty 1 - children loaded on first load', Type: OU_TYPES.FAC, Parents: [6606], IsActive: false },
+			{ Id: 9, Name: 'Faculty 2 - children loaded on open', Type: OU_TYPES.FAC, Parents: [6606, 10], IsActive: false },
+			{ Id: 6606, Name: 'Dev', Type: OU_TYPES.ORG, Parents: [0], IsActive: false }
+		];
+		const isOrgUnitsTruncated = true;
+
+		this._orgUnitTree = new Tree({
+			// add in any nodes from the most recent search; otherwise
+			// the search will blink out and come back, and also drop any "load more" results
+			nodes: lastSearchResults ? [...orgUnits, ...lastSearchResults] : orgUnits,
+			leafTypes: [COURSE_OFFERING],
+			invisibleTypes: [OU_TYPES.SEM],
+			selectedIds: [1, 21],
+			ancestorIds: [],
+			oldTree: this.orgUnitTree,
+			isDynamic: isOrgUnitsTruncated,
+			// preload the tree with any children queries we've already run: otherwise parts of the
+			// tree blink out and then come back as they are loaded again
+			extraChildren: isOrgUnitsTruncated ?
+				fetchCachedChildren() || new Map() :
+				null,
+			searchFn: this._searchFn ? this._searchFn : includesSearch
+		});
+
+		// for perf testing
+		// this._orgUnitTree = createNaryTree(5, 5000);
+	}
+
+	// the method called only when Tree.isDynamic === true
+	async orgUnitSearch(searchString, bookmark) {
+		console.log(`orgUnitSearch ${searchString}, ${bookmark}`);
+
+		return await super.orgUnitSearch(searchString, bookmark);
+	}
+}
+
+decorate(DemoDataManager, {
+	_orgUnitTree: observable,
+	loadData: action
+});

package/demo/components/ou-filter/ouFilterDemoPage.js

@@ -0,0 +1,103 @@
+import '@brightspace-ui/core/components/inputs/input-search.js';
+
+import { css, html } from 'lit';
+import { DemoDataManager } from './demoDataManager.js';
+import { MobxLitElement } from '@adobe/lit-mobx';
+import { startsWithSearch } from '../../../src/components/ou-filter/tree-filter.js';
+
+function parseHash(hash) {
+	return hash.substring(1).split(';').reduce((acc, curr) => {
+		const [key, val] = curr.split('=');
+		acc.set(key, val);
+		return acc;
+	}, new Map());
+}
+
+/* eslint-disable no-console */
+class OuFilterDemoPage extends MobxLitElement {
+
+	static get styles() {
+		return [
+			css`
+				:host {
+					display: inline-block;
+				}
+				div {
+					padding: 30px;
+				}
+				label {
+					display: block;
+					margin-top: 25px;
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+		this.dataManager = new DemoDataManager();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		const hashMap = parseHash(window.location.hash);
+
+		if (hashMap.has('dir')) {
+			document.documentElement.setAttribute('dir', hashMap.get('dir'));
+		}
+
+		if (hashMap.has('search') && hashMap.get('search') === 'startswith') {
+			this.dataManager = new DemoDataManager(startsWithSearch);
+		}
+	}
+
+	firstUpdated() {
+		this.dataManager.loadData();
+	}
+
+	render() {
+		return html`
+			<div>
+				<d2l-labs-ou-filter
+					.dataManager=${this.dataManager}
+					select-all-ui
+					@d2l-labs-ou-filter-change="${this._handleOrgUnitFilterChange}"
+				></d2l-labs-ou-filter>
+				<label for="org-unit-id-search">Test visibility modifiers: show only branches containing org unit ids</label>
+				<d2l-input-search
+					id="org-unit-id-search"
+					label="Demo search input"
+					@d2l-input-search-searched="${this._handleInputSearchChange}">
+				</d2l-input-search>
+			</div>
+		`;
+	}
+
+	_handleInputSearchChange(event) {
+		const searchInput = event.detail.value;
+		const visibilityModifierKey = 'searchInputFilter';
+		if (!searchInput) {
+			this.dataManager.orgUnitTree.removeVisibilityModifier(visibilityModifierKey);
+			return;
+		}
+
+		// expect CSV of org unit ids
+		const searchedOrgUnitIds = searchInput.split(',').map(orgUnitIdStr => Number(orgUnitIdStr));
+		const tree = this.dataManager.orgUnitTree;
+
+		// example: only load branches that contain any of the searched orgUnitIds
+		tree.setVisibilityModifier(
+			visibilityModifierKey,
+			(id) => tree.hasDescendantsInList(id, searchedOrgUnitIds)
+		);
+	}
+
+	_handleOrgUnitFilterChange(event) {
+		event.stopPropagation();
+		console.log(event.target.selected);
+	}
+
+}
+
+customElements.define('d2l-labs-oufilter-demo-page', OuFilterDemoPage);

package/demo/components/ou-filter/util.js

@@ -0,0 +1,38 @@
+import { Tree } from '../../../src/components/ou-filter/tree-filter.js';
+
+let idCounter = 1;
+
+function createNode(id, parents, type) {
+	return { Id: id, Name: `Node ${id}`, Type: type, Parents: parents, IsActive: true };
+}
+
+function spawnChildren(node, n) {
+	const newNodes = [];
+	for (let i = 1; i <= n; i++) {
+		newNodes.push(createNode(++idCounter, [node.Id], node.Type + 1));
+	}
+	return newNodes;
+}
+
+export function createNaryTree(n, numNodes) {
+
+	idCounter = 1;
+
+	const nodes = [createNode(1, [0], 0)];
+	let newNodes = [...nodes];
+
+	// create each layer of the tree until we have the requisite total number of nodes; drop any excess nodes
+	while (nodes.length < numNodes) {
+
+		let children = newNodes.flatMap(node => spawnChildren(node, n));
+		if (children.length + nodes.length > numNodes) {
+			children = children.slice(0, numNodes - nodes.length);
+		}
+
+		nodes.push(...children);
+		newNodes = children;
+	}
+
+	const numLevels = Math.ceil(Math.log(numNodes - 1) / Math.log(n)); // including level 0 (root node)
+	return new Tree({ nodes, leafTypes: [numLevels] });
+}

package/package.json

@@ -47,10 +47,11 @@
     "./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
     "./components/view-toggle.js": "./src/components/view-toggle/view-toggle.js",
     "./components/wizard.js": "./src/components/wizard/wizard.js",
-    "./components/wizard-step.js": "./src/components/wizard/step.js",
+    "./components/wizard-step.js": "./src/components/wizard/wizard-step.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js",
+    "./demo/components/ou-filter/*.js": "./demo/components/ou-filter/*.js",
     "./utilities/pub-sub.js": "./src/utilities/pub-sub/pub-sub.js",
     "./utilities/reactive-store.js": "./src/utilities/reactive-store/reactive-store.js",
     "./utilities/lit-router": "./src/utilities/router/index.js"
@@ -93,7 +94,8 @@
   "files": [
     "labs.serge.json",
     "/src",
-    "/demo/components/media-player/static"
+    "/demo/components/media-player/static",
+    "/demo/components/ou-filter/*.js"
   ],
   "publishConfig": {
     "access": "public"
@@ -112,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2.1.2"
   },
-  "version": "2.30.0"
+  "version": "2.31.1"
 }

package/src/components/ou-filter/README.md

@@ -0,0 +1,74 @@
+# Org Unit Filter
+
+A Lit component that renders an org unit structure tree. It supports load more and searching functionality.
+
+## Org Unit Filter [d2l-labs-ou-filter]
+
+<!-- docs: demo align:flex-start autoSize:false size:xlarge -->
+```html
+<script type="module">
+  import '@brightspace-ui/labs/demo/components/ou-filter/ouFilterDemoPage.js';
+</script> 
+<d2l-labs-oufilter-demo-page></d2l-labs-oufilter-demo-page>
+```
+
+### General Usage
+
+```js
+import { action, decorate, observable } from 'mobx';
+import { MobxLitElement } from '@adobe/lit-mobx';
+import { OuFilterDataManager } from '@brightspace-ui-labs/ou-filter/ou-filter.js';
+
+class FooDataManager extends OuFilterDataManager {
+
+	constructor() {
+		super();
+		this._orgUnitTree = new Tree({});
+	}
+
+	async loadData() {
+		this._orgUnitTree = new Tree({ nodes: ..., ... });
+	}
+}
+
+decorate(FooDataManager, {
+	_orgUnitTree: observable,
+	loadData: action
+});
+
+class FooPage extends MobxLitElement {
+  constructor() {
+    this.dataManager = new FooDataManager();
+  }
+
+  firstUpdated() {
+    this.dataManager.loadData();
+  }
+
+  render () {
+    return html`
+      <d2l-labs-ou-filter
+        .dataManager=${this.dataManager}
+        select-all-ui
+        @d2l-labs-ou-filter-change="${this._orgUnitFilterChange}"
+      ></d2l-labs-ou-filter>`;
+  }
+
+  _orgUnitFilterChange() {
+    console.log(event.target.selected);
+  }
+}
+```
+
+<!-- docs: start hidden content -->
+
+**Properties:**
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| dataManager | Object | {empty} | Object that extends OuFilterDataManager. It provides and manages data for d2l-labs-ou-filter |
+| select-all-ui | Boolean | {empty} | Shows Select all button |
+| d2l-labs-ou-filter-change | Function | {empty} | Event handler that is fired when selection is changed |
+| disabled | Boolean | {empty} | Render the filter in a disabled state |
+
+<!-- docs: end hidden content -->

package/src/components/wizard/README.md

@@ -1,34 +1,52 @@
 # Wizard
 
-The `<d2l-labs-wizard>` can be used to be display a stepped workflow.
+The wizard component can be used to display a stepped workflow.
 
-## Usage
+## Wizard [d2l-labs-wizard]
 
+<!-- docs: demo code -->
 ```html
 <script type="module">
-    import '@brightspace-ui/labs/components/wizard.js';
-	import '@brightspace-ui/labs/components/wizard-step.js';
+  import '@brightspace-ui/labs/components/wizard.js';
+  import '@brightspace-ui/labs/components/wizard-step.js';
+  // <!-- docs: start hidden content -->
+  requestAnimationFrame(() => {
+    const wizard = document.getElementById('wizard');
+    wizard.addEventListener('stepper-next', function() {
+      wizard.next();
+    });
+    wizard.addEventListener('stepper-restart', function() {
+      wizard.restart();
+    });
+  })
+  // <!-- docs: end hidden content -->
 </script>
-<d2l-labs-wizard id="wizard">
-	<d2l-labs-wizard-step step-title="Step 1">
-		<p> First step </p>
-	</d2l-labs-wizard-step>
-
-	<d2l-labs-wizard-step step-title="Step 2">
-		<p> Second step </p>
-	</d2l-labs-wizard-step>
+<d2l-labs-wizard
+  id="wizard"
+  selected-step="1">
+  <d2l-labs-wizard-step
+    next-button-aria-label="Go to step 2"
+    step-title="Get Started"
+    hide-restart-button="true">
+    <p>First Step</p>
+  </d2l-labs-wizard-step>
+
+  <d2l-labs-wizard-step
+    aria-title="This is the second step"
+    restart-button-tooltip="Restart this wizard">
+    <p>Second Step</p>
+  </d2l-labs-wizard-step>
+
+  <d2l-labs-wizard-step
+    step-title="Almost Done"
+    next-button-title="Done"
+    next-button-tooltip="Save this wizard">
+    <p>Last Step</p>
+  </d2l-labs-wizard-step>
 </d2l-labs-wizard>
-<script>
-	var wizard = document.getElementById('wizard');
-	wizard.addEventListener('stepper-next', function() {
-		wizard.next();
-	});
-	wizard.addEventListener('stepper-restart', function() {
-		wizard.restart();
-	});
-</script>
 ```
 
+<!-- docs: start hidden content -->
 
 ### Properties:
 
@@ -47,3 +65,4 @@ The `<d2l-labs-wizard>` can be used to be display a stepped workflow.
 - `stepper-next`: dispatched when the Next button is clicked
 - `stepper-restart`: dispatched when the Restart button is clicked
 
+<!-- docs: end hidden content -->