-
Notifications
You must be signed in to change notification settings - Fork 40
/
PackageCatalog.js
112 lines (99 loc) · 3.89 KB
/
PackageCatalog.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import {useEffect, useState} from "react";
import {
Grid,
GridItem,
Center,
List,
ListItem,
InputGroup,
InputLeftElement,
Input,
Button,
Text
} from '@chakra-ui/react'
import { SearchIcon } from '@chakra-ui/icons'
import PackageCatalogOption from "./PackageCatalogOption";
import { useNavigate } from "react-router";
const PackageCatalog = ({kurtosisPackages: defaultPackages}) => {
const navigate = useNavigate()
const [kurtosisPackages, setKurtosisPackages] = useState([])
const [chosenPackage, setChosenPackage] = useState({})
useEffect(()=> {
setKurtosisPackages(defaultPackages)
}, [defaultPackages.length])
const selectPackage = (selectedPackage) => {
if (selectedPackage["name"] === chosenPackage["name"]) {
setChosenPackage({})
} else {
setChosenPackage(selectedPackage)
}
}
const handleConfigureButtonClick = () => {
navigate("/catalog/form", {state: {kurtosisPackage: chosenPackage}})
}
const handleSearchEvent = (e) => {
const value = e.target.value
if (value === "") {
setKurtosisPackages(defaultPackages)
}
const filteredPackages = defaultPackages.filter(pack => {
if ("name" in pack) {
return pack.name.includes(value)
}
return false;
}
)
setKurtosisPackages(filteredPackages)
}
return (
<div className='w-screen'>
<Grid
templateAreas={`"option"
"search"
"main"
"configure"`}
gridTemplateRows={'60px 60px 1fr 60px'}
gridTemplateColumns={'1fr'}
h='100%'
w='100%'
color='blackAlpha.700'
fontWeight='bold'
gap={2}
>
<GridItem area={'option'} pt="1">
<PackageCatalogOption catalog={true}/>
</GridItem>
<GridItem area={'search'} m="10px">
<InputGroup>
<InputLeftElement pointerEvents='none' >
<SearchIcon color='gray.300'/>
</InputLeftElement>
<Input placeholder='Package Name' color='gray.300' onChange={handleSearchEvent}/>
</InputGroup>
</GridItem>
<GridItem area={'main'} h="100%" overflowY={"scroll"}>
<List spacing={1} padding="10px" h="100%">
{
kurtosisPackages.map( (kurtosisPackage, index) => {
const bgcolor = (kurtosisPackage.name === chosenPackage.name) ? '#24BA27' : 'gray.300'
if ("name" in kurtosisPackage) {
return (
<ListItem bg={bgcolor} key={index} onClick={() => selectPackage(kurtosisPackage)}>
<Center h="70px" w="100%">
<Text fontSize={"2xl"} color='blue.800' fontWeight={"bold"}> {kurtosisPackage.name} </Text>
</Center>
</ListItem>
)
}
})
}
</List>
</GridItem>
<GridItem area={'configure'} m="10px">
<Button bg='#24BA27' w="100%" isDisabled={Object.keys(chosenPackage).length === 0} onClick={handleConfigureButtonClick} >Configure >> </Button>
</GridItem>
</Grid>
</div>
);
};
export default PackageCatalog;