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

Compare commits

base: florian:a2de24fd931a2886b6422440120ac4a330bb3c60
Branches Tags
florian:main florian:gradle-setup florian:trafic-logging florian:signals-conversion
...
compare: florian:main
Branches Tags
florian:main florian:gradle-setup florian:trafic-logging florian:signals-conversion

3 Commits
a2de24fd93 ... main

Author SHA1 Message Date
Florian THIERRY - Takiguchi
f33b55b1c8 Fix left side menu. (#13)
All checks were successful
Build and Deploy Java Gradle Application / build-and-deploy (push) Successful in 1m16s
Details
2026-02-03 16:14:43 +01:00
Florian THIERRY - Takiguchi
e2fd4fb29a fixing-ci-angular-21 (#12)
All checks were successful
Build and Deploy Java Gradle Application / build-and-deploy (push) Successful in 1m18s
Details 
Co-authored-by: Florian THIERRY <florian.thierry@actian.com>
Reviewed-on: #12
 2026-02-03 15:59:33 +01:00
Florian THIERRY - Takiguchi
0cce8b2982 Fixing Angular 21 by migrating all values by signals. (#11)
Some checks failed
Build and Deploy Java Gradle Application / build-and-deploy (push) Failing after 53s
Details
2026-02-03 15:07:55 +01:00
106 changed files with 4007 additions and 6434 deletions
Expand all files Collapse all files

2
Dockerfile-frontend
View File

@@ -1,4 +1,4 @@
FROM node:24-alpine AS builder
FROM node:25-alpine AS builder
WORKDIR /app
COPY frontend /app
RUN npm install

3
frontend/angular.json
View File

@@ -30,7 +30,6 @@
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"zone.js",
"@angular/localize/init"
],
"tsConfig": "tsconfig.app.json",
@@ -133,8 +132,6 @@
"builder": "@angular/build:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",

4147
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

42
frontend/package.json
View File

@@ -17,32 +17,26 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^21.0.6",
"@angular/cdk": "^21.0.5",
"@angular/common": "^21.0.6",
"@angular/compiler": "^21.0.6",
"@angular/core": "^21.0.6",
"@angular/forms": "^21.0.6",
"@angular/material": "^21.0.5",
"@angular/platform-browser": "^21.0.6",
"@angular/platform-browser-dynamic": "^21.0.6",
"@angular/router": "^21.0.6",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.1"
"@angular/animations": "^21.1.2",
"@angular/cdk": "^21.1.2",
"@angular/common": "^21.1.2",
"@angular/compiler": "^21.1.2",
"@angular/core": "^21.1.2",
"@angular/forms": "^21.1.2",
"@angular/material": "^21.1.2",
"@angular/platform-browser": "^21.1.2",
"@angular/platform-browser-dynamic": "^21.1.2",
"@angular/router": "^21.1.2",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
"devDependencies": {
"@angular/build": "^21.0.4",
"@angular/cli": "^21.0.4",
"@angular/compiler-cli": "^21.0.6",
"@angular/localize": "^21.0.6",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"@angular/build": "^21.1.2",
"@angular/cli": "^21.1.2",
"@angular/compiler-cli": "^21.1.2",
"@angular/localize": "^21.1.2",
"@types/jasmine": "~5.1.15",
"jasmine-core": "~5.13.0",
"typescript": "~5.9.3"
}
}

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

@@ -1,4 +1,3 @@
import {Component} from '@angular/core';
import {RouterOutlet} from '@angular/router';
import {HeaderComponent} from './components/header/header.component';

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

@@ -1,4 +1,4 @@
import { Component, inject, Input } from "@angular/core";
import {Component, inject} from "@angular/core";
import {MatRippleModule} from "@angular/material/core";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";

4
frontend/src/app/components/footer/footer.component.html
View File

@@ -1,8 +1,8 @@
<div i18n>
<span class="copy-left">&copy;</span>
2016 - 2024 All rights reserved
2016 - 2026 All rights reserved
-
2.1
2.2
<a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
<mat-icon>favorite</mat-icon>
</a>

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

@@ -12,10 +12,12 @@
display: flex;
flex-direction: row;
align-items: center;
gap: .2em;
.copy-left {
transform: rotate(180deg);
}
a {
text-decoration: none;
color: rgba(255, 255, 255, .6);

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

@@ -10,5 +10,4 @@ import { RouterModule } from '@angular/router';
styleUrl: './footer.component.scss'
})
export class FooterComponent {
}

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

@@ -1,4 +1,3 @@
import {Component, inject} from '@angular/core';
import {FormControl, ReactiveFormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';

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

@@ -10,13 +10,14 @@
<h1 i18n>Select an illustration</h1>
</header>
<div class="picture-container">
@if (isLoading) {
@if (isLoading()) {
<h2 i18n>Pictures loading...</h2>
<mat-spinner></mat-spinner>
} @else {
@if (pictures.length) {
@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 {
<h2 i18n>There is no any picture.</h2>

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

@@ -1,4 +1,4 @@
import { Component, inject, OnInit } from "@angular/core";
import {Component, inject, OnInit, signal} from "@angular/core";
import {Picture} from "../../../core/rest-services/picture/model/picture";
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBar} from "@angular/material/snack-bar";
@@ -24,12 +24,12 @@ export class PictureSelectionDialog implements OnInit {
private readonly snackBar = inject(MatSnackBar);
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
isLoading: boolean = false;
isLoaded: boolean = false;
isLoading = signal(false);
isLoaded = signal(false);
pictures: Picture[] = [];
ngOnInit(): void {
this.isLoading = true;
this.isLoading.set(true);
this.pictureRestService.getAllOfCurrentUser()
.then(pictures => {
this.pictures = pictures;
@@ -38,14 +38,14 @@ export class PictureSelectionDialog implements OnInit {
if (error.status === 401) {
this.dialogRef.close();
} else {
const errorMessage = $localize`An error occured while loading pictures.`;
const errorMessage = $localize`An error occurred while loading pictures.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
}
})
.finally(() => {
this.isLoading = false;
this.isLoaded = true;
this.isLoading.set(false);
this.isLoaded.set(true);
});
}
@@ -65,7 +65,7 @@ export class PictureSelectionDialog implements OnInit {
this.dialogRef.close(pictureId);
})
.catch(error => {
const errorMessage = $localize`A technical error occured while uploading your picture.`;
const errorMessage = $localize`A technical error occurred while uploading your picture.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
});

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

@@ -1,6 +1,6 @@
<form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
<header>
<h1>{{title}}</h1>
<h1>{{ title() }}</h1>
</header>
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
@@ -29,7 +29,8 @@
</div>
<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()"
matTooltip="Click to change illustration"
i18n-matTooltip/>
@@ -103,24 +104,24 @@
<mat-tab label="Previewing" i18n-label>
<div class="preview">
@if ((isPreviewing$ | async) === true) {
@if (isPreviewing()) {
<div class="preview-loading">
<h2 i18n>Preview is loading...</h2>
<mat-spinner></mat-spinner>
</div>
} @else {
<img class="illustration" src="/api/pictures/{{ publication.illustrationId }}" />
<img class="illustration" src="/api/pictures/{{ publication().illustrationId }}"/>
<header>
<h1>{{ publication.title }}</h1>
<h2>{{ publication.description }}</h2>
<h1>{{ publication().title }}</h1>
<h2>{{ publication().description }}</h2>
</header>
<main [innerHTML]="publicationInEdition.parsedText"></main>
<main [innerHTML]="publicationInEdition().parsedText"></main>
}
</div>
</mat-tab>
</mat-tab-group>
<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"
class="cod-button secondary"
(click)="goPreviousLocation()"

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

@@ -1,5 +1,5 @@
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 {MatDialogModule} from "@angular/material/dialog";
import {MatIconModule} from "@angular/material/icon";
@@ -8,12 +8,11 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
import {MatSelectModule} from "@angular/material/select";
import {MatTabsModule} from "@angular/material/tabs";
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 { 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 {SubmitButtonComponent} from "../submit-button/submit-button.component";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import {PublicationEditionService} from "./publication-edition.service";
import {MatRippleModule} from "@angular/material/core";
@@ -36,36 +35,37 @@ import { MatRippleModule } from "@angular/material/core";
],
providers: [PublicationEditionService]
})
export class PublicationEditionComponent implements OnChanges, OnDestroy {
@Input()
publication!: Publication;
@Input()
title!: string;
@Input()
isSaving$: Observable<boolean> = of(false);
@Output()
publicationSave = new EventEmitter<Publication>();
export class PublicationEditionComponent {
readonly #categoryService = inject(CategoryService);
readonly #location = inject(Location);
readonly #publicationEditionService = inject(PublicationEditionService);
publicationInEdition!: Publication;
private readonly categoryService = inject(CategoryService);
private readonly location = inject(Location);
private readonly publicationEditionService = inject(PublicationEditionService);
private subscriptions: Subscription[] = [];
publication = input.required<Publication>();
title = input.required<string>();
isSaving = input.required<boolean>();
publicationSave = output<Publication>();
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(publication);
}
});
}
get publicationEditionForm(): FormGroup {
return this.publicationEditionService.publicationEditionForm;
}
get isLoading$(): Observable<boolean> {
return this.publicationEditionService.isLoading$;
}
get isPreviewing$(): Observable<boolean> {
return this.publicationEditionService.isPreviewing$;
return this.#publicationEditionService.publicationEditionForm;
}
get categories$(): Observable<Category[]> {
return this.categoryService.categories$
return this.#categoryService.categories$
.pipe(
map(categories =>
categories.filter(category => category.subCategories.length == 0)
@@ -88,41 +88,28 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
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 {
this.location.back();
this.#location.back();
}
insertTitle(titleNumber: number): void {
this.publicationEditionService.insertTitle(titleNumber);
this.#publicationEditionService.insertTitle(titleNumber);
}
selectAPicture(): void {
this.publicationEditionService.selectAPicture();
this.#publicationEditionService.selectAPicture();
}
insertLink(): void {
this.publicationEditionService.insertLink();
this.#publicationEditionService.insertLink();
}
displayCodeBlockDialog(): void {
this.publicationEditionService.displayCodeBlockDialog();
this.#publicationEditionService.displayCodeBlockDialog();
}
displayPictureSectionDialog(): void {
this.publicationEditionService.displayPictureSectionDialog();
this.#publicationEditionService.displayPictureSectionDialog();
}
updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
@@ -132,17 +119,17 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
const positionStart = textarea.selectionStart;
const positionEnd = textarea.selectionEnd;
this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
}
}
save(): void {
this.publicationSave.emit(this.publicationEditionService.editedPublication);
this.publicationSave.emit(this.#publicationEditionService.editedPublication);
}
onTabChange(tabSelectedIndex: number): void {
if (tabSelectedIndex === 1) {
this.publicationEditionService.loadPreview();
this.#publicationEditionService.loadPreview();
}
}
}

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

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

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

@@ -1,4 +1,4 @@
@for(publication of publications$ | async; track publication) {
@for (publication of publications(); track publication.id) {
<a [routerLink]="['/publications/' + publication.id]" class="publication">
<img src="/api/pictures/{{ publication.illustrationId }}"/>
<div class="body">

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

@@ -1,6 +1,5 @@
import { Component, Input } from "@angular/core";
import {Component, input} from "@angular/core";
import {Publication} from "../../core/rest-services/publications/model/publication";
import { Observable } from "rxjs";
import {CommonModule} from "@angular/common";
import {RouterModule} from "@angular/router";
import {MatTooltipModule} from "@angular/material/tooltip";
@@ -12,6 +11,5 @@ import { MatTooltipModule } from "@angular/material/tooltip";
imports: [CommonModule, RouterModule, MatTooltipModule]
})
export class PublicationListComponent {
@Input()
publications$!: Observable<Publication[]>;
publications = input.required<Publication[]>();
}

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

@@ -1,6 +1,6 @@
@for(category of categories$ | async; track category) {
@for (category of categories(); track category.id) {
<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)="setOpened(category)">
{{ category.name }}
<mat-icon>chevron_right</mat-icon>
</div>

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

@@ -1,8 +1,7 @@
import {CommonModule} from "@angular/common";
import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
import {Component, inject, OnInit, output, Signal} from "@angular/core";
import {MatIconModule} from "@angular/material/icon";
import {DisplayableCategory, SideMenuService} from "../side-menu.service";
import { Observable } from "rxjs";
import {RouterModule} from "@angular/router";
@Component({
@@ -16,45 +15,44 @@ import { RouterModule } from "@angular/router";
styleUrl: './categories-menu.component.scss'
})
export class CategoriesMenuComponent implements OnInit {
private sideMenuService = inject(SideMenuService);
@Output()
categoryClicked = new EventEmitter<void>();
readonly #sideMenuService = inject(SideMenuService);
categoryClicked = output<void>();
ngOnInit(): void {
this.sideMenuService.loadCategories();
this.#sideMenuService.loadCategories();
}
get categories$(): Observable<DisplayableCategory[]> {
return this.sideMenuService.categories$;
get categories(): Signal<DisplayableCategory[]> {
return this.#sideMenuService.categories;
}
setOpenned(category: DisplayableCategory): void {
setOpened(category: DisplayableCategory): void {
if (category.isOpenned) {
const categoryDiv = document.getElementById(`category-${category.id}`);
if (categoryDiv) {
this.closeAccordion(categoryDiv);
this.#closeAccordion(categoryDiv);
}
} else {
const categoriesDivs = document.getElementsByClassName('category-header');
Array.from(categoriesDivs)
.map(category => category as HTMLElement)
.forEach(categoryDiv => this.closeAccordion(categoryDiv));
.forEach(categoryDiv => this.#closeAccordion(categoryDiv));
const categoryDiv = document.getElementById(`category-${category.id}`);
if (categoryDiv) {
this.openAccordion(categoryDiv);
this.#openAccordion(categoryDiv);
}
}
this.sideMenuService.setOpenned(category);
this.#sideMenuService.setOpened(category);
}
private closeAccordion(categoryDiv: HTMLElement): void {
#closeAccordion(categoryDiv: HTMLElement): void {
const divContent = categoryDiv?.nextElementSibling as HTMLElement;
divContent.style.maxHeight = '0';
}
private openAccordion(categoryDiv: HTMLElement): void {
#openAccordion(categoryDiv: HTMLElement): void {
const divContent = categoryDiv?.nextElementSibling as HTMLElement;
divContent.style.maxHeight = `${divContent.scrollHeight}px`;
}

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

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

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

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import {Component, signal} from '@angular/core';
import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip';
import {RouterModule} from '@angular/router';
@@ -18,13 +18,13 @@ import { MatRippleModule } from '@angular/material/core';
]
})
export class SideMenuComponent {
isOpenned: boolean = false;
isOpened = signal(false);
open(): void {
this.isOpenned = true;
this.isOpened.set(true);
}
close(): void {
this.isOpenned = false;
this.isOpened.set(false);
}
}

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

@@ -1,6 +1,5 @@
import { Injectable, inject } from '@angular/core';
import {inject, Injectable, Signal, signal} from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';
import { BehaviorSubject, Observable } from 'rxjs';
import {CategoryRestService} from '../../core/rest-services/category/category.rest-service';
import {Category} from '../../core/rest-services/category/model/category';
@@ -20,68 +19,60 @@ export interface DisplayableSubCategory {
providedIn: 'root'
})
export class SideMenuService {
private categoryRestService = inject(CategoryRestService);
private snackBar = inject(MatSnackBar);
private categoriesSubject = new BehaviorSubject<DisplayableCategory[]>([]);
private isLoadingSubject = new BehaviorSubject<boolean>(false);
private isLoadedSubject = new BehaviorSubject<boolean>(false);
readonly #categoryRestService = inject(CategoryRestService);
readonly #snackBar = inject(MatSnackBar);
#categories = signal<DisplayableCategory[]>([]);
#isLoading = signal(false);
isLoaded = signal(false);
private mapToDisplayableCategory(category: Category): DisplayableCategory {
#mapToDisplayableCategory(category: Category): DisplayableCategory {
return {
id: category.id,
name: category.name,
subCategories: category.subCategories.map(subCategory => this.mapToDisplayableSubCategory(subCategory)),
subCategories: category.subCategories.map(subCategory => this.#mapToDisplayableSubCategory(subCategory)),
isOpenned: false
};
}
private mapToDisplayableSubCategory(subCategory: Category): DisplayableSubCategory {
#mapToDisplayableSubCategory(subCategory: Category): DisplayableSubCategory {
return {
id: subCategory.id,
name: subCategory.name
}
}
private get categories(): DisplayableCategory[] {
return this.categoriesSubject.value;
get categories(): Signal<DisplayableCategory[]> {
return this.#categories.asReadonly();
}
private save(categories: DisplayableCategory[]): void {
this.categoriesSubject.next(categories);
}
get categories$(): Observable<DisplayableCategory[]> {
return this.categoriesSubject.asObservable();
}
get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable();
get isLoading(): Signal<boolean> {
return this.#isLoading.asReadonly();
}
loadCategories(): void {
this.isLoadingSubject.next(true);
this.isLoadedSubject.next(false);
this.#isLoading.set(true);
this.isLoaded.set(false);
this.categoryRestService.getCategories()
this.#categoryRestService.getCategories()
.then(categories => {
const displayableCategories = categories
.filter(category => category.subCategories?.length)
.map(category => this.mapToDisplayableCategory(category));
this.categoriesSubject.next(displayableCategories);
.map(category => this.#mapToDisplayableCategory(category));
this.#categories.set(displayableCategories);
})
.catch(error => {
const errorMessage = $localize`An error occured while loading categories.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
})
.finally(() => {
this.isLoadingSubject.next(false);
this.isLoadedSubject.next(true);
this.#isLoading.set(false);
this.isLoaded.set(true);
});
}
setOpenned(category: DisplayableCategory): void {
const categories = this.categories;
setOpened(category: DisplayableCategory): void {
const categories = this.#categories();
const matchingCategory = categories.find(categoryTemp => categoryTemp.id === category.id);
if (matchingCategory) {
const actualOpennedCategory = categories.find(category => category.isOpenned);
@@ -91,7 +82,7 @@ export class SideMenuService {
categories.forEach(categoryTemp => categoryTemp.isOpenned = false);
matchingCategory.isOpenned = true;
}
this.save(categories);
this.#categories.set(categories);
}
}
}

8
frontend/src/app/components/submit-button/submit-button.component.html
View File

@@ -1,10 +1,10 @@
<button type="submit"
class="cod-button {{color}}"
[disabled]="disabled || requestPending"
class="cod-button {{color()}}"
[disabled]="disabled() || requestPending()"
(click)="click.emit()"
matRipple>
@if (requestPending) {
<mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
@if (requestPending()) {
<mat-spinner class="spinner {{color()}}" [diameter]="25"></mat-spinner>
}
<span>
<ng-content/>

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

@@ -1,5 +1,4 @@
import { Component, EventEmitter, Input, Output } from "@angular/core";
import {Component, input, output} from "@angular/core";
import {MatRippleModule} from "@angular/material/core";
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
@@ -13,10 +12,9 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
]
})
export class SubmitButtonComponent {
@Input() requestPending: boolean = false;
@Input() label: string = '';
@Input() disabled: boolean = false;
@Input() color?: 'secondary';
@Output() click = new EventEmitter<void>();
requestPending = input.required<boolean>();
label = input<string>();
disabled = input<boolean>(false);
color = input<'secondary' | undefined>('secondary');
click = output<void>();
}

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

@@ -1,7 +1,6 @@
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
import {inject, Injectable} from '@angular/core';
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 {AuthenticationService} from '../service/authentication.service';
import {Router} from '@angular/router';

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

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

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

@@ -1,4 +1,4 @@
import { HttpClient, HttpParams } from "@angular/common/http";
import {HttpClient} from "@angular/common/http";
import {inject, Injectable} from "@angular/core";
import {Picture} from "./model/picture";
import {lastValueFrom} from "rxjs";

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

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

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

@@ -1,6 +1,6 @@
import {HttpClient, HttpParams} from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { last, lastValueFrom } from 'rxjs';
import {inject, Injectable} from '@angular/core';
import {lastValueFrom} from 'rxjs';
import {Publication} from './model/publication';
import {PreviewContentRequest, PreviewContentResponse} from './model/preview';

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

@@ -1,5 +1,5 @@
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 {lastValueFrom} from "rxjs";
import {SigninRequest} from "./model/signin.model";

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

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

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

@@ -1,4 +1,4 @@
import { Component, OnInit, inject } from '@angular/core';
import {Component, inject, OnInit} from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {AuthenticationService} from '../../core/service/authentication.service';
import {Router} from '@angular/router';

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
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 {MatSnackBarModule} from '@angular/material/snack-bar';
import { Subscription, debounceTime, map } from 'rxjs';
import {debounceTime, map, Subscription} from 'rxjs';
import {LoginService} from './login.service';
import {MatIconModule} from '@angular/material/icon';
import {RouterModule} from '@angular/router';

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

@@ -1,4 +1,4 @@
import { Injectable, inject } from '@angular/core';
import {inject, Injectable} from '@angular/core';
import {BehaviorSubject, Observable} from 'rxjs';
import {copy} from '../../core/utils/ObjectUtils';
import {FormError} from '../../core/model/FormError';

6
frontend/src/app/pages/my-publications/my-publications.component.html
View File

@@ -9,12 +9,12 @@
+
</a>
@if ((isLoading$ | async) === true) {
@if (isLoading()) {
<h2 i18n>Publication loading...</h2>
<mat-spinner></mat-spinner>
} @else {
@if ((isLoaded$ | async) === true) {
<app-publication-list [publications$]="publications$"></app-publication-list>
@if (isLoaded()) {
<app-publication-list [publications]="publications()"></app-publication-list>
} @else {
<h2 i18n>There is no any publication...</h2>
}

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

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

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

@@ -1,57 +1,56 @@
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 {AuthenticationService} from "../../core/service/authentication.service";
import { BehaviorSubject, Observable } from "rxjs";
import {Publication} from "../../core/rest-services/publications/model/publication";
import {Router} from "@angular/router";
import {MatSnackBar} from "@angular/material/snack-bar";
@Injectable()
export class MyPublicationsService {
private readonly authenticationService = inject(AuthenticationService);
private readonly publicationRestService = inject(PublicationRestService);
private readonly snackBar = inject(MatSnackBar);
private readonly router = inject(Router);
private publicationsSubject = new BehaviorSubject<Publication[]>([]);
private isLoadingSubject = new BehaviorSubject<boolean>(false);
private isLoadedSubject = new BehaviorSubject<boolean>(false);
readonly #authenticationService = inject(AuthenticationService);
readonly #publicationRestService = inject(PublicationRestService);
readonly #snackBar = inject(MatSnackBar);
readonly #router = inject(Router);
#publications = signal<Publication[]>([]);
#isLoading = signal(false);
#isLoaded = signal(false);
get publications$(): Observable<Publication[]> {
return this.publicationsSubject.asObservable();
get publications(): Signal<Publication[]> {
return this.#publications.asReadonly();
}
get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable();
get isLoading(): Signal<boolean> {
return this.#isLoading.asReadonly();
}
get isLoaded$(): Observable<boolean> {
return this.isLoadedSubject.asObservable();
get isLoaded(): Signal<boolean> {
return this.#isLoaded.asReadonly();
}
loadAuthenticatedUserPublications(): void {
const authenticatedUser = this.authenticationService.getAuthenticatedUser();
const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
if (authenticatedUser) {
this.isLoadingSubject.next(true);
this.isLoadedSubject.next(false);
this.#isLoading.set(true);
this.#isLoaded.set(false);
const query = `author_id=${authenticatedUser.id}`;
this.publicationRestService.search(query)
this.#publicationRestService.search(query)
.then(publications => {
this.publicationsSubject.next(publications);
this.#publications.set(publications);
})
.catch(error => {
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);
})
.finally(() => {
this.isLoadingSubject.next(false);
this.isLoadedSubject.next(true);
this.#isLoading.set(false);
this.#isLoaded.set(true);
});
} else {
this.authenticationService.unauthenticate();
this.snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
this.router.navigate(['/login']);
this.#authenticationService.unauthenticate();
this.#snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
this.#router.navigate(['/login']);
}
}
}

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

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

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

@@ -1,14 +1,12 @@
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 {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 { BehaviorSubject, Observable, Subscription } from "rxjs";
import { Publication } from "../../core/rest-services/publications/model/publication";
import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
import {AuthenticationService} from "../../core/service/authentication.service";
import {Author} from "../../core/rest-services/publications/model/author";
@Component({
selector: 'app-publication-creation',
templateUrl: './publication-creation.component.html',
@@ -18,57 +16,38 @@ import { Author } from "../../core/rest-services/publications/model/author";
]
})
export class PublicationCreationComponent implements OnInit {
private readonly authenticationService = inject(AuthenticationService);
private readonly publicationRestService = inject(PublicationRestService);
private readonly router = inject(Router);
private readonly snackBar = inject(MatSnackBar);
private isSavingSubject = new BehaviorSubject<boolean>(false);
private subscriptions: Subscription[] = [];
publication!: Publication;
get isSaving$(): Observable<boolean> {
return this.isSavingSubject.asObservable();
}
readonly #authenticationService = inject(AuthenticationService);
readonly #publicationRestService = inject(PublicationRestService);
readonly #router = inject(Router);
readonly #snackBar = inject(MatSnackBar);
isSaving = signal(false);
publication = signal<Publication>(DEFAULT_PUBLICATION);
ngOnInit(): void {
const authenticatedUser = this.authenticationService.getAuthenticatedUser();
const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
if (authenticatedUser) {
const author: Author = {
id: authenticatedUser.id,
name: authenticatedUser.pseudo,
image: authenticatedUser.photoId ?? ''
};
this.publication = {
id: '',
key: '',
title: '',
text: '',
parsedText: '',
description: '',
creationDate: new Date(),
illustrationId: '',
categoryId: '',
author
};
const newPublication: Publication = {...DEFAULT_PUBLICATION, author};
this.publication.set(newPublication);
}
}
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
}
onPublicationSave(publication: Publication): void {
this.isSavingSubject.next(true);
this.publicationRestService.create(publication)
this.isSaving.set(true);
this.#publicationRestService.create(publication)
.then(() => {
this.snackBar.open($localize`Publication created succesfully!`, $localize`Close`, { duration: 5000 });
this.router.navigate(['/my-publications']);
this.#snackBar.open($localize`Publication created succesfully!`, $localize`Close`, {duration: 5000});
this.#router.navigate(['/my-publications']);
})
.catch(error => {
const errorMessage = $localize`An error occured while saving new publication.`;
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));
}
}

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>
<mat-spinner></mat-spinner>
}
@else {
@if (publication) {
<mat-spinner/>
} @else {
@if (publication(); as publication) {
<app-publication-edition
title="Update publication {{ publication.title }}"
[publication]="publication"
[isSaving$]="isSaving$"
[isSaving]="isSaving()"
(publicationSave)="onPublicationSave($event)"
i18n-title>
</app-publication-edition>
}
@else {
i18n-title
/>
} @else {
<div class="loading-failed">
<h1 i18n>Publication failed to load...</h1>
</div>

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

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

@@ -1,14 +1,14 @@
@if (isLoading) {
@if (isLoading()) {
<h2 i18n>Publication content loading...</h2>
<mat-spinner></mat-spinner>
} @else {
@if (publication) {
@if (publication(); as publication) {
<div class="card">
<img src="/api/pictures/{{ publication.illustrationId }}"/>
<header>
<h1>{{ publication.title }}</h1>
<h2>{{ publication.description }}</h2>
@if (isAuthorAndUserEquals) {
@if (isAuthorAndUserEquals()) {
<a [routerLink]="['edit']"
class="button action"
matTooltip="Click to edit the publication"
@@ -29,7 +29,7 @@
</span>
</div>
</div>
@if (isAuthorAndUserEquals) {
@if (isAuthorAndUserEquals()) {
<button type="button"
(click)="deletePublication()"
matTooltip="Click to delete the publication"

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

@@ -1,5 +1,5 @@
import {CommonModule, Location} from '@angular/common';
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
import {MatRippleModule} from '@angular/material/core';
import {MatDialog} from '@angular/material/dialog';
import {MatIcon} from '@angular/material/icon';
@@ -37,9 +37,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
private readonly snackBar = inject(MatSnackBar);
private paramMapSubscription?: Subscription;
private afterDialogCloseSubscription?: Subscription;
isLoading: boolean = false;
isAuthorAndUserEquals: boolean = false;
publication?: Publication;
isLoading = signal(false);
isAuthorAndUserEquals = signal(false);
publication = signal<Publication | null>(null);
ngOnInit(): void {
this.paramMapSubscription = this.activatedRoute
@@ -48,12 +48,12 @@ export class PublicationComponent implements OnInit, OnDestroy {
const publicationId = params.get('publicationId');
if (publicationId) {
this.isLoading = true;
this.isLoading.set(true);
this.publicationRestService.getById(publicationId)
.then(publication => {
this.publication = publication;
this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
this.publication.set(publication);
this.isAuthorAndUserEquals.set(this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id);
setTimeout(() => Prism.highlightAll(), 100);
})
.catch(error => {
@@ -62,7 +62,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
console.error(errorMessage, error);
})
.finally(() => {
this.isLoading = false;
this.isLoading.set(false);
});
}
});
@@ -86,8 +86,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
this.afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(response => {
if (response && this.publication?.id) {
this.publicationRestService.delete(this.publication.id);
const publication = this.publication();
if (response && publication?.id) {
this.publicationRestService.delete(publication.id);
this.snackBar.open($localize`Publication deleted`, $localize`Close`, {duration: 5000});
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>
@if((isLoading$ | async) === true) {
@if (isLoading()) {
<h2 i18n>Search in progress...</h2>
<mat-spinner></mat-spinner>
} @else if((isLoaded$ | async) === true) {
@if((publications$ | async)?.length) {
<app-publication-list [publications$]="publications$"></app-publication-list>
<mat-spinner/>
} @else if (isLoaded()) {
@if (publications().length) {
<app-publication-list [publications]="publications()"/>
} @else {
<span i18n>No any result.</span>
}

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

@@ -1,11 +1,10 @@
import {CommonModule} from "@angular/common";
import { Component, inject, OnDestroy, OnInit } from "@angular/core";
import {Component, effect, inject} from "@angular/core";
import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {ActivatedRoute} from "@angular/router";
import { Observable, Subscription } from "rxjs";
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 {toSignal} from "@angular/core/rxjs-interop";
@Component({
selector: 'app-search-publications',
@@ -14,14 +13,18 @@ import { SearchPublicationsService } from "./search-publications.service";
imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
providers: [SearchPublicationsService]
})
export class SearchPublicationsComponent implements OnInit, OnDestroy {
export class SearchPublicationsComponent {
private searchPublicationsService = inject(SearchPublicationsService);
private activatedRoute = inject(ActivatedRoute);
private queryParamsSubscription?: Subscription;
publications = this.searchPublicationsService.publications;
isLoading = this.searchPublicationsService.isLoading;
isLoaded = this.searchPublicationsService.isLoaded;
ngOnInit(): void {
this.queryParamsSubscription = this.activatedRoute.queryParamMap
.subscribe(params => {
constructor() {
const queryParams = toSignal(this.activatedRoute.queryParamMap);
effect(() => {
let params = queryParams();
if (params) {
const categoryId = params.get('category-id');
if (categoryId) {
this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
@@ -30,22 +33,7 @@ export class SearchPublicationsComponent implements OnInit, OnDestroy {
if (query) {
this.searchPublicationsService.loadPublications(query);
}
}
});
}
ngOnDestroy(): void {
this.queryParamsSubscription?.unsubscribe();
}
get publications$(): Observable<Publication[]> {
return this.searchPublicationsService.publications$;
}
get isLoading$(): Observable<boolean> {
return this.searchPublicationsService.isLoading$;
}
get isLoaded$(): Observable<boolean> {
return this.searchPublicationsService.isLoaded$;
}
}

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

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

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

@@ -1,8 +1,8 @@
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 {MatIconModule} from '@angular/material/icon';
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 {LoginService} from '../login/login.service';
import {FormError} from '../../core/model/FormError';

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

@@ -1,4 +1,4 @@
import { Injectable, inject } from '@angular/core';
import {inject, Injectable} from '@angular/core';
import {SigninRequest} from '../../core/rest-services/user/model/signin.model';
import {FormError} from '../../core/model/FormError';
import {BehaviorSubject, Observable} from 'rxjs';

6
frontend/src/locale/messages-fr.json
View File

@@ -3,7 +3,7 @@
"translations": {
"3603720768157919481": "Non",
"4861926948802653243": "Oui",
"6130235414952256120": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 Tous droits réservés - 2.1 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
"9101236728284262962": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2026 Tous droits réservés - 2.2 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
"9214089025589249203": "Les indicateurs de vie du site seront disponibles ultérieurement...",
"1711651175531679766": "La documentation sera disponible ultérieurement...",
"6299155290121808295": "Développements realisés par",
@@ -22,8 +22,8 @@
"4111988153902305972": "Choisir cette illustation",
"4491342806775118195": "Il n'y a aucune image.",
"5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Ajouter une nouvelle image",
"6852365376059142995": "Une erreur est survenue lors du chargements de vos images.",
"6198966268398913224": "Une erreur technique est survenue lors de l'ajout de votre image.",
"2175978098886350409": "Une erreur est survenue lors du chargements de vos images.",
"2334964899406832924": "Une erreur technique est survenue lors de l'ajout de votre image.",
"3603937053948195893": "Édition",
"5701618810648052610": "Titre",
"4902817035128594900": "Description",

6
frontend/src/locale/messages.json
View File

@@ -3,7 +3,7 @@
"translations": {
"3603720768157919481": " No ",
"4861926948802653243": " Yes ",
"6130235414952256120": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 All rights reserved - 2.1 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
"9101236728284262962": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2026 All rights reserved - 2.2 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
"9214089025589249203": "Health checking will be available in future...",
"1711651175531679766": "Documentation will be available in future...",
"6299155290121808295": "Development realised by",
@@ -22,8 +22,8 @@
"4111988153902305972": "Choose this illustration",
"4491342806775118195": "There is no any picture.",
"5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Add new picture ",
"6852365376059142995": "An error occured while loading pictures.",
"6198966268398913224": "A technical error occured while uploading your picture.",
"2175978098886350409": "An error occurred while loading pictures.",
"2334964899406832924": "A technical error occurred while uploading your picture.",
"3603937053948195893": "Edition",
"5701618810648052610": "Title",
"4902817035128594900": "Description",

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 */
@use './design_system/index.scss';
html, body { height: 100%; }
html, body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;