works

zbycz · Oct 15, 2024 · d27bce2 · d27bce2
1 parent 5786b8d
commit d27bce2
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 41 deletions.
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/ComboSearchBox.tsx b/src/components/FeaturePanel/EditDialog/EditContent/ComboSearchBox.tsx
@@ -6,10 +6,13 @@ import Maki from '../../../utils/Maki';
 import { TranslatedPreset } from './PresetSelect';
 import { Setter } from '../../../../types';
 import { Preset } from '../../../../services/tagging/types/Presets';
+import { t } from '../../../../services/intl';
+import { SelectInputProps } from '@mui/material/Select/SelectInput';
+import { useEditContext } from '../EditContext';
 
 // https://stackoverflow.com/a/70918883/671880
 
-const containsText = (text, searchText) =>
+const containsText = (text: string, searchText: string) =>
   text.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
 
 const StyledListSubheader = styled(ListSubheader)`
@@ -37,31 +40,22 @@ const emptyOptions = [
 ];
 
 const Placeholder = styled.span`
-  color: rgba(0, 0, 0, 0.54);
+  color: ${({ theme }) => theme.palette.text.secondary};
 `;
 
-const renderOption = (option: TranslatedPreset | null) =>
-  option ? (
+const renderOption = (option: TranslatedPreset | '') =>
+  !option ? (
+    <Placeholder>{t('editdialog.preset_select.placeholder')}</Placeholder>
+  ) : (
     <>
       <Maki ico={option.icon} size={16} middle themed />
       <span style={{ paddingLeft: 5 }} />
       {option.name}
     </>
-  ) : (
-    <Placeholder>Select the type</Placeholder>
   );
 
-export const ComboSearchBox = ({
-  value,
-  setValue,
-  options,
-}: {
-  value: Preset;
-  setValue: Setter<Preset>;
-  options: TranslatedPreset[];
-}) => {
-  const [searchText, setSearchText] = useState('');
-  const displayedOptions = useMemo<TranslatedPreset[]>(
+const useDisplayedOptions = (searchText: string, options: TranslatedPreset[]) =>
+  useMemo<TranslatedPreset[]>(
     () =>
       searchText.length
         ? options.filter((option) => containsText(option.name, searchText))
@@ -71,13 +65,70 @@ export const ComboSearchBox = ({
     [options, searchText],
   );
 
+const SearchRow = ({
+  onChange,
+}: {
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}) => (
+  <StyledListSubheader>
+    <SearchIcon fontSize="small" />
+    <InputBase
+      size="small"
+      autoFocus
+      placeholder={t('editdialog.preset_select.search_placeholder')}
+      fullWidth
+      onChange={onChange}
+      onKeyDown={(e) => {
+        if (e.key !== 'Escape') {
+          e.stopPropagation();
+        }
+      }}
+    />
+  </StyledListSubheader>
+);
+
+export const ComboSearchBox = ({
+  value,
+  setValue,
+  options,
+}: {
+  value: TranslatedPreset | '';
+  setValue: Setter<TranslatedPreset>;
+  options: TranslatedPreset[];
+}) => {
+  const { tags, setTagsEntries } = useEditContext().tags;
+
+  const [searchText, setSearchText] = useState('');
+  const displayedOptions = useDisplayedOptions(searchText, options);
+
+  console.log('value', value);
+
   return (
     <Select
       MenuProps={{ autoFocus: false }}
       value={value}
       onChange={(e) => {
-        // @ts-ignore https://github.com/mui/material-ui/issues/14286
-        setValue(e.target.value);
+        const oldValue = value;
+        if (oldValue) {
+          Object.entries(oldValue.addTags ?? oldValue.tags ?? {}).forEach(
+            (tag) => {
+              setTagsEntries((state) =>
+                state.filter(
+                  ([key, value]) => key !== tag[0] && value !== tag[1],
+                ),
+              );
+            },
+          );
+        }
+
+        const newValue = e.target.value as unknown as TranslatedPreset; // https://github.com/mui/material-ui/issues/14286
+        if (newValue) {
+          const newTags = Object.entries(
+            newValue.addTags ?? newValue.tags ?? {},
+          );
+          setTagsEntries((state) => [...newTags, ...state]);
+        }
+        setValue(newValue);
       }}
       onClose={() => setSearchText('')}
       renderValue={() => renderOption(value)}
@@ -86,21 +137,7 @@ export const ComboSearchBox = ({
       fullWidth
       displayEmpty
     >
-      <StyledListSubheader>
-        <SearchIcon fontSize="small" />
-        <InputBase
-          size="small"
-          autoFocus
-          placeholder="Type to search..."
-          fullWidth
-          onChange={(e) => setSearchText(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key !== 'Escape') {
-              e.stopPropagation();
-            }
-          }}
-        />
-      </StyledListSubheader>
+      <SearchRow onChange={(e) => setSearchText(e.target.value)} />
       {displayedOptions.map((option) => (
         // @ts-ignore https://github.com/mui/material-ui/issues/14286
         <MenuItem key={option.presetKey} component="li" value={option}>

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/PresetSelect.tsx b/src/components/FeaturePanel/EditDialog/EditContent/PresetSelect.tsx
@@ -26,7 +26,7 @@ type PresetCacheItem = Preset & { name: string; icon: string; terms: string[] };
 type PresetsCache = PresetCacheItem[];
 
 let presetsCache: PresetsCache | null = null;
-const getPresetsCache = async (): Promise<PresetsCache> => {
+const getTranslatedPresets = async (): Promise<PresetsCache> => {
   if (presetsCache) {
     return presetsCache;
   }
@@ -64,7 +64,7 @@ const LabelWrapper = styled.div`
 const useMatchTags = (
   feature: Feature,
   tags: FeatureTags,
-  setPreset: Setter<Preset>,
+  setPreset: Setter<TranslatedPreset | ''>,
 ) => {
   useEffect(() => {
     (async () => {
@@ -74,26 +74,25 @@ const useMatchTags = (
         tags,
       };
       const preset = getPresetForFeature(updatedFeature); // takes ~ 1 ms
-      const p = (await getPresetsCache()).find(
+      const translatedPreset = (await getTranslatedPresets()).find(
         (option) => option.presetKey === preset.presetKey,
       );
-      setPreset(p);
-      console.log('preset', preset, p);
+      setPreset(translatedPreset ?? '');
     })();
   }, [tags, feature, setPreset]);
 };
 
 const useOptions = () => {
   const [options, setOptions] = useState<PresetsCache>([]);
   useEffect(() => {
-    getPresetsCache().then((presets) => setOptions(presets));
+    getTranslatedPresets().then((presets) => setOptions(presets));
   }, []);
   return options;
 };
 
 export const PresetSelect = () => {
   const { tags } = useEditContext().tags;
-  const [preset, setPreset] = useState<null | Preset>(null);
+  const [preset, setPreset] = useState<TranslatedPreset | ''>('');
   const { feature } = useFeatureContext();
   const options = useOptions();
   useMatchTags(feature, tags, setPreset);

diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -203,6 +203,8 @@ export default {
   'editsuccess.edit.urlLabel': `Your changes:`,
   'editsuccess.edit.textLabel': 'Comment',
   'editdialog.preset_select.label': 'Type:',
+  'editdialog.preset_select.placeholder': 'Select the type',
+  'editdialog.preset_select.search_placeholder': 'Type to search...',
 
   'tags.name': 'Name',
   'tags.description': 'Description',