From 22c89b9d4f8a824076a5a42bf5e05dd1adec69e9 Mon Sep 17 00:00:00 2001 From: Rene Vergara Date: Thu, 21 Oct 2021 16:23:33 -0500 Subject: [PATCH] Implements item list --- backend/app.js | 18 +++++++++ src/app/app.module.ts | 9 ++--- .../items/item-list/item-list.component.html | 10 +++++ .../items/item-list/item-list.component.ts | 38 +++++++++++++++++++ src/app/items/items.service.ts | 20 ++++++++-- src/app/viewer/viewer.component.html | 1 + src/app/viewer/viewer.component.ts | 1 + 7 files changed, 87 insertions(+), 10 deletions(-) create mode 100644 src/app/items/item-list/item-list.component.html create mode 100644 src/app/items/item-list/item-list.component.ts diff --git a/backend/app.js b/backend/app.js index cecf6b4..cde8294 100644 --- a/backend/app.js +++ b/backend/app.js @@ -176,4 +176,22 @@ app.post('/api/addownername', (req, res, next) => { }); }); +app.get('/api/getitems', (req, res, next) => { + console.log('Get: /api/getitems'); + const items = itemmodel.find({address: req.body.address}).then((documents) => { + if(documents.length > 0){ + //console.log(documents); + res.status(200).json({ + message: 'items found!', + items: documents + }); + } else { + res.status(204).json({ + message: 'items not found!', + items: [] + }); + } + }); +}); + module.exports = app; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7d3be8b..2426277 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,24 +11,21 @@ import { MatDialogModule } from '@angular/material/dialog'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -//import { PostCreateComponent } from './posts/post-create/post-create.component'; import { HeaderComponent } from './header/header.component'; -//import { PostListComponent } from './posts/post-list/post-list.component'; -//import { PostService } from './posts/posts.service'; import { ViewerComponent } from './viewer/viewer.component'; import { LoginComponent } from './login/login.component'; +import { ItemListComponent } from './items/item-list/item-list.component'; //import { NameDialogComponent } from './namedialog/namedialog.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ AppComponent, - //PostCreateComponent, HeaderComponent, ViewerComponent, - LoginComponent, + ItemListComponent, + LoginComponent //NameDialogComponent, - //PostListComponent ], imports: [ BrowserModule, diff --git a/src/app/items/item-list/item-list.component.html b/src/app/items/item-list/item-list.component.html new file mode 100644 index 0000000..2bcb03d --- /dev/null +++ b/src/app/items/item-list/item-list.component.html @@ -0,0 +1,10 @@ +

Items!

+ + + + {{item.name}} + +

{{item.description}}

+
+
+

No items yet!

diff --git a/src/app/items/item-list/item-list.component.ts b/src/app/items/item-list/item-list.component.ts new file mode 100644 index 0000000..5620e7a --- /dev/null +++ b/src/app/items/item-list/item-list.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Item } from '../item.model'; +import { Owner } from '../../owner.model'; +import { UserService } from '../../user.service'; +import { ItemService } from '../items.service'; + + +@Component({ + selector: 'app-item-list', + templateUrl: './item-list.component.html' +}) + +export class ItemListComponent{ + public items: Item[] = []; + private owner: Owner = {_id: '', name: '', address: ''}; + public ownerUpdate: Observable; + public itemsUpdate: Observable; + + constructor( + itemService: ItemService, + userService: UserService + ) { + this.ownerUpdate = userService.ownerUpdate; + this.itemsUpdate = itemService.itemsUpdated; + this.ownerUpdate.subscribe((owner) => { + this.owner = owner; + itemService.getItems(this.owner.address); + this.itemsUpdate.subscribe((items) => { + this.items = items; + }); + }); + } + + ngOnInit(){ + } +} + diff --git a/src/app/items/items.service.ts b/src/app/items/items.service.ts index 901cf20..1db5d59 100644 --- a/src/app/items/items.service.ts +++ b/src/app/items/items.service.ts @@ -1,17 +1,29 @@ import { Item } from './item.model'; import { Injectable } from '@angular/core'; -import { Subject } from 'rxjs'; -import { HttpClient } from '@angular/common/http'; +import { Subject, BehaviorSubject, Observable } from 'rxjs'; +import { HttpClient, HttpParams } from '@angular/common/http'; @Injectable({providedIn: 'root'}) export class ItemService{ - private items: Item[] = []; - private itemUpdated = new Subject(); + private dataStore: { items: Item[] } = { items: [] } ; + private _itemsUpdated: BehaviorSubject = new BehaviorSubject(this.dataStore.items); + public readonly itemsUpdated: Observable = this._itemsUpdated.asObservable(); constructor(private http: HttpClient){ } getItems(addr: string){ + const params = new HttpParams().append('address', addr); + let obs = this.http.get<{message: string, items: any}>('http://localhost:3000/api/getitems', { headers:{}, params: params, observe: 'response'}); + + obs.subscribe((ItemDataResponse) => { + if (ItemDataResponse.status == 200 ) { + this.dataStore.items = ItemDataResponse.body!.items; + this._itemsUpdated.next(Object.assign({},this.dataStore).items); + } else { + console.log('No items found'); + } + }); } } diff --git a/src/app/viewer/viewer.component.html b/src/app/viewer/viewer.component.html index dee0d4b..d0739d4 100644 --- a/src/app/viewer/viewer.component.html +++ b/src/app/viewer/viewer.component.html @@ -4,3 +4,4 @@
{{addrUpdate | async}} + diff --git a/src/app/viewer/viewer.component.ts b/src/app/viewer/viewer.component.ts index eff7420..d745e33 100644 --- a/src/app/viewer/viewer.component.ts +++ b/src/app/viewer/viewer.component.ts @@ -3,6 +3,7 @@ import { CanActivate, Router, RouterStateSnapshot, ActivatedRouteSnapshot } from import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; import { UserService } from '../user.service'; import { FullnodeService } from '../fullnode.service'; +import { ItemService } from '../items/items.service'; //import { NameDialogComponent } from '../namedialog/namedialog.component'; // TODO: connect dialog import { Subscription, Observable } from 'rxjs';