Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 1 | import '@material/web/icon/icon.js'; |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 2 | import '@material/web/iconbutton/standard-icon-button.js'; |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 3 | import '@material/web/list/list-divider.js'; |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 4 | import '@material/web/menu/menu.js'; |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 5 | import '@material/web/menu/menu-button.js'; |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 6 | import '@material/web/menu/menu-item.js'; |
| 7 | |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 8 | import consoleCommonStyles from '!!raw-loader!../../../../static/css/common/console.css'; |
| 9 | |
| 10 | import {css, html, LitElement, nothing, unsafeCSS} from 'lit'; |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 11 | import {map} from 'lit/directives/map.js'; |
Adrià Vilanova Martínez | ca25b68 | 2022-10-24 00:11:03 +0200 | [diff] [blame] | 12 | import {createRef, ref} from 'lit/directives/ref.js'; |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 13 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 14 | import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js'; |
| 15 | |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 16 | export default class TwptWorkflowsMenu extends LitElement { |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 17 | static properties = { |
| 18 | workflows: {type: Object}, |
| 19 | }; |
| 20 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 21 | static styles = [ |
| 22 | SHARED_MD3_STYLES, |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 23 | css`${unsafeCSS(consoleCommonStyles)}`, |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 24 | css` |
| 25 | .workflow-item { |
| 26 | padding-inline: 1em; |
| 27 | } |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 28 | |
| 29 | /* Custom styles to override the common button with badge styles */ |
| 30 | .TWPT-btn--with-badge { |
| 31 | padding-bottom: 0!important; |
| 32 | } |
| 33 | |
| 34 | .TWPT-btn--with-badge .TWPT-badge { |
| 35 | bottom: 8px!important; |
| 36 | } |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 37 | `, |
| 38 | ]; |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 39 | |
Adrià Vilanova Martínez | ca25b68 | 2022-10-24 00:11:03 +0200 | [diff] [blame] | 40 | menuRef = createRef(); |
| 41 | |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 42 | renderWorkflowItems() { |
| 43 | if (!this.workflows) return nothing; |
| 44 | if (this.workflows?.length == 0) |
| 45 | return html` |
| 46 | <md-menu-item disabled> |
| 47 | <span class="workflow-item" slot="start"> |
| 48 | No workflows |
| 49 | </span> |
| 50 | </md-menu-item> |
| 51 | `; |
| 52 | return map(this.workflows, w => html` |
| 53 | <md-menu-item |
Adrià Vilanova Martínez | ca25b68 | 2022-10-24 00:11:03 +0200 | [diff] [blame] | 54 | @click="${() => this._dispatchSelectEvent(w.uuid)}"> |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 55 | <span class="workflow-item" slot="start"> |
| 56 | ${w.proto.getName()} |
| 57 | </span> |
| 58 | </md-menu-item> |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 59 | `); |
| 60 | } |
| 61 | |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 62 | renderMenuItems() { |
| 63 | return [ |
| 64 | this.renderWorkflowItems(), |
| 65 | html` |
| 66 | <md-list-divider></md-list-divider> |
| 67 | <md-menu-item |
| 68 | @click="${() => this._openWorkflowManager()}"> |
| 69 | <span class="workflow-item" slot="start"> |
| 70 | Manage workflows... |
| 71 | </span> |
| 72 | </md-menu-item> |
| 73 | `, |
| 74 | ]; |
| 75 | } |
| 76 | |
| 77 | // Based on createExtBadge() in ../../utils/common.js. |
| 78 | renderBadge() { |
| 79 | return html` |
| 80 | <div class="TWPT-badge"> |
| 81 | <md-icon>repeat</md-icon> |
| 82 | </div> |
| 83 | `; |
| 84 | } |
| 85 | |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 86 | render() { |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 87 | return html` |
| 88 | <md-menu-button> |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 89 | <div slot="button" class="TWPT-btn--with-badge"> |
| 90 | <md-standard-icon-button icon="more_vert"></md-standard-icon-button> |
| 91 | ${this.renderBadge()} |
| 92 | </div> |
Adrià Vilanova Martínez | ca25b68 | 2022-10-24 00:11:03 +0200 | [diff] [blame] | 93 | <md-menu ${ref(this.menuRef)} slot="menu"> |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 94 | ${this.renderMenuItems()} |
| 95 | </md-menu> |
| 96 | </md-menu-button> |
| 97 | `; |
| 98 | } |
| 99 | |
Adrià Vilanova Martínez | ca25b68 | 2022-10-24 00:11:03 +0200 | [diff] [blame] | 100 | _dispatchSelectEvent(uuid) { |
| 101 | const e = new CustomEvent('select', { |
| 102 | detail: { |
| 103 | selectedWorkflowUuid: uuid, |
| 104 | }, |
| 105 | }); |
| 106 | this.dispatchEvent(e); |
| 107 | this.menuRef.value.open = false; |
Adrià Vilanova Martínez | 96ae96f | 2022-10-17 23:50:36 +0200 | [diff] [blame] | 108 | } |
| 109 | |
| 110 | _openWorkflowManager() { |
| 111 | const e = new Event('twpt-open-workflow-manager'); |
| 112 | document.dispatchEvent(e); |
Adrià Vilanova Martínez | 2788d12 | 2022-10-10 22:06:25 +0200 | [diff] [blame] | 113 | } |
| 114 | } |
| 115 | window.customElements.define('twpt-workflows-menu', TwptWorkflowsMenu); |