TRUNK
/
postnet-front
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display region name instead of id in popup and tables

Browse Source
dev
Platon Yasev 3 years ago
parent b43fde239c
commit e34a77c815
9 changed files with 169 additions and 126 deletions
Show Stats Download Patch File Download Diff File

12
src/Map/Popup/mode-popup/FeatureProperties.jsx
Unescape View File

@ -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;
value = isNil(value) && empty ? empty : value;
if (type === "region") {
value = render(value, data?.normalized);
} else {
value = render ? render(value) : value;
value = isNil(value) && empty ? empty : value;
}
return value;
};

11
src/Map/Popup/mode-popup/config.js
Unescape View File

@ -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: "Название",

2
src/components/RegionSelect.jsx
Unescape View File

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

8
src/modules/Table/OnApprovalTable/OnApprovalTable.jsx
Unescape View File

@ -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 = [
...columns,
const extraCols = [
{
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}
/>

3
src/modules/Table/PendingTable/PendingTable.jsx
Unescape View File

@ -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));

3
src/modules/Table/WorkingTable/WorkingTable.jsx
Unescape View File

@ -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],

130
src/modules/Table/WorkingTable/columns.js
Unescape View File

@ -1,57 +1,73 @@
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: "fact",
key: "fact",
width: "120px",
ellipsis: true,
},
{
title: "Расхождение с прогнозом",
dataIndex: "delta_current",
key: "delta_current",
width: "120px",
ellipsis: true,
},
{
title: "Зрелость",
dataIndex: "age_day",
key: "age_day",
width: "120px",
ellipsis: true,
},
];
import { useGetRegions } from "../../../components/RegionSelect.jsx";
import { useMemo } from "react";
import { getRegionNameById } from "../../../Map/Popup/mode-popup/config.js";
export const useColumns = () => {
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: "fact",
key: "fact",
width: "120px",
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]);
};

55
src/modules/Table/columns.js
Unescape View File

@ -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,
},
];

71
src/modules/Table/useColumns.js
Unescape View File

@ -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]);
};
Write Preview
Loading…
Cancel
Save