EditDialog: Add parents (#836)

zbycz · Dec 8, 2024 · 111e441 · 111e441
1 parent 48ea08b
commit 111e441
Show file tree

Hide file tree

Showing 11 changed files with 218 additions and 100 deletions.
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/CommentField.tsx b/src/components/FeaturePanel/EditDialog/EditContent/CommentField.tsx
@@ -8,6 +8,7 @@ export const CommentField = () => {
   return (
     <>
       <TextField
+        sx={{ mt: 6 }}
         label={t('editdialog.comment')}
         placeholder={t('editdialog.comment_placeholder')}
         InputLabelProps={{
@@ -20,9 +21,6 @@ export const CommentField = () => {
         value={comment}
         onChange={(e) => setComment(e.target.value)}
       />
-      <br />
-      <br />
-      <br />
     </>
   );
 };
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/ContributionInfoBox.tsx b/src/components/FeaturePanel/EditDialog/EditContent/ContributionInfoBox.tsx
@@ -7,13 +7,13 @@ export const ContributionInfoBox = () => {
   const { loggedIn } = useOsmAuthContext();
   return loggedIn ? (
     <Box mt={4} mb={4}>
-      <Typography variant="body1" color="textSecondary">
+      <Typography variant="body2" color="textSecondary">
         <Translation id="editdialog.info_edit" />
       </Typography>
     </Box>
   ) : (
     <Box mt={4} mb={4}>
-      <Typography variant="body1" color="textSecondary">
+      <Typography variant="body2" color="textSecondary">
         <Translation id="editdialog.info_note" />
       </Typography>
     </Box>

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
@@ -57,8 +57,8 @@ export const EditContent = () => {
             )}
             <div>
               <FeatureEditSection shortId={current} />
-              <ContributionInfoBox />
               <CommentField />
+              <ContributionInfoBox />
               <OsmUserLogged />
             </div>
           </Stack>

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx
@@ -1,11 +1,10 @@
 import { PresetSelect } from './PresetSelect';
 import { MajorKeysEditor } from './MajorKeysEditor';
-import { OptionsEditor } from './OptionsEditor';
 import { TagsEditor } from './TagsEditor/TagsEditor';
 import React from 'react';
-import { OsmId } from '../../../../../services/types';
 import { SingleFeatureEditContextProvider } from './SingleFeatureEditContext';
 import { MembersEditor } from '../MembersEditor';
+import { ParentsEditor } from '../ParentsEditor';
 
 type Props = {
   shortId: string;
@@ -15,9 +14,8 @@ export const FeatureEditSection = ({ shortId }: Props) => (
   <SingleFeatureEditContextProvider shortId={shortId}>
     <PresetSelect />
     <MajorKeysEditor />
-    <MembersEditor />
-    {/*<ParentsEditor />*/}
-    <OptionsEditor />
     <TagsEditor />
+    <ParentsEditor />
+    <MembersEditor />
   </SingleFeatureEditContextProvider>
 );
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OptionsEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/OptionsEditor.tsx
@@ -1,5 +1,15 @@
 import React from 'react';
-import { Checkbox, FormControlLabel, TextField } from '@mui/material';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Checkbox,
+  FormControlLabel,
+  List,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material';
 import { useEditDialogFeature } from '../../utils';
 import { useEditContext } from '../../EditContext';
 import { DialogHeading } from '../../components';
@@ -8,6 +18,10 @@ import { useOsmAuthContext } from '../../../../utils/OsmAuthContext';
 import { useToggleState } from '../../../../helpers';
 import { getIdEditorLink } from '../../../helpers/externalLinks';
 import { useFeatureEditData } from './SingleFeatureEditContext';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { getShortId } from '../../../../../services/helpers';
+import { FeatureRow } from '../FeatureRow';
+import { fetchSchemaTranslations } from '../../../../../services/tagging/translations';
 
 // TODO don't delete objects, but only remove their Preset tags https://github.com/zbycz/osmapp/issues/222
 export const PlaceCancelledToggle = () => {
@@ -73,14 +87,12 @@ export const OptionsEditor = () => {
   const { items } = useEditContext();
 
   return (
-    <>
-      {!isAddPlace && !isUndelete && (
-        <>
-          <DialogHeading>{t('editdialog.options_heading')}</DialogHeading>
-          <PlaceCancelledToggle />
-          {items.length >= 2 ? null : <ChangeLocationEditor />}
-        </>
-      )}
-    </>
+    !isAddPlace &&
+    !isUndelete && (
+      <>
+        <PlaceCancelledToggle />
+        {items.length >= 2 ? null : <ChangeLocationEditor />}
+      </>
+    )
   );
 };
diff --git a/...mponents/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/TagsEditor.tsx b/...mponents/FeaturePanel/EditDialog/EditContent/FeatureEditSection/TagsEditor/TagsEditor.tsx
@@ -1,6 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
-import { Box, Button, Typography } from '@mui/material';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Button,
+  Stack,
+  Typography,
+} from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import AddIcon from '@mui/icons-material/Add';
 import { majorKeys } from '../MajorKeysEditor';
@@ -11,6 +19,7 @@ import { KeyInput } from './KeyInput';
 import { ValueInput } from './ValueInput';
 import { useFeatureEditData } from '../SingleFeatureEditContext';
 import { TagsEntries } from '../../../useEditItems';
+import { OptionsEditor } from '../OptionsEditor';
 
 const Table = styled.table`
   width: calc(100% - 8px);
@@ -48,17 +57,6 @@ const TagsEditorHeading = () => (
   </Typography>
 );
 
-const TagsEditorButton = ({ setVisible }) => (
-  <Button
-    variant="text"
-    disableElevation
-    onClick={() => setVisible((currentState) => !currentState)}
-  >
-    {t('editdialog.tags_editor')}
-    <ExpandMoreIcon fontSize="small" />
-  </Button>
-);
-
 const TagsEditorInfo = () => (
   <tr>
     <td colSpan={2}>
@@ -98,46 +96,60 @@ const AddButton = () => {
 const TagsEditorInner = () => {
   const { tagsEntries } = useFeatureEditData();
   return (
-    <>
-      <TagsEditorHeading />
-      <Table>
-        <tbody>
-          {tagsEntries.map((_, index) => (
-            <tr key={index}>
-              <th>
-                <KeyInput index={index} />
-              </th>
-              <td>
-                <ValueInput index={index} />
-              </td>
-            </tr>
-          ))}
-          <AddButton />
-          <TagsEditorInfo />
-        </tbody>
-      </Table>
-    </>
+    <Table>
+      <tbody>
+        {tagsEntries.map((_, index) => (
+          <tr key={index}>
+            <th>
+              <KeyInput index={index} />
+            </th>
+            <td>
+              <ValueInput index={index} />
+            </td>
+          </tr>
+        ))}
+        <AddButton />
+        <TagsEditorInfo />
+      </tbody>
+    </Table>
   );
 };
 
 export const TagsEditor = () => {
   const { focusTag } = useEditDialogContext();
   const focusThisEditor = isString(focusTag) && !majorKeys.includes(focusTag);
-  const [visible, setVisible] = useState(focusThisEditor);
+  const [expanded, setExpanded] = useState(focusThisEditor);
 
   useEffect(() => {
     if (focusThisEditor) {
-      setVisible(true);
+      setExpanded(true);
     }
   }, [focusThisEditor]);
 
   return (
-    <Box mb={4}>
-      {visible ? (
+    <Accordion
+      disableGutters
+      elevation={0}
+      square
+      expanded={expanded}
+      onChange={() => setExpanded(!expanded)}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="panel1-content"
+        id="panel1-header"
+      >
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Typography variant="button">
+            {t('editdialog.tags_editor')}
+          </Typography>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails>
         <TagsEditorInner />
-      ) : (
-        <TagsEditorButton setVisible={setVisible} />
-      )}
-    </Box>
+
+        <OptionsEditor />
+      </AccordionDetails>
+    </Accordion>
   );
 };
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx
@@ -0,0 +1,22 @@
+import { Divider, ListItem, ListItemText, Stack } from '@mui/material';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import React from 'react';
+
+export const FeatureRow = ({ label, shortId, onClick }) => {
+  return (
+    <>
+      <ListItem onClick={onClick}>
+        <Stack
+          alignItems="center"
+          justifyContent="space-between"
+          direction="row"
+          width="100%"
+        >
+          <ListItemText>{label ?? shortId}</ListItemText>
+          <ChevronRightIcon />
+        </Stack>
+      </ListItem>
+      <Divider />
+    </>
+  );
+};
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/MembersEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/MembersEditor.tsx
@@ -1,61 +1,41 @@
 import React from 'react';
 import { useFeatureEditData } from './FeatureEditSection/SingleFeatureEditContext';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Divider,
   List,
-  ListItem,
-  ListItemText,
   Stack,
   Typography,
   useTheme,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { fetchFeature } from '../../../../services/osmApi';
+import { FeatureRow } from './FeatureRow';
 import { OsmId } from '../../../../services/types';
 import { getApiId, getShortId } from '../../../../services/helpers';
 import { fetchSchemaTranslations } from '../../../../services/tagging/translations';
+import { fetchFeature } from '../../../../services/osmApi';
 import { useEditContext } from '../EditContext';
-
-export const MemberRow = ({ member }) => {
-  const { addFeature, setCurrent } = useEditContext();
-  const { label, shortId } = member;
-
-  const handleClick = async () => {
-    const apiId: OsmId = getApiId(member.shortId);
-    await fetchSchemaTranslations();
-    const feature = await fetchFeature(apiId);
-    addFeature(feature);
-    setCurrent(getShortId(feature.osmMeta));
-  };
-
-  return (
-    <>
-      <ListItem onClick={handleClick}>
-        <Stack
-          alignItems="center"
-          justifyContent="space-between"
-          direction="row"
-          width="100%"
-        >
-          <ListItemText>{label ?? shortId}</ListItemText>
-          <ChevronRightIcon />
-        </Stack>
-      </ListItem>
-      <Divider />
-    </>
-  );
-};
+import { t } from '../../../../services/intl';
 
 export const MembersEditor = () => {
   const { members } = useFeatureEditData();
   const theme = useTheme();
+  const { addFeature, items, setCurrent } = useEditContext();
 
   if (!members || members.length === 0) return null;
 
+  const handleClick = async (shortId) => {
+    const apiId: OsmId = getApiId(shortId);
+    await fetchSchemaTranslations();
+    const isNotInItems = !items.find((item) => item.shortId === shortId);
+    const feature = await fetchFeature(apiId);
+    if (isNotInItems) {
+      addFeature(feature);
+    }
+    setCurrent(getShortId(feature.osmMeta));
+  };
+
   return (
     <Accordion disableGutters elevation={0} square>
       <AccordionSummary
@@ -64,7 +44,9 @@ export const MembersEditor = () => {
         id="panel1-header"
       >
         <Stack direction="row" spacing={2} alignItems="center">
-          <Typography variant="button">Members ({members.length})</Typography>
+          <Typography variant="button">
+            {t('editdialog.members')} ({members.length})
+          </Typography>
         </Stack>
       </AccordionSummary>
       <AccordionDetails>
@@ -76,9 +58,16 @@ export const MembersEditor = () => {
             },
           }}
         >
-          {members.map((member) => (
-            <MemberRow key={member.shortId} member={member} />
-          ))}
+          {members.map((member) => {
+            return (
+              <FeatureRow
+                key={member.shortId}
+                shortId={member.shortId}
+                label={member.label}
+                onClick={() => handleClick(member.shortId)}
+              />
+            );
+          })}
         </List>
       </AccordionDetails>
     </Accordion>