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

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,
});
}