Skip to content

P
planner-team-one
Commit b6d42153 authored by Ermolaev Timur's avatar Ermolaev Timur
Browse files
Options

#149 немного починил сортировки и сделал более стабильное отображение таблицы

parent 4b9c6870
Show whitespace changes
Inline Side-by-side
Showing with 213 additions and 151 deletions
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarWeekTask/CalendarWeekTask.js
View file @ b6d42153
......@@ -101,7 +101,7 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
const returnTask = useMemo(() => {
if (copyModeTask?.id === task?.mainTaskId) {
return (<>
<span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
<span style={{ maxWidth: '80%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
{task.title}
</span>
<DeleteIcon
......@@ -121,7 +121,7 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
</>)
} else {
return (<>
<span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
<span style={{ maxWidth: '80%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
{task.title}
</span>
<CopyIcon
......
planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableBody/UsersTasksTableBody.js
View file @ b6d42153
import { TableBody, TableCell, TableRow} from "@mui/material";
import { Divider, TableBody, TableCell, TableRow, Tooltip } from "@mui/material";
import moment from "moment";
import { memo } from "react";
import DeleteButton from "../../../UI/DeleteButton/DeleteButton";
import { getComparator, stableSort } from "./helpers";
import { Done, Edit } from "@mui/icons-material";
function UsersTasksTableBody({rows, page, rowsPerPage, order, orderBy}) {
function UsersTasksTableBody({ rows, page, rowsPerPage, order, orderBy }) {
return (
<TableBody>
......@@ -12,24 +15,29 @@ function UsersTasksTableBody({rows, page, rowsPerPage, order, orderBy}) {
return (
<TableRow
hover
tabIndex={-1}
key={row.name}
key={row.id}
>
<TableCell
component="th"
scope="row"
padding="none"
>
{row.name}
<TableCell sx={{ width: '4%' }}>{row.priority ? row.priority : null}</TableCell>
<TableCell sx={{ width: '10%' }}>{moment(row.createdAt).format('DD.MM.YYYY')}</TableCell>
<Tooltip title={row.description}>
<TableCell sx={{ width: '25%', overflow: 'hidden', overflow: 'hidden', textOverflow: 'ellipsis'}}>
{row.title}
</TableCell>
</Tooltip>
<TableCell sx={{ width: '10%' }}>{row.projectTitle}</TableCell>
<TableCell sx={{ width: '8%' }}>{row.executorName}</TableCell>
<TableCell sx={{ width: '8%' }}>{row.authorName}</TableCell>
<TableCell sx={{ width: '15%' }}>{row.dateTimeTasks.length ? row.dateTimeTasks[0].dateTimeStart : null}</TableCell>
<TableCell sx={{ width: '10%' }}>{row.dateTimeDeadLine ? moment(row.dateTimeDeadLine).utcOffset('+000').format('DD.MM.YYYY HH:MM') : null}</TableCell>
<TableCell sx={{ width: '7%' }}>{row.accomplish}</TableCell>
<TableCell size='medium' sx={{ width: '5%', position: 'relative' }}>
<Edit sx={{position: 'absolute', left: -10}}/>
<DeleteButton/>
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
);
})}
</TableBody>
</TableBody >
);
}
......
planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableBody/helpers.js
View file @ b6d42153
function descendingComparator(a, b, orderBy) {
function descendingComparator(a, b, orderBy, order) {
if (!b[orderBy]) {
if (order ==='asc') {
return 1
}
return -1
}
if (b[orderBy] < a[orderBy]) {
return -1;
}
......@@ -9,9 +16,10 @@ function descendingComparator(a, b, orderBy) {
}
export function getComparator(order, orderBy) {
console.log(order)
return order === 'desc'
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
: (a, b) => -descendingComparator(a, b, orderBy, order);
}
export function stableSort(array, comparator) {
......
planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableHead/UsersTasksTableHead.js
View file @ b6d42153
......@@ -4,34 +4,84 @@ import { memo } from "react";
const headCells = [
{
id: 'name',
numeric: false,
disablePadding: false,
label: 'Dessert (100g serving)',
id: "priority",
label: "Приоритет",
canSort: true,
style: {
width: '4%'
}
},
{
id: 'calories',
numeric: true,
disablePadding: false,
label: 'Calories',
id: "createdAt",
label: "Дата создания",
canSort: true,
style: {
width: '10%'
}
},
{
id: 'fat',
numeric: true,
disablePadding: false,
label: 'Fat (g)',
id: "title",
label: "Заголовок",
canSort: true,
style: {
width: '25%'
}
},
{
id: 'carbs',
numeric: true,
disablePadding: false,
label: 'Carbs (g)',
id: "projectTitle",
label: "Проект",
canSort: true,
style: {
width: '10%'
}
},
{
id: 'protein',
numeric: true,
disablePadding: false,
label: 'Protein (g)',
id: "executorName",
label: "Исполнитель",
canSort: true,
style: {
width: '8%'
}
},
{
id: "authorName",
label: "Автор",
canSort: true,
style: {
width: '8%'
}
},
{
id: "dateTimeStart",
label: "Дата и время выполнения",
canSort: false,
style: {
width: '15%'
}
},
{
id: "dateTimeDeadLine",
label: "Дедлайн",
canSort: true,
style: {
width: '10%'
}
},
{
id: "accomplish",
label: "Статус",
canSort: true,
style: {
width: '7%'
}
},
{
id: "buttons",
label: "",
canSort: false,
style: {
width: '5%'
}
},
];
......@@ -46,11 +96,10 @@ function UsersTasksTableHead({ order, orderBy, handleRequestSort }) {
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={headCell.numeric ? 'right' : 'left'}
padding={headCell.disablePadding ? 'none' : 'normal'}
sortDirection={orderBy === headCell.id ? order : false}
sx={headCell.style}
>
<TableSortLabel
{headCell.canSort ? <TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
......@@ -61,7 +110,8 @@ function UsersTasksTableHead({ order, orderBy, handleRequestSort }) {
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
</TableSortLabel> : headCell.label}
</TableCell>
))}
</TableRow>
......
planner-front/src/components/UsersTasksCompoments/UsersTasksTableToolbar/UsersTasksTableToolbar.js
View file @ b6d42153
import { Toolbar, Typography } from "@mui/material";
import { AppBar, Toolbar, Typography } from "@mui/material";
import { memo } from "react";
function UsersTasksTableToolbar() {
return (
<Toolbar>
<AppBar position="static" sx={{padding: 3}}>
<Typography
sx={{ flex: '1 1 100%' }}
variant="h6"
id="tableTitle"
component="div"
>
Nutrition
Задачи сотрудников
</Typography>
</Toolbar>
</AppBar>
);
}
......
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ b6d42153
......@@ -199,6 +199,7 @@ function MonthCalendar() {
executor: userId,
author: user.id,
calendar: true,
priority: currentTask.priority === '' ? null : currentTask.priority
}
delete newTask.infoForCell
delete newTask.id
......
planner-front/src/containers/UsersTasks/UsersTasks.js
View file @ b6d42153
import * as React from 'react';
import Paper from '@mui/material/Paper';
import UsersTasksTableToolbar from '../../components/UsersTasksCompoments/UsersTasksTableToolbar/UsersTasksTableToolbar';
import UsersTasksTablePagination from '../../components/UsersTasksCompoments/UsersTasksTablePagination/UsersTasksTablePagination';
import UsersTasksTableContainer from '../../components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableContainer';
import { fetchAllTasksByMembership } from '../../store/actions/tasksActions';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useEffect, useState } from 'react';
function createData(name, calories, fat, carbs, protein) {
return {
name,
calories,
fat,
carbs,
protein,
};
}
export default function EnhancedTable() {
const dispatch = useDispatch();
const rows = [
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Donut', 452, 25.0, 51, 4.9),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Gingerbread', 356, 16.0, 49, 3.9),
createData('Honeycomb', 408, 3.2, 87, 6.5),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Jelly Bean', 375, 0.0, 94, 0.0),
createData('KitKat', 518, 26.0, 65, 7.0),
createData('Lollipop', 392, 0.2, 98, 0.0),
createData('Marshmallow', 318, 0, 81, 2.0),
createData('Nougat', 360, 19.0, 9, 37.0),
createData('Oreo', 437, 18.0, 63, 4.0),
];
const {tasks} = useSelector((state) => state.tasks, shallowEqual);
const projects = useSelector((state) => state.tasks.projects);
const user = useSelector((state) => state.users.user);
console.log(tasks)
const [order, setOrder] = useState('asc');
const [orderBy, setOrderBy] =useState('createdAt');
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
export default function EnhancedTable() {
const [order, setOrder] = React.useState('asc');
const [orderBy, setOrderBy] = React.useState('calories');
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
useEffect(() => {
dispatch(fetchAllTasksByMembership());
}, [dispatch]);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc';
......@@ -58,12 +44,12 @@ export default function EnhancedTable() {
order={order}
orderBy={orderBy}
handleRequestSort={handleRequestSort}
rows={rows}
rows={tasks}
page={page}
rowsPerPage={rowsPerPage}
/>
<UsersTasksTablePagination
count={rows.length}
count={tasks.length}
rowsPerPage={rowsPerPage}
page={page}
handleChangePage={handleChangePage}
......
planner-front/src/containers/WeekCalendar/WeekCalendar.js
View file @ b6d42153
......@@ -178,6 +178,7 @@ function WeekCalendar() {
executor: userId,
author: user.id,
calendar: true,
priority: currentTask.priority === '' ? null : currentTask.priority
}
delete newTask.infoForCell
delete newTask.id
......
planner-front/src/store/reducers/tasksReducer.js
View file @ b6d42153
......@@ -35,9 +35,9 @@ const initialState = {
};
const tasksReduсer = (state = initialState, action) => {
switch(action.type) {
switch (action.type) {
case FETCH_CALENDAR_TASKS_REQUEST:
return {...state, loading: true};
return { ...state, loading: true };
case FETCH_CALENDAR_TASKS_SUCCESS:
const newTasksWithoutInfoForCell = []
const newTasksWithInfoForCell = []
......@@ -56,7 +56,7 @@ const tasksReduсer = (state = initialState, action) => {
})
}
}
newTasksWithoutInfoForCell.forEach((task)=>{
newTasksWithoutInfoForCell.forEach((task) => {
if (task.dateTimeStart && task.dateTimeDue) {
if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (24 * 3600000) &&
new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() > 0) {
......@@ -70,7 +70,8 @@ const tasksReduсer = (state = initialState, action) => {
const timeEndHour = parseInt(timeEnd.split(':')[0])
const timeStartMinute = parseInt(timeStart.split(':')[1])
const timeEndMinute = parseInt(timeEnd.split(':')[1])
const newObj = {...task,
const newObj = {
...task,
infoForCell: {
startDay: dayStart,
startHour: timeStartHour,
......@@ -85,50 +86,57 @@ const tasksReduсer = (state = initialState, action) => {
}
}
})
return {...state, loading: false, calendarTasks: newTasksWithInfoForCell};
return { ...state, loading: false, calendarTasks: newTasksWithInfoForCell };
case FETCH_ALL_TASKS_SUCCESS:
return {...state, loading: false, tasks: action.tasks, projects:action.projects};
return { ...state, loading: false, tasks: action.tasks , projects: action.projects };
case FETCH_ALL_TASKS_BY_MEMBERSHIP_SUCCESS:
return {...state, loading: false, tasks: action.tasks, projects:action.projects};
console.log(action.tasks)
const newArr = action.tasks.map((task)=>{return {
...task,
authorName: task.author.displayName,
projectTitle: task.project.title,
executorName: task?.executor?.displayName || null,
}})
return { ...state, loading: false, tasks: newArr, projects: action.projects };
case FETCH_CALENDAR_TASKS_FAILURE:
return {...state, loading: false, error: action.error};
return { ...state, loading: false, error: action.error };
case ADD_NEW_TASK_SUCCESS:
return {...state, loading: false};
return { ...state, loading: false };
case ADD_NEW_TASK_REQUEST:
return {...state, loading: true};
return { ...state, loading: true };
case ADD_NEW_TASK_FAILURE:
return {...state, loading: false, error: action.error};
return { ...state, loading: false, error: action.error };
case FETCH_TASKS_BY_PROJECT_SUCCESS:
return {...state, loading: false, tasks: action.tasks};
return { ...state, loading: false, tasks: action.tasks };
case FETCH_TASKS_BY_PROJECT_REQUEST:
return {...state, loading: true};
return { ...state, loading: true };
case FETCH_TASKS_BY_PROJECT_FAILURE:
return {...state, loading: false, error: action.error};
return { ...state, loading: false, error: action.error };
case EDIT_TASK_SUCCESS:
return {...state, loading: false};
return { ...state, loading: false };
case EDIT_TASK_REQUEST:
return {...state, loading: true};
return { ...state, loading: true };
case EDIT_TASK_FAILURE:
return {...state, loading: false, error: action.error};
return { ...state, loading: false, error: action.error };
case DELETE_TASK_SUCCESS:
return {...state, loading: false};
return { ...state, loading: false };
case DELETE_TASK_REQUEST:
return {...state, loading: true};
return { ...state, loading: true };
case DELETE_TASK_FAILURE:
return {...state, loading: false, error: action.error};
return { ...state, loading: false, error: action.error };
case DELETE_DATETIMETASK_SUCCESS:
return {...state, loading: false};
return { ...state, loading: false };
case DELETE_DATETIMETASK_REQUEST:
return {...state, loading: true};
return { ...state, loading: true };
case DELETE_DATETIMETASK_FAILURE:
return {...state, loading: false, error: action.error};
return { ...state, loading: false, error: action.error };
case ACTIVATE_CREATE_COPY_TASKS_MODE:
return {...state, copyMode: {working: true, task: action.task}}
return { ...state, copyMode: { working: true, task: action.task } }
case DEACTIVATE_CREATE_COPY_TASKS_MODE:
return {...state, copyMode: {working: false, task: null}}
return { ...state, copyMode: { working: false, task: null } }
default:
return state;
}
}
};
export default tasksReduсer;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment