add todo notes

_tasks-mockup.org

@@ -0,0 +1,10 @@
+* tasks-mockup
+
+** project task view
+- should not show project button, but should show user button
+- later, should be able to group by users -- need button for grouping
+** user task view
+- no user button but should show the project button
+- should be able to group by project
+** user project view
+- just show the user projects

package-lock.json

@@ -2405,6 +2405,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap-imageupload": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-imageupload/-/bootstrap-imageupload-1.1.3.tgz",
+      "integrity": "sha1-qe48TOjc3zigGfchDloerb1jr44="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap-imageupload": "^1.1.3",
     "http-proxy-middleware": "^0.19.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/components/profile.js

@@ -1,22 +1,46 @@
 import React from 'react'
 
+function uploadImage() {}
+
 function Profile(props) {
   const user = props.user
-  user['projects'] = [1, 10] // TODO
+  user['createdAt'] = '2019-06-23T10:59:10'
+  user['username'] = user.name || 'Me'
+  user['display_name'] = user.name || 'Me'
+  user['avatar'] = user.avatar || '/img/default-user-image.png'
+  user['projects'] = [1]
+
+  // file upload
+  // https://www.npmjs.com/package/bootstrap-imageupload
+  //$('#my-imageupload').imageupload()
+
   return (
     <div>
       <form className="form-group" name="profile">
         <ul className="list-group">
           <li className="list-group-item row">
             <span className="col-lg-1 col-md-1 col-sm-1 col-xs-1">Name:</span>
+            <span className="col">{user.username}</span>
+          </li>
+          <li className="list-group-item row">
+            <span className="col">Display name</span>
             <input
               className="col-lg-5 col-md-5 col-sm-5 col-xs-5"
               type="text"
               name="username"
-              value={user.name}
+              value={user.display_name}
               onChange={props.handleChange}
             />
-            <img className="" src="/img/default-user-image.png" alt="avatar" />
+          </li>
+          <li className="list-group-item row">
+            <span className="col">Avatar:</span>
+            <img
+              className="img-fluid"
+              src={user.avatar}
+              alt="avatar"
+              onClick={uploadImage}
+            />
+            <input type="file" name="image-file" />
           </li>
           <li className="list-group-item row">
             <span className="col">created:</span>
@@ -24,11 +48,14 @@ function Profile(props) {
           </li>
           <li className="list-group-item row">
             <span className="col-sm-1">projects:</span>
-            {user.projects &&
-              user.projects.map(userProject => {
-                const project = props.projects.find(p => p.id === userProject)
+            {user.projects.length > 0 &&
+              user.projects.map(id => {
+                const project = props.projects.find(p => p.id === id)
                 return (
-                  <span key={project.id} onClick={() => props.selectProject(userProject)}>
+                  <span
+                    key={project.id}
+                    onClick={() => props.selectProject(id)}
+                  >
                     {project.name}
                   </span>
                 )