Mymaster

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"

src/common/components/form/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Checkbox from 'material-ui/Checkbox';
+
+export interface CheckboxComponentProps {
+  value: boolean;
+  label: string;
+  labelClassName: string;
+  name: string;
+  onChange: any;
+  wrapperClassName?: string;
+}
+
+export const CheckboxComponent: React.StatelessComponent<CheckboxComponentProps> = (props) => {
+  return (
+    <div>
+      <label htmlFor={props.name} className={props.labelClassName}>
+        {props.label}
+      </label>
+      <div className={props.wrapperClassName}>
+        <Checkbox checked={props.value} onChange={props.onChange} />
+      </ div>
+    </ div>
+  );
+};
+
+CheckboxComponent.displayName = 'CheckboxComponent';

src/common/components/form/index.ts

@@ -10,3 +10,6 @@ export {
 export {
   SelectComponent,
 } from './select';
+export {
+  CheckboxComponent,
+} from './checkbox';

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(
+      <CheckboxComponent {...props} />,
+    );
+
+    // 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(
+  //     <CheckboxComponent {...props} />,
+  //   );
+
+  //   component.find('input').simulate('change');
+
+  //   // Assert
+  //   expect(props.onChange.called).to.be.true;
+  // });
+
+});

src/pages/admin/student/edit/components/editionUserPanel.tsx

@@ -0,0 +1,51 @@
+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;
+}
+
+export const EditionUserPanel: React.StatelessComponent<Props> = (props) => {
+  return (
+  <div>
+      <InputComponent
+            type="text"
+            label="Name"
+            labelClassName={`col-sm-2 control-label`}
+            wrapperClassName="col-sm-8"
+            name="Name"
+            onChange={newFunction()}
+            value={props.student.fullname}
+            placeholder="Student name"
+          />
+
+          <InputComponent
+            type="text"
+            label="Email"
+            labelClassName={`col-sm-2 control-label`}
+            wrapperClassName="col-sm-8"
+            name="Email"
+            onChange={newFunction()}
+            value={props.student.email}
+            placeholder="Student email"
+          />  
+
+          <CheckboxComponent
+            label="Is Active?"
+            labelClassName={`col-sm-2 control-label`}
+            name="Active"
+            wrapperClassName="col-sm-8"
+            value={props.student.isActive}
+            onChange={newFunction()}
+          />  
+  </div>
+  );
+};
+
+EditionUserPanel.displayName = 'EditionUserPanel';
+function newFunction(): any {
+  // WIP
+  return () => { };
+}

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 (
+  <div>
+    User Trainings info
+  </div>
+  );
+};
+
+EditionUserTrainingsPanel.displayName = 'EditionUserTrainingsPanel';

src/pages/admin/student/edit/components/index.ts

@@ -0,0 +1,3 @@
+export { TabContainer } from './tabContainer';
+export { EditionUserPanel } from './editionUserPanel';
+export { EditionUserTrainingsPanel } from './editionUserTrainingsPanel';

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 (
+  <div className={styles.tabContainerPanel}>
+    {props.children}
+  </div>
+  );
+};
+
+TabContainer.displayName = 'TabContainer';

src/pages/admin/student/edit/components/tabContainerStyles.scss

@@ -0,0 +1,5 @@
+.tabContainerPanel {
+  padding: 24px;
+  background-color: #f9f9f9;
+  padding-bottom: 30px;
+}

src/pages/admin/student/edit/page.tsx

@@ -2,32 +2,74 @@ 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 Tabs, { Tab } from 'material-ui/Tabs';
+import { TabContainer, EditionUserPanel, EditionUserTrainingsPanel } from './components';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+const styles: any = require('./pageStyles.scss');
 
-interface Props  {
+interface Props {
   student: StudentSummary;
   getStudent: (id: string) => void;
   studentId: string;
 }
 
-export class EditStudentPage extends React.Component<Props, {}> {
-   public componentDidMount() {
-       const studentId: string = this.props.studentId;
-       this.props.getStudent(studentId);
+interface State {
+  value: number;
+}
+
+export class EditStudentPage extends React.Component<Props, State> {
+  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 (
-         <div>      
-             <span>Student name: {this.props.student.fullname}</span>
-              <br/>
-             <span>Email: {this.props.student.email}</span>
-              <br/>
-             <span>Is Active?: {this.props.student.isActive ? 'Yes' : 'No'}</span>
-           <br/>
-           <Link to={adminRouteEnums.student.list}>Back to student list</Link>
-           <Link to={adminRouteEnums.default}>Back to Dashboard</Link>
-
+  public render() {
+    const { value } = this.state;
+
+    return (
+      <div>
+        <MuiThemeProvider>
+          <div>
+            <h1>{this.props.student.fullname}</h1>
+
+            <Tabs>
+              <Tab label="Main" className={styles.tabHeader}>
+                <TabContainer>
+                  <EditionUserPanel student={this.props.student} />
+                </TabContainer>
+              </Tab>
+              <Tab label="Trainings" className={styles.tabHeader}>
+                <TabContainer>
+                  <EditionUserTrainingsPanel />
+                </TabContainer>
+              </Tab>
+            </Tabs>
+
+            <br />
+            <div className="form-group">
+              <div className="saveButton col-sm-10">
+                <button className="btn btn-primary" type="submit">Save</button>
+              </div>
+            </div>
+
+            <br />
+
+            <Link to={adminRouteEnums.student.list}>Back to student list</Link>
+            <Link to={adminRouteEnums.default}>Back to Dashboard</Link>
           </div>
-        );
+        </MuiThemeProvider>
+      </div>
+    );
   }
 }

src/pages/admin/student/edit/pageStyles.scss

@@ -0,0 +1,11 @@
+.tabHeader  {
+  color: black!important;
+  background-color: #ddd !important;
+}
+
+.saveButton 
+{
+  padding-top:10px;
+  padding-bottom: 10px;
+}
+

src/rest-api/helpers.ts

@@ -1,10 +1,10 @@
 const methodBase = {
   mode: 'cors' as RequestMode,
   credentials: 'include' as RequestCredentials,
-  headers: {
+  headers: new Headers({
     'Accept': 'application/json',
     'Content-Type': 'application/json',
-  },
+  }),
 };
 
 export const formatURL = (url) => (`${process.env.BASE_API_URL}${url}`);