diff --git a/src/client/index.ts b/src/client/index.ts index a814c47..4993f49 100644 --- a/src/client/index.ts +++ b/src/client/index.ts @@ -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'; diff --git a/src/client/models/ChatsListItemSchema.ts b/src/client/models/ChatsListItemSchema.ts new file mode 100644 index 0000000..5382952 --- /dev/null +++ b/src/client/models/ChatsListItemSchema.ts @@ -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; +}; + diff --git a/src/client/models/GetChatsListResponse.ts b/src/client/models/GetChatsListResponse.ts new file mode 100644 index 0000000..4b3fd4b --- /dev/null +++ b/src/client/models/GetChatsListResponse.ts @@ -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; +}; + diff --git a/src/client/services/ChatService.ts b/src/client/services/ChatService.ts index 80da7aa..9f68cd3 100644 --- a/src/client/services/ChatService.ts +++ b/src/client/services/ChatService.ts @@ -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 { + 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 diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index feb1b51..995594e 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -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 ( - + {dateComponent} { if (messages.length === 0) { return ( - - + + ); } return ( - + { increaseViewportBy={200} alignToBottom /> - + ); }; diff --git a/src/components/Chat/components/ChatsList/ChatsList.module.css b/src/components/Chat/components/ChatsList/ChatsList.module.css new file mode 100644 index 0000000..873f7f6 --- /dev/null +++ b/src/components/Chat/components/ChatsList/ChatsList.module.css @@ -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); + } +} \ No newline at end of file diff --git a/src/components/Chat/components/ChatsList/ChatsList.tsx b/src/components/Chat/components/ChatsList/ChatsList.tsx new file mode 100644 index 0000000..3ce2a58 --- /dev/null +++ b/src/components/Chat/components/ChatsList/ChatsList.tsx @@ -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 ( + onChatSelect(chat)} + key={chat.id} + icon={( +
+ {isGeneral ? ( + + ) : ( + + )} +
+ )} + className={classNames( + styles["chats-list-item"], + selectedChat?.id === chat.id && styles["chats-list-item-selected"], + )} + > + {chat.name} + + ); + }; + + return ( + + {clientChat && chatItem(clientChat, true)} + {chats.map(chat => chatItem(chat, false))} + + ); +}; + +export default ChatsList; diff --git a/src/components/Chat/components/MessageInput/MessageInput.tsx b/src/components/Chat/components/MessageInput/MessageInput.tsx index 10167c4..61115c4 100644 --- a/src/components/Chat/components/MessageInput/MessageInput.tsx +++ b/src/components/Chat/components/MessageInput/MessageInput.tsx @@ -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(null); const { @@ -26,7 +30,7 @@ const MessageInput = () => { } }; - const getFiles = files.map(file => ( + const filesList = files.map(file => ( )); @@ -34,8 +38,12 @@ const MessageInput = () => {
submitMessage(values))}> - {getFiles} - + {filesList.length > 0 && ( + + {filesList} + + )} + {chat?.tgGroup?.tgInviteLink && ( { const { clients, refetch } = useClientsList(); diff --git a/src/pages/ClientsPage/drawers/ClientChatDrawer.tsx b/src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawer.tsx similarity index 54% rename from src/pages/ClientsPage/drawers/ClientChatDrawer.tsx rename to src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawer.tsx index b3ac99c..5d9a5d7 100644 --- a/src/pages/ClientsPage/drawers/ClientChatDrawer.tsx +++ b/src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawer.tsx @@ -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, + }, + }} > - + ); }; diff --git a/src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.module.css b/src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.module.css new file mode 100644 index 0000000..486942f --- /dev/null +++ b/src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.module.css @@ -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; +} \ No newline at end of file diff --git a/src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.tsx b/src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.tsx new file mode 100644 index 0000000..7bbcdd0 --- /dev/null +++ b/src/pages/ClientsPage/drawers/ClientChatDrawer/ClientChatDrawerContent.tsx @@ -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([]); + + 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 ( + + + + + + + + + ); +}; + +export default ClientChatDrawerContent;