update components to emit valid on field-change and use in TO form

js/components/date_selector.js

@@ -24,6 +24,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    optional: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data: function() {
@@ -35,6 +39,14 @@ export default {
     }
   },
 
+  created: function() {
+    emitEvent('field-mount', this, {
+      optional: this.optional,
+      name: this.name,
+      valid: this.isDateValid,
+    })
+  },
+
   watch: {
     month(newMonth, oldMonth) {
       if (!!newMonth && newMonth.length > 2) {
@@ -84,7 +96,7 @@ export default {
     isYearValid: function() {
       // Emit a change event
       var valid = parseInt(this.year) >= 1
-      this._emitChange('year', this.year, valid)
+      // this._emitChange('year', this.year, valid)
       return valid
     },
 
@@ -106,9 +118,9 @@ export default {
 
     isDateValid: function() {
       return (
-        this.day &&
-        this.month &&
-        this.year &&
+        !!this.day &&
+        !!this.month &&
+        !!this.year &&
         this.isDayValid &&
         this.isMonthValid &&
         this.isYearValid &&
@@ -141,13 +153,19 @@ export default {
   },
 
   methods: {
-    _emitChange: function(name, value, valid) {
+    onInput: function(e) {
+      console.log('emitting event')
       emitEvent('field-change', this, {
-        value: value,
-        name: name,
+        value: e.target.value,
+        name: this.name,
         watch: this.watch,
+        valid: this.isDateValid,
       })
     },
+
+    _emitChange: function(name, value, valid) {
+      emitEvent('field-change', this, { value, name })
+    },
   },
 
   render: function(createElement) {

js/components/text_input.js

@@ -31,6 +31,7 @@ export default {
       type: Boolean,
       default: false,
     },
+    optional: Boolean,
   },
 
   data: function() {
@@ -124,7 +125,7 @@ export default {
       // Emit a change event
       emitEvent('field-change', this, {
         value: this._rawValue(value),
-        valid,
+        valid: this._isValid(value),
         name: this.name,
         watch: this.watch,
       })

js/components/upload_input.js

@@ -17,6 +17,7 @@ export default {
   },
 
   props: {
+    name: String,
     initialData: {
       type: String,
     },
@@ -27,6 +28,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    optional: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data: function() {
@@ -38,6 +43,14 @@ export default {
     }
   },
 
+  created: function() {
+    emitEvent('field-mount', this, {
+      optional: this.optional,
+      name: this.name,
+      valid: this.hasAttachment,
+    })
+  },
+
   methods: {
     addAttachment: function(e) {
       this.attachment = e.target.value
@@ -48,6 +61,7 @@ export default {
         value: e.target.value,
         name: this.name,
         watch: this.watch,
+        valid: this.hasAttachment,
       })
     },
     removeAttachment: function(e) {