feat: fronted button for compact report

City-of-Helsinki · Oct 18, 2024 · 0979851 · 0979851
1 parent 85f917f
commit 0979851
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,14 +134,15 @@ 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}/`,
         {
           params: {
             handled_at_after: convertToBackendDateFormat(startDate),
             handled_at_before: convertToBackendDateFormat(endDate),
+            compact_list: isCompact,
           },
         }
       )