From e7995f3b7a6b0828b81bebaf556ef7afb59bef61 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sat, 11 Jun 2022 18:32:36 -0700
Subject: Automatically add map keys

---
 modern/src/settings/PreferencesPage.js             | 32 ++++++++++++----------
 modern/src/settings/UserPage.js                    | 26 ++++++++++++++----
 .../src/settings/components/EditAttributesView.js  |  3 +-
 3 files changed, 41 insertions(+), 20 deletions(-)

(limited to 'modern/src/settings')

diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index c128e5e4..2a2674f7 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -1,17 +1,8 @@
 import React 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,
+  Accordion, AccordionSummary, AccordionDetails, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, FormGroup,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -38,8 +29,11 @@ const useStyles = makeStyles((theme) => ({
 
 const PreferencesPage = () => {
   const classes = useStyles();
+  const navigate = useNavigate();
   const t = useTranslation();
 
+  const userId = useSelector((state) => state.session.user.id);
+
   const { languages, language, setLanguage } = useLocalization();
   const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
 
@@ -96,11 +90,21 @@ const PreferencesPage = () => {
               <Select
                 label={t('mapActive')}
                 value={activeMapStyles}
-                onChange={(e) => setActiveMapStyles(e.target.value)}
+                onChange={(e, child) => {
+                  const clicked = mapStyles.find((s) => s.id === child.props.value);
+                  if (clicked.available) {
+                    setActiveMapStyles(e.target.value);
+                  } else if (clicked.id !== 'custom') {
+                    const query = new URLSearchParams({ attribute: clicked.attribute });
+                    navigate(`/settings/user/${userId}?${query.toString()}`);
+                  }
+                }}
                 multiple
               >
                 {mapStyles.map((style) => (
-                  <MenuItem key={style.id} value={style.id}>{style.title}</MenuItem>
+                  <MenuItem key={style.id} value={style.id}>
+                    <Typography component="span" color={style.available ? 'textPrimary' : 'error'}>{style.title}</Typography>
+                  </MenuItem>
                 ))}
               </Select>
             </FormControl>
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index d4046fbf..964291e8 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -1,6 +1,4 @@
-import React, { useState } from 'react';
-import TextField from '@mui/material/TextField';
-
+import React, { useEffect, useState } from 'react';
 import {
   Accordion,
   AccordionSummary,
@@ -16,6 +14,7 @@ import {
   IconButton,
   OutlinedInput,
   FormGroup,
+  TextField,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -33,6 +32,7 @@ import SettingsMenu from './components/SettingsMenu';
 import useCommonUserAttributes from '../common/attributes/useCommonUserAttributes';
 import { useAdministrator, useManager } from '../common/util/permissions';
 import { prefixString } from '../common/util/stringUtils';
+import useQuery from '../common/util/useQuery';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -58,6 +58,21 @@ const UserPage = () => {
 
   const [item, setItem] = useState();
 
+  const query = useQuery();
+  const [queryHandled, setQueryHandled] = useState(false);
+  const attribute = query.get('attribute');
+
+  useEffect(() => {
+    if (!queryHandled && item && attribute) {
+      if (!item.attributes.hasOwnProperty('attribute')) {
+        const updatedAttributes = { ...item.attributes };
+        updatedAttributes[attribute] = '';
+        setItem({ ...item, attributes: updatedAttributes });
+      }
+      setQueryHandled(true);
+    }
+  }, [item, queryHandled, setQueryHandled, attribute]);
+
   const onItemSaved = (result) => {
     if (result.id === currentUserId) {
       dispatch(sessionActions.updateUser(result));
@@ -79,7 +94,7 @@ const UserPage = () => {
     >
       {item && (
         <>
-          <Accordion defaultExpanded>
+          <Accordion defaultExpanded={!attribute}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Typography variant="subtitle1">
                 {t('sharedRequired')}
@@ -286,7 +301,7 @@ const UserPage = () => {
               </FormGroup>
             </AccordionDetails>
           </Accordion>
-          <Accordion>
+          <Accordion defaultExpanded={!!attribute}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Typography variant="subtitle1">
                 {t('sharedAttributes')}
@@ -297,6 +312,7 @@ const UserPage = () => {
                 attributes={item.attributes}
                 setAttributes={(attributes) => setItem({ ...item, attributes })}
                 definitions={{ ...commonUserAttributes, ...userAttributes }}
+                focusAttribute={attribute}
               />
             </AccordionDetails>
           </Accordion>
diff --git a/modern/src/settings/components/EditAttributesView.js b/modern/src/settings/components/EditAttributesView.js
index 6b7ab5ac..3329d7bc 100644
--- a/modern/src/settings/components/EditAttributesView.js
+++ b/modern/src/settings/components/EditAttributesView.js
@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
+const EditAttributesView = ({ attributes, setAttributes, definitions, focusAttribute }) => {
   const classes = useStyles();
   const t = useTranslation();
 
@@ -176,6 +176,7 @@ const EditAttributesView = ({ attributes, setAttributes, definitions }) => {
               type={type === 'number' ? 'number' : 'text'}
               value={getDisplayValue(value, subtype)}
               onChange={(e) => updateAttribute(key, e.target.value, type, subtype)}
+              autoFocus={focusAttribute === key}
               endAdornment={(
                 <InputAdornment position="end">
                   <IconButton size="small" onClick={() => deleteAttribute(key)}>
-- 
cgit v1.2.3