Moved list of macros to the new component

src/app.module.ts

@@ -16,11 +16,12 @@ import { LayersComponent } from './components/layers';
 import {
     MacroActionEditorComponent,
     MacroAddComponent,
-    MacroComponent,
     MacroDelayTabComponent,
+    MacroEditComponent,
     MacroHeaderComponent,
     MacroItemComponent,
     MacroKeyTabComponent,
+    MacroListComponent,
     MacroMouseTabComponent,
     MacroTextTabComponent
 } from './components/macro';
@@ -111,7 +112,8 @@ const storeConfig = {
         NoneTabComponent,
         CaptureKeystrokeButtonComponent,
         IconComponent,
-        MacroComponent,
+        MacroEditComponent,
+        MacroListComponent,
         MacroHeaderComponent,
         MacroAddComponent,
         MacroItemComponent,

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

@@ -0,0 +1,14 @@
+<template [ngIf]="macro">
+    <macro-header [macro]="macro"></macro-header>
+    <macro-list
+        [macro]="macro"
+        (add)="addAction($event.macroId, $event.action)"
+        (edit)="editAction($event.macroId, $event.index, $event.action)"
+        (delete)="deleteAction($event.macroId, $event.index, $event.action)"
+        (reorder)="reorderAction($event.macroId, $event.oldIndex, $event.newIndex)"
+    ></macro-list>
+</template>
+
+<div *ngIf="!macro" class="not-found">
+    Sorry, there is no macro with this id.
+</div>

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

@@ -0,0 +1,5 @@
+.not-found {
+    margin-top: 30px;
+    font-size: 16px;
+    text-align: center;
+}

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

@@ -0,0 +1,53 @@
+import { Component, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Store } from '@ngrx/store';
+
+import { Subscription } from 'rxjs/Subscription';
+
+import { Macro } from '../../../config-serializer/config-items/Macro';
+import { MacroAction } from '../../../config-serializer/config-items/macro-action/MacroAction';
+
+import { MacroActions } from '../../../store/actions';
+import { AppState } from '../../../store/index';
+import { getMacro } from '../../../store/reducers/macro';
+
+@Component({
+    selector: 'macro-edit',
+    template: require('./macro-edit.component.html'),
+    styles: [require('./macro-edit.component.scss')]
+})
+export class MacroEditComponent implements OnDestroy {
+    private subscription: Subscription;
+    private macro: Macro;
+
+    constructor(private store: Store<AppState>, private route: ActivatedRoute) {
+        this.subscription = route
+            .params
+            .select<string>('id')
+            .switchMap((id: string) => store.let(getMacro(+id)))
+            .subscribe((macro: Macro) => {
+                this.macro = macro;
+            });
+    }
+
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+
+    addAction(macroId: number, action: MacroAction) {
+        this.store.dispatch(MacroActions.addMacroAction(macroId, action));
+    }
+
+    editAction(macroId: number, index: number, action: MacroAction) {
+        this.store.dispatch(MacroActions.saveMacroAction(macroId, index, action));
+    }
+
+    deleteAction(macroId: number, index: number, action: MacroAction) {
+        this.store.dispatch(MacroActions.deleteMacroAction(macroId, index, action));
+    }
+
+    reorderAction(macroId: number, oldIndex: number, newIndex: number) {
+        this.store.dispatch(MacroActions.reorderMacroAction(macroId, oldIndex, newIndex));
+    }
+}

src/components/macro/index.ts

@@ -1,5 +1,6 @@
-export * from './macro.component';
 export * from './add/macro-add.component';
+export * from './edit/macro-edit.component';
+export * from './list/macro-list.component';
 export * from './header/macro-header.component';
 export * from './macro.routes';
 export * from './item';

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

@@ -0,0 +1,35 @@
+<div class="row list-container">
+    <div class="col-xs-10 col-xs-offset-1 list-group">
+        <div class="macro-actions-container" [dragula]="'macroActions'" [dragulaModel]="macro.macroActions">
+            <macro-item *ngFor="let macroAction of macro.macroActions; let macroActionIndex = index"
+                        [macroAction]="macroAction"
+                        [editable]="true"
+                        [deletable]="true"
+                        [moveable]="true"
+                        (save)="saveAction($event, macroActionIndex)"
+                        (edit)="editAction(macroActionIndex)"
+                        (cancel)="cancelAction()"
+                        (delete)="deleteAction(macroAction, macroActionIndex)"
+                        [attr.data-index]="macroActionIndex"
+            ></macro-item>
+
+            <macro-item *ngIf="showNew" [macroAction]="newMacro"
+                        [editable]="true"
+                        [deletable]="false"
+                        [moveable]="false"
+                        (save)="addNewAction($event)"
+                        (cancel)="hideNewAction()"
+            ></macro-item>
+        </div>
+        <div class="list-group add-new__action-container" *ngIf="!showNew">
+            <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
+                </a>
+                <a class="add-new__action-item--link">
+                    <i class="fa fa fa-circle"></i> Add new capture keystroke
+                </a>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -1,4 +1,4 @@
-@import '../../main-app/global-styles';
+@import '../../../main-app/global-styles';
 
 :host {
     display: flex;
@@ -156,9 +156,3 @@ h1 {
         user-select: none;
     }
 }
-
-.not-found {
-    margin-top: 30px;
-    font-size: 16px;
-    text-align: center;
-}

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

@@ -0,0 +1,109 @@
+import { Component, EventEmitter, Input, Output, QueryList, ViewChild, forwardRef } from '@angular/core';
+
+import { DragulaService } from 'ng2-dragula/ng2-dragula';
+
+import { Macro } from '../../../config-serializer/config-items/Macro';
+import { MacroAction } from '../../../config-serializer/config-items/macro-action';
+import { MacroItemComponent } from './../index';
+
+@Component({
+    selector: 'macro-list',
+    template: require('./macro-list.component.html'),
+    styles: [require('./macro-list.component.scss')],
+    viewProviders: [DragulaService]
+})
+export class MacroListComponent {
+    @Input() macro: Macro;
+    @ViewChild(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;
+
+    constructor(private dragulaService: DragulaService) {
+        /* tslint:disable:no-unused-variable: Used by Dragula. */
+        dragulaService.setOptions('macroActions', {
+            moves: function (el: any, container: any, handle: any) {
+                return handle.className.includes('action--movable');
+            }
+        });
+
+        dragulaService.drag.subscribe((value: any) => {
+            this.dragIndex = +value[1].getAttribute('data-index');
+        });
+
+        dragulaService.drop.subscribe((value: any) => {
+            if (value[4]) {
+                this.reorder.emit({
+                    macroId: this.macro.id,
+                    oldIndex: this.dragIndex,
+                    newIndex: +value[4].getAttribute('data-index')
+                });
+            }
+        });
+    }
+
+    showNewAction() {
+        this.hideActiveEditor();
+
+        this.newMacro = undefined;
+        this.showNew = true;
+    }
+
+    hideNewAction() {
+        this.showNew = false;
+    }
+
+    addNewAction(macroAction: MacroAction) {
+        this.add.emit({
+            macroId: this.macro.id,
+            action: macroAction
+        });
+
+        this.newMacro = undefined;
+        this.showNew = false;
+    }
+
+    editAction(index: number) {
+        // Hide other editors when clicking edit button of a macro action
+        this.hideActiveEditor();
+        this.showNew = false;
+        this.activeEdit = index;
+    }
+
+    cancelAction() {
+        this.activeEdit = undefined;
+    }
+
+    saveAction(macroAction: MacroAction, index: number) {
+        this.edit.emit({
+            macroId: this.macro.id,
+            index: index,
+            action: macroAction
+        });
+
+        this.hideActiveEditor();
+    }
+
+    deleteAction(macroAction: MacroAction, index: number) {
+        this.delete.emit({
+            macroId: this.macro.id,
+            index: index,
+            action: macroAction
+        });
+
+        this.hideActiveEditor();
+    }
+
+    private hideActiveEditor() {
+        if (this.activeEdit !== undefined) {
+            this.macroItems.toArray()[this.activeEdit].cancelEdit();
+        }
+    }
+}

src/components/macro/macro.component.html

@@ -1,42 +0,0 @@
-<template [ngIf]="macro">
-    <macro-header [macro]="macro"></macro-header>
-    <div class="row list-container">
-        <div class="col-xs-10 col-xs-offset-1 list-group">
-            <div class="macro-actions-container" [dragula]="'macroActions'" [dragulaModel]="(macro)?.macroActions">
-                <macro-item *ngFor="let macroAction of (macro)?.macroActions; let macroActionIndex = index"
-                            [macroAction]="macroAction"
-                            [editable]="true"
-                            [deletable]="true"
-                            [movable]="true"
-                            (save)="saveAction($event, macroActionIndex)"
-                            (edit)="editAction(macroActionIndex)"
-                            (cancel)="cancelAction()"
-                            (delete)="deleteAction(macroAction, macroActionIndex)"
-                            [attr.data-index]="macroActionIndex"
-                ></macro-item>
-
-                <macro-item [@toggler]="showNew ? 'active' : 'inactive'" [macroAction]="newMacro"
-                            [editable]="true"
-                            [deletable]="false"
-                            [movable]="false"
-                            (save)="addNewAction($event)"
-                            (cancel)="hideNewAction()"
-                ></macro-item>
-            </div>
-            <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
-                    </a>
-                    <a class="add-new__action-item--link">
-                        <i class="fa fa fa-circle"></i> Add new capture keystroke
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<div *ngIf="!macro" class="not-found">
-    Sorry, there is no macro with this id.
-</div>

src/components/macro/macro.component.ts

@@ -1,138 +0,0 @@
-import {
-    Component,
-    OnDestroy,
-    QueryList,
-    ViewChildren,
-    animate,
-    state,
-    style,
-    transition,
-    trigger
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import '@ngrx/core/add/operator/select';
-import { Store } from '@ngrx/store';
-import 'rxjs/add/operator/let';
-import 'rxjs/add/operator/switchMap';
-import { Subscription } from 'rxjs/Subscription';
-
-import { DragulaService } from 'ng2-dragula/ng2-dragula';
-
-import { Macro } from '../../config-serializer/config-items/Macro';
-import { MacroAction } from '../../config-serializer/config-items/macro-action';
-import { MacroItemComponent } from './item/macro-item.component';
-
-import { AppState } from '../../store';
-import { MacroActions } from '../../store/actions';
-import { getMacro } from '../../store/reducers/macro';
-
-@Component({
-    animations: [
-        trigger('toggler', [
-            state('inactive', style({
-                height: '0px'
-            })),
-            state('active',   style({
-                height: '*'
-            })),
-            transition('inactive <=> active', animate('500ms ease-out'))
-        ])
-    ],
-    selector: 'macro',
-    template: require('./macro.component.html'),
-    styles: [require('./macro.component.scss')],
-    viewProviders: [DragulaService]
-})
-export class MacroComponent implements OnDestroy {
-    @ViewChildren(MacroItemComponent) macroItems: QueryList<MacroItemComponent>;
-    private macro: Macro;
-    private showNew: boolean = false;
-    private newMacro: Macro = undefined;
-    private activeEdit: number = undefined;
-    private dragIndex: number;
-    private subscription: Subscription;
-
-    constructor(
-        private store: Store<AppState>,
-        private route: ActivatedRoute,
-        private dragulaService: DragulaService
-    ) {
-        /* tslint:disable:no-unused-variable: Used by Dragula. */
-        dragulaService.setOptions('macroActions', {
-            moves: function (el: any, container: any, handle: any) {
-                return handle.className.includes('action--movable');
-            }
-        });
-
-        dragulaService.drag.subscribe((value: any) => {
-            this.dragIndex = +value[1].getAttribute('data-index');
-        });
-
-        dragulaService.drop.subscribe((value: any) => {
-            if (value[4]) {
-                this.store.dispatch(MacroActions.reorderMacroAction(
-                    this.macro.id,
-                    this.dragIndex,
-                    +value[4].getAttribute('data-index')
-                ));
-            }
-        });
-
-        this.subscription = route
-            .params
-            .select<string>('id')
-            .switchMap((id: string) => store.let(getMacro(+id)))
-            .subscribe((macro: Macro) => {
-                this.macro = macro;
-            });
-    }
-
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-
-    showNewAction() {
-        this.hideActiveEditor();
-
-        this.newMacro = undefined;
-        this.showNew = true;
-    }
-
-    hideNewAction() {
-        this.showNew = false;
-    }
-
-    addNewAction(macroAction: MacroAction) {
-        this.store.dispatch(MacroActions.addMacroAction(this.macro.id, macroAction));
-        this.newMacro = undefined;
-        this.showNew = false;
-    }
-
-    editAction(index: number) {
-        // Hide other editors when clicking edit button of a macro action
-        this.hideActiveEditor();
-        this.showNew = false;
-        this.activeEdit = index;
-    }
-
-    cancelAction() {
-        this.activeEdit = undefined;
-    }
-
-    saveAction(macroAction: MacroAction, index: number) {
-        this.store.dispatch(MacroActions.saveMacroAction(this.macro.id, index, macroAction));
-        this.hideActiveEditor();
-    }
-
-    deleteAction(macroAction: MacroAction, index: number) {
-        this.store.dispatch(MacroActions.deleteMacroAction(this.macro.id, index, macroAction));
-        this.hideActiveEditor();
-    }
-
-    private hideActiveEditor() {
-        if (this.activeEdit !== undefined) {
-            this.macroItems.toArray()[this.activeEdit].cancelEdit();
-        }
-    }
-}

src/components/macro/macro.routes.ts

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