Adding pagination

client/src/clients/api/users.ts

@@ -23,9 +23,7 @@ export class UsersApi extends ApiClientBase {
   }
 
   list(query?: any) {
-    return this.unwrap(this.$http.get<Api.Returns.List<Api.User>>(this.getUrl('', query)), {
-      transform: (d) => d.results
-    })
+      return this.unwrap(this.$http.get<Api.Returns.List<Api.User>>(this.getUrl('', query)))
   }
   getuser(id: number, options: Api.UnwrapOptions<any, any> = {}) {
     return this.unwrap(this.$http.get<Api.Returns.Profile>(this.getUrl(`/${id}`)), {

client/src/types/api.ts

@@ -41,7 +41,7 @@ export module Api {
     applying_user: number | any
     approval_user: number
     user?: Api.User
-    isUpdated? : boolean
+    isUpdated?: boolean
   }
 
   export interface LeaveReason {
@@ -142,6 +142,11 @@ export module Api {
     export type Meeting = MsgRes<Meeting>
 
     export type Profile = MsgRes<User>
+    export type Users = MsgRes<{
+      count: number
+      users: User[]
+    }>
+
     export type AllMeetings = MsgRes<Meetings>
 
     export type Login = MsgRes<{
@@ -259,10 +264,10 @@ export module Api {
     className: string
     eventName: string
     vacation?: any
-    meeting? :any
+    meeting?: any
     event?: any
     holidays?: any
-    users?:any
+    users?: any
     date: any
     len?: number
   }

client/src/views/UsersView.vue

@@ -3,19 +3,24 @@
     <officeFilters :offices="offices" />
 
     <v-row>
-      
+
       <v-col class="d-flex flex-wrap justify-center">
         <v-col v-for="user of users.state.value" :key="user?.id" xl="4" lg="6" md="12" sm="12" cols="12"
           class="px-5 py-5">
           <div class="mt-1 text-center py-0 w-100 ">
             <router-link class="routerLink" :to="{ name: 'profile', query: { id: user.id } }">
               <UserCard :user="user" />
             </router-link>
-
-
           </div>
         </v-col>
       </v-col>
+
+    </v-row>
+    <v-row>
+      <v-col class="d-flex flex-wrap justify-center">
+        <v-pagination v-model="page" :length="count" rounded="circle"></v-pagination>
+      </v-col>
+
     </v-row>
   </v-card>
 </template>
@@ -38,13 +43,22 @@ export default {
     const offices = ref<Country[]>([]);
     const $route = useRoute()
     let isFirstLoad = true;
+    const page = ref(1);
+    const count = ref<number>(0);
 
 
-    useAsyncState($api.users.list({ "location_id": $route.query.location_id }), [], {
+    useAsyncState($api.users.list({ "location_id": $route.query.location_id, "page": page.value }), undefined, {
       onSuccess(data) {
-        users.execute(undefined, data)
+        if (data?.count) {
+          count.value = data.count / 10
+          count.value = Math.ceil((data.count / 10));
+
+        }
+        users.execute(undefined, data?.results || []);
       }
-    })
+    });
+
+
     const users = useAsyncState(
       async (users: Api.User[]) => {
         if (isFirstLoad) {
@@ -65,9 +79,21 @@ export default {
     watch(
       () => $route.query.location_id,
       async newValue => {
-        useAsyncState($api.users.list({ "location_id": $route.query.location_id }), [], {
+        page.value = 1
+        useAsyncState($api.users.list({ "location_id": $route.query.location_id, "page": page.value }), undefined, {
+          onSuccess(data) {
+            users.execute(undefined, data?.results || []);
+          }
+        })
+      },
+    );
+
+    watch(
+      () => page.value,
+      async newValue => {
+        useAsyncState($api.users.list({ "location_id": $route.query.location_id, "page": page.value }), undefined, {
           onSuccess(data) {
-            users.execute(undefined, data)
+            users.execute(undefined, data?.results || []);
           }
         })
       },
@@ -77,6 +103,8 @@ export default {
 
     return {
       users,
+      page,
+      count,
       offices,
       UserCard,
       officeFilters,