diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index ca2cc4b8c503a261d1ca4b9729d73f328f1be816..498abb33f3b3e938c1e3b78f45a9d964f42b35d2 100644 --- a/client/src/app/app-routing.module.ts +++ b/client/src/app/app-routing.module.ts @@ -2,9 +2,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { PostDetailsComponent } from './posts/post-details/post-details.component'; import { PostFormComponent } from './posts/post-form/post-form.component'; +import { PostListComponent } from './posts/post-list/post-list.component'; const routes: Routes = [ { path: 'annonse/ny', component: PostFormComponent }, + { path: 'annonse', component: PostListComponent }, { path: 'annonse/:id', component: PostDetailsComponent } ]; diff --git a/client/src/app/posts/post-list/post-list.component.html b/client/src/app/posts/post-list/post-list.component.html new file mode 100644 index 0000000000000000000000000000000000000000..49aa9a1fd89cf255bf9400e1339c1ad261950e86 --- /dev/null +++ b/client/src/app/posts/post-list/post-list.component.html @@ -0,0 +1,3 @@ +<div> + <app-post-thumbnail *ngFor="let post of allPosts" [post]="post"></app-post-thumbnail> +</div> diff --git a/client/src/app/posts/post-list/post-list.component.scss b/client/src/app/posts/post-list/post-list.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/client/src/app/posts/post-list/post-list.component.spec.ts b/client/src/app/posts/post-list/post-list.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..2d39c24944619ae92c499e826d476de93f005a4c --- /dev/null +++ b/client/src/app/posts/post-list/post-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PostListComponent } from './post-list.component'; + +describe('PostListComponent', () => { + let component: PostListComponent; + let fixture: ComponentFixture<PostListComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PostListComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PostListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/client/src/app/posts/post-list/post-list.component.ts b/client/src/app/posts/post-list/post-list.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..2bd3302dcdd9662c616bd358e90b1e1f7f72240f --- /dev/null +++ b/client/src/app/posts/post-list/post-list.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { Post } from 'src/app/models/post.model'; +import { PostService } from '../post.service'; + +@Component({ + selector: 'app-post-list', + templateUrl: './post-list.component.html', + styleUrls: ['./post-list.component.scss'] +}) +export class PostListComponent implements OnInit { + + allPosts: Array<Post> = [] + + constructor(private postService: PostService) { } + + ngOnInit(): void { + // Gets all posts from database, and displays them + this.postService.getAllPosts().then(posts => { + this.allPosts = posts; + }).catch(error => { + console.log(error); + }); + } + +} diff --git a/client/src/app/posts/post-thumbnail/post-thumbnail.component.html b/client/src/app/posts/post-thumbnail/post-thumbnail.component.html new file mode 100644 index 0000000000000000000000000000000000000000..5dc8e9f282270157d3b479851bfd3e3fdde921b1 --- /dev/null +++ b/client/src/app/posts/post-thumbnail/post-thumbnail.component.html @@ -0,0 +1 @@ +<p (click)="goToPost()">{{post.getTitle}}</p> diff --git a/client/src/app/posts/post-thumbnail/post-thumbnail.component.scss b/client/src/app/posts/post-thumbnail/post-thumbnail.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/client/src/app/posts/post-thumbnail/post-thumbnail.component.spec.ts b/client/src/app/posts/post-thumbnail/post-thumbnail.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..ea7282db0c1f44a777d0bbf58a7ca927de9d6fd7 --- /dev/null +++ b/client/src/app/posts/post-thumbnail/post-thumbnail.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PostThumbnailComponent } from './post-thumbnail.component'; + +describe('PostThumbnailComponent', () => { + let component: PostThumbnailComponent; + let fixture: ComponentFixture<PostThumbnailComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PostThumbnailComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PostThumbnailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/client/src/app/posts/post-thumbnail/post-thumbnail.component.ts b/client/src/app/posts/post-thumbnail/post-thumbnail.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..207940e9aa3d6c09bafe45cef88daa7e9050baaa --- /dev/null +++ b/client/src/app/posts/post-thumbnail/post-thumbnail.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Router } from '@angular/router'; +import { Post } from 'src/app/models/post.model'; + +@Component({ + selector: 'app-post-thumbnail', + templateUrl: './post-thumbnail.component.html', + styleUrls: ['./post-thumbnail.component.scss'] +}) +export class PostThumbnailComponent implements OnInit { + + @Input() + post: Post = new Post(); + + constructor(private router: Router) { } + + ngOnInit(): void { + } + + goToPost() { + this.router.navigateByUrl("annonse/" + this.post.getId); + } +} diff --git a/client/src/app/posts/post.module.ts b/client/src/app/posts/post.module.ts index ed65b10758caec753a7ef2ff70c97e27bd5d1fae..cb644f8fa2f88bad7645ba04604115aa406a2da0 100644 --- a/client/src/app/posts/post.module.ts +++ b/client/src/app/posts/post.module.ts @@ -4,13 +4,17 @@ import { PostFormComponent } from './post-form/post-form.component'; import { SharedModule } from '../shared/shared.module'; import { FormsModule } from '@angular/forms'; import { PostDetailsComponent } from './post-details/post-details.component'; +import { PostListComponent } from './post-list/post-list.component'; +import { PostThumbnailComponent } from './post-thumbnail/post-thumbnail.component'; @NgModule({ declarations: [ PostFormComponent, - PostDetailsComponent + PostDetailsComponent, + PostListComponent, + PostThumbnailComponent ], imports: [ CommonModule, diff --git a/client/src/app/posts/post.service.ts b/client/src/app/posts/post.service.ts index 2199c9683d411ba3a15a79623897bc8d89aea5d9..e28949586aaf3f30b7c0a8441aae4cc882aa2374 100644 --- a/client/src/app/posts/post.service.ts +++ b/client/src/app/posts/post.service.ts @@ -13,6 +13,41 @@ export class PostService { constructor(private http: HttpClient) { } + /** + * Get all posts from database. + */ + getAllPosts(): Promise<Array<Post>> { + return new Promise<Array<Post>>( + (resolve, reject) => { + this.get_all_posts().subscribe((data: any) => { + try { + let outputPosts = []; + for (let post of data.data) { + outputPosts.push(new Post(post)); + + if (post.getId == 0) { + reject("Could not deserialize Post"); + return; + } + } + + resolve(outputPosts); + } catch (err: any) { + reject(err); + } + }, + (err: any) => { + console.log(err.message); + reject(err); + }); + } + ); + } + + private get_all_posts() { + return this.http.get(this.postUrl); + } + /** * Get post from database by id. */