Workflows: add confirmation dialog
This confirmation dialog is shown before the workflow is executed (the
actual workflow execution will be developed next).
Bug: twpowertools:74
Change-Id: If8466c9010506861ed1ad0d820c56bbba69e6f3f
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
new file mode 100644
index 0000000..8b778e6
--- /dev/null
+++ b/src/contentScripts/communityConsole/workflows/components/TwptConfirmDialog.js
@@ -0,0 +1,69 @@
+import '@material/mwc-dialog/mwc-dialog.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+
+import {css, html, LitElement} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
+
+export default class TwptConfirmDialog extends LitElement {
+ static properties = {
+ open: {type: Boolean},
+ workflow: {type: Object},
+ };
+
+ static styles = css`
+ :host {
+ --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
+ --mdc-dialog-z-index: 200;
+ }
+
+ .workflow {
+ font-weight: 500;
+ }
+ `;
+
+ constructor() {
+ super();
+ this.open = false;
+ }
+
+ render() {
+ return html`
+ <mwc-dialog
+ ?open=${this.open}
+ @opening=${this._openingDialog}
+ @closing=${this._closingDialog}>
+ <p>
+ Are you sure you want to run workflow
+ <span class="workflow">${this.workflow?.getName?.()}</span> for all
+ the selected threads?
+ </p>
+ <md-filled-button
+ slot="primaryAction"
+ label="Run workflow"
+ @click=${this._dispatchConfirmEvent}>
+ </md-filled-button>
+ <md-text-button
+ slot="secondaryAction"
+ dialogAction="cancel"
+ label="Cancel">
+ </md-text-button>
+ </mwc-dialog>
+ `;
+ }
+
+ _openingDialog() {
+ this.open = true;
+ }
+
+ _closingDialog() {
+ this.open = false;
+ }
+
+ _dispatchConfirmEvent() {
+ const e = new Event('confirm');
+ this.dispatchEvent(e);
+ this.open = false;
+ }
+}
+window.customElements.define('twpt-confirm-dialog', TwptConfirmDialog);
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
index a706a93..71782f3 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
@@ -9,6 +9,7 @@
import {css, html, LitElement, nothing, unsafeCSS} from 'lit';
import {map} from 'lit/directives/map.js';
+import {createRef, ref} from 'lit/directives/ref.js';
import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
@@ -36,6 +37,8 @@
`,
];
+ menuRef = createRef();
+
renderWorkflowItems() {
if (!this.workflows) return nothing;
if (this.workflows?.length == 0)
@@ -48,7 +51,7 @@
`;
return map(this.workflows, w => html`
<md-menu-item
- @click="${() => this._showWorkflow(w.uuid)}">
+ @click="${() => this._dispatchSelectEvent(w.uuid)}">
<span class="workflow-item" slot="start">
${w.proto.getName()}
</span>
@@ -87,15 +90,21 @@
<md-standard-icon-button icon="more_vert"></md-standard-icon-button>
${this.renderBadge()}
</div>
- <md-menu slot="menu">
+ <md-menu ${ref(this.menuRef)} slot="menu">
${this.renderMenuItems()}
</md-menu>
</md-menu-button>
`;
}
- _showWorkflow(uuid) {
- console.log(`Clicked workflow ${uuid}.`);
+ _dispatchSelectEvent(uuid) {
+ const e = new CustomEvent('select', {
+ detail: {
+ selectedWorkflowUuid: uuid,
+ },
+ });
+ this.dispatchEvent(e);
+ this.menuRef.value.open = false;
}
_openWorkflowManager() {
diff --git a/src/contentScripts/communityConsole/workflows/components/index.js b/src/contentScripts/communityConsole/workflows/components/index.js
index 8f73fee..3041e41 100644
--- a/src/contentScripts/communityConsole/workflows/components/index.js
+++ b/src/contentScripts/communityConsole/workflows/components/index.js
@@ -1,17 +1,24 @@
import './TwptWorkflowsMenu.js';
+import './TwptConfirmDialog.js';
import {css, html, LitElement} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
import WorkflowsStorage from '../../../../workflows/workflowsStorage.js';
export default class TwptWorkflowsInject extends LitElement {
static properties = {
_workflows: {type: Object},
+ _selectedWorkflowUuid: {type: String},
};
+ confirmDialogRef = createRef();
+ workflowDialogRef = createRef();
+
constructor() {
super();
this._workflows = null;
+ this._selectedWorkflowUuid = null;
this.addEventListener('twpt-workflows-update', e => {
const workflows = e.detail?.workflows ?? [];
WorkflowsStorage.convertRawListToProtobuf(workflows);
@@ -21,9 +28,41 @@
render() {
return html`
- <twpt-workflows-menu .workflows=${this._workflows}></twpt-workflows-menu>
- <twpt-workflow-dialog></twpt-workflow-dialog>
+ <twpt-workflows-menu
+ .workflows=${this._workflows}
+ @select=${this._workflowSelected}>
+ </twpt-workflows-menu>
+ <twpt-confirm-dialog ${ref(this.confirmDialogRef)}
+ .workflow=${this._selectedWorkflow}
+ @confirm=${this._startWorkflow}>
+ </twpt-confirm-dialog>
+ <twpt-workflow-dialog ${ref(this.workflowDialogRef)}>
+ </twpt-workflow-dialog>
`;
}
+
+ _workflowSelected(e) {
+ const uuid = e.detail?.selectedWorkflowUuid;
+ if (!uuid) {
+ console.error('Didn\'t get a correct uuid for the selected workflow.');
+ return;
+ }
+ this._selectedWorkflowUuid = uuid;
+ this.confirmDialogRef.value.open = true;
+ }
+
+ _startWorkflow() {
+ // @TODO
+ console.log(`Start workflow ${this._selectedWorkflowUuid}!`);
+ }
+
+ get _selectedWorkflow() {
+ for (const w of this._workflows) {
+ if (w.uuid == this._selectedWorkflowUuid)
+ return w.proto;
+ }
+
+ return null;
+ }
}
window.customElements.define('twpt-workflows-inject', TwptWorkflowsInject);