Add name field to workflow editor
Bug: twpowertools:74
Change-Id: I244c541c6d74884c1da9a37413770c2518d18be1
diff --git a/src/workflows/manager/components/AddDialog.js b/src/workflows/manager/components/AddDialog.js
index a2b5691..8bf63db 100644
--- a/src/workflows/manager/components/AddDialog.js
+++ b/src/workflows/manager/components/AddDialog.js
@@ -29,7 +29,6 @@
render() {
return html`
<mwc-dialog
- heading="New workflow"
?open=${this.open}
@opening=${this._openingDialog}
@closing=${this._closingDialog}
diff --git a/src/workflows/manager/components/WorkflowEditor.js b/src/workflows/manager/components/WorkflowEditor.js
index 7da2a4d..4a8ab90 100644
--- a/src/workflows/manager/components/WorkflowEditor.js
+++ b/src/workflows/manager/components/WorkflowEditor.js
@@ -1,7 +1,9 @@
import '@material/web/button/outlined-button.js';
+import '@material/web/textfield/filled-text-field.js';
import './ActionEditor.js';
-import {html, LitElement, nothing} from 'lit';
+import {css, html, LitElement, nothing} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
import {repeat} from 'lit/directives/repeat.js';
import * as pb from '../../proto/main_pb.js';
@@ -12,12 +14,33 @@
readOnly: {type: Boolean},
};
+ static styles = css`
+ .name {
+ width: 100%;
+ margin-bottom: 20px;
+ }
+ `;
+
+ nameRef = createRef();
+
constructor() {
super();
this.workflow = new pb.workflows.Workflow();
this.readOnly = false;
}
+ renderName() {
+ return html`
+ <md-filled-text-field ${ref(this.nameRef)}
+ class="name"
+ placeholder="Untitled workflow"
+ value=${this.workflow.getName()}
+ required
+ @input=${this._nameChanged}>
+ </md-filled-text-field>
+ `;
+ }
+
renderActions() {
return repeat(this._actions(), (action, i) => html`
<wf-action-editor
@@ -43,6 +66,7 @@
render() {
return [
+ this.renderName(),
this.renderActions(),
this.renderAddActionBtn(),
];
@@ -50,12 +74,16 @@
save() {
let allValid = true;
+
+ // Check the workflow name is set
+ allValid &&= this.nameRef.value.reportValidity();
+
+ // Check all the actions are well-formed
const actionEditors = this.renderRoot.querySelectorAll('wf-action-editor');
- for (const editor of actionEditors) {
- const isValid = editor.checkValidity();
- if (!isValid) allValid = false;
- }
+ for (const editor of actionEditors) allValid &&= editor.checkValidity();
+
// @TODO: Save if allValid === true
+
return allValid;
}
@@ -63,6 +91,11 @@
return this.workflow.getActionsList();
}
+ _nameChanged() {
+ this.workflow.setName(this.nameRef.value.value);
+ this._dispatchUpdateEvent();
+ }
+
_addAction() {
let action = new pb.workflows.Action();
let rAction = new pb.workflows.Action.ReplyWithCRAction();