diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js index 9bdffe34..46bd6f1a 100644 --- a/src/components/UI/ModalTiket/ModalTiket.js +++ b/src/components/UI/ModalTiket/ModalTiket.js @@ -78,9 +78,9 @@ export const ModalTiket = ({ active, setActive }) => { {tiket.code}

Создатель : {tiket.creator}

- {workers.map((worker) => { + {workers.map((worker, index) => { return ( -
+

{worker.name}

diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js index a7500f52..30df33b0 100644 --- a/src/pages/Tracker/Tracker.js +++ b/src/pages/Tracker/Tracker.js @@ -32,7 +32,7 @@ export const Tracker = () => { count: 4, }, ]); - const [tabTaskMok] = useState([ + const [tabTaskMok, setTabTaskMok] = useState([ { name: "Открытые", tasks: [ @@ -43,6 +43,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, + id: 1 }, { task: "PR - 2245", @@ -51,6 +52,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, + id: 2 }, ], }, @@ -64,6 +66,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, + id: 3 }, ], }, @@ -77,6 +80,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, + id: 4 }, { task: "PR - 2245", @@ -85,6 +89,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, + id: 5 }, { task: "PR - 2245", @@ -93,6 +98,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, + id: 6 }, ], }, @@ -106,6 +112,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, + id: 7 }, { task: "PR - 2245", @@ -114,6 +121,7 @@ export const Tracker = () => { files: 0, avatarCreated: avatarTest, avatarDo: avatarTest, + id: 8 }, ], }, @@ -121,10 +129,66 @@ export const Tracker = () => { const [modalActiveTicket, setModalActiveTicket] = useState(false); const [modalActiveProject, setModalActiveProject] = useState(false); + const [startWrapperIndex, setStartWrapperIndex] = useState(null) + const [wrapperHover, setWrapperHover] = useState([false, false, false, false]) const toggleTabs = (index) => { setToggleTab(index); }; + + function dragStartHandler(e, task, wrapperIndex) { + setStartWrapperIndex({task: task, index: wrapperIndex}) + setTimeout(() => { + e.target.classList.add('tasks__board__item__hide') + },0) + } + + function dragEndHandler(e) { + setWrapperHover(prevArray => prevArray.map((elem) => { + return false + })) + e.target.classList.remove('tasks__board__item__hide') + } + + function dragOverHandler(e) { + e.preventDefault() + } + + function dragEnterHandler(wrapperIndex) { + if (wrapperIndex === startWrapperIndex.index) { + return + } + setWrapperHover(prevArray => prevArray.map((elem, index) => { + if (index === wrapperIndex) { + return true + } else { + return false + } + })) + } + + function dragDropHandler(e, wrapperIndex) { + e.preventDefault() + if (startWrapperIndex.index === wrapperIndex) { + return + } + setWrapperHover(prevArray => prevArray.map((elem) => { + return false + })) + setTabTaskMok(prevArray => prevArray.map((elem, index) => { + if (index === wrapperIndex) { + return {...elem, tasks: [...elem.tasks, startWrapperIndex.task]} + } else if (index === startWrapperIndex.index) { + return {...elem, tasks: elem.tasks.filter((item) => { + return item.id !== startWrapperIndex.task.id + } + )} + } else { + return elem + } + })) + } + return (
@@ -215,18 +279,17 @@ export const Tracker = () => { />
- {tabTaskMok.map((section, index) => { + {tabTaskMok.map((section, wrapperIndex) => { return (
= 3 - ? "tasks__board tasks__board__more" - : "tasks__board" - } + key={wrapperIndex} + onDragOver={(e) => dragOverHandler(e)} + onDragEnter={(e) => dragEnterHandler(wrapperIndex)} + onDrop={(e) => dragDropHandler(e, wrapperIndex)} + className={`tasks__board ${section.tasks.length >= 3 ? 'tasks__board__more' : ''} ${wrapperHover[wrapperIndex] ? 'tasks__board__hover' : ''}`} >
- + {section.name}
@@ -239,7 +302,9 @@ export const Tracker = () => {
dragStartHandler(e, task, wrapperIndex)} + onDragEnd={(e) => dragEndHandler(e)} onClick={() => setModalActiveTicket(true)} >
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss index fde15016..c0309661 100644 --- a/src/pages/Tracker/tracker.scss +++ b/src/pages/Tracker/tracker.scss @@ -292,6 +292,12 @@ row-gap: 16px; height: fit-content; position: relative; + transition: all 0.3s ease; + + + &__hover { + box-shadow: 0px 2px 10px #9cc480, 0px 0px 0px 1px rgba(60, 66, 87, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.06); + } &__item { padding: 16px; @@ -299,7 +305,11 @@ box-shadow: 0px 3px 2px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02); border-radius: 6px; background: #FFFFFF; - cursor: grabbing; + cursor: pointer; + + &__hide { + opacity: 0; + } &__title { display: flex;