atst/js/components/forms/edit_environment_role.js

import FormMixin from '../../mixins/form'
import Modal from '../../mixins/modal'

// Note: If refactoring consider using nested vue components as suggested by Dan:
// https://github.com/dod-ccpo/atst/pull/799/files#r282240663
// May also want to reconsider the data structure by storing the roles and members separately

export const NO_ACCESS = 'No Access'

export const EditEnvironmentRole = {
  name: 'edit-environment-role',

  mixins: [FormMixin],

  props: {
    initialRoleCategories: Array,
  },

  data: function() {
    return {
      selectedSection: null,
      roleCategories: this.sanitizeValues(this.initialRoleCategories),
    }
  },

  methods: {
    sanitizeValues: function(roles) {
      roles.forEach(role => {
        role.members.forEach(member => {
          if (member.role_name === null) {
            member.role_name = NO_ACCESS
          }
        })
      })
      return roles
    },

    checkNoAccess: function(role) {
      return role === NO_ACCESS
    },

    toggleSection: function(sectionName) {
      if (this.selectedSection === sectionName) {
        this.selectedSection = null
      } else {
        this.selectedSection = sectionName
      }
    },

    onInput: function(e) {
      this.changed = true
      this.updateRoles(e.target.attributes['user-id'].value, e.target.value)
      this.showError = false
      this.showValid = true
    },

    getUserInfo: function(userId) {
      for (let role of this.roleCategories) {
        for (let member of role.members) {
          if (member.user_id === userId) {
            return member
          }
        }
      }
    },

    removeUser: function(userId) {
      for (let role of this.roleCategories) {
        role.members = role.members.filter(member => {
          return member.user_id !== userId
        })
        if (!role.members) {
          role.members = []
        }
      }
    },

    addUser: function(userInfo, newRole) {
      this.roleCategories.forEach(role => {
        if (role.role === newRole) {
          userInfo.role_name = newRole
          role.members.push(userInfo)
        }
      })
    },

    updateRoles: function(userId, newRole) {
      var userInfo = this.getUserInfo(userId)
      this.removeUser(userId)
      this.addUser(userInfo, newRole)
      this.toggleSection()
    },
  },

  render: function(createElement) {
    return createElement('p', 'Please implement inline-template')
  },
}