#2 have settings for gradebook

wozzyio · Nov 10, 2020 · 689d19b · 689d19b
1 parent 5b45d6c
commit 689d19b
Show file tree

Hide file tree

Showing 9 changed files with 1,610 additions and 2,075 deletions.
diff --git a/components/individualTeacherStudentAssignments.js b/components/individualTeacherStudentAssignments.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import { List, Avatar, Spin, Skeleton } from 'antd';
+
+import stylesheet from 'antd/dist/antd.min.css';
+import { LoadingOutlined } from '@ant-design/icons';
+
+
+
+
+export default class IndividualTeacherStudentAssignments extends React.Component {
+    constructor(props) {
+        super(props);
+        this.showAssignmentsComponent = this.showAssignmentsComponent.bind(this);
+    }
+
+    componentDidMount() {
+        console.log("in IndividualTeacherStudentAssignments class....");
+    }
+
+
+
+    showAssignmentsComponent = () => {
+        const dude = {
+            data:{
+                assignments:[
+                    {
+                        assignmentType:"homework",
+                        assignmentDescription:"Read Chapter 1 (pg. 30 - 500)",
+                        assignmentTurnInRequired:true,
+                        assignmentDueDate:{
+                            _seconds:1606161600,
+                            _nanoseconds:0
+                        },
+                        assignmentGrade:100,
+                        assignmentGradeLetter:"A",
+                        assignmentURL:"SOME_URL_HERE",
+                        assignmentTurnInURL:"SOME_URL_STUDENT_TURNED_IN",
+                        isGraded:true,
+                        id: "w7BbqcxHgWKG4Y0NTP4B",
+                    }]
+            }
+        }
+        const context = this.props;
+        console.log("this.props.teacherClassComponent.individualStudentAllAssignments");
+        console.log(this.props.teacherClassComponent.individualStudentAllAssignments);
+        const antIcon = <LoadingOutlined style={{ fontSize: 20 }} spin />;
+        // dude.data.assignments.map(assignment => {
+        //
+        // })
+        return (
+            <List
+                itemLayout="horizontal"
+                dataSource={this.props.teacherClassComponent.individualStudentAllAssignments.data.assignments}
+                style={{position: "absolute"}}
+                renderItem={item => (
+                    <List.Item
+                        actions={[
+                            <a key={item.uid} onClick={() => context.teacherClassComponentHandleIndividualTeacherAssignmentsClick(item)}>
+                                {context.teacherClassComponent.individualStudentAssignmentsLoading ?
+                                    <Spin indicator={antIcon} style={{ float: 'right' }} />
+                                    :
+                                    <div>Edit Assignment</div>
+                                }
+                            </a>
+                        ]}
+                    >
+                        <List.Item.Meta
+                            avatar={<Avatar src="https://image.freepik.com/free-vector/modern-online-schedule-vector-illustration_159144-50.jpg" />}
+                            title={item.assignmentDescription}
+                            description={item.assignmentType}
+                        />
+                    </List.Item>
+                )}
+            />
+        )
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+                <div>
+                    {this.showAssignmentsComponent()}
+                </div>
+            </React.Fragment>
+        );
+    }
+}
diff --git a/components/individualTeacherStudentComponent.js b/components/individualTeacherStudentComponent.js
@@ -33,7 +33,7 @@ export default class IndividualTeacherStudentComponent extends React.Component {
             renderItem={item => (
                 <List.Item
                     actions={[
-                        <a key={item} onClick={() => context.teacherClassComponentHandleTeacherAttendanceClick(item)}>
+                        <a key={item} onClick={() => context.teacherClassComponentHandleIndividualTeacherAssignmentsClick(item)}>
                         {context.teacherClassComponent.individualStudentAssignmentsLoading ?
                             <Spin indicator={antIcon} style={{ float: 'right' }} />
                         :

diff --git a/components/nav.js b/components/nav.js
@@ -95,6 +95,11 @@ export default class Nav extends React.Component {
                     teacherStudentRef={this.props.teacherStudentRef}
                     teacherClassComponent={this.props.teacherClassComponent}
                     teacherClassComponentHandleTeacherStudentClick={this.props.teacherClassComponentHandleTeacherStudentClick}
+                    teacherClassComponentHandleIndividualTeacherAssignmentsClick={this.props.teacherClassComponentHandleIndividualTeacherAssignmentsClick}
+                    handleGradebookSettingClick={this.props.handleGradebookSettingClick}
+                    handleGradeBookSettingsChange={this.props.handleGradeBookSettingsChange}
+                    handleGradeBookSettingsBack={this.props.handleGradeBookSettingsBack}
+                    handleGradeBookSettingsSubmit={this.props.handleGradeBookSettingsSubmit}
                    />
         }
     }

diff --git a/components/simpleModal.js b/components/simpleModal.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Modal, Button, Form, Space, Input, Switch, Avatar, Upload, Alert } from 'antd';
+
+import stylesheet from 'antd/dist/antd.min.css';
+import { UploadOutlined, UserOutlined } from '@ant-design/icons';
+
+
+
+export default class SimpleModal extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        console.log("in SimpleModal class....");
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
+                <div>
+                    <Modal
+                        title={this.props.modalTitle}
+                        visible={this.props.modalVisible}
+                        onCancel={this.props.handleModalCancel}
+                        onOk={this.props.handleModalOnOk}
+                        footer={[
+                            <Button key="back" onClick={(e) => this.props.handleBackClick(e)}>
+                                Return
+                            </Button>,
+                            <Button key="submit" type="primary" loading={this.props.loadingModal} onClick={(e) => this.props.handleModalSubmitClick(e)}>
+                                Submit
+                            </Button>,
+                        ]}
+                    >
+                    </Modal>
+                </div>
+            </React.Fragment>
+        );
+    }
+}
diff --git a/components/teacherClassComponent.js b/components/teacherClassComponent.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Layout, Button, Typography, Space, Input, Switch, Avatar, Upload, Alert } from 'antd';
+import {Layout, Button, Typography, Space, Input, Switch, Avatar, Upload, Alert, Modal, Form, Select} from 'antd';
+const { Option } = Select;
 const { Content } = Layout;
 const { Title, Paragraph, Text } = Typography;
 
@@ -9,6 +10,7 @@ import { FolderAddTwoTone } from '@ant-design/icons';
 
 import TeacherClassShowStudentsComponent from '../components/teacherClassShowStudentsComponent.js';
 import IndividualTeacherStudentComponent from '../components/individualTeacherStudentComponent.js';
+import IndividualTeacherStudentAssignments from "./individualTeacherStudentAssignments";
 
 
 // Setup classes with 3 different options
@@ -27,44 +29,95 @@ export default class TeacherClass extends React.Component {
     }
 
     titleComponent = () => {
-        if(this.props.teacherClassComponent.individualStudentClassesClicked === true){
+        if(this.props.teacherClassComponent.individualStudentClassesClicked === true && this.props.teacherClassComponent.individualStudentAssignmentsClicked === false){
             return(
                 <Title level={2} style={{float: "left"}}>Pick a class for Assignments</Title>
             )
-        } else if(this.props.teacherClassComponent.individualStudentClassesClicked === false){
+        } else if(this.props.teacherClassComponent.individualStudentClassesClicked === false && this.props.teacherClassComponent.individualStudentAssignmentsClicked === false){
             return(
                 <Title level={2} style={{float: "left"}}>Pick a student for classes</Title>
             )
+        } else if(this.props.teacherClassComponent.individualStudentClassesClicked === false && this.props.teacherClassComponent.individualStudentAssignmentsClicked === true){
+            return(
+                <Title level={2} style={{float: "left"}}>Pick an assignment</Title>
+            )
         }
     }
 
     adjustStudentsGradeBookButton = () => {
-        if(this.props.teacherClassComponent.individualStudentClassesClicked === true){
+        let context = this;
+        if(this.props.teacherClassComponent.individualStudentClassesClicked === true && this.props.teacherClassComponent.individualStudentAssignmentsClicked === false){
             return(
                 <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}}>
                     Add Classes
                 </Button>
             )
-        } else if(this.props.teacherClassComponent.individualStudentClassesClicked === false){
+        } else if(this.props.teacherClassComponent.individualStudentClassesClicked === false && this.props.teacherClassComponent.individualStudentAssignmentsClicked === false){
+            if(this.props.teacherClassComponent.handleGradebookSettingModalShow){
+                return(
+                    <div>
+                        <Modal
+                            title="Adjust Gradebook"
+                            visible="true"
+                            onCancel={this.props.handleGradeBookSettingsBack}
+                            onOk={this.props.handleGradeBookSettingsSubmit}
+                            footer={[
+                                <Button key="back" onClick={(e) => this.props.handleGradeBookSettingsBack(e)}>
+                                    Return
+                                </Button>,
+                                <Button key="submit" type="primary" loading={this.props.loadingModal} onClick={(e) => this.props.handleGradeBookSettingsSubmit(e)}>
+                                    Submit
+                                </Button>,
+                            ]}
+                        >
+                            <Form name="gradebook_information">
+                                <p>Enter Grading Settings</p>
+                                <Select defaultValue="manual" style={{ width: 120 }} onChange={this.props.handleGradeBookSettingsChange}>
+                                    <Option value="percentages">Percentages</Option>
+                                    <Option value="points_based">Points</Option>
+                                    <Option value="manual">Manual</Option>
+                                </Select>
+                            </Form>
+                        </Modal>
+                    </div>
+                )
+            } else {
+                return(
+                    <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}} onClick={this.props.handleGradebookSettingClick}>
+                        Gradebook Settings
+                    </Button>
+                )
+            }
+        } else if(this.props.teacherClassComponent.individualStudentClassesClicked === false && this.props.teacherClassComponent.individualStudentAssignmentsClicked === true){
             return(
-                <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}}>
-                    Gradebook Settings
-                </Button>
+                <div>
+                    <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}}>
+                        Add Assignment
+                    </Button>
+                    <Button type="primary" icon={<FolderAddTwoTone />} size="default" style={{marginLeft: 40}}>
+                        Grades for {this.props.teacherClassComponent.individualStudentSpecificClassSelected}
+                    </Button>
+                </div>
             )
         }
     }
 
     showStudentsComponent = () => {
-        if(this.props.teacherClassComponent.individualStudentClassesClicked === true) {
+        if(this.props.teacherClassComponent.individualStudentClassesClicked === true && this.props.teacherClassComponent.individualStudentAssignmentsClicked === false) {
             return <IndividualTeacherStudentComponent
                     teacherClassComponent={this.props.teacherClassComponent}
+                    teacherClassComponentHandleIndividualTeacherAssignmentsClick={this.props.teacherClassComponentHandleIndividualTeacherAssignmentsClick}
                     />
-        } else  if(this.props.teacherClassComponent.individualStudentClassesClicked === false) {
+        } else  if(this.props.teacherClassComponent.individualStudentClassesClicked === false && this.props.teacherClassComponent.individualStudentAssignmentsClicked === false) {
             return <TeacherClassShowStudentsComponent
                     teacherClassComponent={this.props.teacherClassComponent}
                     teacherClassComponentHandleTeacherStudentClick={this.props.teacherClassComponentHandleTeacherStudentClick}
                     teacherStudentRef={this.props.teacherStudentRef}
                     />
+        } else if(this.props.teacherClassComponent.individualStudentClassesClicked === false && this.props.teacherClassComponent.individualStudentAssignmentsClicked === true){
+            return <IndividualTeacherStudentAssignments
+                    teacherClassComponent={this.props.teacherClassComponent}
+                    />
         }
     }