Implements item list

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;

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,

src/app/items/item-list/item-list.component.html

@@ -0,0 +1,10 @@
+<h1>Items!</h1>
+<mat-accordion *ngIf="items.length > 0">
+	<mat-expansion-panel *ngFor="let item of items">
+		<mat-expansion-panel-header>
+			{{item.name}}
+		</mat-expansion-panel-header>
+		<p>{{item.description}}</p>
+	</mat-expansion-panel>
+</mat-accordion>
+<p *ngIf = "items.length <= 0">No items yet!</p>

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<Owner>;
+	public itemsUpdate: Observable<Item[]>;
+
+	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(){
+	}
+}
+

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 { Subject, BehaviorSubject, Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 
 @Injectable({providedIn: 'root'})
 
 export class ItemService{
-	private items: Item[] = [];
+	private dataStore: { items: Item[] } = { items: [] } ;
-	private itemUpdated = new Subject<Item[]>();
+	private _itemsUpdated: BehaviorSubject<Item[]> = new BehaviorSubject(this.dataStore.items);
+	public readonly itemsUpdated: Observable<Item[]> = 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');
+			}
+		});
 	}
 }

src/app/viewer/viewer.component.html

@@ -4,3 +4,4 @@
 	<br>
 	{{addrUpdate | async}}
 </div>
+<app-item-list></app-item-list>

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