fix: keymap navigation (#2258)

Author: ert78gb

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts

@@ -91,14 +91,15 @@ export class KeymapEditComponent implements OnDestroy {
                 this.store.dispatch(new SelectLayerAction(LayerName.base));
             }
 
-            if (params.module && params.key) {
-                this.store.dispatch(new OpenPopoverAction({
-                    moduleId: +params.module,
-                    keyId: +params.key,
-                    remapOnAllKeymap: params.remapOnAllKeymap === 'true',
-                    remapOnAllLayer: params.remapOnAllLayer === 'true'
-                }));
-            }
+            const moduleId = +params.module;
+            const keyId = +params.key;
+
+            this.store.dispatch(new OpenPopoverAction({
+                moduleId: Number.isNaN(moduleId) ? undefined : moduleId,
+                keyId: Number.isNaN(keyId) ? undefined : keyId,
+                remapOnAllKeymap: params.remapOnAllKeymap === 'true',
+                remapOnAllLayer: params.remapOnAllLayer === 'true'
+            }));
         });
 
         this.backlightingMode$ = store.select(backlightingMode);

packages/uhk-web/src/app/components/popover/popover.component.html

@@ -45,6 +45,7 @@
                    [selectedKey]="selectedKey"
                    [defaultKeyAction]="defaultKeyAction"
                    [macroPlaybackSupported]="macroPlaybackSupported$ | async"
+                   [remapInfo]="remapInfo"
                    (assignNewMacro)="onAssignNewMacro()"
                    (validAction)="setKeyActionValidState($event)"
         ></macro-tab>

packages/uhk-web/src/app/components/popover/tab/macro/macro-tab.component.ts

@@ -8,6 +8,7 @@ import { Tab } from '../tab';
 
 import { AppState, getMacros } from '../../../../store';
 import { SelectedKeyModel } from '../../../../models';
+import { RemapInfo } from '../../../../models/remap-info';
 import { SelectOptionData } from '../../../../models/select-option-data';
 
 @Component({
@@ -20,6 +21,7 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
     @Input() currentKeymap: Keymap;
     @Input() defaultKeyAction: KeyAction;
     @Input() macroPlaybackSupported: boolean;
+    @Input() remapInfo: RemapInfo;
     @Input() selectedKey: SelectedKeyModel;
 
     @Output() assignNewMacro = new EventEmitter<void>();
@@ -54,8 +56,14 @@ export class MacroTabComponent extends Tab implements OnInit, OnChanges, OnDestr
         this.validAction.emit(true);
 
         if (changes.currentKeymap || changes.selectedKey) {
+            let remapQueryParams = '';
+
+            if (this.remapInfo) {
+                remapQueryParams = `&remapOnAllKeymap=${this.remapInfo.remapOnAllKeymap}&remapOnAllLayer=${this.remapInfo.remapOnAllLayer}`;
+            }
+
             this.jumpToMacroQueryParams = {
-                backUrl: `/keymap/${this.currentKeymap.abbreviation}?layer=${this.selectedKey.layerId}&module=${this.selectedKey.moduleId}&key=${this.selectedKey.keyId}`,
+                backUrl: `/keymap/${this.currentKeymap.abbreviation}?layer=${this.selectedKey.layerId}&module=${this.selectedKey.moduleId}&key=${this.selectedKey.keyId}${remapQueryParams}`,
                 backText: `"${this.currentKeymap.name}" keymap`,
             };
         }

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -177,7 +177,7 @@
                 <ul [@toggler]="this.sideMenuState.keymap.animation">
                     <li *ngFor="let keymap of state.keymaps" class="sidebar__level-2--item">
                         <div class="sidebar__level-2" [routerLinkActive]="['active']">
-                            <a [routerLink]="['/keymap', keymap.abbreviation]" [queryParamsHandling]="state.keymapQueryParamsHandling"
+                            <a [routerLink]="['/keymap', keymap.abbreviation]" [queryParams]="state.keymapQueryParams"
                                [class.disabled]="state.updatingFirmware">{{keymap.name}}</a>
                             <fa-icon *ngIf="keymap.isDefault"
                                      [icon]="faStar"

packages/uhk-web/src/app/models/side-menu-page-state.ts

@@ -1,4 +1,4 @@
-import { QueryParamsHandling } from '@angular/router';
+import { Params } from '@angular/router';
 import { Keymap, UhkDeviceProduct } from 'uhk-common';
 
 import { MacroMenuItem } from './macro-menu-item';
@@ -10,7 +10,7 @@ export interface SideMenuPageState {
     updatingFirmware: boolean;
     deviceName: string;
     keymaps: Keymap[];
-    keymapQueryParamsHandling: QueryParamsHandling;
+    keymapQueryParams: Params;
     macros: MacroMenuItem[];
     maxMacroCountReached: boolean;
     restoreUserConfiguration: boolean;

packages/uhk-web/src/app/store/index.ts

@@ -474,7 +474,7 @@ export const getSideMenuPageState = createSelector(
     calculateDeviceUiState,
     getConnectedDevice,
     getIsAdvancedSettingsMenuVisible,
-    getRouterState,
+    getSelectedLayerOption,
     (
         runningInElectronValue: boolean,
         updatingFirmwareValue: boolean,
@@ -483,7 +483,7 @@ export const getSideMenuPageState = createSelector(
         uiState,
         connectedDevice,
         isAdvancedSettingsMenuVisible,
-        routerState
+        selectedLayerOption
     ): SideMenuPageState => {
         const macros = getMacroMenuItems(userConfiguration);
 
@@ -494,7 +494,9 @@ export const getSideMenuPageState = createSelector(
             updatingFirmware: updatingFirmwareValue,
             deviceName: userConfiguration.deviceName,
             keymaps: userConfiguration.keymaps,
-            keymapQueryParamsHandling: routerState?.state?.url?.startsWith('/keymap') ? 'merge' : '',
+            keymapQueryParams: {
+                layer: selectedLayerOption.id
+            },
             macros,
             maxMacroCountReached: macros.length >= Constants.MAX_ALLOWED_MACROS,
             restoreUserConfiguration,

packages/uhk-web/src/app/store/reducers/user-configuration.ts

@@ -891,12 +891,25 @@ export function reducer(
             return newState;
         }
 
-        case KeymapActions.ActionTypes.SelectLayer:
+        case KeymapActions.ActionTypes.SelectLayer: {
+            let selectedLayer = (action as KeymapActions.SelectLayerAction).payload;
+
+            if (selectedLayer === state.selectedLayerOption.id) {
+                return state;
+            }
+
+            const currentLayerOption = state.layerOptions.get(selectedLayer);
+
+            if (!currentLayerOption.selected) {
+                selectedLayer = LayerName.base;
+            }
+
             return {
                 ...state,
-                selectedLayerOption: state.layerOptions.get((action as KeymapActions.SelectLayerAction).payload),
+                selectedLayerOption: state.layerOptions.get(selectedLayer),
                 openedPopover: undefined,
             };
+        }
 
         case KeymapActions.ActionTypes.OpenPopover:
             return {