feat: tags page for mobiles

src/app/actions/components/PageBody/PageBody.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import { useMemo } from "react";
+import { RefObject, useMemo, useRef } from "react";
+import { IconTag } from "@tabler/icons-react";
 import { SimpleGrid, Stack } from "@mantine/core";
 import Action from "@/app/actions/components/Action/Action";
 import mobileButtonsData from "@/app/actions/data/mobileButtonsData";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import PageBlock from "@/components/layout/PageBlock/PageBlock";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import BuiltInLinkData from "@/types/BuiltInLinkData";
 
 const PageBody = () => {
     const { selectedProject, setSelectedProjectId, projects, modulesSet } =
@@ -20,6 +22,14 @@ const PageBody = () => {
         [modulesSet]
     );
 
+    const commonActionsData: RefObject<BuiltInLinkData[]> = useRef([
+        {
+            icon: IconTag,
+            label: "Теги",
+            href: "/tags",
+        },
+    ]);
+
     return (
         <PageBlock fullScreenMobile>
             <Stack p={"xs"}>
@@ -33,7 +43,10 @@ const PageBody = () => {
                 <SimpleGrid
                     type={"container"}
                     cols={2}>
-                    {filteredMobileButtonsData.map((data, index) => (
+                    {[
+                        ...commonActionsData.current,
+                        ...filteredMobileButtonsData,
+                    ].map((data, index) => (
                         <Action
                             linkData={data}
                             key={index}

src/app/deals/contexts/ProjectsContext.tsx

@@ -33,8 +33,6 @@ const useProjectsContextState = (): ProjectsContextState => {
         [projects, selectedProjectId]
     );
 
-    console.log(selectedProject);
-
     const modulesSet = useMemo(
         () =>
             new Set(

src/app/tags/components/PageBody/PageBody.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Center, Divider, Stack, Text } from "@mantine/core";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import TagsPageHeader from "@/app/tags/components/TagsPageHeader/TagsPageHeader";
+import TagsTable from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/components/TagsTable";
+import { DealTagsContextProvider } from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/contexts/DealTagsContext";
+
+const PageBody = () => {
+    const { selectedProject } = useProjectsContext();
+
+    if (!selectedProject) {
+        return (
+            <Center>
+                <Text>Проект не найден</Text>
+            </Center>
+        );
+    }
+
+    return (
+        <DealTagsContextProvider project={selectedProject}>
+            <Stack gap={"md"}>
+                <TagsPageHeader project={selectedProject} />
+                <Divider />
+                <TagsTable />
+            </Stack>
+        </DealTagsContextProvider>
+    );
+};
+
+export default PageBody;

src/app/tags/components/TagsPageHeader/TagsPageHeader.tsx

@@ -0,0 +1,32 @@
+import { FC } from "react";
+import Link from "next/link";
+import { IconChevronLeft, IconPlus } from "@tabler/icons-react";
+import { Box, Group, Title } from "@mantine/core";
+import useDealTagActions from "@/drawers/common/ProjectEditorDrawer/tabs/TagsTab/hooks/useDealTagActions";
+import { ProjectSchema } from "@/lib/client";
+
+type Props = {
+    project: ProjectSchema;
+};
+
+const TagsPageHeader: FC<Props> = ({ project }) => {
+    const { onCreateClick } = useDealTagActions();
+
+    return (
+        <Group
+            mx={"xs"}
+            mt={"md"}
+            wrap={"nowrap"}
+            justify={"space-between"}>
+            <Link href={"/actions"}>
+                <IconChevronLeft />
+            </Link>
+            <Title order={5}>Теги проекта "{project.name}"</Title>
+            <Box onClick={onCreateClick}>
+                <IconPlus />
+            </Box>
+        </Group>
+    );
+};
+
+export default TagsPageHeader;

src/app/tags/page.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import { Center, Loader } from "@mantine/core";
+import PageBody from "@/app/tags/components/PageBody/PageBody";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
+import PageContainer from "@/components/layout/PageContainer/PageContainer";
+
+/*
+ *   Page for mobiles only
+ */
+export default async function TagsPage() {
+    return (
+        <Suspense
+            fallback={
+                <Center h="50vh">
+                    <Loader size="lg" />
+                </Center>
+            }>
+            <PageContainer>
+                <PageBlock fullScreenMobile>
+                    <PageBody />
+                </PageBlock>
+            </PageContainer>
+        </Suspense>
+    );
+}

src/drawers/common/ProjectEditorDrawer/tabs/TagsTab/contexts/DealTagsContext.tsx

@@ -1,4 +1,4 @@
-"use dealTag";
+"use client";
 
 import { DealTagsCrud, useDealTagsCrud } from "@/hooks/cruds/useDealTagsCrud";
 import useDealTagsList from "@/hooks/lists/useDealTagsList";
@@ -8,7 +8,6 @@ import makeContext from "@/lib/contextFactory/contextFactory";
 type DealTagsContextState = {
     dealTags: DealTagSchema[];
     refetchDealTags: () => void;
-    project: ProjectSchema;
     dealTagsCrud: DealTagsCrud;
 };
 
@@ -27,7 +26,6 @@ const useDealTagsContextState = ({ project }: Props): DealTagsContextState => {
     return {
         dealTags: dealTagsList.dealTags,
         refetchDealTags: dealTagsList.refetch,
-        project,
         dealTagsCrud,
     };
 };

src/drawers/common/ProjectEditorDrawer/tabs/TagsTab/hooks/tagsTableColumns.tsx

@@ -28,17 +28,14 @@ const useTagsTableColumns = ({ onDelete, onChange }: Props) => {
                 {
                     title: "Название",
                     accessor: "name",
-                    width: 2,
                 },
                 {
                     title: "Цвет",
                     accessor: "tagColor.label",
-                    width: 2,
                 },
                 {
                     title: "Пример",
                     accessor: "tagColor",
-                    width: 3,
                     render: tag => <DealTag tag={tag} />,
                 },
             ] as DataTableColumn<DealTagSchema>[],

src/lib/client/@tanstack/react-query.gen.ts

@@ -60,6 +60,7 @@ import {
     getMarketplaces,
     getProductBarcodePdf,
     getProducts,
+    getProject,
     getProjects,
     getServiceCategories,
     getServices,
@@ -214,6 +215,7 @@ import type {
     GetProductsData,
     GetProductsError,
     GetProductsResponse2,
+    GetProjectData,
     GetProjectsData,
     GetServiceCategoriesData,
     GetServicesData,
@@ -2714,6 +2716,27 @@ export const deleteProjectMutation = (
     return mutationOptions;
 };
 
+export const getProjectQueryKey = (options: Options<GetProjectData>) =>
+    createQueryKey("getProject", options);
+
+/**
+ * Get Project
+ */
+export const getProjectOptions = (options: Options<GetProjectData>) => {
+    return queryOptions({
+        queryFn: async ({ queryKey, signal }) => {
+            const { data } = await getProject({
+                ...options,
+                ...queryKey[0],
+                signal,
+                throwOnError: true,
+            });
+            return data;
+        },
+        queryKey: getProjectQueryKey(options),
+    });
+};
+
 /**
  * Update Project
  */

src/lib/client/sdk.gen.ts

@@ -147,6 +147,9 @@ import type {
     GetProductsData,
     GetProductsErrors,
     GetProductsResponses,
+    GetProjectData,
+    GetProjectErrors,
+    GetProjectResponses,
     GetProjectsData,
     GetProjectsResponses,
     GetServiceCategoriesData,
@@ -317,6 +320,8 @@ import {
     zGetProductBarcodePdfResponse2,
     zGetProductsData,
     zGetProductsResponse2,
+    zGetProjectData,
+    zGetProjectResponse2,
     zGetProjectsData,
     zGetProjectsResponse2,
     zGetServiceCategoriesData,
@@ -2090,6 +2095,29 @@ export const deleteProject = <ThrowOnError extends boolean = false>(
     });
 };
 
+/**
+ * Get Project
+ */
+export const getProject = <ThrowOnError extends boolean = false>(
+    options: Options<GetProjectData, ThrowOnError>
+) => {
+    return (options.client ?? _heyApiClient).get<
+        GetProjectResponses,
+        GetProjectErrors,
+        ThrowOnError
+    >({
+        requestValidator: async data => {
+            return await zGetProjectData.parseAsync(data);
+        },
+        responseType: "json",
+        responseValidator: async data => {
+            return await zGetProjectResponse2.parseAsync(data);
+        },
+        url: "/crm/v1/project/{pk}",
+        ...options,
+    });
+};
+
 /**
  * Update Project
  */

src/lib/client/types.gen.ts

@@ -1400,6 +1400,13 @@ export type GetProductsResponse = {
     paginationInfo: PaginationInfoSchema;
 };
 
+/**
+ * GetProjectResponse
+ */
+export type GetProjectResponse = {
+    entity: ProjectSchema;
+};
+
 /**
  * GetProjectsResponse
  */
@@ -4451,6 +4458,37 @@ export type DeleteProjectResponses = {
 export type DeleteProjectResponse2 =
     DeleteProjectResponses[keyof DeleteProjectResponses];
 
+export type GetProjectData = {
+    body?: never;
+    path: {
+        /**
+         * Pk
+         */
+        pk: number;
+    };
+    query?: never;
+    url: "/crm/v1/project/{pk}";
+};
+
+export type GetProjectErrors = {
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type GetProjectError = GetProjectErrors[keyof GetProjectErrors];
+
+export type GetProjectResponses = {
+    /**
+     * Successful Response
+     */
+    200: GetProjectResponse;
+};
+
+export type GetProjectResponse2 =
+    GetProjectResponses[keyof GetProjectResponses];
+
 export type UpdateProjectData = {
     body: UpdateProjectRequest;
     path: {

src/lib/client/zod.gen.ts

@@ -957,6 +957,13 @@ export const zGetProductsResponse = z.object({
     paginationInfo: zPaginationInfoSchema,
 });
 
+/**
+ * GetProjectResponse
+ */
+export const zGetProjectResponse = z.object({
+    entity: zProjectSchema,
+});
+
 /**
  * GetProjectsResponse
  */
@@ -2329,6 +2336,19 @@ export const zDeleteProjectData = z.object({
  */
 export const zDeleteProjectResponse2 = zDeleteProjectResponse;
 
+export const zGetProjectData = z.object({
+    body: z.optional(z.never()),
+    path: z.object({
+        pk: z.int(),
+    }),
+    query: z.optional(z.never()),
+});
+
+/**
+ * Successful Response
+ */
+export const zGetProjectResponse2 = zGetProjectResponse;
+
 export const zUpdateProjectData = z.object({
     body: zUpdateProjectRequest,
     path: z.object({

src/types/BuiltInLinkData.ts

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