-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #11 from Opetushallitus/OK-508_hakujen-sivutus-sel…
…aimessa OK-508: Hakujen sivutus selaimessa
- Loading branch information
Showing
37 changed files
with
1,461 additions
and
468 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { FullSpinner } from '@/app/components/full-spinner'; | ||
|
|
||
| export default function Loading() { | ||
| return <FullSpinner />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,200 @@ | ||
| 'use client'; | ||
| import React, { ChangeEvent, Suspense, useMemo } from 'react'; | ||
|
|
||
| import { | ||
| FormControl, | ||
| Select, | ||
| MenuItem, | ||
| SelectChangeEvent, | ||
| FormLabel, | ||
| OutlinedInput, | ||
| Box, | ||
| InputAdornment, | ||
| CircularProgress, | ||
| } from '@mui/material'; | ||
|
|
||
| import { Tila, getHakuAlkamisKaudet } from '@/app/lib/kouta-types'; | ||
| import { Search } from '@mui/icons-material'; | ||
| import { useHakuSearchParams } from '@/app/hooks/useHakuSearch'; | ||
| import { useHakutavat } from '@/app/hooks/useHakutavat'; | ||
|
|
||
| const HakutapaSelect = ({ | ||
| value: selectedHakutapa, | ||
| onChange, | ||
| }: { | ||
| value: string; | ||
| onChange: (e: SelectChangeEvent) => void; | ||
| }) => { | ||
| const { data: hakutavat } = useHakutavat(); | ||
| return ( | ||
| <Select | ||
| labelId="hakutapa-select-label" | ||
| name="hakutapa-select" | ||
| value={selectedHakutapa ?? ''} | ||
| onChange={onChange} | ||
| displayEmpty={true} | ||
| > | ||
| <MenuItem value="">Valitse...</MenuItem> | ||
| {hakutavat.map((tapa) => { | ||
| return ( | ||
| <MenuItem value={tapa.koodiUri} key={tapa.koodiUri}> | ||
| {tapa.nimi.fi} | ||
| </MenuItem> | ||
| ); //TODO: translate | ||
| })} | ||
| </Select> | ||
| ); | ||
| }; | ||
|
|
||
| const SelectFallback = () => ( | ||
| <Select | ||
| disabled={true} | ||
| startAdornment={ | ||
| <InputAdornment position="start"> | ||
| <CircularProgress | ||
| sx={{ height: '24px !important', width: '24px !important' }} | ||
| /> | ||
| </InputAdornment> | ||
| } | ||
| /> | ||
| ); | ||
|
|
||
| const HakutapaInput = ({ | ||
| value, | ||
| onChange, | ||
| }: { | ||
| value: string; | ||
| onChange: (e: SelectChangeEvent) => void; | ||
| }) => { | ||
| return ( | ||
| <FormControl sx={{ flex: '1 0 180px', textAlign: 'left' }}> | ||
| <FormLabel id="hakutapa-select-label">Hakutapa</FormLabel> | ||
| <Suspense fallback={<SelectFallback />}> | ||
| <HakutapaSelect value={value} onChange={onChange} /> | ||
| </Suspense> | ||
| </FormControl> | ||
| ); | ||
| }; | ||
|
|
||
| export default function HakuControls() { | ||
| const alkamiskaudet = useMemo(getHakuAlkamisKaudet, []); | ||
|
|
||
| const { | ||
| searchPhrase, | ||
| setSearchPhrase, | ||
| selectedAlkamisKausi, | ||
| setSelectedAlkamisKausi, | ||
| selectedHakutapa, | ||
| setSelectedHakutapa, | ||
| tila, | ||
| setTila, | ||
| } = useHakuSearchParams(); | ||
|
|
||
| const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => { | ||
| setSearchPhrase(e.target.value); | ||
| }; | ||
|
|
||
| const changeTila = (e: SelectChangeEvent) => { | ||
| setTila(e.target.value); | ||
| }; | ||
|
|
||
| const changeHakutapa = (e: SelectChangeEvent) => { | ||
| setSelectedHakutapa(e.target.value); | ||
| }; | ||
|
|
||
| const changeAlkamisKausi = (e: SelectChangeEvent) => { | ||
| setSelectedAlkamisKausi(e.target.value); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box | ||
| display="flex" | ||
| flexDirection="row" | ||
| justifyContent="stretch" | ||
| gap={2} | ||
| marginBottom={2} | ||
| flexWrap="wrap" | ||
| alignItems="flex-end" | ||
| > | ||
| <FormControl | ||
| sx={{ | ||
| flexGrow: 4, | ||
| minWidth: '180px', | ||
| textAlign: 'left', | ||
| }} | ||
| > | ||
| <FormLabel htmlFor="haku-search">Hae hakuja</FormLabel> | ||
| <OutlinedInput | ||
| id="haku-search" | ||
| name="haku-search" | ||
| defaultValue={searchPhrase} | ||
| onChange={handleSearchChange} | ||
| autoFocus={true} | ||
| type="text" | ||
| placeholder="Hae hakuja" | ||
| endAdornment={ | ||
| <InputAdornment position="end"> | ||
| <Search /> | ||
| </InputAdornment> | ||
| } | ||
| /> | ||
| </FormControl> | ||
| <FormControl | ||
| sx={{ | ||
| width: 'auto', | ||
| minWidth: '140px', | ||
| textAlign: 'left', | ||
| }} | ||
| > | ||
| <FormLabel id="tila-select-label">Tila</FormLabel> | ||
| <Select | ||
| labelId="tila-select-label" | ||
| name="tila-select" | ||
| value={tila ?? ''} | ||
| onChange={changeTila} | ||
| displayEmpty={true} | ||
| > | ||
| <MenuItem value="">Valitse...</MenuItem> | ||
| {Object.values(Tila).map((tila) => { | ||
| return ( | ||
| <MenuItem value={tila} key={tila}> | ||
| {tila} | ||
| </MenuItem> | ||
| ); //TODO: translate | ||
| })} | ||
| </Select> | ||
| </FormControl> | ||
| <Box | ||
| display="flex" | ||
| justifyContent="stretch" | ||
| gap={2} | ||
| flex="1 0 400px" | ||
| alignItems="flex-end" | ||
| > | ||
| <HakutapaInput value={selectedHakutapa} onChange={changeHakutapa} /> | ||
| <FormControl sx={{ textAlign: 'left', flex: '1 0 180px' }}> | ||
| <FormLabel id="alkamiskausi-select-label"> | ||
| Koulutuksen alkamiskausi | ||
| </FormLabel> | ||
| <Select | ||
| labelId="alkamiskausi-select-label" | ||
| name="alkamiskausi-select" | ||
| value={selectedAlkamisKausi ?? ''} | ||
| onChange={changeAlkamisKausi} | ||
| displayEmpty={true} | ||
| > | ||
| <MenuItem value="">Valitse...</MenuItem> | ||
| {alkamiskaudet.map((kausi) => { | ||
| const vuosiKausi = `${kausi.alkamisVuosi} ${kausi.alkamisKausiNimi}`; | ||
| return ( | ||
| <MenuItem value={kausi.value} key={kausi.value}> | ||
| {vuosiKausi} | ||
| </MenuItem> | ||
| ); //TODO: translate | ||
| })} | ||
| </Select> | ||
| </FormControl> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| 'use client'; | ||
| import React from 'react'; | ||
| import { | ||
| FormControl, | ||
| Select, | ||
| MenuItem, | ||
| FormLabel, | ||
| Typography, | ||
| Box, | ||
| styled, | ||
| Pagination, | ||
| } from '@mui/material'; | ||
| import { DEFAULT_PAGE_SIZE, PAGE_SIZES } from '@/app/lib/constants'; | ||
|
|
||
| export const StyledPagination = styled(Pagination)({ | ||
| display: 'flex', | ||
| }); | ||
|
|
||
| export type HakuTablePaginationWrapperProps = { | ||
| totalCount: number; | ||
| pageNumber: number; | ||
| setPageNumber: (page: number) => void; | ||
| pageSize: number; | ||
| setPageSize: (page: number) => void; | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| export const HakuTablePaginationWrapper = ({ | ||
| totalCount, | ||
| pageNumber, | ||
| pageSize, | ||
| setPageNumber, | ||
| setPageSize, | ||
| children, | ||
| }: HakuTablePaginationWrapperProps) => { | ||
| return totalCount === 0 ? ( | ||
| <p>Ei hakutuloksia</p> | ||
| ) : ( | ||
| <> | ||
| <Box display="flex" justifyContent="space-between" alignItems="center"> | ||
| <Typography sx={{ textAlign: 'left' }}>Hakuja: {totalCount}</Typography> | ||
| <FormControl> | ||
| <FormLabel id="page-size-select-label">Näytä per sivu:</FormLabel> | ||
| <Select | ||
| labelId="page-size-select-label" | ||
| name="page-size-select" | ||
| value={pageSize.toString()} | ||
| onChange={(e) => { | ||
| const newValue = parseInt(e.target.value, 10); | ||
| setPageSize(isNaN(newValue) ? DEFAULT_PAGE_SIZE : newValue); | ||
| }} | ||
| > | ||
| {PAGE_SIZES.map((size) => { | ||
| return ( | ||
| <MenuItem value={size} key={size}> | ||
| {size} | ||
| </MenuItem> | ||
| ); | ||
| })} | ||
| </Select> | ||
| </FormControl> | ||
| </Box> | ||
| <Box display="flex" flexDirection="column" rowGap={1} alignItems="center"> | ||
| {children} | ||
| <StyledPagination | ||
| aria-label="Sivutus" | ||
| count={Math.ceil(totalCount / pageSize)} | ||
| page={pageNumber} | ||
| onChange={(_e: unknown, value: number) => { | ||
| setPageNumber(value); | ||
| }} | ||
| /> | ||
| </Box> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.