Fix 560 delete bind play macro action when macro delete (#576)

* fix(config): delete KeyAction binding of deleted macro

* refactor: use sorter import

* fix(macro): read the macro id from route params

* fix(keyAction): use NoneAction in keyAction mapping

packages/uhk-common/src/config-serializer/config-items/key-action/helper.ts

@@ -7,6 +7,7 @@ import { SwitchLayerAction } from './switch-layer-action';
 import { SwitchKeymapAction, UnresolvedSwitchKeymapAction } from './switch-keymap-action';
 import { MouseAction } from './mouse-action';
 import { PlayMacroAction } from './play-macro-action';
+import { NoneAction } from './none-action';
 
 export class Helper {
 
@@ -77,6 +78,8 @@ export class Helper {
                 return new MouseAction().fromJsonObject(keyAction);
             case keyActionType.PlayMacroAction:
                 return new PlayMacroAction().fromJsonObject(keyAction, macros);
+            case keyActionType.NoneAction:
+                return new NoneAction();
             default:
                 throw `Invalid KeyAction.keyActionType: "${keyAction.keyActionType}"`;
         }

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.html

@@ -13,5 +13,5 @@
 </ng-template>
 
 <div *ngIf="!macro" class="not-found">
-    There is no macro with id {{ route.params.select('id') | async }}.
+    There is no macro with id {{ macroId }}.
 </div>

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

@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/operator/pluck';
 
 import { MacroActions } from '../../../store/actions';
-import { AppState } from '../../../store/index';
+import { AppState } from '../../../store';
 import { getMacro } from '../../../store/reducers/user-configuration';
 
 @Component({
@@ -21,13 +21,17 @@ import { getMacro } from '../../../store/reducers/user-configuration';
 export class MacroEditComponent implements OnDestroy {
     macro: Macro;
     isNew: boolean;
+    macroId: number;
 
     private subscription: Subscription;
     constructor(private store: Store<AppState>, public route: ActivatedRoute) {
         this.subscription = route
             .params
             .pluck<{}, string>('id')
-            .switchMap((id: string) => store.let(getMacro(+id)))
+            .switchMap((id: string) => {
+                this.macroId = +id;
+                return store.let(getMacro(this.macroId));
+            })
             .subscribe((macro: Macro) => {
                 this.macro = macro;
             });

packages/uhk-web/src/app/components/uhk-header/uhk-header.ts

@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 
 import { Notification } from 'uhk-common';
-import { AppState, getUndoableNotification } from '../../store/index';
+import { AppState, getUndoableNotification } from '../../store';
 import { DismissUndoNotificationAction, UndoLastAction } from '../../store/actions/app';
 
 @Component({

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

@@ -4,7 +4,18 @@ import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';
 
-import { KeyAction, KeyActionHelper, Keymap, Layer, Macro, Module, SwitchLayerAction, UserConfiguration } from 'uhk-common';
+import {
+    KeyAction,
+    KeyActionHelper,
+    Keymap,
+    Layer,
+    Macro,
+    Module,
+    NoneAction,
+    PlayMacroAction,
+    SwitchLayerAction,
+    UserConfiguration
+} from 'uhk-common';
 import { KeymapActions, MacroActions } from '../actions';
 import { AppState } from '../index';
 import { ActionTypes } from '../actions/user-config';
@@ -210,9 +221,34 @@ export function reducer(state = initialState, action: Action & { payload?: any }
             changedUserConfiguration.macros = insertItemInNameOrder(state.macros, newMacro, macro => macro.id !== newMacro.id);
             break;
         }
+
         case MacroActions.REMOVE:
-            changedUserConfiguration.macros = state.macros.filter((macro: Macro) => macro.id !== action.payload);
+            const macroId = action.payload;
+            changedUserConfiguration.macros = state.macros.filter((macro: Macro) => macro.id !== macroId);
+
+            for (let k = 0; k < changedUserConfiguration.keymaps.length; k++) {
+                const keymap = changedUserConfiguration.keymaps[k];
+                let hasChanges = false;
+
+                for (const layer of  keymap.layers) {
+                    for (const module of layer.modules) {
+                        for (let ka = 0; ka < module.keyActions.length; ka++) {
+                            const keyAction = module.keyActions[ka];
+
+                            if (keyAction instanceof PlayMacroAction && keyAction.macroId === macroId) {
+                                hasChanges = true;
+                                module.keyActions[ka] = new NoneAction();
+                            }
+                        }
+                    }
+                }
+
+                if (hasChanges) {
+                    changedUserConfiguration.keymaps[k] = new Keymap(keymap);
+                }
+            }
             break;
+
         case MacroActions.ADD_ACTION:
             changedUserConfiguration.macros = state.macros.map((macro: Macro) => {
                 if (macro.id === action.payload.id) {