Add validation to workflow creator attribute

client/src/components/SchemaOrg/CreatorEditor.vue

@@ -42,6 +42,12 @@
     </span>
 </template>
 
+<style>
+.error {
+    color: red;
+}
+</style>
+
 <script>
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit, faTimes } from "@fortawesome/free-solid-svg-icons";

client/src/components/SchemaOrg/OrganizationForm.vue

@@ -6,11 +6,14 @@
             <span v-b-tooltip.hover title="Hide Attribute"
                 ><FontAwesomeIcon icon="eye-slash" @click="onHide(attribute.key)"
             /></span>
+            <div v-if="currentErrors[attribute.key]" class="error">{{ currentErrors[attribute.key] }}</div>
             <b-form-input
                 :id="attribute.key"
                 v-model="currentValues[attribute.key]"
                 :placeholder="'Enter ' + attribute.placeholder + '.'"
-                :type="attribute.type">
+                :type="attribute.type"
+                :state="currentErrors[attribute.key] ? false : null"
+                @click="removeErrorMessage(attribute.key)">
             </b-form-input>
         </div>
         <div role="group" class="form-group">
@@ -55,6 +58,7 @@ export default {
     },
     data() {
         const currentValues = {};
+        const currentErrors = {};
         const show = {};
         for (const attribute of ATTRIBUTES) {
             const showAttribute = attribute in this.organization;
@@ -73,6 +77,7 @@ export default {
             attributeInfo: ATTRIBUTES_INFO,
             show: show,
             currentValues: currentValues,
+            currentErrors: currentErrors,
             addAttribute: null,
             schemaOrgClass: "Organization",
         };

client/src/components/SchemaOrg/PersonForm.vue

@@ -6,11 +6,14 @@
             <span v-b-tooltip.hover title="Hide Attribute"
                 ><FontAwesomeIcon icon="eye-slash" @click="onHide(attribute.key)"
             /></span>
+            <div v-if="currentErrors[attribute.key]" class="error">{{ currentErrors[attribute.key] }}</div>
             <b-form-input
                 :id="attribute.key"
                 v-model="currentValues[attribute.key]"
                 :placeholder="'Enter ' + attribute.placeholder + '.'"
-                :type="attribute.type">
+                :type="attribute.type"
+                :state="currentErrors[attribute.key] ? false : null"
+                @click="removeErrorMessage(attribute.key)">
             </b-form-input>
         </div>
         <div role="group" class="form-group">
@@ -60,6 +63,7 @@ export default {
     },
     data() {
         const currentValues = {};
+        const currentErrors = {};
         const show = {};
         for (const attribute of ATTRIBUTES) {
             const showAttribute = attribute in this.person;
@@ -78,6 +82,7 @@ export default {
             attributeInfo: ATTRIBUTES_INFO,
             show: show,
             currentValues: currentValues,
+            currentErrors: currentErrors,
             addAttribute: null,
             schemaOrgClass: "Person",
         };

client/src/components/SchemaOrg/ThingFormMixin.js

@@ -27,6 +27,7 @@ export default {
     methods: {
         onReset(evt) {
             evt.preventDefault();
+            this.removeErrorMessage();
             this.$emit("onReset");
         },
         onHide(attributeKey) {
@@ -34,21 +35,43 @@ export default {
         },
         onSave(evt) {
             evt.preventDefault();
-            const newThing = {};
-            newThing.class = this.schemaOrgClass;
-            for (const attributeInfo of this.attributeInfo) {
-                const attribute = attributeInfo.key;
-                if (this.show[attribute]) {
-                    let value = this.currentValues[attribute];
-                    if (attribute == "email") {
-                        if (value.indexOf("mailto:") !== 0) {
-                            value = "mailto:" + value;
+            if (this.validate()) {
+                const newThing = {};
+                newThing.class = this.schemaOrgClass;
+                for (const attributeInfo of this.attributeInfo) {
+                    const attribute = attributeInfo.key;
+                    if (this.show[attribute]) {
+                        let value = this.currentValues[attribute];
+                        if (attribute == "email") {
+                            if (value.indexOf("mailto:") !== 0) {
+                                value = "mailto:" + value;
+                            }
                         }
+                        newThing[attribute] = value;
                     }
-                    newThing[attribute] = value;
+                }
+                this.$emit("onSave", newThing);
+            }
+        },
+        removeErrorMessage(key) {
+            if (key) {
+                this.$set(this.currentErrors, key, null);
+            } else {
+                for (const key in this.currentErrors) {
+                    this.$set(this.currentErrors, key, null);
                 }
             }
-            this.$emit("onSave", newThing);
+        },
+        validate() {
+            for (const attr of this.displayedAttributes) {
+                const item = this.currentValues[attr.key];
+                if (!item) {
+                    this.$set(this.currentErrors, attr.key, "Please provide a value");
+                    return false;
+                }
+            }
+
+            return true;
         },
     },
 };