phone number should be optional on add new portfolio member form

js/components/text_input.js

@@ -25,6 +25,7 @@ export default {
     },
     paragraph: String,
     noMaxWidth: String,
+    optional: Boolean,
   },
 
   data: function() {
@@ -82,7 +83,9 @@ export default {
     },
 
     onBlur: function(e) {
+      if (!(this.optional && e.target.value === "")) {
         this._checkIfValid({ value: e.target.value.trim(), invalidate: true })
+      }
       this.value = e.target.value.trim()
 
       if (this.validation === 'dollars') {
@@ -97,6 +100,8 @@ export default {
 
       if (!this.modified && this.initialErrors && this.initialErrors.length) {
         valid = false
+      } else if (this.optional && value == "") {
+        valid = true
       }
 
       if (this.modified) {

templates/components/text_input.html

@@ -13,7 +13,8 @@
   disabled=False,
   initial_value='',
   classes='',
-  noMaxWidth=False) -%}
+  noMaxWidth=False,
+  optional=False) -%}
 
   <textinput
     v-cloak
@@ -23,6 +24,7 @@
     {% if noMaxWidth %}no-max-width='true'{% endif %}
     {% if initial_value or field.data is not none %}initial-value='{{ initial_value or field.data }}'{% endif %}
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
+    v-bind:optional={{ optional|lower }}
     key='{{ field.name }}'
     inline-template>
 

templates/portfolios/admin.html

@@ -81,7 +81,7 @@
           {{ TextInput(member_form.email, validation='email') }}
         </div>
         <div class='form-col form-col--half'>
-          {{ TextInput(member_form.phone_number, validation='usPhone') }}
+          {{ TextInput(member_form.phone_number, validation='usPhone', optional=True) }}
         </div>
       </div>
       <div class='form-row'>