Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in
Toggle navigation
P
planner-team-one
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
21
Issues
21
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Евгений Положенцев
planner-team-one
Commits
e098bb78
Commit
e098bb78
authored
Jan 12, 2023
by
Ermolaev Timur
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
#149
реализовал поля для формы новой задачи
parent
0b35c446
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
179 additions
and
31 deletions
+179
-31
СustomSelect.js
planner-front/src/components/UI/СustomSelect/СustomSelect.js
+3
-3
DateTimePicker.js
...bleContainer/NewTaskForm/DateTimePicker/DateTimePicker.js
+49
-0
NewTaskForm.js
...ments/UsersTasksTableContainer/NewTaskForm/NewTaskForm.js
+69
-14
UsersTasksTableContainer.js
...ents/UsersTasksTableContainer/UsersTasksTableContainer.js
+9
-4
UsersTasks.js
planner-front/src/containers/UsersTasks/UsersTasks.js
+47
-8
WeekCalendar.js
planner-front/src/containers/WeekCalendar/WeekCalendar.js
+1
-1
projectsReducer.js
planner-front/src/store/reducers/projectsReducer.js
+1
-1
No files found.
planner-front/src/components/UI/СustomSelect/СustomSelect.js
View file @
e098bb78
import
{
FormControl
,
InputLabel
,
MenuItem
,
Select
}
from
'@mui/material'
;
import
{
FormControl
,
InputLabel
,
MenuItem
,
Select
}
from
'@mui/material'
;
import
{
memo
}
from
'react'
;
import
{
memo
}
from
'react'
;
function
С
ustomSelect
({
value
,
onChange
,
label
,
variant
=
'standard'
,
items
,
id
,
defaultValue
,
name
})
{
function
С
ustomSelect
({
value
,
onChange
,
label
,
variant
=
'standard'
,
items
,
id
,
defaultValue
,
name
,
sx
})
{
return
(
return
(
<>
<>
<
FormControl
variant
=
{
variant
}
sx
=
{
{
m
:
0
,
minWidth
:
125
}}
>
<
FormControl
variant
=
{
variant
}
sx
=
{
sx
?.
width
?
sx
:
{
m
:
0
,
minWidth
:
125
}}
>
<
InputLabel
id
=
{
`
${
id
}
-select-label`
}
>
{
label
}
<
/InputLabel
>
<
InputLabel
id
=
{
`
${
id
}
-select-label`
}
>
{
label
}
<
/InputLabel
>
<
Select
<
Select
labelId
=
{
`
${
id
}
-select-label`
}
labelId
=
{
`
${
id
}
-select-label`
}
...
@@ -30,7 +30,7 @@ function СustomSelect({ value, onChange, label, variant = 'standard', items, id
...
@@ -30,7 +30,7 @@ function СustomSelect({ value, onChange, label, variant = 'standard', items, id
}
}
export
default
memo
(
С
ustomSelect
,
(
prevProps
,
nextProps
)
=>
{
export
default
memo
(
С
ustomSelect
,
(
prevProps
,
nextProps
)
=>
{
if
(
prevProps
.
value
!==
nextProps
.
value
)
{
if
(
prevProps
.
value
!==
nextProps
.
value
||
prevProps
.
items
!==
nextProps
.
items
)
{
return
false
return
false
}
else
{
}
else
{
return
true
return
true
...
...
planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/NewTaskForm/DateTimePicker/DateTimePicker.js
0 → 100644
View file @
e098bb78
import
React
,
{
useState
}
from
"react"
;
import
TextField
from
"@mui/material/TextField"
;
import
{
LocalizationProvider
}
from
"@mui/x-date-pickers/LocalizationProvider"
;
import
{
DateTimePicker
}
from
"@mui/x-date-pickers/DateTimePicker"
;
import
{
AdapterMoment
}
from
"@mui/x-date-pickers/AdapterMoment"
;
import
{
AdapterDayjs
}
from
'@mui/x-date-pickers/AdapterDayjs'
;
import
moment
from
"moment"
;
export
default
function
MaterialUIPickers
({
task
,
name
,
onChange
,
})
{
const
[
state
,
setState
]
=
useState
(
null
)
let
fullYear
=
new
Date
().
getFullYear
()
let
month
=
new
Date
().
getMonth
()
let
day
=
new
Date
().
getDate
();
return
(
<
LocalizationProvider
dateAdapter
=
{
AdapterMoment
}
sx
=
{{
width
:
"100%"
,
fontSize
:
5
,
fontWeight
:
"200"
}}
adapterLocale
=
{
'ru-RU'
}
>
<
DateTimePicker
minTime
=
{
moment
({
year
:
fullYear
,
month
:
month
,
day
:
day
,
hour
:
11
,
minute
:
0
})}
maxTime
=
{
moment
({
year
:
fullYear
,
month
:
month
,
day
:
day
,
hour
:
20
,
minute
:
0
})}
disablePast
=
{
true
}
showTimeSelect
=
{
true
}
minutesStep
=
{
60
}
ampm
=
{
false
}
ampmInClock
=
{
false
}
inputFormat
=
"DD/MM/YY HH:mm"
renderInput
=
{(
params
)
=>
{
return
(
<
TextField
{...
params
}
sx
=
{{
width
:
"auto"
,
fontWeight
:
"200"
,
fontSize
:
5
}}
name
=
{
name
}
/
>
)}}
value
=
{
state
}
onChange
=
{(
newValue
)
=>
{
setState
(
newValue
)
onChange
(
newValue
,
name
);
}}
/
>
<
/LocalizationProvider
>
);
}
planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/NewTaskForm/NewTaskForm.js
View file @
e098bb78
import
{
Box
,
Divider
,
Grid
,
Table
,
TableCell
,
TableContainer
,
TextField
,
Typography
,
}
from
"@mui/material"
;
import
{
Box
,
Divider
,
Grid
,
IconButton
,
TextField
,
Typography
,
}
from
"@mui/material"
;
import
{
memo
}
from
"react"
;
import
{
memo
,
useMemo
}
from
"react"
;
import
{
priorities
}
from
"../../../../constants"
;
import
CustomSelect
from
"../../../UI/СustomSelect/СustomSelect"
import
MaterialUIPickers
from
"./DateTimePicker/DateTimePicker"
;
import
{
Save
}
from
"@mui/icons-material"
;
function
NewTaskForm
({
addFormStatus
,
onChangeNewTaskHandler
,
newTask
,
allUserProjectsForModalTask
,
onDateChange
})
{
const
workers
=
useMemo
(()
=>
{
if
(
newTask
?.
project
)
{
return
newTask
?.
project
?.
members
.
map
((
member
)
=>
{
return
{
value
:
member
.
user
,
text
:
member
.
user
.
displayName
}})
}
else
{
return
[{
value
:
''
,
text
:
'Выберите проект'
}]
}
},[
newTask
?.
project
])
function
NewTaskForm
({
addFormStatus
})
{
return
(
return
(
<
Box
sx
=
{{
height
:
addFormStatus
?
'200px'
:
'0px'
,
transition
:
'all 0.3s linear'
,
visibility
:
addFormStatus
?
'visible'
:
'hidden'
,
transform
:
addFormStatus
?
'translateY(0)'
:
'translateY(-20vh)'
}}
>
<
Box
sx
=
{{
height
:
addFormStatus
?
'200px'
:
'0px'
,
transition
:
'all 0.3s linear'
,
visibility
:
addFormStatus
?
'visible'
:
'hidden'
,
transform
:
addFormStatus
?
'translateY(0)'
:
'translateY(-20vh)'
}}
>
<
Box
>
<
Box
>
<
Divider
>
<
Divider
>
<
Typography
variant
=
"overline"
>
Добавить
новую
задачу
<
/Typography
>
<
Typography
variant
=
"overline"
>
Добавить
новую
задачу
<
/Typography
>
<
/Divider
>
<
/Divider
>
<
Box
container
sx
=
{{
<
Box
sx
=
{{
backgroundColor
:
"#E8E8E8"
,
backgroundColor
:
"#E8E8E8"
,
marginBottom
:
"2em"
,
marginBottom
:
"2em"
,
}}
>
}}
>
...
@@ -21,24 +38,62 @@ function NewTaskForm({ addFormStatus }) {
...
@@ -21,24 +38,62 @@ function NewTaskForm({ addFormStatus }) {
<
Grid
item
xs
=
{
3
}
>
Дедлайн
<
/Grid
>
<
Grid
item
xs
=
{
3
}
>
Дедлайн
<
/Grid
>
<
Grid
item
xs
=
{
0.5
}
><
/Grid
>
<
Grid
item
xs
=
{
0.5
}
><
/Grid
>
<
/Grid
>
<
/Grid
>
<
Grid
container
padding
=
{
2
}
>
<
Grid
container
padding
=
{
2
}
alignItems
=
'center'
>
<
Grid
item
xs
=
{
1
}
>
<
Grid
item
xs
=
{
1
}
>
<
TextField
sx
=
{{
width
:
'90%'
}}
/
>
<
CustomSelect
defaultValue
=
{
priorities
[
0
]?.
value
}
value
=
{
newTask
.
priority
}
name
=
{
'priority'
}
variant
=
{
'outlined'
}
onChange
=
{
onChangeNewTaskHandler
}
id
=
{
'priority-type'
}
items
=
{
priorities
}
sx
=
{{
width
:
'90%'
}}
/
>
<
/Grid
>
<
/Grid
>
<
Grid
item
xs
=
{
3.5
}
>
<
Grid
item
xs
=
{
3.5
}
>
<
TextField
sx
=
{{
width
:
'90%'
}}
/
>
<
TextField
id
=
"task-title"
value
=
{
newTask
.
title
}
variant
=
"outlined"
name
=
'title'
sx
=
{{
width
:
'90%'
}}
onChange
=
{
onChangeNewTaskHandler
}
/
>
<
/Grid
>
<
/Grid
>
<
Grid
item
xs
=
{
2
}
>
<
Grid
item
xs
=
{
2
}
>
<
TextField
sx
=
{{
width
:
'90%'
}}
/
>
<
CustomSelect
value
=
{
newTask
.
project
}
name
=
{
'project'
}
variant
=
{
'outlined'
}
onChange
=
{
onChangeNewTaskHandler
}
id
=
{
'project'
}
items
=
{
allUserProjectsForModalTask
}
sx
=
{{
width
:
'90%'
}}
/
>
<
/Grid
>
<
/Grid
>
<
Grid
item
xs
=
{
2
}
>
<
Grid
item
xs
=
{
2
}
>
<
TextField
sx
=
{{
width
:
'90%'
}}
/
>
<
CustomSelect
value
=
{
newTask
.
executor
}
name
=
{
'executor'
}
variant
=
{
'outlined'
}
onChange
=
{
onChangeNewTaskHandler
}
id
=
{
'executor'
}
items
=
{
workers
}
sx
=
{{
width
:
'90%'
}}
/
>
<
/Grid
>
<
/Grid
>
<
Grid
item
xs
=
{
3
}
>
<
Grid
item
xs
=
{
3
}
>
<
TextField
sx
=
{{
width
:
'90%'
}}
/
>
<
MaterialUIPickers
task
=
{
newTask
}
name
=
"dateTimeDeadLine"
onChange
=
{
onDateChange
}
/
>
<
/Grid
>
<
/Grid
>
<
Grid
item
xs
=
{
0.5
}
>
<
Grid
item
xs
=
{
0.5
}
>
X
<
IconButton
disabled
=
{
!
newTask
.
title
}
>
<
Save
/>
<
/IconButton
>
<
/Grid
>
<
/Grid
>
<
/Grid
>
<
/Grid
>
<
Grid
container
><
/Grid
>
<
Grid
container
><
/Grid
>
...
...
planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableContainer.js
View file @
e098bb78
import
{
Box
,
Table
,
TableCell
,
TableContainer
,
}
from
"@mui/material"
;
import
{
Table
,
TableContainer
,
}
from
"@mui/material"
;
import
{
memo
}
from
"react"
;
import
{
memo
}
from
"react"
;
import
NewTaskForm
from
"./NewTaskForm/NewTaskForm"
;
import
NewTaskForm
from
"./NewTaskForm/NewTaskForm"
;
import
UsersTasksTableBody
from
"./UsersTasksTableBody/UsersTasksTableBody"
;
import
UsersTasksTableBody
from
"./UsersTasksTableBody/UsersTasksTableBody"
;
import
UsersTasksTableHead
from
"./UsersTasksTableHead/UsersTasksTableHead"
;
import
UsersTasksTableHead
from
"./UsersTasksTableHead/UsersTasksTableHead"
;
function
UsersTasksTableContainer
({
order
,
orderBy
,
handleRequestSort
,
rows
,
page
,
rowsPerPage
,
addFormStatus
})
{
console
.
log
(
addFormStatus
)
function
UsersTasksTableContainer
({
order
,
orderBy
,
handleRequestSort
,
rows
,
page
,
rowsPerPage
,
addFormStatus
,
onChangeNewTaskHandler
,
newTask
,
allUserProjectsForModalTask
,
onDateChange
})
{
return
(
return
(
<
TableContainer
>
<
TableContainer
>
<
NewTaskForm
<
NewTaskForm
addFormStatus
=
{
addFormStatus
}
/
>
addFormStatus
=
{
addFormStatus
}
onChangeNewTaskHandler
=
{(
e
)
=>
{
onChangeNewTaskHandler
(
e
)}}
newTask
=
{
newTask
}
allUserProjectsForModalTask
=
{
allUserProjectsForModalTask
}
onDateChange
=
{
onDateChange
}
/
>
<
Table
<
Table
sx
=
{{
minWidth
:
750
}}
sx
=
{{
minWidth
:
750
}}
aria
-
labelledby
=
"tableTitle"
aria
-
labelledby
=
"tableTitle"
...
...
planner-front/src/containers/UsersTasks/UsersTasks.js
View file @
e098bb78
...
@@ -5,24 +5,59 @@ import UsersTasksTableContainer from '../../components/UsersTasksCompoments/User
...
@@ -5,24 +5,59 @@ import UsersTasksTableContainer from '../../components/UsersTasksCompoments/User
import
{
fetchAllTasksByMembership
}
from
'../../store/actions/tasksActions'
;
import
{
fetchAllTasksByMembership
}
from
'../../store/actions/tasksActions'
;
import
{
shallowEqual
,
useDispatch
,
useSelector
}
from
'react-redux'
;
import
{
shallowEqual
,
useDispatch
,
useSelector
}
from
'react-redux'
;
import
{
useEffect
,
useState
}
from
'react'
;
import
{
useEffect
,
useState
}
from
'react'
;
import
{
fetchAllUserProjects
}
from
'../../store/actions/projectsActions'
;
import
moment
from
'moment'
;
export
default
function
EnhancedTable
()
{
export
default
function
EnhancedTable
()
{
const
dispatch
=
useDispatch
();
const
dispatch
=
useDispatch
();
const
{
tasks
}
=
useSelector
((
state
)
=>
state
.
tasks
,
shallowEqual
);
const
{
tasks
}
=
useSelector
((
state
)
=>
state
.
tasks
);
const
projects
=
useSelector
((
state
)
=>
state
.
tasks
.
projects
);
const
{
allUserProjectsForModalTask
}
=
useSelector
(
state
=>
state
.
projects
,
shallowEqual
)
const
user
=
useSelector
((
state
)
=>
state
.
users
.
user
);
const
user
=
useSelector
((
state
)
=>
state
.
users
.
user
);
const
[
newTask
,
setNewTask
]
=
useState
({
priority
:
''
,
title
:
''
,
project
:
''
,
description
:
''
,
executor
:
''
,
dateTimeDeadLine
:
''
,
})
const
[
order
,
setOrder
]
=
useState
(
'asc'
);
const
[
order
,
setOrder
]
=
useState
(
'asc'
);
const
[
orderBy
,
setOrderBy
]
=
useState
(
'createdAt'
);
const
[
orderBy
,
setOrderBy
]
=
useState
(
'createdAt'
);
const
[
page
,
setPage
]
=
useState
(
0
);
const
[
page
,
setPage
]
=
useState
(
0
);
const
[
rowsPerPage
,
setRowsPerPage
]
=
useState
(
10
);
const
[
rowsPerPage
,
setRowsPerPage
]
=
useState
(
10
);
const
[
addFormStatus
,
setAddFormStatus
]
=
useState
(
false
);
const
[
addFormStatus
,
setAddFormStatus
]
=
useState
(
false
);
useEffect
(()
=>
{
useEffect
(()
=>
{
dispatch
(
fetchAllTasksByMembership
());
dispatch
(
fetchAllTasksByMembership
());
dispatch
(
fetchAllUserProjects
())
},
[
dispatch
]);
},
[
dispatch
]);
useEffect
(()
=>
{
dispatch
(
fetchAllUserProjects
())
},
[
dispatch
])
const
onChangeNewTaskHandler
=
(
e
)
=>
{
const
{
value
,
name
}
=
e
.
target
;
setNewTask
((
prevState
=>
{
return
{
...
prevState
,
[
name
]:
value
}
}));
};
const
onDateChange
=
(
value
,
property
)
=>
{
const
utcAvoidoffset
=
moment
(
value
).
utcOffset
(
0
,
true
).
format
()
setNewTask
((
prevState
=>
{
return
{
...
prevState
,
[
property
]:
utcAvoidoffset
}
}));
};
const
handleRequestSort
=
(
event
,
property
)
=>
{
const
handleRequestSort
=
(
event
,
property
)
=>
{
const
isAsc
=
orderBy
===
property
&&
order
===
'asc'
;
const
isAsc
=
orderBy
===
property
&&
order
===
'asc'
;
setOrder
(
isAsc
?
'desc'
:
'asc'
);
setOrder
(
isAsc
?
'desc'
:
'asc'
);
...
@@ -39,7 +74,7 @@ export default function EnhancedTable() {
...
@@ -39,7 +74,7 @@ export default function EnhancedTable() {
};
};
const
createTaskFromButtonHandler
=
()
=>
{
const
createTaskFromButtonHandler
=
()
=>
{
setAddFormStatus
((
prevState
)
=>
{
return
!
prevState
})
setAddFormStatus
((
prevState
)
=>
{
return
!
prevState
})
}
}
return
(
return
(
...
@@ -56,6 +91,10 @@ export default function EnhancedTable() {
...
@@ -56,6 +91,10 @@ export default function EnhancedTable() {
page
=
{
page
}
page
=
{
page
}
rowsPerPage
=
{
rowsPerPage
}
rowsPerPage
=
{
rowsPerPage
}
addFormStatus
=
{
addFormStatus
}
addFormStatus
=
{
addFormStatus
}
onChangeNewTaskHandler
=
{
onChangeNewTaskHandler
}
newTask
=
{
newTask
}
allUserProjectsForModalTask
=
{
allUserProjectsForModalTask
}
onDateChange
=
{
onDateChange
}
/
>
/
>
<
UsersTasksTablePagination
<
UsersTasksTablePagination
count
=
{
tasks
.
length
}
count
=
{
tasks
.
length
}
...
...
planner-front/src/containers/WeekCalendar/WeekCalendar.js
View file @
e098bb78
...
@@ -87,7 +87,7 @@ function WeekCalendar() {
...
@@ -87,7 +87,7 @@ function WeekCalendar() {
},
[])
},
[])
const
onChangeProjectHandler
=
useCallback
((
e
,
value
)
=>
{
const
onChangeProjectHandler
=
useCallback
((
e
,
value
)
=>
{
setWorkerInfo
((
prevState
)
=>
{
return
{
...
prevState
,
project
:
value
}
});
setWorkerInfo
((
prevState
)
=>
{
return
{
...
prevState
,
project
:
value
.
id
}
});
},
[]);
},
[]);
const
onChangeWorkerHandler
=
useCallback
((
e
,
value
)
=>
{
const
onChangeWorkerHandler
=
useCallback
((
e
,
value
)
=>
{
...
...
planner-front/src/store/reducers/projectsReducer.js
View file @
e098bb78
...
@@ -33,7 +33,7 @@ const projectsReducer = (state = initialState, action) => {
...
@@ -33,7 +33,7 @@ const projectsReducer = (state = initialState, action) => {
return
{
...
state
,
loading
:
false
,
error
:
action
.
error
};
return
{
...
state
,
loading
:
false
,
error
:
action
.
error
};
case
FETCH_ALL_USER_PROJECTS_SUCCESS
:
case
FETCH_ALL_USER_PROJECTS_SUCCESS
:
const
newArr
=
action
.
projects
.
map
((
project
)
=>
{
const
newArr
=
action
.
projects
.
map
((
project
)
=>
{
return
{
value
:
project
.
id
,
text
:
project
.
title
}
return
{
value
:
project
,
text
:
project
.
title
}
})
})
return
{
...
state
,
loading
:
false
,
allUserProjects
:
action
.
projects
,
allUserProjectsForModalTask
:
newArr
}
return
{
...
state
,
loading
:
false
,
allUserProjects
:
action
.
projects
,
allUserProjectsForModalTask
:
newArr
}
case
CHANGE_MEMBER_ROLE_SUCCESS
:
case
CHANGE_MEMBER_ROLE_SUCCESS
:
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment