select executor on create task

This commit is contained in:
Николай Полтщук 2023-06-27 18:35:44 +03:00
parent 836d16691a
commit 7c622d63a1
4 changed files with 155 additions and 10 deletions

View File

@ -16,6 +16,8 @@ import {
setProjectBoardFetch,
} from "@redux/projectsTrackerSlice";
import {getProfileInfo} from "@redux/outstaffingSlice";
import { urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
@ -35,12 +37,14 @@ export const TrackerModal = ({
titleProject,
projectId,
priorityTask,
projectUsers
}) => {
const dispatch = useDispatch();
const projectBoard = useSelector(getProjectBoard);
const columnName = useSelector(getColumnName);
const columnId = useSelector(getColumnId);
const columnPriority = useSelector(getColumnPriority);
const profileInfo = useSelector(getProfileInfo);
const modalType = useSelector(getValueModalType);
const [projectName, setProjectName] = useState(defautlInput);
@ -54,6 +58,9 @@ export const TrackerModal = ({
const [selectColumnPriority, setSelectColumnPriority] = useState(
"Выберите приоритет колонки"
);
const [selectedExecutorTask, setSelectedExecutorTask] = useState('Выберите исполнителя задачи')
const [selectExecutorTaskOpen, setSelectExecutorTaskOpen] = useState(false)
const [correctProjectUsers, setCorrectProjectUsers] = useState([]);
const [selectColumnPriorityOpen, setSelectColumnPriorityOpen] =
useState(false);
@ -94,13 +101,28 @@ export const TrackerModal = ({
column_id: selectedTab,
priority: priorityTask,
},
}).then(() => {
dispatch(setProjectBoardFetch(projectBoard.id));
}).then((res) => {
if (selectedExecutorTask.user_id) {
apiRequest("/task/update-task", {
method: "PUT",
data: {
task_id: res.id,
executor_id: selectedExecutorTask.user_id,
},
}).then(() => {
dispatch(setProjectBoardFetch(projectBoard.id));
setActive(false);
setValueTiket("");
setDescriptionTicket("");
setSelectedExecutorTask('Выберите исполнителя задачи')
})
} else {
setActive(false);
setValueTiket("");
setDescriptionTicket("");
dispatch(setProjectBoardFetch(projectBoard.id));
}
});
setActive(false);
setValueTiket("");
setDescriptionTicket("");
}
function editProject() {
@ -214,6 +236,22 @@ export const TrackerModal = ({
);
})
: "";
if (
localStorage.getItem("role_status") !== "18" && projectUsers && Boolean(!projectUsers.find((item) => item.user_id === profileInfo.id_user))
) {
setCorrectProjectUsers( [
...projectUsers,
{
user: {
avatar: profileInfo.photo,
fio: profileInfo.fio,
},
user_id: profileInfo.id_user,
},
]);
} else {
setCorrectProjectUsers(projectUsers)
}
}, [active]);
return (
@ -283,7 +321,7 @@ export const TrackerModal = ({
</div>
)}
{modalType === "createTiketProject" && (
<div>
<>
<div className="title-project">
<h4>Введите название и описание задачи</h4>
<div className="input-container">
@ -302,11 +340,39 @@ export const TrackerModal = ({
placeholder="Описание задачи"
/>
</div>
<div
onClick={() => setSelectExecutorTaskOpen(!selectExecutorTaskOpen)}
className={selectExecutorTaskOpen ? 'select__executor select__executor--open' : 'select__executor'}>
<div className='selected__executor'>
{selectedExecutorTask.user_id ?
<>
<span>{selectedExecutorTask.user.fio}</span>
<img className='avatar' src={urlForLocal(selectedExecutorTask.user.avatar)} alt='avatar' />
</>
: <span>{selectedExecutorTask}</span>
}
</div>
<img className='arrow' src={arrowDown} alt='arrow' />
{selectExecutorTaskOpen &&
<div className='select__executor__dropDown'>
{correctProjectUsers.length ?
correctProjectUsers.map((person) => {
return <div onClick={() => setSelectedExecutorTask(person)} className='executor' key={person.user_id}>
<span>{person.user.fio}</span>
<img className='avatar' src={urlForLocal(person.user.avatar)} alt='avatar'/>
</div>
})
: <span>Нет пользователей</span>
}
</div>
}
</div>
</div>
<BaseButton styles={"button-add"} onClick={createTiket}>
Создать
</BaseButton>
</div>
</>
)}
{modalType === "editProject" && (
<div>
@ -390,7 +456,7 @@ export const TrackerModal = ({
</div>
<h4>Приоритет колонки</h4>
<div
className="select-priority"
className={selectColumnPriorityOpen ? 'select-priority select-priority--open' : 'select-priority'}
onClick={() =>
setSelectColumnPriorityOpen(!selectColumnPriorityOpen)
}

View File

@ -48,6 +48,7 @@
img {
width: 15px;
height: 15px;
transition: all 0.3s ease;
}
&__dropDown {
@ -68,6 +69,12 @@
}
}
}
&--open {
img {
transform: rotate(180deg);
}
}
}
.input-container {
@ -75,13 +82,83 @@
height: 35px;
background: #ffffff;
border-radius: 8px;
margin: 12px 0;
margin: 5px 0;
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
}
.select__executor {
width: 287px;
background: white;
border-radius: 8px;
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 9.5px 12px;
font-size: 14px;
cursor: pointer;
position: relative;
.arrow {
transition: all 0.3s ease;
width: 16px;
height: 16px;
}
&--open {
.arrow {
transform: rotate(180deg);
}
}
.selected__executor {
display: flex;
align-items: center;
span {
max-width: 205px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
img {
margin-left: 15px;
}
}
.avatar {
width: 20px;
height: 20px;
}
&__dropDown {
position: absolute;
background: white;
border-radius: 8px;
top: 50px;
left: 0;
width: 100%;
padding: 9.5px 12px;
display: flex;
flex-direction: column;
row-gap: 10px;
.executor {
display: flex;
justify-content: space-between;
&:hover {
span {
font-weight: 600;
}
}
}
}
}
h4 {
font-weight: 500;
font-size: 22px;

View File

@ -25,6 +25,7 @@ export const ProjectTiket = ({ project, index }) => {
initListeners();
}, []);
function initListeners() {
document.addEventListener("click", closeByClickingOut);
}

View File

@ -291,6 +291,7 @@ export const ProjectTracker = () => {
setActive={setModalAdd}
selectedTab={selectedTab}
priorityTask={priorityTask}
projectUsers={projectBoard.projectUsers}
/>
{loader && <Loader style="green" />}