Feat: Added pagination to demand Efforts table in team member profile…

… page
TallerWebSolutions · Oct 2, 2023 · 266a0cf · 266a0cf
1 parent 31706c2
commit 266a0cf
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
diff --git a/app/graphql/types/teams/team_member_type.rb b/app/graphql/types/teams/team_member_type.rb
@@ -7,6 +7,7 @@ class TeamMemberType < Types::BaseObject
       field :demand_efforts, [Types::DemandEffortType], null: true do
         argument :from_date, GraphQL::Types::ISO8601Date, required: false
         argument :until_date, GraphQL::Types::ISO8601Date, required: false
+        argument :page_number, Integer, required: false
       end
       field :end_date, GraphQL::Types::ISO8601Date, null: true
       field :hours_per_month, Int, null: false
@@ -58,8 +59,10 @@ class TeamMemberType < Types::BaseObject
 
       field :project_hours_data, Types::Charts::ProjectHoursChartDataType, null: true
 
-      def demand_efforts(from_date: nil, until_date: nil)
-        object.demand_efforts.to_dates(from_date, until_date).order(start_time_to_computation: :desc)
+      def demand_efforts(from_date: nil, until_date: nil, page_number: nil)
+        efforts = object.demand_efforts.to_dates(from_date, until_date).order(start_time_to_computation: :desc)
+        efforts_paginated = efforts.page(page_number).per(20)
+        demand_efforts = efforts_paginated
       end
 
       def demands(status: 'ALL', type: 'ALL', limit: nil)

diff --git a/app/spa/src/components/TeamMemberDashboardTables.tsx b/app/spa/src/components/TeamMemberDashboardTables.tsx
@@ -1,5 +1,5 @@
 import { Button, FormGroup, Grid, Input, InputLabel, Link } from "@mui/material"
-import { Link as RouterLink } from "react-router-dom"
+import { Link as RouterLink, useSearchParams } from "react-router-dom"
 import { useTranslation } from "react-i18next"
 
 import { TeamMember } from "../modules/teamMember/teamMember.types"
@@ -21,16 +21,16 @@ const TeamMemberDashboardTables = ({
 }: TeamMemberDashboardTablesProps) => {
   const { t } = useTranslation(["teamMembers"])
   const { register } = useForm()
+  const [searchParams, setSearchParams] = useSearchParams()
 
-  if (effortsFilters.fromDate === "") {
-    effortsFilters.fromDate = new Date(
-      new Date().setDate(new Date().getDate() - 30)
-    )
-  }
-
-  if (effortsFilters.untilDate === "") {
-    effortsFilters.untilDate = new Date()
-  }
+  const normalizeQueryStringFilters = (filters: FieldValues) =>
+  Object.keys(filters)
+    .filter((key) => {
+      return String(filters[key]).length > 0 && filters[key] !== "null"
+    })
+    .reduce<Record<string, string>>((acc, el) => {
+      return { ...acc, [el]: filters[el] }
+    }, {})
 
   const demandShortestLeadTime =
     teamMember.demandShortestLeadTime?.leadtime || 0
@@ -123,7 +123,6 @@ const TeamMemberDashboardTables = ({
   ]
 
   const latestEffortsHeader = [
-    t("dashboard.latestEfforts.name"),
     t("dashboard.latestEfforts.team"),
     t("dashboard.latestEfforts.start"),
     t("dashboard.latestEfforts.end"),
@@ -132,7 +131,6 @@ const TeamMemberDashboardTables = ({
   ]
 
   const latestEffortsRows = teamMember?.demandEfforts?.map((effort) => [
-    `${effort.who || ""}`,
     <Link
       component={RouterLink}
       to={`/companies/taller/teams/${effort.team?.id}`}
@@ -230,11 +228,23 @@ const TeamMemberDashboardTables = ({
             </Grid>
           </FormGroup>
         </form>
-        <Table
+        {searchParams && (
+          <Table
           title={t("dashboard.latestEfforts.title")}
           headerCells={latestEffortsHeader}
           rows={latestEffortsRows || []}
+          pagination={{
+            count: (teamMember?.demandEfforts?.length || 0),
+            rowsPerPage: (10),
+            page: effortsFilters.pageNumber - 1,
+            onPageChange: (_, newPage: number) =>
+              setSearchParams({
+                ...normalizeQueryStringFilters(effortsFilters || {}),
+                pageNumber: String(newPage + 1),
+              }),
+          }}
         />
+        )}
       </Grid>
     </Grid>
   )

diff --git a/app/spa/src/pages/TeamMembers/TeamMemberDashboard.tsx b/app/spa/src/pages/TeamMembers/TeamMemberDashboard.tsx
@@ -11,7 +11,7 @@ import TeamMemberDashboardCharts from "../../components/TeamMemberDashboardChart
 import { FieldValues } from "react-hook-form"
 
 const TEAM_MEMBER_QUERY = gql`
-  query TeamMember($id: ID!, $fromDate: ISO8601Date, $untilDate: ISO8601Date) {
+  query TeamMember($id: ID!, $fromDate: ISO8601Date, $untilDate: ISO8601Date, $pageNumber: Int) {
     teamMember(id: $id) {
       id
       name
@@ -116,7 +116,7 @@ const TEAM_MEMBER_QUERY = gql`
           slug
         }
       }
-      demandEfforts(fromDate: $fromDate, untilDate: $untilDate) {
+      demandEfforts(fromDate: $fromDate, untilDate: $untilDate, pageNumber: $pageNumber) {
         id
         effortValue
         effortMoney
@@ -158,6 +158,7 @@ const TeamMemberDashboard = () => {
   const effortsFilters: FieldValues = {
     fromDate: searchParams.get("fromDate"),
     untilDate: searchParams.get("untilDate"),
+    pageNumber: Number(searchParams.get("pageNumber") || 1),
   }
 
   const effortsQueryFilters = Object.keys(effortsFilters)
@@ -173,6 +174,7 @@ const TeamMemberDashboard = () => {
       id: Number(teamMemberId),
       fromDate: effortsQueryFilters.fromDate,
       untilDate: effortsQueryFilters.untilDate,
+      pageNumber: (effortsQueryFilters.pageNumber || 1),
     },
   })
   const companySlug = me?.currentCompany?.slug