Added dev profile pagination #39

* improved loading msg in devs count
* added pagination to dev list query vars
* added pagination component to dev list
* added devs pagination component
* added pagination props to pinia

Author: rimutaka

stm_vue_ui/src/components/MatchingDevsCount.vue

@@ -1,34 +1,22 @@
 <script setup lang="ts">
 import { devCountForStack } from "@/graphql/queries";
 import { useQuery } from "@vue/apollo-composable";
-import { ref, watch } from "vue";
+import { watch } from "vue";
 import { useQueryStore } from "@/stores/QueryStore";
 import { numFmt } from "@/formatters";
 import { debounce } from "throttle-debounce";
 
 const store = useQueryStore();
 
-/** The number of matched profiles */
-const count = ref(0);
-
-/** Refetches GQL data via useQuery.
+/** Re-fetches GQL data via useQuery.
  * Needed because Apollo's built-in debounce and throttle are not working.
  */
 const debounceRefetch = debounce(2000, () => {
   // console.log("dev-count debounceRefetch");
   refetch(store.stackVar);
 });
 
-/** Removes a pkg from the search */
-const removePkg = (t: string) => {
-  store.pkg.delete(t);
-};
-
-/** Removes a tech from the search */
-const removeTech = (t: string) => {
-  store.tech.delete(t);
-};
-
+// request server data
 const { result, loading, error, refetch } = useQuery(
   devCountForStack,
   store.stackVar,
@@ -39,21 +27,25 @@ const { result, loading, error, refetch } = useQuery(
 watch(result, (value) => {
   // console.log(value);
   if (value) {
-    count.value = value.devCountForStack;
+    store.searchProfileCount = value.devCountForStack;
   }
 });
 
 watch(store.tech, () => {
   // console.log(`watch for store.tech: ${value} `);
   // tell the template we are waiting for more input
-  count.value = -1;
+  store.searchProfileCount = -1;
+  // reset the current page on search filter change
+  store.currentPageProfiles = 0;
   debounceRefetch();
 });
 
 watch(store.pkg, () => {
   // console.log(`watch for store.pkg: ${value} `);
   // tell the template we are waiting for more input
-  count.value = -1;
+  store.searchProfileCount = -1;
+  // reset the current page on search filter change
+  store.currentPageProfiles = 0;
   debounceRefetch();
 });
 
@@ -63,6 +55,16 @@ watch(store.pkg, () => {
 //   console.log(tNew);
 //   console.log(tOld);
 // });
+
+/** Removes a pkg from the search */
+const removePkg = (t: string) => {
+  store.pkg.delete(t);
+};
+
+/** Removes a tech from the search */
+const removeTech = (t: string) => {
+  store.tech.delete(t);
+};
 </script>
 
 <template>
@@ -71,8 +73,10 @@ watch(store.pkg, () => {
     <span v-else> Matching profiles: </span>
 
     <span v-if="loading"> counting ...</span>
-    <span v-else-if="!loading && count < 0"> waiting ...</span>
-    <span v-else>{{ numFmt(count) }}</span>
+    <span v-else-if="!loading && store.searchProfileCount < 0">
+      waiting ...</span
+    >
+    <span v-else>{{ numFmt(store.searchProfileCount) }}</span>
   </h6>
   <ul class="text-muted list-inline">
     <li class="list-inline-item">Stack:</li>

stm_vue_ui/src/components/MatchingDevsList.vue

@@ -1,23 +1,39 @@
 <script setup lang="ts">
 import { devListForStack } from "@/graphql/queries";
+import type { devListForStackVars } from "@/graphql/queries";
 import { useQuery } from "@vue/apollo-composable";
-import { useQueryStore } from "@/stores/QueryStore";
+import { computed } from "vue";
+import { useQueryStore, PROFILES_PER_PAGE } from "@/stores/QueryStore";
 import DevCard from "./DevCard.vue";
+import MatchingDevsPaginationVue from "./MatchingDevsPagination.vue";
+
+/** Adds local data to the stack from store to make a complete set of vars needed for the query. */
+const useQueryVars = computed(() => {
+  let retValue: devListForStackVars = {
+    stack: [],
+    pkgs: [],
+    resultsFrom: store.currentPageProfiles * PROFILES_PER_PAGE,
+  };
+
+  Object.assign(retValue, store.stackVar);
+
+  console.log(retValue);
+
+  return retValue;
+});
 
 const store = useQueryStore();
 
 const { result, loading, error } = useQuery(
   devListForStack,
-  store.stackVar,
+  useQueryVars,
   store.defaultApolloOptions
 );
 </script>
 
 <template>
-  <h6>
-    <span v-if="loading"> Loading ...</span>
-    <span v-else>List of Devs</span>
-  </h6>
+  <MatchingDevsPaginationVue v-if="!loading && result && !error" />
+  <h6 v-if="loading">Loading ...</h6>
 
   <h2
     class="pe-md-5 text-muted"
@@ -32,4 +48,5 @@ const { result, loading, error } = useQuery(
   <p v-if="error" class="text-danger">
     <small>{{ error }}</small>
   </p>
+  <MatchingDevsPaginationVue v-if="!loading && result && !error" />
 </template>

stm_vue_ui/src/components/MatchingDevsPagination.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useQueryStore, PROFILES_PER_PAGE } from "@/stores/QueryStore";
+
+const store = useQueryStore();
+
+const pageNumList = computed(() =>
+  [
+    ...Array(
+      Math.min(20, Math.ceil(store.searchProfileCount / PROFILES_PER_PAGE))
+    ).keys(),
+  ].map((x) => ++x)
+);
+
+/** store.currentPageProfiles is zero-based and needs to be incremented before use in UI. */
+const currentPageProfiles = computed(() => store.currentPageProfiles + 1);
+
+const lastPage = computed(() => {
+  console.log(
+    `pages: ${Math.ceil(store.searchProfileCount / PROFILES_PER_PAGE)}`
+  );
+  console.log(`current: ${store.currentPageProfiles}`);
+
+  return Math.ceil(store.searchProfileCount / PROFILES_PER_PAGE);
+});
+
+/** Forces an update with data for the specified page. */
+const navigateToPage = (p: number) => {
+  console.log(`navigating to: ${p}`);
+  store.currentPageProfiles = Math.max(0, p - 1);
+};
+</script>
+
+<template>
+  <div class="row justify-content-center mt-4" v-if="lastPage > 1">
+    <div class="col-lg-10 col-xxl-8">
+      <ul class="list-inline text-center">
+        <li
+          class="list-inline-item"
+          v-for="pageNum in pageNumList"
+          :key="pageNum"
+        >
+          <span
+            @click="navigateToPage(pageNum)"
+            :class="{
+              clickable: pageNum != currentPageProfiles,
+              'text-decoration-underline': pageNum != currentPageProfiles,
+            }"
+            >{{ pageNum }}</span
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

stm_vue_ui/src/graphql/queries.ts

@@ -1,7 +1,7 @@
 import gql from "graphql-tag";
 
 // Corresponds to inpTechExperience input block
-export interface inpTechExperienceInterface {
+export interface inpTechExperience {
   tech: string;
   locBand: number;
 }
@@ -79,9 +79,15 @@ export interface DevListForStack {
   };
 }
 
+export interface devListForStackVars {
+  stack: inpTechExperience[];
+  pkgs: string[];
+  resultsFrom: number;
+}
+
 export const devListForStack = gql`
-  query ($stack: [TechExperience!]!, $pkgs: [String!]!) {
-    devListForStack(stack: $stack, pkgs: $pkgs) {
+  query ($stack: [TechExperience!]!, $pkgs: [String!]!, $resultsFrom: Int!) {
+    devListForStack(stack: $stack, pkgs: $pkgs, resultsFrom: $resultsFrom) {
       login
       name
       email

stm_vue_ui/src/stores/QueryStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import type { inpTechExperienceInterface } from "@/graphql/queries";
+import type { inpTechExperience } from "@/graphql/queries";
 import type { UseQueryOptions } from "@vue/apollo-composable";
 
 /** Amount of experience required for a particular technology. */
@@ -29,6 +29,10 @@ const defaultApolloOptions: UseQueryOptions = {
   notifyOnNetworkStatusChange: true,
 };
 
+/** The number of profiles per search page.
+ * This value must synchronized with the server to correctly split the results into pages */
+export const PROFILES_PER_PAGE = 5;
+
 /** A shared app store based on Pinia. */
 export const useQueryStore = defineStore({
   id: "query",
@@ -48,8 +52,17 @@ export const useQueryStore = defineStore({
     /** A search string typed into the search box by the user. */
     searchFilter: "",
 
+    /** How many profiles match the current search filter. -1 for no data, 0 - none, >0 - profiles found  */
+    searchProfileCount: -1,
+
     /** Name of the currently active tab. Defaults to Search. */
     activeSearchTab: SearchTabNames.Search,
+
+    /** Zero-based, used to calculate query results offset for Profiles tab */
+    currentPageProfiles: 0,
+
+    /** Zero-based, used to calculate query results offset for Shortlist tab */
+    currentPageShortlist: 0,
   }),
 
   getters: {
@@ -58,10 +71,10 @@ export const useQueryStore = defineStore({
 
     /** GQL variables for useQuery: converts the current search criteria to GQL format */
     stackVar: (state) => {
-      const stack = new Array<inpTechExperienceInterface>();
+      const stack = new Array<inpTechExperience>();
 
       state.tech.forEach((v, k) => {
-        stack.push({ tech: k, locBand: v.loc } as inpTechExperienceInterface);
+        stack.push({ tech: k, locBand: v.loc } as inpTechExperience);
       });
 
       const x = {