Merge pull request #137 from apuc/fixed-pages
Fixed tabs - archive and my tasks
This commit is contained in:
MaxOvs19
GitHub
commit
5f92d86bd9
3
src/assets/icons/filterIcon.svg
Normal file
3
src/assets/icons/filterIcon.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.7172 3.09109C11.7172 2.67543 11.8405 2.26911 12.0714 1.92351C12.3023 1.57791 12.6306 1.30854 13.0146 1.14948C13.3986 0.990413 13.8212 0.948794 14.2288 1.02988C14.6365 1.11097 15.011 1.31113 15.3049 1.60504C15.5988 1.89895 15.7989 2.27342 15.88 2.68109C15.9611 3.08876 15.9195 3.51131 15.7604 3.89533C15.6014 4.27934 15.332 4.60757 14.9864 4.83849C14.6408 5.06942 14.2345 5.19267 13.8188 5.19267C13.2614 5.19267 12.7269 4.97126 12.3328 4.57713C11.9387 4.18301 11.7172 3.64846 11.7172 3.09109ZM1.20932 3.79162H9.61566C9.80145 3.79162 9.97963 3.71781 10.111 3.58644C10.2424 3.45506 10.3162 3.27688 10.3162 3.09109C10.3162 2.9053 10.2424 2.72711 10.111 2.59574C9.97963 2.46436 9.80145 2.39056 9.61566 2.39056H1.20932C1.02353 2.39056 0.845344 2.46436 0.713969 2.59574C0.582594 2.72711 0.508789 2.9053 0.508789 3.09109C0.508789 3.27688 0.582594 3.45506 0.713969 3.58644C0.845344 3.71781 1.02353 3.79162 1.20932 3.79162ZM5.41249 5.8932C4.9789 5.89442 4.5563 6.02972 4.20263 6.28055C3.84896 6.53138 3.58152 6.88546 3.437 7.29426H1.20932C1.02353 7.29426 0.845344 7.36806 0.713969 7.49944C0.582594 7.63081 0.508789 7.80899 0.508789 7.99478C0.508789 8.18058 0.582594 8.35876 0.713969 8.49013C0.845344 8.62151 1.02353 8.69531 1.20932 8.69531H3.437C3.56551 9.0588 3.79154 9.37993 4.09034 9.62356C4.38914 9.8672 4.74921 10.0239 5.13113 10.0766C5.51305 10.1293 5.9021 10.076 6.25572 9.92235C6.60933 9.76874 6.91388 9.52082 7.13603 9.20571C7.35818 8.89061 7.48936 8.52047 7.51523 8.1358C7.54111 7.75113 7.46066 7.36676 7.28271 7.02475C7.10476 6.68273 6.83615 6.39626 6.50629 6.19669C6.17643 5.99711 5.79802 5.89212 5.41249 5.8932ZM15.2199 7.29426H9.61566C9.42986 7.29426 9.25168 7.36806 9.12031 7.49944C8.98893 7.63081 8.91513 7.80899 8.91513 7.99478C8.91513 8.18058 8.98893 8.35876 9.12031 8.49013C9.25168 8.62151 9.42986 8.69531 9.61566 8.69531H15.2199C15.4057 8.69531 15.5839 8.62151 15.7152 8.49013C15.8466 8.35876 15.9204 8.18058 15.9204 7.99478C15.9204 7.80899 15.8466 7.63081 15.7152 7.49944C15.5839 7.36806 15.4057 7.29426 15.2199 7.29426ZM6.81354 12.198H1.20932C1.02353 12.198 0.845344 12.2718 0.713969 12.4031C0.582594 12.5345 0.508789 12.7127 0.508789 12.8985C0.508789 13.0843 0.582594 13.2625 0.713969 13.3938C0.845344 13.5252 1.02353 13.599 1.20932 13.599H6.81354C6.99933 13.599 7.17752 13.5252 7.30889 13.3938C7.44027 13.2625 7.51407 13.0843 7.51407 12.8985C7.51407 12.7127 7.44027 12.5345 7.30889 12.4031C7.17752 12.2718 6.99933 12.198 6.81354 12.198ZM15.2199 12.198H12.9922C12.8269 11.7306 12.5018 11.3366 12.0742 11.0858C11.6466 10.8349 11.144 10.7433 10.6554 10.8272C10.1668 10.911 9.72356 11.1649 9.40402 11.5439C9.08448 11.9229 8.90922 12.4027 8.90922 12.8985C8.90922 13.3942 9.08448 13.874 9.40402 14.2531C9.72356 14.6321 10.1668 14.886 10.6554 14.9698C11.144 15.0536 11.6466 14.962 12.0742 14.7112C12.5018 14.4603 12.8269 14.0664 12.9922 13.599H15.2199C15.4057 13.599 15.5839 13.5252 15.7152 13.3938C15.8466 13.2625 15.9204 13.0843 15.9204 12.8985C15.9204 12.7127 15.8466 12.5345 15.7152 12.4031C15.5839 12.2718 15.4057 12.198 15.2199 12.198Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
12
src/assets/images/downloadExel.svg
Normal file
12
src/assets/images/downloadExel.svg
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1688_1304)">
|
||||||
|
<path d="M25.0845 15.2539V8.81955C25.0845 8.63538 24.9994 8.46521 24.879 8.33059L17.6651 0.755356C17.5305 0.613724 17.3391 0.535645 17.1479 0.535645H5.71047C3.59897 0.535645 1.91235 2.25754 1.91235 4.3693V25.9967C1.91235 28.1085 3.59897 29.8021 5.71047 29.8021H14.7386C16.4462 32.6365 19.5502 34.5356 23.0861 34.5356C28.4574 34.5356 32.8439 30.1704 32.8439 24.792C32.8511 20.0938 29.4779 16.1681 25.0845 15.2539ZM17.8566 3.02302L22.6964 8.11788H19.5572C18.6218 8.11788 17.8566 7.34565 17.8566 6.41025V3.02302ZM5.71047 28.3847C4.38546 28.3847 3.32971 27.3217 3.32971 25.9967V4.3693C3.32971 3.03703 4.38546 1.953 5.71047 1.953H16.4392V6.41025C16.4392 8.13215 17.8353 9.53523 19.5572 9.53523H23.6671V15.0695C23.4547 15.0625 23.2845 15.0412 23.1003 15.0412C20.6272 15.0412 18.3525 15.9909 16.6377 17.4791H7.63807C7.24819 17.4791 6.92939 17.7979 6.92939 18.1875C6.92939 18.5774 7.24819 18.8962 7.63807 18.8962H15.3197C14.8164 19.6048 14.3983 20.3135 14.0725 21.093H7.63807C7.24819 21.093 6.92939 21.4118 6.92939 21.8017C6.92939 22.1913 7.24819 22.5104 7.63807 22.5104H13.6118C13.4346 23.2191 13.3425 24.0056 13.3425 24.792C13.3425 26.0675 13.5905 27.329 14.0369 28.392H5.71047V28.3847ZM23.0933 33.1255C18.5014 33.1255 14.7669 29.3909 14.7669 24.7991C14.7669 20.2072 18.4942 16.4726 23.0933 16.4726C27.6922 16.4726 31.4195 20.2072 31.4195 24.7991C31.4195 29.3909 27.6852 33.1255 23.0933 33.1255Z" fill="#6F6F6F"/>
|
||||||
|
<path d="M7.63812 15.3461H14.8165C15.2063 15.3461 15.5251 15.027 15.5251 14.6374C15.5251 14.2475 15.2063 13.9287 14.8165 13.9287H7.63812C7.24824 13.9287 6.92944 14.2475 6.92944 14.6374C6.92944 15.027 7.24824 15.3461 7.63812 15.3461Z" fill="#6F6F6F"/>
|
||||||
|
<path d="M26.7213 24.6501L23.809 27.7893V20.0512C23.809 19.6613 23.49 19.3425 23.1003 19.3425C22.7105 19.3425 22.3917 19.6613 22.3917 20.0512V27.7893L19.4579 24.6501C19.1886 24.3668 18.7352 24.3456 18.4516 24.6148C18.1681 24.8841 18.1469 25.3305 18.4164 25.614L22.5618 30.0713C22.6965 30.2129 22.8806 30.298 23.0791 30.298C23.2775 30.298 23.4617 30.2129 23.5963 30.0713L27.749 25.614C28.0183 25.3305 28.004 24.8771 27.7205 24.6148C27.43 24.3456 26.9908 24.3668 26.7213 24.6501Z" fill="#6F6F6F"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1688_1304">
|
||||||
|
<rect width="34" height="34" fill="white" transform="translate(0.38501 0.535645)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
12
src/assets/images/statusTimeTask.svg
Normal file
12
src/assets/images/statusTimeTask.svg
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_1688_1309)">
|
||||||
|
<path d="M25.1663 15.0642V8.62986C25.1663 8.44568 25.0812 8.27552 24.9608 8.14089L17.7469 0.565658C17.6123 0.424026 17.4209 0.345947 17.2297 0.345947H5.79226C3.68075 0.345947 1.99414 2.06784 1.99414 4.17961V25.807C1.99414 27.9188 3.68075 29.6124 5.79226 29.6124H14.8204C16.528 32.4468 19.632 34.3459 23.1678 34.3459C28.5392 34.3459 32.9257 29.9807 32.9257 24.6024C32.9329 19.9041 29.5597 15.9784 25.1663 15.0642ZM17.9384 2.83332L22.7782 7.92818H19.639C18.7036 7.92818 17.9384 7.15595 17.9384 6.22056V2.83332ZM5.79226 28.195C4.46725 28.195 3.4115 27.132 3.4115 25.807V4.17961C3.4115 2.84733 4.46725 1.7633 5.79226 1.7633H16.521V6.22056C16.521 7.94245 17.9171 9.34554 19.639 9.34554H23.7489V14.8798C23.5365 14.8728 23.3663 14.8515 23.1821 14.8515C20.709 14.8515 18.4343 15.8012 16.7194 17.2894H7.71986C7.32998 17.2894 7.01118 17.6082 7.01118 17.9978C7.01118 18.3877 7.32998 18.7065 7.71986 18.7065H15.4014C14.8982 19.4151 14.4801 20.1238 14.1542 20.9033H7.71986C7.32998 20.9033 7.01118 21.2221 7.01118 21.612C7.01118 22.0016 7.32998 22.3207 7.71986 22.3207H13.6936C13.5164 23.0294 13.4243 23.8159 13.4243 24.6024C13.4243 25.8778 13.6723 27.1393 14.1187 28.2023H5.79226V28.195ZM23.1751 32.9358C18.5832 32.9358 14.8487 29.2012 14.8487 24.6094C14.8487 20.0175 18.576 16.2829 23.1751 16.2829C27.774 16.2829 31.5013 20.0175 31.5013 24.6094C31.5013 29.2012 27.767 32.9358 23.1751 32.9358Z" fill="#6F6F6F"/>
|
||||||
|
<path d="M7.71991 15.1564H14.8983C15.2881 15.1564 15.6069 14.8373 15.6069 14.4477C15.6069 14.0578 15.2881 13.739 14.8983 13.739H7.71991C7.33003 13.739 7.01123 14.0578 7.01123 14.4477C7.01123 14.8373 7.33003 15.1564 7.71991 15.1564Z" fill="#6F6F6F"/>
|
||||||
|
<path d="M27.4895 22.0378C27.1006 21.6489 26.4698 21.6489 26.0808 22.0378L22.1368 25.9819L20.8489 24.694C20.4599 24.305 19.8292 24.305 19.4402 24.694C19.0512 25.0829 19.0512 25.7136 19.4402 26.1027L21.4324 28.0948C21.6269 28.2893 21.8818 28.3866 22.1368 28.3866C22.3917 28.3866 22.6466 28.2893 22.8411 28.0948L27.4895 23.4464C27.8785 23.0575 27.8785 22.4267 27.4895 22.0378Z" fill="#6F6F6F"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_1688_1309">
|
||||||
|
<rect width="34" height="34" fill="white" transform="translate(0.466797 0.345947)"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@ -26,13 +26,16 @@ import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
|
|||||||
import addProjectImg from "assets/icons/addProjectImg.svg";
|
import addProjectImg from "assets/icons/addProjectImg.svg";
|
||||||
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
import archiveTrackerProjects from "assets/icons/archiveTrackerProjects.svg";
|
||||||
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
|
||||||
|
import filterIcon from "assets/icons/filterIcon.svg";
|
||||||
|
import plus from "assets/icons/plus.svg";
|
||||||
import search from "assets/icons/serchIcon.png";
|
import search from "assets/icons/serchIcon.png";
|
||||||
import project from "assets/icons/trackerProject.svg";
|
import project from "assets/icons/trackerProject.svg";
|
||||||
import tasks from "assets/icons/trackerTasks.svg";
|
import tasks from "assets/icons/trackerTasks.svg";
|
||||||
import archive from "assets/images/archiveIcon.png";
|
import archive from "assets/images/archiveIcon.png";
|
||||||
import mockAvatar from "assets/images/avatarMok.png";
|
import mockAvatar from "assets/images/avatarMok.png";
|
||||||
import avatarMok from "assets/images/avatarMok.png";
|
import downloadExel from "assets/images/downloadExel.svg";
|
||||||
import noProjects from "assets/images/noProjects.png";
|
import noProjects from "assets/images/noProjects.png";
|
||||||
|
import statusTimeTask from "assets/images/statusTimeTask.svg";
|
||||||
|
|
||||||
import "./tracker.scss";
|
import "./tracker.scss";
|
||||||
|
|
||||||
@ -122,6 +125,14 @@ export const Tracker = () => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleDescTask(e) {
|
||||||
|
e.target.closest("img").classList.toggle("open-desc-item");
|
||||||
|
e.target
|
||||||
|
.closest("td")
|
||||||
|
.querySelector(".taskList__table__name-project")
|
||||||
|
.classList.toggle("hide-desc");
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tracker">
|
<div className="tracker">
|
||||||
<ProfileHeader />
|
<ProfileHeader />
|
||||||
@ -246,7 +257,25 @@ export const Tracker = () => {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="taskList__head">
|
<div className="taskList__head">
|
||||||
<h3>Список всех задач</h3>
|
<div className="taskList__tasks-period">
|
||||||
|
<div className="month-period">
|
||||||
|
<p>
|
||||||
|
{25} - {35}
|
||||||
|
</p>
|
||||||
|
<h2>Сентября,</h2>
|
||||||
|
<h3>2023</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="buttons-month">
|
||||||
|
<button>
|
||||||
|
<img src={arrowViewReport} alt="<"></img>
|
||||||
|
</button>
|
||||||
|
<button>
|
||||||
|
<img src={arrowViewReport} alt=">"></img>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="taskList__head__search">
|
<div className="taskList__head__search">
|
||||||
<img src={search} alt="search" />
|
<img src={search} alt="search" />
|
||||||
<input
|
<input
|
||||||
@ -255,41 +284,118 @@ export const Tracker = () => {
|
|||||||
onChange={(event) => filterAllTask(event)}
|
onChange={(event) => filterAllTask(event)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="taskList__filters">
|
||||||
|
<BaseButton styles={"taskList__filters-filter"}>
|
||||||
|
<img src={filterIcon} alt="#" />
|
||||||
|
<p>Фильтр</p>
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton styles={"taskList__filters-clear"}>
|
||||||
|
<p> Очистить фильтр</p>
|
||||||
|
</BaseButton>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{loader && <Loader style="green" />}
|
{loader && <Loader style="green" />}
|
||||||
|
<table className="taskList__table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Задача</th>
|
||||||
|
<th>Статус</th>
|
||||||
|
<th>Потраченное время</th>
|
||||||
|
<th>Дата начала</th>
|
||||||
|
<th>Дедлайн</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
{!loader && (
|
{!loader && (
|
||||||
<div className="taskList__wrapper">
|
<>
|
||||||
{Boolean(filteredAllTasks.length) &&
|
{Boolean(filteredAllTasks.length) &&
|
||||||
filteredAllTasks.map((task) => {
|
filteredAllTasks.map((task, index) => {
|
||||||
return (
|
return (
|
||||||
<div className="task" key={task.id}>
|
<tr key={task.id}>
|
||||||
<div className="task__info">
|
<td>
|
||||||
<h5>{task.title}</h5>
|
<div className="taskList__table__title-task">
|
||||||
<p
|
{task.title}
|
||||||
dangerouslySetInnerHTML={{
|
<div
|
||||||
__html: task.description,
|
onClick={(e) => {
|
||||||
|
toggleDescTask(e);
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
<img src={plus} alt="#" />
|
||||||
</div>
|
</div>
|
||||||
<div className="task__person">
|
</div>
|
||||||
<img
|
<div className="taskList__table__name-project hide-desc">
|
||||||
src={
|
<h4>Проект:</h4>
|
||||||
task.user?.avatar
|
<p>
|
||||||
? urlForLocal(task.user.avatar)
|
{projects.map((project) => {
|
||||||
: avatarMok
|
if (project.id == task.project_id) {
|
||||||
|
return project.name;
|
||||||
}
|
}
|
||||||
alt="avatar"
|
})}
|
||||||
/>
|
</p>
|
||||||
<div className="task__project">
|
|
||||||
<p>{task.user.fio}</p>
|
|
||||||
<span>{getCorrectDate(task.created_at)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div className="task-status">
|
||||||
|
{task.status == 1 ? "Active" : "Close"}
|
||||||
</div>
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{task.timers.map((item) => {
|
||||||
|
let time = new Date(item.deltaSeconds * 1000)
|
||||||
|
.toISOString()
|
||||||
|
.slice(11, 19);
|
||||||
|
return `${time}`;
|
||||||
|
})}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{new Date(task.created_at).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{new Date(task.dead_line).toLocaleDateString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</>
|
||||||
)}
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div className="taskList__time">
|
||||||
|
<div className="taskList__time-compited">
|
||||||
|
<h4>Учет моего рабочего времени за день</h4>
|
||||||
|
<h3>
|
||||||
|
Задач выполнено: <p>{2}</p>
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="taskList__time-all">
|
||||||
|
<h3>Общее время:</h3>
|
||||||
|
<p>{"4 ч 34 мин"}</p>
|
||||||
|
</div>
|
||||||
|
<div className="taskList__time-status">
|
||||||
|
<div>
|
||||||
|
<img src={statusTimeTask} alt="#" />
|
||||||
|
<p>Сверка пройдена</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src={downloadExel} alt="#" />
|
||||||
|
<p>Скачать Exel отчет</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="taskList__end">
|
||||||
|
<BaseButton styles={"close-day"}>
|
||||||
|
Закрыть сегоднящний день
|
||||||
|
</BaseButton>
|
||||||
|
<p>
|
||||||
|
Нажимая кнопку - “Закрыть сегодняшний день” - вы отправляете
|
||||||
|
потрачеенное время на сверку
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
@ -330,21 +436,24 @@ export const Tracker = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="archive__title-table">
|
|
||||||
<p>Задача</p>
|
|
||||||
<p>Потраченное время</p>
|
|
||||||
<p>Дата окончания</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="archive__tasksWrapper">
|
|
||||||
{loader && <Loader style="green" />}
|
{loader && <Loader style="green" />}
|
||||||
|
<table className="archive__table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Задача</th>
|
||||||
|
<th>Потраченное время</th>
|
||||||
|
<th>Дата окончания</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
{!loader && (
|
{!loader && (
|
||||||
<>
|
<>
|
||||||
{Boolean(filterCompleteTasks.length) ? (
|
{Boolean(filterCompleteTasks.length) ? (
|
||||||
filterCompleteTasks.map((task, index) => {
|
filterCompleteTasks.map((task, index) => {
|
||||||
return (
|
return (
|
||||||
<div className="archive__completeTask" key={index}>
|
<tr>
|
||||||
<div className="archive__completeTask__description">
|
<td className="archive__completeTask__description">
|
||||||
<p className="completeTask__title">
|
<p className="completeTask__title">
|
||||||
{task.title}
|
{task.title}
|
||||||
</p>
|
</p>
|
||||||
@ -354,24 +463,27 @@ export const Tracker = () => {
|
|||||||
__html: task.description,
|
__html: task.description,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</td>
|
||||||
<div className="archive__completeTask__time">
|
<td className="archive__completeTask__time">
|
||||||
<p>
|
<p>
|
||||||
{task.timers.map((item) => {
|
{task.timers.length == 0
|
||||||
let time = new Date(item.deltaSeconds * 1000)
|
? "-"
|
||||||
|
: task.timers.map((item) => {
|
||||||
|
let time = new Date(
|
||||||
|
item.deltaSeconds * 1000
|
||||||
|
)
|
||||||
.toISOString()
|
.toISOString()
|
||||||
.slice(11, 19);
|
.slice(11, 19);
|
||||||
return `${time}`;
|
return `${time}`;
|
||||||
})}
|
})}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</td>
|
||||||
<div className="archive__completeTask__info">
|
<td className="archive__completeTask__info">
|
||||||
<div className="archive__completeTask__info__project">
|
<div>
|
||||||
{/*<span>Проект</span>*/}
|
|
||||||
<p>{getCorrectDate(task.updated_at)}</p>
|
<p>{getCorrectDate(task.updated_at)}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
</div>
|
</tr>
|
||||||
);
|
);
|
||||||
})
|
})
|
||||||
) : (
|
) : (
|
||||||
@ -381,7 +493,8 @@ export const Tracker = () => {
|
|||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div className="archive__projects">
|
<div className="archive__projects">
|
||||||
<div className="archive__projects-title">
|
<div className="archive__projects-title">
|
||||||
|
|||||||
@ -1184,7 +1184,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__search {
|
&__search {
|
||||||
margin-left: auto;
|
// margin-left: auto;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -1192,7 +1192,7 @@
|
|||||||
border: 1px solid #dde2e4;
|
border: 1px solid #dde2e4;
|
||||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
max-width: 450px;
|
max-width: 300px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
@ -1224,6 +1224,278 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__tasks-period {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 25px;
|
||||||
|
|
||||||
|
.buttons-month {
|
||||||
|
display: flex;
|
||||||
|
gap: 34px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #8dc63f;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-period {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1458dd;
|
||||||
|
font-size: 33px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #252c32;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&-filter {
|
||||||
|
width: 116px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-clear {
|
||||||
|
width: 151px;
|
||||||
|
height: 40px;
|
||||||
|
background: #b0babf;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 32px;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
height: 65px;
|
||||||
|
background: #f1f1f1;
|
||||||
|
color: #5b6871;
|
||||||
|
|
||||||
|
th {
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 10px;
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
color: #000;
|
||||||
|
tr {
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(241, 241, 241, 0.23);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
height: 65px;
|
||||||
|
border-bottom: 1px solid rgba(241, 241, 241, 1);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
max-width: 275px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #111112;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-status {
|
||||||
|
width: 130px;
|
||||||
|
border: 1px solid #52b709;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #000;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title-task {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
transition: 0.4s;
|
||||||
|
|
||||||
|
div {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
display: flex;
|
||||||
|
background-color: #000;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 90px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
transition: 0.4s;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__name-project {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: 0.4s;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin: 0;
|
||||||
|
color: #807777;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #000;
|
||||||
|
margin-top: -5px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__time {
|
||||||
|
padding: 30px 40px 20px 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #e1fccf;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #111112;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-compited {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1458dd;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
color: #5b6871;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-all {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1458dd;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-status {
|
||||||
|
display: flex;
|
||||||
|
gap: 64px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 55px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #5b6871;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__end {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 24px;
|
||||||
|
margin: 24px 0 40px 0;
|
||||||
|
|
||||||
|
.close-day {
|
||||||
|
padding: 8px 25px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #5b6871;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__wrapper {
|
&__wrapper {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1351,6 +1623,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hide-desc {
|
||||||
|
display: none !important;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.open-desc-item {
|
||||||
|
transition: 0.4s !important;
|
||||||
|
transform: rotate(45deg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
&__archive {
|
&__archive {
|
||||||
max-width: 1160px;
|
max-width: 1160px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
@ -1390,21 +1672,58 @@
|
|||||||
@media (max-width: 450px) {
|
@media (max-width: 450px) {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&-table {
|
&__table {
|
||||||
margin: 29px 0 0 0;
|
margin: 29px 0 0 0;
|
||||||
height: 67px;
|
height: 67px;
|
||||||
display: flex;
|
width: 100%;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: #f1f1f1;
|
|
||||||
color: #5b6871;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background: #f1f1f1;
|
||||||
|
color: #5b6871;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding-left: 15px;
|
height: 65px;
|
||||||
padding-right: 15px;
|
background: #f1f1f1;
|
||||||
margin-right: -6px;
|
color: #5b6871;
|
||||||
|
|
||||||
|
th {
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 10px;
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
color: #000;
|
||||||
|
tr {
|
||||||
|
background-color: white;
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
background-color: rgba(241, 241, 241, 0.23);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
height: 65px;
|
||||||
|
border-bottom: 1px solid rgba(241, 241, 241, 1);
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
max-width: 275px;
|
||||||
|
padding-left: 10px;
|
||||||
|
color: #111112;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1445,17 +1764,10 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
|
||||||
background: #f1f1f1;
|
background: #f1f1f1;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 12px 15px 7px 16px;
|
padding: 12px 15px 7px 16px;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(0.99);
|
|
||||||
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
|
|
||||||
transition: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
max-width: 420px;
|
max-width: 420px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -1537,8 +1849,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__description {
|
&__description {
|
||||||
width: 70px;
|
width: 270px;
|
||||||
max-width: 70px;
|
max-width: 270px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user