tracker-connect
This commit is contained in:
parent
2fec7f4d28
commit
d8a7eb55f5
@ -3,10 +3,10 @@ import './loader.scss'
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
|
||||||
export const Loader = ({width = 50, height = 50}) => {
|
export const Loader = ({width = 50, height = 50, style}) => {
|
||||||
return (
|
return (
|
||||||
<div className='loader'>
|
<div className='loader'>
|
||||||
<SVGLoader type='Circles' color='#fff' height={height} width={width}/>
|
<SVGLoader type='Circles' color={style ? style : `#fff`} height={height} width={width}/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
@ -43,7 +43,7 @@ export const ProjectTiket = ({ project, index }) => {
|
|||||||
method: "PUT",
|
method: "PUT",
|
||||||
data: {
|
data: {
|
||||||
project_id: project.id,
|
project_id: project.id,
|
||||||
status: 0,
|
status: 10,
|
||||||
},
|
},
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
dispatch(deleteProject(project));
|
dispatch(deleteProject(project));
|
||||||
|
@ -62,6 +62,9 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
|||||||
setDescriptionTicket("");
|
setDescriptionTicket("");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function editProject() {
|
||||||
|
}
|
||||||
|
|
||||||
function getModal() {
|
function getModal() {
|
||||||
switch (modalType) {
|
switch (modalType) {
|
||||||
case "createColumn":
|
case "createColumn":
|
||||||
@ -156,7 +159,7 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
|
|||||||
></input>
|
></input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button className="button-add" onClick={(e) => e.preventDefault()}>
|
<button className="button-add" onClick={editProject}>
|
||||||
Сохранить
|
Сохранить
|
||||||
</button>
|
</button>
|
||||||
<span className="exit" onClick={() => setActive(false)}></span>
|
<span className="exit" onClick={() => setActive(false)}></span>
|
||||||
|
@ -21,7 +21,8 @@ export const ModalCreate = ({ active, setActive, title }) => {
|
|||||||
status: 1,
|
status: 1,
|
||||||
}
|
}
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
dispatch(setProject(res));
|
const result = {...res, columns: []}
|
||||||
|
dispatch(setProject(result));
|
||||||
setActive(false);
|
setActive(false);
|
||||||
setInputValue("");
|
setInputValue("");
|
||||||
})
|
})
|
||||||
@ -44,7 +45,7 @@ export const ModalCreate = ({ active, setActive, title }) => {
|
|||||||
className="name-project"
|
className="name-project"
|
||||||
value={inputValue}
|
value={inputValue}
|
||||||
onChange={(e) => setInputValue(e.target.value)}
|
onChange={(e) => setInputValue(e.target.value)}
|
||||||
></input>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button className="create-project" onClick={createName}>
|
<button className="create-project" onClick={createName}>
|
||||||
Создать
|
Создать
|
||||||
|
@ -4,15 +4,18 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
|
|||||||
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||||
import { Footer } from "../../components/Footer/Footer";
|
import { Footer } from "../../components/Footer/Footer";
|
||||||
import { Navigation } from "../../components/Navigation/Navigation";
|
import { Navigation } from "../../components/Navigation/Navigation";
|
||||||
|
import { Loader } from "../../components/Loader/Loader";
|
||||||
|
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { apiRequest } from "../../api/request";
|
import { apiRequest } from "../../api/request";
|
||||||
import {
|
import {
|
||||||
getProjectBoard,
|
getProjectBoard,
|
||||||
|
getBoarderLoader,
|
||||||
modalToggle,
|
modalToggle,
|
||||||
moveProjectTask,
|
moveProjectTask,
|
||||||
setProjectBoardFetch,
|
setProjectBoardFetch,
|
||||||
setToggleTab,
|
setToggleTab,
|
||||||
|
activeLoader
|
||||||
} from "../../redux/projectsTrackerSlice";
|
} from "../../redux/projectsTrackerSlice";
|
||||||
|
|
||||||
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
|
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
|
||||||
@ -42,8 +45,10 @@ export const ProjectTracker = () => {
|
|||||||
|
|
||||||
const startWrapperIndexTest = useRef({});
|
const startWrapperIndexTest = useRef({});
|
||||||
const projectBoard = useSelector(getProjectBoard);
|
const projectBoard = useSelector(getProjectBoard);
|
||||||
|
const loader = useSelector(getBoarderLoader)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
dispatch(activeLoader())
|
||||||
dispatch(setProjectBoardFetch(projectId.id));
|
dispatch(setProjectBoardFetch(projectId.id));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@ -186,6 +191,10 @@ export const ProjectTracker = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="tracker__tabs__content">
|
<div className="tracker__tabs__content">
|
||||||
|
{loader &&
|
||||||
|
<Loader style='green' />
|
||||||
|
}
|
||||||
|
{!loader &&
|
||||||
<div className="tracker__tabs__content__tasks tasks active__content">
|
<div className="tracker__tabs__content__tasks tasks active__content">
|
||||||
<div className="tasks__head">
|
<div className="tasks__head">
|
||||||
<div className="tasks__head__wrapper">
|
<div className="tasks__head__wrapper">
|
||||||
@ -365,8 +374,15 @@ export const ProjectTracker = () => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
{Boolean(projectBoard?.columns) &&
|
||||||
|
!Boolean(projectBoard.columns.length) &&
|
||||||
|
<div className='tasks__board__noItems'>
|
||||||
|
В проекте нет задач.
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
@ -13,6 +13,7 @@ import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
|
|||||||
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
|
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
|
||||||
import { urlForLocal } from '../../helper'
|
import { urlForLocal } from '../../helper'
|
||||||
import { getCorrectDate} from "../../components/Calendar/calendarHelper";
|
import { getCorrectDate} from "../../components/Calendar/calendarHelper";
|
||||||
|
import { Loader } from "../../components/Loader/Loader";
|
||||||
|
|
||||||
import project from "../../images/trackerProject.svg";
|
import project from "../../images/trackerProject.svg";
|
||||||
import tasks from "../../images/trackerTasks.svg";
|
import tasks from "../../images/trackerTasks.svg";
|
||||||
@ -29,6 +30,7 @@ export const Tracker = () => {
|
|||||||
const tab = useSelector(getToggleTab)
|
const tab = useSelector(getToggleTab)
|
||||||
const [allTasks, setAllTasks] = useState([])
|
const [allTasks, setAllTasks] = useState([])
|
||||||
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
|
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
|
||||||
|
const [loader, setLoader] = useState(false)
|
||||||
|
|
||||||
const [archiveProjects] = useState([
|
const [archiveProjects] = useState([
|
||||||
{
|
{
|
||||||
@ -71,8 +73,10 @@ export const Tracker = () => {
|
|||||||
const [modalCreateProject, setModalCreateProject] = useState(false);
|
const [modalCreateProject, setModalCreateProject] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setLoader(true)
|
||||||
apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
|
apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
|
||||||
dispatch(setAllProjects(el.projects))
|
dispatch(setAllProjects(el.projects))
|
||||||
|
setLoader(false)
|
||||||
})
|
})
|
||||||
apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
|
apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
|
||||||
setAllTasks(el)
|
setAllTasks(el)
|
||||||
@ -173,16 +177,22 @@ export const Tracker = () => {
|
|||||||
title={"Укажите название проекта:"}
|
title={"Укажите название проекта:"}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{Boolean(projects.length) &&
|
{loader &&
|
||||||
|
<Loader style='green'/>
|
||||||
|
}
|
||||||
|
|
||||||
|
{Boolean(projects.length) && !loader &&
|
||||||
projects.map((project, index) => {
|
projects.map((project, index) => {
|
||||||
return (
|
return (
|
||||||
|
project.status !== 10 ?
|
||||||
<ProjectTiket
|
<ProjectTiket
|
||||||
key={index}
|
key={index}
|
||||||
project={project}
|
project={project}
|
||||||
></ProjectTiket>
|
></ProjectTiket>
|
||||||
|
: ''
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{!Boolean(projects.length) && (
|
{(!Boolean(projects.length) || !Boolean(projects.filter((project) => project.status !== 10).length)) && !loader && (
|
||||||
<div className="no-projects">
|
<div className="no-projects">
|
||||||
<div className="no-projects__createNew">
|
<div className="no-projects__createNew">
|
||||||
<div>
|
<div>
|
||||||
@ -202,7 +212,7 @@ export const Tracker = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{Boolean(projects.length) && (
|
{Boolean(projects.length) && !loader && (
|
||||||
<div className="create-newProject">
|
<div className="create-newProject">
|
||||||
<button
|
<button
|
||||||
className="createProjectBtn"
|
className="createProjectBtn"
|
||||||
@ -235,6 +245,10 @@ export const Tracker = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{loader &&
|
||||||
|
<Loader style='green' />
|
||||||
|
}
|
||||||
|
{!loader &&
|
||||||
<div className="taskList__wrapper">
|
<div className="taskList__wrapper">
|
||||||
{Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
|
{Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
|
||||||
return (
|
return (
|
||||||
@ -254,6 +268,7 @@ export const Tracker = () => {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
|
@ -507,7 +507,8 @@
|
|||||||
padding: 15px;
|
padding: 15px;
|
||||||
background: #e1fccf;
|
background: #e1fccf;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
right: -75px;
|
right: -20px;
|
||||||
|
top: 5px;
|
||||||
z-index: 7;
|
z-index: 7;
|
||||||
row-gap: 10px;
|
row-gap: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -526,6 +527,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__noItems {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.board {
|
.board {
|
||||||
|
@ -6,6 +6,7 @@ const initialState = {
|
|||||||
projectBoard: {},
|
projectBoard: {},
|
||||||
toggleTab: 1,
|
toggleTab: 1,
|
||||||
modalType: "",
|
modalType: "",
|
||||||
|
boardLoader: false
|
||||||
};
|
};
|
||||||
|
|
||||||
export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
|
export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
|
||||||
@ -30,6 +31,9 @@ export const projectsTrackerSlice = createSlice({
|
|||||||
(project) => project.id !== action.payload.id
|
(project) => project.id !== action.payload.id
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
activeLoader: (state) => {
|
||||||
|
state.boardLoader = true
|
||||||
|
},
|
||||||
moveProjectTask: (state, action) => {
|
moveProjectTask: (state, action) => {
|
||||||
state.projectBoard.columns.forEach((column, index) => {
|
state.projectBoard.columns.forEach((column, index) => {
|
||||||
if (column.id === action.payload.columnId) {
|
if (column.id === action.payload.columnId) {
|
||||||
@ -56,6 +60,7 @@ export const projectsTrackerSlice = createSlice({
|
|||||||
extraReducers: {
|
extraReducers: {
|
||||||
[setProjectBoardFetch.fulfilled]: (state, action) => {
|
[setProjectBoardFetch.fulfilled]: (state, action) => {
|
||||||
state.projectBoard = action.payload;
|
state.projectBoard = action.payload;
|
||||||
|
state.boardLoader = false
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -67,11 +72,13 @@ export const {
|
|||||||
moveProjectTask,
|
moveProjectTask,
|
||||||
setToggleTab,
|
setToggleTab,
|
||||||
modalToggle,
|
modalToggle,
|
||||||
|
activeLoader
|
||||||
} = projectsTrackerSlice.actions;
|
} = projectsTrackerSlice.actions;
|
||||||
|
|
||||||
export const getProjects = (state) => state.tracker.projects;
|
export const getProjects = (state) => state.tracker.projects;
|
||||||
export const getProjectBoard = (state) => state.tracker.projectBoard;
|
export const getProjectBoard = (state) => state.tracker.projectBoard;
|
||||||
export const getToggleTab = (state) => state.tracker.toggleTab;
|
export const getToggleTab = (state) => state.tracker.toggleTab;
|
||||||
export const getValueModalType = (state) => state.tracker.modalType;
|
export const getValueModalType = (state) => state.tracker.modalType;
|
||||||
|
export const getBoarderLoader = (state) => state.tracker.boardLoader
|
||||||
|
|
||||||
export default projectsTrackerSlice.reducer;
|
export default projectsTrackerSlice.reducer;
|
||||||
|
Loading…
Reference in New Issue
Block a user