139 lines
4.0 KiB
TypeScript
139 lines
4.0 KiB
TypeScript
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();
|
|
}
|
|
}
|
|
}
|