From 1ead6fad4f0f27590c7a8d8719cecb094b3d8810 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Riku=20Kestila=CC=88?= <riku.kestila@vincit.fi>
Date: Wed, 16 Oct 2024 16:32:11 +0300
Subject: [PATCH] feat: fronted button for compact report

---
 .../handler/public/locales/en/common.json     |  3 +-
 .../applicationReports/ApplicationReports.tsx | 44 +++++++++++++++++++
 .../applicationReports/ReportsSection.tsx     |  6 ++-
 .../useApplicationReports.ts                  |  5 ++-
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json
index b30e17843b..53aed203a7 100644
--- a/frontend/benefit/handler/public/locales/en/common.json
+++ b/frontend/benefit/handler/public/locales/en/common.json
@@ -1491,7 +1491,8 @@
       "main": "Raportointi",
       "downloadAcceptedApplications": "Hyväksytyt hakemukset joita ei ole vielä ladattu",
       "downloadRejectedApplications": "Hylätyt hakemukset joita ei ole vielä ladattu",
-      "downloadApplicationsInTimeRange": "Lataa kaikki hakemukset tietyltä ajalta"
+      "downloadApplicationsInTimeRange": "Lataa kaikki hakemukset tietyltä ajalta",
+      "downloadSmallerListOfApplicationsInTimeRange": "Lataa kompaktimpi lista hakemuksista tietyltä ajalta"
     },
     "fields": {
       "lastDownloadDateText": "Ladattu viimeksi {{date}}",
diff --git a/frontend/benefit/handler/src/components/applicationReports/ApplicationReports.tsx b/frontend/benefit/handler/src/components/applicationReports/ApplicationReports.tsx
index 0382ef67ac..e58d335ec3 100644
--- a/frontend/benefit/handler/src/components/applicationReports/ApplicationReports.tsx
+++ b/frontend/benefit/handler/src/components/applicationReports/ApplicationReports.tsx
@@ -28,6 +28,50 @@ const ApplicationReports: React.FC = () => {
         buttonText={`${t(
           `${translationsBase}.buttons.downloadApplicationsInTimeRange`
         )}`}
+        isCompact={false}
+      >
+        <$GridCell $colSpan={3} css="font-weight: 500;">{`${t(
+          `${translationsBase}.fields.startDate`
+        )}`}</$GridCell>
+        <$GridCell $colSpan={3} css="font-weight: 500;">{`${t(
+          `${translationsBase}.fields.endDate`
+        )}`}</$GridCell>
+        <$GridCell $colStart={1} $colSpan={3}>
+          <DateInputWithSeparator
+            id={`${t(`${translationsBase}.fields.startDate`)}`}
+            name={`${t(`${translationsBase}.fields.startDate`)}`}
+            placeholder={`${t(`${translationsBase}.fields.startDate`)}`}
+            value={convertToUIDateFormat(formik.values.startDate)}
+            onChange={(value) =>
+              formik.setFieldValue(fields.startDate.name, value)
+            }
+          />
+        </$GridCell>
+        <$GridCell $colSpan={3}>
+          <DateInput
+            id={`${t(`${translationsBase}.fields.endDate`)}`}
+            name={`${t(`${translationsBase}.fields.endDate`)}`}
+            placeholder={`${t(`${translationsBase}.fields.endDate`)}`}
+            value={convertToUIDateFormat(formik.values.endDate)}
+            onChange={(value) =>
+              formik.setFieldValue(
+                fields.endDate.name,
+                getCorrectEndDate(formik.values.startDate, value)
+              )
+            }
+          />
+        </$GridCell>
+      </ReportsSection>
+      <ReportsSection
+        exportFileType="csv"
+        onDownloadButtonClick={exportApplicationsInTimeRange}
+        header={`${t(
+          `${translationsBase}.headings.downloadSmallerListOfApplicationsInTimeRange`
+        )}`}
+        buttonText={`${t(
+          `${translationsBase}.buttons.downloadApplicationsInTimeRange`
+        )}`}
+        isCompact={true}
       >
         <$GridCell $colSpan={3} css="font-weight: 500;">{`${t(
           `${translationsBase}.fields.startDate`
diff --git a/frontend/benefit/handler/src/components/applicationReports/ReportsSection.tsx b/frontend/benefit/handler/src/components/applicationReports/ReportsSection.tsx
index fc8776b30b..6326b25b07 100644
--- a/frontend/benefit/handler/src/components/applicationReports/ReportsSection.tsx
+++ b/frontend/benefit/handler/src/components/applicationReports/ReportsSection.tsx
@@ -15,7 +15,8 @@ export type ReportsSectionProp = {
   withDivider?: boolean;
   header: string;
   buttonText: string;
-  onDownloadButtonClick: (type: ExportFileType) => void;
+  onDownloadButtonClick: (type: ExportFileType, isCompact:boolean) => void;
+  isCompact?: boolean;
 };
 
 const ReportsSection: React.FC<ReportsSectionProp> = ({
@@ -25,6 +26,7 @@ const ReportsSection: React.FC<ReportsSectionProp> = ({
   buttonText,
   onDownloadButtonClick,
   withDivider = false,
+  isCompact = false
 }) => {
   const theme = useTheme();
 
@@ -56,7 +58,7 @@ const ReportsSection: React.FC<ReportsSectionProp> = ({
                 css={`
                   margin-top: ${theme.spacing.l};
                 `}
-                onClick={() => onDownloadButtonClick(exportFileType)}
+                onClick={() => onDownloadButtonClick(exportFileType, isCompact)}
               >
                 {buttonText} {String(exportFileType).toUpperCase()}
               </Button>
diff --git a/frontend/benefit/handler/src/components/applicationReports/useApplicationReports.ts b/frontend/benefit/handler/src/components/applicationReports/useApplicationReports.ts
index 9e8d61f760..449adf706b 100644
--- a/frontend/benefit/handler/src/components/applicationReports/useApplicationReports.ts
+++ b/frontend/benefit/handler/src/components/applicationReports/useApplicationReports.ts
@@ -40,7 +40,7 @@ type ExtendedComponentProps = {
   fields: {
     [key in EXPORT_APPLICATIONS_IN_TIME_RANGE_FORM_KEYS]: Field<EXPORT_APPLICATIONS_IN_TIME_RANGE_FORM_KEYS>;
   };
-  exportApplicationsInTimeRange: () => void;
+  exportApplicationsInTimeRange: (type: ExportFileType, isCompact: boolean) => void;
   lastAcceptedApplicationsExportDate: string;
   lastRejectedApplicationsExportDate: string;
 };
@@ -134,7 +134,7 @@ const useApplicationReports = (): ExtendedComponentProps => {
   const { values } = formik;
   const { startDate, endDate } = values;
 
-  const exportApplicationsInTimeRange = useCallback(async () => {
+  const exportApplicationsInTimeRange = useCallback(async (type: ExportFileType, isCompact: boolean) => {
     const data = await handleResponse<string>(
       axios.get(
         `${BackendEndpoint.HANDLER_APPLICATIONS}${EXPORT_APPLICATIONS_ROUTES.IN_TIME_RANGE}/`,
@@ -142,6 +142,7 @@ const useApplicationReports = (): ExtendedComponentProps => {
           params: {
             handled_at_after: convertToBackendDateFormat(startDate),
             handled_at_before: convertToBackendDateFormat(endDate),
+            compact_list: isCompact,
           },
         }
       )