Filter with new implementation of roles list

js/components/forms/members_list.js

@@ -4,6 +4,7 @@ export default {
 
   props: {
     members: Array,
+    choices: Array,
   },
 
   data: function () {
@@ -21,8 +22,8 @@ export default {
           member.status === this.status | this.status === 'all'
           : true
       ).filter(
-        member => this.role ?
+        member => this.role ? (
-          member.role.toLowerCase() === this.role | this.role === 'all'
+          this.getRoleFromDisplayName(member.role) === this.role | this.role === 'all')
           : true
       ).filter(
         member => this.searchValue ? member.name.toLowerCase()
@@ -30,4 +31,10 @@ export default {
       )
     }
   },
+
+  methods: {
+    getRoleFromDisplayName: function (role) {
+      return this.choices.find(choice => choice.display_name === role).name
+    },
+  },
 }

templates/workspaces/members/index.html

@@ -46,7 +46,7 @@
 {% endif %}
 
 
-<members-list inline-template id="search-template" v-bind:members='{{ members | tojson}}'>
+<members-list inline-template id="search-template" v-bind:members='{{ members | tojson}}' v-bind:choices='{{ choices | tojson}}'>
   <div>
   <form class='search-bar' @submit.prevent>
     <div class='usa-input search-input'>