feat: table view for mobiles

src/app/deals/components/desktop/DealsTable/DealsTable.tsx

@@ -6,9 +6,11 @@ import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
 import { useDrawersContext } from "@/drawers/DrawersContext";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema } from "@/lib/client";
 
 const DealsTable: FC = () => {
+    const isMobile = useIsMobile();
     const { selectedProject } = useProjectsContext();
     const { deals, paginationInfo, page, setPage, sortingForm, dealsCrud } =
         useDealsContext();
@@ -33,9 +35,11 @@ const DealsTable: FC = () => {
 
     return (
         <Stack
+            p={isMobile ? "xs" : ""}
             gap={"xs"}
             h={"100%"}>
             <BaseTable
+                withTableBorder
                 records={[...deals]}
                 columns={columns}
                 sortStatus={{

src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx

@@ -1,7 +1,8 @@
 import { useMemo } from "react";
 import { IconEdit } from "@tabler/icons-react";
 import { DataTableColumn } from "mantine-datatable";
-import { ActionIcon, Tooltip } from "@mantine/core";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import { DealSchema } from "@/lib/client";
 import { utcDateTimeToLocalString } from "@/utils/datetime";
 
@@ -10,44 +11,43 @@ type Props = {
 };
 
 const useDealsTableColumns = ({ onEditClick }: Props) => {
+    const isMobile = useIsMobile();
+
     return useMemo(
         () =>
             [
                 {
                     accessor: "actions",
-                    title: "Действия",
+                    title: isMobile ? "" : "Действия",
                     sortable: false,
                     textAlign: "center",
                     width: "0%",
                     render: deal => (
-                        <Tooltip label="Редактировать">
+                        <ActionIconWithTip
-                            <ActionIcon
+                            tipLabel={"Редактировать"}
-                                bdrs={"md"}
+                            onClick={() => onEditClick(deal)}
-                                size={"lg"}
+                            variant={isMobile ? "subtle" : "default"}>
-                                onClick={() => onEditClick(deal)}
+                            <IconEdit />
-                                variant={"default"}>
+                        </ActionIconWithTip>
-                                <IconEdit />
-                            </ActionIcon>
-                        </Tooltip>
                     ),
                 },
                 {
                     accessor: "id",
-                    title: "Номер",
+                    title: isMobile ? "№" : "Номер",
                     sortable: true,
-                    width: "30%",
+                    width: "20%",
                 },
                 {
                     accessor: "name",
                     title: "Название",
-                    width: "40%",
+                    width: "45%",
                 },
                 {
                     title: "Дата создания",
                     accessor: "createdAt",
                     render: deal => utcDateTimeToLocalString(deal.createdAt),
                     sortable: true,
-                    width: "30%",
+                    width: "35%",
                 },
             ] as DataTableColumn<DealSchema>[],
         [onEditClick]

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -12,7 +12,11 @@ import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
 import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
-export type View = "board" | "table" | "schedule";
+export enum View {
+    BOARD = "board",
+    TABLE = "table",
+    SCHEDULE = "schedule"
+}
 
 type Props = {
     view: View;
@@ -42,7 +46,7 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
                 onChange: (values: DealsFiltersForm) =>
                     dealsFiltersForm.setValues(values),
                 project: selectedProject,
-                boardAndStatusEnabled: view === "table",
+                boardAndStatusEnabled: view === View.TABLE,
             },
         });
     };

src/app/deals/components/desktop/ViewSelector/ViewSelector.tsx

@@ -16,15 +16,15 @@ type Props = {
 const ViewSelector: FC<Props> = ({ value, onChange }) => {
     const views = [
         {
-            value: "board" as View,
+            value: View.BOARD,
             icon: <IconLayoutDashboard />,
         },
         {
-            value: "table" as View,
+            value: View.TABLE,
             icon: <IconMenu2 />,
         },
         {
-            value: "schedule" as View,
+            value: View.SCHEDULE,
             icon: <IconCalendarWeekFilled />,
         },
     ];

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

@@ -1,9 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { Box } from "@mantine/core";
-import TopToolPanel, {
+import TopToolPanel from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
-    View,
-} from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
 import {
     BoardView,
     ScheduleView,
@@ -12,11 +10,14 @@ import {
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { DealsContextProvider } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import useView from "@/app/deals/hooks/useView";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
 
 const PageBody = () => {
     const { selectedBoard } = useBoardsContext();
     const { selectedProject } = useProjectsContext();
-    const [view, setView] = useState<View>("board");
+
+    const { view, setView } = useView();
 
     const getViewContent = () => {
         switch (view) {
@@ -42,7 +43,11 @@ const PageBody = () => {
                 view={view}
                 setView={setView}
             />
-            {getViewContent()}
+            <PageBlock
+                fullScreenMobile
+                style={{ flex: 1 }}>
+                <Box h={"100%"}>{getViewContent()}</Box>
+            </PageBlock>
         </DealsContextProvider>
     );
 };

src/app/deals/components/shared/views/BoardView.tsx

@@ -1,12 +1,11 @@
 import { Space } from "@mantine/core";
 import MainBlockHeader from "@/app/deals/components/mobile/MainBlockHeader/MainBlockHeader";
 import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
-import PageBlock from "@/components/layout/PageBlock/PageBlock";
 
 export const BoardView = () => (
-    <PageBlock style={{ height: "100%" }}>
+    <>
         <MainBlockHeader />
         <Space h="md" />
         <Funnel />
-    </PageBlock>
+    </>
 );

src/app/deals/components/shared/views/ScheduleView.tsx

@@ -1,5 +1,3 @@
-import PageBlock from "@/components/layout/PageBlock/PageBlock";
-
 export const ScheduleView = () => {
-    return <PageBlock>-</PageBlock>;
+    return <>-</>;
 };

src/app/deals/components/shared/views/TableView.tsx

@@ -1,8 +1,3 @@
 import DealsTable from "@/app/deals/components/desktop/DealsTable/DealsTable";
-import PageBlock from "@/components/layout/PageBlock/PageBlock";
 
-export const TableView = () => (
+export const TableView = () => <DealsTable />;
-    <PageBlock style={{ height: "100%" }}>
-        <DealsTable />
-    </PageBlock>
-);

src/app/deals/hooks/useView.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { View } from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
+
+const useView = () => {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const viewsArray = Object.values(View);
+
+    const [view, setView] = useState<View>(() => {
+        const urlView = searchParams.get("view") as View;
+        return urlView && viewsArray.includes(urlView) ? urlView : View.BOARD;
+    });
+
+    useEffect(() => {
+        const urlView = searchParams.get("view") as View;
+        if (urlView && viewsArray.includes(urlView)) {
+            setView(urlView);
+        }
+    }, [searchParams]);
+
+    useEffect(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        if (params.get("view") === view) return;
+        router.replace(`?view=${view}`);
+    }, [view]);
+
+    return {
+        view,
+        setView,
+    };
+};
+
+export default useView;

src/components/layout/Footer/Footer.tsx

@@ -1,33 +1,29 @@
-import { IconCircleDotted, IconLayoutKanban } from "@tabler/icons-react";
+import { Group, Stack, Text } from "@mantine/core";
-import FooterButtons, {
+import FooterClickable from "@/components/layout/Footer/components/FooterClickable";
-    LinkData,
+import buttonsData from "@/components/layout/Footer/data/buttonsData";
-} from "@/components/layout/Footer/FooterButtons";
+import styles from "./Footer.module.css";
-
-const buttonsData: LinkData[] = [
-    {
-        icon: IconLayoutKanban,
-        label: "Сделки",
-        href: "/deals",
-    },
-    {
-        icon: IconCircleDotted,
-        label: "Label 1",
-        href: "/oiiai",
-    },
-    {
-        icon: IconCircleDotted,
-        label: "Label 2",
-        href: "/opaopa",
-    },
-    {
-        icon: IconCircleDotted,
-        label: "Label 3",
-        href: "/hihihaha",
-    },
-];
 
 const Footer = () => {
-    return <FooterButtons buttonsData={buttonsData} />;
+    return (
+        <Group
+            className={styles.container}
+            p={"xs"}
+            wrap={"nowrap"}
+            justify={"space-between"}>
+            {buttonsData.map(data => (
+                <FooterClickable
+                    href={data.href}
+                    key={data.label}>
+                    <Stack
+                        gap={0}
+                        align={"center"}>
+                        <data.icon />
+                        <Text>{data.label}</Text>
+                    </Stack>
+                </FooterClickable>
+            ))}
+        </Group>
+    );
 };
 
 export default Footer;

src/components/layout/Footer/FooterButtons.tsx

@@ -1,39 +0,0 @@
-import { IconPlus } from "@tabler/icons-react";
-import { Group, Stack, Text } from "@mantine/core";
-import FooterClickable from "@/components/layout/Footer/FooterClickable";
-import styles from "./Footer.module.css";
-
-export type LinkData = {
-    icon: typeof IconPlus;
-    label: string;
-    href: string;
-};
-
-type Props = {
-    buttonsData: LinkData[];
-};
-
-const FooterButtons = ({ buttonsData }: Props) => {
-    return (
-        <Group
-            className={styles.container}
-            p={"xs"}
-            wrap={"nowrap"}
-            justify={"space-between"}>
-            {buttonsData.map(data => (
-                <FooterClickable
-                    href={data.href}
-                    key={data.label}>
-                    <Stack
-                        gap={0}
-                        align={"center"}>
-                        <data.icon />
-                        <Text>{data.label}</Text>
-                    </Stack>
-                </FooterClickable>
-            ))}
-        </Group>
-    );
-};
-
-export default FooterButtons;

src/components/layout/Footer/components/FooterClickable.tsx

@@ -3,7 +3,7 @@
 import { ReactNode } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import styles from "./Footer.module.css";
+import styles from "../Footer.module.css";
 
 type Props = {
     href: string;

src/components/layout/Footer/data/buttonsData.ts

@@ -0,0 +1,31 @@
+import {
+    IconCircleDotted,
+    IconLayoutKanban,
+    IconTable,
+} from "@tabler/icons-react";
+import LinkData from "@/components/layout/Navbar/types/LinkData";
+
+const buttonsData: LinkData[] = [
+    {
+        icon: IconLayoutKanban,
+        label: "Воронка",
+        href: "/deals?view=board",
+    },
+    {
+        icon: IconTable,
+        label: "Таблица",
+        href: "/deals?view=table",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Label 2",
+        href: "/opaopa",
+    },
+    {
+        icon: IconCircleDotted,
+        label: "Label 3",
+        href: "/hihihaha",
+    },
+];
+
+export default buttonsData;

src/components/layout/Footer/types/LinkData.ts

@@ -0,0 +1,9 @@
+import { IconPlus } from "@tabler/icons-react";
+
+type LinkData = {
+    icon: typeof IconPlus;
+    label: string;
+    href: string;
+};
+
+export default LinkData;