Added fullScreen ticket

This commit is contained in:
MaxOvs19 2023-04-20 20:10:08 +03:00
parent ab2ff123a0
commit cb79f3c063
11 changed files with 384 additions and 63 deletions

View File

@ -1,6 +1,10 @@
import React from 'react' import React from "react";
import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom'; import {
BrowserRouter as Router,
Route,
Routes,
Navigate,
} from "react-router-dom";
import AuthForPartners from "./pages/AuthForPartners/AuthForPartners"; import AuthForPartners from "./pages/AuthForPartners/AuthForPartners";
import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers"; import AuthForDevelopers from "./pages/AuthForDevelopers/AuthForDevelopers";
@ -22,6 +26,7 @@ import { Summary } from "./pages/Summary/Summary";
import { ViewReport } from "./pages/ViewReport/ViewReport"; import { ViewReport } from "./pages/ViewReport/ViewReport";
import { Tracker } from "./pages/Tracker/Tracker"; import { Tracker } from "./pages/Tracker/Tracker";
import { Payouts } from "./pages/Payouts/Payouts"; import { Payouts } from "./pages/Payouts/Payouts";
import { TicketFullScreen } from "./components/UI/TicketFullScreen/TicketFullScreen";
import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings"; import { PartnerSettings } from "./pages/PartnerSettings/PartnerSettings";
import { PartnerRequests } from "./pages/PartnerRequests/PartnerRequests"; import { PartnerRequests } from "./pages/PartnerRequests/PartnerRequests";
import { PartnerAddRequest } from "./pages/PartnerAddRequest/PartnerAddRequest"; import { PartnerAddRequest } from "./pages/PartnerAddRequest/PartnerAddRequest";
@ -29,66 +34,73 @@ import { PartnerBid } from "./pages/PartnerBid/PartnerBid";
import { PartnerCategories } from "./pages/PartnerСategories/PartnerСategories"; import { PartnerCategories } from "./pages/PartnerСategories/PartnerСategories";
import { PartnerTreaties } from "./pages/PartnerTreaties/PartnerTreaties"; import { PartnerTreaties } from "./pages/PartnerTreaties/PartnerTreaties";
import { PartnerEmployees } from "./pages/PartnerEmployees/PartnerEmployees"; import { PartnerEmployees } from "./pages/PartnerEmployees/PartnerEmployees";
import {AuthForCandidate} from "./pages/AuthForCandidate/AuthForCandidate"; import { AuthForCandidate } from "./pages/AuthForCandidate/AuthForCandidate";
import {RegistrationForCandidate} from "./pages/RegistrationForCandidate/RegistrationForCandidate"; import { RegistrationForCandidate } from "./pages/RegistrationForCandidate/RegistrationForCandidate";
import './fonts/stylesheet.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import "./fonts/stylesheet.css";
import "bootstrap/dist/css/bootstrap.min.css";
const App = () => { const App = () => {
return ( return (
<> <>
<Router> <Router>
<Routes> <Routes>
<Route exact path="/authdev" element={<AuthForDevelopers />} />
<Route exact path='/authdev' element={<AuthForDevelopers/>}/> <Route exact path="/auth" element={<AuthForPartners />} />
<Route exact path='/auth' element={<AuthForPartners/>}/>
<Route exact path="/worker/:id" element={<FreeDevelopers />} /> <Route exact path="/worker/:id" element={<FreeDevelopers />} />
<Route exact path='/auth-candidate' element={<AuthForCandidate/>}/> <Route
<Route exact path='/registration-candidate' element={<RegistrationForCandidate/>}/> exact
path="/tracker/:id"
element={<TicketFullScreen />}
></Route>
<Route exact path="/auth-candidate" element={<AuthForCandidate />} />
<Route
exact
path="/registration-candidate"
element={<RegistrationForCandidate />}
/>
<Route exact path='/candidate/:id' element={<Candidate/>}/> <Route exact path="/candidate/:id" element={<Candidate />} />
<Route exact path='/candidate/:id/form' element={<FormPage/>}/> <Route exact path="/candidate/:id/form" element={<FormPage />} />
<Route path='/:userId/calendar' element={<Calendar/>}/> <Route path="/:userId/calendar" element={<Calendar />} />
<Route exact path='/report' element={<ReportForm/>}/> <Route exact path="/report" element={<ReportForm />} />
<Route path='/report/:id' element={<SingleReportPage/>}/> <Route path="/report/:id" element={<SingleReportPage />} />
<Route exact path='quiz'> <Route exact path="quiz">
<Route index element={<QuizPage/>}/> <Route index element={<QuizPage />} />
<Route exact path='interjacent' element={<InterjacentPage/>}/> <Route exact path="interjacent" element={<InterjacentPage />} />
<Route exact path='test' element={<QuizTestPage/>}/> <Route exact path="test" element={<QuizTestPage />} />
<Route exact path='instruction' element={<InstructionPage/>}/> <Route exact path="instruction" element={<InstructionPage />} />
<Route exact path='result' element={<ResultPage/>}/> <Route exact path="result" element={<ResultPage />} />
</Route> </Route>
<Route exact path='profile'> <Route exact path="profile">
<Route index element={<Profile/>}/> <Route index element={<Profile />} />
<Route exact path='catalog' element={<Home/>}/> <Route exact path="catalog" element={<Home />} />
<Route exact path='calendar' element={<ProfileCalendar/>}/> <Route exact path="calendar" element={<ProfileCalendar />} />
<Route exact path='summary' element={<Summary/>}/> <Route exact path="summary" element={<Summary />} />
<Route exact path='view' element={<ViewReport/>}/> <Route exact path="view" element={<ViewReport />} />
<Route exact path='tracker' element={<Tracker/>}/> <Route exact path="tracker" element={<Tracker />} />
<Route exact path='payouts' element={<Payouts/>}/> <Route exact path="payouts" element={<Payouts />} />
<Route exact path='settings' element={<PartnerSettings/>}/> <Route exact path="settings" element={<PartnerSettings />} />
<Route exact path='requests' element={<PartnerRequests/>}/> <Route exact path="requests" element={<PartnerRequests />} />
<Route exact path='add-request' element={<PartnerAddRequest/>}/> <Route exact path="add-request" element={<PartnerAddRequest />} />
<Route exact path='bid' element={<PartnerBid/>}/> <Route exact path="bid" element={<PartnerBid />} />
<Route exact path='categories' element={<PartnerCategories/>}/> <Route exact path="categories" element={<PartnerCategories />} />
<Route exact path='treaties' element={<PartnerTreaties/>}/> <Route exact path="treaties" element={<PartnerTreaties />} />
<Route exact path='categories/employees' element={<PartnerEmployees/>}/> <Route
exact
path="categories/employees"
element={<PartnerEmployees />}
/>
</Route> </Route>
<Route path="*" element={<Navigate to="/auth" replace/>}/> <Route path="*" element={<Navigate to="/auth" replace />} />
</Routes> </Routes>
</Router> </Router>
</> </>
) );
}; };
export default App export default App;

View File

@ -25,6 +25,9 @@
line-height: 32px; line-height: 32px;
color: #111112; color: #111112;
margin-bottom: 10px; margin-bottom: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
&__info { &__info {

View File

@ -15,7 +15,7 @@
position: relative; position: relative;
width: 424px; width: 424px;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 40px; border-radius: 24px;
padding: 60px 60px 30px 60px; padding: 60px 60px 30px 60px;
display: flex; display: flex;

View File

@ -1,5 +1,5 @@
.modal-project { .modal-project {
z-index: 9; z-index: 9999;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.11); background-color: rgba(0, 0, 0, 0.11);

View File

@ -13,11 +13,13 @@ import del from "../../../images/delete.svg";
import edit from "../../../images/edit.svg"; import edit from "../../../images/edit.svg";
import send from "../../../images/send.svg"; import send from "../../../images/send.svg";
import plus from "../../../images/plus.svg"; import plus from "../../../images/plus.svg";
import fullScreen from "../../../images/inFullScreen.svg";
import ModalAdd from "../ModalAdd/ModalAdd"; import ModalAdd from "../ModalAdd/ModalAdd";
import "./ModalTiket.scss"; import "./ModalTicket.scss";
import { Link } from "react-router-dom";
export const ModalTiket = ({ active, setActive }) => { export const ModalTiсket = ({ active, setActive, index }) => {
const [tiket] = useState({ const [tiket] = useState({
name: "Разработка трекера", name: "Разработка трекера",
code: "PR - 2245", code: "PR - 2245",
@ -50,6 +52,9 @@ export const ModalTiket = ({ active, setActive }) => {
<h3 className="title-project"> <h3 className="title-project">
<img src={category} className="title-project__category"></img> <img src={category} className="title-project__category"></img>
Проект: {tiket.name} Проект: {tiket.name}
<Link to={`/tracker/${index}`} className="title-project__full">
<img src={fullScreen}></img>
</Link>
</h3> </h3>
<div className="content__task"> <div className="content__task">
@ -154,4 +159,4 @@ export const ModalTiket = ({ active, setActive }) => {
); );
}; };
export default ModalTiket; export default ModalTiсket;

View File

@ -41,6 +41,10 @@
&__category { &__category {
margin-right: 17px; margin-right: 17px;
} }
&__full {
margin-left: 35%;
}
} }
&__task { &__task {

View File

@ -0,0 +1,256 @@
import React, { useState } from "react";
import { ProfileHeader } from "../../ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../Footer/Footer";
import { Link } from "react-router-dom";
import ModalAdd from "../ModalAdd/ModalAdd";
import avatarMock1 from "../../../images/avatarMoсk1.png";
import avatarMock2 from "../../../images/avatarMoсk2.png";
import project from "../../../images/trackerProject.svg";
import watch from "../../../images/watch.png";
import file from "../../../images/fileModal.svg";
import task from "../../../images/tasksMock.png";
import send from "../../../images/send.svg";
import arrow2 from "../../../images/arrowStart.png";
import plus from "../../../images/plus.svg";
import tasks from "../../../images/trackerTasks.svg";
import archive from "../../../images/archiveTracker.svg";
import selectArrow from "../../../images/select.svg";
import avatarTest from "../../../images/AvatarTest .png";
import arrow from "../../../images/arrowCalendar.png";
import link from "../../../images/link.svg";
import archive2 from "../../../images/archive.svg";
import del from "../../../images/delete.svg";
import edit from "../../../images/edit.svg";
import "./ticketFullScreen.scss";
export const TicketFullScreen = ({}) => {
const [toggleTab, setToggleTab] = useState(1);
const [addSubtask, setAddSubtask] = useState(false);
const [modalAddWorker, setModalAddWorker] = useState(false);
const [valueTiket, setValueTiket] = useState("");
const [tiket] = useState({
name: "Разработка трекера",
code: "PR - 2245",
creator: "Василий Тарасов",
descriptions:
"На многих страницах сайта отсутствуют или некорректно заполнены метатеги Description. Это может негативно повлиять на представление сайта в результатах поиска. Необходимо исправить все страницы где есть ошибки или отсутствует Title и Description.",
});
const [workers] = useState([
{
name: "Дмитрий Рогов",
avatar: avatarMock2,
},
{
name: "Марина Серова",
avatar: avatarMock1,
},
]);
const toggleTabs = (index) => {
setToggleTab(index);
};
return (
<section className="ticket-full-screen">
<ProfileHeader />
<div className="container">
<div className="tracker__content">
<ProfileBreadcrumbs
links={[
{ name: "Главная", link: "/profile" },
{ name: "Трекер", link: "/profile/tracker" },
]}
/>
<h2 className="tracker__title">Управление проектами с трекером</h2>
</div>
</div>
<div className="tracker__tabs">
<div className="tracker__tabs__head">
<div
className={toggleTab === 1 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(1)}
>
<img src={project} alt="img" />
<p>Проекты </p>
</div>
<div
className={toggleTab === 2 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(2)}
>
<img src={tasks} alt="img" />
<Link to={`/profile/tracker`} className="link">
<p>Все мои задачи</p>
</Link>
</div>
<div
className={toggleTab === 3 ? "tab active-tab" : "tab"}
onClick={() => toggleTabs(3)}
>
<img src={archive} alt="img" />
<Link to={`/profile/tracker`} className="link">
<p>Архив</p>
</Link>
</div>
</div>
<div className="tracker__tabs__content content-tabs">
<div className="tasks__head">
<div className="tasks__head__wrapper">
<h4>Проект : Разработка трекера</h4>
<ModalAdd active={modalAddWorker} setActive={setModalAddWorker}>
<div className="title-project">
<h4>Добавьте участника</h4>
<p className="title-project__decs">Введите имя или e-mail</p>
<div className="input-container">
<input
className="name-project"
value={valueTiket}
onChange={(e) => setValueTiket(e.target.value)}
></input>
</div>
</div>
<button
className="button-add"
onClick={(e) => e.preventDefault()}
>
Добавить
</button>
</ModalAdd>
<div className="tasks__head__persons">
<img src={avatarTest} alt="avatar" />
<img src={avatarTest} alt="avatar" />
<span className="countPersons">+9</span>
<span className="addPerson" onClick={setModalAddWorker}>
+
</span>
<p>добавить участника в проект</p>
</div>
<div className="tasks__head__select">
<span>Учавствую</span>
<img src={selectArrow} alt="arrow" />
</div>
<div className="tasks__head__select">
<span>Мои</span>
<img src={selectArrow} alt="arrow" />
</div>
<Link to={`/profile/tracker`} className="link">
<div className="tasks__head__back">
<p>Вернуться на проекты</p>
<img src={arrow} alt="arrow" />
</div>
</Link>
</div>
</div>
</div>
<div className="modal-tiket__content ticket">
<div className="content ticket-whith">
<div className="content__task">
<span>Задача</span>
<h5>{tiket.code}</h5>
<div className="content__description">
<p>{tiket.descriptions}</p>
<img src={task} className="image-task"></img>
<p>{tiket.descriptions}</p>
</div>
<div className="content__communication">
<p className="tasks">
<button onClick={() => setAddSubtask(true)}>
<img src={plus}></img>
Добавить под задачу
</button>
</p>
<p className="file">
<button>
<img src={file}></img>
Загрузить файл
</button>
<span>{0}</span>
Файлов
</p>
</div>
<div className="content__input">
<input placeholder="Оставить комментарий"></input>
<img src={send}></img>
</div>
</div>
</div>
<div className="workers">
<div className="workers_box">
<p className="workers__creator">Создатель : {tiket.creator}</p>
<div>
{workers.map((worker, index) => {
return (
<div className="worker" key={index}>
<img src={worker.avatar}></img>
<p>{worker.name}</p>
</div>
);
})}
</div>
<div className="add-worker moreItems">
<button>+</button>
<span>Добавить участников</span>
</div>
</div>
<div className="workers_box-middle">
<div className="time">
<img src={watch}></img>
<span>Длительность : </span>
<p>{"8:30:22"}</p>
</div>
<button className="start">
Начать делать <img src={arrow2}></img>
</button>
</div>
<div className="workers_box-bottom">
<div>
<img src={edit}></img>
<p>редактировать</p>
</div>
<div>
<img src={link}></img>
<p>ссылка на проект</p>
</div>
<div>
<img src={archive2}></img>
<p>в архив</p>
</div>
<div>
<img src={del}></img>
<p>удалить</p>
</div>
</div>
</div>
</div>
<ModalAdd active={addSubtask} setActive={setAddSubtask}>
<div className="title-project subtask">
<h4>
Вы добавляете подзадачу <p>в колонку задачи {"Готово"}</p>
</h4>
<p className="title-project__decs">Введите текст</p>
<div>
<textarea className="title-project__textarea"></textarea>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
Добавить
</button>
</ModalAdd>
</div>
<Footer />
</section>
);
};
export default TicketFullScreen;

View File

@ -0,0 +1,28 @@
.ticket-full-screen {
background: #f5f5f5;
}
.ticket {
border: none;
justify-content: center;
&-whith {
width: 850px !important;
}
}
// .modal-tiket__content .content {
// width: 70%;
// }
.content-tabs {
padding-bottom: 0;
}
.link {
color: #252c32;
&:hover {
color: #252c32;
text-decoration: none;
}
}

View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3924 1.46561C12.97 1.46561 12.532 1.46561 12.0946 1.46561C11.4596 1.46561 10.8239 1.47174 10.189 1.46289C9.75703 1.45675 9.44363 1.14472 9.44023 0.744116C9.43682 0.344876 9.74477 0.0342039 10.1747 0.00354553C10.2312 -0.000542258 10.2878 0.00150164 10.345 0.00150164C11.9556 0.00150164 13.5668 -0.000542258 15.1774 0.00013904C15.6891 0.00013904 15.9977 0.289691 15.9991 0.78772C16.0025 2.44395 16.0011 4.10087 15.9964 5.75711C15.995 6.17747 15.7484 6.49087 15.3941 6.55354C15.0643 6.61214 14.736 6.42751 14.5915 6.11206C14.5322 5.98194 14.5363 5.84704 14.5357 5.71214C14.5343 4.78149 14.5357 3.85152 14.5329 2.92086C14.5329 2.81322 14.5656 2.69876 14.522 2.62314C10.5596 6.58693 6.59513 10.5528 2.61771 14.5315C2.647 14.5813 2.74852 14.5315 2.82891 14.5315C3.79295 14.5356 4.75767 14.5322 5.7217 14.535C6.23268 14.5363 6.56242 14.8265 6.56242 15.2653C6.56242 15.6993 6.22586 15.9943 5.71557 15.9957C4.07092 15.9997 2.42558 16.0011 0.780928 15.9991C0.312195 15.9991 0.00220471 15.6993 0.00152341 15.2408C-0.00120178 13.573 -0.00052048 11.9051 0.0056112 10.2373C0.0069738 9.83331 0.243384 9.52537 0.579946 9.45042C0.906287 9.37753 1.23672 9.54717 1.39887 9.85988C1.47653 10.0098 1.46631 10.1678 1.467 10.3252C1.46904 11.3008 1.46768 12.2764 1.46836 13.2521C1.46836 13.3038 1.47313 13.3556 1.47449 13.3822C5.4451 9.41159 9.41434 5.44235 13.3924 1.46425V1.46561Z" fill="#0E0E0F"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -7,7 +7,7 @@ import { Footer } from "../../components/Footer/Footer";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { getProjects } from "../../redux/projectsTrackerSlice"; import { getProjects } from "../../redux/projectsTrackerSlice";
import ModalTiket from "../../components/UI/ModalTiket/ModalTiket"; import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
import ModalCreate from "../../components/UI/ModalCreate/ModalCreate"; import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
import ModalAdd from "../../components/UI/ModalAdd/ModalAdd"; import ModalAdd from "../../components/UI/ModalAdd/ModalAdd";
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket"; import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
@ -359,6 +359,7 @@ export const Tracker = () => {
// Modal State // Modal State
const [modalActiveTicket, setModalActiveTicket] = useState(false); const [modalActiveTicket, setModalActiveTicket] = useState(false);
const [indexTicket, setIndexTicket] = useState(0);
const [modalAddWorker, setModalAddWorker] = useState(false); const [modalAddWorker, setModalAddWorker] = useState(false);
const [modalCreateProject, setModalCreateProject] = useState(false); const [modalCreateProject, setModalCreateProject] = useState(false);
const [modalCreateColl, setModalCreateColl] = useState(false); const [modalCreateColl, setModalCreateColl] = useState(false);
@ -491,6 +492,11 @@ export const Tracker = () => {
setModalCreateTiket(true); setModalCreateTiket(true);
} }
function openTicket(e, iTicket) {
setIndexTicket(iTicket);
setModalActiveTicket(true);
}
function createTiket() { function createTiket() {
tabTaskMok.filter((item) => { tabTaskMok.filter((item) => {
if (item.name == selectedTab.name) { if (item.name == selectedTab.name) {
@ -710,9 +716,10 @@ export const Tracker = () => {
</div> </div>
</div> </div>
<ModalTiket <ModalTicket
active={modalActiveTicket} active={modalActiveTicket}
setActive={setModalActiveTicket} setActive={setModalActiveTicket}
index={indexTicket}
/> />
<ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}> <ModalAdd active={modalCreateTiket} setActive={setModalCreateTiket}>
@ -781,7 +788,7 @@ export const Tracker = () => {
dragStartHandler(e, task, wrapperIndex) dragStartHandler(e, task, wrapperIndex)
} }
onDragEnd={(e) => dragEndHandler(e)} onDragEnd={(e) => dragEndHandler(e)}
onClick={() => setModalActiveTicket(true)} onClick={(e) => openTicket(e, index)}
> >
<div className="tasks__board__item__title"> <div className="tasks__board__item__title">
<p>{task.task}</p> <p>{task.task}</p>

View File

@ -411,6 +411,9 @@
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
margin-bottom: 0; margin-bottom: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
span { span {