From f894fe69d4c9325a979706f48aed332a1b68afbe Mon Sep 17 00:00:00 2001 From: Adam Kariv Date: Sun, 12 Jan 2025 17:09:52 +0200 Subject: [PATCH] Improve url structure for budget items in dashboard --- .../dashboard-search-results.component.ts | 2 +- .../app/dashboards/dashboards-api.service.ts | 20 +++++++++--------- .../dashboards-page.component.ts | 21 +++++++++++++++---- .../dashboards/dashboards-routing.module.ts | 15 ++++++++----- .../src/app/dashboards/dashboards.module.ts | 7 +++++++ .../src/app/item/budgetkey-item.service.ts | 13 +++++++++--- 6 files changed, 55 insertions(+), 23 deletions(-) diff --git a/projects/budgetkey/src/app/dashboards/dashboard-search-results/dashboard-search-results.component.ts b/projects/budgetkey/src/app/dashboards/dashboard-search-results/dashboard-search-results.component.ts index 022b74f..f39bad1 100644 --- a/projects/budgetkey/src/app/dashboards/dashboard-search-results/dashboard-search-results.component.ts +++ b/projects/budgetkey/src/app/dashboards/dashboard-search-results/dashboard-search-results.component.ts @@ -29,7 +29,7 @@ export class DashboardSearchResultsComponent { set selected(item) { console.log('config', this.api.baseRoute); if (item) { - this.router.navigate([...this.api.baseRoute, item.doc_id.split('/').join('__')], {queryParamsHandling: 'preserve'}); + this.router.navigate([...this.api.baseRoute, item.doc_id], {queryParamsHandling: 'preserve'}); } else { this.router.navigate(this.api.baseRoute, {queryParamsHandling: 'preserve'}); } diff --git a/projects/budgetkey/src/app/dashboards/dashboards-api.service.ts b/projects/budgetkey/src/app/dashboards/dashboards-api.service.ts index 2b29323..1ea92a6 100644 --- a/projects/budgetkey/src/app/dashboards/dashboards-api.service.ts +++ b/projects/budgetkey/src/app/dashboards/dashboards-api.service.ts @@ -3,11 +3,10 @@ import { Subject, BehaviorSubject } from 'rxjs'; import { switchMap, debounceTime, map, distinctUntilChanged } from 'rxjs/operators'; import { HttpClient } from '@angular/common/http'; import { ActivatedRoute, Router } from '@angular/router'; +import { BudgetKeyItemService } from '../item/budgetkey-item.service'; -@Injectable({ - providedIn: 'root' -}) +@Injectable() export class DashboardsApiService { public config: any = {}; public baseRoute: string[] = []; @@ -16,7 +15,7 @@ export class DashboardsApiService { searchResults = signal([]); selectedItem = signal(null); - constructor(private http: HttpClient, private router: Router) { + constructor(private http: HttpClient, private router: Router, private bkis: BudgetKeyItemService) { this.searchQueue .pipe( distinctUntilChanged((x, y) => x.term === y.term), @@ -39,12 +38,15 @@ export class DashboardsApiService { selectItem(doc_id: string | null) { console.log('selectItem', doc_id); if (doc_id) { - doc_id = doc_id?.split('__').join('/'); const url = `https://next.obudget.org/get/${doc_id}`; this.http .get(url) .subscribe((result: any) => { - this.selectedItem.set(result.value); + if (result.value?.__redirect) { + this.selectItem(result.value.__redirect); + } else { + this.selectedItem.set(result.value); + } }); } else { this.selectedItem.set(null); @@ -64,7 +66,7 @@ export class DashboardsApiService { map((r: any) => { const results: Array = r.search_results || []; if (results.length === 1) { - this.router.navigate([...this.baseRoute, results[0].source.doc_id.split('/').join('__')], {queryParamsHandling: 'preserve'}); + this.router.navigate([...this.baseRoute, results[0].source.doc_id.split('/')], {queryParamsHandling: 'preserve'}); } else { if (this.selectedItem()) { this.selectedItem.set(null); @@ -88,9 +90,7 @@ export class DashboardsApiService { doQuery(query: string, item: any): any { query = this.formatQuery(query, item); - const url = `https://next.obudget.org/api/query?query=${encodeURIComponent(query)}`; - return this.http - .get(url) + return this.bkis.doQuery(query) .pipe( map((r: any) => r.rows) ); diff --git a/projects/budgetkey/src/app/dashboards/dashboards-page/dashboards-page.component.ts b/projects/budgetkey/src/app/dashboards/dashboards-page/dashboards-page.component.ts index fdc4c61..a8bd2fe 100644 --- a/projects/budgetkey/src/app/dashboards/dashboards-page/dashboards-page.component.ts +++ b/projects/budgetkey/src/app/dashboards/dashboards-page/dashboards-page.component.ts @@ -6,6 +6,8 @@ import { config } from '../configurations/config'; import { DashboardSearchComponent } from '../dashboard-search/dashboard-search.component'; import { DashboardVisualizationsComponent } from '../dashboard-visualizations/dashboard-visualizations.component'; import { DashboardsApiService } from '../dashboards-api.service'; +import { map, tap } from 'rxjs'; +import { ItemModule } from '../../item/item.module'; @UntilDestroy() @Component({ @@ -14,7 +16,8 @@ import { DashboardsApiService } from '../dashboards-api.service'; imports: [ ListComponentsModule, DashboardSearchComponent, - DashboardVisualizationsComponent + DashboardVisualizationsComponent, + ItemModule ], templateUrl: './dashboards-page.component.html', styleUrls: ['./dashboards-page.component.less'] @@ -25,13 +28,23 @@ export class DashboardsPageComponent { this.route.params.pipe( untilDestroyed(this) ).subscribe(params => { + console.log('params', params); this.api.config = config[params['config']]; this.api.baseRoute = ['/dashboards', params['config']]; - if (params['item-id']) { - this.api.selectItem(params['item-id']); + }); + this.route.url.pipe( + untilDestroyed(this), + tap((url: any) => { + console.log('url', url); + }), + map((url: any) => url.map((s: any) => s.path).join('/')), + ).subscribe((itemId: string) => { + console.log('itemId', itemId); + if (itemId && itemId.length) { + this.api.selectItem(itemId); } else { this.api.selectItem(null); } - }); + }) } } diff --git a/projects/budgetkey/src/app/dashboards/dashboards-routing.module.ts b/projects/budgetkey/src/app/dashboards/dashboards-routing.module.ts index 94678a8..3f7d536 100644 --- a/projects/budgetkey/src/app/dashboards/dashboards-routing.module.ts +++ b/projects/budgetkey/src/app/dashboards/dashboards-routing.module.ts @@ -3,13 +3,18 @@ import { Routes, RouterModule } from "@angular/router"; import { DashboardsPageComponent } from "./dashboards-page/dashboards-page.component"; const routes: Routes = [ - { - path: ':config/:item-id', - component: DashboardsPageComponent - }, { path: ':config', - component: DashboardsPageComponent + children: [ + { + path: '**', + component: DashboardsPageComponent + }, + { + path: '', + component: DashboardsPageComponent + } + ] }, ]; diff --git a/projects/budgetkey/src/app/dashboards/dashboards.module.ts b/projects/budgetkey/src/app/dashboards/dashboards.module.ts index b953d58..314b964 100644 --- a/projects/budgetkey/src/app/dashboards/dashboards.module.ts +++ b/projects/budgetkey/src/app/dashboards/dashboards.module.ts @@ -4,6 +4,9 @@ import { CommonComponentsModule } from '../common-components/common-components.m import { DashboardsPageComponent } from './dashboards-page/dashboards-page.component'; import { DashboardsRoutingModule } from './dashboards-routing.module'; import { ListComponentsModule } from '../list-components/list-components.module'; +import { ItemModule } from '../item/item.module'; +import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; +import { DashboardsApiService } from './dashboards-api.service'; @@ -15,6 +18,10 @@ import { ListComponentsModule } from '../list-components/list-components.module' CommonComponentsModule, ListComponentsModule, DashboardsRoutingModule, + ItemModule, + ],providers: [ + DashboardsApiService, + provideHttpClient(withInterceptorsFromDi()), ] }) export class DashboardsModule { } diff --git a/projects/budgetkey/src/app/item/budgetkey-item.service.ts b/projects/budgetkey/src/app/item/budgetkey-item.service.ts index 6bad965..7145fc4 100644 --- a/projects/budgetkey/src/app/item/budgetkey-item.service.ts +++ b/projects/budgetkey/src/app/item/budgetkey-item.service.ts @@ -96,9 +96,9 @@ export class BudgetKeyItemService { (this.globalSettings.themeId ? '&theme=' + this.globalSettings.themeId : '') + '">' + parts[2] + ''; } - getItemData(query: string, headersOrder: string[], formatters: any[], page = 0, pageSize?: number): Observable { + doQuery(query: string, page = 0, pageSize?: number): Observable { if (this.ps.server()) { - return from([{query, headers: [], items: [], total: 0, rows: [], error: null, pages: 0, page: 0}]) + return from([]); } const params: any = { page @@ -109,7 +109,14 @@ export class BudgetKeyItemService { } const formData = new FormData(); formData.append('query', query); - return this.http.post(url, formData, {params}) + return this.http.post(url, formData, {params}); + } + + getItemData(query: string, headersOrder: string[], formatters: any[], page = 0, pageSize?: number): Observable { + if (this.ps.server()) { + return from([{query, headers: [], items: [], total: 0, rows: [], error: null, pages: 0, page: 0}]) + } + return this.doQuery(query, page, pageSize) .pipe( map( (res: any) => {