From 41bf3d407443c3fdc6d972d0964a47b3e3d6b183 Mon Sep 17 00:00:00 2001
From: Yunwei-Zhang <62420557+Yunwei-Zhang@users.noreply.github.com>
Date: Tue, 18 May 2021 03:50:18 +0800
Subject: [PATCH 1/3] Settings of projects

has done part of it, but method: PUT and method: DELETE still not working, and tried but do not find out the problems
---
 client/src/Components/Admin.module.css      |  3 +-
 client/src/Components/AdminCreateProject.js | 14 ++--
 client/src/Components/AdminEditProject.js   | 76 ++++++++++++++++++---
 client/src/Components/AdminMainMenu.js      |  4 +-
 client/src/Components/AdminProject.js       | 50 ++++++++++----
 client/src/Root.js                          |  2 +-
 6 files changed, 110 insertions(+), 39 deletions(-)

diff --git a/client/src/Components/Admin.module.css b/client/src/Components/Admin.module.css
index 2383c04..1266735 100644
--- a/client/src/Components/Admin.module.css
+++ b/client/src/Components/Admin.module.css
@@ -211,10 +211,11 @@
     width: 190px;
     height: 190px;
     margin-left: 50px;
+    margin-bottom: 30px;
     border: hidden;
 }
 .toprojectorgroupbtntext{
     margin-top: 50px;
-    font-size: 30px;
+    font-size: 25px;
     font-family: Arial, Helvetica, sans-serif;
 }
\ No newline at end of file
diff --git a/client/src/Components/AdminCreateProject.js b/client/src/Components/AdminCreateProject.js
index ea69f80..4660287 100644
--- a/client/src/Components/AdminCreateProject.js
+++ b/client/src/Components/AdminCreateProject.js
@@ -36,6 +36,7 @@ class AdminCreateProject extends Component {
     }
 
     setMaxGroupSize(e) {
+        if(e.target.value>=0)
         this.setState({ max_group_size: e.target.value });
     }
 
@@ -59,10 +60,10 @@ class AdminCreateProject extends Component {
                 </div>      
                 <div className={css.projectrightcontent}>
                     <button className={css.createprojectfirstbtn}   onClick={()=>this.handleSubmit()}>
-                        Create
-                    </button>
-                    <button className={css.createprojectsecondbtn} onClick={()=>window.location.href="/admin/home"}>
+                        Create    
+                       <button className={css.createprojectsecondbtn} onClick={()=>window.location.href="/admin/home"}>
                         Cancel
+                       </button>
                     </button>    
                 </div>
                 <div>
@@ -77,32 +78,27 @@ class AdminCreateProject extends Component {
                             value={ this.state.project_name }
                         ></input>
                     </p>
-                    <br/><br/>
                     <p className={css.subtitle}>
                         Max Group Size:
                         <input
                             type='number'
                             className={css.createprojectinput}
-                            style={{marginLeft: '80.5px'}}
+                            style={{marginLeft: '16px'}}
                             onChange={ this.setMaxGroupSize.bind(this) }
                             value={ this.state.max_group_size }
                         ></input>
                     </p>
-                    <br/><br/>
                     <p className={css.subtitle}>
                         Interest:
                         <input className={css.createprojectinput} style={{marginLeft: '131px'}}></input>
                     </p>
-                    <br/><br/>
                     <p className={css.subtitle}>
                         Skills:
                         <input className={css.createprojectinput} style={{marginLeft: '160px'}}></input>
                     </p>
-                    <br/><br/>
                     <p className={css.subtitle}>
                         Description:
                     </p>
-                    <br/><br/>
                     <textarea className={css.createprojectdescriptioninput}></textarea>
                 </div>
             </>
diff --git a/client/src/Components/AdminEditProject.js b/client/src/Components/AdminEditProject.js
index ec2553a..f82af8e 100644
--- a/client/src/Components/AdminEditProject.js
+++ b/client/src/Components/AdminEditProject.js
@@ -4,10 +4,64 @@ import { signout } from './AuthenticationHelper'
 
 class AdminCreateProject extends Component{
 
+    state={
+        project_name:'',
+        project_max_size:'',
+    }
+
+    componentDidMount(){
+        fetch('http://localhost:6060/api/admin/projects', {
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+        })
+        .then(response => response.json())
+        .then(j => {
+            for(var i=0; i<j.length;i++)
+            {
+                if(j[i].id==this.props.match.params.project_id)
+                {
+                  console.log(this.props.match.params.project_id);
+                  this.setState({ 
+                      project_name:j[i].name,
+                      project_max_size:j[i].max_group_size,
+                  });
+                }
+            }
+            
+        })
+    }
+
+
+    setMaxGroupSize(e) {
+        if(e.target.value>=0)
+        this.setState({ project_max_size: e.target.value });
+    }
+
     HandleCencelBtn()
     {
         this.props.history.goBack();
     }
+
+    //NEED TO FIX
+    HandleEditBtn()
+    {
+        const jsonString = JSON.stringify({ name: this.state.project_name, max_group_size: this.state.max_group_size });
+        fetch('http://localhost:6060/api/admin/projects/4', {
+            method:'PUT',
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json',
+            'Accept': 'application/json', 
+            'Access-Control-Allow-Origin': "*",
+            'Access-Control-Allow-Methods': "PUT"},
+            body: jsonString
+        })
+        .then(response => response.json())
+        .then(j => {
+            console.log(j)
+            this.props.history.goBack()
+            return j;
+        })
+    }
     
     render() {
         return(
@@ -30,39 +84,39 @@ class AdminCreateProject extends Component{
                     </nav>
                 </div>      
                 <div className={css.projectrightcontent}>
-                    <button className={css.createprojectfirstbtn}>
+                    <button className={css.createprojectfirstbtn} onClick={()=>this.HandleEditBtn()}>
                         Edit
                         <br/>
-                    <button className={css.createprojectsecondbtn}   onClick={()=>this.HandleCencelBtn()}>Cancel</button>
+                    <button className={css.createprojectsecondbtn} onClick={()=>this.HandleCencelBtn()}>Cancel</button>
                     </button>    
                 </div>
                 <div>
-                    <h1 className={css.title}>Edit Project {this.props.match.params.id}</h1>
+                    <h1 className={css.title}>Edit Project {this.props.match.params.project_id}</h1>
                     <br/>
                     <p className={css.subtitle}>
                         Project Name: 
-                        <input className={css.createprojectinput} style={{marginLeft: '50px'}}></input>
+                        <input className={css.createprojectinput} style={{marginLeft: '50px'}} defaultValue={this.state.project_name}></input>
                     </p>
-                    <br/><br/>
                     <p className={css.subtitle}>
-                        Group Size: 
-                        <input className={css.createprojectinput} style={{marginLeft: '80.5px'}}></input>
+                        Max Group Size: 
+                        <input className={css.createprojectinput} 
+                          style={{marginLeft: '16px'}} 
+                          type='number'
+                          value={this.state.project_max_size}
+                          onChange={ this.setMaxGroupSize.bind(this) }
+                        ></input>
                     </p>
-                    <br/><br/>
                     <p className={css.subtitle}>
                         Interest: 
                         <input className={css.createprojectinput} style={{marginLeft: '131px'}}></input>
                     </p>
-                    <br/><br/>
                     <p className={css.subtitle}>
                         Skills: 
                         <input className={css.createprojectinput} style={{marginLeft: '160px'}}></input>
                     </p>
-                    <br/><br/>
                     <p className={css.subtitle}>
                         Description: 
                     </p>
-                    <br/><br/>
                     <textarea className={css.createprojectdescriptioninput}></textarea>
                     
                 </div>   
diff --git a/client/src/Components/AdminMainMenu.js b/client/src/Components/AdminMainMenu.js
index 6a2508c..f77b252 100644
--- a/client/src/Components/AdminMainMenu.js
+++ b/client/src/Components/AdminMainMenu.js
@@ -65,7 +65,7 @@ class AdminMainMenu extends Component{
                     </nav>
                 </div> 
                 <div className={css.projectrightcontent}>
-                    <button className={css.createprojectbtn} onClick={()=>{window.location.href="/admin/projects/new"}}>Create Project</button>
+                    <button className={css.createprojectbtn} onClick={()=>{window.location.href="/admin/projects/create/new"}}>Create Project</button>
                 </div>
                 <div>
                     <h1 className={css.title}>
@@ -82,7 +82,7 @@ class AdminMainMenu extends Component{
                             className={css.toprojectorgroupbtn}
                             style={{backgroundColor: this.state.selectedcolor}}
                         >
-                            <p className={css.toprojectorgroupbtnp} key={project.id}>
+                            <p className={css.toprojectorgroupbtntext} key={project.id}>
                                 {project.name}
                             </p>
                        </button>
diff --git a/client/src/Components/AdminProject.js b/client/src/Components/AdminProject.js
index b1f236a..34c71b9 100644
--- a/client/src/Components/AdminProject.js
+++ b/client/src/Components/AdminProject.js
@@ -9,9 +9,9 @@ class AdminProject extends Component{
     constructor(props){
         super(props)
         this.state = {
-            name:'',
-            id:'',
-            group_size:'',
+            project_name:'',
+            project_id:'',
+            project_group_size:'',
 
         }
     }
@@ -25,12 +25,12 @@ class AdminProject extends Component{
         .then(j => {
             for(var i=0; i<j.length;i++)
             {
-                if(j[i].id==this.props.match.params.id)
+                if(j[i].id==this.props.match.params.project_id)
                 {
-                  console.log(j[i]);
+                  console.log(this.props.match.params.project_id);
                   this.setState({ 
-                      name:j[i].name,
-                      group_size:j[i].max_group_size,
+                      project_name:j[i].name,
+                      project_group_size:j[i].max_group_size,
                   });
                 }
             }
@@ -58,7 +58,27 @@ class AdminProject extends Component{
 
     ToSettingPage() {
         const project_id = this.props.match.params.project_id; 
-        this.props.history.push('/admin/projects/'+ Id +'/edit')
+        this.props.history.push('/admin/projects/'+ project_id +'/edit')
+    }
+    
+    //NEED TO FIX
+    handleDelete()
+    {
+        if(window.confirm("Are you sure?"))
+        {
+          window.location.href="/admin/home"
+          fetch('http://localhost:6060/api/admin/projects/5' , {
+              method: 'DELETE',
+              headers: { 'Content-Type': 'application/json',
+              'Access-Control-Allow-Origin': "*",
+              'Access-Control-Allow-Methods': "DELETE"},
+              credentials: 'include',
+          })
+          .then(response => response.json())
+          .then(j => {
+            console.log(j)
+          })
+        }
     }
     
     render() {
@@ -92,15 +112,15 @@ class AdminProject extends Component{
 
                 <div >
                     <h1 className={css.title}>
-                        Project {this.props.match.params.id}
+                        Project {this.props.match.params.project_id}
                         <button className={css.projectgraybutton} onClick={()=>this.ToSettingPage()}>Edit Setting</button>
-                        <button className={css.projectgraybutton}>Delete</button>
+                        <button className={css.projectgraybutton} onClick={()=>this.handleDelete()}>Delete</button>
                     </h1> 
-                    <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Description: {this.state.name}</p>
-                    <p className={css.textcontent}><br/><br/>&nbsp;&nbsp;&nbsp;Max Group Size: {this.state.group_size}</p>
-                    <p className={css.textcontent}><br/><br/>&nbsp;&nbsp;&nbsp;Interest:</p>
-                    <p className={css.textcontent}><br/><br/>&nbsp;&nbsp;&nbsp;Skill:</p>
-                    <br/><br/><br/>
+                    <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Description: {this.state.project_name}</p>
+                    <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Max Group Size: {this.state.project_group_size}</p>
+                    <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Interest:</p>
+                    <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Skill:</p>
+                    <br/>
                     <p className={css.textcontent} style={{fontSize: "35px"}}>&nbsp;&nbsp;Groups:</p>
                 </div>   
             </>
diff --git a/client/src/Root.js b/client/src/Root.js
index 238eb92..fb4aef8 100644
--- a/client/src/Root.js
+++ b/client/src/Root.js
@@ -30,7 +30,7 @@ class UrlSet extends Component{
               <Route path="/student/projects/:project_id/groups/:group_id" exact strict component={StudentGroup}/>  
               <Route path="/admin/home" exact strict component={AdminMainMenu}/>  
               <Route path="/admin/notifications" exact strict component={AdminNotification}/> 
-              <Route path="/admin/projects/new" exact strict component={AdminCreateProject}/> 
+              <Route path="/admin/projects/create/new" exact strict component={AdminCreateProject}/> 
               <Route path="/admin/projects/:project_id" exact strict component={AdminProject}/> 
               <Route path="/admin/projects/:project_id/groups/create" exact strict component={AdminCreateGroup}/> 
               <Route path="/admin/projects/:project_id/add_student" exact strict component={AdminProjectAddStudents}/>

From 4cfeb48c145f1eb15551546d383ef2ffda7080ab Mon Sep 17 00:00:00 2001
From: Yunwei-Zhang <62420557+Yunwei-Zhang@users.noreply.github.com>
Date: Tue, 18 May 2021 12:53:11 +0800
Subject: [PATCH 2/3] update admin projects pages

---
 client/src/Components/AdminEditProject.js |  2 +-
 client/src/Components/AdminProject.js     | 45 ++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/client/src/Components/AdminEditProject.js b/client/src/Components/AdminEditProject.js
index f82af8e..a6cc06b 100644
--- a/client/src/Components/AdminEditProject.js
+++ b/client/src/Components/AdminEditProject.js
@@ -46,7 +46,7 @@ class AdminCreateProject extends Component{
     HandleEditBtn()
     {
         const jsonString = JSON.stringify({ name: this.state.project_name, max_group_size: this.state.max_group_size });
-        fetch('http://localhost:6060/api/admin/projects/4', {
+        fetch('http://localhost:6060/api/admin/projects/' + this.props.match.params.project_id, {
             method:'PUT',
             credentials: 'include',
             headers: { 'Content-Type': 'application/json',
diff --git a/client/src/Components/AdminProject.js b/client/src/Components/AdminProject.js
index 34c71b9..5014d07 100644
--- a/client/src/Components/AdminProject.js
+++ b/client/src/Components/AdminProject.js
@@ -12,6 +12,8 @@ class AdminProject extends Component{
             project_name:'',
             project_id:'',
             project_group_size:'',
+            project_groups:[],
+            students_in_projects:[]
 
         }
     }
@@ -36,6 +38,30 @@ class AdminProject extends Component{
             }
             
         })
+
+        
+        fetch('http://localhost:6060/api/admin/projects/'+ this.props.match.params.project_id +'/groups', {
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+        })
+        .then(response => response.json())
+        .then(j => {
+    
+            this.setState({ project_groups:j })
+            //console.log(this.state.project_groups)
+        })
+
+        fetch('http://localhost:6060/api/admin/projects/' + this.props.match.params.project_id + '/project_allocations', {
+            credentials: 'include',
+            headers: { 'Content-Type': 'application/json' },
+        })
+        .then(response => response.json())
+        .then(j => {
+    
+            this.setState({ students_in_projects:j })
+            console.log(this.state.students_in_projects)
+        })
+        
     }
 
 
@@ -67,7 +93,7 @@ class AdminProject extends Component{
         if(window.confirm("Are you sure?"))
         {
           window.location.href="/admin/home"
-          fetch('http://localhost:6060/api/admin/projects/5' , {
+          fetch('http://localhost:6060/api/admin/projects/' + this.props.match.params.project_id , {
               method: 'DELETE',
               headers: { 'Content-Type': 'application/json',
               'Access-Control-Allow-Origin': "*",
@@ -103,7 +129,14 @@ class AdminProject extends Component{
                 <div className={css.projectrightcontent}>
                     <p className={css.subtitle}>
                         <br/>
-                        Student List:                 
+                        Student List:
+                        <br/>
+                        {this.state.students_in_projects.map(students_in_project =>( 
+                            <li className={css.textcontent} key={students_in_project.id}>
+                                {students_in_project.first_name} {students_in_project.last_name}
+                                <br/><br/>
+                            </li>
+                        ))}                 
                         <button className={css.addstudentbtn} onClick={()=>this.ToAddStudentPage()}>Add Student</button> 
                         <button className={css.projecttwobutton} onClick={()=>this.toCreateGroupPage()}>Create Groups</button>
                         <button className={css.projecttwobutton} onClick={()=>this.ToEditGroupPage()}>Edit Groups</button>
@@ -122,6 +155,14 @@ class AdminProject extends Component{
                     <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Skill:</p>
                     <br/>
                     <p className={css.textcontent} style={{fontSize: "35px"}}>&nbsp;&nbsp;Groups:</p>
+                      {this.state.project_groups.map(project_group =>( 
+                            <li className={css.textcontent} key={project_group.id}>
+                                Group Id: {project_group.id}&nbsp;
+                                Group Number: {project_group.group_number}
+                                <br/><br/>
+                            </li>
+                      ))}
+                    
                 </div>   
             </>
         )

From c98177520c93d2e131057ac5cb462c5279f58977 Mon Sep 17 00:00:00 2001
From: Yunwei-Zhang <62420557+Yunwei-Zhang@users.noreply.github.com>
Date: Wed, 19 May 2021 01:09:00 +0800
Subject: [PATCH 3/3] clear page

---
 client/src/Components/AdminProject.js | 47 ++-------------------------
 1 file changed, 3 insertions(+), 44 deletions(-)

diff --git a/client/src/Components/AdminProject.js b/client/src/Components/AdminProject.js
index b509838..c95e632 100644
--- a/client/src/Components/AdminProject.js
+++ b/client/src/Components/AdminProject.js
@@ -17,7 +17,7 @@ class AdminProject extends Component{
     }
 
     componentDidMount(){
-        fetch('http://localhost:6060/api/admin/projects/' + this.props.match.params.project_id, {
+        fetch('http://localhost:6060/api/admin/projects/', {
             credentials: 'include',
             headers: { 'Content-Type': 'application/json' }
         })
@@ -48,17 +48,6 @@ class AdminProject extends Component{
             this.setState({ project_groups:j })
             //console.log(this.state.project_groups)
         })
-
-        fetch('http://localhost:6060/api/admin/projects/' + this.props.match.params.project_id + '/project_allocations', {
-            credentials: 'include',
-            headers: { 'Content-Type': 'application/json' },
-        })
-        .then(response => response.json())
-        .then(j => {
-    
-            this.setState({ students_in_projects:j })
-            console.log(this.state.students_in_projects)
-        })
         
     }
 
@@ -85,25 +74,6 @@ class AdminProject extends Component{
         this.props.history.push('/admin/projects/'+ project_id +'/edit')
     }
     
-    //NEED TO FIX
-    handleDelete()
-    {
-        if(window.confirm("Are you sure?"))
-        {
-          window.location.href="/admin/home"
-          fetch('http://localhost:6060/api/admin/projects/' + this.props.match.params.project_id , {
-              method: 'DELETE',
-              headers: { 'Content-Type': 'application/json',
-              'Access-Control-Allow-Origin': "*",
-              'Access-Control-Allow-Methods': "DELETE"},
-              credentials: 'include',
-          })
-          .then(response => response.json())
-          .then(j => {
-            console.log(j)
-          })
-        }
-    }
     
     render() {
         return(
@@ -127,14 +97,7 @@ class AdminProject extends Component{
                 <div className={css.projectrightcontent}>
                     <p className={css.subtitle}>
                         <br/>
-                        Student List:
-                        <br/>
-                        {this.state.students_in_projects.map(students_in_project =>( 
-                            <li className={css.textcontent} key={students_in_project.id}>
-                                {students_in_project.first_name} {students_in_project.last_name}
-                                <br/><br/>
-                            </li>
-                        ))}                 
+                                        
                         <button className={css.addstudentbtn} onClick={()=>this.goToAddStudentPage()}>Add Student</button> 
                         <button className={css.projecttwobutton} onClick={()=>this.goToCreateGroupPage()}>Create Groups</button>
                         <button className={css.projecttwobutton} onClick={()=>this.goToEditGroupPage()}>Edit Groups</button>
@@ -144,18 +107,14 @@ class AdminProject extends Component{
                 <div >
                     <h1 className={css.title}>
                         Project {this.props.match.params.project_id}
-                        <button className={css.projectgraybutton} onClick={()=>this.goToSettingsPage()}>Edit Setting</button>
-                        <button className={css.projectgraybutton} onClick={()=>this.handleDelete()}>Delete</button>
                     </h1> 
                     <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Description: {this.state.project_name}</p>
                     <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Max Group Size: {this.state.project_group_size}</p>
-                    <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Interest:</p>
-                    <p className={css.textcontent}><br/>&nbsp;&nbsp;&nbsp;Skill:</p>
                     <br/>
                     <p className={css.textcontent} style={{fontSize: "35px"}}>&nbsp;&nbsp;Groups:</p>
                       {this.state.project_groups.map(project_group =>( 
                             <li className={css.textcontent} key={project_group.id}>
-                                Group Id: {project_group.id}&nbsp;
+                                Id: {project_group.id}&nbsp;
                                 Group Number: {project_group.group_number}
                                 <br/><br/>
                             </li>