Show workflows in thread list menu
This CL adds the logic for displaying the list of workflows in the menu
which is added to thread lists. Before, the list included some fake
names. It also adds a button to manage workflows.
The next step is to create the components/logic which will allow the
user to execute the workflow in the selected threads.
Bug: twpowertools:74
Change-Id: I22d0be8a101f9e167b9408bb6046299f3bd3c787
diff --git a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
index 1399228..a706a93 100644
--- a/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
+++ b/src/contentScripts/communityConsole/workflows/components/TwptWorkflowsMenu.js
@@ -1,40 +1,92 @@
+import '@material/web/icon/icon.js';
import '@material/web/iconbutton/standard-icon-button.js';
-import '@material/web/menu/menu-button.js';
+import '@material/web/list/list-divider.js';
import '@material/web/menu/menu.js';
+import '@material/web/menu/menu-button.js';
import '@material/web/menu/menu-item.js';
-import {css, html, LitElement} from 'lit';
+import consoleCommonStyles from '!!raw-loader!../../../../static/css/common/console.css';
+
+import {css, html, LitElement, nothing, unsafeCSS} from 'lit';
import {map} from 'lit/directives/map.js';
-import {range} from 'lit/directives/range.js';
import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
export default class TwptWorkflowsMenu extends LitElement {
+ static properties = {
+ workflows: {type: Object},
+ };
+
static styles = [
SHARED_MD3_STYLES,
+ css`${unsafeCSS(consoleCommonStyles)}`,
css`
.workflow-item {
padding-inline: 1em;
}
+
+ /* Custom styles to override the common button with badge styles */
+ .TWPT-btn--with-badge {
+ padding-bottom: 0!important;
+ }
+
+ .TWPT-btn--with-badge .TWPT-badge {
+ bottom: 8px!important;
+ }
`,
];
- renderMenuItems() {
- return map(
- range(8),
- i => html`
- <md-menu-item @click="${this._showWorkflow}" data-workflow-id="${
- i}"><span class="workflow-item" slot="start">Workflow ${
- i}</span></md-menu-item>
+ renderWorkflowItems() {
+ if (!this.workflows) return nothing;
+ if (this.workflows?.length == 0)
+ return html`
+ <md-menu-item disabled>
+ <span class="workflow-item" slot="start">
+ No workflows
+ </span>
+ </md-menu-item>
+ `;
+ return map(this.workflows, w => html`
+ <md-menu-item
+ @click="${() => this._showWorkflow(w.uuid)}">
+ <span class="workflow-item" slot="start">
+ ${w.proto.getName()}
+ </span>
+ </md-menu-item>
`);
}
+ renderMenuItems() {
+ return [
+ this.renderWorkflowItems(),
+ html`
+ <md-list-divider></md-list-divider>
+ <md-menu-item
+ @click="${() => this._openWorkflowManager()}">
+ <span class="workflow-item" slot="start">
+ Manage workflows...
+ </span>
+ </md-menu-item>
+ `,
+ ];
+ }
+
+ // Based on createExtBadge() in ../../utils/common.js.
+ renderBadge() {
+ return html`
+ <div class="TWPT-badge">
+ <md-icon>repeat</md-icon>
+ </div>
+ `;
+ }
+
render() {
- // The button is based in the button created in the
- // addButtonToThreadListActions function in file ../../utils/common.js.
return html`
<md-menu-button>
- <md-standard-icon-button slot="button" icon="more_vert"></md-standard-icon-button>
+ <div slot="button" class="TWPT-btn--with-badge">
+ <md-standard-icon-button icon="more_vert"></md-standard-icon-button>
+ ${this.renderBadge()}
+ </div>
<md-menu slot="menu">
${this.renderMenuItems()}
</md-menu>
@@ -42,9 +94,13 @@
`;
}
- _showWorkflow(e) {
- console.log(
- `Clicked workflow ${e.target.getAttribute('data-workflow-id')}.`);
+ _showWorkflow(uuid) {
+ console.log(`Clicked workflow ${uuid}.`);
+ }
+
+ _openWorkflowManager() {
+ const e = new Event('twpt-open-workflow-manager');
+ document.dispatchEvent(e);
}
}
window.customElements.define('twpt-workflows-menu', TwptWorkflowsMenu);