import {Component, OnInit} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from "@angular/forms"; import {DecimalPipe, JsonPipe, NgForOf, NgIf} from "@angular/common"; import {HttpClient} from "@angular/common/http"; import {environment} from "../../environments/environment"; import {countryCodeToFlag} from "../format"; import {OsuGradeComponent} from "../../corelib/components/osu-grade/osu-grade.component"; import {Field, Query, QueryBuilderComponent} from "../../corelib/components/query-builder/query-builder.component"; import {RouterLink} from "@angular/router"; import {CalculatePageRangePipe} from "../../corelib/calculate-page-range.pipe"; import {DownloadFilesService} from "../../corelib/service/download-files.service"; interface SchemaField { name: string; shortName: string; category: 'user' | 'score' | 'beatmap'; type: 'number' | 'string' | 'flag' | 'grade' | 'boolean'; active: boolean; description: string; } interface SchemaResponse { fields: SchemaField[]; } interface SearchResponse { scores: any[]; pagination: SearchPagination; } interface SearchPagination { currentPage: number; pageSize: number; totalResults: number; totalPages: number; } interface Sorting { field: string; order: 'ASC' | 'DESC'; } @Component({ selector: 'app-search', standalone: true, imports: [ ReactiveFormsModule, NgForOf, FormsModule, JsonPipe, NgIf, DecimalPipe, OsuGradeComponent, QueryBuilderComponent, RouterLink, CalculatePageRangePipe ], templateUrl: './search.component.html', styleUrl: './search.component.css' }) export class SearchComponent implements OnInit { constructor(private httpClient: HttpClient, public downloadFilesService: DownloadFilesService) { } isError = false; isLoading = false; isLoadingSchema = true; response: SearchResponse | null = null; fields: SchemaField[] = []; sortingOrder: Sorting | null = null; queries: Query[] | null = null; ngOnInit(): void { this.isLoadingSchema = true; this.httpClient.get(`${environment.apiUrl}/search/schema`,).subscribe({ next: (response) => { this.fields = response.fields; this.loadPreviousFromLocalStorage(); this.isLoadingSchema = false; }, error: () => { alert('Error fetching schema'); } }); } private loadPreviousFromLocalStorage() { const storedQueries = localStorage.getItem('search_settings'); if (storedQueries) { let queries1 = JSON.parse(storedQueries); this.queries = queries1.queries; this.sortingOrder = queries1.sortingOrder; this.fields.forEach(field => { if (queries1.columns.hasOwnProperty(field.name)) { field.active = queries1.columns[field.name]; } }); } else { this.queries = []; this.sortingOrder = { field: 'user_id', order: 'ASC' }; } } deselectEntireFieldCategory(categoryName: string): void { this.fields.forEach(field => { if (field.category === categoryName) { field.active = false; } }); this.saveSettingsToLocalStorage(); } selectEntireFieldCategory(categoryName: string): void { this.fields.forEach(field => { if (field.category === categoryName) { field.active = true; } }); this.saveSettingsToLocalStorage(); } mapSchemaFieldsToFields(): Field[] { return this.fields.map(field => { return { name: field.name, type: field.type, }; }); } private serializeSettings() { return { queries: this.queries, sortingOrder: this.sortingOrder, columns: this.getColumnSettings() }; } private getColumnSettings() { return this.fields.reduce<{ [key: string]: boolean }>((acc, field) => { acc[field.name] = field.active; return acc; }, {}); } saveSettingsToLocalStorage(): void { const settings = this.serializeSettings(); localStorage.setItem('search_settings', JSON.stringify(settings)); } exportSettings(): void { const settings = this.serializeSettings(); this.downloadFilesService.downloadJSON(settings as any, 'nise-settings'); } importSettings(json: any): void { if (this.verifySchema(json)) { this.queries = json.queries; this.sortingOrder = json.sortingOrder; this.fields.forEach(field => { if (json.columns.hasOwnProperty(field.name)) { field.active = json.columns[field.name]; } }); } } getColumns(): string[] { return this.fields.map(field => field.name); } uploadSettingsFile(event: any): void { const file = event.target.files[0]; if (file) { const fileReader = new FileReader(); fileReader.onload = (e) => { try { const json = JSON.parse(fileReader.result as string); this.importSettings(json); } catch (error) { console.error('Error parsing JSON', error); } }; fileReader.readAsText(file); } } verifySchema(json: any): boolean { // TODO: Implement schema verification logic here return 'queries' in json && 'sortingOrder' in json && 'columns' in json; } search(pageNumber: number = 1): void { this.isLoading = true; this.isError = false; this.response = null; const body = { queries: this.queries, sorting: this.sortingOrder, page: pageNumber } this.httpClient.post(`${environment.apiUrl}/search`, body) .subscribe({ next: (response) => { this.response = response; this.isLoading = false; }, error: () => { this.isError = true; this.isLoading = false; } }); this.saveSettingsToLocalStorage(); } // Add this method to the SearchComponent class getValue(entry: any, columnName: string): any { return entry[columnName as keyof any]; } protected readonly countryCodeToFlag = countryCodeToFlag; protected readonly Math = Math; }