Skip to content

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

Merge branch 'development' of… 

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-54-feature/resize_tasks
parents da5b1334 6a213935
Hide whitespace changes
Inline Side-by-side
Showing with 563 additions and 397 deletions
planner-front/src/App.js
View file @ 29c816db
......@@ -21,7 +21,7 @@ const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const App = () => {
const user = useSelector(state => state.users?.user);
console.log(user)
return (
<BrowserRouter>
<Routes>
......
planner-front/src/components/Menus/AdminMenu/AdminMenu.js
View file @ 29c816db
......@@ -10,7 +10,7 @@ const AdminMenu = () => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const user = useSelector(state => state.users.user)
console.log(user)
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
......
planner-front/src/components/MyTasksCompoments/CustomTableCell.js
View file @ 29c816db
......@@ -2,7 +2,13 @@ import * as React from "react";
import TableCell from "@mui/material/TableCell";
import Input from "@mui/material/Input";
const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
const CustomTableCell = ({task,
name,
value,
onChange,
onModalOpen,
placeholder,
}) => {
const styles = { width: "auto", height: "10px"};
if (task) {
......@@ -15,6 +21,7 @@ const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
>
{task.isEditMode && onChange ? (
<Input
placeholder={placeholder}
value={value}
name={name}
onChange={(e) => onChange(e, task)}
......
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePicker.js
View file @ 29c816db
......@@ -4,6 +4,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
export default function MaterialUIPickers(props) {
return (
<LocalizationProvider
......@@ -11,6 +12,7 @@ export default function MaterialUIPickers(props) {
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
>
<DateTimePicker
inputFormat="DD-MM-YYYY hh:mm A"
disabled={props.task.readOnly}
renderInput={(params) => (
<TextField
......
planner-front/src/components/MyTasksCompoments/MyTaskToolBar.js
View file @ 29c816db
......@@ -5,22 +5,26 @@ import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect';
import Add from "@mui/icons-material/Add";
import Close from "@mui/icons-material/Close";
export default function MyTaskToolBar(props) {
export default function MyTaskToolBar({projects,onClose,projectName,setProjectName,formStatus,onClick}) {
let projectsFilter =
<></>
if (props.projects) {
if (projects) {
projectsFilter=
<MultipleSelect
projects={props.projects}
onClose={props.onClose}
projectName={props.projectName}
setProjectName={props.setProjectName}
projects={projects}
onClose={onClose}
projectName={projectName}
setProjectName={setProjectName}
/>
}
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
......@@ -28,9 +32,31 @@ export default function MyTaskToolBar(props) {
Мои задачи
</Typography>
{projectsFilter}
<Button color="inherit" onClick={()=>(props.onClick)} >Добавить задачу</Button>
<Button
color={formStatus === true ? "info" : "inherit"}
style={{
backgroundColor: formStatus === true ? "white" : "inherit",
}}
onClick={onClick}
>
{formStatus === true ? (
<>
<Close />
<span style={{ lineHeight: "16px" }}>Скрыть задачу</span>
</>
) : (
<>
<Add />
<span style={{ lineHeight: "16px" }}>Добавить задачу</span>
</>
)}
</Button>
</Toolbar>
</AppBar>
</Box>
);
}
planner-front/src/components/MyTasksCompoments/NewTaskForm.js
View file @ 29c816db
import * as React from "react";
import {
Box,
Table,
TableBody,
TableCell,
TableContainer,
TableRow,
Paper,
TableHead,
IconButton,
Tooltip,
Input,
Typography,
Divider,
} from "@mui/material";
import { useState, useEffect } from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Done, Edit, NavigateNextOutlined } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import { AddBox } from "@mui/icons-material";
import moment from "moment";
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
export default function NewTaskForm (props) {
// const onToggleEditModeDone = (id) => {
// const newTasks = recievedTasks.map((task) => {
// if (task.id === id) {
// return {
// ...task,
// isEditMode: false,
// readOnly: true,
// };
// }
// return task;
// });
// setRecievedTasks(newTasks);
// };
const task={
id:0,
title: "",
description: "",
createdAt: "",
dateTimeStart: null,
dateTimeDue: null,
accomplish: "",
priority: "",
author: {
name: "",
},
executors: [
{ name: "" }
],
isEditMode:false,
readOnly: true
};
import CustomTableCell from "./CustomTableCell";
import MaterialUIPickers from "./DateTimePicker/DateTimePicker";
import BasicSelect from "../UI/Select/Select";
import { addTask } from "../../store/actions/tasksActions";
const onToggleEditMode = (id) => {
console.log(task)
return {
...task,
isEditMode: true,
readOnly: false,
};
};
console.log(task)
return (
<TableRow hover key={task.id}>
<TableCell
component="th"
scope="row"
padding="none"
></TableCell>
<CustomTableCell
{...{
task,
name: "priority",
value: task.priority,
onChange:props.onChange,
}}
/>
<CustomTableCell
{...{
task,
name: "createdAt",
value: task.createdAt,
}}
/>
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onChange:props.onChange,
onModalOpen:props.onModalOpen,
}}
/>
{task.isEditMode ? (
<BasicSelect
items={["project1", "project2", "project3"]}
task={task}
onChange={props.onChange}
/>
) : (
<CustomTableCell
{...{
task,
name: "project",
value: task.project?.title,
onChange: props.onChange,
}}
/>
)}
<CustomTableCell
{...{
task,
name: "author",
value: task.author.displayName,
onChange: props.onAuthorChange,
}}
/>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={props.onDateChange}
/>
</TableCell>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
onChange={props.onDateChange}
/>
</TableCell>
{task.isEditMode ? (
<BasicSelect
items={["opened", "done", "failed"]}
task={task}
onChange={props.onChange}
/>
) : (
<CustomTableCell
{...{
task,
name: "accomplish",
value: task.accomplish,
}}
/>
)}
<TableCell>
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => {props.onToggleEditModeDone(task.id); props.HandleEditTask(task) }}
>
<Done />
</IconButton>
) : (
<IconButton
aria-label="edit"
onClick={() => onToggleEditMode(task.id)}
>
<Edit />
</IconButton>
)}
</TableCell>
<TableCell>
<Tooltip title="Delete">
<IconButton
onClick={(id) => {
props.deleteHandle(task.id);
}}
>
<DeleteIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
);
export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
const dispatch = useDispatch();
const user = useSelector((state) => state.users.user);
const currentDateTime = new Date();
const dateTime = moment(currentDateTime).utc().format();
const [task, setTask] = useState({
id: 0,
title: "",
description: "",
createdAt: dateTime,
dateTimeStart: null,
dateTimeDue: null,
project: projects[0],
accomplish: "opened",
priority: "B",
authorDisplayName: user.displayName,
executors: [],
isEditMode: true,
});
const onChange = (e, task) => {
const value = e.target.value;
const name = e.target.name;
const newTask = { ...task, [name]: value };
setTask(newTask);
};
const onProjectChange = (e, task) => {
const value = e.target.value;
const project = projects.find((e) => e.id === value);
const newTask = { ...task };
newTask.project = project;
setTask(newTask);
};
const onDateChange = (id, value, property) => {
const newTask = {
...task,
[property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
};
setTask(newTask);
};
const handleAddTask = () => {
dispatch(addTask(task));
setAddTaskForm();
};
return (
<>
<Divider>
<Typography variant="overline">Добавить новую задачу</Typography>
</Divider>
<TableContainer
style={{
backgroundColor: "#E8E8E8",
display: "flex",
alignItems: "center",
marginBottom: "2em",
}}
>
<Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
<TableHead>
<TableRow>
{header.map((headCell) => (
<TableCell
key={headCell.id}
align="center"
padding={headCell.disablePadding ? "none" : "normal"}
>
{headCell.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
<TableRow hover key={task.id}>
<TableCell component="th" scope="row" padding="none"></TableCell>
<TableCell>
<BasicSelect
items={[
{ value: "A", title: "A" },
{ value: "B", title: "B" },
{ value: "C", title: "C" },
]}
task={task}
value={task.priority}
onChange={onChange}
name="priority"
/>
</TableCell>
<CustomTableCell
{...{
task,
name: "createdAt",
value: moment(task.createdAt).format("DD-MM-YYYY hh:mm A"),
}}
/>
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onChange: onChange,
placeholder: "Введите название задачи",
}}
/>
<CustomTableCell
{...{
task,
name: "description",
value: task.description,
onChange: onChange,
placeholder: "Введите описание задачи",
}}
/>
<TableCell>
<BasicSelect
items={projects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task}
onChange={onProjectChange}
name="project"
value={task.project?.id}
/>
</TableCell>
<CustomTableCell
{...{
task,
name: "author",
value: user.displayName,
}}
/>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={onDateChange}
/>
</TableCell>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
onChange={onDateChange}
/>
</TableCell>
<TableCell>
<BasicSelect
items={[
{ value: "opened", title: "opened" },
{ value: "done", title: "done" },
{ value: "failed", title: "failed" },
]}
task={task}
onChange={onChange}
name="accomplish"
value={task.accomplish}
/>
</TableCell>
<TableCell>
<Tooltip title="Добавить">
<IconButton size="large" onClick={handleAddTask}>
<AddBox fontSize="large" />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<Divider />
</>
);
}
export const header = [
{
id: "id",
numeric: true,
disablePadding: true,
label: "",
},
{
id: "priority",
numeric: false,
disablePadding: true,
label: "Приоритет",
},
{
id: "createdAt",
numeric: true,
disablePadding: false,
label: "Дата создания",
},
{
id: "title",
numeric: false,
disablePadding: false,
label: "Заголовок",
},
{
id: "description",
numeric: false,
disablePadding: false,
label: "Описание",
},
{
id: "projectName",
numeric: true,
disablePadding: false,
label: "Проект",
},
{
id: "authorDisplayName",
numeric: false,
disablePadding: false,
label: "Автор",
},
{
id: "dateTimeStart",
numeric: true,
disablePadding: false,
label: "Дата начала",
},
{
id: "dateTimeDue",
numeric: true,
disablePadding: false,
label: "Дата завершения",
},
{
id: "accomplish",
numeric: false,
disablePadding: false,
label: "Статус",
},
{
id: "add",
numeric: false,
disablePadding: false,
label: "",
},
];
planner-front/src/components/UI/MultipleSelect/MultipleSelect.js
View file @ 29c816db
......@@ -28,16 +28,15 @@ function getStyles(name, personName, theme) {
};
}
export default function MultipleSelect(props) {
export default function MultipleSelect({projects,projectName,onClose,setProjectName}) {
const theme = useTheme();
const handleChange = (event) => {
const {
target: { value },
} = event;
props.setProjectName(
setProjectName(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
......@@ -53,18 +52,18 @@ export default function MultipleSelect(props) {
name='Choose Project'
id="demo-multiple-name"
multiple
value={props.projectName}
value={projectName}
onChange={handleChange}
input={<OutlinedInput label="Name" />}
MenuProps={MenuProps}
sx={{color:'white' }}
onClose={(e)=>{props.onClose(props.projectName)}}
onClose={(e)=>{onClose(projectName)}}
>
{props.projects.map((project) => (
{projects?.map((project) => (
<MenuItem
key={project}
value={project}
style={getStyles(project, props.projectName, theme)}
style={getStyles(project, projectName, theme)}
>
{project}
</MenuItem>
......
planner-front/src/components/UI/Select/Select.js
View file @ 29c816db
......@@ -5,7 +5,8 @@ import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
export default function BasicSelect(props) {
export default function BasicSelect({value,label,name,onChange,task,items}) {
return (
<Box sx={{ minWidth: 60 }}>
<FormControl fullWidth>
......@@ -13,17 +14,19 @@ export default function BasicSelect(props) {
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={props.task.accomplish}
label=""
name={"accomplish"}
onChange={(e) => props.onChange(e, props.task)}
sx={{ marginTop: 2 }}
value={value}
label={label}
name={name}
onChange={(e) => onChange(e, task)}
>
{props.items.map((item) => (
<MenuItem value={item}>{item}</MenuItem>
{items.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.title}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
planner-front/src/containers/MyTasks/MyTasks.js
View file @ 29c816db
......@@ -10,11 +10,11 @@ import {
Paper,
IconButton,
Tooltip,
Input,
} from "@mui/material";
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Done, Edit, NavigateNextOutlined } from "@mui/icons-material";
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";
......@@ -23,52 +23,43 @@ 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,addTask } from "../../store/actions/tasksActions";
import { fetchAllTasks, deleteTask,editTask} from "../../store/actions/tasksActions";
import NewTaskForm from "../../components/MyTasksCompoments/NewTaskForm";
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array, comparator) {
const stabilizedThis = array?.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
export default function EnhancedTable() {
const dispatch = useDispatch();
const calendarTasks = useSelector((state) => state.tasks.tasks);
const tasks = calendarTasks
console.log(tasks)
const tasks = useSelector((state) => state.tasks.tasks);
const [recievedTasks, setRecievedTasks] = useState([]);
const [addTaskForm, setAddTaskForm] = useState(false);
const [order, setOrder] = useState("asc");
const [orderBy, setOrderBy] = useState("id");
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] =useState(5);
const [modal, setModal] = useState({
open: false,
task: null,
});
const [projects,setProjects]=useState(['1','2'])
console.log(tasks)
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("id");
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
useEffect(() => {
dispatch(fetchAllTasks());
filterProjectsNamesFromTasks()
if (tasks && tasks?.length > 0) {
setRecievedTasks(tasks);
}
}, [tasks===undefined,tasks?.length]);
useEffect(() => {
dispatch(fetchAllTasks());
}, [addTaskForm, setAddTaskForm]);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
......@@ -90,12 +81,12 @@ console.log(tasks)
const name = e.target.name;
const { id } = task;
const newTasks = recievedTasks.map((task) => {
console.log(task)
if (task.id === id) {
return { ...task, [name]: value };
}
return task;
});
setRecievedTasks(newTasks);
};
......@@ -111,7 +102,6 @@ console.log(tasks)
}
return task;
});
setRecievedTasks(newTasks);
};
......@@ -127,9 +117,25 @@ console.log(tasks)
});
setRecievedTasks(newTasks);
};
const onProjectChange = (e, task) => {
const value = e.target.value;
const project = rawProjects.find((e) => e.id === value);
const { id } = task;
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
const updated = { ...task };
updated.project = project;
updated.projectName = project.title;
return updated;
}
return task;
});
setRecievedTasks(newTasks);
};
const onToggleEditMode = (id) => {
console.log(id)
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
return {
......@@ -157,37 +163,15 @@ console.log(tasks)
setRecievedTasks(newTasks);
};
const HandleEditTask= (task)=>{
const handleEditTask= (task)=>{
dispatch(editTask(task))
}
const addTask = () => {
// let newTasks=[...tasks]
tasks.unshift({
title: "",
description: "",
priority: "",
author: "",
executor: "",
dateTimeStart: "",
dateTimeDue: "",
id: 4,
createdAt: "",
accomplish: " ",
});
// tasks=newTasks;
};
const deleteHandle = (id) => {
dispatch(deleteTask(id));
};
const [modal, setModal] = useState({
open: false,
task: null,
});
const onModalOpen = (event, task) => {
event.stopPropagation();
setModal({ ...modal, open: true, id: task.id });
......@@ -203,7 +187,6 @@ console.log(tasks)
const onClose=(projectName)=>{
console.log("projectName", projectName, 'projects',projects)
let tasksFilteredByProject = tasks
if (projectName.length>0) {
tasksFilteredByProject = tasks.filter(task=>projectName.includes(task.project?.title))
......@@ -211,10 +194,10 @@ console.log(tasks)
setRecievedTasks(tasksFilteredByProject)
setFilterProjectTumbler(true)
}
const rawProjects= tasks?.map(task=>task.project)
const filterProjectsNamesFromTasks = ()=>{
if (tasks && tasks?.length > 0) {
const rawProjects= tasks.map(task=>task.project)
let rawSetProjectNames = []
for (let project of rawProjects){
if (project===null){
......@@ -224,68 +207,47 @@ console.log(tasks)
}
let uniqueTitlesProjects = [...new Set(rawSetProjectNames)];
setProjects(uniqueTitlesProjects)
console.log('filterProjectsNamesFromTasks uniqueTitlesProjects',uniqueTitlesProjects)
}
}
useEffect(() => {
dispatch(fetchAllTasks());
filterProjectsNamesFromTasks()
if (tasks && tasks?.length > 0) {
setRecievedTasks(tasks);
}
}, [tasks===undefined]);
if (
tasks &&
tasks?.length > 0 &&
recievedTasks &&
recievedTasks?.length >= 0
recievedTasks?.length > 0
) {
return (
<Box sx={{ width: "fullwidth" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<MyTaskToolBar
onClick={() => {
addTask();
}}
onClick={() => setAddTaskForm(!addTaskForm)}
formStatus={addTaskForm}
projects={projects}
onClose={onClose}
projectName={projectName}
projectName={projectName}
setProjectName={setProjectName}
/>
{addTaskForm ? (
<NewTaskForm
tasks={recievedTasks}
projects={rawProjects}
setAddTaskForm={()=>setAddTaskForm(false)}
/>
) : null}
<TableContainer>
<Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
// rowCount={tasks.length}
rowCount={tasks.length}
/>
<TableBody>
{/* <TableRow sx={{height:'1px',margin:0,padding:0}}>
<TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="order" />
</TableCell>
<TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" />
</TableCell>
</TableRow> */}
{/* <NewTaskForm
onChange={onChange}
onModalOpen={onModalOpen}
onAuthorChange={onAuthorChange}
onDateChange={onDateChange}
onToggleEditMode={onToggleEditMode}
onToggleEditModeDone={onToggleEditModeDone}
HandleEditTask={HandleEditTask}
deleteHandle={deleteHandle}
/> */}
{stableSort(recievedTasks, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((task, index) => {
......@@ -297,19 +259,38 @@ console.log(tasks)
scope="row"
padding="none"
></TableCell>
<CustomTableCell
{...{
task,
name: "priority",
value: task.priority,
onChange,
}}
/>
{task.isEditMode ? (
<TableCell>
<BasicSelect
items={[
{ value: "A", title: "A" },
{ value: "B", title: "B" },
{ value: "C", title: "C" },
]}
task={task}
value={task.priority}
onChange={onChange}
name="priority"
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "priority",
value: task.priority,
}}
/>
)}
<CustomTableCell
{...{
task,
name: "createdAt",
value: task.createdAt,
value: moment(task.createdAt)
.utc()
.format("DD-MM-YYYY hh:mm A"),
}}
/>
......@@ -323,22 +304,29 @@ console.log(tasks)
}}
/>
{task.isEditMode ? (
<BasicSelect
items={["project1", "project2", "project3"]}
task={task}
onChange={onChange}
/>
{task.isEditMode ? (
<TableCell>
<BasicSelect
items={rawProjects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task}
onChange={onProjectChange}
name="project"
value={task.project?.id}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "project",
value: task.project?.title,
onChange: onChange,
}}
/>
{...{
task,
name: "projectId",
value: task.project?.title,
}}
/>
)}
<CustomTableCell
{...{
task,
......@@ -365,11 +353,19 @@ console.log(tasks)
</TableCell>
{task.isEditMode ? (
<BasicSelect
items={["opened", "done", "failed"]}
task={task}
onChange={onChange}
/>
<TableCell>
<BasicSelect
items={[
{ value: "opened", title: "opened" },
{ value: "done", title: "done" },
{ value: "failed", title: "failed" },
]}
task={task}
onChange={onChange}
name="accomplish"
value={task.accomplish}
/>
</TableCell>
) : (
<CustomTableCell
{...{
......@@ -381,24 +377,29 @@ console.log(tasks)
)}
<TableCell>
{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 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>
<TableCell>
<Tooltip title="Delete">
<Tooltip title="Удалить">
<IconButton
onClick={(id) => {
deleteHandle(task.id);
......@@ -414,7 +415,6 @@ console.log(tasks)
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
component="div"
......@@ -435,3 +435,32 @@ console.log(tasks)
);
}
}
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array, comparator) {
const stabilizedThis = array?.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ 29c816db
import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TableSortLabel from '@mui/material/TableSortLabel';
import { visuallyHidden } from '@mui/utils';
import * as React from "react";
import PropTypes from "prop-types";
import Box from "@mui/material/Box";
import TableCell from "@mui/material/TableCell";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import TableSortLabel from "@mui/material/TableSortLabel";
import { visuallyHidden } from "@mui/utils";
const headCells = [
{
id: 'id',
id: "id",
numeric: true,
disablePadding: true,
label: '',
label: "",
},
{
id: 'priority',
id: "priority",
numeric: false,
disablePadding: true,
label: 'Приоритет',
label: "Приоритет",
},
{
id: 'createdAt',
id: "createdAt",
numeric: true,
disablePadding: false,
label: 'Дата создания',
label: "Дата создания",
},
{
id: 'title',
id: "title",
numeric: true,
disablePadding: false,
label: 'Заголовок',
label: "Заголовок",
},
{
id: 'project',
id: "projectName",
numeric: true,
disablePadding: false,
label: 'Проект',
label: "Проект",
},
{
id: 'authorDisplayName',
id: "authorDisplayName",
numeric: true,
disablePadding: false,
label: 'Автор',
label: "Автор",
},
{
id: 'dateTimeStart',
id: "dateTimeStart",
numeric: true,
disablePadding: false,
label: 'Дата начала',
label: "Дата начала",
},
{
id: 'dateTimeDue',
id: "dateTimeDue",
numeric: true,
disablePadding: false,
label: 'Дата завершения',
label: "Дата завершения",
},
{
id: 'accomplish',
id: "accomplish",
numeric: true,
disablePadding: false,
label: 'Статус',
label: "Статус",
},
{
id: 'change',
id: "change",
numeric: false,
disablePadding: false,
label: '',
label: "",
},
{
id: 'delete',
id: "delete",
numeric: false,
disablePadding: false,
label: '',
label: "",
},
];
export default function EnhancedTableHead(props) {
const { order, orderBy, rowCount, onRequestSort } =
props;
export default function EnhancedTableHead({ order, orderBy, rowCount, onRequestSort }) {
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
......@@ -88,23 +86,22 @@ export default function EnhancedTableHead(props) {
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={'center'}
padding={headCell.disablePadding ? 'none' : 'normal'}
align={"center"}
padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
direction={orderBy === headCell.id ? order : "asc"}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
{order === "desc" ? "sorted descending" : "sorted ascending"}
</Box>
) : null}
</TableSortLabel>
......@@ -117,7 +114,7 @@ export default function EnhancedTableHead(props) {
EnhancedTableHead.propTypes = {
onRequestSort: PropTypes.func.isRequired,
order: PropTypes.oneOf(['asc', 'desc']).isRequired,
order: PropTypes.oneOf(["asc", "desc"]).isRequired,
orderBy: PropTypes.string.isRequired,
// rowCount: PropTypes.number.isRequired,
rowCount: PropTypes.number.isRequired,
};
planner-front/src/store/actions/tasksActions.js
View file @ 29c816db
......@@ -69,6 +69,25 @@ const addTaskFailure = (error) => {
return {type: ADD_NEW_TASK_FAILURE, error}
};
// export const addTask = (task) => {
// return async (dispatch, getState) => {
// dispatch(addTaskRequest());
// const token = getState().users?.user?.token;
// try {
// await axios.post("/tasks", task, {
// headers: {
// Authorization: token,
// },
// });
// dispatch(addTaskSuccess());
// dispatch(fetchCalendarTasks());
// } catch (error) {
// dispatch(addTaskFailure(error.response.data));
// }
// };
// };
export const addTask = (task) => {
return async (dispatch, getState) => {
dispatch(addTaskRequest());
......@@ -76,6 +95,7 @@ export const addTask = (task) => {
try {
await axios.post("/tasks", task);
dispatch(addTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks())
} catch (error) {
dispatch(addTaskFailure(error.response.data));
......
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