Improve url structure for budget items in dashboard

Author: akariv

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

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<any[]>([]);
   selectedItem = signal<any>(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<any> = 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)
       );

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

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
+      }
+    ]
   },
 ];
 

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 { }

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] + '</a>';
   }
 
-  getItemData(query: string, headersOrder: string[], formatters: any[], page = 0, pageSize?: number): Observable<object> {
+  doQuery(query: string, page = 0, pageSize?: number): Observable<any> {
     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<object> {
+    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) => {