Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PSP-7885 Improve interaction - with advanced search by retaining results #4355

Merged
merged 10 commits into from
Sep 23, 2024
Merged

PSP-7885 Improve interaction - with advanced search by retaining results #4355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
abfb4a6
Map state machine changes
asanchezr Sep 19, 2024
26d6fe8
Add reset filter button and logic
asanchezr Sep 20, 2024
ddc304b
Style fixes
asanchezr Sep 20, 2024
306e163
Configure vitest to use CSS modules
asanchezr Sep 20, 2024
629f971
Test updates
asanchezr Sep 20, 2024
297b469
Snapshot updates - no need to review
asanchezr Sep 20, 2024
289eb5b
PR feedback
asanchezr Sep 23, 2024
13accfa
Update snapshots
asanchezr Sep 23, 2024
759d303
Merge branch 'dev' into psp-7885-adv-filter
asanchezr Sep 23, 2024
c01f3a6
Merge branch 'dev' into psp-7885-adv-filter
asanchezr Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 75 additions & 2 deletions ...tend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,37 @@ exports[`ContactInputView component > renders as expected 1`] = `
.c1.btn:focus {
outline-width: 0.4rem;
outline-style: solid;
outline-color: var(--surface-color-primary-button-hover);
outline-offset: 1px;
box-shadow: none;
}

.c1.btn.btn-primary {
color: #FFFFFF;
background-color: #013366;
}

.c1.btn.btn-primary:hover,
.c1.btn.btn-primary:active,
.c1.btn.btn-primary:focus {
background-color: #1E5189;
}

.c1.btn.btn-secondary {
color: #013366;
background: none;
border-color: #013366;
}

.c1.btn.btn-secondary:hover,
.c1.btn.btn-secondary:active,
.c1.btn.btn-secondary:focus {
color: #FFFFFF;
background-color: #013366;
}

.c1.btn.btn-info {
color: #9F9D9C;
border: none;
background: none;
padding-left: 0.6rem;
Expand All @@ -68,20 +90,66 @@ exports[`ContactInputView component > renders as expected 1`] = `
.c1.btn.btn-info:hover,
.c1.btn.btn-info:active,
.c1.btn.btn-info:focus {
color: var(--surface-color-primary-button-hover);
background: none;
}

.c1.btn.btn-light {
color: #FFFFFF;
background-color: #606060;
border: none;
}

.c1.btn.btn-light:hover,
.c1.btn.btn-light:active,
.c1.btn.btn-light:focus {
color: #FFFFFF;
background-color: #606060;
}

.c1.btn.btn-dark {
color: #FFFFFF;
background-color: #474543;
border: none;
}

.c1.btn.btn-dark:hover,
.c1.btn.btn-dark:active,
.c1.btn.btn-dark:focus {
color: #FFFFFF;
background-color: #474543;
}

.c1.btn.btn-danger {
color: #FFFFFF;
background-color: #CE3E39;
}

.c1.btn.btn-danger:hover,
.c1.btn.btn-danger:active,
.c1.btn.btn-danger:focus {
color: #FFFFFF;
background-color: #CE3E39;
}

.c1.btn.btn-warning {
color: #FFFFFF;
background-color: #FCBA19;
border-color: #FCBA19;
}

.c1.btn.btn-warning:hover,
.c1.btn.btn-warning:active,
.c1.btn.btn-warning:focus {
color: #FFFFFF;
border-color: #FCBA19;
background-color: #FCBA19;
}

.c1.btn.btn-link {
font-size: 1.6rem;
font-weight: 400;
color: var(--surface-color-primary-button-default);
background: none;
border: none;
-webkit-text-decoration: none;
Expand All @@ -103,6 +171,7 @@ exports[`ContactInputView component > renders as expected 1`] = `
.c1.btn.btn-link:hover,
.c1.btn.btn-link:active,
.c1.btn.btn-link:focus {
color: var(--surface-color-primary-button-hover);
-webkit-text-decoration: underline;
text-decoration: underline;
border: none;
Expand All @@ -113,6 +182,7 @@ exports[`ContactInputView component > renders as expected 1`] = `

.c1.btn.btn-link:disabled,
.c1.btn.btn-link.disabled {
color: #9F9D9C;
background: none;
pointer-events: none;
}
Expand Down Expand Up @@ -149,12 +219,13 @@ exports[`ContactInputView component > renders as expected 1`] = `
padding-left: 1.2rem;
padding-right: 2.8rem;
background-image: none;
border: solid 0.1rem;
color: #474543;
border: #606060 solid 0.1rem;
cursor: default;
}

.c0.is-invalid {
border: solid 0.1rem;
border: #CE3E39 solid 0.1rem;
}

.c2.c2.btn {
Expand All @@ -165,6 +236,7 @@ exports[`ContactInputView component > renders as expected 1`] = `
padding-right: 1.2rem;
height: 1.6rem;
right: 0rem;
color: #9F9D9C;
-webkit-text-decoration: none;
text-decoration: none;
line-height: unset;
Expand All @@ -177,6 +249,7 @@ exports[`ContactInputView component > renders as expected 1`] = `
.c2.c2.btn:hover,
.c2.c2.btn:active,
.c2.c2.btn:focus {
color: #CE3E39;
-webkit-text-decoration: none;
text-decoration: none;
opacity: unset;
Expand Down
94 changes: 94 additions & 0 deletions source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,37 @@ exports[`NotesModal component > renders as expected 1`] = `
.c0.btn:focus {
outline-width: 0.4rem;
outline-style: solid;
outline-color: var(--surface-color-primary-button-hover);
outline-offset: 1px;
box-shadow: none;
}

.c0.btn.btn-primary {
color: #FFFFFF;
background-color: #013366;
}

.c0.btn.btn-primary:hover,
.c0.btn.btn-primary:active,
.c0.btn.btn-primary:focus {
background-color: #1E5189;
}

.c0.btn.btn-secondary {
color: #013366;
background: none;
border-color: #013366;
}

.c0.btn.btn-secondary:hover,
.c0.btn.btn-secondary:active,
.c0.btn.btn-secondary:focus {
color: #FFFFFF;
background-color: #013366;
}

.c0.btn.btn-info {
color: #9F9D9C;
border: none;
background: none;
padding-left: 0.6rem;
Expand All @@ -68,20 +90,66 @@ exports[`NotesModal component > renders as expected 1`] = `
.c0.btn.btn-info:hover,
.c0.btn.btn-info:active,
.c0.btn.btn-info:focus {
color: var(--surface-color-primary-button-hover);
background: none;
}

.c0.btn.btn-light {
color: #FFFFFF;
background-color: #606060;
border: none;
}

.c0.btn.btn-light:hover,
.c0.btn.btn-light:active,
.c0.btn.btn-light:focus {
color: #FFFFFF;
background-color: #606060;
}

.c0.btn.btn-dark {
color: #FFFFFF;
background-color: #474543;
border: none;
}

.c0.btn.btn-dark:hover,
.c0.btn.btn-dark:active,
.c0.btn.btn-dark:focus {
color: #FFFFFF;
background-color: #474543;
}

.c0.btn.btn-danger {
color: #FFFFFF;
background-color: #CE3E39;
}

.c0.btn.btn-danger:hover,
.c0.btn.btn-danger:active,
.c0.btn.btn-danger:focus {
color: #FFFFFF;
background-color: #CE3E39;
}

.c0.btn.btn-warning {
color: #FFFFFF;
background-color: #FCBA19;
border-color: #FCBA19;
}

.c0.btn.btn-warning:hover,
.c0.btn.btn-warning:active,
.c0.btn.btn-warning:focus {
color: #FFFFFF;
border-color: #FCBA19;
background-color: #FCBA19;
}

.c0.btn.btn-link {
font-size: 1.6rem;
font-weight: 400;
color: var(--surface-color-primary-button-default);
background: none;
border: none;
-webkit-text-decoration: none;
Expand All @@ -103,6 +171,7 @@ exports[`NotesModal component > renders as expected 1`] = `
.c0.btn.btn-link:hover,
.c0.btn.btn-link:active,
.c0.btn.btn-link:focus {
color: var(--surface-color-primary-button-hover);
-webkit-text-decoration: underline;
text-decoration: underline;
border: none;
Expand All @@ -113,6 +182,7 @@ exports[`NotesModal component > renders as expected 1`] = `

.c0.btn.btn-link:disabled,
.c0.btn.btn-link.disabled {
color: #9F9D9C;
background: none;
pointer-events: none;
}
Expand Down Expand Up @@ -164,6 +234,30 @@ exports[`NotesModal component > renders as expected 1`] = `
transition: all 0.3s ease-in;
}

.c1.c1.btn.btn-primary svg {
color: #013366;
}

.c1.c1.btn.btn-primary svg:hover {
color: #013366;
}

.c1.c1.btn.btn-light svg {
color: var(--surface-color-primary-button-default);
}

.c1.c1.btn.btn-light svg:hover {
color: #CE3E39;
}

.c1.c1.btn.btn-info svg {
color: var(--surface-color-primary-button-default);
}

.c1.c1.btn.btn-info svg:hover {
color: var(--surface-color-primary-button-hover);
}

<button
class="c0 Button c1 btn btn-primary"
title="notes"
Expand Down
22 changes: 15 additions & 7 deletions source/frontend/src/components/common/mapFSM/MapStateMachineContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export interface IMapStateMachineContext {
isRepositioning: boolean;
selectingComponentId: string | null;
isFiltering: boolean;
isShowingMapFilter: boolean;
isShowingMapLayers: boolean;
activePimsPropertyIds: number[];
showDisposed: boolean;
Expand Down Expand Up @@ -69,7 +70,7 @@ export interface IMapStateMachineContext {
selectingComponentId?: string,
) => void;
finishReposition: () => void;
toggleMapFilter: () => void;
toggleMapFilterDisplay: () => void;
toggleMapLayerControl: () => void;
setFilePropertyLocations: (locations: LatLngLiteral[]) => void;
setMapLayers: (layers: ILayerItem[]) => void;
Expand All @@ -79,6 +80,7 @@ export interface IMapStateMachineContext {
setShowDisposed: (show: boolean) => void;
setShowRetired: (show: boolean) => void;
setFullWidthSideBar: (fullWidth: boolean) => void;
resetMapFilter: () => void;
}

const MapStateMachineContext = React.createContext<IMapStateMachineContext>(
Expand Down Expand Up @@ -337,10 +339,14 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
serviceSend({ type: 'TOGGLE_SIDEBAR_SIZE' });
}, [serviceSend]);

const toggleMapFilter = useCallback(() => {
const toggleMapFilterDisplay = useCallback(() => {
serviceSend({ type: 'TOGGLE_FILTER' });
}, [serviceSend]);

const resetMapFilter = useCallback(() => {
serviceSend({ type: 'RESET_FILTER' });
}, [serviceSend]);

const toggleMapLayerControl = useCallback(() => {
serviceSend({ type: 'TOGGLE_LAYERS' });
}, [serviceSend]);
Expand All @@ -354,8 +360,8 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
return state.context.mapLocationFeatureDataset !== null && !isRepositioning;
}, [isRepositioning, state.context.mapLocationFeatureDataset]);

const isFiltering = useMemo(() => {
return state.matches({ mapVisible: { advancedFilterSideBar: 'filtering' } });
const isShowingMapFilter = useMemo(() => {
return state.matches({ mapVisible: { advancedFilterSideBar: 'mapFilterOpened' } });
}, [state]);

const isShowingMapLayers = useMemo(() => {
Expand All @@ -366,7 +372,7 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
<MapStateMachineContext.Provider
value={{
mapSideBarViewState: state.context.mapSideBarState,
isShowingSearchBar: !state.context.mapSideBarState.isOpen && !isFiltering,
isShowingSearchBar: !state.context.mapSideBarState.isOpen && !state.context.isFiltering,
pendingFlyTo: state.matches({ mapVisible: { mapRequest: 'pendingFlyTo' } }),
requestedFlyTo: state.context.requestedFlyTo,
mapFeatureSelected: state.context.mapFeatureSelected,
Expand All @@ -385,7 +391,8 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
isSelecting: state.matches({ mapVisible: { featureView: 'selecting' } }),
isRepositioning: isRepositioning,
selectingComponentId: state.context.selectingComponentId,
isFiltering: isFiltering,
isFiltering: state.context.isFiltering,
isShowingMapFilter: isShowingMapFilter,
isShowingMapLayers: isShowingMapLayers,
activeLayers: state.context.activeLayers,
activePimsPropertyIds: state.context.activePimsPropertyIds,
Expand All @@ -408,7 +415,7 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
finishSelection,
startReposition,
finishReposition,
toggleMapFilter,
toggleMapFilterDisplay,
toggleMapLayerControl,
toggleSidebarDisplay,
setFilePropertyLocations,
Expand All @@ -418,6 +425,7 @@ export const MapStateMachineProvider: React.FC<React.PropsWithChildren<unknown>>
setMapLayers,
setDefaultMapLayers,
setFullWidthSideBar,
resetMapFilter,
}}
>
{children}
Expand Down
Loading
Loading