feat: board creation and actions dropdown

src/app/deals/components/Board/Board.tsx

@@ -1,5 +1,7 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
-import { Box } from "@mantine/core";
+import { IconDotsVertical, IconEdit, IconTrash } from "@tabler/icons-react";
+import { Box, Group, Menu, Text } from "@mantine/core";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { BoardSchema } from "@/lib/client";
 
 type Props = {
@@ -7,7 +9,54 @@ type Props = {
 };
 
 const Board: FC<Props> = ({ board }) => {
-    return <Box miw={100} style={{ borderWidth: 1, margin: 0 }}>{board.name}</Box>;
+    const [isHovered, setIsHovered] = useState(false);
+    const { selectedBoard } = useBoardsContext();
+
+    return (
+        <Group
+            miw={130}
+            px={"md"}
+            py={"xs"}
+            justify={"space-between"}
+            wrap={"nowrap"}
+            style={{ borderWidth: 1 }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}>
+            <Text>{board.name}</Text>
+            <Menu>
+                <Menu.Target>
+                    <Box
+                        style={{
+                            opacity:
+                                isHovered || selectedBoard?.id === board.id
+                                    ? 1
+                                    : 0,
+                            cursor: "pointer",
+                        }}
+                        onClick={e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }}>
+                        <IconDotsVertical size={16} />
+                    </Box>
+                </Menu.Target>
+                <Menu.Dropdown>
+                    <Menu.Item>
+                        <Group wrap={"nowrap"}>
+                            <IconEdit />
+                            <Text>Переименовать</Text>
+                        </Group>
+                    </Menu.Item>
+                    <Menu.Item>
+                        <Group wrap={"nowrap"}>
+                            <IconTrash />
+                            <Text>Удалить</Text>
+                        </Group>
+                    </Menu.Item>
+                </Menu.Dropdown>
+            </Menu>
+        </Group>
+    );
 };
 
 export default Board;

src/app/deals/components/Boards/Boards.tsx

@@ -2,12 +2,13 @@
 
 import React from "react";
 import { useMutation } from "@tanstack/react-query";
-import { ScrollArea } from "@mantine/core";
+import { Group, ScrollArea } from "@mantine/core";
 import Board from "@/app/deals/components/Board/Board";
+import CreateBoardButton from "@/app/deals/components/CreateBoardButton/CreateBoardButton";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import SortableDnd from "@/components/dnd/SortableDnd";
 import { BoardSchema } from "@/lib/client";
 import { updateBoardMutation } from "@/lib/client/@tanstack/react-query.gen";
-import SortableDnd from "@/components/dnd/SortableDnd";
 import { notifications } from "@/lib/notifications";
 
 const Boards = () => {
@@ -51,13 +52,16 @@ const Boards = () => {
             scrollbars={"x"}
             scrollbarSize={0}
             w={"100%"}>
-            <SortableDnd
+            <Group wrap={"nowrap"}>
-                initialItems={boards}
+                <SortableDnd
-                renderItem={renderBoard}
+                    initialItems={boards}
-                onDragEnd={onDragEnd}
+                    renderItem={renderBoard}
-                onItemClick={selectBoard}
+                    onDragEnd={onDragEnd}
-                rowStyle={{ flexWrap: "nowrap" }}
+                    onItemClick={selectBoard}
-            />
+                    rowStyle={{ flexWrap: "nowrap" }}
+                />
+                <CreateBoardButton />
+            </Group>
         </ScrollArea>
     );
 };

src/app/deals/components/CreateBoardButton/CreateBoardButton.tsx

@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { IconCheck, IconPlus, IconX } from "@tabler/icons-react";
+import { Box, Group, TextInput } from "@mantine/core";
+import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+
+const CreateBoardButton = () => {
+    const { onCreateBoardClick } = useBoardsContext();
+    const [isWriting, setIsWriting] = useState<boolean>(false);
+    const [name, setName] = useState<string>("");
+
+    const onStartCreating = () => {
+        setName("");
+        setIsWriting(true);
+    };
+
+    const onCancelCreating = () => setIsWriting(false);
+
+    const onCompleteCreating = () => {
+        if (name) {
+            onCreateBoardClick(name);
+        }
+        setIsWriting(false);
+    };
+
+    return (
+        <Box style={{ cursor: "pointer" }}>
+            {isWriting ? (
+                <Group>
+                    <TextInput
+                        placeholder={"Название доски"}
+                        variant={"unstyled"}
+                        value={name}
+                        onChange={e => setName(e.target.value)}
+                        onKeyDown={e =>
+                            e.key === "Enter" && onCompleteCreating()
+                        }
+                    />
+                    <Box onClick={onCompleteCreating}>
+                        <IconCheck />
+                    </Box>
+                    <Box onClick={onCancelCreating}>
+                        <IconX />
+                    </Box>
+                </Group>
+            ) : (
+                <Box onClick={onStartCreating}>
+                    <IconPlus />
+                </Box>
+            )}
+        </Box>
+    );
+};
+
+export default CreateBoardButton;

src/app/deals/components/DealCard/DealCard.tsx

@@ -6,7 +6,6 @@ type Props = {
 };
 
 const DealCard = ({ deal }: Props) => {
-    console.log("deal");
     return <Card>{deal.name}</Card>;
 };
 

src/app/deals/components/SortableItem/SortableItem.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-type Props = {
-    children: React.ReactNode;
-    id: string;
-};
-
-const SortableItem = ({ children, id }: Props) => {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({ id });
-
-    const style = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-        opacity: isDragging ? 0 : 1,
-    };
-
-    return (
-        <div
-            ref={setNodeRef}
-            style={style}
-            {...attributes}
-            {...listeners}>
-            {children}
-        </div>
-    );
-};
-
-export default SortableItem;

src/app/deals/components/StatusColumnWrapper/StatusColumnWrapper.tsx

@@ -8,11 +8,16 @@ type Props = {
     children: ReactNode;
 };
 
-const StatusColumnWrapper = ({ status, children, isDragging = false }: Props) => {
+const StatusColumnWrapper = ({
+    status,
+    children,
+    isDragging = false,
+}: Props) => {
     return (
         <Box
             style={{
-                backgroundColor: "#eee",
+                borderWidth: 1,
+                borderColor: "gray",
                 padding: 2,
                 width: "15vw",
                 minWidth: 150,

src/app/deals/contexts/BoardsContext.tsx

@@ -7,9 +7,14 @@ import React, {
     useEffect,
     useState,
 } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { LexoRank } from "lexorank";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
-import { BoardSchema } from "@/lib/client";
 import useBoardsList from "@/hooks/useBoardsList";
+import { BoardSchema } from "@/lib/client";
+import { createBoardMutation } from "@/lib/client/@tanstack/react-query.gen";
+import { notifications } from "@/lib/notifications";
+import { getMaxByLexorank, getNewLexorank } from "@/utils/lexorank";
 
 type BoardsContextState = {
     boards: BoardSchema[];
@@ -17,13 +22,18 @@ type BoardsContextState = {
     selectedBoard: BoardSchema | null;
     setSelectedBoard: React.Dispatch<React.SetStateAction<BoardSchema | null>>;
     refetchBoards: () => void;
+    onCreateBoardClick: (name: string) => void;
 };
 
 const BoardsContext = createContext<BoardsContextState | undefined>(undefined);
 
 const useBoardsContextState = () => {
     const { selectedProject: project } = useProjectsContext();
-    const { boards, setBoards, refetch: refetchBoards } = useBoardsList({ projectId: project?.id });
+    const {
+        boards,
+        setBoards,
+        refetch: refetchBoards,
+    } = useBoardsList({ projectId: project?.id });
     const [selectedBoard, setSelectedBoard] = useState<BoardSchema | null>(
         null
     );
@@ -44,12 +54,45 @@ const useBoardsContextState = () => {
         }
     }, [boards]);
 
+    const createBoard = useMutation({
+        ...createBoardMutation(),
+        onError: error => {
+            console.error(error);
+            notifications.error({
+                message: error.response?.data?.detail as string | undefined,
+            });
+            refetchBoards();
+        },
+        onSuccess: res => {
+            setBoards([...boards, res.board]);
+        },
+    });
+
+    const onCreateBoardClick = (name: string) => {
+        if (!project) return;
+        const lastBoard = getMaxByLexorank(boards);
+        const newLexorank = getNewLexorank(
+            lastBoard ? LexoRank.parse(lastBoard.lexorank) : null
+        );
+
+        createBoard.mutate({
+            body: {
+                board: {
+                    name,
+                    projectId: project.id,
+                    lexorank: newLexorank.toString(),
+                },
+            },
+        });
+    };
+
     return {
         boards,
         setBoards,
         selectedBoard,
         setSelectedBoard,
         refetchBoards,
+        onCreateBoardClick,
     };
 };
 

src/lib/client/@tanstack/react-query.gen.ts

@@ -1,8 +1,8 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
-import { type Options, getBoards, updateBoard, getDeals, updateDeal, getProjects, getStatuses, updateStatus } from '../sdk.gen';
+import { type Options, getBoards, createBoard, updateBoard, getDeals, updateDeal, getProjects, getStatuses, updateStatus } from '../sdk.gen';
 import { queryOptions, type UseMutationOptions } from '@tanstack/react-query';
-import type { GetBoardsData, UpdateBoardData, UpdateBoardError, UpdateBoardResponse2, GetDealsData, UpdateDealData, UpdateDealError, UpdateDealResponse2, GetProjectsData, GetStatusesData, UpdateStatusData, UpdateStatusError, UpdateStatusResponse2 } from '../types.gen';
+import type { GetBoardsData, CreateBoardData, CreateBoardError, CreateBoardResponse2, UpdateBoardData, UpdateBoardError, UpdateBoardResponse2, GetDealsData, UpdateDealData, UpdateDealError, UpdateDealResponse2, GetProjectsData, GetStatusesData, UpdateStatusData, UpdateStatusError, UpdateStatusResponse2 } from '../types.gen';
 import type { AxiosError } from 'axios';
 import { client as _heyApiClient } from '../client.gen';
 
@@ -57,6 +57,43 @@ export const getBoardsOptions = (options: Options<GetBoardsData>) => {
     });
 };
 
+export const createBoardQueryKey = (options: Options<CreateBoardData>) => createQueryKey('createBoard', options);
+
+/**
+ * Create Board
+ */
+export const createBoardOptions = (options: Options<CreateBoardData>) => {
+    return queryOptions({
+        queryFn: async ({ queryKey, signal }) => {
+            const { data } = await createBoard({
+                ...options,
+                ...queryKey[0],
+                signal,
+                throwOnError: true
+            });
+            return data;
+        },
+        queryKey: createBoardQueryKey(options)
+    });
+};
+
+/**
+ * Create Board
+ */
+export const createBoardMutation = (options?: Partial<Options<CreateBoardData>>): UseMutationOptions<CreateBoardResponse2, AxiosError<CreateBoardError>, Options<CreateBoardData>> => {
+    const mutationOptions: UseMutationOptions<CreateBoardResponse2, AxiosError<CreateBoardError>, Options<CreateBoardData>> = {
+        mutationFn: async (localOptions) => {
+            const { data } = await createBoard({
+                ...options,
+                ...localOptions,
+                throwOnError: true
+            });
+            return data;
+        }
+    };
+    return mutationOptions;
+};
+
 /**
  * Update Board
  */

src/lib/client/sdk.gen.ts

@@ -1,8 +1,8 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import type { Options as ClientOptions, TDataShape, Client } from './client';
-import type { GetBoardsData, GetBoardsResponses, GetBoardsErrors, UpdateBoardData, UpdateBoardResponses, UpdateBoardErrors, GetDealsData, GetDealsResponses, GetDealsErrors, UpdateDealData, UpdateDealResponses, UpdateDealErrors, GetProjectsData, GetProjectsResponses, GetStatusesData, GetStatusesResponses, GetStatusesErrors, UpdateStatusData, UpdateStatusResponses, UpdateStatusErrors } from './types.gen';
+import type { GetBoardsData, GetBoardsResponses, GetBoardsErrors, CreateBoardData, CreateBoardResponses, CreateBoardErrors, UpdateBoardData, UpdateBoardResponses, UpdateBoardErrors, GetDealsData, GetDealsResponses, GetDealsErrors, UpdateDealData, UpdateDealResponses, UpdateDealErrors, GetProjectsData, GetProjectsResponses, GetStatusesData, GetStatusesResponses, GetStatusesErrors, UpdateStatusData, UpdateStatusResponses, UpdateStatusErrors } from './types.gen';
-import { zGetBoardsData, zGetBoardsResponse2, zUpdateBoardData, zUpdateBoardResponse2, zGetDealsData, zGetDealsResponse2, zUpdateDealData, zUpdateDealResponse2, zGetProjectsData, zGetProjectsResponse2, zGetStatusesData, zGetStatusesResponse2, zUpdateStatusData, zUpdateStatusResponse2 } from './zod.gen';
+import { zGetBoardsData, zGetBoardsResponse2, zCreateBoardData, zCreateBoardResponse2, zUpdateBoardData, zUpdateBoardResponse2, zGetDealsData, zGetDealsResponse2, zUpdateDealData, zUpdateDealResponse2, zGetProjectsData, zGetProjectsResponse2, zGetStatusesData, zGetStatusesResponse2, zUpdateStatusData, zUpdateStatusResponse2 } from './zod.gen';
 import { client as _heyApiClient } from './client.gen';
 
 export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = ClientOptions<TData, ThrowOnError> & {
@@ -36,6 +36,27 @@ export const getBoards = <ThrowOnError extends boolean = false>(options: Options
     });
 };
 
+/**
+ * Create Board
+ */
+export const createBoard = <ThrowOnError extends boolean = false>(options: Options<CreateBoardData, ThrowOnError>) => {
+    return (options.client ?? _heyApiClient).post<CreateBoardResponses, CreateBoardErrors, ThrowOnError>({
+        requestValidator: async (data) => {
+            return await zCreateBoardData.parseAsync(data);
+        },
+        responseType: 'json',
+        responseValidator: async (data) => {
+            return await zCreateBoardResponse2.parseAsync(data);
+        },
+        url: '/board/',
+        ...options,
+        headers: {
+            'Content-Type': 'application/json',
+            ...options.headers
+        }
+    });
+};
+
 /**
  * Update Board
  */

src/lib/client/types.gen.ts

@@ -4,14 +4,50 @@
  * BoardSchema
  */
 export type BoardSchema = {
+    /**
+     * Id
+     */
+    id: number;
     /**
      * Name
      */
     name: string;
     /**
-     * Id
+     * Lexorank
      */
-    id: number;
+    lexorank: string;
+};
+
+/**
+ * CreateBoardRequest
+ */
+export type CreateBoardRequest = {
+    board: CreateBoardSchema;
+};
+
+/**
+ * CreateBoardResponse
+ */
+export type CreateBoardResponse = {
+    /**
+     * Message
+     */
+    message: string;
+    board: BoardSchema;
+};
+
+/**
+ * CreateBoardSchema
+ */
+export type CreateBoardSchema = {
+    /**
+     * Name
+     */
+    name: string;
+    /**
+     * Projectid
+     */
+    projectId: number;
     /**
      * Lexorank
      */
@@ -267,6 +303,31 @@ export type GetBoardsResponses = {
 
 export type GetBoardsResponse2 = GetBoardsResponses[keyof GetBoardsResponses];
 
+export type CreateBoardData = {
+    body: CreateBoardRequest;
+    path?: never;
+    query?: never;
+    url: '/board/';
+};
+
+export type CreateBoardErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type CreateBoardError = CreateBoardErrors[keyof CreateBoardErrors];
+
+export type CreateBoardResponses = {
+    /**
+     * Successful Response
+     */
+    200: CreateBoardResponse;
+};
+
+export type CreateBoardResponse2 = CreateBoardResponses[keyof CreateBoardResponses];
+
 export type UpdateBoardData = {
     body: UpdateBoardRequest;
     path: {

src/lib/client/zod.gen.ts

@@ -6,11 +6,35 @@ import { z } from 'zod';
  * BoardSchema
  */
 export const zBoardSchema = z.object({
-    name: z.string(),
     id: z.int(),
+    name: z.string(),
     lexorank: z.string()
 });
 
+/**
+ * CreateBoardSchema
+ */
+export const zCreateBoardSchema = z.object({
+    name: z.string(),
+    projectId: z.int(),
+    lexorank: z.string()
+});
+
+/**
+ * CreateBoardRequest
+ */
+export const zCreateBoardRequest = z.object({
+    board: zCreateBoardSchema
+});
+
+/**
+ * CreateBoardResponse
+ */
+export const zCreateBoardResponse = z.object({
+    message: z.string(),
+    board: zBoardSchema
+});
+
 /**
  * DealSchema
  */
@@ -186,6 +210,17 @@ export const zGetBoardsData = z.object({
  */
 export const zGetBoardsResponse2 = zGetBoardsResponse;
 
+export const zCreateBoardData = z.object({
+    body: zCreateBoardRequest,
+    path: z.optional(z.never()),
+    query: z.optional(z.never())
+});
+
+/**
+ * Successful Response
+ */
+export const zCreateBoardResponse2 = zCreateBoardResponse;
+
 export const zUpdateBoardData = z.object({
     body: zUpdateBoardRequest,
     path: z.object({

src/utils/lexorank.ts

@@ -21,6 +21,15 @@ export function sortByLexorank<T extends LexorankSortable>(items: T[]): T[] {
     return items.sort(compareByLexorank);
 }
 
+export function getMaxByLexorank<T extends LexorankSortable>(
+    items: T[]
+): T | null {
+    return items.reduce(
+        (max, item) => (!max || item.lexorank > max.lexorank ? item : max),
+        null as T | null
+    );
+}
+
 export function getNewLexorank(
     left?: LexoRank | null,
     right?: LexoRank | null