From 943d7d4e242521932f58f5f1b8a1e93b386fd5e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Wed, 18 Oct 2023 12:13:50 +0200
Subject: [PATCH] feat: add date range filter to fills

---
 libs/fills/src/lib/Fills.graphql          |  8 +++++--
 libs/fills/src/lib/__generated__/Fills.ts |  6 +++--
 libs/fills/src/lib/fills-manager.tsx      | 29 +++++++++++++++++++----
 libs/fills/src/lib/fills-table.tsx        |  2 ++
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/libs/fills/src/lib/Fills.graphql b/libs/fills/src/lib/Fills.graphql
index b8467afad..463c55d32 100644
--- a/libs/fills/src/lib/Fills.graphql
+++ b/libs/fills/src/lib/Fills.graphql
@@ -42,8 +42,12 @@ fragment FillEdge on TradeEdge {
   cursor
 }
 
-query Fills($filter: TradesFilter, $pagination: Pagination) {
-  trades(filter: $filter, pagination: $pagination) {
+query Fills(
+  $filter: TradesFilter
+  $pagination: Pagination
+  $dateRange: DateRange
+) {
+  trades(filter: $filter, dateRange: $dateRange, pagination: $pagination) {
     edges {
       ...FillEdge
     }
diff --git a/libs/fills/src/lib/__generated__/Fills.ts b/libs/fills/src/lib/__generated__/Fills.ts
index 831c29366..e822f742e 100644
--- a/libs/fills/src/lib/__generated__/Fills.ts
+++ b/libs/fills/src/lib/__generated__/Fills.ts
@@ -12,6 +12,7 @@ export type FillEdgeFragment = { __typename?: 'TradeEdge', cursor: string, node:
 export type FillsQueryVariables = Types.Exact<{
   filter?: Types.InputMaybe<Types.TradesFilter>;
   pagination?: Types.InputMaybe<Types.Pagination>;
+  dateRange?: Types.InputMaybe<Types.DateRange>;
 }>;
 
 
@@ -95,8 +96,8 @@ export const FillUpdateFieldsFragmentDoc = gql`
 }
     ${TradeFeeFieldsFragmentDoc}`;
 export const FillsDocument = gql`
-    query Fills($filter: TradesFilter, $pagination: Pagination) {
-  trades(filter: $filter, pagination: $pagination) {
+    query Fills($filter: TradesFilter, $pagination: Pagination, $dateRange: DateRange) {
+  trades(filter: $filter, dateRange: $dateRange, pagination: $pagination) {
     edges {
       ...FillEdge
     }
@@ -124,6 +125,7 @@ export const FillsDocument = gql`
  *   variables: {
  *      filter: // value for 'filter'
  *      pagination: // value for 'pagination'
+ *      dateRange: // value for 'dateRange'
  *   },
  * });
  */
diff --git a/libs/fills/src/lib/fills-manager.tsx b/libs/fills/src/lib/fills-manager.tsx
index 85f2ffcae..cf5d84854 100644
--- a/libs/fills/src/lib/fills-manager.tsx
+++ b/libs/fills/src/lib/fills-manager.tsx
@@ -1,5 +1,5 @@
 import type { AgGridReact } from 'ag-grid-react';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FillsTable } from './fills-table';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
@@ -22,6 +22,7 @@ export const FillsManager = ({
   const filter: Schema.TradesFilter | Schema.TradesSubscriptionFilter = {
     partyIds: [partyId],
   };
+  const [dateRange, setDateRange] = useState<Schema.DateRange | null>(null);
   const { data, error } = useDataProvider({
     dataProvider: fillsWithMarketProvider,
     update: ({ data }) => {
@@ -31,17 +32,35 @@ export const FillsManager = ({
       }
       return false;
     },
-    variables: { filter },
+    variables: { filter, dateRange },
   });
-
+  const { onFilterChanged, ...props } = gridProps;
+  const overlayNoRowsTemplate = dateRange
+    ? t('No fills matching selected date range')
+    : t('No fills');
   return (
     <FillsTable
       ref={gridRef}
       rowData={data}
+      onFilterChanged={(event) => {
+        const { api } = event;
+        const filterModel = api.getFilterModel();
+        if (filterModel['createdAt']?.value) {
+          if (
+            filterModel['createdAt'].value.start !== dateRange?.start ||
+            filterModel['createdAt'].value.end !== dateRange?.end
+          ) {
+            setDateRange(filterModel['createdAt'].value);
+          }
+        } else {
+          setDateRange(null);
+        }
+        onFilterChanged(event);
+      }}
       partyId={partyId}
       onMarketClick={onMarketClick}
-      overlayNoRowsTemplate={error ? error.message : t('No fills')}
-      {...gridProps}
+      overlayNoRowsTemplate={error ? error.message : overlayNoRowsTemplate}
+      {...props}
     />
   );
 };
diff --git a/libs/fills/src/lib/fills-table.tsx b/libs/fills/src/lib/fills-table.tsx
index 491016741..9c47a057c 100644
--- a/libs/fills/src/lib/fills-table.tsx
+++ b/libs/fills/src/lib/fills-table.tsx
@@ -20,6 +20,7 @@ import {
   negativeClassNames,
   MarketNameCell,
   COL_DEFS,
+  DateRangeFilter,
 } from '@vegaprotocol/datagrid';
 import type {
   VegaValueFormatterParams,
@@ -120,6 +121,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
         },
         {
           headerName: t('Date'),
+          filter: DateRangeFilter,
           field: 'createdAt',
           valueFormatter: ({
             value,