fakz9/Crm-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: boards with statuses fetch

Browse Source
This commit is contained in:
AlexSserb
2025-08-03 13:40:09 +04:00
parent 624c94155c
commit 5435750fb5
21 changed files with 265 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/deals/components/Board/Board.tsx
View File

@ -1,6 +1,6 @@
import React, { FC } from "react";
import { Box } from "@mantine/core";
import { BoardSchema } from "@/types/BoardSchema";
import { BoardSchema } from "@/client";
type Props = {
board: BoardSchema;

10
src/app/deals/components/Boards/Boards.tsx
View File

@ -4,11 +4,11 @@ import React from "react";
import { ScrollArea } from "@mantine/core";
import Board from "@/app/deals/components/Board/Board";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import { BoardSchema } from "@/client";
import SortableDnd from "@/components/SortableDnd";
import { BoardSchema } from "@/types/BoardSchema";
const Boards = () => {
const { boards } = useBoardsContext();
const { boards, setSelectedBoard } = useBoardsContext();
const renderBoard = (board: BoardSchema) => {
return <Board board={board} />;
@ -18,6 +18,11 @@ const Boards = () => {
console.log("onDragEnd:", itemId, newLexorank);
};
const selectBoard = (board: BoardSchema) => {
console.log("Board selecting:", board);
setSelectedBoard(board);
};
return (
<ScrollArea
offsetScrollbars={"x"}
@ -28,6 +33,7 @@ const Boards = () => {
initialItems={boards}
renderItem={renderBoard}
onDragEnd={onDragEnd}
onItemClick={selectBoard}
rowStyle={{ flexWrap: "nowrap" }}
/>
</ScrollArea>

2
src/app/deals/components/DndOverlay/DndOverlay.tsx
View File

@ -4,7 +4,7 @@ import DealCard from "@/app/deals/components/DealCard/DealCard";
import StatusColumn from "@/app/deals/components/StatusColumn/StatusColumn";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import { DealSchema } from "@/types/DealSchema";
import { StatusSchema } from "@/types/StatusSchema";
import { StatusSchema } from "@/client";
type Props = {
activeDeal: DealSchema | null;

2
src/app/deals/components/StatusColumn/StatusColumn.tsx
View File

@ -6,8 +6,8 @@ import {
} from "@dnd-kit/sortable";
import { Box, Stack, Text } from "@mantine/core";
import DealContainer from "@/app/deals/components/DealContainer/DealContainer";
import { StatusSchema } from "@/client";
import { DealSchema } from "@/types/DealSchema";
import { StatusSchema } from "@/types/StatusSchema";
import { sortByLexorank } from "@/utils/lexorank";
type Props = {

8
src/app/deals/contexts/BoardsContext.tsx
View File

@ -8,8 +8,8 @@ import React, {
useState,
} from "react";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import useBoards from "@/app/deals/hooks/useBoards";
import { BoardSchema } from "@/types/BoardSchema";
import { BoardSchema } from "@/client";
import useBoardsList from "@/hooks/useBoardsList";
type BoardsContextState = {
boards: BoardSchema[];
@ -21,11 +21,11 @@ type BoardsContextState = {
const BoardsContext = createContext<BoardsContextState | undefined>(undefined);
const useBoardsContextState = () => {
const { boards, setBoards } = useBoards();
const { selectedProject: project } = useProjectsContext();
const { boards, setBoards } = useBoardsList({ projectId: project?.id });
const [selectedBoard, setSelectedBoard] = useState<BoardSchema | null>(
null
);
const { selectedProject: project } = useProjectsContext();
useEffect(() => {
if (boards.length > 0 && selectedBoard === null) {

17
src/app/deals/contexts/StatusesContext.tsx
View File

@ -1,11 +1,16 @@
"use client";
import React, { createContext, FC, useContext } from "react";
import React, {
createContext,
FC,
useContext,
useEffect,
useState,
} from "react";
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
import useDeals from "@/app/deals/hooks/useDeals";
import useStatuses from "@/app/deals/hooks/useStatuses";
import { StatusSchema } from "@/client";
import { DealSchema } from "@/types/DealSchema";
import { StatusSchema } from "@/types/StatusSchema";
type StatusesContextState = {
statuses: StatusSchema[];
@ -19,10 +24,14 @@ const StatusesContext = createContext<StatusesContextState | undefined>(
);
const useStatusesContextState = () => {
const { statuses, setStatuses } = useStatuses();
const [statuses, setStatuses] = useState<StatusSchema[]>([]);
const { deals, setDeals } = useDeals();
const { selectedBoard } = useBoardsContext();
useEffect(() => {
setStatuses(selectedBoard?.statuses ?? []);
}, [selectedBoard]);
return {
statuses,
setStatuses,

14
src/app/deals/hooks/useBoards.ts
View File

@ -1,19 +1,9 @@
import { useEffect, useState } from "react";
import { BoardSchema } from "@/types/BoardSchema";
import { useState } from "react";
import { BoardSchema } from "@/client";
const useBoards = () => {
const [boards, setBoards] = useState<BoardSchema[]>([]);
useEffect(() => {
setBoards([
{ id: 1, name: "1 Item", rank: "0|aaaaaa:" },
{ id: 2, name: "2 Item", rank: "0|gggggg:" },
{ id: 3, name: "3 Item", rank: "0|mmmmmm:" },
{ id: 4, name: "4 Item", rank: "0|ssssss:" },
{ id: 5, name: "5 Item", rank: "0|zzzzzz:" },
]);
}, []);
return {
boards,
setBoards,

6
src/app/deals/hooks/useDeals.ts
View File

@ -9,19 +9,19 @@ const useDeals = () => {
{
id: 1,
name: "Deal 1",
rank: "0|gggggg:",
lexorank: "0|gggggg:",
statusId: 1,
},
{
id: 2,
name: "Deal 2",
rank: "0|mmmmmm:",
lexorank: "0|mmmmmm:",
statusId: 1,
},
{
id: 3,
name: "Deal 3",
rank: "0|ssssss:",
lexorank: "0|ssssss:",
statusId: 2,
},
];

6
src/app/deals/hooks/useDnd.ts
View File

@ -4,8 +4,8 @@ import { throttle } from "lodash";
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
import useGetNewRank from "@/app/deals/hooks/useGetNewRank";
import { getStatusId, isStatusId } from "@/app/deals/utils/statusId";
import { StatusSchema } from "@/client";
import { DealSchema } from "@/types/DealSchema";
import { StatusSchema } from "@/types/StatusSchema";
import { sortByLexorank } from "@/utils/lexorank";
type Props = {
@ -73,7 +73,7 @@ const useDnd = (props: Props) => {
? {
...deal,
statusId: overStatusId,
rank: newLexorank || deal.rank,
lexorank: newLexorank || deal.lexorank,
}
: deal
)
@ -100,7 +100,7 @@ const useDnd = (props: Props) => {
throttledSetStatuses(statuses =>
statuses.map(status =>
status.id === activeStatusId
? { ...status, rank: newRank }
? { ...status, lexorank: newRank }
: status
)
);

16
src/app/deals/hooks/useGetNewRank.ts
View File

@ -20,10 +20,10 @@ const useGetNewRank = () => {
: [overDealIndex, overDealIndex + 1];
const leftLexorank =
leftIndex >= 0 ? LexoRank.parse(deals[leftIndex].rank) : null;
leftIndex >= 0 ? LexoRank.parse(deals[leftIndex].lexorank) : null;
const rightLexorank =
rightIndex < deals.length
? LexoRank.parse(deals[rightIndex].rank)
? LexoRank.parse(deals[rightIndex].lexorank)
: null;
return getNewLexorank(leftLexorank, rightLexorank).toString();
@ -35,9 +35,11 @@ const useGetNewRank = () => {
) => {
const leftLexorank =
overDealIndex > 0
? LexoRank.parse(statusDeals[overDealIndex - 1].rank)
? LexoRank.parse(statusDeals[overDealIndex - 1].lexorank)
: null;
const rightLexorank = LexoRank.parse(statusDeals[overDealIndex].rank);
const rightLexorank = LexoRank.parse(
statusDeals[overDealIndex].lexorank
);
return getNewLexorank(leftLexorank, rightLexorank).toString();
};
@ -59,10 +61,12 @@ const useGetNewRank = () => {
: [overIndex, overIndex + 1];
const leftLexorank =
leftIndex >= 0 ? LexoRank.parse(statuses[leftIndex].rank) : null;
leftIndex >= 0
? LexoRank.parse(statuses[leftIndex].lexorank)
: null;
const rightLexorank =
rightIndex < statuses.length
? LexoRank.parse(statuses[rightIndex].rank)
? LexoRank.parse(statuses[rightIndex].lexorank)
: null;
return getNewLexorank(leftLexorank, rightLexorank).toString();

22
src/app/deals/hooks/useStatuses.ts
View File

@ -1,22 +0,0 @@
import { useEffect, useState } from "react";
import { StatusSchema } from "@/types/StatusSchema";
const useStatuses = () => {
const [statuses, setStatuses] = useState<StatusSchema[]>([]);
useEffect(() => {
setStatuses([
{ id: 1, name: "Todo", rank: "0|aaaaaa:" },
{ id: 2, name: "In progress", rank: "0|gggggg:" },
{ id: 3, name: "Testing", rank: "0|mmmmmm:" },
{ id: 4, name: "Ready", rank: "0|ssssss:" },
]);
}, []);
return {
statuses,
setStatuses,
};
};
export default useStatuses;