Skip to content

Commit 6a85836

Browse files
pretselipretseli
committed
Refaktoroitu haku-listauksen suodattimet ja taulukko erillisiksi reiteiksi
1 parent e86f48c commit 6a85836

File tree

8 files changed

+313
-246
lines changed

8 files changed

+313
-246
lines changed

‎src/app/(root)/@controls/loading.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { FullSpinner } from '@/app/components/full-spinner';
2+
3+
export default function Loading() {
4+
return <FullSpinner />;
5+
}

‎src/app/(root)/@controls/page.tsx‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
'use client';
2+
import React, { ChangeEvent, useMemo } from 'react';
3+
4+
import {
5+
FormControl,
6+
Select,
7+
MenuItem,
8+
SelectChangeEvent,
9+
FormLabel,
10+
OutlinedInput,
11+
Checkbox,
12+
FormControlLabel,
13+
Box,
14+
InputAdornment,
15+
} from '@mui/material';
16+
17+
import { getHakuAlkamisKaudet } from '../../lib/kouta-types';
18+
import { Search } from '@mui/icons-material';
19+
import { useHakuSearchParams } from '../../hooks/useHakuSearch';
20+
import { useHakutavat } from '@/app/hooks/useHakutavat';
21+
22+
export default function HakuControls() {
23+
const alkamiskaudet = useMemo(getHakuAlkamisKaudet, []);
24+
25+
const { data: hakutavat } = useHakutavat();
26+
27+
const {
28+
searchPhrase,
29+
setSearchPhrase,
30+
selectedAlkamisKausi,
31+
setSelectedAlkamisKausi,
32+
selectedHakutapa,
33+
setSelectedHakutapa,
34+
myosArkistoidut,
35+
setMyosArkistoidut,
36+
} = useHakuSearchParams();
37+
38+
const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
39+
setSearchPhrase(e.target.value);
40+
};
41+
42+
const toggleMyosArkistoidut = (_e: unknown, checked: boolean) => {
43+
setMyosArkistoidut(checked);
44+
};
45+
46+
const changeHakutapa = (e: SelectChangeEvent) => {
47+
setSelectedHakutapa(e.target.value);
48+
};
49+
50+
const changeAlkamisKausi = (e: SelectChangeEvent) => {
51+
setSelectedAlkamisKausi(e.target.value);
52+
};
53+
54+
return (
55+
<Box
56+
display="flex"
57+
flexDirection="row"
58+
justifyContent="space-between"
59+
gap={2}
60+
flexWrap="wrap"
61+
>
62+
<FormControl
63+
sx={{
64+
flexGrow: 2,
65+
minWidth: '180px',
66+
textAlign: 'left',
67+
}}
68+
>
69+
<FormLabel htmlFor="haku-search">Hae hakuja</FormLabel>
70+
<OutlinedInput
71+
id="haku-search"
72+
name="haku-search"
73+
defaultValue={searchPhrase}
74+
onChange={handleSearchChange}
75+
autoFocus={true}
76+
type="text"
77+
placeholder="Hae hakuja"
78+
endAdornment={
79+
<InputAdornment position="end">
80+
<Search />
81+
</InputAdornment>
82+
}
83+
/>
84+
<FormControlLabel
85+
label="Myös arkistoidut"
86+
control={
87+
<Checkbox
88+
data-testid="haku-tila-toggle"
89+
checked={myosArkistoidut ?? false}
90+
onChange={toggleMyosArkistoidut}
91+
/>
92+
}
93+
/>
94+
</FormControl>
95+
<FormControl sx={{ minWidth: '180px', textAlign: 'left' }}>
96+
<FormLabel id="hakutapa-select-label">Hakutapa</FormLabel>
97+
<Select
98+
labelId="hakutapa-select-label"
99+
name="hakutapa-select"
100+
value={selectedHakutapa ?? ''}
101+
onChange={changeHakutapa}
102+
displayEmpty={true}
103+
>
104+
<MenuItem value="">Valitse...</MenuItem>
105+
{hakutavat.map((tapa) => {
106+
return (
107+
<MenuItem value={tapa.koodiUri} key={tapa.koodiUri}>
108+
{tapa.nimi.fi}
109+
</MenuItem>
110+
); //TODO: translate
111+
})}
112+
</Select>
113+
</FormControl>
114+
<FormControl sx={{ minWidth: '180px', textAlign: 'left' }}>
115+
<FormLabel id="alkamiskausi-select-label">
116+
Koulutuksen alkamiskausi
117+
</FormLabel>
118+
<Select
119+
labelId="alkamiskausi-select-label"
120+
name="alkamiskausi-select"
121+
value={selectedAlkamisKausi ?? ''}
122+
onChange={changeAlkamisKausi}
123+
displayEmpty={true}
124+
>
125+
<MenuItem value="">Valitse...</MenuItem>
126+
{alkamiskaudet.map((kausi) => {
127+
const vuosiKausi = `${kausi.alkamisVuosi} ${kausi.alkamisKausiNimi}`;
128+
return (
129+
<MenuItem value={kausi.value} key={kausi.value}>
130+
{vuosiKausi}
131+
</MenuItem>
132+
); //TODO: translate
133+
})}
134+
</Select>
135+
</FormControl>
136+
</Box>
137+
);
138+
}

‎src/app/(root)/layout.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { CSSProperties } from 'react';
2+
import Header from '../components/header';
3+
import { AccessTime as AccessTimeIcon } from '@mui/icons-material';
4+
5+
const titleSectionStyle: CSSProperties = {
6+
borderBottom: '1px solid rgba(0, 0, 0, 0.15)',
7+
display: 'flex',
8+
flexDirection: 'row',
9+
width: '100%',
10+
justifyContent: 'flex-start',
11+
marginBottom: '2rem',
12+
padding: 0,
13+
};
14+
15+
export default async function HakuLayout({
16+
children,
17+
controls,
18+
}: {
19+
children: React.ReactNode;
20+
controls: React.ReactNode;
21+
}) {
22+
return (
23+
<>
24+
<Header isHome={true} />
25+
<main className="mainContainer">
26+
<div style={titleSectionStyle}>
27+
<h2 style={{ textAlign: 'left', margin: '0 0 1rem' }}>
28+
<AccessTimeIcon /> Haut
29+
</h2>
30+
</div>
31+
{controls}
32+
{children}
33+
</main>
34+
</>
35+
);
36+
}

‎src/app/(root)/loading.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { FullSpinner } from '../components/full-spinner';
2+
3+
export default function Loading() {
4+
return <FullSpinner />;
5+
}

‎src/app/(root)/page.tsx‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,41 @@
1-
import { getHakutavat } from '../lib/koodisto';
2-
import { AccessTime as AccessTimeIcon } from '@mui/icons-material';
3-
import { CSSProperties } from 'react';
4-
import HakuFilters from '../components/haku-filters';
5-
import Header from '../components/header';
1+
'use client';
2+
import React from 'react';
63

7-
const titleSectionStyle: CSSProperties = {
8-
borderBottom: '1px solid rgba(0, 0, 0, 0.15)',
9-
display: 'flex',
10-
flexDirection: 'row',
11-
width: '100%',
12-
justifyContent: 'flex-start',
13-
marginBottom: '2rem',
14-
padding: 0,
15-
};
4+
import { HakuTable } from '@/app/components/haku-table';
5+
import { useHakutavat } from '@/app/hooks/useHakutavat';
6+
import { useHakuSearchResults } from '@/app/hooks/useHakuSearch';
7+
import { HakuTablePaginationWrapper } from '../components/haku-table-pagination-wrapper';
168

179
export const dynamic = 'force-dynamic';
1810

19-
export default async function Home() {
20-
const hakutavat = await getHakutavat();
11+
export default function Home() {
12+
const {
13+
page,
14+
setPage,
15+
pageSize,
16+
setPageSize,
17+
results,
18+
pageResults,
19+
sort,
20+
setSort,
21+
} = useHakuSearchResults();
22+
23+
const { data: hakutavat } = useHakutavat();
2124

2225
return (
23-
<>
24-
<Header isHome={true} />
25-
<main className="mainContainer">
26-
<div style={titleSectionStyle}>
27-
<h2 style={{ textAlign: 'left', margin: '0 0 1rem' }}>
28-
<AccessTimeIcon /> Haut
29-
</h2>
30-
</div>
31-
<HakuFilters hakutavat={hakutavat} />
32-
</main>
33-
</>
26+
<HakuTablePaginationWrapper
27+
totalCount={results?.length ?? 0}
28+
pageNumber={page}
29+
setPageNumber={setPage}
30+
pageSize={pageSize}
31+
setPageSize={setPageSize}
32+
>
33+
<HakuTable
34+
haut={pageResults}
35+
hakutavat={hakutavat}
36+
setSort={setSort}
37+
sort={sort ?? ''}
38+
/>
39+
</HakuTablePaginationWrapper>
3440
);
3541
}

0 commit comments

Comments
 (0)