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

Merge pull request #84 from apuc/tracker-connect-back

Browse Source 
Tracker connect back
This commit is contained in:
NikoM1k 2023-05-05 00:51:55 +03:00 committed by GitHub
commit 5256159e2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 178 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Loader/Loader.js
View File

@ -3,10 +3,10 @@ import './loader.scss'
import React from "react";
export const Loader = ({width = 50, height = 50}) => {
export const Loader = ({width = 50, height = 50, style}) => {
return (
<div className='loader'>
<SVGLoader type='Circles' color='#fff' height={height} width={width}/>
<SVGLoader type='Circles' color={style ? style : `#fff`} height={height} width={width}/>
</div>
)
};

2
src/components/ProjectTiket/ProjectTiket.jsx
View File

@ -43,7 +43,7 @@ export const ProjectTiket = ({ project, index }) => {
method: "PUT",
data: {
project_id: project.id,
status: 0,
status: 10,
},
}).then((res) => {
dispatch(deleteProject(project));

5
src/components/UI/ModalAdd/ModalAdd.jsx
View File

@ -62,6 +62,9 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
setDescriptionTicket("");
}
function editProject() {
}
function getModal() {
switch (modalType) {
case "createColumn":
@ -156,7 +159,7 @@ export const ModalAdd = ({ active, setActive, selectedTab, defautlInput }) => {
></input>
</div>
</div>
<button className="button-add" onClick={(e) => e.preventDefault()}>
<button className="button-add" onClick={editProject}>
Сохранить
</button>
<span className="exit" onClick={() => setActive(false)}></span>

5
src/components/UI/ModalCreate/ModalCreate.jsx
View File

@ -21,7 +21,8 @@ export const ModalCreate = ({ active, setActive, title }) => {
status: 1,
}
}).then((res) => {
dispatch(setProject(res));
const result = {...res, columns: []}
dispatch(setProject(result));
setActive(false);
setInputValue("");
})
@ -44,7 +45,7 @@ export const ModalCreate = ({ active, setActive, title }) => {
className="name-project"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
></input>
/>
</div>
<button className="create-project" onClick={createName}>
Создать

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

@ -4,15 +4,18 @@ import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { Footer } from "../../components/Footer/Footer";
import { Navigation } from "../../components/Navigation/Navigation";
import { Loader } from "../../components/Loader/Loader";
import { useDispatch, useSelector } from "react-redux";
import { apiRequest } from "../../api/request";
import {
getProjectBoard,
getBoarderLoader,
modalToggle,
moveProjectTask,
setProjectBoardFetch,
setToggleTab,
activeLoader
} from "../../redux/projectsTrackerSlice";
import ModalTicket from "../../components/UI/ModalTicket/ModalTicket";
@ -42,8 +45,10 @@ export const ProjectTracker = () => {
const startWrapperIndexTest = useRef({});
const projectBoard = useSelector(getProjectBoard);
const loader = useSelector(getBoarderLoader)
useEffect(() => {
dispatch(activeLoader())
dispatch(setProjectBoardFetch(projectId.id));
}, []);
@ -186,6 +191,10 @@ export const ProjectTracker = () => {
</Link>
</div>
<div className="tracker__tabs__content">
{loader &&
<Loader style='green' />
}
{!loader &&
<div className="tracker__tabs__content__tasks tasks active__content">
<div className="tasks__head">
<div className="tasks__head__wrapper">
@ -365,8 +374,15 @@ export const ProjectTracker = () => {
</div>
);
})}
{Boolean(projectBoard?.columns) &&
!Boolean(projectBoard.columns.length) &&
<div className='tasks__board__noItems'>
В проекте нет задач.
</div>
}
</div>
</div>
}
</div>
</div>
<Footer />

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

@ -13,6 +13,7 @@ import ModalCreate from "../../components/UI/ModalCreate/ModalCreate";
import ProjectTiket from "../../components/ProjectTiket/ProjectTiket";
import { urlForLocal } from '../../helper'
import { getCorrectDate} from "../../components/Calendar/calendarHelper";
import { Loader } from "../../components/Loader/Loader";
import project from "../../images/trackerProject.svg";
import tasks from "../../images/trackerTasks.svg";
@ -29,6 +30,7 @@ export const Tracker = () => {
const tab = useSelector(getToggleTab)
const [allTasks, setAllTasks] = useState([])
const [filteredAllTasks, setFilteredAllTasks] = useState([]);
const [loader, setLoader] = useState(false)
const [archiveProjects] = useState([
{
@ -71,8 +73,10 @@ export const Tracker = () => {
const [modalCreateProject, setModalCreateProject] = useState(false);
useEffect(() => {
setLoader(true)
apiRequest(`/project/project-list?user_id=${localStorage.getItem('id')}&expand=columns`).then((el) => {
dispatch(setAllProjects(el.projects))
setLoader(false)
})
apiRequest(`/task/get-user-tasks?user_id=${localStorage.getItem('id')}`).then((el) => {
setAllTasks(el)
@ -173,16 +177,22 @@ export const Tracker = () => {
title={"Укажите название проекта:"}
/>
{Boolean(projects.length) &&
{loader &&
<Loader style='green'/>
}
{Boolean(projects.length) && !loader &&
projects.map((project, index) => {
return (
project.status !== 10 ?
<ProjectTiket
key={index}
project={project}
></ProjectTiket>
: ''
);
})}
{!Boolean(projects.length) && (
{(!Boolean(projects.length) || !Boolean(projects.filter((project) => project.status !== 10).length)) && !loader && (
<div className="no-projects">
<div className="no-projects__createNew">
<div>
@ -202,7 +212,7 @@ export const Tracker = () => {
</p>
</div>
)}
{Boolean(projects.length) && (
{Boolean(projects.length) && !loader && (
<div className="create-newProject">
<button
className="createProjectBtn"
@ -235,6 +245,10 @@ export const Tracker = () => {
/>
</div>
</div>
{loader &&
<Loader style='green' />
}
{!loader &&
<div className="taskList__wrapper">
{Boolean(filteredAllTasks.length) && filteredAllTasks.map((task) => {
return (
@ -254,6 +268,7 @@ export const Tracker = () => {
);
})}
</div>
}
</div>
<div
className={

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

@ -507,8 +507,9 @@
padding: 15px;
background: #e1fccf;
border-radius: 12px;
right: -75px;
z-index: 10;
right: -20px;
top: 5px;
z-index: 7;
row-gap: 10px;
display: flex;
flex-direction: column;
@ -526,6 +527,11 @@
}
}
}
&__noItems {
font-weight: 500;
font-size: 25px;
}
}
.board {

7
src/redux/projectsTrackerSlice.js
View File

@ -6,6 +6,7 @@ const initialState = {
projectBoard: {},
toggleTab: 1,
modalType: "",
boardLoader: false
};
export const setProjectBoardFetch = createAsyncThunk("userInfo", (id) =>
@ -30,6 +31,9 @@ export const projectsTrackerSlice = createSlice({
(project) => project.id !== action.payload.id
);
},
activeLoader: (state) => {
state.boardLoader = true
},
moveProjectTask: (state, action) => {
state.projectBoard.columns.forEach((column, index) => {
if (column.id === action.payload.columnId) {
@ -56,6 +60,7 @@ export const projectsTrackerSlice = createSlice({
extraReducers: {
[setProjectBoardFetch.fulfilled]: (state, action) => {
state.projectBoard = action.payload;
state.boardLoader = false
},
},
});
@ -67,11 +72,13 @@ export const {
moveProjectTask,
setToggleTab,
modalToggle,
activeLoader
} = projectsTrackerSlice.actions;
export const getProjects = (state) => state.tracker.projects;
export const getProjectBoard = (state) => state.tracker.projectBoard;
export const getToggleTab = (state) => state.tracker.toggleTab;
export const getValueModalType = (state) => state.tracker.modalType;
export const getBoarderLoader = (state) => state.tracker.boardLoader
export default projectsTrackerSlice.reducer;