Merge pull request #10 from Opetushallitus/OK-497-tabs

Ok 497 tabs

pull_request_template.md

@@ -0,0 +1,3 @@
+Oletko lisännyt tarvittavat yksikkö- tai ui-testit toiminnallisuudelle? Kyllä/En
+Oletko tarkistanut ja päivittänyt riippuvuudet? Kyllä/En
+Oletko kokeillut toimiiko käyttöliittymä mobiilissa landscape moodissa? Kyllä/En/Ei koske

src/app/haku/[oid]/@header/default.ts

@@ -0,0 +1,3 @@
+import HeaderPage from './page';
+
+export default HeaderPage;

src/app/haku/[oid]/hakukohde-list.tsx

@@ -5,6 +5,7 @@ import { getHakukohteet } from '@/app/lib/kouta';
 import { Hakukohde } from '@/app/lib/kouta-types';
 import { styled } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
 
 const StyledList = styled('div')({
   maxWidth: '20vw',
@@ -25,6 +26,12 @@ const StyledItem = styled('div')({
 });
 
 export const HakukohdeList = ({ oid }: { oid: string }) => {
+  const router = useRouter();
+
+  const selectHakukohde = (hakukohde: Hakukohde) => {
+    router.push(`/haku/${oid}/hakukohde/${hakukohde.oid}/perustiedot`);
+  };
+
   const { data: hakukohteet } = useSuspenseQuery({
     queryKey: ['getHakukohteet', oid],
     queryFn: () => getHakukohteet(oid),
@@ -33,7 +40,7 @@ export const HakukohdeList = ({ oid }: { oid: string }) => {
   return (
     <StyledList>
       {hakukohteet.map((hk: Hakukohde) => (
-        <StyledItem key={hk.oid}>
+        <StyledItem key={hk.oid} onClick={() => selectHakukohde(hk)}>
           <p title={hk.organisaatioOid} className="organizationLabel">
             {getTranslation(hk.jarjestyspaikkaHierarkiaNimi)}
           </p>

src/app/haku/[oid]/hakukohde/[hakukohde]/TabContainer.ts

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+
+export const TabContainer = styled('div')({
+  width: '70%',
+  padding: '1rem 2rem',
+});

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { getHakukohde } from '@/app/lib/kouta';
+import { TabContainer } from '../TabContainer';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function HakeneetPage({
+  params,
+}: {
+  params: { oid: string; hakukohde: string };
+}) {
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', params.hakukohde],
+    queryFn: () => getHakukohde(params.hakukohde),
+  });
+
+  return (
+    <TabContainer>
+      <h3>Hakeneet</h3>
+      <p>Hakukohde oid: {hakukohde.oid}</p>
+    </TabContainer>
+  );
+}

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { getHakukohde } from '@/app/lib/kouta';
+import { TabContainer } from '../TabContainer';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function HakijaryhmatPage({
+  params,
+}: {
+  params: { oid: string; hakukohde: string };
+}) {
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', params.hakukohde],
+    queryFn: () => getHakukohde(params.hakukohde),
+  });
+
+  return (
+    <TabContainer>
+      <h3>Hakijaryhmät</h3>
+      <p>Hakukohde oid: {hakukohde.oid}</p>
+    </TabContainer>
+  );
+}

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

@@ -0,0 +1,110 @@
+'use client';
+
+import { getTranslation } from '@/app/lib/common';
+import { styled } from '@mui/material';
+import { useState } from 'react';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { getHakukohde } from '@/app/lib/kouta';
+import { usePathname } from 'next/navigation';
+import { Link as MuiLink } from '@mui/material';
+
+const StyledContainer = styled('div')({
+  padding: '0.5rem 1.5rem 0',
+  width: '100%',
+  border: '1px solid lightgray',
+});
+
+const StyledHeader = styled('div')({
+  textAlign: 'left',
+  h2: {},
+  '.hakukohdeLabel': {
+    fontWeight: 600,
+  },
+  '.organisaatioLabel': {
+    fontWeight: 'normal',
+  },
+});
+
+const StyledTabs = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  columnGap: '0.5rem',
+  '.hakukohde-tab': {
+    cursor: 'pointer',
+    '&--active': {
+      borderBottom: '3px solid #0a789c',
+    },
+  },
+});
+
+export type BasicTab = {
+  title: string;
+  route: string;
+};
+
+const TABS: BasicTab[] = [
+  { title: 'Perustiedot', route: 'perustiedot' },
+  { title: 'Hakeneet', route: 'hakeneet' },
+  { title: 'Valinnan hallinta', route: 'valinnan-hallinta' },
+  { title: 'Valintakoekutsut', route: 'valintakoekutsut' },
+  { title: 'Pistesyöttö', route: 'pistesyotto' },
+  { title: 'Harkinnanvaraiset', route: 'harkinnanvaraiset' },
+  { title: 'Hakijaryhmät', route: 'hakijaryhmat' },
+  { title: 'Valintalaskennan tulos', route: 'valintalaskennan-tulos' },
+  { title: 'Sijoittelun tulokset', route: 'sijoittelun-tulokset' },
+] as const;
+
+function getPathMatchingTab(pathName: string) {
+  const lastPath = pathName.split('/').reverse()[0];
+  return TABS.find((tab) => tab.route.startsWith(lastPath)) || TABS[0];
+}
+
+export const HakukohdeTabs = ({ hakukohdeOid }: { hakukohdeOid: string }) => {
+  const pathName = usePathname();
+  const [activeTab, setActiveTab] = useState<BasicTab>(
+    getPathMatchingTab(pathName),
+  );
+
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', hakukohdeOid],
+    queryFn: () => getHakukohde(hakukohdeOid),
+  });
+
+  const selectActiveTab = (tab: BasicTab) => {
+    setActiveTab(tab);
+  };
+
+  return (
+    <StyledContainer>
+      <StyledHeader>
+        <h2>
+          <span className="organisaatioLabel">
+            {getTranslation(hakukohde.jarjestyspaikkaHierarkiaNimi)}
+          </span>
+          <br />
+          <span className="hakukohdeLabel">
+            {getTranslation(hakukohde.nimi)}
+          </span>
+        </h2>
+      </StyledHeader>
+      <StyledTabs>
+        {TABS.map((tab) => (
+          <MuiLink
+            href={tab.route}
+            key={'hakukohde-tab-' + tab.route}
+            className={
+              tab.title === activeTab.title
+                ? 'hakukohde-tab hakukohde-tab--active'
+                : 'hakukohde-tab'
+            }
+            onClick={() => selectActiveTab(tab)}
+          >
+            {tab.title}
+          </MuiLink>
+        ))}
+      </StyledTabs>
+    </StyledContainer>
+  );
+};
+
+export default HakukohdeTabs;

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { getHakukohde } from '@/app/lib/kouta';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { TabContainer } from '../TabContainer';
+
+export default function HarkinnanvaraisetPage({
+  params,
+}: {
+  params: { oid: string; hakukohde: string };
+}) {
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', params.hakukohde],
+    queryFn: () => getHakukohde(params.hakukohde),
+  });
+
+  return (
+    <TabContainer>
+      <h3>Harkinnanvaraiset</h3>
+      <p>Hakukohde oid: {hakukohde.oid}</p>
+    </TabContainer>
+  );
+}

src/app/haku/[oid]/hakukohde/[hakukohde]/layout.tsx

@@ -0,0 +1,27 @@
+import HakukohdeTabs from './hakukohde-tabs';
+
+export default function HakuLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  header: React.ReactNode;
+  params: { oid: string; hakukohde: string };
+}) {
+  return (
+    <>
+      <div
+        className="mainContainer"
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 0,
+          width: '100%',
+        }}
+      >
+        <HakukohdeTabs hakukohdeOid={params.hakukohde} />
+        {children}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { getHakukohde } from '@/app/lib/kouta';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { TabContainer } from '../TabContainer';
+
+export default function PerustiedotTab({
+  params,
+}: {
+  params: { oid: string; hakukohde: string };
+}) {
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', params.hakukohde],
+    queryFn: () => getHakukohde(params.hakukohde),
+  });
+
+  return (
+    <TabContainer>
+      <h3>Perustiedot</h3>
+      <p>Hakukohde oid: {hakukohde.oid}</p>
+    </TabContainer>
+  );
+}

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { getHakukohde } from '@/app/lib/kouta';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { TabContainer } from '../TabContainer';
+
+export default function PisteSyottoPage({
+  params,
+}: {
+  params: { oid: string; hakukohde: string };
+}) {
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', params.hakukohde],
+    queryFn: () => getHakukohde(params.hakukohde),
+  });
+
+  return (
+    <TabContainer>
+      <h3>Pistesyöttö</h3>
+      <p>Hakukohde oid: {hakukohde.oid}</p>
+    </TabContainer>
+  );
+}

src/app/haku/[oid]/hakukohde/[hakukohde]/sijoittelun-tulokset/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { getHakukohde } from '@/app/lib/kouta';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { TabContainer } from '../TabContainer';
+
+export default function SijoittelunTuloksetPage({
+  params,
+}: {
+  params: { oid: string; hakukohde: string };
+}) {
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', params.hakukohde],
+    queryFn: () => getHakukohde(params.hakukohde),
+  });
+
+  return (
+    <TabContainer>
+      <h3>Sijoittelun tulokset</h3>
+      <p>Hakukohde oid: {hakukohde.oid}</p>
+    </TabContainer>
+  );
+}

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { getHakukohde } from '@/app/lib/kouta';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { TabContainer } from '../TabContainer';
+
+export default function ValinnanHallintaPage({
+  params,
+}: {
+  params: { oid: string; hakukohde: string };
+}) {
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', params.hakukohde],
+    queryFn: () => getHakukohde(params.hakukohde),
+  });
+
+  return (
+    <TabContainer>
+      <h3>Valinnan hallinta</h3>
+      <p>Hakukohde oid: {hakukohde.oid}</p>
+    </TabContainer>
+  );
+}

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { getHakukohde } from '@/app/lib/kouta';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { TabContainer } from '../TabContainer';
+
+export default function ValintakoekutsutPage({
+  params,
+}: {
+  params: { oid: string; hakukohde: string };
+}) {
+  const { data: hakukohde } = useSuspenseQuery({
+    queryKey: ['getHakukohde', params.hakukohde],
+    queryFn: () => getHakukohde(params.hakukohde),
+  });
+
+  return (
+    <TabContainer>
+      <h3>Valintakoekutsut</h3>
+      <p>Hakukohde oid: {hakukohde.oid}</p>
+    </TabContainer>
+  );
+}