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

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

@@ -5,14 +5,12 @@
             <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 @@
             <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);
+    }
+
 }