Workflow manager: edit and delete workflows
This CL adds the ability to view/edit and delete workflows in the
workflow manager. With this, the workflow manager initial prototype is
complete, since it allows the user to fully manage their workflows, even
if the UI might be subject to change to further improve it in the
future.
Bug: twpowertools:74
Change-Id: I4f8d1b7ab54dcc600dbd10fcb8e605bcb61d36bb
diff --git a/src/workflows/manager/components/WorkflowDialog.js b/src/workflows/manager/components/WorkflowDialog.js
new file mode 100644
index 0000000..19ff796
--- /dev/null
+++ b/src/workflows/manager/components/WorkflowDialog.js
@@ -0,0 +1,68 @@
+import '@material/mwc-dialog/mwc-dialog.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/filled-button.js';
+import './WorkflowEditor.js';
+
+import {css, html, LitElement} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
+
+import * as pb from '../../proto/main_pb.js';
+
+export default class WFWorkflowDialog extends LitElement {
+ static properties = {
+ open: {type: Boolean},
+ uuid: {type: String},
+ workflow: {type: Object},
+ };
+
+ static styles = css`
+ :host {
+ --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
+ }
+ `;
+
+ workflowEditorRef = createRef();
+
+ constructor() {
+ super();
+ this.open = false;
+ this.workflow = new pb.workflows.Workflow();
+ }
+
+ render() {
+ return html`
+ <mwc-dialog
+ ?open=${this.open}
+ @opening=${this._openingDialog}
+ @closing=${this._closingDialog}>
+ <wf-workflow-editor ${ref(this.workflowEditorRef)}
+ .workflow=${this.workflow}>
+ </wf-workflow-editor>
+ <md-filled-button
+ slot="primaryAction"
+ label="Save"
+ @click=${this._save}>
+ </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;
+ }
+
+ _save() {
+ const success = this.workflowEditorRef.value.save(this.uuid);
+ if (success) this.open = false;
+ }
+}
+window.customElements.define('wf-workflow-dialog', WFWorkflowDialog);