mirror of
https://github.com/Myxelium/Bridge-Multi.git
synced 2026-04-09 05:09:39 +00:00
Fix result table layout
This commit is contained in:
Geomitron
@@ -81,6 +81,7 @@
|
||||
"prettier": "^3.1.0",
|
||||
"prettier-eslint": "^16.1.2",
|
||||
"source-map-support": "^0.5.21",
|
||||
"tailwind-scrollbar": "^3.0.5",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"typescript": "^5.2.2"
|
||||
}
|
||||
|
||||
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
@@ -169,6 +169,9 @@ devDependencies:
|
||||
source-map-support:
|
||||
specifier: ^0.5.21
|
||||
version: 0.5.21
|
||||
tailwind-scrollbar:
|
||||
specifier: ^3.0.5
|
||||
version: 3.0.5(tailwindcss@3.3.5)
|
||||
tailwindcss:
|
||||
specifier: ^3.3.5
|
||||
version: 3.3.5
|
||||
@@ -9983,6 +9986,15 @@ packages:
|
||||
tslib: 2.6.2
|
||||
dev: true
|
||||
|
||||
/tailwind-scrollbar@3.0.5(tailwindcss@3.3.5):
|
||||
resolution: {integrity: sha512-0ZwxTivevqq9BY9fRP9zDjHl7Tu+J5giBGbln+0O1R/7nHtBUKnjQcA1aTIhK7Oyjp6Uc/Dj6/dn8Dq58k5Uww==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
peerDependencies:
|
||||
tailwindcss: 3.x
|
||||
dependencies:
|
||||
tailwindcss: 3.3.5
|
||||
dev: true
|
||||
|
||||
/tailwindcss@3.3.5:
|
||||
resolution: {integrity: sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<app-search-bar></app-search-bar>
|
||||
<div class="ui celled two column grid">
|
||||
<div id="table-row" class="row">
|
||||
<div id="table-column" class="column twelve wide">
|
||||
<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)"></app-result-table>
|
||||
</div>
|
||||
<div id="sidebar-column" class="column four wide">
|
||||
<app-chart-sidebar #chartSidebar></app-chart-sidebar>
|
||||
</div>
|
||||
<div class="flex flex-1 overflow-y-hidden">
|
||||
<!-- TODO: adjust sizing -->
|
||||
<div
|
||||
class="flex-grow-[1] overflow-y-auto scrollbar scrollbar-w-2 scrollbar-h-2 scrollbar-track-base-300 scrollbar-thumb-neutral scrollbar-thumb-rounded-full">
|
||||
<app-result-table #resultTable (rowClicked)="chartSidebar.onRowClicked($event)"></app-result-table>
|
||||
</div>
|
||||
<div class="flex-grow-[1] min-w-[175px]">
|
||||
<app-chart-sidebar #chartSidebar></app-chart-sidebar>
|
||||
</div>
|
||||
</div>
|
||||
<app-status-bar #statusBar></app-status-bar>
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.two.column.grid {
|
||||
display: contents;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#table-row {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
flex-wrap: nowrap;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#table-column {
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#sidebar-column {
|
||||
display: flex;
|
||||
min-width: 175px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, ViewChild } from '@angular/core'
|
||||
import { Component, HostBinding, ViewChild } from '@angular/core'
|
||||
|
||||
import { SearchService } from 'src-angular/app/core/services/search.service'
|
||||
|
||||
@@ -9,10 +9,9 @@ import { StatusBarComponent } from './status-bar/status-bar.component'
|
||||
@Component({
|
||||
selector: 'app-browse',
|
||||
templateUrl: './browse.component.html',
|
||||
styleUrls: ['./browse.component.scss'],
|
||||
})
|
||||
export class BrowseComponent {
|
||||
|
||||
@HostBinding('class.contents') contents = true
|
||||
@ViewChild('resultTable', { static: true }) resultTable: ResultTableComponent
|
||||
@ViewChild('chartSidebar', { static: true }) chartSidebar: ChartSidebarComponent
|
||||
@ViewChild('statusBar', { static: true }) statusBar: StatusBarComponent
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<td>
|
||||
<div #checkbox class="ui checkbox" (click)="$event.stopPropagation()">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<input #checkAllCheckbox type="checkbox" class="checkbox" (click)="$event.stopPropagation()" [(ngModel)]="selected" />
|
||||
</td>
|
||||
<td>
|
||||
<span id="chartCount" *ngIf="song.length > 1">{{ song.length }}</span> {{ song[0].name }}
|
||||
<span *ngIf="song.length > 1" class="rounded-sm bg-accent text-accent-content px-1 mr-1 font-bold">{{ song.length }}</span> {{ song[0].name }}
|
||||
</td>
|
||||
<td>{{ song[0].artist }}</td>
|
||||
<td>{{ song[0].album || 'Various' }}</td>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
.ui.checkbox {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#chartCount {
|
||||
background-color: lightgray;
|
||||
border-radius: 3px;
|
||||
padding: 1px 4px 2px 4px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core'
|
||||
import { Component, Input, OnInit } from '@angular/core'
|
||||
|
||||
import { ChartData } from '../../../../../../src-shared/interfaces/search.interface'
|
||||
import { SelectionService } from '../../../../core/services/selection.service'
|
||||
@@ -6,36 +6,24 @@ import { SelectionService } from '../../../../core/services/selection.service'
|
||||
@Component({
|
||||
selector: 'tr[app-result-table-row]',
|
||||
templateUrl: './result-table-row.component.html',
|
||||
styleUrls: ['./result-table-row.component.scss'],
|
||||
})
|
||||
export class ResultTableRowComponent implements AfterViewInit {
|
||||
export class ResultTableRowComponent implements OnInit {
|
||||
@Input() song: ChartData[]
|
||||
|
||||
@ViewChild('checkbox', { static: true }) checkbox: ElementRef
|
||||
|
||||
constructor(private selectionService: SelectionService) { }
|
||||
|
||||
get songID() {
|
||||
return this.song[0].songId ?? this.song[0].chartId
|
||||
ngOnInit() {
|
||||
this.selectionService.selections[this.groupId] = false
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.selectionService.onSelectionChanged(this.songID, isChecked => {
|
||||
if (isChecked) {
|
||||
// TODO
|
||||
// $(this.checkbox.nativeElement).checkbox('check')
|
||||
} else {
|
||||
// $(this.checkbox.nativeElement).checkbox('uncheck')
|
||||
}
|
||||
})
|
||||
get groupId() {
|
||||
return this.song[0].groupId
|
||||
}
|
||||
|
||||
// $(this.checkbox.nativeElement).checkbox({
|
||||
// onChecked: () => {
|
||||
// this.selectionService.selectSong(this.songID)
|
||||
// },
|
||||
// onUnchecked: () => {
|
||||
// this.selectionService.deselectSong(this.songID)
|
||||
// },
|
||||
// })
|
||||
get selected() {
|
||||
return this.selectionService.selections[this.groupId] ?? false
|
||||
}
|
||||
set selected(value: boolean) {
|
||||
this.selectionService.selections[this.groupId] = value
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<table
|
||||
id="resultTable"
|
||||
class="ui stackable selectable single sortable fixed line striped compact small table"
|
||||
[class.inverted]="settingsService.theme === 'dark'">
|
||||
<table id="resultTable" class="table table-zebra table-pin-rows overflow-y-auto">
|
||||
<!-- TODO: maybe have some of these tags customizable? E.g. small/large/compact/padded -->
|
||||
<!-- TODO: learn semantic themes in order to change the $mobileBreakpoint global variable (better search table adjustment) -->
|
||||
<thead>
|
||||
<!-- NOTE: it would be nice to make this header sticky, but Fomantic-UI doesn't currently support that -->
|
||||
<tr>
|
||||
<th class="collapsing" id="checkboxColumn">
|
||||
<div class="ui checkbox" id="checkbox" #checkboxColumn appCheckbox (checked)="checkAll($event)">
|
||||
<input type="checkbox" />
|
||||
</div>
|
||||
<input #checkAllCheckbox type="checkbox" class="checkbox" (change)="checkAll(checkAllCheckbox.checked)" />
|
||||
</th>
|
||||
<th class="four wide" [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
|
||||
<th class="four wide" [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
|
||||
<th class="four wide" [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
|
||||
<th class="four wide" [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
|
||||
<th [class.sorted]="sortColumn === 'name'" [ngClass]="sortDirection" (click)="onColClicked('name')">Name</th>
|
||||
<th [class.sorted]="sortColumn === 'artist'" [ngClass]="sortDirection" (click)="onColClicked('artist')">Artist</th>
|
||||
<th [class.sorted]="sortColumn === 'album'" [ngClass]="sortDirection" (click)="onColClicked('album')">Album</th>
|
||||
<th [class.sorted]="sortColumn === 'genre'" [ngClass]="sortDirection" (click)="onColClicked('genre')">Genre</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (song of songs; track song) {
|
||||
<tr app-result-table-row (click)="onRowClicked(song)" [class.active]="activeSong === song" [song]="song"></tr>
|
||||
<tr
|
||||
app-result-table-row
|
||||
(click)="onRowClicked(song)"
|
||||
[class.!bg-neutral]="activeSong === song"
|
||||
[class.!text-neutral-content]="activeSong === song"
|
||||
[song]="song"></tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
:host {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.ui.checkbox {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#checkboxColumn {
|
||||
width: 34.64px;
|
||||
}
|
||||
|
||||
#resultTable {
|
||||
border-radius: 0px;
|
||||
|
||||
thead>tr:first-child>th:first-child,
|
||||
thead>tr:first-child>th:last-child {
|
||||
border-radius: 0px;
|
||||
}
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index:1;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, EventEmitter, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
|
||||
import { Component, EventEmitter, HostBinding, OnInit, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'
|
||||
|
||||
import Comparators from 'comparators'
|
||||
import { SettingsService } from 'src-angular/app/core/services/settings.service'
|
||||
@@ -12,9 +12,9 @@ import { ResultTableRowComponent } from './result-table-row/result-table-row.com
|
||||
@Component({
|
||||
selector: 'app-result-table',
|
||||
templateUrl: './result-table.component.html',
|
||||
styleUrls: ['./result-table.component.scss'],
|
||||
})
|
||||
export class ResultTableComponent implements OnInit {
|
||||
@HostBinding('class.contents') contents = true
|
||||
|
||||
@Output() rowClicked = new EventEmitter<ChartData[]>()
|
||||
|
||||
@@ -32,10 +32,6 @@ export class ResultTableComponent implements OnInit {
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.selectionService.onSelectAllChanged(selected => {
|
||||
this.checkboxColumn.check(selected)
|
||||
})
|
||||
|
||||
this.searchService.searchUpdated.subscribe(() => {
|
||||
this.activeSong = null
|
||||
this.updateSort()
|
||||
@@ -76,6 +72,7 @@ export class ResultTableComponent implements OnInit {
|
||||
* Called when the user checks the `checkboxColumn`.
|
||||
*/
|
||||
checkAll(isChecked: boolean) {
|
||||
console.log(isChecked)
|
||||
if (isChecked) {
|
||||
this.selectionService.selectAll()
|
||||
} else {
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse-content justify-center">
|
||||
<div class="collapse-content justify-center pt-2">
|
||||
<form [formGroup]="advancedSearchForm">
|
||||
<div class="flex flex-wrap gap-5 justify-center">
|
||||
<div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div id="bottomMenu" class="ui bottom borderless menu">
|
||||
<div id="bottomMenu" class="ui bottom borderless menu border-t border-t-neutral">
|
||||
<div *ngIf="(searchService.groupedSongs?.length ?? 0) > 0" class="item">
|
||||
{{ searchService.groupedSongs.length }}{{ allResultsVisible ? '' : '+' }} Result{{ searchService.groupedSongs.length === 1 ? '' : 's' }}
|
||||
</div>
|
||||
|
||||
@@ -3,11 +3,6 @@
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#bottomMenu {
|
||||
border-radius: 0px;
|
||||
border-width: 1px 0px 0px 0px;
|
||||
}
|
||||
|
||||
#downloadsModal {
|
||||
.header {
|
||||
display: flex;
|
||||
|
||||
@@ -102,9 +102,10 @@ export class StatusBarComponent {
|
||||
}
|
||||
|
||||
deselectSongsWithMultipleCharts() {
|
||||
for (const chartGroup of this.chartGroups) {
|
||||
this.selectionService.deselectSong(chartGroup[0].songID)
|
||||
}
|
||||
// TODO
|
||||
// for (const chartGroup of this.chartGroups) {
|
||||
// this.selectionService.deselectSong(chartGroup[0].songID)
|
||||
// }
|
||||
}
|
||||
|
||||
clearCompleted() {
|
||||
|
||||
@@ -5,6 +5,7 @@ import { FormControl } from '@angular/forms'
|
||||
import { chain, xorBy } from 'lodash'
|
||||
import { catchError, mergeMap, tap, throwError, timer } from 'rxjs'
|
||||
import { Difficulty, Instrument } from 'scan-chart'
|
||||
import { environment } from 'src-angular/environments/environment'
|
||||
import { AdvancedSearch, ChartData, SearchResult } from 'src-shared/interfaces/search.interface'
|
||||
|
||||
@Injectable({
|
||||
@@ -60,7 +61,7 @@ export class SearchService {
|
||||
this.search().subscribe()
|
||||
}
|
||||
|
||||
get areMorePages() { return this.songsResponse.page && this.groupedSongs.length === this.songsResponse.page * 20 }
|
||||
get areMorePages() { return this.songsResponse.page && this.groupedSongs.length === this.songsResponse.page * 10 }
|
||||
|
||||
/**
|
||||
* General search, uses the `/search?q=` endpoint.
|
||||
@@ -80,8 +81,9 @@ export class SearchService {
|
||||
}
|
||||
|
||||
let retries = 10
|
||||
return this.http.post<SearchResult>(`/api/search`, {
|
||||
return this.http.post<SearchResult>(`${environment.apiUrl}/search`, {
|
||||
search,
|
||||
per_page: 25,
|
||||
page: this.currentPage,
|
||||
instrument: this.instrument.value,
|
||||
difficulty: this.difficulty.value,
|
||||
@@ -125,7 +127,7 @@ export class SearchService {
|
||||
this.isDefaultSearch = false
|
||||
|
||||
let retries = 10
|
||||
return this.http.post<{ data: SearchResult['data'] }>(`/api/search/advanced`, search).pipe(
|
||||
return this.http.post<{ data: SearchResult['data'] }>(`${environment.apiUrl}/search/advanced`, search).pipe(
|
||||
catchError((err, caught) => {
|
||||
if (err.status === 400 || retries-- <= 0) {
|
||||
this.searchLoading = false
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { EventEmitter, Injectable } from '@angular/core'
|
||||
|
||||
import { SearchResult } from '../../../../src-shared/interfaces/search.interface'
|
||||
import { SearchService } from './search.service'
|
||||
|
||||
// Note: this class prevents event cycles by only emitting events if the checkbox changes
|
||||
@@ -10,27 +9,13 @@ import { SearchService } from './search.service'
|
||||
})
|
||||
export class SelectionService {
|
||||
|
||||
private searchResults: Partial<SearchResult>
|
||||
|
||||
private selectAllChangedEmitter = new EventEmitter<boolean>()
|
||||
private selectionChangedCallbacks: { [songID: number]: (selection: boolean) => void } = {}
|
||||
|
||||
private allSelected = false
|
||||
private selections: { [songID: number]: boolean | undefined } = {}
|
||||
public selections: { [groupId: number]: boolean | undefined } = {}
|
||||
|
||||
constructor(searchService: SearchService) {
|
||||
searchService.searchUpdated.subscribe(results => {
|
||||
this.searchResults = results
|
||||
if (this.allSelected) {
|
||||
this.selectAll() // Select newly added rows if allSelected
|
||||
}
|
||||
})
|
||||
|
||||
searchService.searchUpdated.subscribe(results => {
|
||||
this.searchResults = results
|
||||
this.selectionChangedCallbacks = {}
|
||||
searchService.searchUpdated.subscribe(() => {
|
||||
this.selections = {}
|
||||
this.selectAllChangedEmitter.emit(false)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -44,46 +29,17 @@ export class SelectionService {
|
||||
this.selectAllChangedEmitter.subscribe(callback)
|
||||
}
|
||||
|
||||
/**
|
||||
* Emits an event when the selection for `songID` needs to change.
|
||||
* (note: only one emitter can be registered per `songID`)
|
||||
*/
|
||||
onSelectionChanged(songID: number, callback: (selection: boolean) => void) {
|
||||
this.selectionChangedCallbacks[songID] = callback
|
||||
}
|
||||
|
||||
|
||||
deselectAll() {
|
||||
if (this.allSelected) {
|
||||
this.allSelected = false
|
||||
this.selectAllChangedEmitter.emit(false)
|
||||
for (const groupId in this.selections) {
|
||||
this.selections[groupId] = false
|
||||
}
|
||||
|
||||
// TODO
|
||||
// setTimeout(() => this.searchResults.forEach(result => this.deselectSong(result.id)), 0)
|
||||
this.selectAllChangedEmitter.emit(false)
|
||||
}
|
||||
|
||||
selectAll() {
|
||||
if (!this.allSelected) {
|
||||
this.allSelected = true
|
||||
this.selectAllChangedEmitter.emit(true)
|
||||
}
|
||||
|
||||
// TODO
|
||||
// setTimeout(() => this.searchResults.forEach(result => this.selectSong(result.id)), 0)
|
||||
}
|
||||
|
||||
deselectSong(songID: number) {
|
||||
if (this.selections[songID]) {
|
||||
this.selections[songID] = false
|
||||
this.selectionChangedCallbacks[songID](false)
|
||||
}
|
||||
}
|
||||
|
||||
selectSong(songID: number) {
|
||||
if (!this.selections[songID]) {
|
||||
this.selections[songID] = true
|
||||
this.selectionChangedCallbacks[songID](true)
|
||||
for (const groupId in this.selections) {
|
||||
this.selections[groupId] = true
|
||||
}
|
||||
this.selectAllChangedEmitter.emit(true)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
apiUrl: 'https://api.enchor.us',
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
export const environment = {
|
||||
production: false,
|
||||
apiUrl: 'https://api.enchor.us',
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark" class="bg-base-300">
|
||||
<html lang="en" data-theme="dark" class="bg-base-300 overflow-hidden">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Bridge</title>
|
||||
<base href="./" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<body class="scrollbar">
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,12 +7,3 @@ export const libraryPath = join(dataPath, 'library.db')
|
||||
export const settingsPath = join(dataPath, 'settings.json')
|
||||
export const tempPath = join(dataPath, 'temp')
|
||||
export const themesPath = join(dataPath, 'themes')
|
||||
|
||||
// URL
|
||||
export const serverURL = 'bridge-db.net'
|
||||
|
||||
// OAuth callback server
|
||||
export const SERVER_PORT = 42813
|
||||
export const REDIRECT_BASE = `http://127.0.0.1:${SERVER_PORT}`
|
||||
export const REDIRECT_PATH = `/oauth2callback`
|
||||
export const REDIRECT_URI = `${REDIRECT_BASE}${REDIRECT_PATH}`
|
||||
|
||||
@@ -131,6 +131,8 @@ export interface SearchResult {
|
||||
chartId: number
|
||||
/** The unique database identifier for the song, or `null` if there is only one chart of the song. */
|
||||
songId: number | null
|
||||
/** The unique database identifier for the song, or (-versionGroupId) if there is only one chart of the song. */
|
||||
groupId: number
|
||||
/** The MD5 hash of the normalized album art file. */
|
||||
albumArtMd5: string | null
|
||||
/** The MD5 hash of the chart folder or .sng file. */
|
||||
|
||||
@@ -8,7 +8,10 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
content: ['./src-angular/**/*.{html,js,ts}'],
|
||||
plugins: [require('daisyui')],
|
||||
plugins: [
|
||||
require('tailwind-scrollbar')({ nocompatible: true }),
|
||||
require('daisyui'),
|
||||
],
|
||||
daisyui: {
|
||||
logs: false,
|
||||
themes: [
|
||||
|
||||
Reference in New Issue
Block a user