1
- import React from 'react' ;
1
+ import React , { useState } from 'react' ;
2
+ import axios from 'axios' ;
3
+ import { useSnackbar } from 'notistack' ;
2
4
import { Link } from 'react-router-dom' ;
3
5
4
6
import Grid from '@material-ui/core/Grid' ;
@@ -11,9 +13,12 @@ import CardContent from '@material-ui/core/CardContent';
11
13
import yellow from '@material-ui/core/colors/yellow' ;
12
14
import EditIcon from '@material-ui/icons/Edit' ;
13
15
import Switch from '@material-ui/core/Switch' ;
16
+ import FormControlLabel from '@material-ui/core/FormControlLabel' ;
17
+ import Autocomplete from '@material-ui/lab/Autocomplete' ;
14
18
15
19
import AuthContext from '../../../Contexts/AuthContext' ;
16
- import FormControlLabel from '@material-ui/core/FormControlLabel' ;
20
+ import standardStatusHandler from '../../../Utils/standardStatusHandler' ;
21
+ import standardErrorHandler from '../../../Utils/standardErrorHandler' ;
17
22
18
23
19
24
const useStyles = makeStyles ( ( theme ) => ( {
@@ -24,35 +29,72 @@ const useStyles = makeStyles((theme) => ({
24
29
25
30
export default function CourseCard ( { course, _disabled, editableFields, updateField, saveCourse} ) {
26
31
const classes = useStyles ( ) ;
32
+ const { enqueueSnackbar} = useSnackbar ( ) ;
33
+ const [ images , setImages ] = useState ( [ ] ) ;
34
+
35
+ React . useEffect ( ( ) => {
36
+ axios . get ( `/api/admin/ide/images/list` ) . then ( ( response ) => {
37
+ const data = standardStatusHandler ( response , enqueueSnackbar ) ;
38
+ if ( data . images ) {
39
+ setImages ( data . images ) ;
40
+ }
41
+ } ) . catch ( standardErrorHandler ( enqueueSnackbar ) ) ;
42
+ } , [ ] ) ;
27
43
28
44
return (
29
45
< Card >
30
46
< CardContent >
31
47
< Grid container spacing = { 2 } >
32
- { editableFields . map ( ( { field, label, type = 'text' , disabled = false } ) => (
33
- < Grid item xs = { 12 } key = { field } >
34
- { type === 'text' && < TextField
35
- fullWidth
36
- disabled = { disabled || _disabled }
37
- variant = { 'outlined' }
38
- label = { label }
39
- value = { course [ field ] }
40
- onChange = { updateField ( course . id , field ) }
41
- /> }
42
- { type === 'boolean' && < FormControlLabel
43
- value = { course [ field ] }
44
- label = { label }
45
- labelPlacement = "end"
46
- control = {
47
- < Switch
48
- checked = { course [ field ] }
49
- color = { 'primary' }
50
- onClick = { updateField ( course . id , field , true ) }
48
+ { editableFields . map ( ( { field, label, type = 'text' , disabled = false } ) => {
49
+ switch ( field ) {
50
+ case 'theia_default_image' :
51
+ return (
52
+ < Grid item xs = { 12 } key = { field } >
53
+ < Autocomplete
54
+ fullWidth
55
+ value = { course [ field ] }
56
+ onChange = { ( _ , v ) => updateField ( course . id , field , false , false , true ) ( v ) }
57
+ options = { images }
58
+ getOptionLabel = { ( option ) => option . label }
59
+ renderInput = { ( params ) => < TextField { ...params } label = { label } variant = "outlined" /> }
60
+ />
61
+ </ Grid >
62
+ ) ;
63
+ }
64
+ switch ( type ) {
65
+ case 'text' :
66
+ return (
67
+ < Grid item xs = { 12 } key = { field } >
68
+ < TextField
69
+ fullWidth
70
+ disabled = { disabled || _disabled }
71
+ variant = { 'outlined' }
72
+ label = { label }
73
+ value = { course [ field ] }
74
+ onChange = { updateField ( course . id , field ) }
75
+ />
76
+ </ Grid >
77
+ ) ;
78
+ case 'boolean' :
79
+ return (
80
+ < Grid item xs = { 12 } key = { field } >
81
+ < FormControlLabel
82
+ value = { course [ field ] }
83
+ label = { label }
84
+ labelPlacement = "end"
85
+ control = {
86
+ < Switch
87
+ checked = { course [ field ] }
88
+ color = { 'primary' }
89
+ onClick = { updateField ( course . id , field , true ) }
90
+ />
91
+ }
51
92
/>
52
- }
53
- /> }
54
- </ Grid >
55
- ) ) }
93
+ </ Grid >
94
+ ) ;
95
+ }
96
+ return null ;
97
+ } ) }
56
98
</ Grid >
57
99
</ CardContent >
58
100
{ ! _disabled ? (
0 commit comments