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;

25
src/client/@tanstack/react-query.gen.ts
View File

@ -2,8 +2,8 @@
import { queryOptions } from "@tanstack/react-query";
import { client as _heyApiClient } from "../client.gen";
import { getProjects, type Options } from "../sdk.gen";
import type { GetProjectsData } from "../types.gen";
import { getBoards, getProjects, type Options } from "../sdk.gen";
import type { GetBoardsData, GetProjectsData } from "../types.gen";
export type QueryKey<TOptions extends Options> = [
Pick<TOptions, "baseURL" | "body" | "headers" | "path" | "query"> & {
@ -61,3 +61,24 @@ export const getProjectsOptions = (options?: Options<GetProjectsData>) => {
queryKey: getProjectsQueryKey(options),
});
};
export const getBoardsQueryKey = (options: Options<GetBoardsData>) =>
createQueryKey("getBoards", options);
/**
* Get Boards
*/
export const getBoardsOptions = (options: Options<GetBoardsData>) => {
return queryOptions({
queryFn: async ({ queryKey, signal }) => {
const { data } = await getBoards({
...options,
...queryKey[0],
signal,
throwOnError: true,
});
return data;
},
queryKey: getBoardsQueryKey(options),
});
};

25
src/client/sdk.gen.ts
View File

@ -2,7 +2,13 @@
import type { Client, Options as ClientOptions, TDataShape } from "./client";
import { client as _heyApiClient } from "./client.gen";
import type { GetProjectsData, GetProjectsResponses } from "./types.gen";
import type {
GetBoardsData,
GetBoardsErrors,
GetBoardsResponses,
GetProjectsData,
GetProjectsResponses,
} from "./types.gen";
export type Options<
TData extends TDataShape = TDataShape,
@ -37,3 +43,20 @@ export const getProjects = <ThrowOnError extends boolean = false>(
...options,
});
};
/**
* Get Boards
*/
export const getBoards = <ThrowOnError extends boolean = false>(
options: Options<GetBoardsData, ThrowOnError>
) => {
return (options.client ?? _heyApiClient).get<
GetBoardsResponses,
GetBoardsErrors,
ThrowOnError
>({
responseType: "json",
url: "/board/{project_id}",
...options,
});
};

108
src/client/types.gen.ts
View File

@ -1,5 +1,37 @@
// This file is auto-generated by @hey-api/openapi-ts
/**
* BoardSchema
*/
export type BoardSchema = {
/**
* Name
*/
name: string;
/**
* Id
*/
id: number;
/**
* Lexorank
*/
lexorank: string;
/**
* Statuses
*/
statuses: Array<StatusSchema>;
};
/**
* GetBoardsResponse
*/
export type GetBoardsResponse = {
/**
* Boards
*/
boards: Array<BoardSchema>;
};
/**
* GetProjectsResponse
*/
@ -10,6 +42,16 @@ export type GetProjectsResponse = {
projects: Array<ProjectSchema>;
};
/**
* HTTPValidationError
*/
export type HttpValidationError = {
/**
* Detail
*/
detail?: Array<ValidationError>;
};
/**
* ProjectSchema
*/
@ -24,6 +66,42 @@ export type ProjectSchema = {
id: number;
};
/**
* StatusSchema
*/
export type StatusSchema = {
/**
* Name
*/
name: string;
/**
* Id
*/
id: number;
/**
* Lexorank
*/
lexorank: string;
};
/**
* ValidationError
*/
export type ValidationError = {
/**
* Location
*/
loc: Array<string | number>;
/**
* Message
*/
msg: string;
/**
* Error Type
*/
type: string;
};
export type GetProjectsData = {
body?: never;
path?: never;
@ -41,6 +119,36 @@ export type GetProjectsResponses = {
export type GetProjectsResponse2 =
GetProjectsResponses[keyof GetProjectsResponses];
export type GetBoardsData = {
body?: never;
path: {
/**
* Project Id
*/
project_id: number;
};
query?: never;
url: "/board/{project_id}";
};
export type GetBoardsErrors = {
/**
* Validation Error
*/
422: HttpValidationError;
};
export type GetBoardsError = GetBoardsErrors[keyof GetBoardsErrors];
export type GetBoardsResponses = {
/**
* Successful Response
*/
200: GetBoardsResponse;
};
export type GetBoardsResponse2 = GetBoardsResponses[keyof GetBoardsResponses];
export type ClientOptions = {
baseURL: "http://localhost:8000" | (string & {});
};

46
src/components/SortableDnd/SortableDnd.tsx
View File

@ -7,34 +7,25 @@ import React, {
useMemo,
useState,
} from "react";
import {
Active,
DndContext,
DragEndEvent,
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
} from "@dnd-kit/core";
import {
SortableContext,
sortableKeyboardCoordinates,
} from "@dnd-kit/sortable";
import { Active, DndContext, DragEndEvent } from "@dnd-kit/core";
import { SortableContext } from "@dnd-kit/sortable";
import { LexoRank } from "lexorank";
import { Group } from "@mantine/core";
import { Box, Group } from "@mantine/core";
import useDndSensors from "@/app/deals/hooks/useSensors";
import { SortableItem } from "@/components/SortableDnd/SortableItem";
import { SortableOverlay } from "@/components/SortableDnd/SortableOverlay";
import { getNewLexorank, sortByLexorank } from "@/utils/lexorank";
type BaseItem = {
id: number;
rank: string;
lexorank: string;
};
type Props<T extends BaseItem> = {
initialItems: T[];
renderItem: (item: T) => ReactNode;
onDragEnd: (itemId: number, newLexorank: string) => void;
onItemClick: (item: T) => void;
rowStyle?: CSSProperties;
itemStyle?: CSSProperties;
};
@ -43,6 +34,7 @@ const SortableDnd = <T extends BaseItem>({
initialItems,
renderItem,
onDragEnd,
onItemClick,
rowStyle,
itemStyle,
}: Props<T>) => {
@ -57,12 +49,7 @@ const SortableDnd = <T extends BaseItem>({
setItems(sortByLexorank(initialItems));
}, [initialItems]);
const sensors = useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
})
);
const sensors = useDndSensors();
const onDragEndLocal = ({ active, over }: DragEndEvent) => {
if (over && active.id !== over?.id && activeItem) {
@ -81,10 +68,12 @@ const SortableDnd = <T extends BaseItem>({
}
const leftLexorank: LexoRank | null =
leftIndex >= 0 ? LexoRank.parse(items[leftIndex].rank) : null;
leftIndex >= 0
? LexoRank.parse(items[leftIndex].lexorank)
: null;
const rightLexorank: LexoRank | null =
rightIndex < items.length
? LexoRank.parse(items[rightIndex].rank)
? LexoRank.parse(items[rightIndex].lexorank)
: null;
const newLexorank = getNewLexorank(
@ -92,7 +81,7 @@ const SortableDnd = <T extends BaseItem>({
rightLexorank
).toString();
items[activeIndex].rank = newLexorank;
items[activeIndex].lexorank = newLexorank;
onDragEnd(items[activeIndex].id, newLexorank);
const sortedItems = sortByLexorank(items);
setItems([...sortedItems]);
@ -112,12 +101,19 @@ const SortableDnd = <T extends BaseItem>({
style={rowStyle}
role="application">
{items.map((item, index) => (
<SortableItem
<Box
key={index}
onClick={e => {
e.preventDefault();
e.stopPropagation();
onItemClick(item);
}}>
<SortableItem
itemStyle={itemStyle}
id={item.id}>
{renderItem(item)}
</SortableItem>
</Box>
))}
</Group>
</SortableContext>

7
src/components/SortableDnd/SortableItem.tsx
View File

@ -9,7 +9,11 @@ type Props = {
itemStyle?: CSSProperties;
};
export const SortableItem = ({ children, id }: PropsWithChildren<Props>) => {
export const SortableItem = ({
children,
itemStyle,
id,
}: PropsWithChildren<Props>) => {
const {
attributes,
isDragging,
@ -33,6 +37,7 @@ export const SortableItem = ({ children, id }: PropsWithChildren<Props>) => {
opacity: isDragging ? 0.4 : undefined,
transform: CSS.Translate.toString(transform),
transition,
...itemStyle,
};
return (

29
src/hooks/useBoardsList.ts Normal file
View File

@ -0,0 +1,29 @@
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { BoardSchema } from "@/client";
import { getBoardsOptions } from "@/client/@tanstack/react-query.gen";
type Props = {
projectId?: number;
};
const useBoardsList = ({ projectId }: Props) => {
const [boards, setBoards] = useState<BoardSchema[]>([]);
const { data, refetch, isLoading } = useQuery({
...getBoardsOptions({ path: { project_id: projectId! } }),
enabled: projectId !== undefined,
});
useEffect(() => {
if (projectId === undefined) {
setBoards([]);
} else if (data?.boards) {
setBoards(data.boards);
}
}, [data?.boards, projectId]);
return { boards, setBoards, refetch, isLoading };
};
export default useBoardsList;

5
src/types/BoardSchema.ts
View File

@ -1,5 +0,0 @@
export type BoardSchema = {
id: number;
name: string;
rank: string;
};

2
src/types/DealSchema.ts
View File

@ -1,6 +1,6 @@
export type DealSchema = {
id: number;
name: string;
rank: string;
lexorank: string;
statusId: number;
};

5
src/types/StatusSchema.ts
View File

@ -1,5 +0,0 @@
export type StatusSchema = {
id: number;
name: string;
rank: string;
};

6
src/utils/lexorank.ts
View File

@ -1,17 +1,17 @@
import { LexoRank } from "lexorank";
type LexorankSortable = {
rank: string;
lexorank: string;
};
export function compareByLexorank<T extends LexorankSortable>(
a: T,
b: T
): -1 | 1 | 0 {
if (a.rank < b.rank) {
if (a.lexorank < b.lexorank) {
return -1;
}
if (a.rank > b.rank) {
if (a.lexorank > b.lexorank) {
return 1;
}
return 0;