From 1a4086a8bbca15a5f197f2f4ead79d9dd045f251 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 6 Aug 2022 09:07:11 -0700
Subject: Support custom attributes (fix #1008)

---
 modern/src/settings/PreferencesPage.js | 40 ++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 14 deletions(-)

(limited to 'modern')

diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index a29c056d..54c529f6 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import {
-  Accordion, AccordionSummary, AccordionDetails, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, FormGroup, InputAdornment, IconButton, OutlinedInput,
+  Accordion, AccordionSummary, AccordionDetails, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, FormGroup, InputAdornment, IconButton, OutlinedInput, Autocomplete, TextField, createFilterOptions,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -62,6 +62,8 @@ const PreferencesPage = () => {
   const [mapCluster, setMapCluster] = usePersistedState('mapCluster', true);
   const [mapOnSelect, setMapOnSelect] = usePersistedState('mapOnSelect', false);
 
+  const filter = createFilterOptions();
+
   const generateToken = useCatch(async () => {
     const response = await fetch('/api/session/token', {
       method: 'POST',
@@ -180,19 +182,29 @@ const PreferencesPage = () => {
                 ))}
               </Select>
             </FormControl>
-            <FormControl>
-              <InputLabel>{t('sharedAttributes')}</InputLabel>
-              <Select
-                label={t('sharedAttributes')}
-                value={positionItems}
-                onChange={(e) => setPositionItems(e.target.value)}
-                multiple
-              >
-                {Object.keys(positionAttributes).map((key) => (
-                  <MenuItem key={key} value={key}>{positionAttributes[key].name}</MenuItem>
-                ))}
-              </Select>
-            </FormControl>
+            <Autocomplete
+              multiple
+              freeSolo
+              options={Object.keys(positionAttributes)}
+              getOptionLabel={(option) => (positionAttributes.hasOwnProperty(option) ? positionAttributes[option].name : option)}
+              value={positionItems}
+              onChange={(_, option) => {
+                setPositionItems(option);
+              }}
+              filterOptions={(options, params) => {
+                const filtered = filter(options, params);
+                if (params.inputValue && !filtered.includes(params.inputValue)) {
+                  filtered.push(params.inputValue);
+                }
+                return filtered;
+              }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder={t('sharedAttributes')}
+                />
+              )}
+            />
             <FormGroup>
               <FormControlLabel
                 control={<Checkbox checked={mapGeofences} onChange={(e) => setMapGeofences(e.target.checked)} />}
-- 
cgit v1.2.3