Skip to content

P
planner-team-one
Commit 011bad42 authored by Евгений Положенцев's avatar Евгений Положенцев
Browse files
Options

#88 refactor tableRowTask & added collapse row inside

parent 26bce068
Hide whitespace changes
Inline Side-by-side
Showing with 361 additions and 405 deletions
planner-front/src/components/MyTasksCompoments/CollapseRow/CollapseRow.js deleted 100644 → 0
View file @ 26bce068
import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
// const CollapseRow({})
// function createData(name, calories, fat, carbs, protein, price) {
// return {
// name,
// calories,
// fat,
// carbs,
// protein,
// price,
// history: [
// {
// date: '2020-01-05',
// customerId: '11091700',
// amount: 3,
// },
// {
// date: '2020-01-02',
// customerId: 'Anonymous',
// amount: 1,
// },
// ],
// };
// }
// function Row(props) {
// const { row } = props;
// const [open, setOpen] = React.useState(false);
// return (
// <React.Fragment>
// <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
// <TableCell>
// <IconButton
// aria-label="expand row"
// size="small"
// onClick={() => setOpen(!open)}
// >
// {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
// </IconButton>
// </TableCell>
// <TableCell component="th" scope="row">
// {row.name}
// </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>
// <TableRow>
// <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
// <Collapse in={open} timeout="auto" unmountOnExit>
// <Box sx={{ margin: 1 }}>
// <Typography variant="h6" gutterBottom component="div">
// History
// </Typography>
// <Table size="small" aria-label="purchases">
// <TableHead>
// <TableRow>
// <TableCell>Date</TableCell>
// <TableCell>Customer</TableCell>
// <TableCell align="right">Amount</TableCell>
// <TableCell align="right">Total price ($)</TableCell>
// </TableRow>
// </TableHead>
// <TableBody>
// {row.history.map((historyRow) => (
// <TableRow key={historyRow.date}>
// <TableCell component="th" scope="row">
// {historyRow.date}
// </TableCell>
// <TableCell>{historyRow.customerId}</TableCell>
// <TableCell align="right">{historyRow.amount}</TableCell>
// <TableCell align="right">
// {Math.round(historyRow.amount * row.price * 100) / 100}
// </TableCell>
// </TableRow>
// ))}
// </TableBody>
// </Table>
// </Box>
// </Collapse>
// </TableCell>
// </TableRow>
// </React.Fragment>
// );
// }
// Row.propTypes = {
// row: PropTypes.shape({
// calories: PropTypes.number.isRequired,
// carbs: PropTypes.number.isRequired,
// fat: PropTypes.number.isRequired,
// history: PropTypes.arrayOf(
// PropTypes.shape({
// amount: PropTypes.number.isRequired,
// customerId: PropTypes.string.isRequired,
// date: PropTypes.string.isRequired,
// }),
// ).isRequired,
// name: PropTypes.string.isRequired,
// price: PropTypes.number.isRequired,
// protein: PropTypes.number.isRequired,
// }).isRequired,
// };
// const rows = [
// createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
// createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
// createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
// createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
// createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
// ];
// export default function CollapsibleTable() {
// return (
// <TableContainer component={Paper}>
// <Table aria-label="collapsible table">
// <TableHead>
// <TableRow>
// <TableCell />
// <TableCell>Dessert (100g serving)</TableCell>
// <TableCell align="right">Calories</TableCell>
// <TableCell align="right">Fat&nbsp;(g)</TableCell>
// <TableCell align="right">Carbs&nbsp;(g)</TableCell>
// <TableCell align="right">Protein&nbsp;(g)</TableCell>
// </TableRow>
// </TableHead>
// <TableBody>
// {rows.map((row) => (
// <Row key={row.name} row={row} />
// ))}
// </TableBody>
// </Table>
// </TableContainer>
// );
// }
\ No newline at end of file
planner-front/src/components/MyTasksCompoments/TableRowTask/TableRowTask.js 0 → 100644
View file @ 011bad42
import * as React from "react";
import {
TableCell,
TableRow,
IconButton,
Tooltip,
Collapse,
Box,
Table,
TableBody,
TableHead,
Typography
} from "@mui/material";
import { Done, Edit } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete";
import moment from "moment";
import CustomTableCell from "../CustomTableCell";
import MaterialUIPickers from "../DateTimePicker/DateTimePicker";
import BasicSelect from "../../UI/Select/Select";
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
const TableRowTask= ({
user,
task,
deleteHandle,
handleEditTask,
onChange,
onModalOpen,
onProjectChange,
uniqueProjects,
onAuthorChange,
onDateChange,
onToggleEditMode,
onToggleEditModeDone,
})=>{
const [open, setOpen] = React.useState(false);
const dateTimeTransform =(dateIso)=>{
const event = new Date(dateIso);
return event.toLocaleString('ru-KZ', { timeZone: 'UTC' })
}
const dateTransform =(dateIso) => {
let date = new Date(dateIso);
return date.getDate()+'-' + (date.getMonth()+1) + '-'+ date.getFullYear().toString().slice(-2);
}
const timeTransform = (dateIso)=>{
return moment.utc(dateIso).format("HH:"+"00");
}
return (
<>
<TableRow hover key={task.id}>
<TableCell
component="th"
scope="row"
padding="none"
></TableCell>
{task.isEditMode && task.author.id===user.id ? (
<TableCell>
<BasicSelect
items={[
{ value: "A", title: "A" },
{ value: "B", title: "B" },
{ value: "C", title: "C" },
]}
task={task}
value={task.priority}
onChange={onChange}
name="priority"
user={user}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "priority",
value: task.priority,
user:user
}}
/>
)}
<CustomTableCell
{...{
task,
name: "createdAt",
value: moment(task.createdAt)
.utc()
.format("DD-MM-YY"),
user:user
}}
/>
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onChange,
onModalOpen,
user:user
}}
/>
{task.isEditMode && task.author.id===user.id ? (
<TableCell>
<BasicSelect
items={uniqueProjects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task}
onChange={onProjectChange}
name="project"
value={task.project?.id}
user={user}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "projectId",
value: task.project?.title,
user:user
}}
/>
)}
<CustomTableCell
{...{
task,
name: "author",
value: task.author.displayName,
onChange: onAuthorChange,
user:user
}}
/>
{task.isEditMode && task.author.id===user.id ? (
<TableCell>
{/* <MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={onDateChange}
user={user}
/> */}
<TableCell>
<Tooltip title="Перейти в календарь">
<IconButton
onClick={(id) => { deleteHandle(task.id);}}
>
<CalendarMonthIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableCell>
) : (
task.dateTimeTasks.length>1 ?
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
:
<CustomTableCell
{...{
task,
name: "dateTimeStart",
value: moment(task.dateTimeTasks[0]?.dateTimeStart)
.utc()
.format("DD-MM-YY "),
value2:moment(task.dateTimeTasks[0]?.dateTimeStart)
.utc()
.format("kk:mm")+" - "+
moment(task.dateTimeTasks[0]?.dateTimeDue)
.utc()
.format("kk:mm"),
user:user
}}>
</CustomTableCell>
)}
{/* <TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={onDateChange}
user={user}
/>
</TableCell> */}
{task.isEditMode && task.author.id===user.id ? (
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
onChange={onDateChange}
user={user}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "dateTimeDeadLine",
value: moment(task.dateTimeDeadLine
)
.utc()
.format("DD-MM-YY kk:mm"),
user:user
}}
/>
)}
{task.isEditMode ? (
<TableCell>
<BasicSelect
items={[
{ value: "opened", title: "opened" },
{ value: "done", title: "done" },
{ value: "failed", title: "failed" },
]}
task={task}
onChange={onChange}
name="accomplish"
value={task.accomplish}
user={user}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "accomplish",
value: task.accomplish,
user:user
}}
/>
)}
<TableCell>
<Tooltip title="Редактировать">
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => {
onToggleEditModeDone(task.id);
handleEditTask(task);
}}
>
<Done />
</IconButton>
) : (
<IconButton
aria-label="edit"
onClick={() => onToggleEditMode(task.id)}
>
<Edit />
</IconButton>
)}
</Tooltip>
</TableCell>
{task.author.id===user.id ?
(<TableCell>
<Tooltip title="Удалить">
<IconButton
onClick={(id) => {
deleteHandle(task.id);
}}
>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>):null}
</TableRow>
{task.dateTimeTasks.length>1?
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={11}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
Расписание
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell colSpan={10} >Дата создания события</TableCell>
<TableCell align="right">дд-мм-гг</TableCell>
<TableCell align="right">Начало</TableCell>
<TableCell align="center" colSpan={1}>Окончание</TableCell>
</TableRow>
</TableHead>
<TableBody>
{task.dateTimeTasks.map((dateTimeTask, index) => (
<TableRow key={index}>
<TableCell component="th" scope="row" colSpan={10}>
{dateTimeTransform(dateTimeTask.createdAt)}
</TableCell>
<TableCell align="right">
{dateTransform(dateTimeTask.dateTimeStart)}
</TableCell>
<TableCell align="right">
{timeTransform(dateTimeTask.dateTimeStart)}
</TableCell>
<TableCell align="center" colSpan={1}>
{timeTransform(dateTimeTask.dateTimeDue)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
:<></>}
</>
)
}
export default TableRowTask;
planner-front/src/containers/MyTasks/MyTasks.js
View file @ 011bad42
......@@ -3,29 +3,19 @@ import {
Box,
Table,
TableBody,
TableCell,
TableContainer,
TablePagination,
TableRow,
Paper,
IconButton,
Tooltip,
} from "@mui/material";
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Done, Edit } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader";
import moment from "moment";
import MyTaskToolBar from "../../components/MyTasksCompoments/MyTaskToolBar";
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks, deleteTask,editTask} from "../../store/actions/tasksActions";
import NewTaskForm from "../../components/MyTasksCompoments/NewTaskForm";
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import TableRowTask from "../../components/MyTasksCompoments/TableRowTask/TableRowTask";
export default function EnhancedTable() {
......@@ -54,20 +44,21 @@ export default function EnhancedTable() {
if (tasks && tasks?.length > 0) {
setRecievedTasks(tasks);
}
}, [tasks===undefined,tasks?.length]);
}, [tasks?.length]);
useEffect(() => {
dispatch(fetchAllTasks());
}, [addTaskForm, setAddTaskForm]);
const handleRequestSort = (event, property) => {
const handleRequestSort = ( property) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
setOrderBy(property);
};
const handleChangePage = (event, newPage) => {
const handleChangePage = ( newPage) => {
setPage(newPage);
};
......@@ -222,7 +213,7 @@ useEffect(() => {
return results;
}, []);
console.log(tasks)
console.log('tasks', tasks)
if (
tasks &&
......@@ -264,228 +255,22 @@ console.log(tasks)
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((task, index) => {
return (
<TableRow hover key={task.id}>
<TableCell
component="th"
scope="row"
padding="none"
></TableCell>
{task.isEditMode && task.author.id===user.id ? (
<TableCell>
<BasicSelect
items={[
{ value: "A", title: "A" },
{ value: "B", title: "B" },
{ value: "C", title: "C" },
]}
task={task}
value={task.priority}
onChange={onChange}
name="priority"
user={user}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "priority",
value: task.priority,
user:user
}}
/>
)}
<CustomTableCell
{...{
task,
name: "createdAt",
value: moment(task.createdAt)
.utc()
.format("DD-MM-YY"),
user:user
}}
/>
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onChange,
onModalOpen,
user:user
}}
/>
{task.isEditMode && task.author.id===user.id ? (
<TableCell>
<BasicSelect
items={uniqueProjects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task}
onChange={onProjectChange}
name="project"
value={task.project?.id}
user={user}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "projectId",
value: task.project?.title,
user:user
}}
/>
)}
<CustomTableCell
{...{
task,
name: "author",
value: task.author.displayName,
onChange: onAuthorChange,
user:user
}}
/>
{task.isEditMode && task.author.id===user.id ? (
<TableCell>
{/* <MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={onDateChange}
user={user}
/> */}
<TableCell>
<Tooltip title="Перейти в календарь">
<IconButton
onClick={(id) => { deleteHandle(task.id);}}
>
<CalendarMonthIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableCell>
) : (<>
<CustomTableCell
{...{
task,
name: "dateTimeStart",
value: moment(task.dateTimeTasks[0]?.dateTimeStart)
.utc()
.format("DD-MM-YY "),
value2:moment(task.dateTimeTasks[0]?.dateTimeStart)
.utc()
.format("kk:mm")+"-"+
moment(task.dateTimeTasks[0]?.dateTimeDue)
.utc()
.format("kk:mm"),
user:user
}}>
</CustomTableCell>
</>
)}
{/* <TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={onDateChange}
user={user}
/>
</TableCell> */}
{task.isEditMode && task.author.id===user.id ? (
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
onChange={onDateChange}
user={user}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "dateTimeDeadLine",
value: moment(task.dateTimeDeadLine
)
.utc()
.format("DD-MM-YY kk:mm"),
user:user
}}
/>
)}
{task.isEditMode ? (
<TableCell>
<BasicSelect
items={[
{ value: "opened", title: "opened" },
{ value: "done", title: "done" },
{ value: "failed", title: "failed" },
]}
task={task}
onChange={onChange}
name="accomplish"
value={task.accomplish}
user={user}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "accomplish",
value: task.accomplish,
user:user
}}
/>
)}
<TableCell>
<Tooltip title="Редактировать">
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => {
onToggleEditModeDone(task.id);
handleEditTask(task);
}}
>
<Done />
</IconButton>
) : (
<IconButton
aria-label="edit"
onClick={() => onToggleEditMode(task.id)}
>
<Edit />
</IconButton>
)}
</Tooltip>
</TableCell>
{task.author.id===user.id ?
(<TableCell>
<Tooltip title="Удалить">
<IconButton
onClick={(id) => {
deleteHandle(task.id);
}}
>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>):null}
</TableRow>
<TableRowTask
key ={index}
user={user}
task={task}
deleteHandle={deleteHandle}
handleEditTask ={handleEditTask}
onChange={onChange}
onModalOpen={onModalOpen}
onProjectChange={onProjectChange}
uniqueProjects={uniqueProjects}
onAuthorChange={onAuthorChange}
onDateChange={onDateChange}
onToggleEditMode={onToggleEditMode}
onToggleEditModeDone={onToggleEditModeDone}
/>
);
})}
</TableBody>
......
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