OK-671: Henklöittäin-näkymä - tietojen näyttäminen

README.md

@@ -6,6 +6,14 @@ Valintojen toteuttamisen käyttöliittymä
 
 ## Lokaaliajo
 
+Voit käyttää lokaaliajossa [mkcert](https://github.com/FiloSottile/mkcert)-työkalulla luotuja sertifikaatteja. Luo sertifikaatit ajamalla komento:
+
+`npm run create-dev-certs`
+
+ja ota sertifikaatit käyttöön node.js:ssä
+
+`npm run node-extra-ca-certs`
+
 Asenna riippuvuudet komennolla:
 
 `npm ci`

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "prepare": "husky",
     "noop": "",
-    "dev": "touch .env.development.local && NODE_EXTRA_CA_CERTS=\"$(mkcert -CAROOT)/rootCA.pem\" node --env-file=.env.development --env-file=.env.development.local dev-server.mjs",
+    "dev": "touch .env.development.local && node --env-file=.env.development --env-file=.env.development.local dev-server.mjs",
     "dev-test": "TEST=true APP_URL=https://localhost:3404 VIRKAILIJA_URL=http://localhost:3104 npm run dev",
     "build": "STANDALONE=true next build",
     "build-test": "APP_URL=https://localhost:3404 VIRKAILIJA_URL=http://localhost:3104 next build",
@@ -25,7 +25,8 @@
     "create-self-signed-dev-certs": "mkdir -p certificates && openssl req -x509 -newkey rsa:4096 -keyout ./certificates/localhost-key.pem -out ./certificates/localhost.pem -sha256 -days 365 -nodes -subj \"/C=XX/ST=StateName/L=CityName/O=CompanyName/OU=CompanySectionName/CN=CommonNameOrHostname\"",
     "typecheck": "tsc",
     "test-playwright-docker": "./scripts/run-playwright-tests-in-docker.sh",
-    "start-and-test-playwright-docker": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start-test https://localhost:3404 'npm run test-playwright-docker -- $PLAYWRIGHT_ARGS'"
+    "start-and-test-playwright-docker": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test start-test https://localhost:3404 'npm run test-playwright-docker -- $PLAYWRIGHT_ARGS'",
+    "node-extra-ca-certs": "export NODE_EXTRA_CA_CERTS=\"$(mkcert -CAROOT)/rootCA.pem\""
   },
   "dependencies": {
     "@date-fns/tz": "^1.1.2",
@@ -85,4 +86,4 @@
     "typescript": "^5.6.3",
     "vitest": "^2.1.4"
   }
-}
+}

src/app/components/error-view.tsx

@@ -18,9 +18,7 @@ const ErrorComponent = ({
   const { t } = useTranslations();
   return (
     <Stack spacing={1} sx={{ margin: 1 }} alignItems="flex-start">
-      {title && (
-        <OphTypography variant="h1">{t('virhe.palvelin')}</OphTypography>
-      )}
+      {title && <OphTypography variant="h1">{title}</OphTypography>}
       {message && <OphTypography component="div">{message}</OphTypography>}
       {retry && (
         <OphButton variant="contained" onClick={retry}>
@@ -57,7 +55,9 @@ export function ErrorView({
         title={t('virhe.palvelin')}
         message={
           <Stack spacing={1}>
-            <OphTypography>URL: {response.url}</OphTypography>
+            <OphTypography sx={{ overflowWrap: 'anywhere' }}>
+              URL: {response.url}
+            </OphTypography>
             <OphTypography>
               {t('virhe.virhekoodi')} {response.status}
             </OphTypography>
@@ -66,6 +66,8 @@ export function ErrorView({
         retry={reset}
       />
     );
+  } else if (error?.digest === 'NEXT_NOT_FOUND') {
+    notFound();
   } else if (error instanceof PermissionError) {
     return <ErrorComponent message={error.message} />;
   } else {

src/app/components/labeled-info-item.tsx

@@ -0,0 +1,22 @@
+import { Box, styled } from '@mui/material';
+import React, { useId } from 'react';
+
+const InfoLabel = styled('label')(({ theme }) => ({
+  ...theme.typography.label,
+}));
+
+export const LabeledInfoItem = ({
+  label,
+  value,
+}: {
+  label: string;
+  value: React.ReactNode;
+}) => {
+  const labelId = useId();
+  return (
+    <div>
+      <InfoLabel id={labelId}>{label}</InfoLabel>
+      <Box aria-labelledby={labelId}>{value}</Box>
+    </div>
+  );
+};

src/app/components/table/list-table.tsx

@@ -22,11 +22,9 @@ import { DEFAULT_BOX_BORDER } from '@/app/lib/constants';
 
 const StyledTable = styled(Table)({
   width: '100%',
-  borderSpacing: '0px',
 });
 
 const StyledCell = styled(TableCell)(({ theme }) => ({
-  borderSpacing: 0,
   padding: theme.spacing(1, 0, 1, 2),
   textAlign: 'left',
   whiteSpace: 'pre-wrap',

src/app/haku/[oid]/components/haku-tabs.tsx

@@ -1,9 +1,12 @@
 'use client';
 import { useTranslations } from '@/app/hooks/useTranslations';
+import { useUserPermissions } from '@/app/hooks/useUserPermissions';
 import { DEFAULT_BOX_BORDER } from '@/app/lib/constants';
+import { getHakukohteetQueryOptions } from '@/app/lib/kouta';
 import { styled } from '@/app/lib/theme';
 import { Box, Stack } from '@mui/material';
 import { OphButton, ophColors } from '@opetushallitus/oph-design-system';
+import { useQueryClient } from '@tanstack/react-query';
 import { usePathname } from 'next/navigation';
 
 const StyledButton = styled(OphButton)({
@@ -42,6 +45,12 @@ const TabButton = ({
 
 export const HakuTabs = ({ hakuOid }: { hakuOid: string }) => {
   const { t } = useTranslations();
+  const queryClient = useQueryClient();
+  const { data: userPermissions } = useUserPermissions();
+  queryClient.prefetchQuery(
+    getHakukohteetQueryOptions(hakuOid, userPermissions),
+  );
+
   return (
     <Stack
       component="nav"

src/app/haku/[oid]/hakukohde/[hakukohde]/hakijaryhmat/page.tsx

@@ -3,7 +3,7 @@
 import { useTranslations } from '@/app/hooks/useTranslations';
 import { TabContainer } from '../components/tab-container';
 import { QuerySuspenseBoundary } from '@/app/components/query-suspense-boundary';
-import { Box, CircularProgress } from '@mui/material';
+import { Box } from '@mui/material';
 import { useSuspenseQueries } from '@tanstack/react-query';
 import { getHakijaryhmat } from '@/app/lib/valintalaskenta-service';
 import { isEmpty } from '@/app/lib/common';
@@ -12,6 +12,7 @@ import { PageSizeSelector } from '@/app/components/table/page-size-selector';
 import { useHakijaryhmatSearchParams } from './hooks/useHakijaryhmatSearch';
 import { HakijaryhmatControls } from './components/hakijaryhmat-controls';
 import { NoResults } from '@/app/components/no-results';
+import { FullClientSpinner } from '@/app/components/client-spinner';
 
 type HakijaryhmatContentParams = {
   hakuOid: string;
@@ -82,15 +83,9 @@ export default function HakijaryhmatPage({
 }: {
   params: { oid: string; hakukohde: string };
 }) {
-  const { t } = useTranslations();
-
   return (
     <TabContainer>
-      <QuerySuspenseBoundary
-        suspenseFallback={
-          <CircularProgress aria-label={t('yleinen.ladataan')} />
-        }
-      >
+      <QuerySuspenseBoundary suspenseFallback={<FullClientSpinner />}>
         <HakijaryhmatContent
           hakuOid={params.oid}
           hakukohdeOid={params.hakukohde}

src/app/haku/[oid]/hakukohde/[hakukohde]/pistesyotto/page.tsx

@@ -2,7 +2,7 @@
 
 import { TabContainer } from '../components/tab-container';
 import { QuerySuspenseBoundary } from '@/app/components/query-suspense-boundary';
-import { ClientSpinner } from '@/app/components/client-spinner';
+import { FullClientSpinner } from '@/app/components/client-spinner';
 import { PisteSyottoControls } from './components/pistesyotto-controls';
 import { Box } from '@mui/material';
 import { PisteSyottoForm } from './components/pistesyotto-form';
@@ -56,7 +56,7 @@ export default function PisteSyottoPage({
   );
   return (
     <TabContainer>
-      <QuerySuspenseBoundary suspenseFallback={<ClientSpinner />}>
+      <QuerySuspenseBoundary suspenseFallback={<FullClientSpinner />}>
         <PisteSyottoContent
           hakuOid={params.oid}
           hakukohdeOid={params.hakukohde}

src/app/haku/[oid]/hakukohde/[hakukohde]/valinnan-hallinta/components/hallinta-table.tsx

@@ -19,7 +19,7 @@ import { Haku, Hakukohde } from '@/app/lib/types/kouta-types';
 import HallintaTableRow from './hallinta-table-row';
 import { sijoitellaankoHaunHakukohteetLaskennanYhteydessa } from '@/app/lib/kouta';
 import Confirm from './confirm';
-import { getLasketutValinnanVaiheet } from '@/app/lib/valintalaskenta-service';
+import { getHakukohteenLasketutValinnanvaiheet } from '@/app/lib/valintalaskenta-service';
 import ErrorRow from './error-row';
 import { toFormattedDateTimeString } from '@/app/lib/localization/translation-utils';
 import {
@@ -73,7 +73,7 @@ const HallintaTable = ({
         },
         {
           queryKey: ['getLasketutValinnanvaiheet', hakukohde.oid],
-          queryFn: () => getLasketutValinnanVaiheet(hakukohde.oid),
+          queryFn: () => getHakukohteenLasketutValinnanvaiheet(hakukohde.oid),
         },
       ],
     });

src/app/haku/[oid]/hakukohde/[hakukohde]/valintalaskennan-tulokset/components/valintatapajono-accordion-title.tsx

@@ -1,23 +1,23 @@
 'use client';
 import { useTranslations } from '@/app/hooks/useTranslations';
-import { LaskettuValinnanVaihe } from '@/app/lib/types/laskenta-types';
+import { LaskettuValinnanVaiheModel } from '@/app/lib/types/laskenta-types';
 import { toFormattedDateTimeString } from '@/app/lib/localization/translation-utils';
 import { LaskettuJonoWithHakijaInfo } from '@/app/hooks/useLasketutValinnanVaiheet';
-import { getJonoNimi } from '../lib/get-jono-nimi';
+import { getValintatapaJonoNimi } from '@/app/lib/get-valintatapa-jono-nimi';
 import { AccordionBoxTitle } from '@/app/components/accordion-box-title';
 
 export const ValintatapajonoAccordionTitle = ({
   valinnanVaihe,
   jono,
 }: {
-  valinnanVaihe: LaskettuValinnanVaihe;
+  valinnanVaihe: LaskettuValinnanVaiheModel;
   jono: LaskettuJonoWithHakijaInfo;
 }) => {
   const { t } = useTranslations();
 
   return (
     <AccordionBoxTitle
-      title={getJonoNimi({
+      title={getValintatapaJonoNimi({
         valinnanVaiheNimi: valinnanVaihe.nimi,
         jonoNimi: jono.nimi,
       })}

src/app/haku/[oid]/hakukohde/[hakukohde]/valintalaskennan-tulokset/components/valintatapajono-content.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Box } from '@mui/material';
-import { LaskettuValinnanVaihe } from '@/app/lib/types/laskenta-types';
+import { LaskettuValinnanVaiheModel } from '@/app/lib/types/laskenta-types';
 import { AccordionBox } from '@/app/components/accordion-box';
 import { useJonosijatSearch } from '@/app/hooks/useJonosijatSearch';
 import { TablePaginationWrapper } from '@/app/components/table/table-pagination-wrapper';
@@ -15,7 +15,7 @@ import {
   LaskettuJonoWithHakijaInfo,
 } from '@/app/hooks/useLasketutValinnanVaiheet';
 import { useTranslations } from '@/app/hooks/useTranslations';
-import { getJonoNimi } from '../lib/get-jono-nimi';
+import { getValintatapaJonoNimi } from '@/app/lib/get-valintatapa-jono-nimi';
 
 const PaginatedValintatapajonoTable = ({
   label,
@@ -75,14 +75,14 @@ export const ValintatapajonoContent = ({
   jono,
 }: {
   hakukohdeOid: string;
-  valinnanVaihe: LaskettuValinnanVaihe;
+  valinnanVaihe: Omit<LaskettuValinnanVaiheModel, 'valintatapajonot'>;
   jono: LaskettuJonoWithHakijaInfo;
 }) => {
   const { t } = useTranslations();
   const label =
     t('yleinen.sivutus') +
     ': ' +
-    getJonoNimi({
+    getValintatapaJonoNimi({
       valinnanVaiheNimi: valinnanVaihe.nimi,
       jonoNimi: jono.nimi,
     });

src/app/haku/[oid]/hakukohde/[hakukohde]/valintalaskennan-tulokset/hooks/useSijoitteluStatusMutation.tsx

@@ -1,27 +1,21 @@
 import useToaster from '@/app/hooks/useToaster';
+import { LaskettuValinnanVaiheModel } from '@/app/lib/types/laskenta-types';
 import {
-  LaskettuValinnanVaihe,
-  LaskettuValintatapajono,
-} from '@/app/lib/types/laskenta-types';
-import { muutaSijoittelunStatus } from '@/app/lib/valintalaskenta-service';
+  muutaSijoittelunStatus,
+  MuutaSijoittelunStatusProps,
+} from '@/app/lib/valintalaskenta-service';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export const useSijoitteluStatusMutation = (hakukohdeOid: string) => {
   const queryClient = useQueryClient();
   const { addToast } = useToaster();
 
   return useMutation({
-    mutationFn: async ({
-      jono,
-      status,
-    }: {
-      jono: LaskettuValintatapajono;
-      status: boolean;
-    }) => {
+    mutationFn: async ({ jono, status }: MuutaSijoittelunStatusProps) => {
       await muutaSijoittelunStatus({ jono, status });
       queryClient.setQueryData(
         ['getLasketutValinnanVaiheet', hakukohdeOid],
-        (vaiheet: Array<LaskettuValinnanVaihe>) =>
+        (vaiheet: Array<LaskettuValinnanVaiheModel>) =>
           vaiheet.map((vaihe) => ({
             ...vaihe,
             valintatapajonot: vaihe.valintatapajonot?.map((oldJono) => ({