Display region name instead of id in popup and tables

src/Map/Popup/mode-popup/FeatureProperties.jsx

@@ -9,8 +9,10 @@ import { Col, Row } from "antd";
 import { twMerge } from "tailwind-merge";
 import { LAYER_IDS } from "../../Layers/constants";
 import { isNil } from "../../../utils.js";
+import { useGetRegions } from "../../../components/RegionSelect.jsx";
 
 export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
+  const { data } = useGetRegions();
   const isResidential = feature.properties.category === CATEGORIES.residential;
   const isWorking = feature.properties.status === STATUSES.working;
   const isRivals =
@@ -25,7 +27,7 @@ export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
     return isWorking ? [...config, ...workingPointFields] : config;
   };
 
-  const getValue = ({ field, render, empty }) => {
+  const getValue = ({ field, render, empty, type }) => {
     let value = feature.properties[field];
 
     if (field === "status" && dynamicStatus) {
@@ -36,8 +38,12 @@ export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
       value = postamatId;
     }
 
-    value = render ? render(value) : value;
+    if (type === "region") {
-    value = isNil(value) && empty ? empty : value;
+      value = render(value, data?.normalized);
+    } else {
+      value = render ? render(value) : value;
+      value = isNil(value) && empty ? empty : value;
+    }
 
     return value;
   };

src/Map/Popup/mode-popup/config.js

@@ -1,10 +1,9 @@
 import { STATUS_LABEL_MAPPER } from "../../../config";
 
+export const getRegionNameById = (id, normalizedRegions) =>
+  normalizedRegions?.[id]?.name ?? id;
+
 export const commonPopupConfig = [
-  {
-    name: "Id",
-    field: "id",
-  },
   {
     name: "Адрес",
     field: "address",
@@ -12,10 +11,14 @@ export const commonPopupConfig = [
   {
     name: "Район",
     field: "area_id",
+    render: getRegionNameById,
+    type: "region",
   },
   {
     name: "Округ",
     field: "district_id",
+    render: getRegionNameById,
+    type: "region",
   },
   {
     name: "Название",

src/components/RegionSelect.jsx

@@ -23,7 +23,7 @@ const normalizeRegions = (rawRegions) => {
   }, {});
 };
 
-const useGetRegions = () => {
+export const useGetRegions = () => {
   return useQuery(
     ["regions"],
     async () => {

src/modules/Table/OnApprovalTable/OnApprovalTable.jsx

@@ -1,5 +1,4 @@
 import { Table } from "../Table";
-import { columns } from "../columns";
 import { useQuery } from "@tanstack/react-query";
 import { getPoints, useCanEdit } from "../../../api";
 import { useCallback, useState } from "react";
@@ -9,9 +8,9 @@ import { useMergeTableData } from "../useMergeTableData";
 import { Header } from "./Header";
 import { useOnApprovalPointsFilters } from "../../../stores/useOnApprovalPointsFilters";
 import { MakeWorkingModal } from "./MakeWorkingTable/MakeWorkingModal";
+import { useColumns } from "../useColumns.js";
 
-const tableCols = [
+const extraCols = [
-  ...columns,
   {
     title: "Id постамата",
     dataIndex: "postamat_id",
@@ -30,6 +29,7 @@ export const OnApprovalTable = ({ fullWidth }) => {
   } = useOnApprovalPointsFilters();
   const [isMakeWorkingModalOpened, setIsMakeWorkingModalOpened] =
     useState(false);
+  const columns = useColumns(extraCols);
 
   const clearSelected = () => setSelectedIds([]);
 
@@ -78,7 +78,7 @@ export const OnApprovalTable = ({ fullWidth }) => {
         page={page}
         pageSize={pageSize}
         isClickedPointLoading={isClickedPointLoading}
-        columns={tableCols}
+        columns={columns}
         fullWidth={fullWidth}
         loading={isInitialLoading}
       />

src/modules/Table/PendingTable/PendingTable.jsx

@@ -3,15 +3,16 @@ import { Table } from "../Table";
 import { usePointSelection } from "../../../stores/usePointSelection";
 import { useClickedPointConfig } from "../../../stores/useClickedPointConfig";
 import { usePendingTableData } from "./usePendingTableData";
-import { columns } from "../columns";
 import { HeaderWrapper } from "../HeaderWrapper";
 import { useExportPendingData } from "./useExportPendingData";
 import { useCanEdit } from "../../../api";
+import { useColumns } from "../useColumns.js";
 
 export const PendingTable = ({ fullWidth }) => {
   const { selection, include, exclude } = usePointSelection();
   const { clickedPointConfig } = useClickedPointConfig();
   const [page, setPage] = useState(1);
+  const columns = useColumns();
 
   const { data, pageSize, isClickedPointLoading, isDataLoading } =
     usePendingTableData(page, () => setPage(1));

src/modules/Table/WorkingTable/WorkingTable.jsx

@@ -7,8 +7,8 @@ import { useMergeTableData } from "../useMergeTableData";
 import { Table } from "../Table";
 import { HeaderWrapper } from "../HeaderWrapper";
 import { useExportWorkingData } from "./useExportWorkingData";
-import { columns } from "./columns";
 import { useWorkingPointsFilters } from "../../../stores/useWorkingPointsFilters";
+import { useColumns } from "./columns.js";
 
 export const WorkingTable = ({ fullWidth }) => {
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
@@ -16,6 +16,7 @@ export const WorkingTable = ({ fullWidth }) => {
   const {
     filters: { region, deltaTraffic, factTraffic, age },
   } = useWorkingPointsFilters();
+  const columns = useColumns();
 
   const { data, isInitialLoading } = useQuery(
     ["working-points", page, region, deltaTraffic, factTraffic, age],

src/modules/Table/WorkingTable/columns.js

@@ -1,57 +1,73 @@
-export const columns = [
+import { useGetRegions } from "../../../components/RegionSelect.jsx";
-  {
+import { useMemo } from "react";
-    title: "Адрес",
+import { getRegionNameById } from "../../../Map/Popup/mode-popup/config.js";
-    dataIndex: "address",
+
-    key: "address",
+export const useColumns = () => {
-    width: 200,
+  const { data: regions } = useGetRegions();
-  },
+
-  {
+  return useMemo(() => {
-    title: "Район",
+    return [
-    dataIndex: "area",
+      {
-    key: "area",
+        title: "Адрес",
-    width: "120px",
+        dataIndex: "address",
-    ellipsis: true,
+        key: "address",
-  },
+        width: 200,
-  {
+      },
-    title: "Округ",
+      {
-    dataIndex: "district",
+        title: "Район",
-    key: "district",
+        dataIndex: "area",
-    width: "120px",
+        key: "area",
-    ellipsis: true,
+        width: "120px",
-  },
+        ellipsis: true,
-  {
+        render: (_, record) => {
-    title: "Название",
+          return getRegionNameById(record.area, regions?.normalized);
-    dataIndex: "name",
+        },
-    key: "name",
+      },
-    width: "120px",
+      {
-    ellipsis: true,
+        title: "Округ",
-  },
+        dataIndex: "district",
-  {
+        key: "district",
-    title: "Категория",
+        width: "120px",
-    dataIndex: "category",
+        ellipsis: true,
-    key: "category",
+        render: (_, record) => {
-    width: "120px",
+          return getRegionNameById(record.district, regions?.normalized);
-    ellipsis: true,
+        },
-  },
+      },
-  {
+      {
-    title: "Факт",
+        title: "Название",
-    dataIndex: "fact",
+        dataIndex: "name",
-    key: "fact",
+        key: "name",
-    width: "120px",
+        width: "120px",
-    ellipsis: true,
+        ellipsis: true,
-  },
+      },
-  {
+      {
-    title: "Расхождение с прогнозом",
+        title: "Категория",
-    dataIndex: "delta_current",
+        dataIndex: "category",
-    key: "delta_current",
+        key: "category",
-    width: "120px",
+        width: "120px",
-    ellipsis: true,
+        ellipsis: true,
-  },
+      },
-  {
+      {
-    title: "Зрелость",
+        title: "Факт",
-    dataIndex: "age_day",
+        dataIndex: "fact",
-    key: "age_day",
+        key: "fact",
-    width: "120px",
+        width: "120px",
-    ellipsis: true,
+        ellipsis: true,
-  },
+      },
-];
+      {
+        title: "Расхождение с прогнозом",
+        dataIndex: "delta_current",
+        key: "delta_current",
+        width: "120px",
+        ellipsis: true,
+      },
+      {
+        title: "Зрелость",
+        dataIndex: "age_day",
+        key: "age_day",
+        width: "120px",
+        ellipsis: true,
+      },
+    ];
+  }, [regions?.normalized]);
+};

src/modules/Table/columns.js

@@ -1,55 +0,0 @@
-import { STATUS_LABEL_MAPPER } from "../../config";
-
-export const columns = [
-  {
-    title: "Адрес",
-    dataIndex: "address",
-    key: "address",
-    width: 200,
-  },
-  {
-    title: "Район",
-    dataIndex: "area",
-    key: "area",
-    width: "120px",
-    ellipsis: true,
-  },
-  {
-    title: "Округ",
-    dataIndex: "district",
-    key: "district",
-    width: "120px",
-    ellipsis: true,
-  },
-  {
-    title: "Название",
-    dataIndex: "name",
-    key: "name",
-    width: "120px",
-    ellipsis: true,
-  },
-  {
-    title: "Категория",
-    dataIndex: "category",
-    key: "category",
-    width: "120px",
-    ellipsis: true,
-  },
-  {
-    title: "Статус",
-    dataIndex: "status",
-    key: "status",
-    width: "120px",
-    ellipsis: true,
-    render: (_, record) => {
-      return STATUS_LABEL_MAPPER[record.status];
-    },
-  },
-  {
-    title: "Прогнозный трафик",
-    dataIndex: "prediction_current",
-    key: "prediction_current",
-    width: "120px",
-    ellipsis: true,
-  },
-];

src/modules/Table/useColumns.js

@@ -0,0 +1,71 @@
+import { STATUS_LABEL_MAPPER } from "../../config";
+import { useMemo } from "react";
+import { useGetRegions } from "../../components/RegionSelect.jsx";
+import { getRegionNameById } from "../../Map/Popup/mode-popup/config.js";
+
+export const useColumns = (fields = []) => {
+  const { data: regions } = useGetRegions();
+
+  return useMemo(() => {
+    return [
+      {
+        title: "Адрес",
+        dataIndex: "address",
+        key: "address",
+        width: 200,
+      },
+      {
+        title: "Район",
+        dataIndex: "area",
+        key: "area",
+        width: "120px",
+        ellipsis: true,
+        render: (_, record) => {
+          return getRegionNameById(record.area, regions?.normalized);
+        },
+      },
+      {
+        title: "Округ",
+        dataIndex: "district",
+        key: "district",
+        width: "120px",
+        ellipsis: true,
+        render: (_, record) => {
+          return getRegionNameById(record.district, regions?.normalized);
+        },
+      },
+      {
+        title: "Название",
+        dataIndex: "name",
+        key: "name",
+        width: "120px",
+        ellipsis: true,
+      },
+      {
+        title: "Категория",
+        dataIndex: "category",
+        key: "category",
+        width: "120px",
+        ellipsis: true,
+      },
+      {
+        title: "Статус",
+        dataIndex: "status",
+        key: "status",
+        width: "120px",
+        ellipsis: true,
+        render: (_, record) => {
+          return STATUS_LABEL_MAPPER[record.status];
+        },
+      },
+      {
+        title: "Прогнозный трафик",
+        dataIndex: "prediction_current",
+        key: "prediction_current",
+        width: "120px",
+        ellipsis: true,
+      },
+      ...fields,
+    ];
+  }, [regions?.normalized, fields]);
+};