fix(keymap): Change keymap name and abbr algorithm (#365)

* feat(keymap): Change keymap name and abbr algorithm

Close #363

* feat(keymap): When rename a keymap or macro and the new name is exists do nothing

Author: ert78gb

shared/src/components/keymap/header/keymap-header.component.html

@@ -5,14 +5,12 @@ <h1 class="col-xs-12 pane-title">
             <input #name cancelable
                    class="keymap__name pane-title__name"
                    type="text"
-                   value="{{ keymap.name }}"
                    (change)="editKeymapName($event.target.value)"
                    (keyup.enter)="name.blur()"
             /> keymap
             (<input #abbr cancelable
                     class="keymap__abbrev pane-title__abbrev"
                     type="text"
-                    value="{{ keymap.abbreviation }}"
                     (change)="editKeymapAbbr($event.target.value)"
                     (keyup.enter)="abbr.blur()"
                     [attr.maxLength]="3"

shared/src/components/keymap/header/keymap-header.component.ts

@@ -2,11 +2,11 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
-    Input,
-    Output,
     EventEmitter,
+    Input,
     OnChanges,
-    Renderer,
+    Output,
+    Renderer2,
     SimpleChanges,
     ViewChild
 } from '@angular/core';
@@ -35,11 +35,13 @@ export class KeymapHeaderComponent implements OnChanges {
     starTitle: string;
     trashTitle: string = 'Delete keymap';
 
-    constructor(private store: Store<AppState>, private renderer: Renderer) { }
+    constructor(private store: Store<AppState>, private renderer: Renderer2) { }
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes['keymap']) {
             this.setKeymapTitle();
+            this.setName();
+            this.setAbbreviation();
         }
         if (changes['deletable']) {
             this.setTrashTitle();
@@ -64,7 +66,7 @@ export class KeymapHeaderComponent implements OnChanges {
 
     editKeymapName(name: string) {
         if (name.length === 0) {
-            this.renderer.setElementProperty(this.keymapName.nativeElement, 'value', this.keymap.name);
+            this.setName();
             return;
         }
 
@@ -75,12 +77,12 @@ export class KeymapHeaderComponent implements OnChanges {
         const regexp = new RegExp(/^[a-zA-Z\d]+$/g);
 
         if (newAbbr.length < 1 || newAbbr.length > 3 || !regexp.test(newAbbr)) {
-            this.renderer.setElementProperty(this.keymapAbbr.nativeElement, 'value', this.keymap.abbreviation);
+            this.setAbbreviation();
             return;
         }
 
         newAbbr = newAbbr.toUpperCase();
-        this.store.dispatch(KeymapActions.editKeymapAbbr(this.keymap.abbreviation, newAbbr));
+        this.store.dispatch(KeymapActions.editKeymapAbbr(this.keymap.name, this.keymap.abbreviation, newAbbr));
     }
 
     setKeymapTitle(): void {
@@ -96,4 +98,12 @@ export class KeymapHeaderComponent implements OnChanges {
     onDownloadIconClick(): void {
         this.downloadClick.emit();
     }
+
+    private setName(): void {
+        this.renderer.setProperty(this.keymapName.nativeElement, 'value', this.keymap.name);
+    }
+
+    private setAbbreviation() {
+        this.renderer.setProperty(this.keymapAbbr.nativeElement, 'value', this.keymap.abbreviation);
+    }
 }

shared/src/components/macro/header/macro-header.component.html

@@ -5,7 +5,6 @@ <h1 class="col-xs-12 pane-title">
             <input #macroName cancelable
                    class="pane-title__name"
                    type="text"
-                   value="{{ macro.name }}"
                    (change)="editMacroName($event.target.value)"
                    (keyup.enter)="macroName.blur()"
             />

shared/src/components/macro/header/macro-header.component.ts

@@ -1,5 +1,12 @@
 import {
-    AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, Renderer,
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    Input,
+    OnChanges,
+    Renderer2,
+    SimpleChanges,
     ViewChild
 } from '@angular/core';
 
@@ -21,17 +28,20 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
     @Input() isNew: boolean;
     @ViewChild('macroName') macroName: ElementRef;
 
-    constructor(private store: Store<AppState>, private renderer: Renderer) { }
+    constructor(private store: Store<AppState>, private renderer: Renderer2) { }
 
-    ngOnChanges() {
+    ngOnChanges(changes: SimpleChanges) {
         if (this.isNew) {
-            this.renderer.invokeElementMethod(this.macroName.nativeElement, 'select', []);
+            this.setFocusOnName();
+        }
+        if (changes['macro']) {
+            this.setName();
         }
     }
 
     ngAfterViewInit() {
         if (this.isNew) {
-            this.renderer.invokeElementMethod(this.macroName.nativeElement, 'select', []);
+            this.setFocusOnName();
         }
     }
 
@@ -45,11 +55,19 @@ export class MacroHeaderComponent implements AfterViewInit, OnChanges {
 
     editMacroName(name: string) {
         if (name.length === 0) {
-            this.renderer.setElementProperty(this.macroName.nativeElement, 'value', this.macro.name);
+            this.setName();
             return;
         }
 
         this.store.dispatch(MacroActions.editMacroName(this.macro.id, name));
     }
 
+    private setFocusOnName() {
+        this.macroName.nativeElement.select();
+    }
+
+    private setName(): void {
+        this.renderer.setProperty(this.macroName.nativeElement, 'value', this.macro.name);
+    }
+
 }

shared/src/store/actions/keymap.ts

@@ -69,12 +69,13 @@ export namespace KeymapActions {
         };
     }
 
-    export function editKeymapAbbr(abbr: string, newAbbr: string): Action {
+    export function editKeymapAbbr(name: string, abbr: string, newAbbr: string): Action {
         return {
             type: KeymapActions.EDIT_ABBR,
             payload: {
-                abbr: abbr,
-                newAbbr: newAbbr
+                name,
+                abbr,
+                newAbbr
             }
         };
     }

shared/src/store/effects/keymap.ts

@@ -54,9 +54,14 @@ export class KeymapEffects {
 
     @Effect({ dispatch: false }) editAbbr$: any = this.actions$
         .ofType(KeymapActions.EDIT_ABBR)
-        .map(action => action.payload.newAbbr)
-        .do(newAbbr => {
-            this.router.navigate(['/keymap', newAbbr]);
+        .withLatestFrom(this.store)
+        .do(([action, store]) => {
+            for (const keymap of store.userConfiguration.keymaps) {
+                if (keymap.name === action.payload.name && keymap.abbreviation === action.payload.newAbbr) {
+                    this.router.navigate(['/keymap', action.payload.newAbbr]);
+                    return;
+                }
+            }
         });
 
     constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) { }

shared/src/store/effects/macro.ts

@@ -14,11 +14,11 @@ import { AppState } from '../index';
 @Injectable()
 export class MacroEffects {
 
-    @Effect({dispatch: false}) remove$: any = this.actions$
+    @Effect({ dispatch: false }) remove$: any = this.actions$
         .ofType(MacroActions.REMOVE)
         .map(action => this.store.dispatch(KeymapActions.checkMacro(action.payload)))
         .withLatestFrom(this.store)
-        .map(latest => latest[1].userConfiguration.macros)
+        .map(([action, state]) => state.userConfiguration.macros)
         .do(macros => {
             if (macros.length === 0) {
                 this.router.navigate(['/macro']);
@@ -27,14 +27,23 @@ export class MacroEffects {
             }
         });
 
-    @Effect({dispatch: false}) add$: any = this.actions$
+    @Effect({ dispatch: false }) add$: any = this.actions$
         .ofType(MacroActions.ADD)
         .withLatestFrom(this.store)
-        .map(latest => latest[1].userConfiguration.macros)
+        .map(([action, state]) => state.userConfiguration.macros)
         .map(macros => macros[macros.length - 1])
         .do(lastMacro => {
             this.router.navigate(['/macro', lastMacro.id, 'new']);
         });
 
+    @Effect({ dispatch: false }) duplicate: any = this.actions$
+        .ofType(MacroActions.DUPLICATE)
+        .withLatestFrom(this.store)
+        .map(([action, state]) => state.userConfiguration.macros)
+        .map(macros => macros[macros.length - 1])
+        .do(lastMacro => {
+            this.router.navigate(['/macro', lastMacro.id]);
+        });
+
     constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) {}
 }