project -> application everywhere

js/components/forms/new_application.js

@@ -0,0 +1,121 @@
+import FormMixin from '../../mixins/form'
+import textinput from '../text_input'
+
+const createEnvironment = (name) => ({ name })
+
+export default {
+  name: 'new-application',
+
+  mixins: [FormMixin],
+
+  components: {
+    textinput
+  },
+
+  props: {
+    initialData: {
+      type: Object,
+      default: () => ({})
+    },
+    modalName: String
+  },
+
+  data: function () {
+    const {
+      environment_names,
+      name,
+    } = this.initialData
+
+    const environments = (
+      environment_names.length > 0
+      ? environment_names
+      : ["Development", "Testing", "Staging", "Production"]
+    ).map(createEnvironment)
+
+    return {
+      validations: [
+        {func: this.hasEnvironments, message: "Provide at least one environment name."},
+        {func: this.envNamesAreUnique, message: "Environment names must be unique."},
+        {func: this.environmentsHaveNames, message: "Environment names cannot be empty."},
+      ],
+      errors: [],
+      environments,
+      name,
+      readyToSubmit: false
+    }
+  },
+
+  mounted: function () {
+    this.$root.$on('onEnvironmentAdded', this.addEnvironment)
+  },
+
+  methods: {
+    addEnvironment: function (event) {
+      this.environments.push(createEnvironment(""))
+    },
+
+    removeEnvironment: function (index) {
+      if (this.environments.length > 1) {
+        this.environments.splice(index, 1)
+      }
+    },
+
+    validate: function() {
+      this.errors = this.validations.map((validation) => {
+        if (!validation.func()) {
+          return validation.message
+        }
+      }).filter(Boolean)
+    },
+
+    hasEnvironments: function () {
+      return this.environments.length > 0 && this.environments.some((e) => e.name !== "")
+    },
+
+    environmentsHaveNames: function () {
+      if (this.environments.length > 1) {
+        // only want to display this error if we have multiple envs and one or
+        // more do not have names
+        return this.environments.every((e) => e.name !== "")
+      } else {
+        return true
+      }
+    },
+
+    envNamesAreUnique: function () {
+      const names = this.environments.map((e) => e.name)
+      return names.every((n, index) => names.indexOf(n) === index)
+    },
+
+    handleSubmit: function (event) {
+      if (!this.readyToSubmit) {
+        event.preventDefault()
+        this.validateAndOpenModal()
+      }
+    },
+
+    handleCancelSubmit: function () {
+      this.readyToSubmit = false
+      this.closeModal(this.modalName)
+    },
+
+    validateAndOpenModal: function () {
+      let isValid = this.$children.reduce((previous, newVal) => {
+        // display textInput error if it is not valid
+        if (!newVal.showValid) {
+          newVal.showError = true
+        }
+
+        return newVal.showValid && previous
+      }, true)
+
+      this.validate()
+      isValid = this.errors.length == 0 && isValid
+
+      if (isValid) {
+        this.readyToSubmit = true
+        this.openModal(this.modalName)
+      }
+    }
+  }
+}