added moving column capability
This commit is contained in:
parent
15ad95615b
commit
a69a39e666
|
@ -1,7 +1,7 @@
|
||||||
import { Component, OnInit, Input } from '@angular/core';
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
import { Store } from '@ngxs/store';
|
import { Store } from '@ngxs/store';
|
||||||
|
|
||||||
import { StreamElement, RemoveStream } from '../../../states/streams.state';
|
import { StreamElement, RemoveStream, MoveStreamUp, MoveStreamDown } from '../../../states/streams.state';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-stream-edition',
|
selector: 'app-stream-edition',
|
||||||
|
@ -17,17 +17,16 @@ export class StreamEditionComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
moveLeft(): boolean {
|
moveLeft(): boolean {
|
||||||
console.log('move left');
|
this.store.dispatch([new MoveStreamUp(this.streamElement.id)]);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
moveRight(): boolean {
|
moveRight(): boolean {
|
||||||
console.log('move right');
|
this.store.dispatch([new MoveStreamDown(this.streamElement.id)]);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
delete(): boolean {
|
delete(): boolean {
|
||||||
console.log('delete');
|
|
||||||
this.store.dispatch([new RemoveStream(this.streamElement.id)]);
|
this.store.dispatch([new RemoveStream(this.streamElement.id)]);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,6 +15,16 @@ export class RemoveStream {
|
||||||
constructor(public streamId :string) {}
|
constructor(public streamId :string) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class MoveStreamUp {
|
||||||
|
static readonly type = '[Streams] Move stream up';
|
||||||
|
constructor(public streamId :string) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MoveStreamDown {
|
||||||
|
static readonly type = '[Streams] Move stream down';
|
||||||
|
constructor(public streamId :string) {}
|
||||||
|
}
|
||||||
|
|
||||||
export interface StreamsStateModel {
|
export interface StreamsStateModel {
|
||||||
streams: StreamElement[];
|
streams: StreamElement[];
|
||||||
}
|
}
|
||||||
|
@ -49,6 +59,34 @@ export class StreamsState {
|
||||||
streams: [...filteredStreams]
|
streams: [...filteredStreams]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@Action(MoveStreamUp)
|
||||||
|
MoveStreamUp(ctx: StateContext<StreamsStateModel>, action: MoveStreamUp){
|
||||||
|
const state = ctx.getState();
|
||||||
|
const sourceIndex = state.streams.findIndex(x => x.id === action.streamId);
|
||||||
|
if(sourceIndex === 0) return;
|
||||||
|
|
||||||
|
let streamsCopy = [...state.streams];
|
||||||
|
streamsCopy[sourceIndex - 1] = state.streams[sourceIndex];
|
||||||
|
streamsCopy[sourceIndex] = state.streams[sourceIndex - 1];
|
||||||
|
|
||||||
|
ctx.patchState({
|
||||||
|
streams: streamsCopy
|
||||||
|
});
|
||||||
|
}
|
||||||
|
@Action(MoveStreamDown)
|
||||||
|
MoveStreamDown(ctx: StateContext<StreamsStateModel>, action: MoveStreamDown){
|
||||||
|
const state = ctx.getState();
|
||||||
|
const sourceIndex = state.streams.findIndex(x => x.id === action.streamId);
|
||||||
|
if(sourceIndex === state.streams.length - 1) return;
|
||||||
|
|
||||||
|
let streamsCopy = [...state.streams];
|
||||||
|
streamsCopy[sourceIndex + 1] = state.streams[sourceIndex];
|
||||||
|
streamsCopy[sourceIndex] = state.streams[sourceIndex + 1];
|
||||||
|
|
||||||
|
ctx.patchState({
|
||||||
|
streams: streamsCopy
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class StreamElement {
|
export class StreamElement {
|
||||||
|
|
Loading…
Reference in New Issue