NikoM1k
GitHub
commit
67f3f3b437
@ -13,7 +13,11 @@ export const ModalLayout = ({
|
||||
return (
|
||||
<div
|
||||
className={active ? `modal-layout active` : "modal-layout"}
|
||||
onClick={() => setActive(false)}
|
||||
onClick={(event) => {
|
||||
if (event.target.className === "modal-layout active") {
|
||||
setActive(false);
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
@ -22,7 +26,6 @@ export const ModalLayout = ({
|
||||
? `modal-layout__content ${styles}`
|
||||
: `modal-layout__content ${type}`
|
||||
}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@ -45,6 +45,16 @@
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.addPersonBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.invitePersonBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -64,7 +74,7 @@
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin: 0 auto 0 0;
|
||||
margin: 0 auto;
|
||||
max-width: 242px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -20,6 +20,12 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
password: "",
|
||||
});
|
||||
|
||||
const [inputsError, setInputsError] = useState({
|
||||
name: false,
|
||||
email: false,
|
||||
password: false,
|
||||
});
|
||||
|
||||
const validateEmail = (email) => {
|
||||
// регулярное выражение для проверки email
|
||||
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
@ -37,20 +43,29 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
};
|
||||
|
||||
const { showNotification } = useNotification();
|
||||
const submitHandler = () => {
|
||||
if (!inputsValue.password || !inputsValue.userName || !inputsValue.email) {
|
||||
return showNotification({
|
||||
show: true,
|
||||
text: "Введите коректные данные",
|
||||
type: "error",
|
||||
});
|
||||
|
||||
const validateForm = () => {
|
||||
if (inputsValue.password.length < 6) {
|
||||
setInputsError((prevValue) => ({ ...prevValue, password: true }));
|
||||
}
|
||||
if (inputsValue.userName.length < 6) {
|
||||
setInputsError((prevValue) => ({ ...prevValue, name: true }));
|
||||
}
|
||||
if (!validateEmail(inputsValue.email)) {
|
||||
return showNotification({
|
||||
show: true,
|
||||
text: "Введите коректный email",
|
||||
type: "error",
|
||||
});
|
||||
setInputsError((prevValue) => ({ ...prevValue, email: true }));
|
||||
}
|
||||
if (
|
||||
inputsValue.password.length < 6 ||
|
||||
inputsValue.userName.length < 6 ||
|
||||
!validateEmail(inputsValue.email)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const submitHandler = () => {
|
||||
if (validateForm()) {
|
||||
return;
|
||||
}
|
||||
apiRequest("/register/sign-up", {
|
||||
method: "POST",
|
||||
@ -90,43 +105,70 @@ export const ModalRegistration = ({ active, setActive }) => {
|
||||
|
||||
<div className="input-body">
|
||||
<div className="input-body__box">
|
||||
<div className="inputContainer">
|
||||
<h5>Ваше имя</h5>
|
||||
<input
|
||||
onChange={(e) =>
|
||||
className={inputsError.name ? "error" : ""}
|
||||
onChange={(e) => {
|
||||
setInputsError({
|
||||
name: false,
|
||||
email: false,
|
||||
password: false,
|
||||
});
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
userName: e.target.value,
|
||||
}))
|
||||
}
|
||||
}));
|
||||
}}
|
||||
placeholder="Name"
|
||||
/>
|
||||
{inputsError.name && <span>Минимум 6 символов</span>}
|
||||
</div>
|
||||
<div className="inputContainer">
|
||||
<h5>E-mail</h5>
|
||||
<input
|
||||
type="email"
|
||||
onChange={(e) =>
|
||||
className={inputsError.email ? "error" : ""}
|
||||
onChange={(e) => {
|
||||
setInputsError({
|
||||
name: false,
|
||||
email: false,
|
||||
password: false,
|
||||
});
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
email: e.target.value,
|
||||
}))
|
||||
}
|
||||
}));
|
||||
}}
|
||||
placeholder="Email"
|
||||
/>
|
||||
{inputsError.email && <span>Введите коректный email</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="input-body__box">
|
||||
{/*<h5>Название компании</h5>*/}
|
||||
{/*<input></input>*/}
|
||||
<div className="inputContainer">
|
||||
<h5>Пароль</h5>
|
||||
<input
|
||||
className={inputsError.password ? "error" : ""}
|
||||
type="password"
|
||||
onChange={(e) =>
|
||||
onChange={(e) => {
|
||||
setInputsError({
|
||||
name: false,
|
||||
email: false,
|
||||
password: false,
|
||||
});
|
||||
setInputsValue((prevValue) => ({
|
||||
...prevValue,
|
||||
password: e.target.value,
|
||||
}))
|
||||
}
|
||||
}));
|
||||
}}
|
||||
placeholder="Password"
|
||||
/>
|
||||
{inputsError.password && <span>Минимум 6 символов</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="button-box">
|
||||
|
||||
@ -59,9 +59,24 @@
|
||||
background: #eff2f7;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
margin-bottom: 35px;
|
||||
margin-bottom: 5px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.inputContainer {
|
||||
height: 81px;
|
||||
margin-bottom: 10px;
|
||||
max-width: 294px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.error {
|
||||
border: 1px solid red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
background: #e1fccf;
|
||||
border-radius: 12px;
|
||||
transform: scale(0);
|
||||
bottom: -90px;
|
||||
bottom: -40px;
|
||||
right: -120px;
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
|
||||
@ -80,7 +80,7 @@ export const ModalTiсket = ({
|
||||
const [users, setUsers] = useState([]);
|
||||
const [timerStart, setTimerStart] = useState(false);
|
||||
const [timerInfo, setTimerInfo] = useState({});
|
||||
const [uploadedFile, setUploadedFile] = useState(null);
|
||||
// const [uploadedFile, setUploadedFile] = useState(null);
|
||||
const [currentTimerCount, setCurrentTimerCount] = useState({
|
||||
hours: 0,
|
||||
minute: 0,
|
||||
@ -379,25 +379,26 @@ export const ModalTiсket = ({
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
setUploadedFile(data);
|
||||
// setUploadedFile(data);
|
||||
attachFile(data[0].id);
|
||||
}
|
||||
|
||||
function deleteLoadedFile() {
|
||||
setUploadedFile(null);
|
||||
}
|
||||
// function deleteLoadedFile() {
|
||||
// setUploadedFile(null);
|
||||
// }
|
||||
|
||||
function attachFile() {
|
||||
function attachFile(id) {
|
||||
apiRequest("/file/attach", {
|
||||
method: "POST",
|
||||
data: {
|
||||
file_id: uploadedFile[0].id,
|
||||
file_id: id,
|
||||
entity_type: 2,
|
||||
entity_id: task.id,
|
||||
status: 1,
|
||||
},
|
||||
}).then((res) => {
|
||||
setTaskFiles((prevValue) => [...prevValue, res]);
|
||||
setUploadedFile(null);
|
||||
// setUploadedFile(null);
|
||||
});
|
||||
}
|
||||
|
||||
@ -636,24 +637,24 @@ export const ModalTiсket = ({
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{uploadedFile && (
|
||||
<div className="fileLoaded">
|
||||
{uploadedFile.map((file) => {
|
||||
return (
|
||||
<div className="loadedFile" key={file.id}>
|
||||
<img src={backendImg(file.url)} alt="img" key={file.id} />
|
||||
<div
|
||||
className="deleteFile"
|
||||
onClick={() => deleteLoadedFile(file)}
|
||||
>
|
||||
<img src={close} alt="delete" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<button onClick={attachFile}>Загрузить</button>
|
||||
</div>
|
||||
)}
|
||||
{/*{uploadedFile && (*/}
|
||||
{/* <div className="fileLoaded">*/}
|
||||
{/* {uploadedFile.map((file) => {*/}
|
||||
{/* return (*/}
|
||||
{/* <div className="loadedFile" key={file.id}>*/}
|
||||
{/* <img src={backendImg(file.url)} alt="img" key={file.id} />*/}
|
||||
{/* <div*/}
|
||||
{/* className="deleteFile"*/}
|
||||
{/* onClick={() => deleteLoadedFile(file)}*/}
|
||||
{/* >*/}
|
||||
{/* <img src={close} alt="delete" />*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* );*/}
|
||||
{/* })}*/}
|
||||
{/* <button onClick={attachFile}>Загрузить</button>*/}
|
||||
{/* </div>*/}
|
||||
{/*)}*/}
|
||||
<div className="content__communication">
|
||||
{/*<p className="tasks">*/}
|
||||
{/* <button*/}
|
||||
|
||||
@ -360,24 +360,8 @@
|
||||
column-gap: 25px;
|
||||
row-gap: 20px;
|
||||
margin-top: 33px;
|
||||
max-height: 170px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd9f9;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #c5c0c6;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.taskFile {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
@ -29,6 +29,7 @@ import { useNotification } from "@hooks/useNotification";
|
||||
import { getCorrectDate } from "@components/Calendar/calendarHelper";
|
||||
import { Footer } from "@components/Common/Footer/Footer";
|
||||
import { Loader } from "@components/Common/Loader/Loader";
|
||||
import FileTracker from "@components/FileTracker/FileTracker";
|
||||
import AcceptModal from "@components/Modal/AcceptModal/AcceptModal";
|
||||
import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
|
||||
import { Navigation } from "@components/Navigation/Navigation";
|
||||
@ -483,20 +484,26 @@ export const TicketFullScreen = () => {
|
||||
setUploadedFile(null);
|
||||
}
|
||||
|
||||
// function deleteFile(file) {
|
||||
// apiRequest("/file/detach", {
|
||||
// method: "DELETE",
|
||||
// data: {
|
||||
// file_id: file.id,
|
||||
// entity_type: 2,
|
||||
// entity_id: taskInfo.id,
|
||||
// status: 0,
|
||||
// },
|
||||
// }).then(() => {
|
||||
// setTaskFiles((prevValue) =>
|
||||
// prevValue.filter((item) => item.id !== file.id)
|
||||
// );
|
||||
// });
|
||||
// }
|
||||
|
||||
function deleteFile(file) {
|
||||
apiRequest("/file/detach", {
|
||||
method: "DELETE",
|
||||
data: {
|
||||
file_id: file.id,
|
||||
entity_type: 2,
|
||||
entity_id: taskInfo.id,
|
||||
status: 0,
|
||||
},
|
||||
}).then(() => {
|
||||
setTaskFiles((prevValue) =>
|
||||
prevValue.filter((item) => item.id !== file.id)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function closeAcceptModal() {
|
||||
@ -800,19 +807,12 @@ export const TicketFullScreen = () => {
|
||||
<div className="task__files filesFullScreen">
|
||||
{taskFiles.map((file) => {
|
||||
return (
|
||||
<div className="taskFile" key={file.id}>
|
||||
<img
|
||||
className="imgFile"
|
||||
src={backendImg(file.file?.url)}
|
||||
alt="img"
|
||||
<FileTracker
|
||||
key={file.id}
|
||||
file={file}
|
||||
setDeletedTask={deleteFile}
|
||||
taskId={taskInfo.id}
|
||||
/>
|
||||
<div
|
||||
className="deleteFile"
|
||||
onClick={() => deleteFile(file)}
|
||||
>
|
||||
<img src={fileDelete} alt="delete" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@ -322,6 +322,7 @@ export const TrackerModal = ({
|
||||
} else {
|
||||
setCorrectProjectUsers(projectUsers);
|
||||
}
|
||||
initListeners();
|
||||
}, [active]);
|
||||
|
||||
useEffect(() => {
|
||||
@ -336,6 +337,38 @@ export const TrackerModal = ({
|
||||
}
|
||||
}, [taskTags, projectMarks]);
|
||||
|
||||
const initListeners = () => {
|
||||
document.addEventListener("click", closeByClickingOut);
|
||||
};
|
||||
|
||||
const closeByClickingOut = (event) => {
|
||||
const path = event.path || (event.composedPath && event.composedPath());
|
||||
|
||||
if (
|
||||
event &&
|
||||
!path.find(
|
||||
(div) =>
|
||||
div.classList &&
|
||||
(div.classList.contains("tags__selected__name") ||
|
||||
div.classList.contains("tags__dropDown"))
|
||||
)
|
||||
) {
|
||||
setSelectTagsOpen(false);
|
||||
}
|
||||
|
||||
if (
|
||||
event &&
|
||||
!path.find(
|
||||
(div) =>
|
||||
div.classList &&
|
||||
(div.classList.contains("select__executor") ||
|
||||
div.classList.contains("select__executor__dropDown"))
|
||||
)
|
||||
) {
|
||||
setSelectExecutorTaskOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalLayout
|
||||
active={active}
|
||||
|
||||
@ -43,7 +43,10 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
|
||||
if (
|
||||
event &&
|
||||
!path.find((item) => item.classList && item.classList.contains("project"))
|
||||
!path.find(
|
||||
(div) =>
|
||||
div.classList && div.classList.contains(`project-${project.id}`)
|
||||
)
|
||||
) {
|
||||
setModalSelect(false);
|
||||
}
|
||||
@ -73,7 +76,7 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
function linkProject() {}
|
||||
|
||||
return (
|
||||
<div className="project" key={index}>
|
||||
<div className={`project project-${project.id}`} key={index}>
|
||||
<Link
|
||||
to={`/tracker/project/${project.id}`}
|
||||
className="project__open-traker"
|
||||
@ -93,7 +96,12 @@ export const ProjectTiket = ({ project, index }) => {
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<span className="menu-settings" onClick={() => setModalSelect(true)}>
|
||||
<span
|
||||
className="menu-settings"
|
||||
onClick={() => {
|
||||
setModalSelect(!modalSelect);
|
||||
}}
|
||||
>
|
||||
...
|
||||
</span>
|
||||
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
font-size: 21px;
|
||||
color: #6f6f6f;
|
||||
right: 26px;
|
||||
top: 59px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
@ -104,10 +104,10 @@
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
left: 26px;
|
||||
color: #678eda;
|
||||
color: #0042b4;
|
||||
text-decoration: underline;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -151,6 +151,9 @@ export const Summary = () => {
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
{!Boolean(gitInfo.length) && (
|
||||
<p className="noGitItems">Нет актуальных проектов</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -298,6 +298,16 @@
|
||||
column-gap: 25px;
|
||||
justify-content: space-between;
|
||||
|
||||
.noGitItems {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
padding: 35px 30px 30px 45px;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gitItem {
|
||||
width: 48%;
|
||||
display: flex;
|
||||
|
||||
@ -391,9 +391,9 @@
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
|
||||
border-radius: 40px;
|
||||
padding: 31px 128px 41px 49px;
|
||||
padding: 15px 30px;
|
||||
cursor: default;
|
||||
width: 650px;
|
||||
width: 800px;
|
||||
|
||||
&__close {
|
||||
cursor: pointer;
|
||||
@ -410,7 +410,6 @@
|
||||
align-items: end;
|
||||
color: #1458dd;
|
||||
font-size: 22px;
|
||||
margin-top: 10px;
|
||||
span {
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
@ -462,7 +461,7 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 190px;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
.avatar {
|
||||
@ -479,7 +478,7 @@
|
||||
color: #807777;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 130px;
|
||||
max-width: 215px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user