From c2ced94a82bf0d3524e3f3108c40be3ec63caa97 Mon Sep 17 00:00:00 2001
From: margaretmeehan <mkm248@cornell.edu>
Date: Tue, 22 Oct 2019 16:07:35 -0400
Subject: [PATCH] Removed Buefy styles from Users page and refctor table

---
 app/server/static/components/users.vue | 31 +++++++++++++++++---------
 app/server/static/pages/users.js       |  1 -
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/server/static/components/users.vue b/app/server/static/components/users.vue
index ea6a9946..638a5de2 100644
--- a/app/server/static/components/users.vue
+++ b/app/server/static/components/users.vue
@@ -13,15 +13,13 @@
                 v-bind:type="{ 'is-danger': getAddUserMessage }"
                 v-bind:message="getAddUserMessage"
               )
-                b-autocomplete(
-                  v-model="newRoleMapping.username"
+                b-select(
                   placeholder="e.g. Anne"
-                  open-on-focus=true
-                  v-bind:data="otherUsers"
-                  field="username"
-                  v-on:select="option => {selected = option; newRoleMapping.userid = selected.id}"
-                  v-on:input="value => checkValidExistingUser(value)"
-              )
+                  v-model="newRoleMapping.username"
+                  v-on:input="option => {checkValidExistingUser(option); newRoleMapping.userid = option}"
+                )
+                  option(v-for="otherUser in otherUsers", v-bind:value="otherUser.id", v-bind:key="otherUser.id")
+                    | {{ otherUser.username }}
 
             div.column
               b-field(label="Role")
@@ -68,10 +66,23 @@
               span Delete
 </template>
 
-<style scoped>
+<style>
 .user-table {
   padding: 40px 20px;
 }
+
+.user-table .table {
+  width: 100%;
+}
+
+.user-table .card {
+  padding: 20px 20px;
+}
+
+.user-table .has-addons {
+  display: none;
+}
+
 </style>
 
 <script>
@@ -138,7 +149,7 @@ export default {
     },
 
     checkValidExistingUser(inputValue) {
-      this.hasNewUserError = !this.otherUsers.some(user => user.username === inputValue);
+      this.hasNewUserError = !this.otherUsers.some(user => user.id === inputValue);
       return inputValue;
     },
 
diff --git a/app/server/static/pages/users.js b/app/server/static/pages/users.js
index 2e351d7a..730d3d38 100644
--- a/app/server/static/pages/users.js
+++ b/app/server/static/pages/users.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import Buefy from 'buefy';
 import Users from '../components/users.vue';
-import 'buefy/dist/buefy.css';
 
 Vue.use(Buefy);