mw: rebase resolve, og: condensed menu based on new record dialogue f…

…or managing custom layers

appv2/src/UI/App.tsx

@@ -36,6 +36,7 @@ import { LayerPickerBasic } from './Map/LayerPickerBasic';
 import { NewRecord } from './Map/Buttons/NewRecord';
 import NewRecordDialog from './Map/Buttons/NewRecordDialog';
 import AccessRequestPage from './Overlay/AccessRequest/AccessRequestPage';
+import CustomizeLayerMenu from './Map/Buttons/CustomizeLayerDialog';
 
 // URL listener so that the auth saga can redirect to the correct page
 const URL_LISTENER = (props) => {
@@ -200,6 +201,7 @@ const App: React.FC = () => {
       </Overlay>
       <Footer />
       <NewRecordDialog/>
+      <CustomizeLayerMenu/>
     </div>
   );
 };

appv2/src/UI/Map/Buttons/CustomizeLayerDialog.tsx

@@ -0,0 +1,171 @@
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  Theme
+} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { set } from 'lodash';
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { TOGGLE_CUSTOMIZE_LAYERS } from 'state/actions';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  formContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'start',
+    alignItems: 'center',
+    gap: 10,
+    paddingBlock: 10,
+    paddingInline: 8
+  },
+  select: {
+    minWidth: 200,
+    maxWidth: 400,
+    width: 'auto'
+  },
+  syncSuccessful: {
+    color: 'green'
+  },
+  dialogActionsBox: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  }
+}));
+
+const CustomizeLayerMenu = (props) => {
+  const dispatch = useDispatch();
+
+  const classes = useStyles();
+  const history = useHistory();
+
+  const accessRoles = useSelector((state: any) => state.Auth.accessRoles);
+  const dialogueOpen = useSelector((state: any) => state.Map.customizeLayersToggle);
+
+  //menu options
+  const newLayerTypeOptions = ['Draw', 'Upload KML/KMZ', 'WMS Link', 'WFS Link'];
+  const [optionVal, setOptionVal] = useState('Draw');
+  const [subMenuType, setSubMenuType] = useState('Init');
+  const [newLayerName, setNewLayerName] = useState('');
+
+
+  // two of each type
+  const customLayers = [{ id: 1, type: 'Drawn', label: 'banana',  data: '' }, {id: 2, type: 'Drawn', label: 'apple', data: ''}, {id: 3, type: 'WMS', label: 'orange', data: ''}, {id: 4, type: 'WMS', label: 'grape', data: ''}, {id: 5, type: 'WFS', label: 'pear', data: ''}, {id: 6, type: 'WFS', label: 'peach', data: ''}];
+
+  const cleanup = () => {
+    setSubMenuType('Init');
+    setOptionVal('Draw');
+  };
+
+  return (
+    <Dialog open={dialogueOpen}>
+      <DialogTitle>Add or remove a custom layer</DialogTitle>
+
+      <Box className={classes.formContainer}>
+        {
+          {
+            New: (
+              <FormControl>
+                <InputLabel>New Layer type</InputLabel>
+                <Select
+                  className={classes.select}
+                  value={optionVal}
+                  onChange={(e) => setOptionVal(e.target.value)}
+                  label="Choose new Layer type">
+                  {newLayerTypeOptions.map((option) => (
+                    <MenuItem disabled={['WMS Link', 'WFS Link'].includes(option)} key={Math.random()} value={option}>
+                      {option}
+                    </MenuItem>
+                  ))}
+                </Select>
+                <TextField
+                  className={classes.select}
+                  value={newLayerName}
+                  onChange={(e) => setNewLayerName(e.target.value)}
+                  label="Name your new layer">
+                </TextField>
+
+              </FormControl>
+            ),
+            Remove: (
+              <FormControl>
+                <InputLabel>Remove Layer</InputLabel>
+                <Select
+                  className={classes.select}
+                  value={optionVal}
+                  onChange={(e) => setOptionVal(e.target.value)}
+                  label="Choose Layer to remove">
+                  {customLayers.map((option) => (
+                    <MenuItem key={Math.random()} value={option.id}>
+                      {option.label + ' - ' + option.type}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            ),
+            Init: <></>
+          }[subMenuType]
+        }
+      </Box>
+
+      <DialogActions className={classes.dialogActionsBox}>
+        {
+          {
+            Init: (
+              <>
+                <Button
+                  onClick={() => {
+                    setSubMenuType('New');
+                  }}>
+                  Add new
+                </Button>
+                <Button
+                  onClick={() => {
+                    setSubMenuType('Remove');
+                  }}>
+                  Remove existing
+                </Button>
+              </>
+            ),
+            New: (
+              <>
+                <Button onClick={() => {}}>Create</Button>
+                <Button onClick={() => {
+                  setSubMenuType('Init');
+                }}>Back</Button>
+              </>
+            ),
+            Remove: (
+              <>
+                <Button onClick={() => {}}>Remove</Button>
+                <Button onClick={() => {
+                  setSubMenuType('Init');
+                }}>Back</Button>
+              </>
+            )
+          }[subMenuType]
+        }
+        <Button
+          onClick={() => {
+            dispatch({ type: TOGGLE_CUSTOMIZE_LAYERS });
+            cleanup();
+          }}>Exit</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+
+
+
+export default CustomizeLayerMenu;
+

appv2/src/UI/Map/Buttons/NewRecordDialog.tsx

@@ -228,7 +228,7 @@ const NewRecordDialog = (props: INewRecordDialog) => {
       <DialogActions className={classes.dialogActionsBox}>
         <Button
           onClick={() => {
-          //  props.handleDialogClose();
+            dispatch({ type: CLOSE_NEW_RECORD_MENU });
           }}>
           Cancel
         </Button>

appv2/src/UI/Map/LayerPickerBasic.tsx

@@ -15,10 +15,11 @@ import { DataBCLayer, LayerMode } from './DataBCRenderLayer';
 import 'leaflet/dist/leaflet.css';
 import { selectMap } from 'state/reducers/map';
 import LayersIcon from '@mui/icons-material/Layers';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Button } from '@mui/material';
 import Control from './CustomMapControl';
 import SettingsIcon from '@mui/icons-material/Settings';
+import { TOGGLE_CUSTOMIZE_LAYERS } from 'state/actions';
 
 export const LayerPickerBasic = (props) => {
   const simplePickerLayers = useSelector((state: any) => state.Map.simplePickerLayers);
@@ -28,6 +29,7 @@ export const LayerPickerBasic = (props) => {
     [51.49, -0.08],
     [51.5, -0.06]
 ];
+const dispatch = useDispatch();
 
   const layers = {
     'Regional Districts': { layerCode: 'WHSE_LEGAL_ADMIN_BOUNDARIES.ABMS_REGIONAL_DISTRICTS_SP' }
@@ -243,7 +245,7 @@ export const LayerPickerBasic = (props) => {
           sx={{ maxWidth: '15px' }}
           variant="contained"
           onClick={() => {
-            console.log('clicked');
+            dispatch({type: TOGGLE_CUSTOMIZE_LAYERS })
           }}>
           <LayersIcon sx={{ width: '15px' }} />
           <SettingsIcon sx={{ width: '15px' }} />

appv2/src/state/actions.tsx

@@ -105,6 +105,7 @@ export const ACTIVITY_SAVE_SUCCESS = 'ACTIVITY_SAVE_SUCCESS';
 export const ACTIVITY_TOGGLE_NOTIFICATION_REQUEST = "ACTIVITY_TOGGLE_NOTIFICATION_REQUEST";
 export const ACTIVITY_TOGGLE_NOTIFICATION_SUCCESS = "ACTIVITY_TOGGLE_NOTIFICATION_SUCCESS";
 
+export const TOGGLE_CUSTOMIZE_LAYERS = 'TOGGLE_CUSTOMIZE_LAYERS'
 export const ACTIVITY_PASTE_REQUEST = 'ACTIVITY_PASTE_REQUEST';
 export const ACTIVITY_PASTE_SUCCESS = 'ACTIVITY_PASTE_SUCCESS';
 export const ACTIVITY_PASTE_FAILURE = 'ACTIVITY_PASTE_FAILURE';

appv2/src/state/reducers/map.ts

@@ -47,7 +47,8 @@ import {
   USER_HOVERED_RECORD,
   INIT_SERVER_BOUNDARIES_GET,
   TOGGLE_QUICK_PAN_TO_RECORD,
-  USER_TOUCHED_RECORD
+  USER_TOUCHED_RECORD,
+  TOGGLE_CUSTOMIZE_LAYERS
 } from '../actions';
 
 import { AppConfig } from '../config';
@@ -94,6 +95,7 @@ class MapState {
   userRecordOnHoverRecordType: any;
   userRecordOnHoverRecordID: any;
   userRecordOnHoverRecordRow: any;
+  customizeLayersToggle: boolean;
 
   constructor() {
     this.initialized = false;
@@ -163,6 +165,8 @@ class MapState {
       highlightedType: null
     };
     this.quickPanToRecord = false;
+    this.quickPanToRecord = false
+    this.customizeLayersToggle = false
   }
 }
 const initialState = new MapState();
@@ -523,6 +527,12 @@ function createMapReducer(configuration: AppConfig): (MapState, AnyAction) => Ma
         });
         return nextState;
       }
+      case TOGGLE_CUSTOMIZE_LAYERS: {
+        const nextState = createNextState(state, (draftState) => {
+          draftState.customizeLayersToggle = !draftState.customizeLayersToggle;
+      })
+      return nextState;
+      } 
       case PAGE_OR_LIMIT_UPDATE: {
         const id = action.payload.setID;
         return {

appv2/src/state/reducers/userSettings.ts

@@ -150,6 +150,12 @@ function createUserSettingsReducer(configuration: AppConfig): (UserSettingsState
           newRecordDialogueOpen: true
         }
       }
+      case CLOSE_NEW_RECORD_MENU: {
+        return { 
+          ...state, 
+          newRecordDialogueOpen: false
+        }
+      }
       case IAPP_GET_SUCCESS : {
         return { 
           ...state,

appv2/src/state/sagas/auth.ts

@@ -1,4 +1,4 @@
-import { all, call, delay, put, select, takeLatest } from 'redux-saga/effects';
+import { all, call, delay, put, select, take, takeLatest } from 'redux-saga/effects';
 
 import Keycloak, {
   KeycloakAdapter,
@@ -25,6 +25,7 @@ import {
   AUTH_SIGNOUT_REQUEST,
   AUTH_UPDATE_TOKEN_STATE,
   TABS_GET_INITIAL_STATE_REQUEST,
+  URL_CHANGE,
   USERINFO_CLEAR_REQUEST,
   USERINFO_LOAD_COMPLETE
 } from '../actions';