diff --git a/packages/uhk-web/src/app/components/back-to/back-to.component.ts b/packages/uhk-web/src/app/components/back-to/back-to.component.ts index 13144937d8d..887bb71e231 100644 --- a/packages/uhk-web/src/app/components/back-to/back-to.component.ts +++ b/packages/uhk-web/src/app/components/back-to/back-to.component.ts @@ -6,7 +6,7 @@ import { Subscription } from 'rxjs'; selector: 'back-to', standalone: false, template: ` -
+
Back to {{ backText }}{{ backSuffix }}
`, diff --git a/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts b/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts index 9f45fa9b0c9..04f0ad6d997 100644 --- a/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts +++ b/packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts @@ -168,9 +168,10 @@ export class MacroEditComponent implements OnDestroy { this.router.navigate([], { queryParams: { - actionIndex: model?.id, - inlineEdit: model?.inlineEdit - } + actionIndex: model?.id ?? null, + inlineEdit: model?.inlineEdit ?? null + }, + queryParamsHandling: 'merge', }); } @@ -190,7 +191,11 @@ export class MacroEditComponent implements OnDestroy { private hideActiveEditor(): void { if (!this.selectedMacroActionIdModel?.inlineEdit) { this.router.navigate([], { - queryParams: {}, + queryParams: { + actionIndex: null, + inlineEdit: null, + }, + queryParamsHandling: 'merge', }); } } diff --git a/packages/uhk-web/src/app/components/macro/header/macro-header.component.html b/packages/uhk-web/src/app/components/macro/header/macro-header.component.html index 80d4c61fc39..dfcf2f4043d 100644 --- a/packages/uhk-web/src/app/components/macro/header/macro-header.component.html +++ b/packages/uhk-web/src/app/components/macro/header/macro-header.component.html @@ -25,7 +25,8 @@ -
+ +
Used on: >(Store); @@ -55,21 +58,47 @@ export class MacroEffects { assignNewMacro$ = createEffect(() => this.actions$ .pipe( ofType(Keymaps.ActionTypes.SaveKey), - withLatestFrom(this.store.select(getSelectedMacro)), - tap(([action, newMacro]) => { + withLatestFrom( + this.store.select(getSelectedMacro), + this.store.select(getDefaultUserConfiguration), + ), + tap(([action, newMacro, defaultUserConfiguration]) => { if (action.payload.keyAction.assignNewMacro || action.payload.keyAction.navigateToMacro) { - this.navigateToNewMacro(newMacro); + const { keymap, layer, module, key } = action.payload; + const isAddKeymap = this.router.url.startsWith('/add-keymap'); + const keymapName = isAddKeymap ? `new ${keymap.name}` : keymap.name; + const backUrl = isAddKeymap + ? `/add-keymap/${encodeURIComponent(keymap.abbreviation)}` + : `/keymap/${encodeURIComponent(keymap.abbreviation)}?layer=${layer}&module=${module}&key=${key}`; + + this.navigateToNewMacro(newMacro, { + backUrl, + backText: formatMacroKeyAssignmentLabel({ + keymapName, + layerId: layer, + moduleId: module, + keyId: key, + defaultUserConfiguration, + mapper: this.mapper, + }), + backSuffix: ' key', + }); } }), ), { dispatch: false } ); - private navigateToNewMacro(newMacro: Macro): Promise { - if (newMacro) { - return this.router.navigate(['/macro', newMacro.id]); + private navigateToNewMacro( + newMacro: Macro, + back?: { backUrl: string; backText: string; backSuffix?: string }, + ): Promise { + const commands = newMacro ? ['/macro', newMacro.id] : ['/macro']; + + if (back) { + return this.router.navigate(commands, { queryParams: back }); } - return this.router.navigate(['/macro']); + return this.router.navigate(commands); } } diff --git a/packages/uhk-web/src/app/store/effects/user-config.ts b/packages/uhk-web/src/app/store/effects/user-config.ts index b913bcc8659..4d8def2666d 100644 --- a/packages/uhk-web/src/app/store/effects/user-config.ts +++ b/packages/uhk-web/src/app/store/effects/user-config.ts @@ -428,6 +428,15 @@ export class UserConfigEffects { resetKeymapQueryParams$ = createEffect(() => this.actions$ .pipe( ofType(Keymaps.ActionTypes.SaveKey, Keymaps.ActionTypes.ClosePopover), + filter(action => { + if (action.type !== Keymaps.ActionTypes.SaveKey) { + return true; + } + + const keyAction = (action as Keymaps.SaveKeyAction).payload.keyAction; + + return !keyAction.navigateToMacro && !keyAction.assignNewMacro; + }), tap(() => { this.router.navigate([], { queryParams: { diff --git a/packages/uhk-web/src/app/util/build-macro-key-assignment-view-models.ts b/packages/uhk-web/src/app/util/build-macro-key-assignment-view-models.ts index c2104b2e9c2..fc7313ea724 100644 --- a/packages/uhk-web/src/app/util/build-macro-key-assignment-view-models.ts +++ b/packages/uhk-web/src/app/util/build-macro-key-assignment-view-models.ts @@ -1,12 +1,10 @@ -import { Keymap, LayerName, UserConfiguration } from 'uhk-common'; +import { Keymap, UserConfiguration } from 'uhk-common'; import { MacroKeyAssignmentViewModel } from '../models'; import { MapperService } from '../services/mapper.service'; import { LAYER_OPTIONS } from '../store/reducers/layer-options'; import { findMacroKeyAssignments, MacroKeyAssignment } from './find-macro-key-assignments'; -import { getDefaultQwertyKeyLabel } from './get-default-key-label'; - -const MACRO_KEY_ASSIGNMENT_SEPARATOR = ' ⭢ '; +import { formatMacroKeyAssignmentLabel } from './format-macro-key-assignment-label'; export interface BuildMacroKeyAssignmentViewModelsOptions { keymaps: Keymap[]; @@ -20,23 +18,20 @@ export function buildMacroKeyAssignmentViewModels( ): MacroKeyAssignmentViewModel[] { return findMacroKeyAssignments(options.keymaps, options.macroId) .sort(compareAssignments) - .map(assignment => { - const layerOption = LAYER_OPTIONS.get(assignment.layerId); - const keyLabel = getDefaultQwertyKeyLabel({ - defaultUserConfiguration: options.defaultUserConfiguration, - moduleId: assignment.moduleId, - keyId: assignment.keyId, - mapper: options.mapper, - }); - - return { - keymapAbbreviation: assignment.keymapAbbreviation, + .map(assignment => ({ + keymapAbbreviation: assignment.keymapAbbreviation, + layerId: assignment.layerId, + moduleId: assignment.moduleId, + keyId: assignment.keyId, + label: formatMacroKeyAssignmentLabel({ + keymapName: assignment.keymapName, layerId: assignment.layerId, moduleId: assignment.moduleId, keyId: assignment.keyId, - label: `${assignment.keymapName}${MACRO_KEY_ASSIGNMENT_SEPARATOR}${layerOption.name}${MACRO_KEY_ASSIGNMENT_SEPARATOR}${keyLabel}`, - }; - }); + defaultUserConfiguration: options.defaultUserConfiguration, + mapper: options.mapper, + }), + })); } function compareAssignments(first: MacroKeyAssignment, second: MacroKeyAssignment): number { diff --git a/packages/uhk-web/src/app/util/format-macro-key-assignment-label.ts b/packages/uhk-web/src/app/util/format-macro-key-assignment-label.ts new file mode 100644 index 00000000000..674c1dfcbca --- /dev/null +++ b/packages/uhk-web/src/app/util/format-macro-key-assignment-label.ts @@ -0,0 +1,28 @@ +import { UserConfiguration } from 'uhk-common'; + +import { MapperService } from '../services/mapper.service'; +import { LAYER_OPTIONS } from '../store/reducers/layer-options'; +import { getDefaultQwertyKeyLabel } from './get-default-key-label'; + +export const MACRO_KEY_ASSIGNMENT_SEPARATOR = ' ⭢ '; + +export interface FormatMacroKeyAssignmentLabelOptions { + keymapName: string; + layerId: number; + moduleId: number; + keyId: number; + defaultUserConfiguration: UserConfiguration; + mapper: MapperService; +} + +export function formatMacroKeyAssignmentLabel(options: FormatMacroKeyAssignmentLabelOptions): string { + const layerOption = LAYER_OPTIONS.get(options.layerId); + const keyLabel = getDefaultQwertyKeyLabel({ + defaultUserConfiguration: options.defaultUserConfiguration, + moduleId: options.moduleId, + keyId: options.keyId, + mapper: options.mapper, + }); + + return `${options.keymapName}${MACRO_KEY_ASSIGNMENT_SEPARATOR}${layerOption.name}${MACRO_KEY_ASSIGNMENT_SEPARATOR}${keyLabel}`; +}