From d3041cf03dfaac5951d68cd302a067d866b5ed96 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Tue, 4 Jun 2024 13:55:26 +0200 Subject: [PATCH] Styling publications on home page. --- .../src/main/resources/application-local.yml | 4 +- frontend/proxy.conf.json | 4 ++ .../publications/model/author.ts | 5 +++ .../publications/model/publication.ts | 14 +++++++ .../publications/publication.rest-service.ts | 15 +++++++ .../src/app/pages/home/home.component.html | 16 ++++++- .../src/app/pages/home/home.component.scss | 42 +++++++++++++++++++ frontend/src/app/pages/home/home.component.ts | 27 ++++++++++-- frontend/src/app/pages/home/home.service.ts | 34 +++++++++++++++ 9 files changed, 154 insertions(+), 7 deletions(-) create mode 100644 frontend/src/app/core/rest-services/publications/model/author.ts create mode 100644 frontend/src/app/core/rest-services/publications/model/publication.ts create mode 100644 frontend/src/app/core/rest-services/publications/publication.rest-service.ts create mode 100644 frontend/src/app/pages/home/home.service.ts diff --git a/backend/codiki-launcher/src/main/resources/application-local.yml b/backend/codiki-launcher/src/main/resources/application-local.yml index 5c2fa76..9da8a1d 100644 --- a/backend/codiki-launcher/src/main/resources/application-local.yml +++ b/backend/codiki-launcher/src/main/resources/application-local.yml @@ -1,7 +1,7 @@ application: pictures: - path: /Users/florian_thierry/Documents/Developpement/codiki-hexa/pictures-folder/ - temp-path : /Users/florian_thierry/Documents/Developpement/codiki-hexa/pictures-folder/temp/ + path: /Users/florian_thierry/Documents/Developpement/codiki-hexa/backend/pictures-folder/ + temp-path : /Users/florian_thierry/Documents/Developpement/codiki-hexa/backend/pictures-folder/temp/ server: port: 8987 diff --git a/frontend/proxy.conf.json b/frontend/proxy.conf.json index bf6d0e0..eac16c8 100644 --- a/frontend/proxy.conf.json +++ b/frontend/proxy.conf.json @@ -2,6 +2,10 @@ "/api": { "target": "http://localhost:8987", "secure": false + }, + "/pictures": { + "target": "http://localhost:8987/api", + "secure": false } } \ No newline at end of file diff --git a/frontend/src/app/core/rest-services/publications/model/author.ts b/frontend/src/app/core/rest-services/publications/model/author.ts new file mode 100644 index 0000000..84fc255 --- /dev/null +++ b/frontend/src/app/core/rest-services/publications/model/author.ts @@ -0,0 +1,5 @@ +export interface Author { + id: string; + name: string; + image: string; +} \ No newline at end of file diff --git a/frontend/src/app/core/rest-services/publications/model/publication.ts b/frontend/src/app/core/rest-services/publications/model/publication.ts new file mode 100644 index 0000000..3ab2c16 --- /dev/null +++ b/frontend/src/app/core/rest-services/publications/model/publication.ts @@ -0,0 +1,14 @@ +import { Author } from "./author"; + +export interface Publication { + id: string; + key: string; + title: string; + text: string; + parsedText: string; + description: string; + creationDate: Date; + illustrationId: string; + categoryId: string; + author: Author; +} \ No newline at end of file diff --git a/frontend/src/app/core/rest-services/publications/publication.rest-service.ts b/frontend/src/app/core/rest-services/publications/publication.rest-service.ts new file mode 100644 index 0000000..d16a9cf --- /dev/null +++ b/frontend/src/app/core/rest-services/publications/publication.rest-service.ts @@ -0,0 +1,15 @@ +import { HttpClient } from '@angular/common/http'; +import { Injectable, inject } from '@angular/core'; +import { lastValueFrom } from 'rxjs'; +import { Publication } from './model/publication'; + +@Injectable({ + providedIn: 'root' +}) +export class PublicationRestService { + private httpClient = inject(HttpClient); + + getLatest(): Promise { + return lastValueFrom(this.httpClient.get('/api/publications/latest')); + } +} diff --git a/frontend/src/app/pages/home/home.component.html b/frontend/src/app/pages/home/home.component.html index 26e0443..7b8c71d 100644 --- a/frontend/src/app/pages/home/home.component.html +++ b/frontend/src/app/pages/home/home.component.html @@ -1 +1,15 @@ -

Welcome to Codiki application!

+

Last articles

+
+ + +

{{publication.title}}

+

{{publication.description}}

+
+ + Publication posted by {{publication.author.name}} + + ({{publication.creationDate}}) + +
+ +
\ No newline at end of file diff --git a/frontend/src/app/pages/home/home.component.scss b/frontend/src/app/pages/home/home.component.scss index 01013a5..d55f53a 100644 --- a/frontend/src/app/pages/home/home.component.scss +++ b/frontend/src/app/pages/home/home.component.scss @@ -3,4 +3,46 @@ flex-direction: column; justify-content: center; align-items: center; + + .publication-container { + display: flex; + flex-direction: column; + gap: 2em; + max-width: 40em; + margin: auto; + + .publication { + display: flex; + flex-direction: column; + border-radius: .5em; + box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); + + img { + object-fit: cover; + height: 25em; + border-radius: .5em .5em 0 0; + } + + h1 { + font-size: 2.4em; + } + + h2 { + font-size: 1.6em; + } + + .footer { + display: flex; + flex-direction: row; + align-items: center; + + img { + border-radius: 10em; + width: 5em; + height: 5em; + object-fit: cover; + } + } + } + } } \ No newline at end of file diff --git a/frontend/src/app/pages/home/home.component.ts b/frontend/src/app/pages/home/home.component.ts index deb69c4..e66c801 100644 --- a/frontend/src/app/pages/home/home.component.ts +++ b/frontend/src/app/pages/home/home.component.ts @@ -1,12 +1,31 @@ -import { Component } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; +import { HomeService } from './home.service'; +import { Observable } from 'rxjs'; +import { Publication } from '../../core/rest-services/publications/model/publication'; +import { RouterModule } from '@angular/router'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'app-home', standalone: true, - imports: [], + imports: [CommonModule, RouterModule, MatTooltipModule], templateUrl: './home.component.html', - styleUrl: './home.component.scss' + styleUrl: './home.component.scss', + providers: [HomeService] }) -export class HomeComponent { +export class HomeComponent implements OnInit { + private homeService = inject(HomeService); + get isLoading$(): Observable { + return this.homeService.isLoading$; + } + + get publications$(): Observable { + return this.homeService.publications$; + } + + ngOnInit(): void { + this.homeService.startLatestPublicationsRetrieving(); + } } diff --git a/frontend/src/app/pages/home/home.service.ts b/frontend/src/app/pages/home/home.service.ts new file mode 100644 index 0000000..84d0ea5 --- /dev/null +++ b/frontend/src/app/pages/home/home.service.ts @@ -0,0 +1,34 @@ +import { Injectable, inject } from "@angular/core"; +import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; +import { BehaviorSubject, Observable } from "rxjs"; +import { MatSnackBar } from "@angular/material/snack-bar" +import { Publication } from "../../core/rest-services/publications/model/publication"; + +@Injectable() +export class HomeService { + private publicationRestService = inject(PublicationRestService); + private snackBar = inject(MatSnackBar); + + private publicationsSubject = new BehaviorSubject([]); + private isLoadingSubject = new BehaviorSubject(false); + + get isLoading$(): Observable { + return this.isLoadingSubject.asObservable(); + } + + get publications$(): Observable { + return this.publicationsSubject.asObservable(); + } + + startLatestPublicationsRetrieving(): void { + this.isLoadingSubject.next(true); + + this.publicationRestService.getLatest() + .then(publications => this.publicationsSubject.next(publications)) + .catch(error => { + this.snackBar.open('An error occurred while retrieving latest publications...'); + console.error('An error occurred while retrieving latest publications...', error); + }) + .finally(() => this.isLoadingSubject.next(false)); + } +} \ No newline at end of file