Import excel sheet to add student to activity table

client/package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@vtex/react-csv-parse": "^3.0.2",
     "ajv": "^6.8.1",
     "axios": "^0.18.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-config-react-minimal": "^1.0.0",
     "formik": "^1.5.0",
     "react": "^16.8.1",
+    "react-csv-reader": "^1.2.2",
     "react-datepicker": "^2.1.0",
     "react-dom": "^16.8.1",
     "react-router-dom": "^4.3.1",

client/src/components/pages/ActivityInformation/index.js

@@ -5,7 +5,7 @@ import Header from "../../Header";
 import ActivityDetails from "../../ActivityDetails"
 import Table from '../../Table';
 
- class ActivityInformation extends Component {
+class ActivityInformation extends Component {
 
    constructor(props) {
      super(props);
@@ -108,6 +108,7 @@ import Table from '../../Table';
    };
 
    render() {
+
      const { id } = this.props.match.params;
      const columns = [
        {
@@ -129,6 +130,8 @@ import Table from '../../Table';
        },
      ];
 
+
+
      return (
        <React.Fragment>
          <Header/>
@@ -141,13 +144,19 @@ import Table from '../../Table';
                  type="text"
                  name="userName"
                  placeholder="اكتب اسم الطالب"
-                 onChange={this.onChangeAction}
+
+                 onChange={this.onChangeAction} list="userNames"
+                    />
+               <button value="إضافة">اضافة</button>
+               <datalist id="userNames"> {this.renderSuggestions()}</datalist>
+                onChange={this.onChangeAction}
                  list="userNames"
                  autocomplete="off"
                  value={this.state.userNameInput}
                />
                <button>اضافة</button>
                <datalist id="userNames"> {this.renderSuggestions()} </datalist>
+
            </form>
            <Table columns={columns} data={this.state.usersList}/>
          </StyledPage>

client/src/components/pages/ViewUsers/index.js

@@ -4,7 +4,7 @@ import {	Link} from 'react-router-dom'
 import Header from "../../Header";
 import Table from "../../Table";
 import {	StyledPage,	StyledTilte} from "./index.style";
-
+import CSVReader from "react-csv-reader";
 
 class ViewUsers extends Component {
 	state = {
@@ -68,6 +68,10 @@ class ViewUsers extends Component {
 	}
 
 	render() {
+
+    const handleForce = data => {
+			axios.post('/importFromExcel', {data});
+   };
 		const columns = [
       {Header: 'id',accessor: 'id',show: false},
 			{Header: 'اسم الطالب',accessor: 'name'},
@@ -86,6 +90,9 @@ class ViewUsers extends Component {
 			<StyledPage>
 			<StyledTilte> جميع المستخدمين </StyledTilte>
 			<Link to = "/CreateUser"> إضافة مستخدم جديد </Link>
+			<CSVReader
+					 onFileLoaded={handleForce}
+				 />
       <Table columns = {columns} data = {this.state.result}/>
 			</StyledPage>
       </React.Fragment>

package.json

@@ -33,7 +33,8 @@
     "joi-date-extensions": "^1.2.0",
     "jsonwebtoken": "^8.5.0",
     "mongoose": "^5.4.11",
-    "nodemon": "^1.18.10"
+    "nodemon": "^1.18.10",
+    "react-csv-reader": "^1.2.2"
   },
   "devDependencies": {
     "eslint-config-airbnb": "^17.1.0",

src/controllers/user.controller.js

@@ -16,6 +16,33 @@ const add = (req, res) => {
     });
 };
 
+const importFromExcel = (req, res) => {
+  var users=req.body.data;
+
+  users.shift();
+  users.pop();
+
+  users.forEach(function(user) {
+
+    const addUser = new User({
+        name:user[0],
+        type:user[1],
+        living:user[2],
+        address:user[3],
+        gender:user[4],
+        dateOfBirth:user[5],
+        phoneNo:user[6],
+        email:user[7],
+      });
+      addUser.save()
+        .then(() => {
+            res.json({ success: true });
+          }).catch((err) => {
+              res.json({ success: false, error: err.message });
+            });
+});
+};
+
 const findByName = (req, res) => {
   const { name, activityId } = req.params;
   User.find({ type: 'student', name: new RegExp(`^${name}`, 'i') }, 'id name dateOfBirth')
@@ -90,6 +117,4 @@ const getUsersByActivityId = (req, res) => {
     });
 };
 
-module.exports = {
-  add, findAll, findByName, getUsersByActivityId,
-};
+module.exports = { add, findAll, findByName,importFromExcel ,getAgeByDate ,getUsersByActivityId };

src/router.js

@@ -20,6 +20,7 @@ router.post('/users', validations.user, controllers.user.add);
 router.get('/users', controllers.user.findAll);
 router.get('/users/searchByName/:name/:activityId', controllers.user.findByName);
 router.get('/users/getUsersByActivityId/:activityId', controllers.user.getUsersByActivityId);
+router.post('/importFromExcel', controllers.user.importFromExcel);
 
 router.get('/objectives', controllers.objective.findAll);