From 3a69726257ce3eaf8ac95507a42be63ea961fd47 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Fri, 21 Oct 2016 06:20:13 +0200 Subject: [PATCH] Moved list of macros to the new component --- src/app.module.ts | 6 +- .../macro/edit/macro-edit.component.html | 14 ++ .../macro/edit/macro-edit.component.scss | 5 + .../macro/edit/macro-edit.component.ts | 53 +++++++ src/components/macro/index.ts | 3 +- .../macro/list/macro-list.component.html | 35 +++++ .../macro-list.component.scss} | 8 +- .../macro/list/macro-list.component.ts | 109 ++++++++++++++ src/components/macro/macro.component.html | 42 ------ src/components/macro/macro.component.ts | 138 ------------------ src/components/macro/macro.routes.ts | 6 +- 11 files changed, 226 insertions(+), 193 deletions(-) create mode 100644 src/components/macro/edit/macro-edit.component.html create mode 100644 src/components/macro/edit/macro-edit.component.scss create mode 100644 src/components/macro/edit/macro-edit.component.ts create mode 100644 src/components/macro/list/macro-list.component.html rename src/components/macro/{macro.component.scss => list/macro-list.component.scss} (95%) create mode 100644 src/components/macro/list/macro-list.component.ts delete mode 100644 src/components/macro/macro.component.html delete mode 100644 src/components/macro/macro.component.ts diff --git a/src/app.module.ts b/src/app.module.ts index 7fabba0b..c28f2a6a 100644 --- a/src/app.module.ts +++ b/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, diff --git a/src/components/macro/edit/macro-edit.component.html b/src/components/macro/edit/macro-edit.component.html new file mode 100644 index 00000000..2046d149 --- /dev/null +++ b/src/components/macro/edit/macro-edit.component.html @@ -0,0 +1,14 @@ + + +
+ Sorry, there is no macro with this id. +
\ No newline at end of file diff --git a/src/components/macro/edit/macro-edit.component.scss b/src/components/macro/edit/macro-edit.component.scss new file mode 100644 index 00000000..385cc786 --- /dev/null +++ b/src/components/macro/edit/macro-edit.component.scss @@ -0,0 +1,5 @@ +.not-found { + margin-top: 30px; + font-size: 16px; + text-align: center; +} diff --git a/src/components/macro/edit/macro-edit.component.ts b/src/components/macro/edit/macro-edit.component.ts new file mode 100644 index 00000000..d24e9e6e --- /dev/null +++ b/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, private route: ActivatedRoute) { + this.subscription = route + .params + .select('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)); + } +} diff --git a/src/components/macro/index.ts b/src/components/macro/index.ts index 3b24c0e1..b43d09f4 100644 --- a/src/components/macro/index.ts +++ b/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'; diff --git a/src/components/macro/list/macro-list.component.html b/src/components/macro/list/macro-list.component.html new file mode 100644 index 00000000..987f7f6e --- /dev/null +++ b/src/components/macro/list/macro-list.component.html @@ -0,0 +1,35 @@ +
+
+
+ + + +
+
+
+ + Add new macro action + + + Add new capture keystroke + +
+
+
+
\ No newline at end of file diff --git a/src/components/macro/macro.component.scss b/src/components/macro/list/macro-list.component.scss similarity index 95% rename from src/components/macro/macro.component.scss rename to src/components/macro/list/macro-list.component.scss index de57b26d..1d98499e 100644 --- a/src/components/macro/macro.component.scss +++ b/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; -} diff --git a/src/components/macro/list/macro-list.component.ts b/src/components/macro/list/macro-list.component.ts new file mode 100644 index 00000000..a0cefb5a --- /dev/null +++ b/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; + + @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(); + } + } +} diff --git a/src/components/macro/macro.component.html b/src/components/macro/macro.component.html deleted file mode 100644 index 60f8eb33..00000000 --- a/src/components/macro/macro.component.html +++ /dev/null @@ -1,42 +0,0 @@ - - -
- Sorry, there is no macro with this id. -
\ No newline at end of file diff --git a/src/components/macro/macro.component.ts b/src/components/macro/macro.component.ts deleted file mode 100644 index 57ffbfeb..00000000 --- a/src/components/macro/macro.component.ts +++ /dev/null @@ -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; - 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, - 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('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(); - } - } -} diff --git a/src/components/macro/macro.routes.ts b/src/components/macro/macro.routes.ts index fac9b78f..7a7b1e0a 100644 --- a/src/components/macro/macro.routes.ts +++ b/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 } ];