Travel component

src/app/app.module.ts

@@ -8,6 +8,7 @@ import { AppComponent } from './app.component';
 import { APP_ROUTES } from './app.routes';
 import { USER_API_URL, TRAVEL_API_URL } from './app.config';
 import { HomeComponent } from './home/home.component';
+import { TravelComponent } from './travel/travel.component';
 import { SharedModule } from './shared/shared.module';
 import { RouterModule, ExtraOptions } from '@angular/router';
 import { useHash } from '../flags';
@@ -42,8 +43,9 @@ const ROUTING_OPTIONS: ExtraOptions = {
   declarations: [
     AppComponent,
     HomeComponent,
+    TravelComponent,
     HeaderComponent,
-    ListComponent,
+    ListComponent
   ],
   providers: [
     // (useHash) ? { provide: LocationStrategy, useClass: HashLocationStrategy } : [],

src/app/app.routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { TravelComponent } from './travel/travel.component';
 
 export let APP_ROUTES: Routes = [
   {
@@ -11,6 +12,10 @@ export let APP_ROUTES: Routes = [
     path: 'home',
     component: HomeComponent
   },
+  {
+    path: 'travel/:id',
+    component: TravelComponent
+  },
   {
     path: '**',
     redirectTo: 'home'

src/app/header/header.component.html

@@ -3,7 +3,7 @@
     <img width="100%" src="/assets/img/logo.png" />
   </mat-grid-tile>
   <mat-grid-tile colspan="1" rowspan="2">
-    <div *ngIf="name; then thenBlock; else elseBlock"></div>
+    <div *ngIf="logged; then thenBlock; else elseBlock"></div>
     <ng-template #thenBlock>
       {{ name }}
       <button mat-raised-button class="btn btn-default" (click)="logout()">Logout</button>

src/app/header/header.component.ts

@@ -8,19 +8,17 @@ import { authConfig } from '../auth.config';
   styleUrls: ['./header.component.css'],
 })
 export class HeaderComponent implements OnInit {
-  constructor(private oauthService: OAuthService) {}
+  constructor(private oauthService: OAuthService) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.oauthService.configure(authConfig);
+    this.oauthService.loadDiscoveryDocumentAndTryLogin().then(success => {
+      console.log('Autologin success=' + success + ' logged=' + String(this.logged));
+    });
+  }
 
   async login(): Promise<void> {
-    this.oauthService.configure(authConfig);
-    await this.oauthService.loadDiscoveryDocument();
-    if (
-      !this.oauthService.hasValidIdToken() ||
-      !this.oauthService.hasValidAccessToken()
-    ) {
-      this.oauthService.initLoginFlow('some-state');
-    }
+    this.oauthService.loadDiscoveryDocumentAndLogin();
   }
 
   logout(): void {

src/app/home/home.component.ts

@@ -40,26 +40,8 @@ export class HomeComponent implements OnInit {
     this.oauthService.loadUserProfile().then((up) => (this.userProfile = up));
   }
 
-  refresh(): void {
-    this.oauthService.oidc = true;
-
-    if (
-      !this.oauthService.useSilentRefresh &&
-      this.oauthService.responseType === 'code'
-    ) {
-      this.oauthService
-        .refreshToken()
-        .then((info) => console.log('refresh ok', info))
-        .catch((err) => console.error('refresh error', err));
-    } else {
-      this.oauthService
-        .silentRefresh()
-        .then((info) => console.log('silent refresh ok', info))
-        .catch((err) => console.error('silent refresh error', err));
-    }
-  }
-
   get logged(): boolean {
-    return this.oauthService.hasValidIdToken() && this.oauthService.hasValidAccessToken();
+    return this.oauthService.getIdentityClaims() != null;
+    // return this.oauthService.hasValidIdToken() && this.oauthService.hasValidAccessToken();
   }
 }

src/app/list/list.datasource.ts

@@ -22,13 +22,12 @@ export class ListDataSource<T> implements DataSource<T> {
   ): void {
     this.loadingSubject.next(true);
 
-    this.apiService
-      .call<ListDto<T>>(this.url, {
+    this.apiService.call<ListDto<T>>(this.url, {
         filter,
         sortColumn,
-        sortAscending: String(sortAscending),
-        pageIndex: String(pageIndex),
-        pageSize: String(pageSize),
+        sortAscending,
+        pageIndex,
+        pageSize,
       })
       .pipe(
         catchError(() => of([])),
@@ -43,7 +42,6 @@ export class ListDataSource<T> implements DataSource<T> {
   }
 
   connect(collectionViewer: CollectionViewer): Observable<T[]> {
-    console.log('Connecting data source');
     return this.listSubject.asObservable();
   }
 

src/app/services/api.service.ts

@@ -12,7 +12,7 @@ export class ApiService {
 
   call<T>(
     url: string,
-    params?: { [param: string]: string }
+    params?: { [param: string]: any }
   ): Observable<ApiResponse<T>> {
     return this.http
       .get<ApiResponse<T>>(url, { params })

src/app/travel/travel.component.html

@@ -0,0 +1,13 @@
+<mat-card *ngIf="travel">
+    <mat-card-title>
+        {{ travel.origin }} - {{ travel.destination }}
+    </mat-card-title>
+    <mat-card-subtitle>
+        {{ travel.departureDate }} Plazas libres: {{ travel.availablePlaces }}
+    </mat-card-subtitle>
+    <mat-card-content>
+        <p>ID: {{ travel.id }}</p>
+        <p>Conductor: {{ travel.driver.name }}</p><br>
+        <p>{{ travel.description }}</p>
+    </mat-card-content>
+</mat-card>

src/app/travel/travel.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TravelComponent } from './travel.component';
+
+describe('TravelComponent', () => {
+  let component: TravelComponent;
+  let fixture: ComponentFixture<TravelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TravelComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TravelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/travel/travel.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, ParamMap } from '@angular/router';
+import { PUBLIC_API_URL } from '../app.config';
+import { Travel, TravelId } from '../entities/travel';
+import { ApiService } from '../services/api.service';
+
+@Component({
+  selector: 'app-travel',
+  templateUrl: './travel.component.html',
+  styleUrls: ['./travel.component.css']
+})
+export class TravelComponent implements OnInit {
+
+  travelId: TravelId;
+  travel: Travel;
+
+  constructor(
+    private apiService: ApiService,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      this.travelId = this.route.snapshot.paramMap.get('id') as unknown as TravelId;
+
+      this.apiService.call<Travel>(PUBLIC_API_URL + '/travel', { travelId: this.travelId })
+        .subscribe(res => {
+          if (res.success) {
+            this.travel = res.data;
+          }
+          else {
+            console.error('Error getting travel ' + this.travelId + ': ' + res.error);
+          }
+        });
+    });
+  }
+
+}