From 132acb7c1f357bdc5defca94a7d5d6658b9fb217 Mon Sep 17 00:00:00 2001 From: Beatriz Rodriguez Date: Sun, 29 Oct 2017 19:13:13 +0100 Subject: [PATCH 1/4] Tabs componented added. Only UI. --- .../edit/components/editionUserPanel.tsx | 21 ++++++ .../components/editionUserTrainingsPanel.tsx | 12 ++++ .../admin/student/edit/components/index.ts | 3 + .../student/edit/components/tabContainer.tsx | 13 ++++ .../edit/components/tabContainerStyles.scss | 4 ++ src/pages/admin/student/edit/page.tsx | 72 ++++++++++++++----- src/pages/admin/student/edit/pageStyles.scss | 6 ++ 7 files changed, 113 insertions(+), 18 deletions(-) create mode 100644 src/pages/admin/student/edit/components/editionUserPanel.tsx create mode 100644 src/pages/admin/student/edit/components/editionUserTrainingsPanel.tsx create mode 100644 src/pages/admin/student/edit/components/index.ts create mode 100644 src/pages/admin/student/edit/components/tabContainer.tsx create mode 100644 src/pages/admin/student/edit/components/tabContainerStyles.scss create mode 100644 src/pages/admin/student/edit/pageStyles.scss diff --git a/src/pages/admin/student/edit/components/editionUserPanel.tsx b/src/pages/admin/student/edit/components/editionUserPanel.tsx new file mode 100644 index 0000000..fab1a85 --- /dev/null +++ b/src/pages/admin/student/edit/components/editionUserPanel.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { Link } from 'react-router'; +import { StudentSummary } from '../../../../../model/studentSummary'; + +interface Props { + student: StudentSummary; +} + +export const EditionUserPanel: React.StatelessComponent = (props) => { + return ( +
+ Name: {props.student.fullname} +
+ Email: {props.student.email} +
+ Is Active?: {props.student.isActive ? 'Yes' : 'No'} +
+ ); +}; + +EditionUserPanel.displayName = 'EditionUserPanel'; diff --git a/src/pages/admin/student/edit/components/editionUserTrainingsPanel.tsx b/src/pages/admin/student/edit/components/editionUserTrainingsPanel.tsx new file mode 100644 index 0000000..4fec86f --- /dev/null +++ b/src/pages/admin/student/edit/components/editionUserTrainingsPanel.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import { Link } from 'react-router'; + +export const EditionUserTrainingsPanel: React.StatelessComponent<{}> = (props) => { + return ( +
+ User Trainings info +
+ ); +}; + +EditionUserTrainingsPanel.displayName = 'EditionUserTrainingsPanel'; diff --git a/src/pages/admin/student/edit/components/index.ts b/src/pages/admin/student/edit/components/index.ts new file mode 100644 index 0000000..7a0cef5 --- /dev/null +++ b/src/pages/admin/student/edit/components/index.ts @@ -0,0 +1,3 @@ +export { TabContainer } from './tabContainer'; +export { EditionUserPanel } from './editionuserPanel'; +export { EditionUserTrainingsPanel } from './editionUserTrainingsPanel'; diff --git a/src/pages/admin/student/edit/components/tabContainer.tsx b/src/pages/admin/student/edit/components/tabContainer.tsx new file mode 100644 index 0000000..c94c69d --- /dev/null +++ b/src/pages/admin/student/edit/components/tabContainer.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { Link } from 'react-router'; +const styles: any = require('./tabContainerStyles.scss'); + +export const TabContainer: React.StatelessComponent<{}> = (props) => { + return ( +
+ {props.children} +
+ ); +}; + +TabContainer.displayName = 'TabContainer'; diff --git a/src/pages/admin/student/edit/components/tabContainerStyles.scss b/src/pages/admin/student/edit/components/tabContainerStyles.scss new file mode 100644 index 0000000..a8cdc4b --- /dev/null +++ b/src/pages/admin/student/edit/components/tabContainerStyles.scss @@ -0,0 +1,4 @@ +.tabContainerPanel { + padding: 24px; + background-color: #f9f9f9; +} diff --git a/src/pages/admin/student/edit/page.tsx b/src/pages/admin/student/edit/page.tsx index 64337be..599df73 100644 --- a/src/pages/admin/student/edit/page.tsx +++ b/src/pages/admin/student/edit/page.tsx @@ -2,32 +2,68 @@ import * as React from 'react'; import { Link } from 'react-router'; import { adminRouteEnums } from '../../../../common/routeEnums/admin'; import { StudentSummary } from '../../../../model/studentSummary'; +import { withStyles } from 'material-ui/styles'; +import AppBar from 'material-ui/AppBar'; +import Tabs, { Tab } from 'material-ui/Tabs'; +import { TabContainer , EditionUserPanel , EditionUserTrainingsPanel} from './components'; +const styles: any = require('./pageStyles.scss'); -interface Props { +interface Props { student: StudentSummary; getStudent: (id: string) => void; studentId: string; } -export class EditStudentPage extends React.Component { - public componentDidMount() { - const studentId: string = this.props.studentId; - this.props.getStudent(studentId); +interface State { + value: number; +} + +export class EditStudentPage extends React.Component { + constructor() { + super(); + this.state = { + value: 0, + }; + } + public componentDidMount() { + const studentId: string = this.props.studentId; + this.props.getStudent(studentId); + } + + private handleChange = (event, value) => { + this.setState({ value }); } - public render() { - return ( -
- Student name: {this.props.student.fullname} -
- Email: {this.props.student.email} -
- Is Active?: {this.props.student.isActive ? 'Yes' : 'No'} -
- Back to student list - Back to Dashboard + public render() { + const { value } = this.state; + + return ( +
+

{this.props.student.fullname}

+
+ + + + + + + {value === 0 && + + + } + {value === 1 && + + + } + +
-
- ); +
+ + Back to student list + Back to Dashboard + +
+ ); } } diff --git a/src/pages/admin/student/edit/pageStyles.scss b/src/pages/admin/student/edit/pageStyles.scss new file mode 100644 index 0000000..9d601f4 --- /dev/null +++ b/src/pages/admin/student/edit/pageStyles.scss @@ -0,0 +1,6 @@ +.tabHeader { + color: black!important; + background-color: #ddd !important; + position: static !important; +} + From 6fb697f4256ea56f2bd7061434c206f187535ccb Mon Sep 17 00:00:00 2001 From: Beatriz Rodriguez Date: Sun, 29 Oct 2017 22:38:55 +0100 Subject: [PATCH 2/4] UI changes in editStudent panel. Only UI changes. --- src/common/components/form/checkbox.tsx | 23 +++++++++ src/common/components/form/index.ts | 3 ++ .../components/form/specs/checkbox.spec.tsx | 47 +++++++++++++++++++ .../edit/components/editionUserPanel.tsx | 35 ++++++++++++-- src/pages/admin/student/edit/page.tsx | 9 +++- src/pages/admin/student/edit/pageStyles.scss | 6 +++ 6 files changed, 116 insertions(+), 7 deletions(-) create mode 100644 src/common/components/form/checkbox.tsx create mode 100644 src/common/components/form/specs/checkbox.spec.tsx diff --git a/src/common/components/form/checkbox.tsx b/src/common/components/form/checkbox.tsx new file mode 100644 index 0000000..1f09a1a --- /dev/null +++ b/src/common/components/form/checkbox.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Checkbox from 'material-ui/Checkbox'; + +export interface CheckboxComponentProps { + value: boolean; + label: string; + labelClassName: string; + name: string; + onChange: any; +} + +export const CheckboxComponent: React.StatelessComponent = (props) => { + return ( +
+ + + + ); +}; + +CheckboxComponent.displayName = 'CheckboxComponent'; diff --git a/src/common/components/form/index.ts b/src/common/components/form/index.ts index 16ee3b6..a37253c 100644 --- a/src/common/components/form/index.ts +++ b/src/common/components/form/index.ts @@ -10,3 +10,6 @@ export { export { SelectComponent, } from './select'; +export { + CheckboxComponent, +} from './checkbox'; diff --git a/src/common/components/form/specs/checkbox.spec.tsx b/src/common/components/form/specs/checkbox.spec.tsx new file mode 100644 index 0000000..c87a82d --- /dev/null +++ b/src/common/components/form/specs/checkbox.spec.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import { shallow } from 'enzyme'; +import { multilineTrim } from '../../../parse/multilineTrim'; +import { CheckboxComponent ,CheckboxComponentProps} from '../checkbox'; + +describe('CheckboxComponent', () => { + it('should be defined', () => { + // Arrange + const props: CheckboxComponentProps = { + name: '', + label: '', + value: true, + labelClassName : '', + onChange: () => { }, + }; + + // Act + const component = shallow( + , + ); + + // Assert + expect(component).not.to.be.undefined; + }); + + // it('should calls to onChange', () => { + // // Arrange + // const props: CheckboxComponentProps = { + // name: 'Test name',dd + // label: 'Test label', + // value: true, + // onChange: sinon.spy(), + // labelClassName: 'Test label class name' + // }; + + // // Act + // const component = shallow( + // , + // ); + + // component.find('input').simulate('change'); + + // // Assert + // expect(props.onChange.called).to.be.true; + // }); + +}); diff --git a/src/pages/admin/student/edit/components/editionUserPanel.tsx b/src/pages/admin/student/edit/components/editionUserPanel.tsx index fab1a85..13b6bc3 100644 --- a/src/pages/admin/student/edit/components/editionUserPanel.tsx +++ b/src/pages/admin/student/edit/components/editionUserPanel.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Link } from 'react-router'; import { StudentSummary } from '../../../../../model/studentSummary'; +import { InputComponent , CheckboxComponent} from '../../../../../common/components/form'; interface Props { student: StudentSummary; @@ -9,11 +10,35 @@ interface Props { export const EditionUserPanel: React.StatelessComponent = (props) => { return (
- Name: {props.student.fullname} -
- Email: {props.student.email} -
- Is Active?: {props.student.isActive ? 'Yes' : 'No'} + {}} + value={props.student.fullname} + placeholder="Student name" + /> + + {}} + value={props.student.email} + placeholder="Student email" + /> + + {}} + />
); }; diff --git a/src/pages/admin/student/edit/page.tsx b/src/pages/admin/student/edit/page.tsx index 599df73..0715b20 100644 --- a/src/pages/admin/student/edit/page.tsx +++ b/src/pages/admin/student/edit/page.tsx @@ -55,9 +55,14 @@ export class EditStudentPage extends React.Component { } -
- +
+
+
+ +
+
+
Back to student list diff --git a/src/pages/admin/student/edit/pageStyles.scss b/src/pages/admin/student/edit/pageStyles.scss index 9d601f4..4354b34 100644 --- a/src/pages/admin/student/edit/pageStyles.scss +++ b/src/pages/admin/student/edit/pageStyles.scss @@ -4,3 +4,9 @@ position: static !important; } +.saveButton +{ + padding-top:10px; + padding-bottom: 10px; +} + From d12342377db7f63ec3b12f7294e66a5098ed42c9 Mon Sep 17 00:00:00 2001 From: Beatriz Rodriguez Date: Mon, 20 Nov 2017 11:54:49 +0100 Subject: [PATCH 3/4] - Added material-ui package to package.json - Fix type error (helpers.ts) - Added some ui changes to the student edition screen --- package.json | 3 +- src/common/components/form/checkbox.tsx | 13 +++-- .../edit/components/editionUserPanel.tsx | 11 +++- .../edit/components/tabContainerStyles.scss | 1 + src/pages/admin/student/edit/page.tsx | 55 ++++++++++--------- src/pages/admin/student/edit/pageStyles.scss | 1 - src/rest-api/helpers.ts | 4 +- 7 files changed, 49 insertions(+), 39 deletions(-) diff --git a/package.json b/package.json index a24e5c1..b43d0bc 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,8 @@ "react-virtualized": "^9.1.0", "redux": "^3.5.2", "redux-thunk": "^2.1.0", - "toastr": "^2.1.2" + "toastr": "^2.1.2", + "material-ui": "^0.19.4" }, "engines": { "node": "6.11.1" diff --git a/src/common/components/form/checkbox.tsx b/src/common/components/form/checkbox.tsx index 1f09a1a..88dcabd 100644 --- a/src/common/components/form/checkbox.tsx +++ b/src/common/components/form/checkbox.tsx @@ -7,16 +7,19 @@ export interface CheckboxComponentProps { labelClassName: string; name: string; onChange: any; + wrapperClassName?: string; } export const CheckboxComponent: React.StatelessComponent = (props) => { return ( -
-