feat: groups creating on mobile

src/app/deals/components/mobile/GroupMenu/GroupMenu.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+import { IconCheckbox, IconDotsVertical, IconTrash } from "@tabler/icons-react";
+import { Box, Menu } from "@mantine/core";
+import DropdownMenuItem from "@/components/ui/DropdownMenuItem/DropdownMenuItem";
+import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
+
+type Props = {
+    onDelete: () => void;
+    startDealsSelecting: () => void;
+};
+
+const GroupMenu: FC<Props> = ({ onDelete, startDealsSelecting }) => {
+    return (
+        <Menu>
+            <Menu.Target>
+                <Box
+                    px={"md"}
+                    style={{ cursor: "pointer" }}
+                    onClick={e => e.stopPropagation()}>
+                    <ThemeIcon size={"sm"}>
+                        <IconDotsVertical />
+                    </ThemeIcon>
+                </Box>
+            </Menu.Target>
+            <Menu.Dropdown>
+                <DropdownMenuItem
+                    onClick={onDelete}
+                    icon={<IconTrash />}
+                    label={"Удалить группу"}
+                />
+                <DropdownMenuItem
+                    onClick={startDealsSelecting}
+                    icon={<IconCheckbox />}
+                    label={"Добавить/удалить сделки"}
+                />
+            </Menu.Dropdown>
+        </Menu>
+    );
+};
+
+export default GroupMenu;

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

@@ -1,10 +1,11 @@
 import { IconCategoryPlus } from "@tabler/icons-react";
 import classNames from "classnames";
 import { useContextMenu } from "mantine-contextmenu";
-import { Box, Card, Group, Pill, Stack, Text } from "@mantine/core";
+import { Box, Card, Group, Stack, Text } from "@mantine/core";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import { useDrawersContext } from "@/drawers/DrawersContext";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema } from "@/lib/client";
 import { ModuleNames } from "@/modules/modules";
 import styles from "./DealCard.module.css";
@@ -18,11 +19,11 @@ const DealCard = ({ deal, isInGroup = false }: Props) => {
     const { selectedProject, modulesSet } = useProjectsContext();
     const { dealsCrud, refetchDeals, groupDealsSelection } = useDealsContext();
     const { openDrawer } = useDrawersContext();
+    const isMobile = useIsMobile();
 
     const onClick = () => {
         if (groupDealsSelection.isDealsSelecting) {
-            if (groupDealsSelection.selectedBaseDealId !== deal.id)
+            groupDealsSelection.toggleDeal(deal);
-                groupDealsSelection.toggleDeal(deal.id);
             return;
         }
 
@@ -40,17 +41,18 @@ const DealCard = ({ deal, isInGroup = false }: Props) => {
 
     const { showContextMenu } = useContextMenu();
 
-    const dealContextMenu = deal.group
+    const dealContextMenu =
-        ? []
+        deal.group || isMobile
-        : [
+            ? []
-              {
+            : [
-                  key: "startGroupForming",
+                  {
-                  onClick: () =>
+                      key: "startGroupForming",
-                      groupDealsSelection.startSelectingWithDeal(deal.id),
+                      onClick: () =>
-                  title: "Создать группу",
+                          groupDealsSelection.startSelectingWithDeal(deal.id),
-                  icon: <IconCategoryPlus />,
+                      title: "Создать группу",
-              },
+                      icon: <IconCategoryPlus />,
-          ];
+                  },
+              ];
 
     const getSelectedStyles = () => {
         if (groupDealsSelection.selectedBaseDealId === deal.id) {
@@ -98,10 +100,6 @@ const DealCard = ({ deal, isInGroup = false }: Props) => {
                         </>
                     )}
                 </Stack>
-                <Group gap={"xs"}>
-                    <Pill className={styles["first-tag"]}>Срочно</Pill>
-                    <Pill className={styles["second-tag"]}>Бесплатно</Pill>
-                </Group>
             </Stack>
         </Card>
     );

src/app/deals/components/shared/DealsGroup/DealsGroup.tsx

@@ -4,8 +4,10 @@ import classNames from "classnames";
 import { useContextMenu } from "mantine-contextmenu";
 import { Flex, Stack, TextInput } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
+import GroupMenu from "@/app/deals/components/mobile/GroupMenu/GroupMenu";
 import DealCard from "@/app/deals/components/shared/DealCard/DealCard";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import GroupWithDealsSchema from "@/types/GroupWithDealsSchema";
 import styles from "./DealsGroup.module.css";
 
@@ -16,36 +18,43 @@ type Props = {
 const DealsGroup: FC<Props> = ({ group }) => {
     const [groupName, setGroupName] = useState(group.name ?? "");
     const [debouncedGroupName] = useDebouncedValue(groupName, 600);
-    const { groupsCrud, groupDealsSelection } = useDealsContext();
+    const {
+        groupsCrud,
+        groupDealsSelection: {
+            startSelectingWithExistingGroup,
+            selectedGroupId,
+        },
+    } = useDealsContext();
     const { showContextMenu } = useContextMenu();
+    const isMobile = useIsMobile();
 
     useEffect(() => {
         if (debouncedGroupName === group.name) return;
         groupsCrud.onUpdate(group.id, { name: debouncedGroupName });
     }, [debouncedGroupName]);
 
-    const dealContextMenu = [
+    const dealContextMenu = isMobile
-        {
+        ? []
-            key: "delete",
+        : [
-            onClick: () => groupsCrud.onDelete(group.id),
+              {
-            title: "Удалить группу",
+                  key: "delete",
-            icon: <IconTrash />,
+                  onClick: () => groupsCrud.onDelete(group.id),
-        },
+                  title: "Удалить группу",
-        {
+                  icon: <IconTrash />,
-            key: "startDealsSelecting",
+              },
-            onClick: () =>
+              {
-                groupDealsSelection.startSelectingWithExistingGroup(group),
+                  key: "startDealsSelecting",
-            title: "Добавить/удалить сделки",
+                  onClick: () => startSelectingWithExistingGroup(group),
-            icon: <IconCheckbox />,
+                  title: "Добавить/удалить сделки",
-        },
+                  icon: <IconCheckbox />,
-    ];
+              },
+          ];
 
     return (
         <Stack
             className={classNames(
                 styles["group-container"],
-                groupDealsSelection.selectedGroupId === group.id &&
+                selectedGroupId === group.id && styles["selected-group"]
-                    styles["selected-group"]
             )}
             gap={"xs"}
             bdrs={"lg"}
@@ -53,13 +62,23 @@ const DealsGroup: FC<Props> = ({ group }) => {
             onContextMenu={showContextMenu(dealContextMenu)}>
             <Flex
                 mx={"xs"}
-                align={"center"}>
+                align={"center"}
+                w={"100%"}>
                 <TextInput
                     value={groupName}
                     onChange={e => setGroupName(e.target.value)}
                     variant={"unstyled"}
                     onKeyDown={e => e.stopPropagation()}
+                    flex={1}
                 />
+                {isMobile && (
+                    <GroupMenu
+                        startDealsSelecting={() =>
+                            startSelectingWithExistingGroup(group)
+                        }
+                        onDelete={() => groupsCrud.onDelete(group.id)}
+                    />
+                )}
             </Flex>
             {group.items.map(deal => (
                 <DealCard

src/app/deals/components/shared/GroupDealsSelectionAffix/GroupDealsSelectionAffix.module.css

@@ -3,6 +3,7 @@
         box-shadow: var(--light-shadow);
     }
     @mixin dark {
+        background-color: var(--mantine-color-dark-7);
         box-shadow: var(--dark-shadow);
     }
 }

src/app/deals/components/shared/GroupDealsSelectionAffix/GroupDealsSelectionAffix.tsx

@@ -8,10 +8,9 @@ import styles from "./GroupDealsSelectionAffix.module.css";
 const GroupDealsSelectionAffix = () => {
     const {
         groupDealsSelection: {
-            selectedBaseDealId,
-            selectedGroupId,
             finishDealsSelecting,
             cancelDealsSelecting,
+            isDealsSelecting,
         },
     } = useDealsContext();
 
@@ -19,7 +18,7 @@ const GroupDealsSelectionAffix = () => {
         <Affix position={{ bottom: 35, right: 35 }}>
             <Transition
                 transition="slide-up"
-                mounted={!!(selectedBaseDealId || selectedGroupId)}>
+                mounted={isDealsSelecting}>
                 {transitionStyles => (
                     <Stack
                         bdrs={"xl"}
@@ -37,7 +36,9 @@ const GroupDealsSelectionAffix = () => {
                             <InlineButton onClick={cancelDealsSelecting}>
                                 Отмена
                             </InlineButton>
-                            <InlineButton variant={"filled"} onClick={finishDealsSelecting}>
+                            <InlineButton
+                                variant={"filled"}
+                                onClick={finishDealsSelecting}>
                                 Сохранить
                             </InlineButton>
                         </Flex>

src/app/deals/components/shared/StatusColumnHeader/StatusColumnHeader.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { Group, Text } from "@mantine/core";
 import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
 import { StatusSchema } from "@/lib/client";
@@ -14,6 +15,7 @@ type Props = {
 const StatusColumnHeader: FC<Props> = ({ status, isDragging }) => {
     const { statusesCrud, refetchStatuses } = useStatusesContext();
     const { selectedBoard } = useBoardsContext();
+    const { groupDealsSelection } = useDealsContext();
 
     const handleSave = (value: string) => {
         const newValue = value.trim();
@@ -59,6 +61,9 @@ const StatusColumnHeader: FC<Props> = ({ status, isDragging }) => {
                             }
                             refetchStatuses={refetchStatuses}
                             onDeleteStatus={statusesCrud.onDelete}
+                            startDealsSelecting={
+                                groupDealsSelection.startSelecting
+                            }
                         />
                     </>
                 )}

src/app/deals/components/shared/StatusMenu/StatusMenu.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import {
+    IconCheckbox,
     IconDotsVertical,
     IconEdit,
     IconExchange,
@@ -21,6 +22,7 @@ type Props = {
     onStatusColorChange: (color: string) => void;
     board: BoardSchema | null;
     onDeleteStatus: (status: StatusSchema) => void;
+    startDealsSelecting?: () => void;
     refetchStatuses?: () => void;
     withChangeOrderButton?: boolean;
 };
@@ -31,6 +33,7 @@ const StatusMenu: FC<Props> = ({
     onStatusColorChange,
     board,
     onDeleteStatus,
+    startDealsSelecting,
     refetchStatuses,
     withChangeOrderButton = true,
 }) => {
@@ -96,6 +99,13 @@ const StatusMenu: FC<Props> = ({
                         label={"Изменить порядок"}
                     />
                 )}
+                {isMobile && startDealsSelecting && (
+                    <DropdownMenuItem
+                        onClick={startDealsSelecting}
+                        icon={<IconCheckbox />}
+                        label={"Создать группу сделок"}
+                    />
+                )}
             </Menu.Dropdown>
         </Menu>
     );

src/app/deals/drawers/StatusesMobileEditorDrawer/components/StatusMobile.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { Box, Group, Text } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useStatusesMobileContext } from "@/app/deals/drawers/StatusesMobileEditorDrawer/contexts/BoardStatusesContext";
 import { BoardSchema, StatusSchema } from "@/lib/client";
 
@@ -12,6 +13,7 @@ type Props = {
 
 const StatusMobile: FC<Props> = ({ status, board }) => {
     const { statusesCrud } = useStatusesMobileContext();
+    const { groupDealsSelection } = useDealsContext();
 
     const startEditing = () => {
         modals.openContextModal({
@@ -40,8 +42,11 @@ const StatusMobile: FC<Props> = ({ status, board }) => {
                 board={board}
                 onDeleteStatus={statusesCrud.onDelete}
                 handleEdit={startEditing}
-                onStatusColorChange={color => statusesCrud.onUpdate(status.id, { color })}
+                onStatusColorChange={color =>
+                    statusesCrud.onUpdate(status.id, { color })
+                }
                 withChangeOrderButton={false}
+                startDealsSelecting={groupDealsSelection.startSelecting}
             />
         </Group>
     );

src/app/deals/hooks/useGroupDealsSelection.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useState } from "react";
 import { GroupsCrud } from "@/hooks/cruds/useDealGroupCrud";
+import { DealSchema } from "@/lib/client";
 import GroupWithDealsSchema from "@/types/GroupWithDealsSchema";
 
 type Props = {
@@ -12,9 +13,10 @@ export type GroupDealsSelection = {
     startSelectingWithDeal: (dealId: number) => void;
     selectedGroupId: number | null;
     startSelectingWithExistingGroup: (group: GroupWithDealsSchema) => void;
+    startSelecting: () => void;
     selectedDealIds: Set<number>;
     setSelectedDealIds: Dispatch<SetStateAction<Set<number>>>;
-    toggleDeal: (dealId: number) => void;
+    toggleDeal: (deal: DealSchema) => void;
     finishDealsSelecting: () => void;
     cancelDealsSelecting: () => void;
 };
@@ -29,11 +31,18 @@ const useGroupDealsSelection = ({ groupsCrud }: Props): GroupDealsSelection => {
     );
     const [selectedGroupId, setSelectedGroupId] = useState<number | null>(null);
 
-    const toggleDeal = (dealId: number) => {
+    const toggleDeal = (deal: DealSchema) => {
-        if (selectedDealIds.has(dealId)) {
+        if (selectedBaseDealId === deal.id) return;
-            selectedDealIds.delete(dealId);
+
+        if (selectedDealIds.has(deal.id)) {
+            selectedDealIds.delete(deal.id);
         } else {
-            selectedDealIds.add(dealId);
+            if (!selectedBaseDealId && !selectedGroupId) {
+                if (deal.group) return;
+                setSelectedBaseDealId(deal.id);
+                return;
+            }
+            selectedDealIds.add(deal.id);
         }
         setSelectedDealIds(new Set(selectedDealIds));
     };
@@ -63,15 +72,27 @@ const useGroupDealsSelection = ({ groupsCrud }: Props): GroupDealsSelection => {
         setIsDealsSelecting(false);
     };
 
+    // For editing group
     const startSelectingWithExistingGroup = (group: GroupWithDealsSchema) => {
         setSelectedDealIds(new Set(group.items.map(item => item.id)));
+        setSelectedBaseDealId(null);
         setSelectedGroupId(group.id);
         setIsDealsSelecting(true);
     };
 
+    // For creating group on desktop
     const startSelectingWithDeal = (dealId: number) => {
         setSelectedDealIds(new Set([dealId]));
         setSelectedBaseDealId(dealId);
+        setSelectedGroupId(null);
+        setIsDealsSelecting(true);
+    };
+
+    // For creating group on mobile
+    const startSelecting = () => {
+        setSelectedDealIds(new Set());
+        setSelectedBaseDealId(null);
+        setSelectedGroupId(null);
         setIsDealsSelecting(true);
     };
 
@@ -81,6 +102,7 @@ const useGroupDealsSelection = ({ groupsCrud }: Props): GroupDealsSelection => {
         startSelectingWithDeal,
         selectedGroupId,
         startSelectingWithExistingGroup,
+        startSelecting,
         selectedDealIds,
         setSelectedDealIds,
         toggleDeal,