benjamin/wgenerator
1
0
Fork 0
Code Releases Activity

better song sorting

Browse Source
This commit is contained in:
smuddyx
2021-06-13 00:00:26 +02:00
parent 7cc905449c
commit 4b931c06d8
18 changed files with 163 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/modules/shows/show/show.component.html
View File

@@ -11,22 +11,20 @@
<p *ngIf="!show.published">
<mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
</p>
<div *ngIf="showSongs && songs" class="song-list">
<app-song
*ngFor="let song of showSongs"
[Song]="song"
[showId]="showId"
[showSong]="song"
[showSongs]="showSongs"
[showText]="showText"
[show]="show"
class="song-row"
></app-song>
<div *ngIf="showSongs" class="song-list" cdkDropList (cdkDropListDropped)="drop($event, show)">
<div *ngFor="let song of orderedShowSongs(show)" class="song-row" cdkDrag>
<app-song
[showSong]="song"
[showId]="showId"
[showText]="showText"
[show]="show"
></app-song>
</div>
</div>
<app-add-song
*ngIf="songs && !show.published"
[showId]="showId"
[show]="show"
[showSongs]="showSongs"
[songs]="songs"
></app-add-song>

23
src/app/modules/shows/show/show.component.less
View File

@@ -3,3 +3,26 @@
border-bottom: 1px solid #0002;
}
.cdk-drag-preview {
background-color: white;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.song-list:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .song-list:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

16
src/app/modules/shows/show/show.component.ts
View File

@@ -16,6 +16,7 @@ import {faLock} from '@fortawesome/free-solid-svg-icons/faLock';
import {faFileDownload} from '@fortawesome/free-solid-svg-icons/faFileDownload';
import {faUser} from '@fortawesome/free-solid-svg-icons/faUser';
import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
@Component({
selector: 'app-show',
@@ -57,7 +58,8 @@ export class ShowComponent implements OnInit {
map(param => param as {showId: string}),
map(param => param.showId),
switchMap(showId => this.showSongService.list$(showId)),
filter(_ => !!_)
tap(_ => console.log(_)),
filter(_ => !!_ && _.length > 0)
)
.subscribe(_ => (this.showSongs = _));
this.songService
@@ -101,4 +103,16 @@ export class ShowComponent implements OnInit {
copyright: true,
});
}
public async drop(event: CdkDragDrop<never>, show: Show): Promise<void> {
const order = [...show.order];
moveItemInArray(order, event.previousIndex, event.currentIndex);
await this.showService.update$(show.id, {order});
}
public orderedShowSongs(show: Show): ShowSong[] {
const list = this.showSongs;
if (!list) return [];
return show.order.map(_ => list.filter(f => f.id === _)[0]);
}
}

20
src/app/modules/shows/show/song/song.component.html
View File

@@ -1,21 +1,11 @@
<div *ngIf="iSong && showSong && show">
<div *ngIf="iSong && iSong && show">
<div *ngIf="show.published" class="title published">{{ iSong.title }}</div>
<div *ngIf="!show.published" class="song">
<app-menu-button
(click)="reorder(true)"
[icon]="faUp"
class="btn-up btn-icon"
></app-menu-button>
<app-menu-button
(click)="reorder(false)"
[icon]="faDown"
class="btn-down btn-icon"
></app-menu-button>
<span class="title">{{ iSong.title }}</span>
<span class="keys">
<span *ngIf="showSong.keyOriginal !== showSong.key"
>{{ showSong.keyOriginal }}&nbsp;→&nbsp;</span
<span *ngIf="iSong.keyOriginal !== iSong.key"
>{{ iSong.keyOriginal }}&nbsp;→&nbsp;</span
>
<mat-form-field *ngIf="keys" appearance="standard">
<mat-select [formControl]="keyFormControl">
@@ -34,9 +24,9 @@
<app-song-text
(chordModeChanged)="onChordModeChanged($event)"
*ngIf="showText || show.published"
[chordMode]="showSong.chordMode"
[chordMode]="iSong.chordMode"
[showSwitch]="!show.published"
[text]="iSong.text"
[transpose]="{ baseKey: showSong.keyOriginal, targetKey: showSong.key }"
[transpose]="{ baseKey: iSong.keyOriginal, targetKey: iSong.key }"
></app-song-text>
</div>

6
src/app/modules/shows/show/song/song.component.less
View File

@@ -2,11 +2,11 @@
.song {
min-height: 28px;
display: grid;
grid-template-columns: 20px 20px auto 70px 25px;
grid-template-columns: auto 70px 25px;
@media screen and (max-width: 860px) {
grid-template-columns: 40px 40px auto 70px 45px;
grid-template-columns: auto 70px 45px;
}
grid-template-areas: "up down title keys delete";
grid-template-areas: "title keys delete";
& > * {
display: flex;

109
src/app/modules/shows/show/song/song.component.ts
View File

@@ -1,5 +1,4 @@
import {Component, Input, OnInit} from '@angular/core';
import {Song} from '../../../songs/services/song';
import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
import {faCaretUp} from '@fortawesome/free-solid-svg-icons/faCaretUp';
import {faCaretDown} from '@fortawesome/free-solid-svg-icons/faCaretDown';
@@ -17,8 +16,6 @@ import {Show} from '../../services/show';
})
export class SongComponent implements OnInit {
@Input() public show: Show | null = null;
@Input() public showSong: ShowSong | null = null;
@Input() public showSongs: ShowSong[] | null = null;
@Input() public showId: string | null = null;
@Input() public showText: boolean | null = null;
@@ -27,77 +24,77 @@ export class SongComponent implements OnInit {
public faUp = faCaretUp;
public faDown = faCaretDown;
public keyFormControl: FormControl = new FormControl();
public iSong: Song | null = null;
public iSong: ShowSong | null = null;
public constructor(private showSongService: ShowSongService) {}
@Input()
public set Song(song: Song) {
public set showSong(song: ShowSong) {
this.iSong = song;
this.keys = song ? getScale(song.key) : [];
}
public ngOnInit(): void {
if (!this.showSong) return;
this.keyFormControl = new FormControl(this.showSong.key);
if (!this.iSong) return;
this.keyFormControl = new FormControl(this.iSong.key);
this.keyFormControl.valueChanges.subscribe((value: string) => {
if (!this.showId || !this.showSong) return;
void this.showSongService.update$(this.showId, this.showSong.id, {key: value});
if (!this.showId || !this.iSong) return;
void this.showSongService.update$(this.showId, this.iSong.id, {key: value});
});
}
public async onDelete(): Promise<void> {
if (!this.showId || !this.showSong) return;
await this.showSongService.delete$(this.showId, this.showSong.id);
if (!this.showId || !this.iSong) return;
await this.showSongService.delete$(this.showId, this.iSong.id);
}
public async reorder(up: boolean): Promise<void> {
if (up) {
await this.reorderUp();
} else {
await this.reorderDown();
}
}
public async reorderUp(): Promise<void> {
if (!this.showSongs || !this.showId) return;
const index = this.showSongs.findIndex(_ => _.songId === this.iSong?.id);
if (index === 0) {
return;
}
const song = this.showSongs[index];
const toggleSong = this.showSongs[index - 1];
await this.showSongService.update$(this.showId, song.id, {
order: toggleSong.order,
});
await this.showSongService.update$(this.showId, toggleSong.id, {
order: song.order,
});
}
public async reorderDown(): Promise<void> {
if (!this.showSongs || !this.showId) return;
const index = this.showSongs.findIndex(_ => _.songId === this.iSong?.id);
if (index === this.showSongs.length - 1) {
return;
}
const song = this.showSongs[index];
const toggleSong = this.showSongs[index + 1];
await this.showSongService.update$(this.showId, song.id, {
order: toggleSong.order,
});
await this.showSongService.update$(this.showId, toggleSong.id, {
order: song.order,
});
}
// public async reorder(up: boolean): Promise<void> {
// if (up) {
// await this.reorderUp();
// } else {
// await this.reorderDown();
// }
// }
//
// public async reorderUp(): Promise<void> {
// if (!this.showSongs || !this.showId) return;
// const index = this.showSongs.findIndex(_ => _.songId === this.iSong?.id);
// if (index === 0) {
// return;
// }
//
// const song = this.showSongs[index];
// const toggleSong = this.showSongs[index - 1];
//
// await this.showSongService.update$(this.showId, song.id, {
// order: toggleSong.order,
// });
// await this.showSongService.update$(this.showId, toggleSong.id, {
// order: song.order,
// });
// }
//
// public async reorderDown(): Promise<void> {
// if (!this.showSongs || !this.showId) return;
// const index = this.showSongs.findIndex(_ => _.songId === this.iSong?.id);
// if (index === this.showSongs.length - 1) {
// return;
// }
//
// const song = this.showSongs[index];
// const toggleSong = this.showSongs[index + 1];
//
// await this.showSongService.update$(this.showId, song.id, {
// order: toggleSong.order,
// });
// await this.showSongService.update$(this.showId, toggleSong.id, {
// order: song.order,
// });
// }
public async onChordModeChanged(value: ChordMode): Promise<void> {
if (!this.showId || !this.showSong) return;
await this.showSongService.update$(this.showId, this.showSong.id, {
if (!this.showId || !this.iSong) return;
await this.showSongService.update$(this.showId, this.iSong.id, {
chordMode: value,
});
}