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

feat: chats list on the left of the client chat

Browse Source
This commit is contained in:
AlexSserb
2025-04-16 13:58:02 +04:00
parent f28df5a074
commit d347c09199
12 changed files with 201 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/index.ts
View File

@@ -117,6 +117,7 @@ export type { CardUpdateServiceQuantityResponse } from './models/CardUpdateServi
export type { CardUpdateServiceRequest } from './models/CardUpdateServiceRequest';
export type { CardUpdateServiceResponse } from './models/CardUpdateServiceResponse';
export type { ChatSchema } from './models/ChatSchema';
export type { ChatsListItemSchema } from './models/ChatsListItemSchema';
export type { CityBreakdownFromExcelSchema } from './models/CityBreakdownFromExcelSchema';
export type { ClientCreateRequest } from './models/ClientCreateRequest';
export type { ClientCreateResponse } from './models/ClientCreateResponse';
@@ -255,6 +256,7 @@ export type { GetCardProductsBarcodesPdfResponse } from './models/GetCardProduct
export type { GetCardSummariesRequest } from './models/GetCardSummariesRequest';
export type { GetChatRequest } from './models/GetChatRequest';
export type { GetChatResponse } from './models/GetChatResponse';
export type { GetChatsListResponse } from './models/GetChatsListResponse';
export type { GetClientMarketplacesRequest } from './models/GetClientMarketplacesRequest';
export type { GetClientMarketplacesResponse } from './models/GetClientMarketplacesResponse';
export type { GetDepartmentSectionsResponse } from './models/GetDepartmentSectionsResponse';

13
src/client/models/ChatsListItemSchema.ts Normal file
View File

@@ -0,0 +1,13 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { TgGroupSchema } from './TgGroupSchema';
export type ChatsListItemSchema = {
id: number;
clientId: (number | null);
cardId: (number | null);
tgGroup: (TgGroupSchema | null);
name: string;
};

9
src/client/models/GetChatsListResponse.ts Normal file
View File

@@ -0,0 +1,9 @@
/* generated using openapi-typescript-codegen -- do not edit */
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { ChatsListItemSchema } from './ChatsListItemSchema';
export type GetChatsListResponse = {
chats: Array<ChatsListItemSchema>;
};

22
src/client/services/ChatService.ts
View File

@@ -10,6 +10,7 @@ import type { EditMessageRequest } from '../models/EditMessageRequest';
import type { EditMessageResponse } from '../models/EditMessageResponse';
import type { GetChatRequest } from '../models/GetChatRequest';
import type { GetChatResponse } from '../models/GetChatResponse';
import type { GetChatsListResponse } from '../models/GetChatsListResponse';
import type { GetMessagesRequest } from '../models/GetMessagesRequest';
import type { GetMessagesResponse } from '../models/GetMessagesResponse';
import type { LoadMessagesResponse } from '../models/LoadMessagesResponse';
@@ -150,6 +151,27 @@ export class ChatService {
},
});
}
/**
* Get Client Chats List
* @returns GetChatsListResponse Successful Response
* @throws ApiError
*/
public static getClientChatsList({
clientId,
}: {
clientId: number,
}): CancelablePromise<GetChatsListResponse> {
return __request(OpenAPI, {
method: 'GET',
url: '/chat/for-client/{client_id}',
path: {
'client_id': clientId,
},
errors: {
422: `Validation Error`,
},
});
}
/**
* Create Chat
* @returns CreateChatResponse Successful Response

17
src/components/Chat/Chat.tsx
View File

@@ -7,7 +7,12 @@ import MessageInput from "./components/MessageInput/MessageInput.tsx";
import { Virtuoso } from "react-virtuoso";
import { Stack } from "@mantine/core";
const Chat = () => {
type Props = {
height?: number | string;
padding?: number | string;
}
const Chat = ({ height = "96vh", padding = 0 }: Props) => {
const {
messages,
lastMessage,
@@ -45,7 +50,7 @@ const Chat = () => {
);
}
return (
<Stack mb={"xs"} mr={"xs"}>
<Stack mt={"xs"} mr={"xs"} ml={padding}>
{dateComponent}
<Message
key={`${sessionData.id}${index}`}
@@ -59,14 +64,14 @@ const Chat = () => {
if (messages.length === 0) {
return (
<Stack h={"96vh"} justify={"flex-end"}>
<MessageInput />
<Stack h={height} justify={"flex-end"}>
<MessageInput inputMargin={padding} />
</Stack>
);
}
return (
<Stack h={"96vh"}>
<Stack h={height}>
<Virtuoso
data={messages}
followOutput={onFollowOutputHandler}
@@ -78,7 +83,7 @@ const Chat = () => {
increaseViewportBy={200}
alignToBottom
/>
<MessageInput />
<MessageInput inputMargin={padding} />
</Stack>
);
};

12
src/components/Chat/components/ChatsList/ChatsList.module.css Normal file
View File

@@ -0,0 +1,12 @@
.chats-list-item {
cursor: pointer;
}
.chats-list-item-selected {
@mixin dark {
background-color: var(--mantine-color-dark-6);
}
@mixin light {
background-color: var(--mantine-color-gray-3);
}
}

50
src/components/Chat/components/ChatsList/ChatsList.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { Center, List, Text } from "@mantine/core";
import { ChatSchema, ChatsListItemSchema } from "../../../../client";
import { IconBriefcase, IconGrid3x3 } from "@tabler/icons-react";
import classNames from "classnames";
import styles from "./ChatsList.module.css";
type Props = {
chats: ChatsListItemSchema[];
onChatSelect: (chat: ChatSchema) => void;
selectedChat: ChatSchema | null;
}
const ChatsList = ({ chats, onChatSelect, selectedChat }: Props) => {
const clientChat = chats.find(chat => chat.clientId);
chats = chats.filter(chat => !chat.clientId);
const chatItem = (chat: ChatsListItemSchema, isGeneral: boolean) => {
return (
<List.Item
p={"sm"}
onClick={() => onChatSelect(chat)}
key={chat.id}
icon={(
<Center>
{isGeneral ? (
<IconGrid3x3 />
) : (
<IconBriefcase />
)}
</Center>
)}
className={classNames(
styles["chats-list-item"],
selectedChat?.id === chat.id && styles["chats-list-item-selected"],
)}
>
<Text>{chat.name}</Text>
</List.Item>
);
};
return (
<List center>
{clientChat && chatItem(clientChat, true)}
{chats.map(chat => chatItem(chat, false))}
</List>
);
};
export default ChatsList;

16
src/components/Chat/components/MessageInput/MessageInput.tsx
View File

@@ -6,7 +6,11 @@ import SelectedFile from "../SelectedFile/SelectedFile.tsx";
import React, { useRef } from "react";
const MessageInput = () => {
type Props = {
inputMargin?: number | string;
}
const MessageInput = ({ inputMargin }: Props) => {
const formRef = useRef<HTMLFormElement>(null);
const {
@@ -26,7 +30,7 @@ const MessageInput = () => {
}
};
const getFiles = files.map(file => (
const filesList = files.map(file => (
<SelectedFile key={file.name} file={file} />
));
@@ -34,8 +38,12 @@ const MessageInput = () => {
<form ref={formRef} onSubmit={form.onSubmit(values => submitMessage(values))}>
<Stack gap={"xs"}>
<Divider />
{getFiles}
<Group wrap={"nowrap"} align={"flex-end"}>
{filesList.length > 0 && (
<Stack mx={inputMargin}>
{filesList}
</Stack>
)}
<Group wrap={"nowrap"} align={"flex-end"} mx={inputMargin}>
{chat?.tgGroup?.tgInviteLink && (
<ActionIconCopy
onCopiedLabel={"Ссылка на чат скопирована в буфер обмена"}

2
src/pages/ClientsPage/ClientsPage.tsx
View File

@@ -8,7 +8,7 @@ import { modals } from "@mantine/modals";
import { ClientSchema, ClientService } from "../../client";
import { notifications } from "../../shared/lib/notifications.ts";
import { ChatContextProvider } from "./contexts/ChatContext.tsx";
import ClientChatDrawer from "./drawers/ClientChatDrawer.tsx";
import ClientChatDrawer from "./drawers/ClientChatDrawer/ClientChatDrawer.tsx";
const ClientsPage: FC = () => {
const { clients, refetch } = useClientsList();

13
src/pages/ClientsPage/drawers/ClientChatDrawer.tsx → src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawer.tsx
View File

@@ -1,6 +1,6 @@
import { useChatContext } from "../contexts/ChatContext.tsx";
import { useChatContext } from "../../contexts/ChatContext.tsx";
import { Drawer } from "@mantine/core";
import Chat from "../../../components/Chat/Chat.tsx";
import ClientChatDrawerContent from "./ClientChatDrawerContent.tsx";
const ClientChatDrawer = () => {
@@ -13,10 +13,15 @@ const ClientChatDrawer = () => {
opened={!!chat}
onClose={() => setChat(null)}
position={"right"}
size={"calc(50vw)"}
size={"calc(70vw)"}
withCloseButton={false}
styles={{
body: {
padding: 0,
},
}}
>
<Chat />
<ClientChatDrawerContent />
</Drawer>
);
};

9
src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.module.css Normal file
View File

@@ -0,0 +1,9 @@
.chats-list-border {
@mixin dark {
border-right: 1px solid var(--mantine-color-dark-4);
}
@mixin light {
border-right: 1px solid var(--mantine-color-gray-3);
}
border-right: 1px solid red;
}

51
src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { useChatContext } from "../../contexts/ChatContext.tsx";
import { Box, Flex } from "@mantine/core";
import Chat from "../../../../components/Chat/Chat.tsx";
import { useEffect, useState } from "react";
import { ChatService, ChatsListItemSchema } from "../../../../client";
import ChatsList from "../../../../components/Chat/components/ChatsList/ChatsList.tsx";
import classNames from "classnames";
import styles from "./ClientChatDrawerContent.module.css";
const ClientChatDrawerContent = () => {
const { chat, setChat } = useChatContext();
const [chats, setChats] = useState<ChatsListItemSchema[]>([]);
const fetchChats = () => {
if (!chat?.clientId) return;
ChatService.getClientChatsList({
clientId: chat.clientId,
})
.then(({ chats }) => {
console.log(chats);
setChats(chats);
})
.catch(err => console.log(err));
};
useEffect(() => {
fetchChats();
}, []);
return (
<Flex h={"100vh"}>
<Box
flex={1}
className={classNames(styles["chats-list-border"])}
>
<ChatsList
chats={chats}
selectedChat={chat}
onChatSelect={setChat}
/>
</Box>
<Box flex={3}>
<Chat height={"98vh"} padding={"md"} />
</Box>
</Flex>
);
};
export default ClientChatDrawerContent;