[BI-895] - Convert the program user's table to use Buefy data tables

package.json

@@ -64,7 +64,7 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.9.0",
     "babel-preset-env": "^1.7.0",
-    "buefy": "^0.9.4",
+    "buefy": "^0.9.8",
     "bulma": "^0.9.1",
     "bulma-divider": "^0.2.0",
     "chai": "^4.1.2",

src/assets/scss/main.scss

@@ -252,6 +252,10 @@ nav.tabs li.is-active {
   }
 }
 
+.table.is-narrow {
+  border-collapse: collapse;
+}
+
 .table td {
   vertical-align: middle;
 }
@@ -261,9 +265,10 @@ nav.tabs li.is-active {
 }
 
 // TODO: see if we can get this in bulma variable
-.table tr.is-edited {
+.table tr.is-edited, table tr.is-edited + .detail {
   border-left: 5px solid $primary;
   background-color: $primary-light;
+
   td {
     color:$dark;
   }
@@ -272,6 +277,12 @@ nav.tabs li.is-active {
   }
 }
 
+table tr.is-edited + .detail {
+  > td, > td > .detail-container {
+    padding: 0!important;
+  }
+}
+
 .table.is-striped tbody tr:nth-child(even).is-edited {
   background-color: $primary-light;
 }

src/components/VueFeatherIconPack.vue

@@ -0,0 +1,51 @@
+<!--
+  - See the NOTICE file distributed with this work for additional information
+  - regarding copyright ownership.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <component :is="iconComponent"/>
+</template>
+
+<script>
+// all icon that you need
+import { ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon } from "vue-feather-icons";
+
+export default {
+  components: {
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ChevronUpIcon,
+    ChevronDownIcon,
+    ArrowUpIcon,
+    ArrowDownIcon
+  },
+  props: {
+    icon: [String, Array],
+    size: String,
+    customClass: String
+  },
+  computed: {
+    iconComponent() {
+      return this.icon[1] + "-icon";
+    }
+  }
+};
+</script>

src/components/forms/BasicSelectField.vue

@@ -26,7 +26,7 @@
     <div class="select is-fullwidth">
       <select
           v-bind:id="fieldName.replace(' ', '-')"
-          v-on:input="$emit('input', $event.target.value)"
+          v-on:change="$emit('input', $event.target.value)"
           class="select is-fullwidth"
       >
         <option disabled v-bind:selected="displayDefault()" value="">Select a {{fieldName.toLowerCase()}}</option>

src/components/program/ProgramUsersTable.vue

@@ -49,7 +49,7 @@
     </WarningModal>
 
     <button
-      v-show="!newUserActive & users.length > 0"
+      v-show="!newUserActive"
       v-if="$ability.can('create', 'ProgramUser')"
       class="button is-primary has-text-weight-bold is-pulled-right"
       v-on:click="newUserActive = true"
@@ -66,6 +66,8 @@
       </span>
     </button>
 
+    <div class="is-clearfix"></div>
+
     <NewDataForm
       v-if="newUserActive"
       v-bind:row-validations="newUserValidations"
@@ -105,55 +107,47 @@
       </template>
     </NewDataForm>
 
-    <ExpandableRowTable
-      v-bind:records.sync="users"
-      v-bind:row-validations="editUserValidations"
-      v-bind:editable="$ability.can('update', 'ProgramUser')"
-      v-bind:archivable="$ability.can('archive', 'ProgramUser')"
-      v-bind:pagination="usersPagination"
-      v-bind:data-form-state="editUserFormState"
-      v-on:submit="updateUser($event)"
-      v-on:remove="displayWarning($event)"
-      v-on:show-error-notification="$emit('show-error-notification', $event)"
-      v-on:paginate="paginationController.updatePage($event)"
-      v-on:paginate-toggle-all="paginationController.toggleShowAll()"
-      v-on:paginate-page-size="paginationController.updatePageSize($event)"
+    <ExpandableTable
+        v-bind:records.sync="users"
+        v-bind:loading="this.rolesLoading || this.usersLoading"
+        v-bind:row-validations="editUserValidations"
+        v-bind:editable="$ability.can('update', 'ProgramUser')"
+        v-bind:archivable="$ability.can('archive', 'ProgramUser')"
+        v-bind:pagination="usersPagination"
+        v-bind:data-form-state="editUserFormState"
+        v-on:submit="updateUser($event)"
+        v-on:remove="displayWarning($event)"
+        v-on:show-error-notification="$emit('show-error-notification', $event)"
+        v-on:paginate="paginationController.updatePage($event)"
+        v-on:paginate-toggle-all="paginationController.toggleShowAll()"
+        v-on:paginate-page-size="paginationController.updatePageSize($event)"
     >
-
-      <template v-slot:columns="data">
-        <TableColumn name="name" v-bind:label="'Name'">
-          {{ data.name }}
-        </TableColumn>
-        <TableColumn name="email" v-bind:label="'Email'">
-          {{ data.email }}
-        </TableColumn>
-        <TableColumn name="roles" v-bind:label="'Roles'">
-          <template v-if="rolesMap.size > 0">
-            {{ getRoleName(data.roleId) }}
-          </template>
-        </TableColumn>
-      </template>
+      <b-table-column field="data.name" label="Name" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ props.row.data.name }}
+      </b-table-column>
+      <b-table-column field="data.email" label="Email" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ props.row.data.email }}
+      </b-table-column>
+      <b-table-column :custom-sort="sortRole" label="Roles" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <template v-if="rolesMap.size > 0">
+          {{ getRoleName(props.row.data.roleId) }}
+        </template>
+      </b-table-column>
 
       <template v-slot:edit="{editData, validations}">
         <div class="columns">
           <div class="column is-two-fifths">
             <BasicSelectField
-              v-model="editData.roleId"
-              v-bind:validations="validations.roleId"
-              v-bind:options="roles"
-              v-bind:selected-id="editData.roleId"
-              v-bind:field-name="'Role'"
+                v-model="editData.roleId"
+                v-bind:validations="validations.roleId"
+                v-bind:options="roles"
+                v-bind:selected-id="editData.roleId"
+                v-bind:field-name="'Role'"
             />
           </div>
         </div>
       </template>
       <template v-slot:emptyMessage>
-        <EmptyTableMessage
-          v-bind:button-view-toggle="!newUserActive"
-          v-bind:button-text="'New User'"
-          v-bind:create-enabled="$ability.can('create', 'ProgramUser')"
-          v-on:newClick="newUserActive = true"
-        >
           <p class="has-text-weight-bold">
             No program users are currently defined.
           </p>
@@ -162,9 +156,8 @@
             program, their account and membership in other programs is not affected.
           </p>
           <p>You can add, edit, and delete users from your program from this panel.</p>
-        </EmptyTableMessage>
       </template>
-    </ExpandableRowTable>
+    </ExpandableTable>
   </section>
 </template>
 
@@ -195,10 +188,14 @@
   import store from "@/store";
   import {LOGIN} from "@/store/mutation-types";
   import {defineAbilityFor} from "@/config/ability";
+  import {ChevronRightIcon, ChevronDownIcon} from 'vue-feather-icons'
+  import ExpandableTable from '@/components/tables/expandableTable/ExpandableTable.vue';
 
 @Component({
-  components: { NewDataForm, BasicInputField, BasicSelectField, TableColumn,
-                WarningModal, PlusCircleIcon, EmptyTableMessage, ExpandableRowTable
+  components: {
+    ExpandableTable, NewDataForm, BasicInputField, BasicSelectField, TableColumn,
+                WarningModal, PlusCircleIcon, EmptyTableMessage, ExpandableRowTable,
+                ChevronRightIcon, ChevronDownIcon
               },
   computed: {
     ...mapGetters([
@@ -229,6 +226,9 @@ export default class ProgramUsersTable extends Vue {
   private newUserFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
   private editUserFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
 
+  private rolesLoading = true;
+  private usersLoading = true;
+
   newUserValidations = {
     name: {required},
     email: {required, email},
@@ -262,7 +262,7 @@ export default class ProgramUsersTable extends Vue {
       // Display error that users cannot be loaded
       this.$emit('show-error-notification', 'Error while trying to load program users');
       throw error;
-    });
+    }).finally(() => this.usersLoading = false);
   }
 
   getRoles() {
@@ -277,7 +277,7 @@ export default class ProgramUsersTable extends Vue {
       // Display error that users cannot be loaded
       this.$emit('show-error-notification', 'Error while trying to load roles');
       throw error;
-    });
+    }).finally(() => this.rolesLoading = false);
 
   }
 
@@ -435,6 +435,14 @@ export default class ProgramUsersTable extends Vue {
     return this.rolesMap.get(id)!.name;
   }
 
+  sortRole(a: any, b: any, isAsc: boolean) {
+    if(isAsc) {
+      return this.getRoleName(a.data.roleId)!.localeCompare(this.getRoleName(b.data.roleId)!);
+    } else {
+      return this.getRoleName(b.data.roleId)!.localeCompare(this.getRoleName(a.data.roleId)!);
+    }
+  }
+
 }
 
 </script>

src/components/tables/PaginationControls.vue

@@ -2,7 +2,7 @@
   <b-pagination
       v-if="pagination"
       :total="pagination.totalCount"
-      :current="pagination.currentPage"
+      :current.sync="pagination.currentPage"
       range-before="1"
       range-after="1"
       order="is-centered"
@@ -43,7 +43,7 @@
             <select
                 id="paginationSelect"
                 v-model="pagination.pageSize"
-                v-on:change="$emit('paginate-page-size', $event.target.value)"
+                v-on:change="changePageSize($event)"
             >
               <option value="10">
                 10
@@ -92,5 +92,10 @@
     @Prop()
     private pagination!: Pagination;
 
+    changePageSize($event:any) {
+      this.pagination.pageSize = $event.target.value;
+      this.$emit('paginate-page-size', $event.target.value)
+    }
+
   }
 </script>