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

feat: navbar buttons depended on selected project

Browse Source
This commit is contained in:
AlexSserb
2025-10-05 19:54:02 +04:00
parent b35961329e
commit 665625557d
15 changed files with 233 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx
View File

@ -1,16 +1,15 @@
"use client";
import { FC } from "react";
import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
import { Flex, Group, Indicator } from "@mantine/core";
import { IconFilter } from "@tabler/icons-react";
import { Button, Divider, Flex, Group, Indicator } from "@mantine/core";
import { modals } from "@mantine/modals";
import style from "@/app/deals/components/desktop/ViewSelectButton/ViewSelectButton.module.css";
import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import { useDrawersContext } from "@/drawers/DrawersContext";
import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
import useIsMobile from "@/hooks/utils/useIsMobile";
export type View = "board" | "table" | "schedule";
@ -22,37 +21,11 @@ type Props = {
const TopToolPanel: FC<Props> = ({ view, setView }) => {
const { dealsFiltersForm, isChangedFilters } = useDealsContext();
const { projects, setSelectedProjectId, selectedProject, projectsCrud } =
useProjectsContext();
const { openDrawer } = useDrawersContext();
const { selectedProject } = useProjectsContext();
const isMobile = useIsMobile();
if (isMobile) return;
const onCreateClick = () => {
modals.openContextModal({
modal: "enterNameModal",
title: "Создание проекта",
withCloseButton: true,
innerProps: {
onChange: projectsCrud.onCreate,
},
});
};
const onEditClick = () => {
if (!selectedProject) return;
openDrawer({
key: "projectEditorDrawer",
props: {
value: selectedProject,
onChange: value => projectsCrud.onUpdate(value.id, value),
onDelete: projectsCrud.onDelete,
},
});
};
const viewFiltersModalMap = {
table: "dealsTableFiltersModal",
board: "dealsBoardFiltersModal",
@ -75,11 +48,12 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
};
return (
<Group justify={"space-between"}>
<Group>
<ViewSelector
value={view}
onChange={setView}
/>
<Divider orientation={"vertical"} />
<Flex
wrap={"nowrap"}
align={"center"}
@ -87,24 +61,19 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
<Indicator
zIndex={100}
disabled={!isChangedFilters}
offset={3}
offset={5}
size={8}>
<ActionIconWithTip onClick={onFiltersClick}>
<IconFilter />
</ActionIconWithTip>
<SmallPageBlock
style={{ borderRadius: "var(--mantine-radius-xl)" }}>
<Button
unstyled
onClick={onFiltersClick}
radius="xl"
className={style.container}>
<IconFilter />
</Button>
</SmallPageBlock>
</Indicator>
<ActionIconWithTip onClick={onEditClick}>
<IconEdit />
</ActionIconWithTip>
<ActionIconWithTip onClick={onCreateClick}>
<IconPlus />
</ActionIconWithTip>
<ProjectSelect
data={projects}
value={selectedProject}
onChange={value => value && setSelectedProjectId(value.id)}
style={{ width: 250 }}
/>
</Flex>
</Group>
);

2
src/app/deals/page.tsx
View File

@ -7,7 +7,6 @@ import {
import { Center, Loader } from "@mantine/core";
import PageBody from "@/app/deals/components/shared/PageBody/PageBody";
import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
import PageContainer from "@/components/layout/PageContainer/PageContainer";
import {
@ -35,7 +34,6 @@ export default async function DealsPage() {
const Providers = combineProviders(
[HydrationBoundary, { state: dehydrate(queryClient) }],
[ProjectsContextProvider],
[BoardsContextProvider],
[StatusesContextProvider]
);

45
src/app/layout.tsx
View File

@ -16,6 +16,7 @@ import { theme } from "@/theme";
import "@/app/global.css";
import { ModalsProvider } from "@mantine/modals";
import { Notifications } from "@mantine/notifications";
import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
import AppShellFooterWrapper from "@/components/layout/AppShellWrappers/AppShellFooterWrapper";
import AppShellMainWrapper from "@/components/layout/AppShellWrappers/AppShellMainWrapper";
import AppShellNavbarWrapper from "@/components/layout/AppShellWrappers/AppShellNavbarWrapper";
@ -68,27 +69,29 @@ export default function RootLayout({ children }: Props) {
labels={{ confirm: "Да", cancel: "Нет" }}
modals={modals}>
<DrawersContextProvider>
<AppShell
layout={"alt"}
withBorder={false}
navbar={{
width: 145,
breakpoint: "sm",
collapsed: {
desktop: false,
mobile: true,
},
}}>
<AppShellNavbarWrapper>
<Navbar />
</AppShellNavbarWrapper>
<AppShellMainWrapper>
{children}
</AppShellMainWrapper>
<AppShellFooterWrapper>
<Footer />
</AppShellFooterWrapper>
</AppShell>
<ProjectsContextProvider>
<AppShell
layout={"alt"}
withBorder={false}
navbar={{
width: 250,
breakpoint: "sm",
collapsed: {
desktop: false,
mobile: true,
},
}}>
<AppShellNavbarWrapper>
<Navbar />
</AppShellNavbarWrapper>
<AppShellMainWrapper>
{children}
</AppShellMainWrapper>
<AppShellFooterWrapper>
<Footer />
</AppShellFooterWrapper>
</AppShell>
</ProjectsContextProvider>
</DrawersContextProvider>
</ModalsProvider>
</ReduxProvider>