Closed kodiidok closed 6 months ago
QueryRequests
component is only to fetch requests. For purchase orders, and quotations there should be 2 other components. The QueryRequests
, QueryPurchaseOrders
, QueryQuotations
components will contain the DynamicTable
component to render the data.
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useQuery } from '@apollo/client';
import { REQUESTS_QUERY } from '@/gql/query';
import client from '@/gql/client';
import DynamicTable from '../table/table';
import Loading from '@/app/loading';
interface Props {
page: number
pageSize: number
filter?: string
renderTable?: boolean
getActiveRecord?: (record: any) => typeof record
}
export function QueryRequests({ page, pageSize, filter, renderTable = false, getActiveRecord }: Props) {
const { loading, error, data, refetch } = useQuery(REQUESTS_QUERY, {
client,
variables: { page, pageSize },
});
// const [getRequests, { loading, error, data }] = useLazyQuery(REQUESTS_QUERY, { client });
const handlePaginationChange = useCallback((newPage: number, newPageSize: number) => {
// Fetch data with the new page and pageSize
// This function is used as callback from the DynamicTable component
// to get the new page size and the new current page.
// THe useQuery will be refetched using the updated page and pageSize variables.
refetch({ page: newPage, pageSize: newPageSize });
}, []);
const getRowData = useCallback((data: any, rowId: string) => {
// this function will get the data relevent to the record that
// matches the id of the row within the dynamic table
const rowData = data.find((item: any) => item.id === rowId);
getActiveRecord && getActiveRecord(rowData);
}, []);
if (loading) return <Loading />;
if (error) return `Error! ${error}`;
if (data) {
const extracted = data.getRequestsWithUser.data;
const total = data.getRequestsWithUser.totalItems;
if (renderTable) {
const headerColumns = ["date", "subject", "requested by", "status", "actions"];
const tableData = extracted.map((item: any, index: number) => {
// table data needs to be mapped to the column header
// accordingly in order to properly render as cells inside the table.
return {
...item,
id: item.id,
date: new Date(item.updatedAt).toLocaleDateString('en-US'),
subject: item.subject,
'requested by': item.requestedUser.name,
status: item.status,
}
});
return <DynamicTable
headerColumns={headerColumns}
data={tableData}
onPaginationChange={handlePaginationChange}
pageNumber={page}
pageSize={pageSize}
total={total}
getRowData={getRowData}
/>;
}
}
return (
<></>
);
}
Current
QueryRequest
componentAdd a filter variable for the
requestType
to the component to fetch only the "REQUESTS" from the database. Request type contains 3 values.