apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #111 from apuc/tracker-tasks

Browse Source 
Tracker tasks
This commit is contained in:
NikoM1k
2023-07-04 15:15:43 +03:00
committed by GitHub
parent 6751a655ee 1515d72e4f
commit 43443997a5
11 changed files with 336 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
import { getProfileInfo } from "@redux/outstaffingSlice";
import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
@@ -429,7 +429,7 @@ export const ModalTiсket = ({
Загрузить файл
</button>
<span>{0}</span>
Файлов
{caseOfNum(0, "files")}
</p>
</div>
<div className="content__input">

39
src/components/Modal/Tracker/ModalTicket/modalTicket.scss
View File

@@ -78,8 +78,22 @@
font-style: normal;
font-size: 16px;
line-height: 24px;
max-width: 340px;
padding: 5px;
outline: none;
border-radius: 8px;
border: 1px solid rgb(204, 206, 209);
}
.ck-toolbar {
border-radius: 8px 8px 0 0 !important;
}
.ck-content {
font-size: 14px;
min-height: 100px;
border: 1px solid rgb(204, 206, 209) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: none !important;
}
button {
@@ -228,7 +242,7 @@
margin-left: 34px;
text-decoration-line: underline;
font-weight: 400;
font-size: 10px;
font-size: 11px;
line-height: 32px;
cursor: pointer;
@@ -381,9 +395,9 @@
margin-right: 18px;
}
&:focus-within {
border: 1px solid #0000004d;
}
//&:focus-within {
// border: 1px solid #0000004d;
//}
}
}
@@ -467,6 +481,11 @@
border: none;
color: white;
font-size: 17px;
transition: all 0.3s ease;
&:hover {
background: #6cc933;
}
}
}
@@ -479,6 +498,11 @@
color: white;
background: #1458dd;
border-radius: 44px;
transition: all 0.15s ease;
&:hover {
background: #0255ff;
}
img {
margin-left: 10px;
@@ -499,6 +523,11 @@
color: white;
background: red;
border-radius: 44px;
transition: all 0.3s ease;
&:hover {
background: #f5693d;
}
}
.time {

5
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@@ -8,11 +8,10 @@ import {
deletePersonOnProject,
getBoarderLoader,
modalToggle,
setProjectBoardFetch,
setToggleTab,
} from "@redux/projectsTrackerSlice";
import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
import { apiRequest } from "@api/request";
@@ -586,7 +585,7 @@ export const TicketFullScreen = () => {
Загрузить файл
</BaseButton>
<span>{0}</span>
Файлов
{caseOfNum(0, "files")}
</p>
</div>
<div className="content__input">

22
src/components/Modal/Tracker/TrackerModal/trackerModal.scss
View File

@@ -94,6 +94,22 @@
max-width: 320px;
}
.ck-editor__editable.ck-rounded-corners {
min-height: 100px;
font-size: 14px;
}
.ck-toolbar {
border: none !important;
border-radius: 8px 8px 0 0 !important;
}
.ck-content {
border: none !important;
border-radius: 0 0 8px 8px !important;
box-shadow: none !important;
}
.select__executor {
width: 320px;
background: white;
@@ -229,6 +245,12 @@
.worker {
display: flex;
justify-content: space-between;
&:hover {
p {
font-weight: 500;
}
}
}
}
}

2
src/components/ReportForm/reportForm.scss
View File

@@ -99,6 +99,8 @@
cursor: pointer;
img {
width: 20px;
height: 20px;
margin-left: 20px;
margin-right: 20px;
}

10
src/components/TrackerTaskComment/TrackerTaskComment.jsx
View File

@@ -12,6 +12,7 @@ import TrackerTaskSubComment from "@components/TrackerTaskComment/TrackerTaskCom
import del from "assets/icons/delete.svg";
import edit from "assets/icons/edit.svg";
import accept from "assets/images/accept.png";
import avatarMok from "assets/images/avatarMok.png";
export const TrackerTaskComment = ({
taskId,
@@ -84,7 +85,14 @@ export const TrackerTaskComment = ({
>
<div className="comments__list__item__info">
<div className="comments__list__item__fio">
<img src={urlForLocal(comment.user.avatar)} alt="avatar" />
<img
src={
comment.user?.avatar
? urlForLocal(comment.user.avatar)
: avatarMok
}
alt="avatar"
/>
<p>{comment.user.fio}</p>
</div>
<div className="comments__list__item__date">

87
src/pages/ProjectTracker/ProjectTracker.js
View File

@@ -6,6 +6,7 @@ import {
activeLoader,
deletePersonOnProject,
filterCreatedByMe,
filteredExecutorTasks,
filteredParticipateTasks,
getBoarderLoader,
getProjectBoard,
@@ -20,6 +21,7 @@ import {
} from "@redux/projectsTrackerSlice";
import { urlForLocal } from "@utils/helper";
import { caseOfNum } from "@utils/helper";
import { apiRequest } from "@api/request";
@@ -28,13 +30,13 @@ import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import ModalTicket from "@components/Modal/Tracker/ModalTicket/ModalTicket";
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
// import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import archive from "assets/icons/archiveTracker.svg";
import arrow from "assets/icons/arrows/arrowCalendar.png";
import arrowDown from "assets/icons/arrows/selectArrow.png";
import close from "assets/icons/close.png";
import commentsBoard from "assets/icons/commentsBoard.svg";
import del from "assets/icons/delete.svg";
@@ -61,6 +63,8 @@ export const ProjectTracker = () => {
const [checkBoxParticipateTasks, setCheckBoxParticipateTasks] =
useState(false);
const [checkBoxMyTasks, setCheckBoxMyTasks] = useState(false);
const [selectedExecutor, setSelectedExecutor] = useState(null);
const [selectExecutorOpen, setSelectedExecutorOpen] = useState(false);
const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader);
@@ -228,6 +232,7 @@ export const ProjectTracker = () => {
dispatch(setProjectBoardFetch(projectId.id));
setCheckBoxParticipateTasks(false);
setCheckBoxMyTasks(false);
setSelectedExecutor(null);
}
setCheckBoxParticipateTasks(!checkBoxParticipateTasks);
}
@@ -239,10 +244,23 @@ export const ProjectTracker = () => {
dispatch(setProjectBoardFetch(projectId.id));
setCheckBoxParticipateTasks(false);
setCheckBoxMyTasks(false);
setSelectedExecutor(null);
}
setCheckBoxMyTasks(!checkBoxMyTasks);
}
function executorFilter(user) {
dispatch(filteredExecutorTasks(user.user_id));
setSelectedExecutor(user);
}
function deleteSelectedExecutorFilter() {
setSelectedExecutor(null);
setCheckBoxParticipateTasks(false);
setCheckBoxMyTasks(false);
dispatch(setProjectBoardFetch(projectId.id));
}
return (
<div className="tracker">
<ProfileHeader />
@@ -423,6 +441,63 @@ export const ProjectTracker = () => {
{checkBoxMyTasks && <img src={accept} alt="accept" />}
</div>
</div>
{selectedExecutor ? (
<div className="tasks__head__executorSelected">
<p>{selectedExecutor.user.fio}</p>
<img
className="avatar"
src={
selectedExecutor.user?.avatar
? urlForLocal(selectedExecutor.user.avatar)
: avatarMok
}
alt="avatar"
/>
<img
className="delete"
src={close}
alt="delete"
onClick={deleteSelectedExecutorFilter}
/>
</div>
) : (
<div
className="tasks__head__executor"
onClick={() =>
setSelectedExecutorOpen(!selectExecutorOpen)
}
>
<p>Выберите исполнитель</p>
<img
className={selectExecutorOpen ? "open" : ""}
src={arrowDown}
alt="arrow"
/>
{selectExecutorOpen && (
<div className="tasks__head__executorDropdown">
{projectBoard.projectUsers.map((user) => {
return (
<div
className="executorDropdown__person"
key={user.user_id}
onClick={() => executorFilter(user)}
>
<p>{user.user?.fio}</p>
<img
src={
user.user?.avatar
? urlForLocal(user.user.avatar)
: avatarMok
}
alt="avatar"
/>
</div>
);
})}
</div>
)}
</div>
)}
<Link to="/profile/tracker" className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
@@ -563,11 +638,17 @@ export const ProjectTracker = () => {
<div className="tasks__board__item__info">
<div className="tasks__board__item__info__more">
<img src={commentsBoard} alt="commentsImg" />
<span>{task.comment_count} коментариев</span>
<span>
{task.comment_count}{" "}
{caseOfNum(task.comment_count, "comments")}
</span>
</div>
<div className="tasks__board__item__info__more">
<img src={filesBoard} alt="filesImg" />
<span>{task.files} файлов</span>
<span>
{task.files ? task.files : 0}{" "}
{caseOfNum(0, "files")}
</span>
</div>
</div>
</div>

26
src/pages/Tracker/Tracker.js
View File

@@ -27,6 +27,7 @@ import archive from "assets/icons/archiveTracker.svg";
import search from "assets/icons/serchIcon.png";
import project from "assets/icons/trackerProject.svg";
import tasks from "assets/icons/trackerTasks.svg";
import avatarMok from "assets/images/avatarMok.png";
import noProjects from "assets/images/noProjects.png";
import "./tracker.scss";
@@ -253,11 +254,19 @@ export const Tracker = () => {
<div className="task" key={task.id}>
<div className="task__info">
<h5>{task.title}</h5>
<p>{task.description}</p>
<p
dangerouslySetInnerHTML={{
__html: task.description,
}}
/>
</div>
<div className="task__person">
<img
src={urlForLocal(task.user.avatar)}
src={
task.user?.avatar
? urlForLocal(task.user.avatar)
: avatarMok
}
alt="avatar"
/>
<div className="task__project">
@@ -301,11 +310,20 @@ export const Tracker = () => {
<div className="archive__completeTask" key={index}>
<div className="archive__completeTask__description">
<p>{task.title}</p>
<p className="date">{task.description}</p>
<p
className="date"
dangerouslySetInnerHTML={{
__html: task.description,
}}
/>
</div>
<div className="archive__completeTask__info">
<img
src={urlForLocal(task.user.avatar)}
src={
task.user?.avatar
? urlForLocal(task.user.avatar)
: avatarMok
}
alt="avatar"
/>
<div className="archive__completeTask__info__project">

134
src/pages/Tracker/tracker.scss
View File

@@ -208,7 +208,8 @@
&__wrapper {
display: flex;
max-width: 1160px;
max-width: 1260px;
width: 100%;
margin: 0 auto;
justify-content: space-between;
padding: 0 10px;
@@ -252,7 +253,6 @@
&__persons {
position: relative;
display: flex;
cursor: pointer;
align-items: center;
.projectPersons {
@@ -302,8 +302,14 @@
background: #00c5a8;
color: white;
font-size: 14px;
transition: all 0.15s ease;
left: -28px;
z-index: 2;
cursor: pointer;
&:hover {
background: #10d5bb;
}
}
p {
@@ -461,11 +467,114 @@
}
}
&__executor {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
margin-right: 10px;
border-radius: 8px;
border: 1px solid #e3e2e2;
padding: 2px 6px;
position: relative;
max-width: 220px;
width: 100%;
&Selected {
display: flex;
align-items: center;
border-radius: 8px;
max-width: 220px;
width: 100%;
margin-right: 10px;
justify-content: center;
p {
color: #252c32;
font-weight: 400;
font-size: 14px;
line-height: 24px;
max-width: 155px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar {
margin: 0 5px;
}
.delete {
cursor: pointer;
}
img {
display: flex;
width: 20px;
height: 20px;
}
}
p {
color: #252c32;
font-weight: 400;
font-size: 14px;
line-height: 24px;
}
img {
transition: all 0.15s ease;
margin-left: 5px;
}
.open {
transform: rotate(180deg);
}
&Dropdown {
position: absolute;
top: 33px;
background: white;
border-radius: 8px;
z-index: 5;
padding: 10px 10px;
display: flex;
flex-direction: column;
row-gap: 7px;
width: 100%;
.executorDropdown__person {
display: flex;
justify-content: space-between;
align-items: center;
p {
max-width: 155px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
img {
width: 15px;
height: 15px;
}
&:hover {
p {
font-weight: 600;
}
}
}
}
}
&__back {
cursor: pointer;
display: flex;
align-items: center;
color: black;
max-width: 180px;
width: 100%;
p {
font-weight: 400;
@@ -477,6 +586,12 @@
margin-left: 10px;
width: 20px;
}
&:hover {
p {
font-weight: 500;
}
}
}
}
@@ -738,12 +853,20 @@
font-weight: 500;
font-size: 16px;
line-height: 24px;
cursor: pointer;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.add {
color: #6f6f6f;
font-size: 19px;
cursor: pointer;
&:hover {
font-weight: 600;
}
}
.more {
@@ -751,6 +874,11 @@
position: relative;
bottom: 4px;
font-size: 20px;
cursor: pointer;
&:hover {
font-weight: 600;
}
}
.done {

8
src/redux/projectsTrackerSlice.js
View File

@@ -122,6 +122,13 @@ export const projectsTrackerSlice = createSlice({
);
});
},
filteredExecutorTasks: (state, action) => {
state.projectBoard.columns.forEach((column) => {
column.tasks = column.tasks.filter(
(task) => task.executor_id === action.payload
);
});
},
setColumnName: (state, action) => {
state.columnName = action.payload;
},
@@ -174,6 +181,7 @@ export const {
addPersonToProject,
filterCreatedByMe,
filteredParticipateTasks,
filteredExecutorTasks,
movePositionProjectTask,
} = projectsTrackerSlice.actions;

20
src/utils/helper.js
View File

@@ -61,3 +61,23 @@ export function getCorrectRequestDate(date) {
const sec = String(date.getUTCSeconds());
return `${yyyy}-${mm}-${dd} ${hh}:${min}:${sec}`;
}
export function caseOfNum(number, type) {
const comments = ["коментарий", "комментария", " коментариев"];
const files = ["файлов", "файла", "файлов"];
const cases = [2, 0, 1, 1, 1, 2];
if (type === "comments") {
return comments[
number % 100 > 4 && number % 100 < 20
? 2
: cases[number % 10 < 5 ? number % 10 : 5]
];
}
if (type === "files") {
return files[
number % 100 > 4 && number % 100 < 20
? 2
: cases[number % 10 < 5 ? number % 10 : 5]
];
}
}