add better handling of roles in context b00tc4mp#425

staff/miguel-arias/project/api/data/models.js

@@ -63,7 +63,11 @@ const profile = new Schema({
     points: {
         type: Number,
         default: 0
-    }
+    }/* ,
+    profileImage: {
+        data: Buffer,
+        contentType: String
+    } */
 })
 
 const template = new Schema({

staff/miguel-arias/project/api/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "node .",
     "watch": "node --watch .",
-    "inspect": "node --inspect-brk",
+    "inspect": "node --inspect-brk .",
     "test": "mocha logic/*.spec.js",
     "test-inspect": "mocha --inspect-brk logic/*.spec.js",
     "test-single": "mocha",

staff/miguel-arias/project/api/test/retrieve-tasks.test.sh

@@ -0,0 +1,10 @@
+source colors.sh
+
+echo -e "${blue}TEST retrieve-profiles${reset}"
+
+echo
+echo -e "${tomato}CASE failure on incorrect token${reset}"
+
+curl 'http://localhost:8000/tasks/null/null/' \
+-H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NWRhNDU4NzNmNjY2MDYxYmM1NGNmMWIiLCJpYXQiOjE3MDk3NDg5MTgsImV4cCI6MTcwOTc1MjUxOH0.nJIF3eLkGStUpXhVbm-5rsRgw53re6_M1ghCklF3Ycc' \
+-v

staff/miguel-arias/project/app/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@formkit/tempo": "^0.0.14",
     "autoprefixer": "^10.4.17",
     "classnames": "^2.5.1",
     "com": "link:..\\com",

staff/miguel-arias/project/app/src/App.jsx

@@ -7,15 +7,16 @@ import Context from './Context'
 import { errors } from 'com'
 const { ContentError, DuplicityError, NotFoundError, TokenError } = errors
 
-import Feedback from './components/Feedback'
+import { Feedback } from './components'
+import session from './logic/session'
 import logic from './logic'
 
 function App() {
   console.log('App')
 
   const [level, setLevel] = useState(null)
   const [message, setMessage] = useState(null)
-  const [role, setRole] = useState(null)
+  const [role, setRole] = useState(logic.getProfileRole)
 
   const navigate = useNavigate()
 
@@ -61,7 +62,7 @@ function App() {
   }
 
   const handleRole = role => {
-    setRole(role)
+    session.profileRole = role
   }
 
   return <>

staff/miguel-arias/project/app/src/components/Calendar.jsx

@@ -1,7 +1,10 @@
 import { useNavigate } from 'react-router-dom'
 
+import { format, addDay } from '@formkit/tempo'
+
+import session from '../logic/session'
 import logic from '../logic'
-import helper from '../logic/helpers'
+import helpers from '../logic/helpers'
 
 import { useContext } from '../hooks'
 
@@ -13,12 +16,12 @@ import { Task, Template } from '../components'
 function Calendar(props) {
     console.log('Calendar')
 
-    const role = props.role
-
     const context = useContext()
     const navigate = useNavigate()
 
     const [tasks, setTasks] = useState([])
+    const [filter, setFilter] = useState(null)
+    const [reversed, setReversed] = useState(false)
     const [today, setToday] = useState(null)
     const [task, setTask] = useState(null)
     const [profiles, setProfiles] = useState([])
@@ -51,8 +54,26 @@ function Calendar(props) {
     const refreshTasks = async () => {
         try {
             const tasks = await logic.retrieveTasks()
-            // tasks = await logic.orderTasks(tasks)
-            setTasks(tasks)
+            const tasks2 = []
+            for (let i = 0; i < tasks.length - 1; i++) {
+                const startDate = new Date(tasks[i].date)
+                const endDate = new Date(tasks[i + 1].date)
+                const msDifference = endDate - startDate
+                const daysDifference = Math.floor(msDifference / (1000 * 60 * 60 * 24))
+
+                tasks2.push(tasks[i])
+                for (let j = 0; j < daysDifference - 1; j++) {
+                    tasks2.push({ date: format(addDay(tasks[i].date, j + 1), 'YYYY-MM-DD').slice(5).replace('-', ' ') })
+                    /* const originalDate = tasks[i].date
+                    const objectDate = new Date(originalDate)
+                    objectDate.setDate(objectDate.getDate() + j)
+                    const newDate = objectDate.toISOString().split('T')[0]
+                    tasks2.push({ date: newDate }) */
+                }
+            }
+            tasks2.push(tasks[tasks.length - 1])
+            // crear array tasks2 y le inyecto las tareas y nulos donde no haya tareas y guardo en setTasks el tasks2
+            setTasks(tasks2)
         } catch (error) {
             context.handleError(error)
         }
@@ -124,7 +145,6 @@ function Calendar(props) {
     const handleDelaySubmit = async (event) => {
         event.preventDefault()
         const date = event.target.delayDate.value
-        /* const dateObject = date ? new Date(date) : null */
         try {
             await logic.delayTask(task.id, date)
             refreshTasks()
@@ -152,7 +172,6 @@ function Calendar(props) {
     const handleCompleteSubmit = async (event) => {
         event.preventDefault()
         const date = event.target.completionDate.value
-        /* const dateObject = date ? new Date(date) : null */
 
         let digit1 = event.target.digit1.value
         let digit2 = event.target.digit2.value
@@ -170,23 +189,93 @@ function Calendar(props) {
         }
     }
 
+    const handleFilterClick = () => {
+        setView('filter-view')
+    }
+
+    const handleAscendTasksClick = () => {
+        if (reversed === false) {
+            const reversedTasks = [...tasks].reverse()
+            setTasks(reversedTasks)
+            setReversed(true)
+        }
+    }
+
+    const handleDescendTasksClick = () => {
+        if (reversed === true) {
+            const reversedTasks = [...tasks].reverse()
+            setTasks(reversedTasks)
+            setReversed(false)
+        }
+    }
+
+    /* const handleFilterByRoomClick = () => {
+        setFilter('room')
+        refreshTasks()
+    } */
+
+    /* const handleFilterByRoom = async (templateId) => {
+        try {
+            const tasks = await logic.retrieveTasksByRoom(templateId)
+            setTasks(tasks)
+            setView(null)
+            setFilter(null)
+        } catch (error) {
+            context.handleError(error)
+        }
+    } */
+
+    /* const handleFilterByAssigneeClick = () => {
+        setFilter('assignee')
+        refreshTasks()
+    } */
+
+    /* const handleFilterByAssignee = async (profileId) => {
+        try {
+            const tasks = await logic.retrieveTasksByAssignee(profileId)
+            setTasks(tasks)
+            setView(null)
+            setFilter(null)
+        } catch (error) {
+            context.handleError(error)
+        }
+    } */
+
+    const handleRestartFilters = () => {
+        setView(null)
+        setFilter(null)
+        refreshTasks()
+    }
+
     return <Container>
         <h1>Tasks</h1>
 
-        <Button>Filter</Button>
+        <Button onClick={handleFilterClick}>Filter</Button>
+        <Button onClick={handleRestartFilters}>Restart filters</Button>
+
+        {view === 'filter-view' && <Container>
+            <Button onClick={handleAscendTasksClick}>🔼</Button>
+            <Button onClick={handleDescendTasksClick}>🔽</Button>
+            <Button /* onClick={handleFilterByRoomClick} */>By Room</Button>
+            <Button /* onClick={handleFilterByAssigneeClick} */>By Assignee</Button>
+        </Container>}
+
+        {/* {filter === 'room' && templates.map(template => template.rooms.map(room => <Container><Button key={room.id} onClick={() => handleFilterByRoom(template.id)}>{helpers.arrangeText(room.name)}</Button></Container>))} */}
+
+        {/* {filter === 'assignee' && profiles.map(profile => <Container><Button key={profile.id} onClick={() => handleFilterByAssignee(profile.id)}>{helpers.arrangeText(profile.name)}</Button></Container>)} */}
 
-        {tasks.map(task => <Task key={task.id} task={task} profile={profiles.find(profile => task.assignee === profile.id)} profileName={profiles.map(profile => task.assignee === profile.id ? profile.name : '')} /* color={profiles.} */ onTaskClick={handleOnTaskClick} />)}
+        {tasks.map(task => task.id ? <Task key={task.id} task={task} profile={profiles.find(profile => task.assignee === profile.id)} profileName={profiles.map(profile => task.assignee === profile.id ? profile.name : '')} onTaskClick={handleOnTaskClick} /> : <Button key={task.date}>{task.date}</Button>)}
 
         {view === 'react-to-task-view' && <Container>
-            {role === 'admin' && <h3>{helper.arrangeText(task.template.name)}</h3>}
-            {role === 'admin' && <h3>{helper.arrangeDate(task.date)}</h3>}
-            {role === 'admin' && <h3>{profiles.map(profile => profile.id === task.assignee ? profile.name : '')}</h3>}
-            {role !== null && <Button onClick={() => handleAssignThisTask(null)}>Take this task</Button>}
-            {role === 'admin' && <Button onClick={handleAssignThisTaskTo}>Assign this task to...</Button>}
-            {role !== null && <Button onClick={handleCompleteTaskClick}>Complete this task</Button>}
-            {role !== null && <Button onClick={handleDelayTaskClick}>Delay this task</Button>}
-            {role === 'admin' && <Button onClick={handleDeleteClick}>Delete this task</Button>}
-            {role !== null && <Button onClick={handleCancelClick}>Cancel</Button>}
+            {session.profileRole === 'admin' && <h3>{helpers.arrangeText(task.template.name)}</h3>}
+            {session.profileRole === 'admin' && <h3>{helpers.arrangeDate(task.date)}</h3>}
+            {session.profileRole === 'admin' && <h3>{profiles.map(profile => profile.id === task.assignee ? profile.name : '')}</h3>}
+            {session.profileRole !== null && <Button onClick={() => handleAssignThisTask(null)}>Take this task</Button>}
+            {session.profileRole === 'admin' && <Button onClick={handleAssignThisTaskTo}>Assign this task to...</Button>}
+            {session.profileRole !== null && <Button onClick={handleCompleteTaskClick}>Complete this task</Button>}
+            {session.profileRole !== null && <Button onClick={handleDelayTaskClick}>Delay this task</Button>}
+            {session.profileRole === 'admin' && <Button onClick={handleDeleteClick}>Delete this task</Button>}
+            {session.profileRole !== null && <Button onClick={handleCancelClick}>Cancel</Button>}
         </Container>}
 
         {view === 'assign-task-view' && <Container>
@@ -234,7 +323,7 @@ function Calendar(props) {
                 ➕
             </Button>
         </Container>
-    </Container>
+    </Container >
 }
 
 export default Calendar

staff/miguel-arias/project/app/src/components/Profiles.jsx

@@ -4,18 +4,17 @@ import { useEffect, useState } from 'react'
 import { useContext } from '../hooks'
 import defaultColors from 'com/defaultColors'
 
+import session from '../logic/session'
 import logic from '../logic'
 
 function Profiles(props) {
-    const role = props.role
-
     const context = useContext()
     const colors = defaultColors
 
     const [profiles, setProfiles] = useState([])
     const [activeProfileId, setActiveProfileId] = useState(null)
-    const [pinCode, setPinCode] = useState(null)
     const [name, setName] = useState(null)
+    const [selectedImage, setSelectedImage] = useState(null)
     const [palette, setPalette] = useState([])
     const [chosenColor, setChosenColor] = useState(null)
     const [usedColors, setUsedColors] = useState([])
@@ -53,13 +52,13 @@ function Profiles(props) {
         let name = profileName.target.firstChild.data
         try {
             setName(name)
-            setPinCode('pinCode')
+            setView('login-profile-view')
         } catch (error) {
             context.handleError(error)
         }
     }
 
-    const handleSubmit = (event) => {
+    const handleLoginProfileSubmit = (event) => {
         event.preventDefault()
         const digit1 = event.target.digit1.value
         const digit2 = event.target.digit2.value
@@ -71,13 +70,14 @@ function Profiles(props) {
         return (async () => {
             try {
                 await logic.loginProfile(name, pincode)
-                setPinCode(null)
+                setView(null)
                 const role = await logic.retrieveRole()
                 if (role === 'admin')
                     context.handleRole('admin')
                 else
                     context.handleRole('user')
                 setView(null)
+                refreshProfiles()
             } catch (error) {
                 context.handleError(error)
             }
@@ -208,15 +208,33 @@ function Profiles(props) {
         }
     }
 
+    const handleChangePictureClick = () => {
+        setView('change-picture-view')
+    }
+
+    const handleImageChange = (event) => {
+        const image = event.target.files[0]
+        setSelectedImage(image)
+    }
+
+    const handleImageSubmit = async (event) => {
+        event.preventDefault()
+        try {
+            await logic.changeImage(selectedImage)
+            setSelectedImage(null)
+            setView(null)
+        } catch (error) {
+            context.handleError(error)
+        }
+    }
+
     return <Container>
         <h1>Profiles</h1>
 
-        <Button>Filter</Button>
-
         {profiles.map(profile => <Profile onProfileClick={handleProfileClick} key={profile.id} profile={profile} />)}
 
-        {pinCode === 'pinCode' && <Container>
-            <Form onSubmit={handleSubmit}>
+        {view === 'login-profile-view' && <Container>
+            <Form onSubmit={handleLoginProfileSubmit}>
                 <h3>{name}</h3>
                 <p>Pin code</p>
                 <Input id='digit1' placeholder='-'></Input>
@@ -228,17 +246,24 @@ function Profiles(props) {
         </Container>}
 
         <Container>
-            {role === 'admin' ? <Button onClick={handleManageProfilesClick}>Manage profiles</Button> : ''}
-            {role !== null ? <Button onClick={handleEditProfileClick}>Edit your profile</Button> : ''}
+            {session.profileRole === 'admin' ? <Button onClick={handleManageProfilesClick}>Manage profiles</Button> : ''}
+            {session.profileRole !== null ? <Button onClick={handleEditProfileClick}>Edit your profile</Button> : ''}
         </Container>
 
         {view === 'edit-profile-view' && <Container>
-            <Button>Change picture</Button>
+            <Button onClick={handleChangePictureClick}>Change picture</Button>
             <Button onClick={handleChangeColorClick}>Change profile color</Button>
             <Button onClick={handleChangePincodeClick}>Change pincode</Button>
             <Button onClick={handleDeleteOwnProfileClick}>Delete profile</Button>
         </Container>}
 
+        {view === 'change-picture-view' && <Container>
+            <Form onSubmit={handleImageSubmit}>
+                <Input type='file' accept='image/*' onChange={handleImageChange}></Input>
+                <Button type='submit'>Upload image</Button>
+            </Form>
+        </Container>}
+
         {view === 'change-color-view' && <Container>
             {palette.map(color => !usedColors.includes(color.code) ? <Button key={color.code} onClick={() => handleColorClick(color)} style={{ backgroundColor: chosenColor === color ? 'white' : color.code }}>{color.name}</Button> : '')}
             <Button onClick={handleChooseColorClick}>Choose color</Button>