Merge pull request #56 from dm9-project-manager/lastFewFeatures

Last few features

Author: Jnixon54

Diff for: db/changeCardColor.sql

@@ -0,0 +1 @@
+UPDATE cards SET color = $1 WHERE id = $2

Diff for: db/changeColor.sql

@@ -0,0 +1 @@
+UPDATE projects SET color = $1 where id = $2

Diff for: db/getProjectById.sql

@@ -1,6 +1,7 @@
 SELECT *
 FROM projects
-WHERE owner_id = $1;
+WHERE owner_id = $1
+ORDER BY id;
 
 
 

Diff for: server/controllers/projects_controller.js

@@ -27,5 +27,13 @@ module.exports = {
       .getTeamProjects([req.user.id])
       .then(response => res.status(200).send(response))
       .catch(err => console.log(err));
-  }
+  },
+  changeColor: (req, res, next) => {
+    const dbInstance = req.app.get('db');
+    dbInstance
+      .changeColor([req.body.color, req.body.projectID])
+      .then(response => res.status(200).send(response))
+      .catch(err => console.log(err));
+  },
+
 };

Diff for: server/controllers/tasks_controller.js

@@ -193,4 +193,13 @@ module.exports = {
            })
            .catch(console.log)
     },
+    changeCardColor: (req, res, next) => {
+        const dbInstance = req.app.get('db')
+
+        dbInstance.changeCardColor([req.body.color, req.body.cardID])
+            .then(response => {
+                res.status(200).send(response)
+           })
+           .catch(console.log)
+    },
 }

Diff for: server/index.js

@@ -261,6 +261,7 @@ app.get('/api/allProjects',projectsController.getAllProjects);
 app.get('/api/allTasks', projectsController.getAllTasks);
 app.post('/api/addProject', projectsController.addProject);
 app.get('/api/allTeamProjects', projectsController.getTeamProjects)
+app.post('/api/changeColor', projectsController.changeColor)
 
 ///////////////////////////////////////////////////////////////////////////
 // Project View Endpoints
@@ -283,6 +284,7 @@ app.post('/api/dragTask', tasksController.dragTask)
 app.post('/api/removeCurrentMember', tasksController.removeCurrentMember)
 
 app.put('/api/sendNewTitle/:title/:projectID', tasksController.sendNewTitle)
+app.post('/api/changeCardColor', tasksController.changeCardColor)
 
 ///////////////////////////////////////////////////////////////////////////
 app.post('/api/updateHeader', tasksController.editCardHeader)

Diff for: src/components/Dashboard/Dashboard.css

@@ -64,3 +64,6 @@
   border-radius: 10px;
   z-index: 100;
 }
+.outer-project-box{
+  position: relative;
+}

Diff for: src/components/Dashboard/Dashboard.js

@@ -11,6 +11,7 @@ import {
 import Sidebar from '../Sidebar/Sidebar';
 import Header from '../Header/Header';
 import {getUserInfo} from './../../ducks/reducers/userReducer'
+import ColorPicker from './../tools/ColorPicker/ColorPicker'
 
 import './Dashboard.css';
 
@@ -19,10 +20,15 @@ class Dashboard extends Component {
     super(props);
 
     this.state = {
-      toolTip: false
+      toolTip: false,
+      currColor: '',
+      colorsOpen: false,
+      projID: 0
     };
     this.createProjectToolTip = this.createProjectToolTip.bind(this);
     this.sendNewProject = this.sendNewProject.bind(this);
+    this.pickColor = this.pickColor.bind(this)
+    this.showColors = this.showColors.bind(this)
   }
   componentDidMount() {
     this.props.getAllProjects();
@@ -46,22 +52,41 @@ class Dashboard extends Component {
     });
   }
 
+  pickColor(color, projectID){
+    console.log(color, projectID);
+    axios.post('/api/changeColor', {color, projectID}).then(response => {
+      this.props.getAllProjects();
+      this.setState({colorsOpen: !this.state.colorsOpen, projectID})
+    })
+  }
+  showColors(projID){
+    this.setState({colorsOpen: !this.state.colorsOpen, projID})
+    console.log("Hit!");
+  }
+
   render() {
     //On page load a box is created and displays information for each project
     const projectBox = this.props.projects.map((project, index) => {
       return (
-        <Link to={`/ProjectView/${project.id}/${project.title}`} className="dashboardCards" key={index}>
-          <div className="project-card">
-            <div className="card-header">{project.title}</div>
-          </div>
-        </Link>
-      );
+        <div key={index} className="outer-project-box">
+          
+          <Link to={`/ProjectView/${project.id}/${project.title}`} className="dashboardCards" key={index}>
+            <div className="project-card" style={ project.color && {'backgroundColor': `${project.color}`}}>
+              <div className="card-header">
+              {project.title}
+              </div>
+            </div>
+          </Link>
+          
+         <ColorPicker currentID={this.state.projID} colorsOpen={this.state.colorsOpen} showColors={this.showColors} currentItem={project} pickColor={this.pickColor}/>
+        </div>
+      )
     });
 
     const teamProjects = this.props.teamProjects.map((project, index) => {
       return (
         <Link to={`/ProjectView/${project.id}/${project.title}`} className="dashboardCards" key={index}>
-          <div className="project-card">
+          <div className="project-card" style={ project.color && {'backgroundColor': `${project.color}`}} >
             <div className="card-header">{project.title}</div>
           </div>
         </Link>

Diff for: src/components/ProjectView/PVComponents/Card/Card.js

@@ -4,6 +4,8 @@ import {connect} from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import Task from '../Task/Task'
 
+import axios from 'axios'
+
 
 ///////////////////////////////////////////
 import { DropTarget } from 'react-dnd'
@@ -26,6 +28,8 @@ import {
 
 import '../../ProjectView.css'
 
+import ColorPicker from './../../../tools/ColorPicker/ColorPicker'
+
 
 const cardTarget = {
     drop(props) {
@@ -46,12 +50,17 @@ class Card extends Component {
         super(props)
         this.state = {
             editOpen: false,
-            options: false
+            options: false,
+            colorsOpen: false,
+            cardID: 0
+
         }
         this.openHeaderEdit = this.openHeaderEdit.bind(this)
         this.openEditOptions = this.openEditOptions.bind(this)
         this.deleteCard = this.deleteCard.bind(this)
         this.closeEditOptions = this.closeEditOptions.bind(this)
+        this.showColors = this.showColors.bind(this)
+        this.pickColor = this.pickColor.bind(this)
     }
 
     openHeaderEdit(cardID, title){
@@ -106,6 +115,18 @@ class Card extends Component {
 
     }//done
 
+    showColors(cardID){
+        this.setState({colorsOpen: !this.state.colorsOpen, cardID})
+        console.log("Hit!");
+      }
+
+      pickColor(color, cardID){
+        console.log(color, cardID);
+        axios.post('/api/changeCardColor', {color, cardID}).then(response => {
+          this.props.getNewCards(this.props.match.params.id);
+          this.setState({colorsOpen: !this.state.colorsOpen, cardID})
+        })
+      }
 
 
 
@@ -121,7 +142,6 @@ class Card extends Component {
     }
 
     const style = {'backgroundColor': backgroundColor}
-
 
     return connectDropTarget(
       <div id='taskHolder' style={style}>
@@ -167,14 +187,22 @@ class Card extends Component {
         }
 
         {
-            <div id='cardTest'>
+            // Currently The background color is being changed on this div
+            <div id='cardTest' style={{'backgroundColor': this.props.card.color}}>
                 <form onSubmit={e => this.handleAddTask(e, this.props.card.id, this.props.match.params.id)}>
                     <input  type='text' 
                             className='newCard' 
                             onClick={() => this.selectCard(this.props.card.id)}
                             onChange={this.props.taskInput} 
                             value={this.props.taskInputID === this.props.card.id ? this.props.newTask : ''}/>
                 </form>
+
+                {/* These two divs are allowing us to position the box absoloutely. Do inline style to override component styling */}
+                 <div style={{"position": "relative"}} >
+                    <div style={{'position': "absolute", 'top': '-60px', 'right': '20px'}}>
+                        <ColorPicker currentID={this.props.card.id} colorsOpen={this.state.colorsOpen} showColors={this.showColors} currentItem={this.props.card} pickColor={this.pickColor} />
+                    </div>
+                </div>
             </div>
         }
         {/* <div id={this.props.inputOpen && this.state.taskCardID === card.cardID ? 'openEditer' : 'cardTest'} onClick={this.addText}>
@@ -188,6 +216,7 @@ class Card extends Component {
                         type="text"/>
             </form>     
         </div> */}
+        
       </div>
     );
   }

Diff for: src/components/SettingView/Settings/fire.js

@@ -1,5 +1,5 @@
-import firebase from 'firebase';
+// import firebase from 'firebase';
 
-const fire = firebase.initializeApp(config);
+// const fire = firebase.initializeApp(config);
 
-export { fire };
+// export { fire };

Diff for: src/components/tools/ColorPicker/ColorPicker.css

@@ -0,0 +1,64 @@
+.color-picker{
+    position: absolute;
+    top: 3px;
+    right: 30px;
+    background: black;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+.color-box{
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    top: 30px;
+    right: 30px;
+    background: white;
+}
+.colors-to-pick{
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: blue;
+    margin: 7px
+}
+.color-holder{
+    display: flex;
+}
+
+.color-1{
+    background-color: red;
+
+}
+.color-2{
+    background-color: yellow;
+    
+}
+.color-3{
+    background-color: blue;
+    
+}
+.color-4{
+    background-color: green;
+    
+}
+.color-5{
+    background-color: gold;
+    
+}
+.color-6{
+    background-color: purple;
+    
+}
+.color-7{
+    background-color: chartreuse;
+    
+}
+.color-8{
+    background-color: lightskyblue;
+    
+}
+.color-9{
+    background-color: turquoise
+    
+}

Diff for: src/components/tools/ColorPicker/ColorPicker.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import './ColorPicker.css'
+
+const colorsList = [["red", "yellow", "blue"], ["green", "gold", "purple"], ["chartreuse", "lightskyblue", "turquoise"]]
+
+
+    const ColorPicker = (props) => (
+        <div>
+          <div className="color-picker" onClick={() => props.showColors(props.currentItem.id)} ></div>
+          {props.colorsOpen && props.currentID === props.currentItem.id && 
+            <div className="color-box"> 
+               {colorsList.map((currColor, index) => {
+                 return (
+                    <div key={index} className="color-holder">
+                       <div className="colors-to-pick" style={{'backgroundColor': `${currColor[0]}`}} 
+                            onClick={() => props.pickColor(`${currColor[0]}`, props.currentItem.id)}></div>
+                        <div className="colors-to-pick" style={{'backgroundColor': `${currColor[1]}`}} 
+                             onClick={() => props.pickColor(`${currColor[1]}`, props.currentItem.id)}></div>
+                        <div className="colors-to-pick" style={{'backgroundColor': `${currColor[2]}`}} 
+                             onClick={() => props.pickColor(`${currColor[2]}`, props.currentItem.id)}></div>
+                    </div>
+                       )})}
+            </div>
+          }
+        </div>
+        )
+export default ColorPicker;