psp-7862 collapse/expand map sidebar.

bcgov · Jun 14, 2024 · f54d082 · f54d082
1 parent 3353581
commit f54d082
Show file tree

Hide file tree

Showing 141 changed files with 12,434 additions and 10,760 deletions.
diff --git a/source/frontend/src/assets/images/fence.svg b/source/frontend/src/assets/images/fence.svg
diff --git a/source/frontend/src/assets/images/subdivisionconsolidation.svg b/source/frontend/src/assets/images/subdivisionconsolidation.svg
diff --git a/source/frontend/src/components/common/buttons/Button.tsx b/source/frontend/src/components/common/buttons/Button.tsx
@@ -66,7 +66,7 @@ const StyledButton = styled(BootstrapButton)`
     align-items: center;
     justify-content: center;
     padding: 0.4rem 1.2rem;
-    min-height: 3rem;
+    min-height: 2.4rem;
     border: 0.2rem solid transparent;
     border-radius: 0.4rem;
     text-align: center;

diff --git a/source/frontend/src/components/common/buttons/ExpandCollapseButton.tsx b/source/frontend/src/components/common/buttons/ExpandCollapseButton.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import {
+  MdOutlineKeyboardDoubleArrowLeft,
+  MdOutlineKeyboardDoubleArrowRight,
+} from 'react-icons/md';
+import styled from 'styled-components';
+
+import { Button, ButtonProps } from '.';
+
+interface IExpandCollapseButtonProps extends ButtonProps {
+  expanded: boolean;
+  toggleExpanded: () => void;
+}
+
+/**
+ * PlusButton displaying a plus button, used to add new items.
+ * @param param0
+ */
+export const ExpandCollapseButton: React.FC<
+  React.PropsWithChildren<IExpandCollapseButtonProps>
+> = ({ expanded, toggleExpanded, className }) => {
+  return (
+    <StyledExpandButton
+      variant="light"
+      icon={expanded ? <MdOutlineKeyboardDoubleArrowLeft /> : <MdOutlineKeyboardDoubleArrowRight />}
+      title={expanded ? 'collapse' : 'expand'}
+      onClick={() => toggleExpanded()}
+      className={className}
+    ></StyledExpandButton>
+  );
+};
+
+const StyledExpandButton = styled(Button)`
+  &.btn.btn-light.Button {
+    padding: 0;
+    border: 0.1rem solid ${props => props.theme.bcTokens.typographyColorDisabled};
+    background-color: white;
+    color: ${props => props.theme.bcTokens.typographyColorSecondary};
+    &:focus,
+    &:active {
+      background-color: white;
+      color: ${props => props.theme.bcTokens.typographyColorSecondary};
+    }
+  }
+  &.btn,
+  .Button__icon,
+  svg {
+    max-width: 2.4rem;
+    min-width: 2.4rem;
+    max-height: 2.4rem;
+    min-height: 2.4rem;
+    font-size: 1.4rem;
+  }
+`;
diff --git a/...tend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap b/...tend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`ContactInputView component > renders as expected 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   padding: 0.4rem 1.2rem;
-  min-height: 3rem;
+  min-height: 2.4rem;
   border: 0.2rem solid transparent;
   border-radius: 0.4rem;
   text-align: center;

diff --git a/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap b/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`NotesModal component > renders as expected 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   padding: 0.4rem 1.2rem;
-  min-height: 3rem;
+  min-height: 2.4rem;
   border: 0.2rem solid transparent;
   border-radius: 0.4rem;
   text-align: center;

diff --git a/source/frontend/src/components/common/mapFSM/MapStateMachineContext.tsx b/source/frontend/src/components/common/mapFSM/MapStateMachineContext.tsx
@@ -5,6 +5,7 @@ import { useHistory } from 'react-router-dom';
 
 import { ILayerItem } from '@/components/maps/leaflet/Control/LayersControl/types';
 import { IGeoSearchParams } from '@/constants/API';
+import { IMapSideBarViewState } from '@/features/mapSideBar/MapSideBar';
 import {
   defaultPropertyFilter,
   IPropertyFilter,
@@ -18,7 +19,7 @@ import useLocationFeatureLoader, { LocationFeatureDataset } from './useLocationF
 import { useMapSearch } from './useMapSearch';
 
 export interface IMapStateMachineContext {
-  isSidebarOpen: boolean;
+  mapSideBarViewState: IMapSideBarViewState;
   isShowingSearchBar: boolean;
   pendingFlyTo: boolean;
   requestedFlyTo: RequestedFlyTo;
@@ -48,6 +49,7 @@ export interface IMapStateMachineContext {
   processFitBounds: () => void;
   openSidebar: (sidebarType: SideBarType) => void;
   closeSidebar: () => void;
+  toggleSidebarDisplay: () => void;
   closePopup: () => void;
 
   mapClick: (latlng: LatLngLiteral) => void;
@@ -67,7 +69,7 @@ export interface IMapStateMachineContext {
   setVisiblePimsProperties: (propertyIds: number[]) => void;
   setShowDisposed: (show: boolean) => void;
   setShowRetired: (show: boolean) => void;
-  changeSidebar: () => void;
+  setFullWidthSideBar: (fullWidth: boolean) => void;
 }
 
 const MapStateMachineContext = React.createContext<IMapStateMachineContext>(
@@ -253,10 +255,6 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
     serviceSend({ type: 'FINISH_SELECTION' });
   }, [serviceSend]);
 
-  const changeSidebar = useCallback(() => {
-    serviceSend({ type: 'CHANGE_SIDEBAR' });
-  }, [serviceSend]);
-
   const setFilePropertyLocations = useCallback(
     (locations: LatLngLiteral[]) => {
       serviceSend({ type: 'SET_FILE_PROPERTY_LOCATIONS', locations });
@@ -299,6 +297,17 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
     [serviceSend],
   );
 
+  const setFullWidthSideBar = useCallback(
+    (show: boolean) => {
+      serviceSend({ type: 'SET_FULL_WIDTH_SIDEBAR', show });
+    },
+    [serviceSend],
+  );
+
+  const toggleSidebarDisplay = useCallback(() => {
+    serviceSend({ type: 'TOGGLE_SIDEBAR_SIZE' });
+  }, [serviceSend]);
+
   const toggleMapFilter = useCallback(() => {
     serviceSend({ type: 'TOGGLE_FILTER' });
   }, [serviceSend]);
@@ -311,13 +320,6 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
     return state.context.mapLocationFeatureDataset !== null;
   }, [state.context.mapLocationFeatureDataset]);
 
-  const isSidebarOpen = useMemo(() => {
-    return [
-      { mapVisible: { sideBar: 'sidebarOpen' } },
-      { mapVisible: { sideBar: 'selecting' } },
-    ].some(state.matches);
-  }, [state.matches]);
-
   const isFiltering = useMemo(() => {
     return state.matches({ mapVisible: { featureView: 'filtering' } });
   }, [state]);
@@ -329,8 +331,8 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
   return (
     <MapStateMachineContext.Provider
       value={{
-        isSidebarOpen: isSidebarOpen,
-        isShowingSearchBar: !isSidebarOpen && !isFiltering,
+        mapSideBarViewState: state.context.mapSideBarState,
+        isShowingSearchBar: !state.context.mapSideBarState.isOpen && !isFiltering,
         pendingFlyTo: state.matches({ mapVisible: { mapRequest: 'pendingFlyTo' } }),
         requestedFlyTo: state.context.requestedFlyTo,
         mapFeatureSelected: state.context.mapFeatureSelected,
@@ -369,13 +371,14 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
         finishSelection,
         toggleMapFilter,
         toggleMapLayer,
+        toggleSidebarDisplay,
         setFilePropertyLocations,
         setVisiblePimsProperties,
         setShowDisposed,
         setShowRetired,
         setMapLayers,
         setDefaultMapLayers,
-        changeSidebar,
+        setFullWidthSideBar,
       }}
     >
       {children}

diff --git a/source/frontend/src/components/common/mapFSM/machineDefinition/mapMachine.ts b/source/frontend/src/components/common/mapFSM/machineDefinition/mapMachine.ts
@@ -250,7 +250,12 @@ const sideBarStates = {
   states: {
     fullScreen: {
       entry: assign({
-        sideBarType: () => SideBarType.NOT_DEFINED,
+        mapSideBarState: () => ({
+          type: SideBarType.NOT_DEFINED,
+          isOpen: false,
+          isCollapsed: false,
+          isFullWidth: false,
+        }),
         filePropertyLocations: () => [],
       }),
       on: {
@@ -265,38 +270,67 @@ const sideBarStates = {
     sidebarOpen: {
       entry: [
         assign({
-          sideBarType: (context: MachineContext, event: any) =>
-            event ? event.sidebarType : context.sideBarType,
+          mapSideBarState: (context: MachineContext, event: any) => ({
+            ...context.mapSideBarState,
+            type: event ? event.sidebarType : context.mapSideBarState.type,
+            isOpen: true,
+          }),
         }),
       ],
       on: {
         OPEN_SIDEBAR: {
           actions: [
             assign({
-              sideBarType: (context: MachineContext, event: any) =>
-                event ? event.sidebarType : context.sideBarType,
+              mapSideBarState: (context: MachineContext, event: any) => ({
+                ...context.mapSideBarState,
+                type: event ? event.sidebarType : context.mapSideBarState.type,
+                isOpen: true,
+              }),
             }),
           ],
           target: '#map.mapVisible.featureView.browsing',
         },
         CLOSE_SIDEBAR: {
-          actions: assign({ selectedFeatureDataset: () => null }),
+          actions: assign({
+            selectedFeatureDataset: () => null,
+            mapSideBarState: () => ({
+              type: SideBarType.NOT_DEFINED,
+              isOpen: false,
+              isCollapsed: false,
+              isFullWidth: false,
+            }),
+          }),
           target: 'fullScreen',
         },
-        CHANGE_SIDEBAR: {
+
+        SET_FILE_PROPERTY_LOCATIONS: {
           actions: [
             assign({
-              filePropertyLocations: () => [],
+              filePropertyLocations: (context: MachineContext, event: any) => event.locations || [],
             }),
+            raise('REQUEST_FIT_BOUNDS'),
           ],
         },
 
-        SET_FILE_PROPERTY_LOCATIONS: {
+        TOGGLE_SIDEBAR_SIZE: {
           actions: [
             assign({
-              filePropertyLocations: (context: MachineContext, event: any) => event.locations || [],
+              mapSideBarState: (context: MachineContext) => ({
+                ...context.mapSideBarState,
+                isCollapsed: !context.mapSideBarState.isCollapsed,
+              }),
+            }),
+          ],
+        },
+
+        SET_FULL_WIDTH_SIDEBAR: {
+          actions: [
+            assign({
+              mapSideBarState: (context: MachineContext, event: any) => ({
+                ...context.mapSideBarState,
+                isFullWidth: event.show,
+              }),
             }),
-            raise('REQUEST_FIT_BOUNDS'),
           ],
         },
       },
@@ -333,7 +367,12 @@ export const mapMachine = createMachine<MachineContext>({
 
   // Local context for entire machine
   context: {
-    sideBarType: SideBarType.NOT_DEFINED,
+    mapSideBarState: {
+      type: SideBarType.NOT_DEFINED,
+      isOpen: false,
+      isCollapsed: false,
+      isFullWidth: false,
+    },
     requestedFlyTo: {
       location: null,
       bounds: null,

diff --git a/source/frontend/src/components/common/mapFSM/machineDefinition/types.ts b/source/frontend/src/components/common/mapFSM/machineDefinition/types.ts
@@ -1,6 +1,7 @@
 import { LatLngBounds, LatLngLiteral } from 'leaflet';
 
 import { ILayerItem } from '@/components/maps/leaflet/Control/LayersControl/types';
+import { IMapSideBarViewState as IMapSideBarState } from '@/features/mapSideBar/MapSideBar';
 import { IPropertyFilter } from '@/features/properties/filter/IPropertyFilter';
 
 import { FeatureSelected, MapFeatureData, RequestedFlyTo } from '../models';
@@ -21,6 +22,7 @@ export enum SideBarType {
 
 // Local context for the machine - Not related to React Context!
 export type MachineContext = {
+  mapSideBarState: IMapSideBarState | null;
   mapFeatureSelected: FeatureSelected | null;
   mapLocationSelected: LatLngLiteral | null;
   mapLocationFeatureDataset: LocationFeatureDataset | null;
@@ -33,7 +35,6 @@ export type MachineContext = {
   searchCriteria: IPropertyFilter | null;
 
   isLoading: boolean;
-  sideBarType: SideBarType;
   requestedFitBounds: LatLngBounds;
   requestedFlyTo: RequestedFlyTo;
   filePropertyLocations: LatLngLiteral[];
@@ -42,26 +43,3 @@ export type MachineContext = {
   showDisposed: boolean;
   showRetired: boolean;
 };
-
-// Possible state machine states
-// TODO:Use types for the different states
-/*type Schema =
-  | { value: States.NOT_MAP; context: MachineContext }
-  | { value: States.BROWSING_MAP; context: MachineContext }
-  | { value: States.BROWSING_MAP_WITH_SIDEBAR; context: MachineContext }
-  | { value: States.BROWSING_FULL_SIDEBAR; context: MachineContext }
-  | { value: States.SELECTING_ON_MAP; context: MachineContext };
-
-  // Possible state machine transitions (i.e. events)
-type MachineEvents =
-| { type: 'LOGIN' }
-| { type: 'LOGIN_ERROR' }
-| { type: 'LOGIN_SUCCESS' }
-| { type: 'LOGOUT' }
-| { type: 'ENTER_MAP'; sideBarType2: SideBarType }
-| { type: 'OPEN_SIDEBAR' }
-| { type: 'CLOSE_SIDEBAR' }
-| { type: 'EXPAND_SIDEBAR' }
-| { type: 'SHRINK_SIDEBAR' }
-| { type: 'SELECT_ON_MAP' }
-| { type: 'SELECT_ON_MAP_SUCCESS' };*/
diff --git a/source/frontend/src/components/common/styles.ts b/source/frontend/src/components/common/styles.ts
@@ -150,7 +150,7 @@ export const CloseButton = styled(Button)`
     cursor: pointer;
     fill: ${props => props.theme.bcTokens.typographyColorSecondary};
     &:hover {
-      fill: ${props => props.theme.css.typographyColorSecondaryInvert};
+      fill: ${props => props.theme.bcTokens.typographyColorSecondaryInvert};
     }
   }
 `;
@@ -165,6 +165,13 @@ export const PopupTray = styled.div`
   position: relative;
 `;
 
+export const VerticalLine = styled.div`
+  border-left: 0.1rem solid ${props => props.theme.bcTokens.typographyColorSecondaryInvert};
+  width: 0.1rem;
+  height: 80%;
+  margin: auto;
+`;
+
 export const Backdrop = styled.div<LoadingBackdropProps>`
   width: 100%;
   height: 100%;

diff --git a/...tactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap b/...tactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   padding: 0.4rem 1.2rem;
-  min-height: 3rem;
+  min-height: 2.4rem;
   border: 0.2rem solid transparent;
   border-radius: 0.4rem;
   text-align: center;

diff --git a/...tactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap b/...tactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   padding: 0.4rem 1.2rem;
-  min-height: 3rem;
+  min-height: 2.4rem;
   border: 0.2rem solid transparent;
   border-radius: 0.4rem;
   text-align: center;