скорректировала формат дат, убрала минуты во времени создания, в форме…

скорректировала формат дат, убрала минуты во времени создания, в форме добавления задачи сделала модалку для заголовка и описания, удалила поля автор и статус
parent 228d63a9
......@@ -3,30 +3,44 @@ import TableCell from "@mui/material/TableCell";
import Input from "@mui/material/Input";
import moment from "moment";
const CustomTableCell = ({task,
const CustomTableCell = ({
task,
name,
value,
value2,
value3,
onChange,
onModalOpen,
placeholder,
user
}) => {
const styles = { width: "auto", height: "10px"};
const divStyle={display:"flex",justifyContent:"space-between", flexDirection:"column",fontSize:"12px"}
const duration = moment.duration(moment(task.dateTimeTasks[0]?.dateTimeDue).diff(moment(task.dateTimeTasks[0]?.dateTimeStart)));
user,
}) => {
const styles = placeholder ? { width: "100%" } : { width: "auto" };
const divStyle = {
display: "flex",
justifyContent: "space-between",
flexDirection: "column",
fontSize: "12px",
};
const duration = moment.duration(
moment(task?.dateTimeTasks[0]?.dateTimeDue).diff(
moment(task?.dateTimeTasks[0]?.dateTimeStart)
)
);
const hours = Math.round(duration.asHours());
if (task) {
if (task) {
return (
<>
<TableCell
onClick={(e) => (onModalOpen ? onModalOpen(e, task) : null)}
align="left"
style={styles}
// style={styles}
>
{task.isEditMode && onChange && name!=="author" && task.author.id===user.id ? (
{(task.isEditMode &&
onChange &&
name !== "author" &&
task.author?.id === user?.id) ||
placeholder ? (
<Input
placeholder={placeholder}
value={value}
......@@ -34,16 +48,15 @@ const CustomTableCell = ({task,
onChange={(e) => onChange(e, task)}
style={styles}
/>
) : name!=="dateTimeStart" ? (
) : name !== "dateTimeStart" ? (
<span>{value}</span>
):(
<div style={divStyle}>
) : (
<div style={divStyle}>
<span>{value}</span>
<span>{value2}</span>
<span>часы:+{hours}</span>
<span>часы:{hours}</span>
</div>
)
}
)}
</TableCell>
</>
);
......
......@@ -9,10 +9,10 @@ export default function MaterialUIPickers(props) {
return (
<LocalizationProvider
dateAdapter={AdapterMoment}
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
sx={{ width: "100%", fontSize: 5, fontWeight: "200" }}
>
<DateTimePicker
inputFormat="DD-MM-YYYY hh:mm A"
inputFormat="DD-MM-YY kk:mm A"
disabled={props.task.readOnly}
renderInput={(params) => (
<TextField
......
......@@ -19,29 +19,45 @@ import CustomTableCell from "./CustomTableCell";
import MaterialUIPickers from "./DateTimePicker/DateTimePicker";
import BasicSelect from "../UI/Select/Select";
import { addTask } from "../../store/actions/tasksActions";
import TaskModal from "./TaskModal/TaskModal";
export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
export default function NewTaskForm({
projects,
setAddTaskForm,
}) {
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,
dateTimeDeadLine: null,
dateTimeTasks: [],
dateTimeDue: null,
project: projects[0],
accomplish: "opened",
priority: "B",
author: { id: user.id },
authorDisplayName: user.displayName,
executors: [],
isEditMode: true,
});
const [modal, setModal] = useState(false);
const onModalOpen = (event, task) => {
event.stopPropagation();
setModal(true);
};
const handleClose = () => {
setModal(false);
};
const onChange = (e, task) => {
const value = e.target.value;
const name = e.target.name;
......@@ -78,8 +94,6 @@ export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
<TableContainer
style={{
backgroundColor: "#E8E8E8",
display: "flex",
alignItems: "center",
marginBottom: "2em",
}}
>
......@@ -122,26 +136,17 @@ export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
value: moment(task.createdAt).format("DD-MM-YYYY hh:mm A"),
}}
/>
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onChange: onChange,
placeholder: "Введите название задачи",
onModalOpen,
user: user,
placeholder: "Кликните для ввода информации по задаче"
}}
/>
<CustomTableCell
{...{
task,
name: "description",
value: task.description,
onChange: onChange,
placeholder: "Введите описание задачи",
}}
/>
<TableCell>
<BasicSelect
items={projects.map((e) => ({
......@@ -155,44 +160,22 @@ export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
/>
</TableCell>
<CustomTableCell
{...{
task,
name: "author",
value: user.displayName,
}}
/>
<TableCell>
{/* <TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={onDateChange}
/>
</TableCell>
</TableCell> */}
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
name="dateTimeDeadLine"
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}>
......@@ -201,8 +184,16 @@ export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
</Tooltip>
</TableCell>
</TableRow>
</TableBody>
</Table>
<TaskModal
task={task}
open={modal}
handleClose={handleClose}
onChange={onChange}
user={user}
/>
</TableContainer>
<Divider />
</>
......@@ -234,43 +225,20 @@ export const header = [
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: "Статус",
label: "Дедлайн",
},
{
id: "add",
numeric: false,
......
......@@ -16,6 +16,7 @@ const TaskModal = ({handleClose,open,task,onChange,user }) => {
open={open}
>
{task?.isEditMode && task.author.id===user.id ? (
<div className="modal">
<Input
label="название"
......
......@@ -110,7 +110,7 @@ useEffect(() => {
if (task.id === id) {
return {
...task,
[property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
[property]: moment.parseZone(value, "DD/MM/YY", true).format(),
};
}
return task;
......@@ -223,6 +223,7 @@ useEffect(() => {
}, []);
console.log(tasks)
if (
tasks &&
tasks?.length > 0 &&
......@@ -243,10 +244,9 @@ console.log(tasks)
{addTaskForm ? (
<NewTaskForm
tasks={recievedTasks}
projects={rawProjects}
projects={uniqueProjects}
setAddTaskForm={()=>setAddTaskForm(false)}
/>
/>
) : null}
......@@ -304,7 +304,7 @@ console.log(tasks)
name: "createdAt",
value: moment(task.createdAt)
.utc()
.format("DD-MM-YYYY hh:mm A"),
.format("DD-MM-YY"),
user:user
}}
/>
......@@ -379,13 +379,13 @@ console.log(tasks)
name: "dateTimeStart",
value: moment(task.dateTimeTasks[0]?.dateTimeStart)
.utc()
.format("DD-MM-YYYY "),
.format("DD-MM-YY "),
value2:moment(task.dateTimeTasks[0]?.dateTimeStart)
.utc()
.format("hh:mm A")+"-"+
.format("kk:mm")+"-"+
moment(task.dateTimeTasks[0]?.dateTimeDue)
.utc()
.format("hh:mm A"),
.format("kk:mm"),
user:user
}}>
</CustomTableCell>
......@@ -419,7 +419,7 @@ console.log(tasks)
value: moment(task.dateTimeDeadLine
)
.utc()
.format("DD-MM-YYYY hh:mm A"),
.format("DD-MM-YY kk:mm"),
user:user
}}
/>
......
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