Added pagingation to courtesy car detail contracts list BOD-374

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.component.jsx

@@ -6,11 +6,15 @@ export default function CourtesyCarDetailPageComponent({
   contracts,
   form,
   saveLoading,
+  totalContracts,
 }) {
   return (
     <div>
       <CourtesyCarCreateFormComponent form={form} saveLoading={saveLoading} />
-      <CourtesyCarContractListComponent contracts={contracts} />
+      <CourtesyCarContractListComponent
+        contracts={contracts}
+        totalContracts={totalContracts}
+      />
     </div>
   );
 }

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -16,6 +16,8 @@ import { CreateRecentItem } from "../../utils/create-recent-item";
 import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
 import NotFound from "../../components/not-found/not-found.component";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import queryString from "query-string";
+import { useLocation } from "react-router-dom";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -25,13 +27,29 @@ export function CourtesyCarDetailPageContainer({
   setBreadcrumbs,
   addRecentItem,
 }) {
+  const searchParams = queryString.parse(useLocation().search);
+  const { page, sortcolumn, sortorder } = searchParams;
+
   const { t } = useTranslation();
   const [insertCourtesyCar] = useMutation(UPDATE_CC);
   const [form] = Form.useForm();
   const { ccId } = useParams();
   const [saveLoading, setSaveLoading] = useState(false);
   const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
-    variables: { id: ccId },
+    variables: {
+      id: ccId,
+      offset: page ? (page - 1) * 25 : 0,
+      limit: 25,
+      order: [
+        {
+          [sortcolumn || "start"]: sortorder
+            ? sortorder === "descend"
+              ? "desc"
+              : "asc"
+            : "desc",
+        },
+      ],
+    },
   });
 
   useEffect(() => {
@@ -142,6 +160,11 @@ export function CourtesyCarDetailPageContainer({
           contracts={data ? data.courtesycars_by_pk.cccontracts : []}
           form={form}
           saveLoading={saveLoading}
+          totalContracts={
+            data
+              ? data.courtesycars_by_pk.cccontracts_aggregate.aggregate.count
+              : 0
+          }
         />
       </Form>
     </RbacWrapper>