✨ Make pagination work for members

Author: AnandChowdhary

components/Pagination.vue

@@ -67,8 +67,7 @@ export default class Pagination extends Vue {
   }
   @Watch("activePage")
   onPageChanged(activePage: number) {
-    if (typeof this.onChange === "function")
-      return this.onChange(activePage)
+    if (typeof this.onChange === "function") return this.onChange(activePage);
   }
 }
 </script>

layouts/default.vue

@@ -177,6 +177,9 @@ svg {
     opacity: 0.5;
     background-color: #eee;
   }
+  span + .icon {
+    margin-left: 0.5rem;
+  }
 }
 @keyframes spin {
   from {
@@ -332,6 +335,9 @@ svg {
       text-align: right;
     }
   }
+  + .pagination {
+    margin-top: 1rem;
+  }
 }
 
 h1 {

pages/manage/members/index.vue

@@ -10,7 +10,10 @@
         <th></th>
       </thead>
       <tbody>
-        <tr v-for="(member, index) in members" :key="`${member.id}_${index}`">
+        <tr
+          v-for="(member, index) in members.data"
+          :key="`${member.id}_${index}`"
+        >
           <td><User :user="member.user" /></td>
           <td><TimeAgo :date="member.createdAt" /></td>
           <td>{{ membershipRoles[member.role] || member.role }}</td>
@@ -45,7 +48,24 @@
         </tr>
       </tbody>
     </table>
-    <Pagination :number-of-items="members.length" :items-per-page="5" />
+    <div class="pagination text text--align-center">
+      <button
+        v-if="members.hasMore"
+        class="button"
+        :disabled="loadingMore"
+        @click="loadMoreMembers"
+      >
+        <span>Load more members</span>
+        <font-awesome-icon v-if="!loadingMore" class="icon" icon="arrow-down" />
+        <font-awesome-icon
+          v-else
+          title="Available"
+          class="icon icon--ml-2 icon--color-light"
+          icon="sync"
+          spin
+        />
+      </button>
+    </div>
     <h2>Invite another member</h2>
     <p>
       Use this form to invite another user from your team to this organization.
@@ -102,24 +122,28 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 import { mapGetters } from "vuex";
 import Loading from "@/components/Loading.vue";
 import User from "@/components/User.vue";
-import Pagination from "@/components/Pagination.vue";
 import TimeAgo from "@/components/TimeAgo.vue";
 import Confirm from "@/components/Confirm.vue";
 import Input from "@/components/form/Input.vue";
 import Select from "@/components/form/Select.vue";
 import Checkbox from "@/components/form/Checkbox.vue";
 import { getAllCountries } from "countries-and-timezones";
+import { Email } from "@/types/settings";
 import locale from "@/locales/en";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faTrash, faPencilAlt } from "@fortawesome/free-solid-svg-icons";
-import { Email } from "@/types/settings";
-library.add(faTrash, faPencilAlt);
+import {
+  faTrash,
+  faPencilAlt,
+  faArrowDown,
+  faSync
+} from "@fortawesome/free-solid-svg-icons";
+import { Members } from "../../../types/manage";
+library.add(faTrash, faPencilAlt, faArrowDown, faSync);
 
 @Component({
   components: {
     TimeAgo,
-    Pagination,
     User,
     Loading,
     Input,
@@ -133,10 +157,11 @@ library.add(faTrash, faPencilAlt);
   })
 })
 export default class ManageMembers extends Vue {
-  members!: any;
+  members!: Members;
   loading = "";
   inviting = false;
   showDelete = null;
+  loadingMore = false;
   membershipRoles = locale.membershipRoles;
 
   newUserName = "";
@@ -151,6 +176,14 @@ export default class ManageMembers extends Vue {
       .catch(() => {})
       .finally(() => (this.loading = ""));
   }
+  private loadMoreMembers() {
+    this.loadingMore = true;
+    this.$store
+      .dispatch("manage/getMembers", this.$store.state.manage.members.next)
+      .then(() => {})
+      .catch(() => {})
+      .finally(() => (this.loadingMore = false));
+  }
 
   private inviteMember() {
     this.inviting = true;

store/manage.ts

@@ -5,16 +5,22 @@ import Vue from "vue";
 
 const stripeProductId = "prod_CtJZklN9W4QmxA";
 export const state = (): RootState => ({
-  members: [],
+  members: { data: [], hasMore: false },
   isDownloading: false
 });
 
 export const mutations: MutationTree<RootState> = {
   setOrganization(state: RootState, organization: Organization): void {
     Vue.set(state, "organization", organization);
   },
-  setMembers(state: RootState, members: Member[]): void {
-    Vue.set(state, "members", members);
+  setMembers(state: RootState, { members, start }): void {
+    if (start) {
+      const currentMembers = state.members;
+      members.data = [...currentMembers.data, ...members.data];
+      Vue.set(state, "members", members);
+    } else {
+      Vue.set(state, "members", members);
+    }
   },
   setBilling(state: RootState, billing: any): void {
     Vue.set(state, "billing", billing);
@@ -87,13 +93,13 @@ export const actions: ActionTree<RootState, RootState> = {
     );
     commit("stopDownloading");
   },
-  async getMembers({ rootGetters, commit }) {
+  async getMembers({ rootGetters, commit }, start = 0) {
     const org = rootGetters["auth/activeOrganization"];
     const organizationId = org.organizationId;
     const members = (await this.$axios.get(
-      `/organizations/${organizationId}/memberships`
+      `/organizations/${organizationId}/memberships?start=${start}`
     )).data;
-    commit("setMembers", members);
+    commit("setMembers", { members, start });
   },
   async inviteMember({ dispatch, rootGetters }, context) {
     const org = rootGetters["auth/activeOrganization"];

types/manage.ts

@@ -11,10 +11,16 @@ export interface Member {
   id: number;
 }
 
+export interface Members {
+  data: Member[];
+  hasMore: boolean;
+  next?: number;
+}
+
 export interface RootState {
   membership?: Membership;
   organization?: Organization;
-  members: Member[];
+  members: Members;
   billing?: any;
   invoices?: any;
   subscriptions?: any;