From 1b62827c5d72db5df1fd912dddba540d1d714faa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pavel=20Zbytovsk=C3=BD?= Date: Sat, 28 Oct 2023 09:32:58 +0200 Subject: [PATCH] refactor to one Table --- .../Properties/IdSchemeFields.tsx | 103 +++++----- .../FeaturePanel/Properties/Properties.tsx | 18 +- .../Properties/TagsTableInner.tsx | 176 +++++++++--------- .../Map/behaviour/useOnMapClicked.tsx | 4 +- src/services/__tests__/osmApi.test.ts | 4 +- 5 files changed, 149 insertions(+), 156 deletions(-) diff --git a/src/components/FeaturePanel/Properties/IdSchemeFields.tsx b/src/components/FeaturePanel/Properties/IdSchemeFields.tsx index bf6392280..86976caa7 100644 --- a/src/components/FeaturePanel/Properties/IdSchemeFields.tsx +++ b/src/components/FeaturePanel/Properties/IdSchemeFields.tsx @@ -80,7 +80,9 @@ const addUnits = (label, value: string | ReactNode) => { }; const getTooltip = (field: Field, key: string) => - `field: ${field.fieldKey}${key === field.fieldKey ? '' : `, key: ${key}`}`; + `field: ${field.fieldKey}${key === field.fieldKey ? '' : `, key: ${key}`} (${ + field.type + })`; export const IdSchemeFields = () => { const { openWithTag } = useEditDialogContext(); @@ -141,57 +143,48 @@ export const IdSchemeFields = () => { ), )} - - {!!(schema.keysTodo.length + schema.tagsWithFields.length) && ( - <> - - - - - - {otherTagsShown && - schema.tagsWithFields.map( - ({ - key, - value, - label, - field, - fieldTranslation, - tagsForField, - }) => ( - - - - - ), - )} - -
- -
- {removeUnits(label)} - - - openWithTag(tagsForField?.[0]?.key ?? key) - } - /> - {render( - field, - feature, - key, - addUnits(label, value), - tagsForField, - fieldTranslation, - )} -
- - {otherTagsShown && ( - <> + {!!(schema.keysTodo.length + schema.tagsWithFields.length) && ( + + + + + + + {otherTagsShown && + schema.tagsWithFields.map( + ({ + key, + value, + label, + field, + fieldTranslation, + tagsForField, + }) => ( + + {removeUnits(label)} + + + openWithTag(tagsForField?.[0]?.key ?? key) + } + /> + {render( + field, + feature, + key, + addUnits(label, value), + tagsForField, + fieldTranslation, + )} + + + ), + )} + {otherTagsShown && ( ({ ...acc, [key]: feature.tags[key] }), @@ -200,10 +193,10 @@ export const IdSchemeFields = () => { center={feature.center} except={[]} /> - - )} - - )} + )} + + )} + ); }; diff --git a/src/components/FeaturePanel/Properties/Properties.tsx b/src/components/FeaturePanel/Properties/Properties.tsx index 246922bb3..dade64937 100644 --- a/src/components/FeaturePanel/Properties/Properties.tsx +++ b/src/components/FeaturePanel/Properties/Properties.tsx @@ -5,6 +5,8 @@ import { t } from '../../../services/intl'; import { TagsTableInner } from './TagsTableInner'; import { useFeatureContext } from '../../utils/FeatureContext'; import { Subheading } from '../helpers/Subheading'; +import { Wrapper } from './Wrapper'; +import { Table } from './Table'; export const Properties = ({ showTags }) => { const { feature } = useFeatureContext(); @@ -24,11 +26,17 @@ export const Properties = ({ showTags }) => { {showTags && ( <> {t('featurepanel.all_tags_heading')} - + + + + + +
+ )} diff --git a/src/components/FeaturePanel/Properties/TagsTableInner.tsx b/src/components/FeaturePanel/Properties/TagsTableInner.tsx index e230b6b65..790aef559 100644 --- a/src/components/FeaturePanel/Properties/TagsTableInner.tsx +++ b/src/components/FeaturePanel/Properties/TagsTableInner.tsx @@ -7,8 +7,6 @@ import { buildAddress } from '../../../services/helpers'; import { ToggleButton } from '../helpers/ToggleButton'; import { renderValue } from './renderValue'; import { useEditDialogContext } from '../helpers/EditDialogContext'; -import { Wrapper } from './Wrapper'; -import { Table } from './Table'; const isAddr = (k) => k.match(/^addr:|uir_adr|:addr/); const isName = (k) => k.match(/^name(:|$)/); @@ -94,95 +92,89 @@ export const TagsTableInner = ({ tags, center, except }) => { ); return ( - - - - - - - - - - {rest.map(([k, v]) => ( - - - - - ))} - - - - - - -
{k} - onEdit(k)} /> - {renderValue(k, v)} -
- + <> + + + + + + + {rest.map(([k, v]) => ( + + {k} + + onEdit(k)} /> + {renderValue(k, v)} + + + ))} + + + + + + ); }; diff --git a/src/components/Map/behaviour/useOnMapClicked.tsx b/src/components/Map/behaviour/useOnMapClicked.tsx index 20e6beeb0..5b3426898 100644 --- a/src/components/Map/behaviour/useOnMapClicked.tsx +++ b/src/components/Map/behaviour/useOnMapClicked.tsx @@ -6,7 +6,7 @@ import { getUrlOsmId, isSameOsmId, } from '../../../services/helpers'; -import { getRoundedPosition } from '../../../utils'; +import { getRoundedPosition, publishDbgObject } from '../../../utils'; import { getCenter } from '../../../services/getCenter'; import { convertMapIdToOsmId, getIsOsmObject } from '../helpers'; import { getCoordsFeature } from '../../../services/getCoordsFeature'; @@ -43,7 +43,7 @@ export const useOnMapClicked = useAddMapEvent( const skeleton = getSkeleton(features[0], coords); addFeatureCenterToCache(getShortId(skeleton.osmMeta), skeleton.center); // for ways/relations we dont receive center from OSM API console.log(`clicked map feature (id=${features[0].id}): `, features[0]); // eslint-disable-line no-console - console.log(`^- skeleton ${getUrlOsmId(skeleton.osmMeta)}`, skeleton); // eslint-disable-line no-console + publishDbgObject('last skeleton', skeleton); if (skeleton.nonOsmObject) { const roundedPosition = getRoundedPosition(coords, map.getZoom()); diff --git a/src/services/__tests__/osmApi.test.ts b/src/services/__tests__/osmApi.test.ts index 105a7ead2..70f28bb73 100644 --- a/src/services/__tests__/osmApi.test.ts +++ b/src/services/__tests__/osmApi.test.ts @@ -31,8 +31,8 @@ describe('fetchFeature', () => { jest.clearAllMocks(); jest.spyOn(tagging, 'fetchSchemaTranslations').mockResolvedValue(undefined); jest - .spyOn(idTaggingScheme, 'getSchemaForFeature') - .mockReturnValue(undefined); // this is covered in idTaggingScheme.test.ts + .spyOn(idTaggingScheme, 'addSchemaToFeature') + .mockImplementation((f) => f); // this is covered in idTaggingScheme.test.ts }); const isServer = jest.spyOn(helpers, 'isServer').mockReturnValue(true);