- {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;