From 76acdb80500262f0dba368d69c562e30b2337ce3 Mon Sep 17 00:00:00 2001 From: ManavMadhu Date: Fri, 10 Jul 2020 18:24:21 +0530 Subject: [PATCH] Updated dashboard page --- Front-End/package-lock.json | 167 +++++++++++++++++++++ Front-End/package.json | 2 + Front-End/src/App.css | 7 - Front-End/src/components/css/dashboard.css | 4 +- Front-End/src/components/dashboard.jsx | 104 ++++++------- Front-End/src/components/formfield.jsx | 78 ++++++++++ 6 files changed, 297 insertions(+), 65 deletions(-) create mode 100644 Front-End/src/components/formfield.jsx diff --git a/Front-End/package-lock.json b/Front-End/package-lock.json index 7d799e0..9707ab9 100644 --- a/Front-End/package-lock.json +++ b/Front-End/package-lock.json @@ -1117,6 +1117,87 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/cache": { + "version": "10.0.29", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz", + "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==", + "requires": { + "@emotion/sheet": "0.9.4", + "@emotion/stylis": "0.8.5", + "@emotion/utils": "0.11.3", + "@emotion/weak-memoize": "0.2.5" + } + }, + "@emotion/core": { + "version": "10.0.28", + "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz", + "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==", + "requires": { + "@babel/runtime": "^7.5.5", + "@emotion/cache": "^10.0.27", + "@emotion/css": "^10.0.27", + "@emotion/serialize": "^0.11.15", + "@emotion/sheet": "0.9.4", + "@emotion/utils": "0.11.3" + } + }, + "@emotion/css": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz", + "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==", + "requires": { + "@emotion/serialize": "^0.11.15", + "@emotion/utils": "0.11.3", + "babel-plugin-emotion": "^10.0.27" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + }, + "@emotion/serialize": { + "version": "0.11.16", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz", + "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==", + "requires": { + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/unitless": "0.7.5", + "@emotion/utils": "0.11.3", + "csstype": "^2.5.7" + } + }, + "@emotion/sheet": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", + "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@emotion/utils": { + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz", + "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -2556,6 +2637,23 @@ "object.assign": "^4.1.0" } }, + "babel-plugin-emotion": { + "version": "10.0.33", + "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz", + "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/hash": "0.8.0", + "@emotion/memoize": "0.7.4", + "@emotion/serialize": "^0.11.16", + "babel-plugin-macros": "^2.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^1.0.5", + "find-root": "^1.1.0", + "source-map": "^0.5.7" + } + }, "babel-plugin-istanbul": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz", @@ -2634,6 +2732,11 @@ "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz", "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -5779,6 +5882,11 @@ "pkg-dir": "^3.0.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", @@ -8081,6 +8189,11 @@ "p-is-promise": "^2.0.0" } }, + "memoize-one": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", + "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -8399,6 +8512,15 @@ "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz", "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=" }, + "multiselect-react-dropdown": { + "version": "1.5.7", + "resolved": "https://registry.npmjs.org/multiselect-react-dropdown/-/multiselect-react-dropdown-1.5.7.tgz", + "integrity": "sha512-bDlXYEzpV/5p5G5nIFRrZ/Ndf8CSYWliZ62n/5imfjLy0K2/dNx6sFmk4W/Phq83bzPUDK/RI4553yCk6YzZwg==", + "requires": { + "react": "^16.7.0", + "react-dom": "^16.7.0" + } + }, "mute-stream": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", @@ -10628,6 +10750,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz", "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==" }, + "react-input-autosize": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz", + "integrity": "sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==", + "requires": { + "prop-types": "^15.5.8" + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -10758,6 +10888,43 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-select": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz", + "integrity": "sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/cache": "^10.0.9", + "@emotion/core": "^10.0.9", + "@emotion/css": "^10.0.9", + "memoize-one": "^5.0.0", + "prop-types": "^15.6.0", + "react-input-autosize": "^2.2.2", + "react-transition-group": "^4.3.0" + }, + "dependencies": { + "dom-helpers": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz", + "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^2.6.7" + } + }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + } + } + }, "react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", diff --git a/Front-End/package.json b/Front-End/package.json index 7618a18..9c2d14e 100644 --- a/Front-End/package.json +++ b/Front-End/package.json @@ -7,10 +7,12 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "bootstrap": "^4.5.0", + "multiselect-react-dropdown": "^1.5.7", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", + "react-select": "^3.1.0", "reactstrap": "^8.5.1" }, "scripts": { diff --git a/Front-End/src/App.css b/Front-End/src/App.css index bca1c37..bc230db 100644 --- a/Front-End/src/App.css +++ b/Front-End/src/App.css @@ -5,13 +5,6 @@ width:100%; } -body{ - /* background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%); - width: 100%; - height: 100%; - background-attachment: fixed; */ -} - .header a { text-align: center; padding: 0.5rem 3rem; diff --git a/Front-End/src/components/css/dashboard.css b/Front-End/src/components/css/dashboard.css index bd938f7..48f2e6e 100644 --- a/Front-End/src/components/css/dashboard.css +++ b/Front-End/src/components/css/dashboard.css @@ -25,5 +25,5 @@ label{ margin-bottom: 50px; } #subheader{ - margin:20px auto; -} \ No newline at end of file + margin:20px left; +} diff --git a/Front-End/src/components/dashboard.jsx b/Front-End/src/components/dashboard.jsx index fde2e24..5b8aa47 100644 --- a/Front-End/src/components/dashboard.jsx +++ b/Front-End/src/components/dashboard.jsx @@ -1,9 +1,44 @@ import React, { Component } from 'react'; -import {Container,Row, Col, Button, Form, FormGroup, Label, Input, FormText,Card, CardBody, CardTitle, CardText, CardImg} from 'reactstrap'; +import {Container,Row, Col, Button, Form, FormGroup, Label, Input,Card, CardBody, CardTitle, CardText} from 'reactstrap'; import "./css/dashboard.css"; +import Select from 'react-select'; +import FormField from './formfield'; +import {Route} from 'react-router-dom'; + + +const options = [ + { value: "C++", label: "C++" }, + { value: "C", label: "C"}, + { value: "C#", label: "C#"}, + { value: "Java", label: "Java"}, + { value: "Python", label: "Python"}, + { value: "Javascript", label: "Javascript"}, + { value: "Web Development", label: "Web Development"}, + { value: "R", label: "R"} +]; + +const formatOptionLabel = ({ value, label, customAbbreviation }) => ( +
+
{label}
+
+ {customAbbreviation} +
+
+); + class Dashboard extends Component { + constructor(props) { + super(props); + this.state = { inputs: ['input-0'] }; + } + + appendInput() { + var newInput = `form-${this.state.inputs.length}`; + this.setState(prevState => ({ inputs: prevState.inputs.concat([newInput]) })); +} + render() { return ( @@ -49,10 +84,7 @@ class Dashboard extends Component { - + )} + + + */} + +

Internships

 - Title Write a short note about your internship @@ -132,7 +131,6 @@ class Dashboard extends Component { - Title Write a short note about your internship @@ -142,7 +140,6 @@ class Dashboard extends Component { - Title Write a short note about your internship @@ -152,7 +149,6 @@ class Dashboard extends Component { - Title Write a short note about your internship @@ -168,7 +164,6 @@ class Dashboard extends Component { - Click to know more!! @@ -176,7 +171,6 @@ class Dashboard extends Component { - Click to know more!! @@ -184,7 +178,6 @@ class Dashboard extends Component { - Click to know more!! @@ -192,7 +185,6 @@ class Dashboard extends Component { - Click to know more!! diff --git a/Front-End/src/components/formfield.jsx b/Front-End/src/components/formfield.jsx new file mode 100644 index 0000000..52b1154 --- /dev/null +++ b/Front-End/src/components/formfield.jsx @@ -0,0 +1,78 @@ +import React, { useState } from "react"; +import {Row,Button,Col,Form} from "reactstrap"; + +function App() { + const [inputList, setInputList] = useState([{ projectName: "", projectLink: "" , projectDes:""}]); + + // handle input change + const handleInputChange = (e, index) => { + const { name, value } = e.target; + const list = [...inputList]; + list[index][name] = value; + setInputList(list); + }; + + // handle click event of the Remove button + const handleRemoveClick = index => { + const list = [...inputList]; + list.splice(index, 1); + setInputList(list); + }; + + // handle click event of the Add button + const handleAddClick = () => { + setInputList([...inputList, { projectName: "", projectLink: "", projectDes:"" }]); + }; + + return ( +
+ {inputList.map((x, i) => { + return ( +
+
+ + + + handleInputChange(e, i)} + /> + + handleInputChange(e, i)} + /> + + + + handleInputChange(e, i)} + /> +
+ {inputList.length !== 1 && } + {inputList.length - 1 === i && } +
+ + +
+
+ ); + })} +
+ + ); +} + +export default App; \ No newline at end of file