Add macro

src/app.module.ts

@@ -15,7 +15,6 @@ import { KeymapAddComponent, KeymapComponent, KeymapHeaderComponent } from './co
 import { LayersComponent } from './components/layers';
 import {
     MacroActionEditorComponent,
-    MacroAddComponent,
     MacroDelayTabComponent,
     MacroEditComponent,
     MacroHeaderComponent,
@@ -115,7 +114,6 @@ const storeConfig = {
         MacroEditComponent,
         MacroListComponent,
         MacroHeaderComponent,
-        MacroAddComponent,
         MacroItemComponent,
         MacroActionEditorComponent,
         MacroDelayTabComponent,

src/components/macro/action-editor/tab/text/macro-text.component.html

@@ -1,5 +1,5 @@
 <div>
     <h4>Type text</h4>
     <p>Input the text you want to type with this macro action.</p>
-    <textarea #macroTextInput name="macro-text" [(ngModel)]="macroAction.text" class="macro__text-input"></textarea>
+    <textarea #macroTextInput name="macro-text" (change)="onTextChange()" class="macro__text-input">{{ macroAction.text }}</textarea>
 </div>

src/components/macro/action-editor/tab/text/macro-text.component.ts

@@ -25,4 +25,8 @@ export class MacroTextTabComponent implements AfterViewInit {
         this.renderer.invokeElementMethod(this.input.nativeElement, 'focus');
     }
 
+    onTextChange() {
+        this.macroAction.text = this.input.nativeElement.value;
+    }
+
 }

src/components/macro/add/macro-add.component.html

@@ -1,7 +0,0 @@
-<div class="row">
-    <h1 class="col-xs-12 pane-title">
-        <i class="fa fa-play"></i>
-        <span class="macro__name pane-title__name">Add macro</span>
-    </h1>
-</div>
-To be done...

src/components/macro/add/macro-add.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'macro-add',
-    template: require('./macro-add.component.html'),
-    styles: [require('./macro-add.component.scss')]
-})
-export class MacroAddComponent {
-    constructor() { }
-}

src/components/macro/edit/macro-edit.component.html

@@ -1,5 +1,8 @@
 <template [ngIf]="macro">
-    <macro-header [macro]="macro"></macro-header>
+    <macro-header
+            [macro]="macro"
+            [isNew]="isNew"
+    ></macro-header>
     <macro-list
         [macro]="macro"
         (add)="addAction($event.macroId, $event.action)"

src/components/macro/edit/macro-edit.component.ts

@@ -20,6 +20,7 @@ import { getMacro } from '../../../store/reducers/macro';
 export class MacroEditComponent implements OnDestroy {
     private subscription: Subscription;
     private macro: Macro;
+    private isNew: boolean;
 
     constructor(private store: Store<AppState>, private route: ActivatedRoute) {
         this.subscription = route
@@ -29,6 +30,8 @@ export class MacroEditComponent implements OnDestroy {
             .subscribe((macro: Macro) => {
                 this.macro = macro;
             });
+
+        this.isNew = this.route.snapshot.params['empty'] === 'new';
     }
 
     ngOnDestroy() {

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

@@ -4,6 +4,7 @@
         <input class="pane-title__name"
                value="{{ macro.name }}"
                (change)="editMacroName($event.target.value)"
+               #macroName
         />
         <i class="glyphicon glyphicon-trash macro__remove pull-right" title=""
            data-toggle="tooltip"

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewChild } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -10,12 +10,21 @@ import { AppState } from '../../../store/index';
 @Component({
     selector: 'macro-header',
     template: require('./macro-header.component.html'),
-    styles: [require('./macro-header.component.scss')]
+    styles: [require('./macro-header.component.scss')],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MacroHeaderComponent {
     @Input() macro: Macro;
+    @Input() isNew: boolean;
+    @ViewChild('macroName') macroName: ElementRef;
 
-    constructor(private store: Store<AppState>) { }
+    constructor(private store: Store<AppState>, private renderer: Renderer) { }
+
+    ngOnChanges() {
+        if (this.isNew) {
+            this.renderer.invokeElementMethod(this.macroName.nativeElement, 'focus', []);
+        }
+    }
 
     removeMacro() {
         this.store.dispatch(MacroActions.removeMacro(this.macro.id));

src/components/macro/index.ts

@@ -1,4 +1,3 @@
-export * from './add/macro-add.component';
 export * from './edit/macro-edit.component';
 export * from './list/macro-list.component';
 export * from './header/macro-header.component';

src/components/macro/item/macro-item.component.ts

@@ -70,9 +70,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges(changes: SimpleChanges) {
-         /* tslint:disable:no-string-literal */
         if (changes['macroAction']) {
-        /* tslint:enable:no-string-literal */
             this.updateView();
         }
     }
@@ -88,6 +86,7 @@ export class MacroItemComponent implements OnInit, OnChanges {
         if (!this.editable || this.editing) {
             return;
         }
+
         this.editing = true;
         this.edit.emit();
     }

src/components/macro/list/macro-list.component.html

@@ -5,7 +5,7 @@
                         [macroAction]="macroAction"
                         [editable]="true"
                         [deletable]="true"
-                        [moveable]="true"
+                        [movable]="true"
                         (save)="saveAction($event, macroActionIndex)"
                         (edit)="editAction(macroActionIndex)"
                         (cancel)="cancelAction()"
@@ -13,15 +13,17 @@
                         [attr.data-index]="macroActionIndex"
             ></macro-item>
 
-            <macro-item *ngIf="showNew" [macroAction]="newMacro"
+            <macro-item *ngIf="showNew"
+                        [@togglerNew]="showNew ? 'active' : 'inactive'"
+                        [macroAction]="newMacro"
                         [editable]="true"
                         [deletable]="false"
-                        [moveable]="false"
+                        [movable]="false"
                         (save)="addNewAction($event)"
                         (cancel)="hideNewAction()"
             ></macro-item>
         </div>
-        <div class="list-group add-new__action-container" *ngIf="!showNew">
+        <div class="list-group add-new__action-container" [@toggler]="(!showNew) ? 'active' : 'inactive'">
             <div class="list-group-item action--item add-new__action-item no-reorder clearfix">
                 <a class="add-new__action-item--link" (click)="showNewAction()">
                     <i class="fa fa-plus"></i> Add new macro action

src/components/macro/list/macro-list.component.scss

@@ -8,12 +8,6 @@
     .list-container {
         display: flex;
         flex: 1;
-
-        > div {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-        }
     }
 }
 
@@ -103,6 +97,7 @@ h1 {
 .add-new__action-container {
     overflow: hidden;
     flex-shrink: 0;
+    border-top: 1px solid #ddd;
 }
 
 .add-new__action-item {

src/components/macro/list/macro-list.component.ts

@@ -1,4 +1,17 @@
-import { Component, EventEmitter, Input, Output, QueryList, ViewChild, forwardRef } from '@angular/core';
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    QueryList,
+    ViewChildren,
+    animate,
+    forwardRef,
+    state,
+    style,
+    transition,
+    trigger
+} from '@angular/core';
 
 import { DragulaService } from 'ng2-dragula/ng2-dragula';
 
@@ -7,6 +20,27 @@ import { MacroAction } from '../../../config-serializer/config-items/macro-actio
 import { MacroItemComponent } from './../index';
 
 @Component({
+    animations: [
+        trigger('toggler', [
+            state('inactive', style({
+                height: '0px'
+            })),
+            state('active', style({
+                height: '*'
+            })),
+            transition('inactive <=> active', animate('500ms ease-out'))
+        ]),
+        trigger('togglerNew', [
+            state('void', style({
+                height: '0px'
+            })),
+            state('active', style({
+                height: '*'
+            })),
+            transition(':enter', animate('500ms ease-out')),
+            transition(':leave', animate('500ms ease-out'))
+        ])
+    ],
     selector: 'macro-list',
     template: require('./macro-list.component.html'),
     styles: [require('./macro-list.component.scss')],
@@ -14,17 +48,17 @@ import { MacroItemComponent } from './../index';
 })
 export class MacroListComponent {
     @Input() macro: Macro;
-    @ViewChild(forwardRef(() => MacroItemComponent)) macroItems: QueryList<MacroItemComponent>;
+    @ViewChildren(forwardRef(() => MacroItemComponent)) macroItems: QueryList<MacroItemComponent>;
 
     @Output() add = new EventEmitter();
     @Output() edit = new EventEmitter();
     @Output() delete = new EventEmitter();
     @Output() reorder = new EventEmitter();
 
-    private showNew: boolean = false;
     private newMacro: Macro = undefined;
     private activeEdit: number = undefined;
     private dragIndex: number;
+    private showNew: boolean = false;
 
     constructor(private dragulaService: DragulaService) {
         /* tslint:disable:no-unused-variable: Used by Dragula. */

src/components/macro/macro.routes.ts

@@ -1,6 +1,5 @@
 import { Routes } from '@angular/router';
 
-import { MacroAddComponent } from './add/macro-add.component';
 import { MacroEditComponent } from './edit/macro-edit.component';
 
 export const macroRoutes: Routes = [
@@ -9,11 +8,11 @@ export const macroRoutes: Routes = [
         component: MacroEditComponent
     },
     {
-        path: 'macro/add',
-        component: MacroAddComponent
+        path: 'macro/:id',
+        component: MacroEditComponent
     },
     {
-        path: 'macro/:id',
+        path: 'macro/:id/:empty',
         component: MacroEditComponent
     }
 ];

src/components/side-menu/side-menu.component.html

@@ -19,7 +19,7 @@
     <li class="sidebar__level-1--item">
         <div class="sidebar__level-1">
             <i class="fa fa-play"></i> Macros
-            <a [routerLink]="['/macro/add']" class="btn btn-default pull-right btn-sm">
+            <a (click)="addMacro()" class="btn btn-default pull-right btn-sm">
                 <i class="fa fa-plus"></i>
             </a>
             <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'macro')"></i>

src/components/side-menu/side-menu.component.ts

@@ -1,12 +1,15 @@
 import { Component, Renderer, animate, state, style, transition, trigger } from '@angular/core';
 
+import { Store } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+
 import { Keymap } from '../../config-serializer/config-items/Keymap';
 import { Macro } from '../../config-serializer/config-items/Macro';
 
 import { AppState } from '../../store';
+import { MacroActions } from '../../store/actions';
 import { getKeymapEntities, getMacroEntities } from '../../store/reducers';
-import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
 
 @Component({
     animations: [
@@ -54,4 +57,8 @@ export class SideMenuComponent {
         this.renderer.setElementClass(event.target, 'fa-chevron-up', show);
         this.renderer.setElementClass(event.target, 'fa-chevron-down', !show);
     }
+
+    addMacro() {
+        this.store.dispatch(MacroActions.addMacro());
+    }
 }

src/store/actions/macro.ts

@@ -9,12 +9,19 @@ export namespace MacroActions {
     export const DUPLICATE = MacroActions.PREFIX + 'Duplicate macro';
     export const EDIT_NAME = MacroActions.PREFIX + 'Edit macro title';
     export const REMOVE = MacroActions.PREFIX + 'Remove macro';
+    export const ADD = MacroActions.PREFIX + 'Add macro';
 
     export const ADD_ACTION = MacroActions.PREFIX + 'Add macro action';
     export const SAVE_ACTION = MacroActions.PREFIX + 'Save macro action';
     export const DELETE_ACTION = MacroActions.PREFIX + 'Delete macro action';
     export const REORDER_ACTION = MacroActions.PREFIX + 'Reorder macro action';
 
+    export function addMacro(): Action {
+        return {
+            type: MacroActions.ADD
+        };
+    }
+
     export function removeMacro(id: number): Action {
         return {
             type: MacroActions.REMOVE,

src/store/effects/macro.ts

@@ -26,5 +26,15 @@ export class MacroEffects {
             }
         });
 
+    @Effect({dispatch: false}) add$: any = this.actions$
+        .ofType(MacroActions.ADD)
+        .withLatestFrom(this.store)
+        .do((latest) => {
+            let state: AppState = latest[1];
+            let id: number = state.macros.entities.length - 1;
+
+            this.router.navigate(['/macro', id, 'new']);
+        });
+
     constructor(private actions$: Actions, private router: Router, private store: Store<AppState>) {}
 }

src/store/reducers/macro.ts

@@ -18,6 +18,18 @@ export default function(state = initialState, action: Action): MacroState {
     let newState: Macro[];
 
     switch (action.type) {
+        case MacroActions.ADD:
+            newMacro = new Macro();
+            newMacro.id = generateId(state.entities);
+            newMacro.name = generateName(state.entities, 'New macro');
+            newMacro.isLooped = false;
+            newMacro.isPrivate = true;
+            newMacro.macroActions = [];
+
+            return {
+                entities: [...state.entities, newMacro]
+            };
+
         case MacroActions.DUPLICATE:
 
             newMacro = new Macro(action.payload);