Skip to content

Commit 78e035a

Browse files
adostaladostal
committed
Add Home work :)
1 parent fb4c075 commit 78e035a

File tree

4 files changed

+277
-5
lines changed

4 files changed

+277
-5
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ graphiql: [http://localhost:8080/graphiql](http://localhost:8080/graphiql)
3636

3737
## Libraries
3838

39-
- **Typescript** 2.8.x
39+
- **Typescript** 2.9.x
4040
- **React** 16.4.x
41-
- **Next.js** 6.0.x
41+
- **Next.js** 6.1.x
4242
- **GraphQL** 0.13.x
4343
- **React Apollo** 2.1.x
44-
- **Material-UI** 1.0.x
44+
- **Material-UI** 1.3.x
4545
- **Redux** 4.x
46-
- **Redux-form** 7.3.x
46+
- **Redux-form** 7.4.x
4747
- **React-intl** 2.4.x
4848
- _... go to package.json_
4949

‎client/modules/common/components/menu/LeftMenu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const items = [
1717
{name: 'Home page', route: '/', icon: 'home', divider: false},
1818
{name: 'Profile', route: '/profile', icon: 'info', divider: true},
1919
{name: 'Info', route: '/info', icon: 'info', divider: false},
20+
{name: 'Domaci ukol', route: '/domaciUkol', icon: 'home', divider: false},
2021
];
2122

2223
export const LeftMenu = decorate<Props>(({open, onClose, classes}) => (

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@apitree/alda",
33
"description": "React stack with material-ui",
4-
"version": "0.1.0-alpha.27",
4+
"version": "0.1.0-alpha.28",
55
"author": "ApiTree",
66
"repository": {
77
"type": "git",

‎pages/domaciUkol.tsx‎

Lines changed: 271 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,271 @@
1+
import * as React from 'react';
2+
import {ChangeEvent} from 'react';
3+
import {
4+
Button,
5+
Checkbox,
6+
Dialog,
7+
DialogActions,
8+
DialogContent,
9+
DialogTitle,
10+
FormControl,
11+
FormControlLabel,
12+
Grid,
13+
IconButton,
14+
InputLabel,
15+
MenuItem,
16+
Paper,
17+
Select,
18+
Table,
19+
TableBody,
20+
TableCell,
21+
TableHead,
22+
TableRow,
23+
TextField,
24+
Typography,
25+
withStyles,
26+
} from '@material-ui/core';
27+
import {Edit as EditIcon, Remove as RemoveIcon} from '@material-ui/icons';
28+
import {Layout} from '../client/modules/common/components/page';
29+
30+
enum TypProjektu {
31+
CASOVE_OMEZENY,
32+
CI,
33+
}
34+
35+
interface ProjectModel {
36+
readonly id: number;
37+
readonly nazev: string;
38+
readonly datumOdevzdani: string;
39+
readonly typProjektu: TypProjektu;
40+
readonly webovyProjekt: boolean;
41+
}
42+
43+
let persistData = [
44+
{id: 1, nazev: 'Prvni projekt', datumOdevzdani: '12.2.2018', typProjektu: TypProjektu.CASOVE_OMEZENY, webovyProjekt: false},
45+
{id: 2, nazev: 'Druhy projekt', datumOdevzdani: '13.6.2018', typProjektu: TypProjektu.CI, webovyProjekt: true},
46+
];
47+
48+
const ProjectService = {
49+
getAll: (): ProjectModel[] => persistData,
50+
51+
findById: (id: number): ProjectModel | undefined => ProjectService.getAll().find((f) => f.id === id),
52+
53+
createOrUpdate(data: Partial<ProjectModel>) {
54+
if (!data.id) {
55+
persistData.push({...(data as ProjectModel), id: persistData.length + 1});
56+
} else {
57+
persistData = persistData.map((f) => (f.id === data.id ? {...(data as ProjectModel)} : f));
58+
}
59+
},
60+
61+
remove(id: number) {
62+
persistData = persistData.filter((f) => f.id !== id);
63+
},
64+
};
65+
66+
interface State {
67+
projekty: ProjectModel[];
68+
isOpenDialog: boolean;
69+
editId?: number;
70+
}
71+
72+
export default class extends React.Component<void, Readonly<State>> {
73+
constructor(props: void, context: any) {
74+
super(props, context);
75+
this.state = {
76+
projekty: ProjectService.getAll(),
77+
isOpenDialog: false,
78+
};
79+
}
80+
81+
handleOnClickNew = () => {
82+
this.setState((prevState) => ({...prevState, isOpenDialog: true, editId: undefined}));
83+
};
84+
85+
handleOnClickEdit = (id: number) => {
86+
this.setState((prevState) => ({...prevState, isOpenDialog: true, editId: id}));
87+
};
88+
89+
handleOnDialogClose = () => {
90+
this.setState((prevState) => ({...prevState, isOpenDialog: false, editId: undefined}));
91+
};
92+
93+
handleOnSubmit = (values: Partial<ProjectModel>) => {
94+
ProjectService.createOrUpdate(values);
95+
this.setState((prevState) => ({...prevState, isOpenDialog: false, projekty: ProjectService.getAll()}));
96+
};
97+
98+
handleOnClickRemove = (id: number) => {
99+
ProjectService.remove(id);
100+
this.setState((prevState) => ({...prevState, isOpenDialog: false, projekty: ProjectService.getAll()}));
101+
};
102+
103+
render() {
104+
const {projekty, isOpenDialog, editId} = this.state;
105+
return (
106+
<Layout>
107+
<Typography variant="title">Domácí úkol</Typography>
108+
109+
<Button variant="raised" color="primary" onClick={this.handleOnClickNew}>
110+
Novy projekt
111+
</Button>
112+
<Paper>
113+
<ProjectTable data={projekty} onClickEdit={this.handleOnClickEdit} onClickRemove={this.handleOnClickRemove} />
114+
</Paper>
115+
<ProjectDialog open={isOpenDialog} onClose={this.handleOnDialogClose} editId={editId} onSubmit={this.handleOnSubmit} />
116+
</Layout>
117+
);
118+
}
119+
}
120+
121+
interface ProjectTableProps {
122+
data: ProjectModel[];
123+
onClickEdit: (id: number) => void;
124+
onClickRemove: (id: number) => void;
125+
}
126+
127+
const ProjectTable = withStyles((_) => ({}))<Readonly<ProjectTableProps>>(({data, onClickEdit, onClickRemove}) => {
128+
const handleOnClickEdit = (id: number) => () => {
129+
onClickEdit(id);
130+
};
131+
132+
const handleOnClickRemove = (id: number) => () => {
133+
onClickRemove(id);
134+
};
135+
136+
return (
137+
<Table>
138+
<TableHead>
139+
<TableRow>
140+
<TableCell>Id</TableCell>
141+
<TableCell>Nazev</TableCell>
142+
<TableCell>Typ projektu</TableCell>
143+
<TableCell>Datum odevzdani</TableCell>
144+
<TableCell>Webovy projekt</TableCell>
145+
<TableCell>Editovat</TableCell>
146+
<TableCell>Smazat</TableCell>
147+
</TableRow>
148+
</TableHead>
149+
<TableBody>
150+
{data.map((row) => (
151+
<TableRow key={row.id}>
152+
<TableCell>{row.id}</TableCell>
153+
<TableCell>{row.nazev}</TableCell>
154+
<TableCell>{row.typProjektu === TypProjektu.CI ? 'CD/CI' : 'Casove omezeny'}</TableCell>
155+
<TableCell>{row.datumOdevzdani}</TableCell>
156+
<TableCell>{row.webovyProjekt ? 'Ano' : 'Ne'}</TableCell>
157+
<TableCell>
158+
<IconButton onClick={handleOnClickEdit(row.id)}>
159+
<EditIcon />
160+
</IconButton>
161+
</TableCell>
162+
<TableCell>
163+
<IconButton onClick={handleOnClickRemove(row.id)}>
164+
<RemoveIcon />
165+
</IconButton>
166+
</TableCell>
167+
</TableRow>
168+
))}
169+
</TableBody>
170+
</Table>
171+
);
172+
});
173+
174+
interface ProjectDialogProps {
175+
open: boolean;
176+
editId?: number;
177+
onClose: () => void;
178+
onSubmit: (values: Partial<ProjectModel>) => void;
179+
}
180+
181+
interface ProjectDialogState {
182+
data: Partial<ProjectModel>;
183+
}
184+
185+
const defaultData = {nazev: '', datumOdevzdani: '', typProjektu: TypProjektu.CASOVE_OMEZENY};
186+
187+
// tslint:disable-next-line
188+
class ProjectDialog extends React.Component<ProjectDialogProps, ProjectDialogState> {
189+
constructor(props: ProjectDialogProps, context: any) {
190+
super(props, context);
191+
this.state = {
192+
data: defaultData,
193+
};
194+
}
195+
196+
static getDerivedStateFromProps(nextProps: ProjectDialogProps, prevState: ProjectDialogState) {
197+
if (!nextProps.open) {
198+
return {data: defaultData};
199+
}
200+
if (nextProps.editId === prevState.data.id) {
201+
return null;
202+
}
203+
return {
204+
data: nextProps.editId ? ProjectService.findById(nextProps.editId) : defaultData,
205+
};
206+
}
207+
208+
handleOnChange = (name: keyof ProjectModel) => (e: ChangeEvent<any>) => {
209+
this.setState({data: {...this.state.data, [name]: name === 'webovyProjekt' ? e.target.checked : e.target.value}});
210+
};
211+
212+
handleOnSubmit = () => {
213+
this.props.onSubmit({id: this.props.editId, ...this.state.data});
214+
};
215+
216+
render() {
217+
const {open, editId, onClose} = this.props;
218+
const {data} = this.state;
219+
return (
220+
<Dialog open={open} keepMounted>
221+
<DialogTitle>{editId ? 'Editace projektu' : 'Novy projekt'}</DialogTitle>
222+
{open && (
223+
<DialogContent>
224+
<Grid container spacing={16}>
225+
<Grid item xs={12}>
226+
<TextField id="nazev" label="Nazev" value={data.nazev} onChange={this.handleOnChange('nazev')} fullWidth />
227+
</Grid>
228+
<Grid item xs={12}>
229+
<TextField
230+
id="datumOdevzdani"
231+
label="Datum odevzdani"
232+
value={data.datumOdevzdani}
233+
onChange={this.handleOnChange('datumOdevzdani')}
234+
fullWidth
235+
/>
236+
</Grid>
237+
<Grid item xs={12}>
238+
<FormControl fullWidth>
239+
<InputLabel htmlFor="typProjektu">Typ projektu</InputLabel>
240+
<Select
241+
value={data.typProjektu}
242+
onChange={this.handleOnChange('typProjektu')}
243+
inputProps={{
244+
name: 'Typ',
245+
id: 'typProjektu',
246+
}}
247+
>
248+
<MenuItem value={TypProjektu.CASOVE_OMEZENY}>Casove omezeny</MenuItem>
249+
<MenuItem value={TypProjektu.CI}>CD/CI</MenuItem>
250+
</Select>
251+
</FormControl>
252+
</Grid>
253+
<Grid item xs={12}>
254+
<FormControlLabel
255+
control={<Checkbox checked={data.webovyProjekt} onChange={this.handleOnChange('webovyProjekt')} value="webovyProjekt" />}
256+
label="Webovy projekt"
257+
/>
258+
</Grid>
259+
</Grid>
260+
</DialogContent>
261+
)}
262+
<DialogActions>
263+
<Button onClick={onClose}>Zavrit</Button>
264+
<Button color="primary" onClick={this.handleOnSubmit}>
265+
Ulozit
266+
</Button>
267+
</DialogActions>
268+
</Dialog>
269+
);
270+
}
271+
}

0 commit comments

Comments
 (0)