Preschool auto placement report presentation improvements and csv dow…

…nload
espoon-voltti · Nov 13, 2024 · 9d33337 · 9d33337
1 parent ad7a255
commit 9d33337
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 99 deletions.
diff --git a/frontend/src/employee-frontend/components/reports/PreschoolApplicationReport.tsx b/frontend/src/employee-frontend/components/reports/PreschoolApplicationReport.tsx
@@ -5,8 +5,10 @@
 import orderBy from 'lodash/orderBy'
 import React, { useCallback, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 
 import { PreschoolApplicationReportRow } from 'lib-common/generated/api-types/reports'
+import LocalDate from 'lib-common/local-date'
 import { useQueryResult } from 'lib-common/query'
 import Title from 'lib-components/atoms/Title'
 import ReturnButton from 'lib-components/atoms/buttons/ReturnButton'
@@ -23,6 +25,7 @@ import {
 import { useTranslation } from '../../state/i18n'
 import { renderResult } from '../async-rendering'
 
+import ReportDownload from './ReportDownload'
 import { TableScrollable } from './common'
 import { preschoolApplicationReportQuery } from './queries'
 
@@ -80,102 +83,164 @@ const PreschoolApplicationReportTable = ({
   )
 
   return (
-    <TableScrollable>
-      <Thead>
-        <Tr>
-          <SortableTh
-            onClick={sortBy('applicationUnitName')}
-            sorted={sorted('applicationUnitName')}
-          >
-            {i18n.reports.preschoolApplications.columns.applicationUnitName}
-          </SortableTh>
-          <SortableTh
-            onClick={sortBy('childLastName')}
-            sorted={sorted('childLastName')}
-          >
-            {i18n.reports.preschoolApplications.columns.childLastName}
-          </SortableTh>
-          <SortableTh
-            onClick={sortBy('childFirstName')}
-            sorted={sorted('childFirstName')}
-          >
-            {i18n.reports.preschoolApplications.columns.childFirstName}
-          </SortableTh>
-          <SortableTh
-            onClick={sortBy('childDateOfBirth')}
-            sorted={sorted('childDateOfBirth')}
-          >
-            {i18n.reports.preschoolApplications.columns.childDateOfBirth}
-          </SortableTh>
-          <SortableTh
-            onClick={sortBy('childStreetAddress')}
-            sorted={sorted('childStreetAddress')}
-          >
-            {i18n.reports.preschoolApplications.columns.childStreetAddress}
-          </SortableTh>
-          <SortableTh
-            onClick={sortBy('childPostalCode')}
-            sorted={sorted('childPostalCode')}
-          >
-            {i18n.reports.preschoolApplications.columns.childPostalCode}
-          </SortableTh>
-          <SortableTh
-            onClick={sortBy('currentUnitName')}
-            sorted={sorted('currentUnitName')}
-          >
-            {i18n.reports.preschoolApplications.columns.currentUnitName}
-          </SortableTh>
-          <SortableTh
-            onClick={sortBy('isDaycareAssistanceNeed')}
-            sorted={sorted('isDaycareAssistanceNeed')}
-          >
-            {i18n.reports.preschoolApplications.columns.isDaycareAssistanceNeed}
-          </SortableTh>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {sortedRows.length === 0 ? (
+    <>
+      <ReportDownload
+        data={sortedRows.map((row) => ({
+          ...row,
+          hasAssistanceNeed: row.isDaycareAssistanceNeed
+            ? i18n.common.yes
+            : i18n.common.no
+        }))}
+        headers={[
+          {
+            label:
+              i18n.reports.preschoolApplications.columns.applicationUnitName,
+            key: 'applicationUnitName'
+          },
+          {
+            label: i18n.reports.preschoolApplications.columns.childLastName,
+            key: 'childLastName'
+          },
+          {
+            label: i18n.reports.preschoolApplications.columns.childFirstName,
+            key: 'childFirstName'
+          },
+          {
+            label: i18n.reports.preschoolApplications.columns.childDateOfBirth,
+            key: 'childDateOfBirth'
+          },
+          {
+            label:
+              i18n.reports.preschoolApplications.columns.childStreetAddress,
+            key: 'childStreetAddress'
+          },
+          {
+            label:
+              i18n.reports.preschoolApplications.columns.childPostalCodeFull,
+            key: 'childPostalCode'
+          },
+          {
+            label: i18n.reports.preschoolApplications.columns.currentUnitName,
+            key: 'currentUnitName'
+          },
+          {
+            label:
+              i18n.reports.preschoolApplications.columns
+                .isDaycareAssistanceNeed,
+            key: 'hasAssistanceNeed'
+          }
+        ]}
+        filename={`${
+          i18n.reports.preschoolApplications.title
+        } ${LocalDate.todayInHelsinkiTz().format()}.csv`}
+      />
+      <TableScrollable>
+        <Thead>
           <Tr>
-            <Td colSpan={8} align="center" data-qa="no-results">
-              {i18n.common.noResults}
-            </Td>
+            <SortableTh
+              onClick={sortBy('applicationUnitName')}
+              sorted={sorted('applicationUnitName')}
+            >
+              {i18n.reports.preschoolApplications.columns.applicationUnitName}
+            </SortableTh>
+            <SortableTh
+              onClick={sortBy('childLastName')}
+              sorted={sorted('childLastName')}
+            >
+              {i18n.reports.preschoolApplications.columns.childLastName}
+            </SortableTh>
+            <SortableTh
+              onClick={sortBy('childFirstName')}
+              sorted={sorted('childFirstName')}
+            >
+              {i18n.reports.preschoolApplications.columns.childFirstName}
+            </SortableTh>
+            <SortableTh
+              onClick={sortBy('childDateOfBirth')}
+              sorted={sorted('childDateOfBirth')}
+            >
+              {i18n.reports.preschoolApplications.columns.childDateOfBirth}
+            </SortableTh>
+            <SortableTh
+              onClick={sortBy('childStreetAddress')}
+              sorted={sorted('childStreetAddress')}
+            >
+              {i18n.reports.preschoolApplications.columns.childStreetAddress}
+            </SortableTh>
+            <ShortSortableTh
+              onClick={sortBy('childPostalCode')}
+              sorted={sorted('childPostalCode')}
+            >
+              {i18n.reports.preschoolApplications.columns.childPostalCode}
+            </ShortSortableTh>
+            <SortableTh
+              onClick={sortBy('currentUnitName')}
+              sorted={sorted('currentUnitName')}
+            >
+              {i18n.reports.preschoolApplications.columns.currentUnitName}
+            </SortableTh>
+            <ShortSortableTh
+              onClick={sortBy('isDaycareAssistanceNeed')}
+              sorted={sorted('isDaycareAssistanceNeed')}
+            >
+              {
+                i18n.reports.preschoolApplications.columns
+                  .isDaycareAssistanceNeed
+              }
+            </ShortSortableTh>
           </Tr>
-        ) : (
-          sortedRows.map((row) => {
-            return (
-              <Tr key={row.applicationId} data-qa="row">
-                <Td>
-                  <Link to={`/units/${row.applicationUnitId}`}>
-                    {row.applicationUnitName}
-                  </Link>
-                </Td>
-                <Td>{row.childLastName}</Td>
-                <Td>
-                  <Link to={`/child-information/${row.childId}`}>
-                    {row.childFirstName}
-                  </Link>
-                </Td>
-                <Td>{row.childDateOfBirth.format()}</Td>
-                <Td>{row.childStreetAddress}</Td>
-                <Td>{row.childPostalCode}</Td>
-                <Td>
-                  {row.currentUnitId !== null &&
-                    row.currentUnitName !== null && (
-                      <Link to={`/units/${row.currentUnitId}`}>
-                        {row.currentUnitName}
-                      </Link>
-                    )}
-                </Td>
-                <Td>
-                  {row.isDaycareAssistanceNeed
-                    ? i18n.common.yes
-                    : i18n.common.no}
-                </Td>
-              </Tr>
-            )
-          })
-        )}
-      </Tbody>
-    </TableScrollable>
+        </Thead>
+        <Tbody>
+          {sortedRows.length === 0 ? (
+            <Tr>
+              <Td colSpan={8} align="center" data-qa="no-results">
+                {i18n.common.noResults}
+              </Td>
+            </Tr>
+          ) : (
+            sortedRows.map((row) => {
+              return (
+                <Tr key={row.applicationId} data-qa="row">
+                  <Td>
+                    <Link to={`/units/${row.applicationUnitId}`}>
+                      {row.applicationUnitName}
+                    </Link>
+                  </Td>
+                  <Td>{row.childLastName}</Td>
+                  <Td>
+                    <Link to={`/child-information/${row.childId}`}>
+                      {row.childFirstName}
+                    </Link>
+                  </Td>
+                  <Td>{row.childDateOfBirth.format()}</Td>
+                  <Td>{row.childStreetAddress}</Td>
+                  <ShortTd>{row.childPostalCode}</ShortTd>
+                  <Td>
+                    {row.currentUnitId !== null &&
+                      row.currentUnitName !== null && (
+                        <Link to={`/units/${row.currentUnitId}`}>
+                          {row.currentUnitName}
+                        </Link>
+                      )}
+                  </Td>
+                  <ShortTd>
+                    {row.isDaycareAssistanceNeed
+                      ? i18n.common.yes
+                      : i18n.common.no}
+                  </ShortTd>
+                </Tr>
+              )
+            })
+          )}
+        </Tbody>
+      </TableScrollable>
+    </>
   )
 }
+
+const ShortSortableTh = styled(SortableTh)`
+  max-width: 90px;
+`
+const ShortTd = styled(Td)`
+  max-width: 90px;
+`
diff --git a/frontend/src/lib-components/layout/Table.tsx b/frontend/src/lib-components/layout/Table.tsx
@@ -163,6 +163,7 @@ interface SortableProps {
   sticky?: boolean
   top?: string
   'data-qa'?: string
+  className?: string
 }
 
 const CustomButton = styled.button`
@@ -177,6 +178,7 @@ const CustomButton = styled.button`
   cursor: pointer;
   text-transform: uppercase;
   font-weight: ${fontWeights.bold};
+  align-items: center;
 `
 
 export const SortableTh = React.memo(function SortableTh({
@@ -185,13 +187,14 @@ export const SortableTh = React.memo(function SortableTh({
   sorted,
   sticky,
   top,
-  'data-qa': dataQa
+  'data-qa': dataQa,
+  className
 }: SortableProps) {
   const {
     colors: { grayscale }
   } = useTheme()
   return (
-    <Th sticky={sticky} top={top}>
+    <Th sticky={sticky} top={top} className={className}>
       <CustomButton onClick={onClick} data-qa={dataQa}>
         <span>{children}</span>
         <Gap horizontal size="xs" />

diff --git a/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx b/frontend/src/lib-customizations/defaults/employee/i18n/fi.tsx
@@ -4185,14 +4185,16 @@ export const fi = {
     },
     preschoolApplications: {
       title: 'Ehdottava EO-raportti',
-      description: 'EO-raportti, josta johtaja voi tarkistaa oppilaan koulun',
+      description:
+        'Raportti näyttää ehdottavaan esiopetuspaikkapäätösprosessiin kuuluvat hakemukset',
       columns: {
         applicationUnitName: 'Yksikkö',
         childLastName: 'Sukunimi',
         childFirstName: 'Etunimi',
         childDateOfBirth: 'Syntymäaika',
         childStreetAddress: 'Postiosoite',
-        childPostalCode: 'Postinumero',
+        childPostalCode: 'Posti\u00ADnro',
+        childPostalCodeFull: 'Postinumero',
         currentUnitName: 'Nykyinen yksikkö',
         isDaycareAssistanceNeed: 'Tuen tarve'
       }