florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Convert observables to signals.

Browse Source
This commit is contained in:
Florian THIERRY
2026-02-03 11:00:29 +01:00
parent a2de24fd93
commit c91bb7b720
100 changed files with 2998 additions and 3065 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/app.component.spec.ts
View File

@@ -1,5 +1,5 @@
import { TestBed } from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import { AppComponent } from './app.component'; import {AppComponent} from './app.component';
describe('AppComponent', () => { describe('AppComponent', () => {
beforeEach(async () => { beforeEach(async () => {

11
frontend/src/app/app.component.ts
View File

@@ -1,8 +1,7 @@
import {Component} from '@angular/core';
import { Component } from '@angular/core'; import {RouterOutlet} from '@angular/router';
import { RouterOutlet } from '@angular/router'; import {HeaderComponent} from './components/header/header.component';
import { HeaderComponent } from './components/header/header.component'; import {FooterComponent} from './components/footer/footer.component';
import { FooterComponent } from './components/footer/footer.component';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@@ -10,7 +9,7 @@ import { FooterComponent } from './components/footer/footer.component';
RouterOutlet, RouterOutlet,
HeaderComponent, HeaderComponent,
FooterComponent FooterComponent
], ],
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrl: './app.component.scss' styleUrl: './app.component.scss'
}) })

16
frontend/src/app/app.config.ts
View File

@@ -1,11 +1,11 @@
import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core'; import {ApplicationConfig, inject, provideAppInitializer} from '@angular/core';
import { provideRouter, withRouterConfig } from '@angular/router'; import {provideRouter, withRouterConfig} from '@angular/router';
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
import { routes } from './app.routes'; import {routes} from './app.routes';
import { JwtInterceptor } from './core/interceptor/jwt.interceptor'; import {JwtInterceptor} from './core/interceptor/jwt.interceptor';
import { AuthenticationService } from './core/service/authentication.service'; import {AuthenticationService} from './core/service/authentication.service';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [ providers: [
@@ -18,7 +18,7 @@ export const appConfig: ApplicationConfig = {
), ),
provideAnimationsAsync(), provideAnimationsAsync(),
provideHttpClient(withInterceptorsFromDi()), provideHttpClient(withInterceptorsFromDi()),
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }, {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
provideAppInitializer(() => { provideAppInitializer(() => {
const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService)); const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService));
return initializerFn(); return initializerFn();

4
frontend/src/app/app.routes.ts
View File

@@ -1,5 +1,5 @@
import { Routes } from '@angular/router'; import {Routes} from '@angular/router';
import { alreadyAuthenticatedGuard } from './core/guard/already-authenticated.guard'; import {alreadyAuthenticatedGuard} from './core/guard/already-authenticated.guard';
export const routes: Routes = [ export const routes: Routes = [
{ {

4
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html
View File

@@ -1,5 +1,5 @@
<h1>{{title}}</h1> <h1>{{ title }}</h1>
<h2>{{description}}</h2> <h2>{{ description }}</h2>
<footer> <footer>
<button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n> <button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n>
No No

6
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, inject, Input } from "@angular/core"; import {Component, inject} from "@angular/core";
import { MatRippleModule } from "@angular/material/core"; import {MatRippleModule} from "@angular/material/core";
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
export interface ConfirmationDialogData { export interface ConfirmationDialogData {
title: string; title: string;

5
frontend/src/app/components/footer/footer.component.scss
View File

@@ -1,6 +1,6 @@
:host { :host {
background-color: #3f51b5; background-color: #3f51b5;
color: rgba(255,255,255,.6); color: rgba(255, 255, 255, .6);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
@@ -17,9 +17,10 @@
.copy-left { .copy-left {
transform: rotate(180deg); transform: rotate(180deg);
} }
a { a {
text-decoration: none; text-decoration: none;
color: rgba(255,255,255,.6); color: rgba(255, 255, 255, .6);
} }
mat-icon { mat-icon {

11
frontend/src/app/components/footer/footer.component.ts
View File

@@ -1,7 +1,7 @@
import { Component } from '@angular/core'; import {Component} from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import {MatTooltipModule} from '@angular/material/tooltip';
import { RouterModule } from '@angular/router'; import {RouterModule} from '@angular/router';
@Component({ @Component({
selector: 'app-footer', selector: 'app-footer',
@@ -9,4 +9,5 @@ import { RouterModule } from '@angular/router';
templateUrl: './footer.component.html', templateUrl: './footer.component.html',
styleUrl: './footer.component.scss' styleUrl: './footer.component.scss'
}) })
export class FooterComponent {} export class FooterComponent {
}

2
frontend/src/app/components/header/header.component.scss
View File

@@ -8,7 +8,7 @@ $headerHeight: 3.5em;
color: white; color: white;
position: relative; position: relative;
height: $headerHeight; height: $headerHeight;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
div { div {
display: flex; display: flex;

25
frontend/src/app/components/header/header.component.ts
View File

@@ -1,15 +1,14 @@
import {Component, inject} from '@angular/core';
import { Component, inject } from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms';
import { FormControl, ReactiveFormsModule } from '@angular/forms'; import {MatButtonModule} from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button'; import {MatRippleModule} from '@angular/material/core';
import { MatRippleModule } from '@angular/material/core'; import {MatIconModule} from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon'; import {MatMenuModule} from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu'; import {MatTooltipModule} from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip'; import {RouterModule} from '@angular/router';
import { RouterModule } from '@angular/router'; import {AuthenticationService} from '../../core/service/authentication.service';
import { AuthenticationService } from '../../core/service/authentication.service'; import {PublicationsSearchBarComponent} from '../publications-search-bar/publications-search-bar.component';
import { PublicationsSearchBarComponent } from '../publications-search-bar/publications-search-bar.component'; import {SideMenuComponent} from '../side-menu/side-menu.component';
import { SideMenuComponent } from '../side-menu/side-menu.component';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
@@ -23,7 +22,7 @@ import { SideMenuComponent } from '../side-menu/side-menu.component';
ReactiveFormsModule, ReactiveFormsModule,
RouterModule, RouterModule,
SideMenuComponent SideMenuComponent
], ],
templateUrl: './header.component.html', templateUrl: './header.component.html',
styleUrl: './header.component.scss' styleUrl: './header.component.scss'
}) })

4
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html
View File

@@ -14,9 +14,9 @@
<mat-form-field> <mat-form-field>
<mat-label i18n>Programming language</mat-label> <mat-label i18n>Programming language</mat-label>
<mat-select #programmingLanguageSelect formControlName="programmingLanguage"> <mat-select #programmingLanguageSelect formControlName="programmingLanguage">
@for(programmingLanguage of programmingLanguages; track programmingLanguage) { @for (programmingLanguage of programmingLanguages; track programmingLanguage) {
<mat-option [value]="programmingLanguage.code"> <mat-option [value]="programmingLanguage.code">
{{programmingLanguage.label}} {{ programmingLanguage.label }}
</mat-option> </mat-option>
} }
</mat-select> </mat-select>

18
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
View File

@@ -1,12 +1,12 @@
import { Component, inject } from "@angular/core"; import {Component, inject} from "@angular/core";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
import { MatRippleModule } from "@angular/material/core"; import {MatRippleModule} from "@angular/material/core";
import { MatDialogRef } from "@angular/material/dialog"; import {MatDialogRef} from "@angular/material/dialog";
import { MatFormFieldModule } from "@angular/material/form-field"; import {MatFormFieldModule} from "@angular/material/form-field";
import { MatIcon } from "@angular/material/icon"; import {MatIcon} from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input"; import {MatInputModule} from "@angular/material/input";
import { MatSelectModule } from '@angular/material/select'; import {MatSelectModule} from '@angular/material/select';
import { MatTooltip } from "@angular/material/tooltip"; import {MatTooltip} from "@angular/material/tooltip";
export interface ProgramingLanguage { export interface ProgramingLanguage {
code: string; code: string;

5
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
View File

@@ -15,8 +15,9 @@
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {
@if (pictures.length) { @if (pictures.length) {
@for(picture of pictures; track picture) { @for (picture of pictures; track picture) {
<img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration" i18n-matTooltip/> <img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration"
i18n-matTooltip/>
} }
} @else { } @else {
<h2 i18n>There is no any picture.</h2> <h2 i18n>There is no any picture.</h2>

4
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss
View File

@@ -32,13 +32,13 @@
object-fit: cover; object-fit: cover;
border-radius: 1em; border-radius: 1em;
opacity: .9; opacity: .9;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out; transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
} }
} }
} }

16
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts
View File

@@ -1,12 +1,12 @@
import {Component, inject, OnInit, signal} from "@angular/core"; import {Component, inject, OnInit, signal} from "@angular/core";
import { Picture } from "../../../core/rest-services/picture/model/picture"; import {Picture} from "../../../core/rest-services/picture/model/picture";
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatSnackBar } from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service"; import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service";
import { MatIcon } from "@angular/material/icon"; import {MatIcon} from "@angular/material/icon";
import { MatDialogRef } from "@angular/material/dialog"; import {MatDialogRef} from "@angular/material/dialog";
import {MatRippleModule} from '@angular/material/core'; import {MatRippleModule} from '@angular/material/core';
import { MatTooltip } from "@angular/material/tooltip"; import {MatTooltip} from "@angular/material/tooltip";
@Component({ @Component({
selector: 'app-picture-selection', selector: 'app-picture-selection',
@@ -40,7 +40,7 @@ export class PictureSelectionDialog implements OnInit {
} else { } else {
const errorMessage = $localize`An error occurred while loading pictures.`; const errorMessage = $localize`An error occurred while loading pictures.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
} }
}) })
.finally(() => { .finally(() => {
@@ -67,7 +67,7 @@ export class PictureSelectionDialog implements OnInit {
.catch(error => { .catch(error => {
const errorMessage = $localize`A technical error occurred while uploading your picture.`; const errorMessage = $localize`A technical error occurred while uploading your picture.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
}); });
} }
} }

12
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.service.ts
View File

@@ -1,8 +1,8 @@
import { inject, Injectable } from "@angular/core"; import {inject, Injectable} from "@angular/core";
import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service"; import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service";
import { MatSnackBar } from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
import { MatDialogRef } from "@angular/material/dialog"; import {MatDialogRef} from "@angular/material/dialog";
import { PictureSelectionDialog } from "./picture-selection-dialog.component"; import {PictureSelectionDialog} from "./picture-selection-dialog.component";
@Injectable() @Injectable()
export class PictureSelectionDialogService { export class PictureSelectionDialogService {
@@ -18,7 +18,7 @@ export class PictureSelectionDialogService {
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occured while uploading a picture...`; const errorMessage = $localize`An error occured while uploading a picture...`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
}); });
} }
} }

21
frontend/src/app/components/publication-edition/publication-edition.component.html
View File

@@ -1,6 +1,6 @@
<form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate> <form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
<header> <header>
<h1>{{title}}</h1> <h1>{{ title() }}</h1>
</header> </header>
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)"> <mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
@@ -10,11 +10,11 @@
<div> <div>
<mat-form-field> <mat-form-field>
<mat-label i18n>Title</mat-label> <mat-label i18n>Title</mat-label>
<input matInput type="text" formControlName="title" /> <input matInput type="text" formControlName="title"/>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label i18n>Description</mat-label> <mat-label i18n>Description</mat-label>
<input matInput type="text" formControlName="description" /> <input matInput type="text" formControlName="description"/>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label i18n>Category</mat-label> <mat-label i18n>Category</mat-label>
@@ -29,7 +29,8 @@
</div> </div>
<div class="picture-container"> <div class="picture-container">
<img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'" <img
[src]="publication().illustrationId.length ? '/api/pictures/' + publication().illustrationId : '/assets/images/default-picture.png'"
(click)="displayPictureSectionDialog()" (click)="displayPictureSectionDialog()"
matTooltip="Click to change illustration" matTooltip="Click to change illustration"
i18n-matTooltip/> i18n-matTooltip/>
@@ -103,24 +104,24 @@
<mat-tab label="Previewing" i18n-label> <mat-tab label="Previewing" i18n-label>
<div class="preview"> <div class="preview">
@if ((isPreviewing$ | async) === true) { @if (isPreviewing()) {
<div class="preview-loading"> <div class="preview-loading">
<h2 i18n>Preview is loading...</h2> <h2 i18n>Preview is loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
</div> </div>
} @else { } @else {
<img class="illustration" src="/api/pictures/{{ publication.illustrationId }}" /> <img class="illustration" src="/api/pictures/{{ publication().illustrationId }}"/>
<header> <header>
<h1>{{ publication.title }}</h1> <h1>{{ publication().title }}</h1>
<h2>{{ publication.description }}</h2> <h2>{{ publication().description }}</h2>
</header> </header>
<main [innerHTML]="publicationInEdition.parsedText"></main> <main [innerHTML]="publicationInEdition().parsedText"></main>
} }
</div> </div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
<footer> <footer>
<app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button> <app-submit-button [requestPending]="isSaving()" i18n>Save</app-submit-button>
<button type="button" <button type="button"
class="cod-button secondary" class="cod-button secondary"
(click)="goPreviousLocation()" (click)="goPreviousLocation()"

8
frontend/src/app/components/publication-edition/publication-edition.component.scss
View File

@@ -9,7 +9,7 @@
max-width: 80em; max-width: 80em;
width: 90%; width: 90%;
border-radius: .5em; border-radius: .5em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
& > header { & > header {
padding: 2em; padding: 2em;
@@ -82,13 +82,13 @@
cursor: pointer; cursor: pointer;
border-radius: 1em; border-radius: 1em;
opacity: .9; opacity: .9;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out; transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
} }
} }
} }
@@ -112,7 +112,7 @@
align-items: center; align-items: center;
width: 3em; width: 3em;
height: 3em; height: 3em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
font-weight: bold; font-weight: bold;
&:hover { &:hover {

115
frontend/src/app/components/publication-edition/publication-edition.component.ts
View File

@@ -1,21 +1,20 @@
import { CommonModule, Location } from "@angular/common"; import {CommonModule, Location} from "@angular/common";
import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core"; import {Component, effect, inject, input, output, signal} from "@angular/core";
import { FormGroup, ReactiveFormsModule } from "@angular/forms"; import {FormGroup, ReactiveFormsModule} from "@angular/forms";
import { MatDialogModule } from "@angular/material/dialog"; import {MatDialogModule} from "@angular/material/dialog";
import { MatIconModule } from "@angular/material/icon"; import {MatIconModule} from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input"; import {MatInputModule} from "@angular/material/input";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner"; import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import { MatSelectModule } from "@angular/material/select"; import {MatSelectModule} from "@angular/material/select";
import { MatTabsModule } from "@angular/material/tabs"; import {MatTabsModule} from "@angular/material/tabs";
import { MatTooltipModule } from "@angular/material/tooltip"; import {MatTooltipModule} from "@angular/material/tooltip";
import { map, Observable, of, Subscription } from "rxjs"; import {map, Observable} from "rxjs";
import { Category } from "../../core/rest-services/category/model/category"; import {Category} from "../../core/rest-services/category/model/category";
import { Publication } from "../../core/rest-services/publications/model/publication"; import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
import { CategoryService } from "../../core/service/category.service"; import {CategoryService} from "../../core/service/category.service";
import { SubmitButtonComponent } from "../submit-button/submit-button.component"; import {SubmitButtonComponent} from "../submit-button/submit-button.component";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component"; import {PublicationEditionService} from "./publication-edition.service";
import { PublicationEditionService } from "./publication-edition.service"; import {MatRippleModule} from "@angular/material/core";
import { MatRippleModule } from "@angular/material/core";
@Component({ @Component({
selector: 'app-publication-edition', selector: 'app-publication-edition',
@@ -36,36 +35,37 @@ import { MatRippleModule } from "@angular/material/core";
], ],
providers: [PublicationEditionService] providers: [PublicationEditionService]
}) })
export class PublicationEditionComponent implements OnChanges, OnDestroy { export class PublicationEditionComponent {
@Input() readonly #categoryService = inject(CategoryService);
publication!: Publication; readonly #location = inject(Location);
@Input() readonly #publicationEditionService = inject(PublicationEditionService);
title!: string;
@Input()
isSaving$: Observable<boolean> = of(false);
@Output()
publicationSave = new EventEmitter<Publication>();
publicationInEdition!: Publication; publication = input.required<Publication>();
private readonly categoryService = inject(CategoryService); title = input.required<string>();
private readonly location = inject(Location); isSaving = input.required<boolean>();
private readonly publicationEditionService = inject(PublicationEditionService); publicationSave = output<Publication>();
private subscriptions: Subscription[] = [];
isLoading = this.#publicationEditionService.isLoading;
isPreviewing = this.#publicationEditionService.isPreviewing;
publicationInEdition = signal<Publication>(DEFAULT_PUBLICATION);
constructor() {
effect(() => {
let publication = this.publication();
const publicationInEdition = this.publicationInEdition();
if (!publicationInEdition || publicationInEdition !== publication) {
this.publicationInEdition.set(publication);
this.#publicationEditionService.init(publicationInEdition);
}
});
}
get publicationEditionForm(): FormGroup { get publicationEditionForm(): FormGroup {
return this.publicationEditionService.publicationEditionForm; return this.#publicationEditionService.publicationEditionForm;
}
get isLoading$(): Observable<boolean> {
return this.publicationEditionService.isLoading$;
}
get isPreviewing$(): Observable<boolean> {
return this.publicationEditionService.isPreviewing$;
} }
get categories$(): Observable<Category[]> { get categories$(): Observable<Category[]> {
return this.categoryService.categories$ return this.#categoryService.categories$
.pipe( .pipe(
map(categories => map(categories =>
categories.filter(category => category.subCategories.length == 0) categories.filter(category => category.subCategories.length == 0)
@@ -88,41 +88,28 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
return 0; return 0;
} }
ngOnChanges(): void {
this.ngOnDestroy();
if (!this.publicationInEdition || this.publicationInEdition !== this.publication) {
this.publicationInEdition = this.publication;
this.publicationEditionService.init(this.publicationInEdition);
}
}
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
}
goPreviousLocation(): void { goPreviousLocation(): void {
this.location.back(); this.#location.back();
} }
insertTitle(titleNumber: number): void { insertTitle(titleNumber: number): void {
this.publicationEditionService.insertTitle(titleNumber); this.#publicationEditionService.insertTitle(titleNumber);
} }
selectAPicture(): void { selectAPicture(): void {
this.publicationEditionService.selectAPicture(); this.#publicationEditionService.selectAPicture();
} }
insertLink(): void { insertLink(): void {
this.publicationEditionService.insertLink(); this.#publicationEditionService.insertLink();
} }
displayCodeBlockDialog(): void { displayCodeBlockDialog(): void {
this.publicationEditionService.displayCodeBlockDialog(); this.#publicationEditionService.displayCodeBlockDialog();
} }
displayPictureSectionDialog(): void { displayPictureSectionDialog(): void {
this.publicationEditionService.displayPictureSectionDialog(); this.#publicationEditionService.displayPictureSectionDialog();
} }
updateCursorPosition(event: KeyboardEvent | MouseEvent): void { updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
@@ -132,17 +119,17 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
const positionStart = textarea.selectionStart; const positionStart = textarea.selectionStart;
const positionEnd = textarea.selectionEnd; const positionEnd = textarea.selectionEnd;
this.publicationEditionService.editCursorPosition(positionStart, positionEnd); this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
} }
} }
save(): void { save(): void {
this.publicationSave.emit(this.publicationEditionService.editedPublication); this.publicationSave.emit(this.#publicationEditionService.editedPublication);
} }
onTabChange(tabSelectedIndex: number): void { onTabChange(tabSelectedIndex: number): void {
if (tabSelectedIndex === 1) { if (tabSelectedIndex === 1) {
this.publicationEditionService.loadPreview(); this.#publicationEditionService.loadPreview();
} }
} }
} }

185
frontend/src/app/components/publication-edition/publication-edition.service.ts
View File

@@ -1,16 +1,16 @@
import { Location } from "@angular/common"; import {Location} from "@angular/common";
import { inject, Injectable, OnDestroy } from "@angular/core"; import {inject, Injectable, OnDestroy, Signal, signal} from "@angular/core";
import { MatDialog } from "@angular/material/dialog"; import {MatDialog} from "@angular/material/dialog";
import { MatSnackBar } from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
import { ActivatedRoute } from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs"; import {debounceTime, distinctUntilChanged, Subscription} from "rxjs";
import { Publication } from "../../core/rest-services/publications/model/publication"; import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
import { copy } from "../../core/utils/ObjectUtils"; import {copy} from "../../core/utils/ObjectUtils";
import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component"; import {CodeBlockDialog} from "./code-block-dialog/code-block-dialog.component";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component"; import {PictureSelectionDialog} from "./picture-selection-dialog/picture-selection-dialog.component";
import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview"; import {PreviewContentRequest} from "../../core/rest-services/publications/model/preview";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms"; import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
declare let Prism: any; declare let Prism: any;
@@ -31,23 +31,6 @@ export interface PublicationEditionState {
cursorPosition: CursorPosition; cursorPosition: CursorPosition;
} }
const DEFAULT_PUBLICATION: Publication = {
id: '',
key: '',
title: '',
text: '',
parsedText: '',
description: '',
creationDate: new Date(),
illustrationId: '',
categoryId: '',
author: {
id: '',
name: '',
image: ''
}
};
const DEFAULT_CURSOR_POSITION = new CursorPosition(0, 0); const DEFAULT_CURSOR_POSITION = new CursorPosition(0, 0);
const DEFAULT_STATE: PublicationEditionState = { const DEFAULT_STATE: PublicationEditionState = {
@@ -57,20 +40,20 @@ const DEFAULT_STATE: PublicationEditionState = {
@Injectable() @Injectable()
export class PublicationEditionService implements OnDestroy { export class PublicationEditionService implements OnDestroy {
private readonly activatedRoute = inject(ActivatedRoute); readonly #activatedRoute = inject(ActivatedRoute);
private readonly dialog = inject(MatDialog); readonly #dialog = inject(MatDialog);
private readonly formBuilder = inject(FormBuilder); readonly #formBuilder = inject(FormBuilder);
private readonly location = inject(Location); readonly #location = inject(Location);
private readonly publicationRestService = inject(PublicationRestService); readonly #publicationRestService = inject(PublicationRestService);
private readonly snackBar = inject(MatSnackBar); readonly #snackBar = inject(MatSnackBar);
private isLoadingSubject = new BehaviorSubject<boolean>(false); #isLoading = signal(false);
private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE)); #state = signal<PublicationEditionState>(copy(DEFAULT_STATE));
private subscriptions: Subscription[] = []; #isSaving = signal<boolean>(false);
private isSavingSubject = new BehaviorSubject<boolean>(false); #isPreviewing = signal<boolean>(false);
private isPreviewingSubject = new BehaviorSubject<boolean>(false); #subscriptions: Subscription[] = [];
publicationEditionForm: FormGroup = this.formBuilder.group({ publicationEditionForm: FormGroup = this.#formBuilder.group({
title: new FormControl<string | undefined>('', [Validators.required]), title: new FormControl<string | undefined>('', [Validators.required]),
description: new FormControl<string | undefined>('', [Validators.required]), description: new FormControl<string | undefined>('', [Validators.required]),
text: new FormControl<string | undefined>('', [Validators.required]), text: new FormControl<string | undefined>('', [Validators.required]),
@@ -79,19 +62,11 @@ export class PublicationEditionService implements OnDestroy {
}); });
ngOnDestroy(): void { ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription.unsubscribe()); this.#subscriptions.forEach(subscription => subscription.unsubscribe());
} }
private get _state(): PublicationEditionState { #updateForm(): void {
return this.stateSubject.value; const state = this.#state();
}
private _save(state: PublicationEditionState): void {
this.stateSubject.next(state);
}
private _updateForm(): void {
const state = this._state;
const publication = state.publication; const publication = state.publication;
this.publicationEditionForm.controls['title'].setValue(publication.title); this.publicationEditionForm.controls['title'].setValue(publication.title);
@@ -101,56 +76,56 @@ export class PublicationEditionService implements OnDestroy {
this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId); this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
} }
get isLoading$(): Observable<boolean> { get isLoading(): Signal<boolean> {
return this.isLoadingSubject.asObservable(); return this.#isLoading.asReadonly();
} }
get isSaving$(): Observable<boolean> { get isSaving(): Signal<boolean> {
return this.isSavingSubject.asObservable(); return this.#isSaving.asReadonly();
} }
get isPreviewing$(): Observable<boolean> { get isPreviewing(): Signal<boolean> {
return this.isPreviewingSubject.asObservable(); return this.#isPreviewing.asReadonly();
} }
get state$(): Observable<PublicationEditionState> { get state(): Signal<PublicationEditionState> {
return this.stateSubject.asObservable(); return this.#state.asReadonly();
} }
get editedPublication(): Publication { get editedPublication(): Publication {
return this._state.publication; return this.#state().publication;
} }
loadPublication(): void { loadPublication(): void {
this.isLoadingSubject.next(true); this.#isLoading.set(true);
this.activatedRoute.paramMap.subscribe(params => { this.#activatedRoute.paramMap.subscribe(params => {
const publicationId = params.get('publicationId'); const publicationId = params.get('publicationId');
if (publicationId == undefined) { if (publicationId == undefined) {
this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 }); this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
this.location.back(); this.#location.back();
} else { } else {
this.publicationRestService.getById(publicationId) this.#publicationRestService.getById(publicationId)
.then(publication => { .then(publication => {
const state = this._state; const state = this.#state();
state.publication = publication; state.publication = publication;
this.stateSubject.next(state); this.#state.set(state);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`; const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error) console.error(errorMessage, error)
}) })
.finally(() => this.isLoadingSubject.next(false)); .finally(() => this.#isLoading.set(false));
} }
}); });
} }
init(publication: Publication): void { init(publication: Publication): void {
const state = this._state; const state = this.#state();
state.publication = publication; state.publication = publication;
this.stateSubject.next(state); this.#state.set(state);
this._updateForm(); this.#updateForm();
const formValueChangesSubscription = this.publicationEditionForm.valueChanges const formValueChangesSubscription = this.publicationEditionForm.valueChanges
.pipe( .pipe(
@@ -158,7 +133,7 @@ export class PublicationEditionService implements OnDestroy {
distinctUntilChanged() distinctUntilChanged()
) )
.subscribe(formValue => { .subscribe(formValue => {
const state = this._state; const state = this.#state();
const publication = state.publication; const publication = state.publication;
publication.title = formValue.title; publication.title = formValue.title;
@@ -166,19 +141,19 @@ export class PublicationEditionService implements OnDestroy {
publication.categoryId = formValue.categoryId; publication.categoryId = formValue.categoryId;
publication.text = formValue.text; publication.text = formValue.text;
this._save(state); this.#state.set(state);
}) });
this.subscriptions.push(formValueChangesSubscription); this.#subscriptions.push(formValueChangesSubscription);
} }
private editIllustrationId(pictureId: string): void { private editIllustrationId(pictureId: string): void {
const state = this._state; const state = this.#state();
state.publication.illustrationId = pictureId state.publication.illustrationId = pictureId
this._save(state); this.#state.set(state);
} }
displayPictureSectionDialog(): void { displayPictureSectionDialog(): void {
const dialogRef = this.dialog.open(PictureSelectionDialog); const dialogRef = this.#dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed() const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => { .subscribe(newPictureId => {
@@ -186,11 +161,11 @@ export class PublicationEditionService implements OnDestroy {
this.editIllustrationId(newPictureId); this.editIllustrationId(newPictureId);
} }
}); });
this.subscriptions.push(afterDialogCloseSubscription); this.#subscriptions.push(afterDialogCloseSubscription);
} }
displayCodeBlockDialog(): void { displayCodeBlockDialog(): void {
const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' }); const dialogRef = this.#dialog.open(CodeBlockDialog, {width: '60em'});
const afterDialogCloseSubscription = dialogRef.afterClosed() const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(codeBlockWithLanguage => { .subscribe(codeBlockWithLanguage => {
@@ -198,21 +173,21 @@ export class PublicationEditionService implements OnDestroy {
this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock); this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
} }
}); });
this.subscriptions.push(afterDialogCloseSubscription); this.#subscriptions.push(afterDialogCloseSubscription);
} }
editCursorPosition(positionStart: number, positionEnd: number): void { editCursorPosition(positionStart: number, positionEnd: number): void {
const state = this._state; const state = this.#state();
state.cursorPosition.start = positionStart; state.cursorPosition.start = positionStart;
state.cursorPosition.end = positionEnd; state.cursorPosition.end = positionEnd;
this._save(state); this.#state.set(state);
} }
insertTitle(titleNumber: number): void { insertTitle(titleNumber: number): void {
if (titleNumber >= 1 && titleNumber <= 3) { if (titleNumber >= 1 && titleNumber <= 3) {
const state = this._state; const state = this.#state();
const publication = state.publication; const publication = state.publication;
@@ -223,15 +198,15 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this.#state.set(state);
this._updateForm(); this.#updateForm();
} else { } else {
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`); console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
} }
} }
selectAPicture(): void { selectAPicture(): void {
const dialogRef = this.dialog.open(PictureSelectionDialog); const dialogRef = this.#dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed() const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => { .subscribe(newPictureId => {
@@ -239,11 +214,11 @@ export class PublicationEditionService implements OnDestroy {
this.insertPicture(newPictureId); this.insertPicture(newPictureId);
} }
}); });
this.subscriptions.push(afterDialogCloseSubscription); this.#subscriptions.push(afterDialogCloseSubscription);
} }
insertPicture(pictureId: string): void { insertPicture(pictureId: string): void {
const state = this._state; const state = this.#state();
const publication = state.publication; const publication = state.publication;
@@ -253,12 +228,12 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this.#state.set(state);
this._updateForm(); this.#updateForm();
} }
insertLink(): void { insertLink(): void {
const state = this._state; const state = this.#state();
const publication = state.publication; const publication = state.publication;
@@ -269,12 +244,12 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this.#state.set(state);
this._updateForm(); this.#updateForm();
} }
private insertCodeBlock(programmingLanguage: string, codeBlock: string): void { private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
const state = this._state; const state = this.#state();
const publication = state.publication; const publication = state.publication;
@@ -285,28 +260,28 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this.#state.set(state);
this._updateForm(); this.#updateForm();
} }
loadPreview(): void { loadPreview(): void {
const state = this._state; const state = this.#state();
this.isPreviewingSubject.next(true); this.#isPreviewing.set(true);
const request: PreviewContentRequest = { const request: PreviewContentRequest = {
text: state.publication.text text: state.publication.text
}; };
this.publicationRestService.preview(request) this.#publicationRestService.preview(request)
.then(response => { .then(response => {
state.publication.parsedText = response.text; state.publication.parsedText = response.text;
this._save(state); this.#state.set(state);
setTimeout(() => Prism.highlightAll(), 1000); setTimeout(() => Prism.highlightAll(), 1000);
}) })
.catch(error => { .catch(error => {
console.error(error); console.error(error);
}) })
.finally(() => { .finally(() => {
this.isPreviewingSubject.next(false); this.#isPreviewing.set(false);
}); });
} }
} }

8
frontend/src/app/components/publication-list/publication-list.component.html
View File

@@ -1,13 +1,13 @@
@for(publication of publications(); track publication.id) { @for (publication of publications(); track publication.id) {
<a [routerLink]="['/publications/' + publication.id]" class="publication"> <a [routerLink]="['/publications/' + publication.id]" class="publication">
<img src="/api/pictures/{{ publication.illustrationId }}"/> <img src="/api/pictures/{{ publication.illustrationId }}"/>
<div class="body"> <div class="body">
<h1>{{publication.title}}</h1> <h1>{{ publication.title }}</h1>
<h2>{{publication.description}}</h2> <h2>{{ publication.description }}</h2>
</div> </div>
<div class="footer"> <div class="footer">
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/> <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
<span i18n>Publication posted by {{publication.author.name}}</span> <span i18n>Publication posted by {{ publication.author.name }}</span>
<span class="publication-date"> <span class="publication-date">
({{ publication.creationDate | date: 'short' }}) ({{ publication.creationDate | date: 'short' }})
</span> </span>

4
frontend/src/app/components/publication-list/publication-list.component.scss
View File

@@ -12,14 +12,14 @@ $cardBorderRadius: .5em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: $cardBorderRadius; border-radius: $cardBorderRadius;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
transition: box-shadow .2s ease-in-out; transition: box-shadow .2s ease-in-out;
text-decoration: none; text-decoration: none;
color: black; color: black;
background-color: #ffffff; background-color: #ffffff;
&:hover { &:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.24),0 4px 14px 0 rgba(0,0,0,.16); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .24), 0 4px 14px 0 rgba(0, 0, 0, .16);
} }
img { img {

11
frontend/src/app/components/publication-list/publication-list.component.ts
View File

@@ -1,9 +1,8 @@
import {Component, input, Input} from "@angular/core"; import {Component, input} from "@angular/core";
import { Publication } from "../../core/rest-services/publications/model/publication"; import {Publication} from "../../core/rest-services/publications/model/publication";
import { Observable } from "rxjs"; import {CommonModule} from "@angular/common";
import { CommonModule } from "@angular/common"; import {RouterModule} from "@angular/router";
import { RouterModule } from "@angular/router"; import {MatTooltipModule} from "@angular/material/tooltip";
import { MatTooltipModule } from "@angular/material/tooltip";
@Component({ @Component({
selector: 'app-publication-list', selector: 'app-publication-list',

14
frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts
View File

@@ -1,8 +1,8 @@
import { Component, inject } from "@angular/core"; import {Component, inject} from "@angular/core";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
import { MatRippleModule } from "@angular/material/core"; import {MatRippleModule} from "@angular/material/core";
import { MatIconModule } from "@angular/material/icon"; import {MatIconModule} from "@angular/material/icon";
import { Router } from "@angular/router"; import {Router} from "@angular/router";
@Component({ @Component({
@@ -27,8 +27,8 @@ export class PublicationsSearchBarComponent {
const query = this.formGroup.controls.criteria.value const query = this.formGroup.controls.criteria.value
if (query?.trim()) { if (query?.trim()) {
const queryParams = { 'query' : this.formGroup.controls.criteria.value ?? '' } const queryParams = {'query': this.formGroup.controls.criteria.value ?? ''}
this.router.navigate(['/publications'], { queryParams }); this.router.navigate(['/publications'], {queryParams});
} else { } else {
this.router.navigate(['/home']); this.router.navigate(['/home']);
} }

8
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html
View File

@@ -1,16 +1,16 @@
@for(category of categories$ | async; track category) { @for (category of categories$ | async; track category) {
<div class="category {{category.isOpenned ? 'openned' : ''}}"> <div class="category {{category.isOpenned ? 'openned' : ''}}">
<div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)"> <div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
{{category.name}} {{ category.name }}
<mat-icon>chevron_right</mat-icon> <mat-icon>chevron_right</mat-icon>
</div> </div>
<div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}"> <div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
@for(subCategory of category.subCategories; track subCategory) { @for (subCategory of category.subCategories; track subCategory) {
<a [routerLink]="['/publications']" <a [routerLink]="['/publications']"
[queryParams]="{'category-id': subCategory.id}" [queryParams]="{'category-id': subCategory.id}"
(click)="categoryClicked.emit()" (click)="categoryClicked.emit()"
class="sub-category"> class="sub-category">
{{subCategory.name}} {{ subCategory.name }}
</a> </a>
} }
</div> </div>

12
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts
View File

@@ -1,9 +1,9 @@
import { CommonModule } from "@angular/common"; import {CommonModule} from "@angular/common";
import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core"; import {Component, EventEmitter, inject, OnInit, Output} from "@angular/core";
import { MatIconModule } from "@angular/material/icon"; import {MatIconModule} from "@angular/material/icon";
import { DisplayableCategory, SideMenuService } from "../side-menu.service"; import {DisplayableCategory, SideMenuService} from "../side-menu.service";
import { Observable } from "rxjs"; import {Observable} from "rxjs";
import { RouterModule } from "@angular/router"; import {RouterModule} from "@angular/router";
@Component({ @Component({
selector: 'app-categories-menu', selector: 'app-categories-menu',

4
frontend/src/app/components/side-menu/side-menu.component.html
View File

@@ -1,4 +1,4 @@
<div class="menu {{ isOpened ? 'displayed' : '' }}"> <div class="menu {{ isOpened() ? 'displayed' : '' }}">
<h1> <h1>
<a [routerLink]="['/home']"> <a [routerLink]="['/home']">
<img src="assets/images/codiki.png" alt="logo"/> <img src="assets/images/codiki.png" alt="logo"/>
@@ -16,4 +16,4 @@
<h2 i18n>Categories</h2> <h2 i18n>Categories</h2>
<app-categories-menu (categoryClicked)="close()"></app-categories-menu> <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
</div> </div>
<div class="overlay {{ isOpened ? 'displayed' : ''}}" (click)="close()"></div> <div class="overlay {{ isOpened() ? 'displayed' : ''}}" (click)="close()"></div>

10
frontend/src/app/components/side-menu/side-menu.component.ts
View File

@@ -1,9 +1,9 @@
import {Component, signal} from '@angular/core'; import {Component, signal} from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import {MatTooltipModule} from '@angular/material/tooltip';
import { RouterModule } from '@angular/router'; import {RouterModule} from '@angular/router';
import { CategoriesMenuComponent } from './categories-menu/categories-menu.component'; import {CategoriesMenuComponent} from './categories-menu/categories-menu.component';
import { MatRippleModule } from '@angular/material/core'; import {MatRippleModule} from '@angular/material/core';
@Component({ @Component({
selector: 'app-side-menu', selector: 'app-side-menu',

12
frontend/src/app/components/side-menu/side-menu.service.ts
View File

@@ -1,8 +1,8 @@
import { Injectable, inject } from '@angular/core'; import {inject, Injectable} from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar'; import {MatSnackBar} from '@angular/material/snack-bar';
import { BehaviorSubject, Observable } from 'rxjs'; import {BehaviorSubject, Observable} from 'rxjs';
import { CategoryRestService } from '../../core/rest-services/category/category.rest-service'; import {CategoryRestService} from '../../core/rest-services/category/category.rest-service';
import { Category } from '../../core/rest-services/category/model/category'; import {Category} from '../../core/rest-services/category/model/category';
export interface DisplayableCategory { export interface DisplayableCategory {
id: string; id: string;
@@ -72,7 +72,7 @@ export class SideMenuService {
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occured while loading categories.`; const errorMessage = $localize`An error occured while loading categories.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
}) })
.finally(() => { .finally(() => {
this.isLoadingSubject.next(false); this.isLoadingSubject.next(false);

13
frontend/src/app/components/submit-button/submit-button.component.ts
View File

@@ -1,7 +1,6 @@
import {Component, input, output} from "@angular/core";
import {Component, EventEmitter, input, Input, output, Output, signal} from "@angular/core"; import {MatRippleModule} from "@angular/material/core";
import { MatRippleModule } from "@angular/material/core"; import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
@Component({ @Component({
selector: 'app-submit-button', selector: 'app-submit-button',
@@ -10,12 +9,12 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
imports: [ imports: [
MatRippleModule, MatRippleModule,
MatProgressSpinnerModule MatProgressSpinnerModule
] ]
}) })
export class SubmitButtonComponent { export class SubmitButtonComponent {
requestPending = input.required<boolean>(); requestPending = input.required<boolean>();
label = input<string>(); label = input<string>();
disabled = input.required<boolean>(); disabled = input<boolean>(false);
color = input<'secondary' | undefined>('secondary'); color = input<'secondary' | undefined>('secondary');
click = output<void>(); click = output<void>();
} }

10
frontend/src/app/core/guard/already-authenticated.guard.ts
View File

@@ -1,7 +1,7 @@
import { inject } from "@angular/core"; import {inject} from "@angular/core";
import { CanActivateFn, Router } from "@angular/router"; import {CanActivateFn, Router} from "@angular/router";
import { AuthenticationService } from "../service/authentication.service"; import {AuthenticationService} from "../service/authentication.service";
import { MatSnackBar } from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
export const alreadyAuthenticatedGuard: CanActivateFn = () => { export const alreadyAuthenticatedGuard: CanActivateFn = () => {
const authenticationService = inject(AuthenticationService); const authenticationService = inject(AuthenticationService);
@@ -10,7 +10,7 @@ export const alreadyAuthenticatedGuard: CanActivateFn = () => {
if (authenticationService.isAuthenticated()) { if (authenticationService.isAuthenticated()) {
router.navigate(['/home']); router.navigate(['/home']);
snackBar.open($localize`You can't access to this page because you are already authenticated.`, $localize`Close`, { duration: 5000 }); snackBar.open($localize`You can't access to this page because you are already authenticated.`, $localize`Close`, {duration: 5000});
return false; return false;
} else { } else {
return true; return true;

10
frontend/src/app/core/guard/authentication.guard.ts
View File

@@ -1,7 +1,7 @@
import { inject } from "@angular/core"; import {inject} from "@angular/core";
import { CanActivateFn, Router } from "@angular/router"; import {CanActivateFn, Router} from "@angular/router";
import { AuthenticationService } from "../service/authentication.service"; import {AuthenticationService} from "../service/authentication.service";
import { MatSnackBar } from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
export const authenticationGuard: CanActivateFn = async () => { export const authenticationGuard: CanActivateFn = async () => {
const authenticationService = inject(AuthenticationService); const authenticationService = inject(AuthenticationService);
@@ -14,7 +14,7 @@ export const authenticationGuard: CanActivateFn = async () => {
return true; return true;
} else { } else {
router.navigate(['/login']); router.navigate(['/login']);
snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 }); snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
return false; return false;
} }
} }

17
frontend/src/app/core/interceptor/jwt.interceptor.ts
View File

@@ -1,11 +1,10 @@
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'; import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import { inject, Injectable } from '@angular/core'; import {inject, Injectable} from '@angular/core';
import { catchError, filter, Observable, Subject, switchMap, take, throwError } from 'rxjs'; import {catchError, filter, Observable, Subject, switchMap, take, throwError} from 'rxjs';
import { RefreshTokenRequest } from '../rest-services/user/model/refresh-token.model'; import {UserRestService} from '../rest-services/user/user.rest-service';
import { UserRestService } from '../rest-services/user/user.rest-service'; import {AuthenticationService} from '../service/authentication.service';
import { AuthenticationService } from '../service/authentication.service'; import {Router} from '@angular/router';
import { Router } from '@angular/router'; import {MatSnackBar} from '@angular/material/snack-bar';
import { MatSnackBar } from '@angular/material/snack-bar';
@Injectable() @Injectable()
export class JwtInterceptor implements HttpInterceptor { export class JwtInterceptor implements HttpInterceptor {
@@ -72,7 +71,7 @@ export class JwtInterceptor implements HttpInterceptor {
this.router.navigate(['/login']); this.router.navigate(['/login']);
this.refreshTokenSubject.next(undefined); this.refreshTokenSubject.next(undefined);
this.authenticationService.unauthenticate(); this.authenticationService.unauthenticate();
this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, { duration: 5000 }); this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, {duration: 5000});
return throwError(() => initialError); return throwError(() => initialError);
} }
} }

8
frontend/src/app/core/rest-services/category/category.rest-service.ts
View File

@@ -1,7 +1,7 @@
import { HttpClient } from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
import { Injectable, inject } from '@angular/core'; import {inject, Injectable} from '@angular/core';
import { lastValueFrom } from 'rxjs'; import {lastValueFrom} from 'rxjs';
import { Category } from './model/category'; import {Category} from './model/category';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

8
frontend/src/app/core/rest-services/picture/picture.rest-service.ts
View File

@@ -1,7 +1,7 @@
import { HttpClient, HttpParams } from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import { inject, Injectable } from "@angular/core"; import {inject, Injectable} from "@angular/core";
import { Picture } from "./model/picture"; import {Picture} from "./model/picture";
import { lastValueFrom } from "rxjs"; import {lastValueFrom} from "rxjs";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

19
frontend/src/app/core/rest-services/publications/model/publication.ts
View File

@@ -1,4 +1,4 @@
import { Author } from "./author"; import {Author} from "./author";
export interface Publication { export interface Publication {
id: string; id: string;
@@ -12,3 +12,20 @@ export interface Publication {
categoryId: string; categoryId: string;
author: Author; author: Author;
} }
export const DEFAULT_PUBLICATION: Publication = {
id: '',
key: '',
title: '',
text: '',
parsedText: '',
description: '',
creationDate: new Date(),
illustrationId: '',
categoryId: '',
author: {
id: '',
name: '',
image: ''
}
}

12
frontend/src/app/core/rest-services/publications/publication.rest-service.ts
View File

@@ -1,8 +1,8 @@
import { HttpClient, HttpParams } from '@angular/common/http'; import {HttpClient, HttpParams} from '@angular/common/http';
import { Injectable, inject } from '@angular/core'; import {inject, Injectable} from '@angular/core';
import { last, lastValueFrom } from 'rxjs'; import {lastValueFrom} from 'rxjs';
import { Publication } from './model/publication'; import {Publication} from './model/publication';
import { PreviewContentRequest, PreviewContentResponse } from './model/preview'; import {PreviewContentRequest, PreviewContentResponse} from './model/preview';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
@@ -29,7 +29,7 @@ export class PublicationRestService {
search(searchCriteria: string): Promise<Publication[]> { search(searchCriteria: string): Promise<Publication[]> {
let params = new HttpParams(); let params = new HttpParams();
params = params.set('query', searchCriteria); params = params.set('query', searchCriteria);
return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', { params })); return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', {params}));
} }
preview(request: PreviewContentRequest): Promise<PreviewContentResponse> { preview(request: PreviewContentRequest): Promise<PreviewContentResponse> {

12
frontend/src/app/core/rest-services/user/user.rest-service.ts
View File

@@ -1,9 +1,9 @@
import { HttpClient } from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import { Injectable, inject } from "@angular/core"; import {inject, Injectable} from "@angular/core";
import { LoginRequest, LoginResponse } from "./model/login.model"; import {LoginRequest, LoginResponse} from "./model/login.model";
import { lastValueFrom } from "rxjs"; import {lastValueFrom} from "rxjs";
import { SigninRequest } from "./model/signin.model"; import {SigninRequest} from "./model/signin.model";
import { RefreshTokenRequest } from "./model/refresh-token.model"; import {RefreshTokenRequest} from "./model/refresh-token.model";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

12
frontend/src/app/core/service/authentication.service.ts
View File

@@ -1,9 +1,9 @@
import { inject, Injectable } from "@angular/core"; import {inject, Injectable} from "@angular/core";
import { BehaviorSubject, interval } from "rxjs"; import {BehaviorSubject, interval} from "rxjs";
import { User } from "../model/User"; import {User} from "../model/User";
import { UserRestService } from "../rest-services/user/user.rest-service"; import {UserRestService} from "../rest-services/user/user.rest-service";
import { RefreshTokenRequest } from "../rest-services/user/model/refresh-token.model"; import {RefreshTokenRequest} from "../rest-services/user/model/refresh-token.model";
import { LoginResponse } from "../rest-services/user/model/login.model"; import {LoginResponse} from "../rest-services/user/model/login.model";
const JWT_PARAM = 'jwt'; const JWT_PARAM = 'jwt';
const REFRESH_TOKEN_PARAM = 'refresh-token'; const REFRESH_TOKEN_PARAM = 'refresh-token';

8
frontend/src/app/core/service/category.service.ts
View File

@@ -1,7 +1,7 @@
import { Injectable, inject } from '@angular/core'; import {inject, Injectable} from '@angular/core';
import { CategoryRestService } from '../rest-services/category/category.rest-service'; import {CategoryRestService} from '../rest-services/category/category.rest-service';
import { BehaviorSubject, Observable } from 'rxjs'; import {BehaviorSubject, Observable} from 'rxjs';
import { Category } from '../rest-services/category/model/category'; import {Category} from '../rest-services/category/model/category';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'

6
frontend/src/app/pages/disconnection/disconnection.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, OnInit, inject } from '@angular/core'; import {Component, inject, OnInit} from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { AuthenticationService } from '../../core/service/authentication.service'; import {AuthenticationService} from '../../core/service/authentication.service';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
@Component({ @Component({
selector: 'app-disconnection', selector: 'app-disconnection',

4
frontend/src/app/pages/home/home.component.html
View File

@@ -1,10 +1,10 @@
<h1 i18n>Last publications</h1> <h1 i18n>Last publications</h1>
@if ((isLoading())) { @if ((isLoading())) {
<h2 i18n>Publications loading...</h2> <h2 i18n>Publications loading...</h2>
<mat-spinner /> <mat-spinner/>
} @else { } @else {
@if (publications(); as publications) { @if (publications(); as publications) {
<app-publication-list [publications]="publications" /> <app-publication-list [publications]="publications"/>
} @else { } @else {
<h2 i18n>No any publication.</h2> <h2 i18n>No any publication.</h2>
} }

27
frontend/src/app/pages/home/home.component.ts
View File

@@ -1,11 +1,8 @@
import {Component, OnInit, inject, Signal} from '@angular/core'; import {Component, inject, OnInit} from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { Observable } from 'rxjs'; import {PublicationListComponent} from '../../components/publication-list/publication-list.component';
import { PublicationListComponent } from '../../components/publication-list/publication-list.component'; import {HomeService} from './home.service';
import { Publication } from '../../core/rest-services/publications/model/publication'; import {CommonModule} from '@angular/common';
import { HomeService } from './home.service';
import { CommonModule } from '@angular/common';
import {toSignal} from "@angular/core/rxjs-interop";
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@@ -19,17 +16,11 @@ import {toSignal} from "@angular/core/rxjs-interop";
providers: [HomeService] providers: [HomeService]
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
private homeService = inject(HomeService); readonly #homeService = inject(HomeService);
isLoading = this.#homeService.isLoading;
get isLoading(): Signal<boolean> { publications = this.#homeService.publications;
return toSignal(this.homeService.isLoading$, { initialValue: false });
}
get publications(): Signal<Publication[]> {
return toSignal(this.homeService.publications$, { initialValue: [] });
}
ngOnInit(): void { ngOnInit(): void {
this.homeService.startLatestPublicationsRetrieving(); this.#homeService.startLatestPublicationsRetrieving();
} }
} }

29
frontend/src/app/pages/home/home.service.ts
View File

@@ -1,35 +1,34 @@
import { Injectable, inject } from "@angular/core"; import {inject, Injectable, Signal, signal} from "@angular/core";
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
import { BehaviorSubject, Observable } from "rxjs"; import {MatSnackBar} from "@angular/material/snack-bar"
import { MatSnackBar } from "@angular/material/snack-bar" import {Publication} from "../../core/rest-services/publications/model/publication";
import { Publication } from "../../core/rest-services/publications/model/publication";
@Injectable() @Injectable()
export class HomeService { export class HomeService {
private publicationRestService = inject(PublicationRestService); private publicationRestService = inject(PublicationRestService);
private snackBar = inject(MatSnackBar); private snackBar = inject(MatSnackBar);
private publicationsSubject = new BehaviorSubject<Publication[]>([]); #publications = signal<Publication[]>([]);
private isLoadingSubject = new BehaviorSubject<boolean>(false); #isLoadingSubject = signal<boolean>(false);
get isLoading$(): Observable<boolean> { get isLoading(): Signal<boolean> {
return this.isLoadingSubject.asObservable(); return this.#isLoadingSubject.asReadonly();
} }
get publications$(): Observable<Publication[]> { get publications(): Signal<Publication[]> {
return this.publicationsSubject.asObservable(); return this.#publications.asReadonly();
} }
startLatestPublicationsRetrieving(): void { startLatestPublicationsRetrieving(): void {
this.isLoadingSubject.next(true); this.#isLoadingSubject.set(true);
this.publicationRestService.getLatest() this.publicationRestService.getLatest()
.then(publications => this.publicationsSubject.next(publications)) .then(publications => this.#publications.set(publications))
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occurred while retrieving latest publications...`; const errorMessage = $localize`An error occurred while retrieving latest publications...`;
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error); console.error(errorMessage, error);
}) })
.finally(() => this.isLoadingSubject.next(false)); .finally(() => this.#isLoadingSubject.set(false));
} }
} }

4
frontend/src/app/pages/login/login.component.html
View File

@@ -6,7 +6,7 @@
Email address Email address
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="email" id="email" formControlName="email" autocomplete="email" required /> <input type="email" id="email" formControlName="email" autocomplete="email" required/>
</div> </div>
<div class="form-field"> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
@@ -14,7 +14,7 @@
Password Password
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="password" id="password" formControlName="password" required /> <input type="password" id="password" formControlName="password" required/>
</div> </div>
<div class="actions reversed"> <div class="actions reversed">
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button> <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>

22
frontend/src/app/pages/login/login.component.ts
View File

@@ -1,12 +1,12 @@
import { Component, OnDestroy, OnInit, inject } from '@angular/core'; import {Component, inject, OnDestroy, OnInit} from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import { MatSnackBarModule } from '@angular/material/snack-bar'; import {MatSnackBarModule} from '@angular/material/snack-bar';
import { Subscription, debounceTime, map } from 'rxjs'; import {debounceTime, map, Subscription} from 'rxjs';
import { LoginService } from './login.service'; import {LoginService} from './login.service';
import { MatIconModule } from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import { RouterModule } from '@angular/router'; import {RouterModule} from '@angular/router';
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component"; import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
import { MatRippleModule } from '@angular/material/core'; import {MatRippleModule} from '@angular/material/core';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
@@ -53,8 +53,8 @@ export class LoginComponent implements OnInit, OnDestroy {
const stateSubscription = this.loginService.state$ const stateSubscription = this.loginService.state$
.subscribe(state => { .subscribe(state => {
this.loginForm.controls['email'].setValue(state.request.email, { emitEvent: false }); this.loginForm.controls['email'].setValue(state.request.email, {emitEvent: false});
this.loginForm.controls['password'].setValue(state.request.password, { emitEvent: false }); this.loginForm.controls['password'].setValue(state.request.password, {emitEvent: false});
}); });
this.subscriptions.push(stateSubscription); this.subscriptions.push(stateSubscription);
} }

24
frontend/src/app/pages/login/login.service.ts
View File

@@ -1,12 +1,12 @@
import { Injectable, inject } from '@angular/core'; import {inject, Injectable} from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs'; import {BehaviorSubject, Observable} from 'rxjs';
import { copy } from '../../core/utils/ObjectUtils'; import {copy} from '../../core/utils/ObjectUtils';
import { FormError } from '../../core/model/FormError'; import {FormError} from '../../core/model/FormError';
import { UserRestService } from '../../core/rest-services/user/user.rest-service'; import {UserRestService} from '../../core/rest-services/user/user.rest-service';
import { LoginRequest } from '../../core/rest-services/user/model/login.model'; import {LoginRequest} from '../../core/rest-services/user/model/login.model';
import { AuthenticationService } from '../../core/service/authentication.service'; import {AuthenticationService} from '../../core/service/authentication.service';
import { MatSnackBar } from '@angular/material/snack-bar'; import {MatSnackBar} from '@angular/material/snack-bar';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
export interface LoginState { export interface LoginState {
request: LoginRequest; request: LoginRequest;
@@ -65,15 +65,15 @@ export class LoginService {
.login(state.request) .login(state.request)
.then((response) => { .then((response) => {
this.authenticationService.authenticate(response.accessToken, response.refreshToken); this.authenticationService.authenticate(response.accessToken, response.refreshToken);
this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 }); this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, {duration: 5000});
this.router.navigate(['/home']); this.router.navigate(['/home']);
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 }); this.snackBar.open($localize`Authentication failed.`, $localize`Close`, {duration: 5000});
}); });
} else { } else {
this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 }); this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, {duration: 5000});
} }
} }

2
frontend/src/app/pages/my-publications/my-publications.component.scss
View File

@@ -18,7 +18,7 @@ $newPublicationButtonSize: 1.7em;
width: $newPublicationButtonSize; width: $newPublicationButtonSize;
height: $newPublicationButtonSize; height: $newPublicationButtonSize;
text-decoration: none; text-decoration: none;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
font-size: 2.2em; font-size: 2.2em;

23
frontend/src/app/pages/my-publications/my-publications.component.ts
View File

@@ -1,13 +1,12 @@
import {Component, inject, OnInit, Signal} from "@angular/core"; import {Component, inject, OnInit, Signal} from "@angular/core";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner"; import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import { MyPublicationsService } from "./my-publications.service"; import {MyPublicationsService} from "./my-publications.service";
import { Observable } from "rxjs"; import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
import { PublicationListComponent } from "../../components/publication-list/publication-list.component"; import {Publication} from "../../core/rest-services/publications/model/publication";
import { Publication } from "../../core/rest-services/publications/model/publication"; import {CommonModule} from "@angular/common";
import { CommonModule } from "@angular/common"; import {RouterModule} from "@angular/router";
import { RouterModule } from "@angular/router"; import {MatTooltipModule} from "@angular/material/tooltip";
import { MatTooltipModule } from "@angular/material/tooltip"; import {MatRippleModule} from "@angular/material/core";
import { MatRippleModule } from "@angular/material/core";
import {toSignal} from "@angular/core/rxjs-interop"; import {toSignal} from "@angular/core/rxjs-interop";
@@ -29,15 +28,15 @@ export class MyPublicationsComponent implements OnInit {
private readonly myPublicationsService = inject(MyPublicationsService); private readonly myPublicationsService = inject(MyPublicationsService);
get publications(): Signal<Publication[]> { get publications(): Signal<Publication[]> {
return toSignal(this.myPublicationsService.publications$, { initialValue: [] }); return toSignal(this.myPublicationsService.publications$, {initialValue: []});
} }
get isLoading(): Signal<boolean> { get isLoading(): Signal<boolean> {
return toSignal(this.myPublicationsService.isLoading$, { initialValue: false }); return toSignal(this.myPublicationsService.isLoading$, {initialValue: false});
} }
get isLoaded(): Signal<boolean> { get isLoaded(): Signal<boolean> {
return toSignal(this.myPublicationsService.isLoaded$, { initialValue: false }); return toSignal(this.myPublicationsService.isLoaded$, {initialValue: false});
} }
ngOnInit(): void { ngOnInit(): void {

8
frontend/src/app/pages/my-publications/my-publications.routes.ts
View File

@@ -1,7 +1,7 @@
import { Route } from "@angular/router"; import {Route} from "@angular/router";
import { authenticationGuard } from "../../core/guard/authentication.guard"; import {authenticationGuard} from "../../core/guard/authentication.guard";
import { MyPublicationsComponent } from "./my-publications.component"; import {MyPublicationsComponent} from "./my-publications.component";
export const ROUTES: Route[] = [ export const ROUTES: Route[] = [
{ path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard] } {path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard]}
] ]

18
frontend/src/app/pages/my-publications/my-publications.service.ts
View File

@@ -1,10 +1,10 @@
import { inject, Injectable } from "@angular/core"; import {inject, Injectable} from "@angular/core";
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
import { AuthenticationService } from "../../core/service/authentication.service"; import {AuthenticationService} from "../../core/service/authentication.service";
import { BehaviorSubject, Observable } from "rxjs"; import {BehaviorSubject, Observable} from "rxjs";
import { Publication } from "../../core/rest-services/publications/model/publication"; import {Publication} from "../../core/rest-services/publications/model/publication";
import { Router } from "@angular/router"; import {Router} from "@angular/router";
import { MatSnackBar } from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
@Injectable() @Injectable()
export class MyPublicationsService { export class MyPublicationsService {
@@ -41,7 +41,7 @@ export class MyPublicationsService {
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occurred while retrieving your publications...`; const errorMessage = $localize`An error occurred while retrieving your publications...`;
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error); console.error(errorMessage, error);
}) })
.finally(() => { .finally(() => {
@@ -50,7 +50,7 @@ export class MyPublicationsService {
}); });
} else { } else {
this.authenticationService.unauthenticate(); this.authenticationService.unauthenticate();
this.snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 }); this.snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
this.router.navigate(['/login']); this.router.navigate(['/login']);
} }
} }

8
frontend/src/app/pages/publication-creation/publication-creation.component.html
View File

@@ -1,7 +1,7 @@
<app-publication-edition <app-publication-edition
title="Creation of a new publication" title="Creation of a new publication"
[publication]="publication" [publication]="publication()"
[isSaving$]="isSaving$" [isSaving]="isSaving()"
(publicationSave)="onPublicationSave($event)" (publicationSave)="onPublicationSave($event)"
i18n-title> i18n-title
</app-publication-edition> />

69
frontend/src/app/pages/publication-creation/publication-creation.component.ts
View File

@@ -1,13 +1,11 @@
import { Component, inject, OnInit } from "@angular/core"; import {Component, inject, OnInit, signal} from "@angular/core";
import { PublicationEditionComponent } from "../../components/publication-edition/publication-edition.component"; import {PublicationEditionComponent} from "../../components/publication-edition/publication-edition.component";
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
import { ActivatedRoute, Router } from "@angular/router"; import {Router} from "@angular/router";
import { MatSnackBar } from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
import { BehaviorSubject, Observable, Subscription } from "rxjs"; import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
import { Publication } from "../../core/rest-services/publications/model/publication"; import {AuthenticationService} from "../../core/service/authentication.service";
import { AuthenticationService } from "../../core/service/authentication.service"; import {Author} from "../../core/rest-services/publications/model/author";
import { Author } from "../../core/rest-services/publications/model/author";
@Component({ @Component({
selector: 'app-publication-creation', selector: 'app-publication-creation',
@@ -15,60 +13,41 @@ import { Author } from "../../core/rest-services/publications/model/author";
styleUrl: './publication-creation.component.scss', styleUrl: './publication-creation.component.scss',
imports: [ imports: [
PublicationEditionComponent PublicationEditionComponent
] ]
}) })
export class PublicationCreationComponent implements OnInit { export class PublicationCreationComponent implements OnInit {
private readonly authenticationService = inject(AuthenticationService); readonly #authenticationService = inject(AuthenticationService);
private readonly publicationRestService = inject(PublicationRestService); readonly #publicationRestService = inject(PublicationRestService);
private readonly router = inject(Router); readonly #router = inject(Router);
private readonly snackBar = inject(MatSnackBar); readonly #snackBar = inject(MatSnackBar);
private isSavingSubject = new BehaviorSubject<boolean>(false); isSaving = signal(false);
private subscriptions: Subscription[] = []; publication = signal<Publication>(DEFAULT_PUBLICATION);
publication!: Publication;
get isSaving$(): Observable<boolean> {
return this.isSavingSubject.asObservable();
}
ngOnInit(): void { ngOnInit(): void {
const authenticatedUser = this.authenticationService.getAuthenticatedUser(); const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
if (authenticatedUser) { if (authenticatedUser) {
const author: Author = { const author: Author = {
id: authenticatedUser.id, id: authenticatedUser.id,
name: authenticatedUser.pseudo, name: authenticatedUser.pseudo,
image: authenticatedUser.photoId ?? '' image: authenticatedUser.photoId ?? ''
}; };
this.publication = { const newPublication: Publication = {...DEFAULT_PUBLICATION, author};
id: '', this.publication.set(newPublication);
key: '',
title: '',
text: '',
parsedText: '',
description: '',
creationDate: new Date(),
illustrationId: '',
categoryId: '',
author
};
} }
} }
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
}
onPublicationSave(publication: Publication): void { onPublicationSave(publication: Publication): void {
this.isSavingSubject.next(true); this.isSaving.set(true);
this.publicationRestService.create(publication) this.#publicationRestService.create(publication)
.then(() => { .then(() => {
this.snackBar.open($localize`Publication created succesfully!`, $localize`Close`, { duration: 5000 }); this.#snackBar.open($localize`Publication created succesfully!`, $localize`Close`, {duration: 5000});
this.router.navigate(['/my-publications']); this.#router.navigate(['/my-publications']);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occured while saving new publication.`; const errorMessage = $localize`An error occured while saving new publication.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
}) })
.finally(() => this.isSavingSubject.next(false)); .finally(() => this.isSaving.set(false));
} }
} }

8
frontend/src/app/pages/publication-creation/publication-creation.routes.ts
View File

@@ -1,7 +1,7 @@
import { Route } from "@angular/router"; import {Route} from "@angular/router";
import { authenticationGuard } from "../../core/guard/authentication.guard"; import {authenticationGuard} from "../../core/guard/authentication.guard";
import { PublicationCreationComponent } from "./publication-creation.component"; import {PublicationCreationComponent} from "./publication-creation.component";
export const ROUTES: Route[] = [ export const ROUTES: Route[] = [
{ path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard] } {path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard]}
] ]

18
frontend/src/app/pages/publication-update/publication-update.component.html
View File

@@ -1,18 +1,16 @@
@if ((isLoading$ | async) == true) { @if (isLoading()) {
<h2 i18n>Loading publication to edit...</h2> <h2 i18n>Loading publication to edit...</h2>
<mat-spinner></mat-spinner> <mat-spinner/>
} } @else {
@else { @if (publication(); as publication) {
@if (publication) {
<app-publication-edition <app-publication-edition
title="Update publication {{ publication.title }}" title="Update publication {{ publication.title }}"
[publication]="publication" [publication]="publication"
[isSaving$]="isSaving$" [isSaving]="isSaving()"
(publicationSave)="onPublicationSave($event)" (publicationSave)="onPublicationSave($event)"
i18n-title> i18n-title
</app-publication-edition> />
} } @else {
@else {
<div class="loading-failed"> <div class="loading-failed">
<h1 i18n>Publication failed to load...</h1> <h1 i18n>Publication failed to load...</h1>
</div> </div>

96
frontend/src/app/pages/publication-update/publication-update.component.ts
View File

@@ -1,18 +1,18 @@
import { CommonModule, Location } from '@angular/common'; import {CommonModule, Location} from '@angular/common';
import { Component, inject, OnDestroy, OnInit } from '@angular/core'; import {Component, effect, inject, Signal, signal} from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import {ReactiveFormsModule} from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog'; import {MatDialogModule} from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input'; import {MatInputModule} from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatSnackBar } from '@angular/material/snack-bar'; import {MatSnackBar} from '@angular/material/snack-bar';
import { MatTabsModule } from '@angular/material/tabs'; import {MatTabsModule} from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip'; import {MatTooltipModule} from '@angular/material/tooltip';
import { ActivatedRoute, Router } from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import { BehaviorSubject, Observable, Subscription } from 'rxjs'; import {PublicationEditionComponent} from '../../components/publication-edition/publication-edition.component';
import { PublicationEditionComponent } from '../../components/publication-edition/publication-edition.component'; import {Publication} from '../../core/rest-services/publications/model/publication';
import { Publication } from '../../core/rest-services/publications/model/publication'; import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service';
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service'; import {toSignal} from "@angular/core/rxjs-interop";
@Component({ @Component({
selector: 'app-publication-update', selector: 'app-publication-update',
@@ -30,64 +30,62 @@ import { PublicationRestService } from '../../core/rest-services/publications/pu
templateUrl: './publication-update.component.html', templateUrl: './publication-update.component.html',
styleUrl: './publication-update.component.scss' styleUrl: './publication-update.component.scss'
}) })
export class PublicationUpdateComponent implements OnInit, OnDestroy { export class PublicationUpdateComponent {
private readonly publicationRestService = inject(PublicationRestService); readonly #activatedRoute = inject(ActivatedRoute);
private readonly activatedRoute = inject(ActivatedRoute); readonly #location = inject(Location);
private readonly location = inject(Location); readonly #publicationRestService = inject(PublicationRestService);
private readonly router = inject(Router); readonly #router = inject(Router);
private readonly snackBar = inject(MatSnackBar); readonly #snackBar = inject(MatSnackBar);
private isLoadingSubject = new BehaviorSubject<boolean>(false); #isLoading = signal(false);
private isSavingSubject = new BehaviorSubject<boolean>(false); #isSavingSubject = signal(false);
private subscriptions: Subscription[] = []; publication = signal<Publication | undefined>(undefined);
publication: Publication | undefined;
get isLoading$(): Observable<boolean> { get isLoading(): Signal<boolean> {
return this.isLoadingSubject.asObservable(); return this.#isLoading.asReadonly();
} }
get isSaving$(): Observable<boolean> { get isSaving(): Signal<boolean> {
return this.isSavingSubject.asObservable(); return this.#isSavingSubject.asReadonly();
} }
ngOnInit(): void { constructor() {
this.isLoadingSubject.next(true); const queryParams = toSignal(this.#activatedRoute.queryParamMap);
const activatedRouteSubscription = this.activatedRoute.paramMap.subscribe(params => { effect(() => {
let params = queryParams();
this.#isLoading.set(true);
if (params) {
const publicationId = params.get('publicationId'); const publicationId = params.get('publicationId');
if (publicationId == undefined) { if (publicationId == undefined) {
this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 }); this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000});
this.location.back(); this.#location.back();
} else { } else {
this.publicationRestService.getById(publicationId) this.#publicationRestService.getById(publicationId)
.then(publication => { .then(publication => {
this.publication = publication; this.publication.set(publication);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`; const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error) console.error(errorMessage, error)
}) })
.finally(() => this.isLoadingSubject.next(false)); .finally(() => this.#isLoading.set(false));
} }
});
this.subscriptions.push(activatedRouteSubscription);
} }
})
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
} }
onPublicationSave(publication: Publication): void { onPublicationSave(publication: Publication): void {
this.isSavingSubject.next(true); this.#isSavingSubject.set(true);
this.publicationRestService.update(publication) this.#publicationRestService.update(publication)
.then(() => { .then(() => {
this.snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, { duration: 5000 }); this.#snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, {duration: 5000});
this.router.navigate(['/home']); this.#router.navigate(['/home']);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occured while saving publication modifications.`; const errorMessage = $localize`An error occured while saving publication modifications.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
}) })
.finally(() => this.isSavingSubject.next(false)); .finally(() => this.#isSavingSubject.set(false));
} }
} }

8
frontend/src/app/pages/publication-update/publication-update.routes.ts
View File

@@ -1,7 +1,7 @@
import { Route } from "@angular/router"; import {Route} from "@angular/router";
import { PublicationUpdateComponent } from "./publication-update.component"; import {PublicationUpdateComponent} from "./publication-update.component";
import { authenticationGuard } from "../../core/guard/authentication.guard"; import {authenticationGuard} from "../../core/guard/authentication.guard";
export const ROUTES: Route[] = [ export const ROUTES: Route[] = [
{ path: '', component: PublicationUpdateComponent, canActivate: [authenticationGuard] } {path: '', component: PublicationUpdateComponent, canActivate: [authenticationGuard]}
] ]

6
frontend/src/app/pages/publication/publication.component.html
View File

@@ -4,7 +4,7 @@
} @else { } @else {
@if (publication(); as publication) { @if (publication(); as publication) {
<div class="card"> <div class="card">
<img src="/api/pictures/{{ publication.illustrationId }}" /> <img src="/api/pictures/{{ publication.illustrationId }}"/>
<header> <header>
<h1>{{ publication.title }}</h1> <h1>{{ publication.title }}</h1>
<h2>{{ publication.description }}</h2> <h2>{{ publication.description }}</h2>
@@ -21,7 +21,7 @@
<main [innerHTML]="publication.parsedText"></main> <main [innerHTML]="publication.parsedText"></main>
<footer> <footer>
<div class="metadata"> <div class="metadata">
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" /> <img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
<div class="posting-data"> <div class="posting-data">
<span i18n>Publication posted by {{ publication.author.name }}</span> <span i18n>Publication posted by {{ publication.author.name }}</span>
<span class="publication-date"> <span class="publication-date">
@@ -29,7 +29,7 @@
</span> </span>
</div> </div>
</div> </div>
@if (isAuthorAndUserEquals) { @if (isAuthorAndUserEquals()) {
<button type="button" <button type="button"
(click)="deletePublication()" (click)="deletePublication()"
matTooltip="Click to delete the publication" matTooltip="Click to delete the publication"

2
frontend/src/app/pages/publication/publication.component.scss
View File

@@ -11,7 +11,7 @@ $cardBorderRadius: .5em;
max-width: 80em; max-width: 80em;
width: 90%; width: 90%;
border-radius: .5em; border-radius: .5em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
img { img {
height: 12em; height: 12em;

32
frontend/src/app/pages/publication/publication.component.ts
View File

@@ -1,17 +1,17 @@
import { CommonModule, Location } from '@angular/common'; import {CommonModule, Location} from '@angular/common';
import {Component, OnDestroy, OnInit, inject, signal} from '@angular/core'; import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
import { MatRippleModule } from '@angular/material/core'; import {MatRippleModule} from '@angular/material/core';
import { MatDialog } from '@angular/material/dialog'; import {MatDialog} from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon'; import {MatIcon} from '@angular/material/icon';
import { MatProgressSpinner } from '@angular/material/progress-spinner'; import {MatProgressSpinner} from '@angular/material/progress-spinner';
import { MatSnackBar } from '@angular/material/snack-bar'; import {MatSnackBar} from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip'; import {MatTooltipModule} from '@angular/material/tooltip';
import { ActivatedRoute, RouterModule } from '@angular/router'; import {ActivatedRoute, RouterModule} from '@angular/router';
import { Subscription } from 'rxjs'; import {Subscription} from 'rxjs';
import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component'; import {ConfirmationDialog} from '../../components/confirmation-dialog/confirmation-dialog.component';
import { Publication } from '../../core/rest-services/publications/model/publication'; import {Publication} from '../../core/rest-services/publications/model/publication';
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service'; import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service';
import { AuthenticationService } from '../../core/service/authentication.service'; import {AuthenticationService} from '../../core/service/authentication.service';
declare let Prism: any; declare let Prism: any;
@@ -58,7 +58,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`An error occurred while loading publication...`; const errorMessage = $localize`An error occurred while loading publication...`;
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error); console.error(errorMessage, error);
}) })
.finally(() => { .finally(() => {
@@ -89,7 +89,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
const publication = this.publication(); const publication = this.publication();
if (response && publication?.id) { if (response && publication?.id) {
this.publicationRestService.delete(publication.id); this.publicationRestService.delete(publication.id);
this.snackBar.open($localize`Publication deleted`, $localize`Close`, { duration: 5000 }); this.snackBar.open($localize`Publication deleted`, $localize`Close`, {duration: 5000});
this.location.back(); this.location.back();
} }
}); });

10
frontend/src/app/pages/search-publications/search-publications.component.html
View File

@@ -1,10 +1,10 @@
<h1 i18n>Search results</h1> <h1 i18n>Search results</h1>
@if((isLoading$ | async) === true) { @if (isLoading()) {
<h2 i18n>Search in progress...</h2> <h2 i18n>Search in progress...</h2>
<mat-spinner></mat-spinner> <mat-spinner/>
} @else if((isLoaded$ | async) === true) { } @else if (isLoaded()) {
@if((publications$ | async)?.length) { @if (publications().length) {
<app-publication-list [publications$]="publications$"></app-publication-list> <app-publication-list [publications]="publications()"/>
} @else { } @else {
<span i18n>No any result.</span> <span i18n>No any result.</span>
} }

17
frontend/src/app/pages/search-publications/search-publications.component.ts
View File

@@ -2,9 +2,7 @@ import {CommonModule} from "@angular/common";
import {Component, effect, inject} from "@angular/core"; import {Component, effect, inject} from "@angular/core";
import {MatProgressSpinner} from "@angular/material/progress-spinner"; import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {Observable} from "rxjs";
import {PublicationListComponent} from "../../components/publication-list/publication-list.component"; import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
import {Publication} from "../../core/rest-services/publications/model/publication";
import {SearchPublicationsService} from "./search-publications.service"; import {SearchPublicationsService} from "./search-publications.service";
import {toSignal} from "@angular/core/rxjs-interop"; import {toSignal} from "@angular/core/rxjs-interop";
@@ -18,6 +16,9 @@ import {toSignal} from "@angular/core/rxjs-interop";
export class SearchPublicationsComponent { export class SearchPublicationsComponent {
private searchPublicationsService = inject(SearchPublicationsService); private searchPublicationsService = inject(SearchPublicationsService);
private activatedRoute = inject(ActivatedRoute); private activatedRoute = inject(ActivatedRoute);
publications = this.searchPublicationsService.publications;
isLoading = this.searchPublicationsService.isLoading;
isLoaded = this.searchPublicationsService.isLoaded;
constructor() { constructor() {
const queryParams = toSignal(this.activatedRoute.queryParamMap); const queryParams = toSignal(this.activatedRoute.queryParamMap);
@@ -35,16 +36,4 @@ export class SearchPublicationsComponent {
} }
}); });
} }
get publications$(): Observable<Publication[]> {
return this.searchPublicationsService.publications$;
}
get isLoading$(): Observable<boolean> {
return this.searchPublicationsService.isLoading$;
}
get isLoaded$(): Observable<boolean> {
return this.searchPublicationsService.isLoaded$;
}
} }

47
frontend/src/app/pages/search-publications/search-publications.service.ts
View File

@@ -1,48 +1,47 @@
import { inject, Injectable } from "@angular/core"; import {inject, Injectable, Signal, signal} from "@angular/core";
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
import { BehaviorSubject, Observable } from "rxjs"; import {Publication} from "../../core/rest-services/publications/model/publication";
import { Publication } from "../../core/rest-services/publications/model/publication"; import {MatSnackBar} from "@angular/material/snack-bar";
import { MatSnackBar } from "@angular/material/snack-bar";
@Injectable() @Injectable()
export class SearchPublicationsService { export class SearchPublicationsService {
private publicationRestService = inject(PublicationRestService); #snackBar = inject(MatSnackBar);
private publicationsSubject = new BehaviorSubject<Publication[]>([]); #publicationRestService = inject(PublicationRestService);
private isLoadingSubject = new BehaviorSubject<boolean>(false); #publications = signal<Publication[]>([]);
private isLoadedSubject = new BehaviorSubject<boolean>(false); #isLoading = signal(false);
private snackBar = inject(MatSnackBar); #isLoaded = signal(false);
get publications$(): Observable<Publication[]> { get publications(): Signal<Publication[]> {
return this.publicationsSubject.asObservable(); return this.#publications.asReadonly();
} }
get isLoading$(): Observable<boolean> { get isLoading(): Signal<boolean> {
return this.isLoadingSubject.asObservable(); return this.#isLoading.asReadonly();
} }
get isLoaded$(): Observable<boolean> { get isLoaded(): Signal<boolean> {
return this.isLoadedSubject.asObservable(); return this.#isLoaded.asReadonly();
} }
loadPublications(searchCriteria: string): void { loadPublications(searchCriteria: string): void {
this.isLoadingSubject.next(true); this.#isLoading.set(true);
this.isLoadedSubject.next(false); this.#isLoaded.set(false);
this.publicationsSubject.next([]); this.#publications.set([]);
this.publicationRestService.search(searchCriteria) this.#publicationRestService.search(searchCriteria)
.then(publications => { .then(publications => {
this.publicationsSubject.next(publications); this.#publications.set(publications);
}) })
.catch(error => { .catch(error => {
if (error.status !== 404) { if (error.status !== 404) {
const errorMessage = $localize`An error occured while retrieving publications.`; const errorMessage = $localize`An error occured while retrieving publications.`;
console.error(errorMessage, error); console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 }); this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
} }
}) })
.finally(() => { .finally(() => {
this.isLoadingSubject.next(false); this.#isLoading.set(false);
this.isLoadedSubject.next(true); this.#isLoaded.set(true);
}); });
} }
} }

8
frontend/src/app/pages/signin/signin.component.html
View File

@@ -6,7 +6,7 @@
Pseudo Pseudo
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required /> <input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required/>
</div> </div>
<div class="form-field"> <div class="form-field">
<mat-icon>mail</mat-icon> <mat-icon>mail</mat-icon>
@@ -14,7 +14,7 @@
Email address Email address
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="email" id="email" formControlName="email" autocomplete="email" required /> <input type="email" id="email" formControlName="email" autocomplete="email" required/>
</div> </div>
<div class="form-field"> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
@@ -22,7 +22,7 @@
Password Password
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="password" id="password" formControlName="password" required /> <input type="password" id="password" formControlName="password" required/>
</div> </div>
<div class="form-field"> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
@@ -30,7 +30,7 @@
Confirm password Confirm password
<span class="required">*</span> <span class="required">*</span>
</label> </label>
<input type="password" id="confirm-password" formControlName="confirmPassword" required /> <input type="password" id="confirm-password" formControlName="confirmPassword" required/>
</div> </div>
<div class="actions reversed"> <div class="actions reversed">
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button> <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>

28
frontend/src/app/pages/signin/signin.component.ts
View File

@@ -1,13 +1,13 @@
import { Component, OnDestroy, OnInit, inject } from '@angular/core'; import {Component, inject, OnDestroy, OnInit} from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import { MatIconModule } from '@angular/material/icon'; import {MatIconModule} from '@angular/material/icon';
import { RouterModule } from '@angular/router'; import {RouterModule} from '@angular/router';
import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs'; import {debounceTime, distinctUntilChanged, map, Subscription} from 'rxjs';
import { SigninService } from './signin.service'; import {SigninService} from './signin.service';
import { LoginService } from '../login/login.service'; import {LoginService} from '../login/login.service';
import { FormError } from '../../core/model/FormError'; import {FormError} from '../../core/model/FormError';
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component"; import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
import { MatRippleModule } from '@angular/material/core'; import {MatRippleModule} from '@angular/material/core';
@Component({ @Component({
selector: 'app-signin', selector: 'app-signin',
@@ -83,10 +83,10 @@ export class SigninComponent implements OnInit, OnDestroy {
const stateSubscription = this.signinService.state$ const stateSubscription = this.signinService.state$
.subscribe(state => { .subscribe(state => {
this.signinForm.controls['pseudo'].setValue(state.request.pseudo, { emitEvent: false }); this.signinForm.controls['pseudo'].setValue(state.request.pseudo, {emitEvent: false});
this.signinForm.controls['email'].setValue(state.request.email, { emitEvent: false }); this.signinForm.controls['email'].setValue(state.request.email, {emitEvent: false});
this.signinForm.controls['password'].setValue(state.request.password, { emitEvent: false }); this.signinForm.controls['password'].setValue(state.request.password, {emitEvent: false});
this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, { emitEvent: false }); this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, {emitEvent: false});
}); });
this.subscriptions.push(stateSubscription); this.subscriptions.push(stateSubscription);
} }

18
frontend/src/app/pages/signin/signin.service.ts
View File

@@ -1,12 +1,12 @@
import { Injectable, inject } from '@angular/core'; import {inject, Injectable} from '@angular/core';
import { SigninRequest } from '../../core/rest-services/user/model/signin.model'; import {SigninRequest} from '../../core/rest-services/user/model/signin.model';
import { FormError } from '../../core/model/FormError'; import {FormError} from '../../core/model/FormError';
import { BehaviorSubject, Observable } from 'rxjs'; import {BehaviorSubject, Observable} from 'rxjs';
import { copy } from '../../core/utils/ObjectUtils'; import {copy} from '../../core/utils/ObjectUtils';
import { UserRestService } from '../../core/rest-services/user/user.rest-service'; import {UserRestService} from '../../core/rest-services/user/user.rest-service';
import { MatSnackBar } from '@angular/material/snack-bar'; import {MatSnackBar} from '@angular/material/snack-bar';
import { Router } from '@angular/router'; import {Router} from '@angular/router';
import { LoginService } from '../login/login.service'; import {LoginService} from '../login/login.service';
export interface SigninState { export interface SigninState {
request: SigninRequest; request: SigninRequest;

2
frontend/src/design_system/form.scss
View File

@@ -6,7 +6,7 @@ form.cod-form {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 1em; gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
border-radius: .5em; border-radius: .5em;
padding: 1em 1.5em; padding: 1em 1.5em;
background-color: #ffffff; background-color: #ffffff;

8
frontend/src/index.html
View File

@@ -8,11 +8,11 @@
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="./assets/css/prism.css" rel="stylesheet" /> <link href="./assets/css/prism.css" rel="stylesheet"/>
</head> </head>
<body class="mat-typography"> <body class="mat-typography">
<app-root></app-root> <app-root></app-root>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
<script type="text/javascript" src="./assets/js/prism.js"></script> <script type="text/javascript" src="./assets/js/prism.js"></script>
</body> </body>
</html> </html>

6
frontend/src/main.ts
View File

@@ -1,8 +1,8 @@
/// <reference types="@angular/localize" /> /// <reference types="@angular/localize" />
import { bootstrapApplication } from '@angular/platform-browser'; import {bootstrapApplication} from '@angular/platform-browser';
import { appConfig } from './app/app.config'; import {appConfig} from './app/app.config';
import { AppComponent } from './app/app.component'; import {AppComponent} from './app/app.component';
bootstrapApplication(AppComponent, appConfig) bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err)); .catch((err) => console.error(err));

5
frontend/src/styles.scss
View File

@@ -1,7 +1,10 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@use './design_system/index.scss'; @use './design_system/index.scss';
html, body { height: 100%; } html, body {
height: 100%;
}
body { body {
margin: 0; margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif; font-family: Roboto, "Helvetica Neue", sans-serif;