From 2536c3bc7e480cdf1657f0e1c701f6eb84e48de8 Mon Sep 17 00:00:00 2001 From: Angel Baro Date: Wed, 8 May 2024 17:52:50 +0200 Subject: [PATCH 1/8] Location.ts file created --- src/app/location/location.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/app/location/location.ts diff --git a/src/app/location/location.ts b/src/app/location/location.ts new file mode 100644 index 0000000..d916a33 --- /dev/null +++ b/src/app/location/location.ts @@ -0,0 +1,18 @@ +import { HateoasResource, Resource } from '@lagoshny/ngx-hateoas-client'; + +@HateoasResource('location') +export class Location extends Resource { + id: number; + address: string; + latitude: number; + longitude: number; + province: string; + city: string; + postalcode:number; + uri: string; + + constructor(values: object = {}) { + super(); + Object.assign(this as any, values); + } +} From 8360f6de84bc421729d72db9bab909cbef85d922 Mon Sep 17 00:00:00 2001 From: Angel Baro Date: Wed, 8 May 2024 18:14:45 +0200 Subject: [PATCH 2/8] Created location.service.ts file --- src/app/location/location.service.ts | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/app/location/location.service.ts diff --git a/src/app/location/location.service.ts b/src/app/location/location.service.ts new file mode 100644 index 0000000..b76b6c6 --- /dev/null +++ b/src/app/location/location.service.ts @@ -0,0 +1,23 @@ +import { Injectable } from "@angular/core"; +import { Observable } from "rxjs/internal/Observable"; +import { HateoasResourceOperation, ResourceCollection } from "@lagoshny/ngx-hateoas-client"; +import { Location } from "./location"; + +@Injectable({providedIn: "root"}) +export class LocationService extends HateoasResourceOperation { + + constructor() { + super(Location); + } + + public findLocationByAddressAndProvinceAndCityAndPostalCode(address:string, province:string, city:string, postalcode:number): Observable> { + const params = { + address: address, + province: province, + city: city, + postalcode: postalcode.toString() + }; + return this.searchCollection('findLocationByAddressAndProvinceAndCityAndPostalCode', {params}); + + } +} From da5b7c83031152942f77dc8a3440d47fae0d1f69 Mon Sep 17 00:00:00 2001 From: Angel Baro Date: Wed, 8 May 2024 18:26:01 +0200 Subject: [PATCH 3/8] Created the location-list.component.ts for listing the distinct locations available --- .../location-list/location-list.component.ts | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/app/location/location-list/location-list.component.ts diff --git a/src/app/location/location-list/location-list.component.ts b/src/app/location/location-list/location-list.component.ts new file mode 100644 index 0000000..809d17f --- /dev/null +++ b/src/app/location/location-list/location-list.component.ts @@ -0,0 +1,38 @@ +import { Router } from '@angular/router'; +import { Component, OnInit } from '@angular/core'; +import { LocationService } from '../location.service'; +import { Location } from '../location'; +import { PagedResourceCollection } from '@lagoshny/ngx-hateoas-client'; + +@Component({ + selector: 'app-user-list', + templateUrl: './user-list.component.html' +}) +export class LocationListComponent implements OnInit { + public locations: Location[] = []; + public pageSize = 5; + public page = 1; + public totalLocations = 0; + + constructor( + public router: Router, + private locationService: LocationService) { + } + + ngOnInit(): void { + this.locationService.getPage({ pageParams: { size: this.pageSize }, sort: { id: 'ASC' } }).subscribe( + (page: PagedResourceCollection) => { + this.locations = page.resources; + this.totalLocations = page.totalElements; + }); + } + + changePage(): void { + this.locationService.getPage({ pageParams: { page: this.page - 1, size: this.pageSize }, sort: { id: 'ASC' } }).subscribe( + (page: PagedResourceCollection) => this.locations = page.resources); + } + + detail(location: Location): void { + this.router.navigate(['locations', location.id]); + } +} From 4b89c015971c16ab00ad003dc69a9b121079b382 Mon Sep 17 00:00:00 2001 From: Angel Baro Date: Wed, 8 May 2024 18:26:37 +0200 Subject: [PATCH 4/8] Added the LocationListComponent to the app module --- src/app/app.module.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b813871..376b88e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,7 @@ import {AuthenticationBasicService} from './login-basic/authentication-basic.ser import {LoggedInGuard} from './login-basic/loggedin.guard'; import {UserService} from './user/user.service'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; +import {LocationListComponent} from "./location/location-list/location-list.component"; @NgModule({ declarations: [ @@ -37,6 +38,7 @@ import { provideAnimationsAsync } from '@angular/platform-browser/animations/asy UserEditComponent, UserDeleteComponent, UserSearchComponent, + LocationListComponent ], imports: [ BrowserModule, From bc474cb2571dfa0bb2f7b9692866b89c39032f81 Mon Sep 17 00:00:00 2001 From: Angel Baro Date: Wed, 8 May 2024 18:37:11 +0200 Subject: [PATCH 5/8] Added the search bar component for location --- src/app/app.module.ts | 4 ++- .../location-search.component.ts | 25 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 src/app/location/location-search/location-search.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 376b88e..3976c0e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ import {LoggedInGuard} from './login-basic/loggedin.guard'; import {UserService} from './user/user.service'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import {LocationListComponent} from "./location/location-list/location-list.component"; +import {LocationSearchComponent} from "./location/location-search/location-search.component"; @NgModule({ declarations: [ @@ -38,7 +39,8 @@ import {LocationListComponent} from "./location/location-list/location-list.comp UserEditComponent, UserDeleteComponent, UserSearchComponent, - LocationListComponent + LocationListComponent, + LocationSearchComponent ], imports: [ BrowserModule, diff --git a/src/app/location/location-search/location-search.component.ts b/src/app/location/location-search/location-search.component.ts new file mode 100644 index 0000000..4fe4a4e --- /dev/null +++ b/src/app/location/location-search/location-search.component.ts @@ -0,0 +1,25 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { LocationService } from '../location.service'; +import { Location } from '../location'; +import { Observable, of, OperatorFunction } from 'rxjs'; +import { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'; +import { ResourceCollection } from '@lagoshny/ngx-hateoas-client'; + +@Component({ + selector: 'app-location-search', + templateUrl: './location-search.component.html' +}) + +export class LocationSearchComponent { + @Output() emitResults: EventEmitter = new EventEmitter(); + searchFailed = false; + searching = false; + + constructor(private locationService: LocationService) { + } + + + select(item: any): void { + this.emitResults.emit(item as Location); + } +} From 3af00582fdcbf54880b1b1749a6fd120223b352e Mon Sep 17 00:00:00 2001 From: Angel Baro Date: Wed, 15 May 2024 18:03:59 +0200 Subject: [PATCH 6/8] Added the list page --- src/app/app-routing.module.ts | 4 ++-- src/app/app.module.ts | 10 +++++---- .../location-list.component.html | 21 +++++++++++++++++++ .../location-list/location-list.component.ts | 7 ++++--- .../location-search.component.html | 11 ++++++++++ .../location-search.component.ts | 20 +++++++++++++++++- src/app/location/location.service.ts | 16 ++++++++++++++ src/app/navbar/navbar.component.html | 9 ++++++++ 8 files changed, 88 insertions(+), 10 deletions(-) create mode 100644 src/app/location/location-list/location-list.component.html create mode 100644 src/app/location/location-search/location-search.component.html diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 823cd78..3767501 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,7 +8,7 @@ import { UserDetailComponent } from './user/user-detail/user-detail.component'; import { UserRegisterComponent } from './user/user-register/user-register.component'; import { UserEditComponent } from './user/user-edit/user-edit.component'; import { UserDeleteComponent } from './user/user-delete/user-delete.component'; -import { ShelterListComponent } from './shelter/shelter-list/shelter-list.component' +import {LocationListComponent} from "./location/location-list/location-list.component"; const routes: Routes = [ { path: 'users/create', component: UserRegisterComponent}, @@ -16,10 +16,10 @@ const routes: Routes = [ { path: 'users/:id/edit', component: UserEditComponent, canActivate: [LoggedInGuard]}, { path: 'users/:id', component: UserDetailComponent, canActivate: [LoggedInGuard]}, { path: 'users', component: UserListComponent, canActivate: [LoggedInGuard]}, + { path: 'locations', component: LocationListComponent, canActivate: [LoggedInGuard]}, { path: 'about', component: AboutComponent}, { path: '404', component: NotFoundComponent}, { path: '', redirectTo: 'about', pathMatch: 'full'}, - { path: 'shelters', component: ShelterListComponent}, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3976c0e..384f53a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,9 +23,11 @@ import {HttpErrorInterceptor} from './error-handler/http-error-interceptor'; import {AuthenticationBasicService} from './login-basic/authentication-basic.service'; import {LoggedInGuard} from './login-basic/loggedin.guard'; import {UserService} from './user/user.service'; -import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; -import {LocationListComponent} from "./location/location-list/location-list.component"; -import {LocationSearchComponent} from "./location/location-search/location-search.component"; + +import {LocationService} from './location/location.service' +import {LocationListComponent} from './location/location-list/location-list.component'; +import {LocationSearchComponent} from './location/location-search/location-search.component'; + @NgModule({ declarations: [ @@ -59,7 +61,7 @@ import {LocationSearchComponent} from "./location/location-search/location-searc providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true }, - AuthenticationBasicService, LoggedInGuard, UserService, provideAnimationsAsync() + AuthenticationBasicService, LoggedInGuard, UserService, LocationService ], bootstrap: [AppComponent] }) diff --git a/src/app/location/location-list/location-list.component.html b/src/app/location/location-list/location-list.component.html new file mode 100644 index 0000000..90003e3 --- /dev/null +++ b/src/app/location/location-list/location-list.component.html @@ -0,0 +1,21 @@ + + +
+
+
+
+
Id
+ {{location.id}} +
+
+
Address
+

{{location.address}}

+
+
+
+
+ + + diff --git a/src/app/location/location-list/location-list.component.ts b/src/app/location/location-list/location-list.component.ts index 809d17f..d909edb 100644 --- a/src/app/location/location-list/location-list.component.ts +++ b/src/app/location/location-list/location-list.component.ts @@ -1,12 +1,13 @@ + import { Router } from '@angular/router'; import { Component, OnInit } from '@angular/core'; import { LocationService } from '../location.service'; -import { Location } from '../location'; import { PagedResourceCollection } from '@lagoshny/ngx-hateoas-client'; +import {Location} from "../location"; @Component({ - selector: 'app-user-list', - templateUrl: './user-list.component.html' + selector: 'app-location-list', + templateUrl: './location-list.component.html' }) export class LocationListComponent implements OnInit { public locations: Location[] = []; diff --git a/src/app/location/location-search/location-search.component.html b/src/app/location/location-search/location-search.component.html new file mode 100644 index 0000000..441a363 --- /dev/null +++ b/src/app/location/location-search/location-search.component.html @@ -0,0 +1,11 @@ +
+ +
Sorry, suggestions could not be loaded.
+
+ + +
+
{{r.email}}
+ยบ diff --git a/src/app/location/location-search/location-search.component.ts b/src/app/location/location-search/location-search.component.ts index 4fe4a4e..b31088f 100644 --- a/src/app/location/location-search/location-search.component.ts +++ b/src/app/location/location-search/location-search.component.ts @@ -1,9 +1,10 @@ + import { Component, EventEmitter, Output } from '@angular/core'; import { LocationService } from '../location.service'; -import { Location } from '../location'; import { Observable, of, OperatorFunction } from 'rxjs'; import { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'; import { ResourceCollection } from '@lagoshny/ngx-hateoas-client'; +import {Location} from "../location"; @Component({ selector: 'app-location-search', @@ -18,6 +19,23 @@ export class LocationSearchComponent { constructor(private locationService: LocationService) { } + autocomplete: OperatorFunction = (text$: Observable) => + text$.pipe( + debounceTime(500), + distinctUntilChanged(), + tap(() => this.searching = true), + switchMap(term => term.length < 3 ? of([]) : + this.locationService.findById(term).pipe( + map((collection: ResourceCollection) => collection.resources), + tap(() => this.searchFailed = false), + catchError(() => { + this.searchFailed = true; + return of([]); + }) + ) + ), + tap(() => this.searching = false ) + ) select(item: any): void { this.emitResults.emit(item as Location); diff --git a/src/app/location/location.service.ts b/src/app/location/location.service.ts index b76b6c6..9c720e5 100644 --- a/src/app/location/location.service.ts +++ b/src/app/location/location.service.ts @@ -20,4 +20,20 @@ export class LocationService extends HateoasResourceOperation { return this.searchCollection('findLocationByAddressAndProvinceAndCityAndPostalCode', {params}); } + + public findById(id: string): Observable> { + return this.searchCollection("findById", { params: { id: id } }) + } + + public findByPostalCode(postalCode: string): Observable> { + return this.searchCollection("findByPostalCode", { params: { postalCode: postalCode } }) + } + + public findByAdress(adress: string): Observable> { + return this.searchCollection("findByAdress", { params: { adress: adress } }) + } + } + + + diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html index 55e04f2..de32b99 100644 --- a/src/app/navbar/navbar.component.html +++ b/src/app/navbar/navbar.component.html @@ -1,3 +1,4 @@ +