Add ability to save and view a list of workflows
This CL introduces the following functionality:
- Introduces some logic to handle the persistence of workflows in the
browser storage.
- Lets the user save created workflows in the "create workflow" dialog.
- Shows a list of workflows. If the user hasn't added any workflow, a
placeholder image is shown alongside a text which invites the user to
create a new workflow.
Bug: twpowertools:74
Change-Id: Icba09d20468bafc1415b802a3c935e22669546e6
diff --git a/src/workflows/manager/index.js b/src/workflows/manager/index.js
index a9332de..af0f653 100644
--- a/src/workflows/manager/index.js
+++ b/src/workflows/manager/index.js
@@ -6,6 +6,7 @@
import {createRef, ref} from 'lit/directives/ref.js';
import {SHARED_MD3_STYLES} from '../../common/styles/md3.js';
+import {default as WorkflowsStorage, kWorkflowsDataKey} from '../workflowsStorage.js';
export default class WFApp extends LitElement {
static styles = [
@@ -32,10 +33,21 @@
addFabRef = createRef();
+ constructor() {
+ super();
+ this._workflows = undefined;
+ this._updateWorkflows();
+ chrome.storage.onChanged.addListener((changes, areaName) => {
+ if (areaName == 'local' && changes[kWorkflowsDataKey])
+ this._updateWorkflows();
+ });
+ }
+
render() {
return html`
<h1>Workflows</h1>
- <wf-list></wf-list>
+ <p>Workflows allow you to run a customized list of actions on a thread easily.</p>
+ <wf-list .workflows=${this._workflows}></wf-list>
<md-fab ${ref(this.addFabRef)}
icon="add"
@click=${this._showAddDialog}>
@@ -44,6 +56,13 @@
`;
}
+ _updateWorkflows() {
+ WorkflowsStorage.getAll(/* asProtobuf = */ true).then(workflows => {
+ this._workflows = workflows;
+ this.requestUpdate();
+ });
+ }
+
_showAddDialog() {
this.renderRoot.querySelector('wf-add-dialog').open = true;
}