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

Compare commits

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

2 Commits
main ... e11ac03a9e

Author SHA1 Message Date
Florian THIERRY
e11ac03a9e Upgrade angular material. 2024-09-24 22:38:31 +02:00
Florian THIERRY
1be41381e5 Upgrade angular. 2024-09-24 22:38:08 +02:00
118 changed files with 12745 additions and 6802 deletions
Expand all files Collapse all files

75
.gitea/workflows/build-and-deploy.yml
View File

@@ -1,75 +0,0 @@
name: Build and Deploy Java Gradle Application
on:
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: 📄 Checkout code
uses: actions/checkout@v4
- name: 📄 Checkout configuration
env:
SSH_PRIVATE_KEY: ${{ secrets.PROD_PROPERTIES_SSH_KEY }}
run: |
mkdir -p ~/.ssh
echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
git clone -b hexagonal-reforged ssh://gitea@gitea.takiguchi.ovh:12960/Codiki/codiki-properties.git --config core.sshCommand='ssh -o StrictHostKeyChecking=no'
- name: 📄 Edit configuration
run: |
sed -i "s/<POSTGRES_PASSWORD>/$(cat ./codiki-properties/passwords/postgresql/codiki_user)/g" ./codiki-properties/application-prod.yml
cp ./codiki-properties/application-prod.yml ./backend/codiki-launcher/src/main/resources/application.yml
sed -i "s/<POSTGRES_ADMIN_PASSWORD>/$(cat ./codiki-properties/passwords/postgresql/codiki_admin)/g" ./docker-compose.yml
- name: 🔨 Build backend docker image
run: |
sudo /usr/bin/docker build -t codiki-backend -f ./Dockerfile-backend . --no-cache
- name: 📦 Extract backend docker image into archive
run: |
sudo /usr/bin/docker save codiki-backend:latest -o ./codiki-backend.tar
- name: 🔨 Build frontend docker image
run: |
sudo /usr/bin/docker build -t codiki-frontend -f ./Dockerfile-frontend . --no-cache
- name: 📦 Extract frontend docker image into archive
run: |
sudo /usr/bin/docker save codiki-frontend:latest -o ./codiki-frontend.tar
- name: 📤 Transfer artifacts to remote server
env:
SSH_PRIVATE_KEY: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
REMOTE_USER: ${{ secrets.PROD_REMOTE_USER }}
REMOTE_HOST: ${{ secrets.PROD_REMOTE_HOST }}
REMOTE_PORT: ${{ secrets.PROD_REMOTE_PORT }}
REMOTE_PATH: ${{ secrets.PROD_REMOTE_PATH }}
run: |
mkdir -p ~/.ssh
echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
scp -o StrictHostKeyChecking=no -P $REMOTE_PORT ./codiki-backend.tar $REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH
scp -o StrictHostKeyChecking=no -P $REMOTE_PORT ./codiki-frontend.tar $REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH
scp -o StrictHostKeyChecking=no -P $REMOTE_PORT ./docker-compose.yml $REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH
- name: 🚀 Launch application onto remote server
env:
SSH_PRIVATE_KEY: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
REMOTE_USER: ${{ secrets.PROD_REMOTE_USER }}
REMOTE_HOST: ${{ secrets.PROD_REMOTE_HOST }}
REMOTE_PORT: ${{ secrets.PROD_REMOTE_PORT }}
REMOTE_PATH: ${{ secrets.PROD_REMOTE_PATH }}
run: |
ssh -o StrictHostKeyChecking=no $REMOTE_HOST -l $REMOTE_USER -p $REMOTE_PORT << EOC
cd $REMOTE_PATH
sudo /usr/bin/docker load < $REMOTE_PATH/codiki-backend.tar
sudo /usr/bin/docker load < $REMOTE_PATH/codiki-frontend.tar
sudo /usr/bin/docker compose down
sudo /usr/bin/docker compose up --detach
EOC

2
Dockerfile-backend
View File

@@ -1,4 +1,4 @@
FROM maven:3.9.11-eclipse-temurin-21 AS builder FROM maven:3.9.9-eclipse-temurin-21 AS builder
WORKDIR /app WORKDIR /app
COPY backend/pom.xml /app/ COPY backend/pom.xml /app/
COPY backend/codiki-application /app/codiki-application COPY backend/codiki-application /app/codiki-application

4
Dockerfile-frontend
View File

@@ -1,11 +1,11 @@
FROM node:25-alpine AS builder FROM node:22-alpine AS builder
WORKDIR /app WORKDIR /app
COPY frontend /app COPY frontend /app
RUN npm install RUN npm install
RUN npm run build-prod-en RUN npm run build-prod-en
RUN npm run build-prod-fr RUN npm run build-prod-fr
FROM nginx:1.29-alpine AS final FROM nginx:1.27-alpine AS final
WORKDIR /app WORKDIR /app
COPY --from=builder /app/dist/codiki/en/browser /usr/share/nginx/html/en/ COPY --from=builder /app/dist/codiki/en/browser /usr/share/nginx/html/en/
COPY --from=builder /app/dist/codiki/fr/browser/fr /usr/share/nginx/html/fr/ COPY --from=builder /app/dist/codiki/fr/browser/fr /usr/share/nginx/html/fr/

23
backend/codiki-exposition/pom.xml
View File

@@ -33,5 +33,28 @@
<groupId>org.apache.tika</groupId> <groupId>org.apache.tika</groupId>
<artifactId>tika-core</artifactId> <artifactId>tika-core</artifactId>
</dependency> </dependency>
<!-- <dependency>-->
<!-- <groupId>org.springframework.boot</groupId>-->
<!-- <artifactId>spring-boot-starter-data-jpa</artifactId>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>org.springframework.boot</groupId>-->
<!-- <artifactId>spring-boot-starter-security</artifactId>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>org.postgresql</groupId>-->
<!-- <artifactId>postgresql</artifactId>-->
<!-- <scope>runtime</scope>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>org.springframework.boot</groupId>-->
<!-- <artifactId>spring-boot-starter-test</artifactId>-->
<!-- <scope>test</scope>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>org.springframework.security</groupId>-->
<!-- <artifactId>spring-security-test</artifactId>-->
<!-- <scope>test</scope>-->
<!-- </dependency>-->
</dependencies> </dependencies>
</project> </project>

2
backend/codiki-exposition/src/main/java/org/codiki/exposition/configuration/security/SecurityConfiguration.java
View File

@@ -29,7 +29,7 @@ public class SecurityConfiguration {
public SecurityFilterChain securityFilterChain( public SecurityFilterChain securityFilterChain(
HttpSecurity httpSecurity, HttpSecurity httpSecurity,
JwtAuthenticationFilter jwtAuthenticationFilter JwtAuthenticationFilter jwtAuthenticationFilter
) { ) throws Exception {
httpSecurity httpSecurity
.csrf(AbstractHttpConfigurer::disable) .csrf(AbstractHttpConfigurer::disable)
.httpBasic(Customizer.withDefaults()) .httpBasic(Customizer.withDefaults())

0
backend/codiki-exposition/src/main/resources/application.yml Normal file
View File

2
backend/codiki-infrastructure/src/main/java/org/codiki/infrastructure/configuration/JpaConfiguration.java
View File

@@ -1,6 +1,6 @@
package org.codiki.infrastructure.configuration; package org.codiki.infrastructure.configuration;
import org.springframework.boot.persistence.autoconfigure.EntityScan; import org.springframework.boot.autoconfigure.domain.EntityScan;
import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.Configuration;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories; import org.springframework.data.jpa.repository.config.EnableJpaRepositories;

14
backend/pom.xml
View File

@@ -15,11 +15,11 @@
<java.version>21</java.version> <java.version>21</java.version>
<maven.compiler.source>21</maven.compiler.source> <maven.compiler.source>21</maven.compiler.source>
<maven.compiler.target>21</maven.compiler.target> <maven.compiler.target>21</maven.compiler.target>
<jakarta.servlet-api.version>6.1.0</jakarta.servlet-api.version> <jakarta.servlet-api.version>6.0.0</jakarta.servlet-api.version>
<java-jwt.version>4.5.0</java-jwt.version> <java-jwt.version>4.4.0</java-jwt.version>
<postgresql.version>42.7.8</postgresql.version> <postgresql.version>42.7.0</postgresql.version>
<tika-core.version>3.2.3</tika-core.version> <tika-core.version>2.9.0</tika-core.version>
<commons-lang3.version>3.20.0</commons-lang3.version> <commons-lang3.version>3.14.0</commons-lang3.version>
</properties> </properties>
<modules> <modules>
@@ -35,7 +35,7 @@
<dependency> <dependency>
<groupId>org.springframework.boot</groupId> <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId> <artifactId>spring-boot-dependencies</artifactId>
<version>4.0.1</version> <version>3.2.0</version>
<type>pom</type> <type>pom</type>
<scope>import</scope> <scope>import</scope>
</dependency> </dependency>
@@ -84,6 +84,8 @@
<artifactId>commons-lang3</artifactId> <artifactId>commons-lang3</artifactId>
<version>${commons-lang3.version}</version> <version>${commons-lang3.version}</version>
</dependency> </dependency>
</dependencies> </dependencies>
</dependencyManagement> </dependencyManagement>

40
frontend/angular.json
View File

@@ -19,18 +19,18 @@
"fr": { "fr": {
"translation": "src/locale/messages-fr.json" "translation": "src/locale/messages-fr.json"
} }
} }
}, },
"architect": { "architect": {
"build": { "build": {
"builder": "@angular/build:application", "builder": "@angular-devkit/build-angular:application",
"options": { "options": {
"outputPath": "dist/codiki", "outputPath": "dist/codiki",
"index": "src/index.html", "index": "src/index.html",
"browser": "src/main.ts", "browser": "src/main.ts",
"polyfills": [ "polyfills": [
"@angular/localize/init" "zone.js"
], ],
"tsConfig": "tsconfig.app.json", "tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
@@ -102,7 +102,7 @@
"defaultConfiguration": "" "defaultConfiguration": ""
}, },
"serve": { "serve": {
"builder": "@angular/build:dev-server", "builder": "@angular-devkit/build-angular:dev-server",
"configurations": { "configurations": {
"production-en": { "production-en": {
"buildTarget": "codiki:build:production-en" "buildTarget": "codiki:build:production-en"
@@ -123,15 +123,17 @@
"defaultConfiguration": "development" "defaultConfiguration": "development"
}, },
"extract-i18n": { "extract-i18n": {
"builder": "@angular/build:extract-i18n", "builder": "@angular-devkit/build-angular:extract-i18n",
"options": { "options": {
"buildTarget": "codiki:build" "buildTarget": "codiki:build"
} }
}, },
"test": { "test": {
"builder": "@angular/build:karma", "builder": "@angular-devkit/build-angular:karma",
"options": { "options": {
"polyfills": [ "polyfills": [
"zone.js",
"zone.js/testing"
], ],
"tsConfig": "tsconfig.spec.json", "tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss", "inlineStyleLanguage": "scss",
@@ -151,31 +153,5 @@
}, },
"cli": { "cli": {
"analytics": false "analytics": false
},
"schematics": {
"@schematics/angular:component": {
"type": "component"
},
"@schematics/angular:directive": {
"type": "directive"
},
"@schematics/angular:service": {
"type": "service"
},
"@schematics/angular:guard": {
"typeSeparator": "."
},
"@schematics/angular:interceptor": {
"typeSeparator": "."
},
"@schematics/angular:module": {
"typeSeparator": "."
},
"@schematics/angular:pipe": {
"typeSeparator": "."
},
"@schematics/angular:resolver": {
"typeSeparator": "."
}
} }
} }

2
frontend/conf/nginx.conf
View File

@@ -44,7 +44,7 @@ http {
} }
location ~ ^/api { location ~ ^/api {
proxy_pass http://192.168.1.153:50011; proxy_pass http://192.168.0.153:50011;
proxy_set_header Host $host:$server_port; proxy_set_header Host $host:$server_port;
proxy_set_header X-Forwarded-Host $server_name; proxy_set_header X-Forwarded-Host $server_name;
proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr;

13023
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

44
frontend/package.json
View File

@@ -17,26 +17,32 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^21.1.2", "@angular/animations": "^18.2.5",
"@angular/cdk": "^21.1.2", "@angular/cdk": "^18.2.5",
"@angular/common": "^21.1.2", "@angular/common": "^18.2.5",
"@angular/compiler": "^21.1.2", "@angular/compiler": "^18.2.5",
"@angular/core": "^21.1.2", "@angular/core": "^18.2.5",
"@angular/forms": "^21.1.2", "@angular/forms": "^18.2.5",
"@angular/material": "^21.1.2", "@angular/material": "^18.2.5",
"@angular/platform-browser": "^21.1.2", "@angular/platform-browser": "^18.2.5",
"@angular/platform-browser-dynamic": "^21.1.2", "@angular/platform-browser-dynamic": "^18.2.5",
"@angular/router": "^21.1.2", "@angular/router": "^18.2.5",
"rxjs": "~7.8.2", "rxjs": "~7.8.0",
"tslib": "^2.8.1" "tslib": "^2.3.0",
"zone.js": "~0.14.10"
}, },
"devDependencies": { "devDependencies": {
"@angular/build": "^21.1.2", "@angular-devkit/build-angular": "^18.2.5",
"@angular/cli": "^21.1.2", "@angular/cli": "^18.2.5",
"@angular/compiler-cli": "^21.1.2", "@angular/compiler-cli": "^18.2.5",
"@angular/localize": "^21.1.2", "@angular/localize": "^18.2.5",
"@types/jasmine": "~5.1.15", "@types/jasmine": "~5.1.0",
"jasmine-core": "~5.13.0", "jasmine-core": "~5.1.0",
"typescript": "~5.9.3" "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",
"typescript": "~5.5.4"
} }
} }

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

@@ -1,5 +1,5 @@
<app-header></app-header> <app-header></app-header>
<main> <main>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
<app-footer></app-footer> <app-footer></app-footer>

24
frontend/src/app/app.component.scss
View File

@@ -1,14 +1,14 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
app-header {
width: 100%;
}
main {
flex: 1; flex: 1;
padding: 1em 0;
} app-header {
} width: 100%;
}
main {
flex: 1;
padding: 1em 0;
}
}

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,11 +1,14 @@
import {Component} from '@angular/core'; import { CommonModule } from '@angular/common';
import {RouterOutlet} from '@angular/router'; import { Component } from '@angular/core';
import {HeaderComponent} from './components/header/header.component'; import { RouterOutlet } from '@angular/router';
import {FooterComponent} from './components/footer/footer.component'; import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
standalone: true,
imports: [ imports: [
CommonModule,
RouterOutlet, RouterOutlet,
HeaderComponent, HeaderComponent,
FooterComponent FooterComponent

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

@@ -1,11 +1,10 @@
import {ApplicationConfig, inject, provideAppInitializer} from '@angular/core'; import { ApplicationConfig } 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';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [ providers: [
@@ -15,13 +14,9 @@ export const appConfig: ApplicationConfig = {
paramsInheritanceStrategy: 'always', paramsInheritanceStrategy: 'always',
onSameUrlNavigation: 'reload' onSameUrlNavigation: 'reload'
}) })
), ),
provideAnimationsAsync(), provideAnimationsAsync(),
provideHttpClient(withInterceptorsFromDi()), provideHttpClient(withInterceptorsFromDi()),
{provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true}, { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
provideAppInitializer(() => {
const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService));
return initializerFn();
})
] ]
}; };

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

@@ -1,43 +1,40 @@
import {Routes} from '@angular/router'; import { Routes } from '@angular/router';
import {alreadyAuthenticatedGuard} from './core/guard/already-authenticated.guard';
export const routes: Routes = [ export const routes: Routes = [
{ {
path: 'login', path: 'login',
loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent), loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent)
canActivate: [alreadyAuthenticatedGuard] },
}, {
{ path: 'signin',
path: 'signin', loadComponent: () => import('./pages/signin/signin.component').then(module => module.SigninComponent)
loadComponent: () => import('./pages/signin/signin.component').then(module => module.SigninComponent), },
canActivate: [alreadyAuthenticatedGuard] {
}, path: 'disconnect',
{ loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent)
path: 'disconnect', },
loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent) {
}, path: 'publications/new',
{ loadChildren: () => import('./pages/publication-creation/publication-creation.routes').then(module => module.ROUTES)
path: 'publications/new', },
loadChildren: () => import('./pages/publication-creation/publication-creation.routes').then(module => module.ROUTES) {
}, path: 'publications/:publicationId',
{ loadComponent: () => import('./pages/publication/publication.component').then(module => module.PublicationComponent)
path: 'publications/:publicationId', },
loadComponent: () => import('./pages/publication/publication.component').then(module => module.PublicationComponent) {
}, path: 'publications/:publicationId/edit',
{ loadChildren: () => import('./pages/publication-update/publication-update.routes').then(module => module.ROUTES)
path: 'publications/:publicationId/edit', },
loadChildren: () => import('./pages/publication-update/publication-update.routes').then(module => module.ROUTES) {
}, path: 'publications',
{ loadComponent: () => import('./pages/search-publications/search-publications.component').then(module => module.SearchPublicationsComponent)
path: 'publications', },
loadComponent: () => import('./pages/search-publications/search-publications.component').then(module => module.SearchPublicationsComponent) {
}, path: 'my-publications',
{ loadChildren: () => import('./pages/my-publications/my-publications.routes').then(module => module.ROUTES)
path: 'my-publications', },
loadChildren: () => import('./pages/my-publications/my-publications.routes').then(module => module.ROUTES) {
}, path: '**',
{ loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent)
path: '**', }
loadComponent: () => import('./pages/home/home.component').then(module => module.HomeComponent)
}
]; ];

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

@@ -1,10 +1,10 @@
<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="secondary" (click)="closeDialog()" i18n>
No No
</button> </button>
<button type="button" class="cod-button" (click)="closeAndValidate()" matRipple i18n> <button type="button" (click)="closeAndValidate()" i18n>
Yes Yes
</button> </button>
</footer> </footer>

47
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss
View File

@@ -1,12 +1,39 @@
:host { :host {
display: flex;
flex-direction: column;
text-align: center;
padding: 1em;
footer {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-between; text-align: center;
} padding: 1em;
}
footer {
display: flex;
flex-direction: row;
justify-content: space-between;
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
}
}
}

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

@@ -1,35 +1,35 @@
import {Component, inject} from "@angular/core"; import { Component, inject, Input } from "@angular/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;
description: string; description: string;
} }
@Component({ @Component({
selector: 'app-confirmation-dialog', selector: 'app-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html', standalone: true,
styleUrl: './confirmation-dialog.component.scss', templateUrl: './confirmation-dialog.component.html',
imports: [MatRippleModule] styleUrl: './confirmation-dialog.component.scss',
imports: []
}) })
export class ConfirmationDialog { export class ConfirmationDialog {
private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>); private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
data: ConfirmationDialogData = inject(MAT_DIALOG_DATA); data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
get title(): string { get title(): string {
return this.data.title; return this.data.title;
} }
get description(): string { get description(): string {
return this.data.description; return this.data.description;
} }
closeAndValidate(): void { closeAndValidate(): void {
this.dialogRef.close(true); this.dialogRef.close(true);
} }
closeDialog(): void { closeDialog(): void {
this.dialogRef.close(false); this.dialogRef.close(false);
} }
} }

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

@@ -1,14 +1,14 @@
<div i18n> <div i18n>
<span class="copy-left">&copy;</span> <span class="copy-left">&copy;</span>
2016 - 2026 All rights reserved 2016 - 2024 All rights reserved
- -
2.2 2.0-alpha
<a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip> <a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
<mat-icon>favorite</mat-icon> <mat-icon>favorite</mat-icon>
</a> </a>
</div> </div>
<div> <div>
<mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon> <mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon>
- -
<span i18n>Development realised by</span> Florian THIERRY <span i18n>Development realised by</span> Florian THIERRY
</div> </div>

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

@@ -1,33 +1,31 @@
:host { :host {
background-color: #3f51b5; background-color: #3f51b5;
color: rgba(255, 255, 255, .6); color: rgba(255,255,255,.6);
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: .5em;
font-size: 1.1em;
div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around;
align-items: center; align-items: center;
gap: .2em; padding: .5em;
font-size: 1.1em;
.copy-left { div {
transform: rotate(180deg); display: flex;
} flex-direction: row;
align-items: center;
a { .copy-left {
text-decoration: none; transform: rotate(180deg);
color: rgba(255, 255, 255, .6); }
} a {
text-decoration: none;
color: rgba(255,255,255,.6);
}
mat-icon { mat-icon {
font-size: 1em; font-size: 1em;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
} }
} }
}

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

@@ -1,13 +1,15 @@
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',
standalone: true,
imports: [MatIconModule, MatTooltipModule, RouterModule], imports: [MatIconModule, MatTooltipModule, RouterModule],
templateUrl: './footer.component.html', templateUrl: './footer.component.html',
styleUrl: './footer.component.scss' styleUrl: './footer.component.scss'
}) })
export class FooterComponent { export class FooterComponent {
} }

64
frontend/src/app/components/header/header.component.html
View File

@@ -1,44 +1,36 @@
<div class="left"> <div class="left">
<button type="button" <button type="button" (click)="sideMenu.open()" matTooltip="Click to show side menu" i18n-matTooltip>
(click)="sideMenu.open()" <mat-icon>menu</mat-icon>
class="cod-button icon" </button>
matTooltip="Click to show side menu" <a [routerLink]="['/home']">
matRipple <img src="assets/images/codiki.png" alt="logo"/>
i18n-matTooltip> <span class="title">Codiki</span>
<mat-icon>menu</mat-icon> </a>
</button>
<a [routerLink]="['/home']">
<img src="assets/images/codiki.png" alt="logo"/>
<span class="title">Codiki</span>
</a>
</div> </div>
<div class="middle"> <div class="middle">
<app-publications-search-bar></app-publications-search-bar> <app-publications-search-bar></app-publications-search-bar>
</div> </div>
<div class="right"> <div class="right">
@if (isAuthenticated) { @if (isAuthenticated) {
<button type="button" <button mat-button class="button" [matMenuTriggerFor]="authenticatedUserMenu">
class="cod-button icon" <mat-icon>more_vert</mat-icon>
[matMenuTriggerFor]="authenticatedUserMenu" </button>
matRipple> <mat-menu #authenticatedUserMenu="matMenu">
<mat-icon>more_vert</mat-icon> <div class="authenticated-user-menu">
</button> <a [routerLink]="['/my-publications']" matRipple i18n>
<mat-menu #authenticatedUserMenu="matMenu"> <mat-icon>description</mat-icon>
<div class="authenticated-user-menu"> My publications
<a [routerLink]="['/my-publications']" matRipple i18n> </a>
<mat-icon>description</mat-icon> <a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n>
My publications <mat-icon>logout</mat-icon>
</a> Disconnect
<a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n> </a>
<mat-icon>logout</mat-icon> </div>
Disconnect </mat-menu>
</a> } @else {
</div> <a [routerLink]="['/login']" class="button" matRipple i18n>Login</a>
</mat-menu> }
} @else {
<a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
}
</div> </div>
<app-side-menu #sideMenu></app-side-menu> <app-side-menu #sideMenu></app-side-menu>

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

@@ -1,148 +1,202 @@
$headerHeight: 3.5em; $headerHeight: 3.5em;
:host { :host {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #3f51b5;
color: white;
position: relative;
height: $headerHeight;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: space-between;
background-color: #3f51b5;
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);
&.left { div {
position: absolute;
top: 0;
left: 0;
align-items: center;
gap: 1em;
padding: 0 1em;
z-index: 2;
a {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; position: relative;
color: white; height: $headerHeight;
text-decoration: none;
gap: .5em;
img { &.left {
$imageSize: 2em; position: absolute;
width: $imageSize; top: 0;
height: $imageSize; left: 0;
align-items: center;
gap: 1em;
padding: 0 1em;
z-index: 2;
button {
background-color: #3f51b5;
color: white;
border: none;
border-radius: 10em;
transition: background-color .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
$buttonSize: 2.5em;
width: $buttonSize;
height: $buttonSize;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
}
a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: white;
text-decoration: none;
gap: .5em;
img {
$imageSize: 2em;
width: $imageSize;
height: $imageSize;
}
.title {
font-size: 1.5em;
display: none;
@media screen and (min-width: 600px) {
display: block;
}
}
}
} }
.title { &.middle {
font-size: 1.5em; flex: 1;
display: none; $borderRadiusValue: 10em;
position: relative;
transition: max-width .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
app-publications-search-bar {
width: 100%;
max-width: 12em;
@media screen and (min-width: 600px) { @media screen and (min-width: 435px) {
display: block; max-width: 16em;
} }
@media screen and (min-width: 500px) {
max-width: 20em;
}
@media screen and (min-width: 700px) {
max-width: 24em;
}
@media screen and (min-width: 800px) {
max-width: 32em;
}
@media screen and (min-width: 900px) {
max-width: 38em;
}
@media screen and (min-width: 1000px) {
max-width: 45em;
}
@media screen and (min-width: 1100px) {
max-width: 50em;
}
}
}
&.right {
position: absolute;
top: 0;
right: 0;
z-index: 2;
a {
display: flex;
justify-content: center;
align-items: center;
min-width: 5em;
color: white;
margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0 .8em;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
min-width: 2.5em;
color: white;
margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
mat-icon {
margin: 0;
}
}
} }
}
} }
&.middle {
flex: 1;
$borderRadiusValue: 10em;
position: relative;
transition: max-width .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
app-publications-search-bar {
width: 100%;
max-width: 12em;
@media screen and (min-width: 435px) {
max-width: 16em;
}
@media screen and (min-width: 500px) {
max-width: 20em;
}
@media screen and (min-width: 700px) {
max-width: 24em;
}
@media screen and (min-width: 800px) {
max-width: 32em;
}
@media screen and (min-width: 900px) {
max-width: 38em;
}
@media screen and (min-width: 1000px) {
max-width: 45em;
}
@media screen and (min-width: 1100px) {
max-width: 50em;
}
}
}
&.right {
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin-right: .5em;
a, button {
margin: .5em;
}
}
}
} }
app-side-menu { app-side-menu {
height: 100%; height: 100%;
} }
.authenticated-user-menu { .authenticated-user-menu {
display: flex;
flex-direction: column;
padding: 0.2em 0;
a {
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; padding: 0.2em 0;
text-decoration: none;
background-color: white;
color: black;
padding: 1em;
gap: .5em;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
&:hover { a {
background-color: #5c6bc0; flex: 1;
color: white; display: flex;
flex-direction: row;
align-items: center;
text-decoration: none;
background-color: white;
color: black;
padding: 1em;
gap: .5em;
transition: background-color .2s ease-in-out, color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
color: white;
}
&.disconnection {
color: #D50000;
&:hover {
background-color: #E53935;
color: white;
}
}
} }
}
&.disconnection {
color: #D50000;
&:hover {
background-color: #E53935;
color: white;
}
}
}
}

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

@@ -1,18 +1,21 @@
import {Component, inject} from '@angular/core'; import { CommonModule } from '@angular/common';
import {FormControl, ReactiveFormsModule} from '@angular/forms'; import { Component, inject } from '@angular/core';
import {MatButtonModule} from '@angular/material/button'; import { FormControl, ReactiveFormsModule } from '@angular/forms';
import {MatRippleModule} from '@angular/material/core'; import { MatButtonModule } from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon'; import { MatRippleModule } from '@angular/material/core';
import {MatMenuModule} from '@angular/material/menu'; import { MatIconModule } from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatMenuModule } from '@angular/material/menu';
import {RouterModule} from '@angular/router'; import { MatTooltipModule } from '@angular/material/tooltip';
import {AuthenticationService} from '../../core/service/authentication.service'; import { RouterModule } from '@angular/router';
import {PublicationsSearchBarComponent} from '../publications-search-bar/publications-search-bar.component'; import { AuthenticationService } from '../../core/service/authentication.service';
import {SideMenuComponent} from '../side-menu/side-menu.component'; import { PublicationsSearchBarComponent } from '../publications-search-bar/publications-search-bar.component';
import { SideMenuComponent } from '../side-menu/side-menu.component';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
standalone: true,
imports: [ imports: [
CommonModule,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatMenuModule, MatMenuModule,
@@ -21,10 +24,10 @@ import {SideMenuComponent} from '../side-menu/side-menu.component';
PublicationsSearchBarComponent, PublicationsSearchBarComponent,
ReactiveFormsModule, ReactiveFormsModule,
RouterModule, RouterModule,
SideMenuComponent SideMenuComponent,
], ],
templateUrl: './header.component.html', templateUrl: './header.component.html',
styleUrl: './header.component.scss' styleUrl: './header.component.scss',
}) })
export class HeaderComponent { export class HeaderComponent {
private authenticationService = inject(AuthenticationService); private authenticationService = inject(AuthenticationService);

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

@@ -1,37 +1,32 @@
<button type="button" <button type="button" class="close" (click)="closeDialog()">
(click)="closeDialog()" <mat-icon>close</mat-icon>
class="cod-button icon secondary close"
matTooltip="Close"
matRipple
i18n-matTooltip>
<mat-icon>close</mat-icon>
</button> </button>
<header> <header>
<h1 i18n>Add a code block</h1> <h1 i18n>Add a code block</h1>
</header> </header>
<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate> <form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate>
<div class="form-content"> <div class="form-content">
<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>
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label i18n>Code block</mat-label> <mat-label i18n>Code block</mat-label>
<textarea matInput formControlName="codeBlock"></textarea> <textarea matInput formControlName="codeBlock"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="actions reversed"> <div class="actions">
<button type="submit" class="cod-button" matRipple i18n> <button type="submit" i18n>
Validate Validate
</button> </button>
<button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n> <button type="button" (click)="closeDialog()" class="secondary" i18n>
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>

100
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss
View File

@@ -1,30 +1,78 @@
:host { :host {
display: flex;
flex-direction: column;
padding: 1em;
gap: 1em;
position: relative;
max-height: 90vh;
header {
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: center; padding: 1em;
align-items: center; gap: 1em;
} position: relative;
max-height: 90vh;
form { .close {
div { position: absolute;
&.form-content { top: 1em;
mat-form-field { right: 1em;
width: 100%; width: 2.5em;
height: 2.5em;
textarea { border-radius: 10em;
height: 30vh; border: none;
} display: flex;
} justify-content: center;
} align-items: center;
cursor: pointer;
} }
}
} header {
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
form {
div {
&.form-content {
mat-form-field {
width: 100%;
textarea {
height: 30vh;
}
}
}
&.actions {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
}
}
}
}
}

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

@@ -1,119 +1,116 @@
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 { 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";
export interface ProgramingLanguage { export interface ProgramingLanguage {
code: string; code: string;
label: string; label: string;
} }
export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
{ {
code: 'bash', code: 'bash',
label: 'Bash' label: 'Bash'
}, },
{ {
code: 'c', code: 'c',
label: 'C' label: 'C'
}, },
{ {
code: 'cpp', code: 'cpp',
label: 'C++' label: 'C++'
}, },
{ {
code: 'cs', code: 'cs',
label: 'C#' label: 'C#'
}, },
{ {
code: 'lua', code: 'lua',
label: 'Lua' label: 'Lua'
}, },
{ {
code: 'java', code: 'java',
label: 'Java' label: 'Java'
}, },
{ {
code: 'json5', code: 'json5',
label: 'JSON' label: 'JSON'
}, },
{ {
code: 'kt', code: 'kt',
label: 'Kotlin' label: 'Kotlin'
}, },
{ {
code: 'markup', code: 'markup',
label: 'html/xml' label: 'html/xml'
}, },
{ {
code: 'php', code: 'php',
label: 'PHP' label: 'PHP'
}, },
{ {
code: 'plsql', code: 'plsql',
label: 'PL/SQL' label: 'PL/SQL'
}, },
{ {
code: 'python', code: 'python',
label: 'Python' label: 'Python'
}, },
{ {
code: 'powershell', code: 'powershell',
label: 'PowerShell' label: 'PowerShell'
}, },
{ {
code: 'rust', code: 'rust',
label: 'Rust' label: 'Rust'
}, },
{ {
code: 'sql', code: 'sql',
label: 'SQL' label: 'SQL'
}, },
{ {
code: 'ts', code: 'ts',
label: 'Typescript' label: 'Typescript'
}, },
{ {
code: 'yml', code: 'yml',
label: 'YAML' label: 'YAML'
}, },
]; ];
@Component({ @Component({
selector: 'app-code-block-dialog', selector: 'app-code-block-dialog',
templateUrl: './code-block-dialog.component.html', standalone: true,
styleUrl: './code-block-dialog.component.scss', templateUrl: './code-block-dialog.component.html',
imports: [ styleUrl: './code-block-dialog.component.scss',
MatFormFieldModule, imports: [
MatIcon, MatFormFieldModule,
MatInputModule, MatIcon,
MatRippleModule, MatInputModule,
MatSelectModule, MatSelectModule,
MatTooltip, ReactiveFormsModule,
ReactiveFormsModule, ]
]
}) })
export class CodeBlockDialog { export class CodeBlockDialog {
private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>); private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
private formBuilder = inject(FormBuilder); private formBuilder = inject(FormBuilder);
programmingLanguages = PROGRAMMING_LANGUAGES; programmingLanguages = PROGRAMMING_LANGUAGES;
formGroup = this.formBuilder.group({ formGroup = this.formBuilder.group({
programmingLanguage: new FormControl('', Validators.required), programmingLanguage: new FormControl('', Validators.required),
codeBlock: new FormControl('', Validators.required) codeBlock: new FormControl('', Validators.required)
}); });
closeAndValidate(): void { closeAndValidate(): void {
if (this.formGroup.valid) { if (this.formGroup.valid) {
this.dialogRef.close(this.formGroup.value); this.dialogRef.close(this.formGroup.value);
}
} }
}
closeDialog(): void { closeDialog(): void {
this.dialogRef.close(); this.dialogRef.close();
} }
} }

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

@@ -1,44 +1,30 @@
<button type="button" <button type="button" class="close" (click)="closeDialog()">
(click)="closeDialog()" <mat-icon>close</mat-icon>
class="cod-button icon secondary close"
matTooltip="Close"
matRipple
i18n-matTooltip>
<mat-icon>close</mat-icon>
</button> </button>
<header> <header>
<h1 i18n>Select an illustration</h1> <h1 i18n>Select an illustration</h1>
</header> </header>
<div class="picture-container"> <div class="picture-container">
@if (isLoading()) { @if (isLoading) {
<h2 i18n>Pictures loading...</h2> <h2 i18n>Pictures loading...</h2>
<mat-spinner></mat-spinner> <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/>
}
} @else { } @else {
<h2 i18n>There is no any picture.</h2> @if (pictures.length) {
@for(picture of pictures; track picture) {
<img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration" i18n-matTooltip/>
}
} @else {
<h2 i18n>There is no any picture.</h2>
}
} }
}
</div> </div>
<footer> <footer>
<button type="button" <button type="button" class="secondary" matRipple (click)="closeDialog()" i18n>
(click)="closeDialog()" Cancel
class="cod-button secondary" </button>
matRipple <button type="button" (click)="fileUpload.click()" matRipple i18n>
i18n> <mat-icon>upload_file</mat-icon>
Cancel Add new picture
</button> </button>
<button type="button" <input type="file" (change)="uploadPicture($event)" #fileUpload/>
(click)="fileUpload.click()" </footer>
class="cod-button"
matRipple
i18n>
<mat-icon>upload_file</mat-icon>
Add new picture
</button>
<input type="file" (change)="uploadPicture($event)" #fileUpload/>
</footer>

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

@@ -1,83 +1,97 @@
:host { :host {
display: flex;
flex-direction: column;
padding: 1em;
gap: 1em;
position: relative;
max-height: 90vh;
header {
flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: center; padding: 1em;
align-items: center;
}
.picture-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1em; gap: 1em;
max-height: 30em; position: relative;
overflow-y: auto; max-height: 90vh;
min-height: 10em;
padding: .5em 0;
img { .close {
width: 15em; position: absolute;
height: 10em; top: 1em;
object-fit: cover; right: 1em;
border-radius: 1em; width: 2.5em;
opacity: .9; height: 2.5em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); border-radius: 10em;
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out; border: none;
display: flex;
&:hover { justify-content: center;
align-items: center;
cursor: pointer; cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
}
} }
}
footer { header {
display: flex; flex: 1;
flex-direction: row; display: flex;
justify-content: space-between; flex-direction: row;
align-items: center; justify-content: center;
align-items: center;
}
button { .picture-container {
padding: .8em 1.2em; display: flex;
border-radius: 10em; flex-direction: row;
border: none; flex-wrap: wrap;
background-color: #3f51b5; justify-content: center;
color: white; align-items: center;
transition: background-color .2s ease-in-out; gap: 1em;
cursor: pointer; max-height: 30em;
display: flex; overflow-y: auto;
justify-content: center; min-height: 10em;
align-items: center; padding: .5em 0;
&:hover { img {
background-color: #5b6ed8; width: 15em;
} height: 10em;
object-fit: cover;
border-radius: 1em;
opacity: .9;
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;
&.secondary { &:hover {
color: #3f51b5; cursor: pointer;
background-color: white; opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
&:hover { }
background-color: #f2f4ff;
cursor: pointer;
} }
}
} }
input[type=file] { footer {
display: none; display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
}
input[type=file] {
display: none;
}
} }
} }
}

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

@@ -1,74 +1,70 @@
import {Component, inject, OnInit, signal} from "@angular/core"; import { Component, inject, OnInit } 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',
templateUrl: './picture-selection-dialog.component.html', standalone: true,
styleUrl: './picture-selection-dialog.component.scss', imports: [MatProgressSpinnerModule, MatIcon, MatRippleModule, MatTooltip],
imports: [ templateUrl: './picture-selection-dialog.component.html',
MatIcon, styleUrl: './picture-selection-dialog.component.scss',
MatRippleModule,
MatProgressSpinnerModule,
MatTooltip
]
}) })
export class PictureSelectionDialog implements OnInit { export class PictureSelectionDialog implements OnInit {
private readonly pictureRestService = inject(PictureRestService); private readonly pictureRestService = inject(PictureRestService);
private readonly snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>); private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
isLoading = signal(false); isLoading: boolean = false;
isLoaded = signal(false); isLoaded: boolean = false;
pictures: Picture[] = []; pictures: Picture[] = [];
ngOnInit(): void { ngOnInit(): void {
this.isLoading.set(true); this.isLoading = true;
this.pictureRestService.getAllOfCurrentUser() this.pictureRestService.getAllOfCurrentUser()
.then(pictures => { .then(pictures => {
this.pictures = pictures; this.pictures = pictures;
}) })
.catch(error => { .catch(error => {
if (error.status === 401) { if (error.status === 401) {
this.dialogRef.close(); this.dialogRef.close();
} else { } else {
const errorMessage = $localize`An error occurred while loading pictures.`; const errorMessage = $localize`An error occured 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(() => {
this.isLoading.set(false); this.isLoading = false;
this.isLoaded.set(true); this.isLoaded = true;
}); });
}
selectPicture(picture: Picture): void {
this.dialogRef.close(picture.id);
}
closeDialog(): void {
this.dialogRef.close();
}
uploadPicture(fileSelectionEvent: any): void {
const pictureFile = fileSelectionEvent.target.files[0];
if (pictureFile) {
this.pictureRestService.uploadPicture(pictureFile)
.then(pictureId => {
this.dialogRef.close(pictureId);
})
.catch(error => {
const errorMessage = $localize`A technical error occurred while uploading your picture.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
});
} }
}
} selectPicture(picture: Picture): void {
this.dialogRef.close(picture.id);
}
closeDialog(): void {
this.dialogRef.close();
}
uploadPicture(fileSelectionEvent: any): void {
const pictureFile = fileSelectionEvent.target.files[0];
if (pictureFile) {
this.pictureRestService.uploadPicture(pictureFile)
.then(pictureId => {
this.dialogRef.close(pictureId);
})
.catch(error => {
const errorMessage = $localize`A technical error occured while uploading your picture.`;
console.error(errorMessage, error);
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
});
}
}
}

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

@@ -1,24 +1,24 @@
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 {
private pictureRestService = inject(PictureRestService); private pictureRestService = inject(PictureRestService);
private snackBar = inject(MatSnackBar); private snackBar = inject(MatSnackBar);
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>); private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
uploadPicture(pictureFile: File): void { uploadPicture(pictureFile: File): void {
this.pictureRestService.uploadPicture(pictureFile) this.pictureRestService.uploadPicture(pictureFile)
.then(pictureId => { .then(pictureId => {
this.dialogRef.close(pictureId); this.dialogRef.close(pictureId);
}) })
.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 });
}); });
} }
} }

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

@@ -1,133 +1,100 @@
<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)">
<mat-tab label="Edition" i18n-label> <mat-tab label="Edition" i18n-label>
<div class="form-content"> <div class="form-content">
<div class="first-part"> <div class="first-part">
<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>
<mat-select formControlName="categoryId"> <mat-select formControlName="categoryId">
@for (category of categories$ | async; track category) { @for (category of categories$ | async; track category) {
<mat-option [value]="category.id"> <mat-option [value]="category.id">
{{ category.name }} {{ category.name }}
</mat-option> </mat-option>
} }
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="picture-container"> <div class="picture-container">
<img <img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
[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/> </div>
</div> </div>
</div>
<div class="actions"> <div class="actions">
<button type="button" <button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)" i18n-matTooltip>
(click)="insertTitle(1)" H1
matTooltip="Click to insert a title 1 section" </button>
matRipple <button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)" i18n-matTooltip>
i18n-matTooltip> H2
H1 </button>
</button> <button type="button" matTooltip="Click to insert a title 3 section" (click)="insertTitle(3)" i18n-matTooltip>
<button type="button" H3
(click)="insertTitle(2)" </button>
matTooltip="Click to insert a title 2 section" <button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()" i18n-matTooltip>
matRipple <mat-icon>image</mat-icon>
i18n-matTooltip> </button>
H2 <button type="button" matTooltip="Click to insert a link" (click)="insertLink()" i18n-matTooltip>
</button> <mat-icon>link</mat-icon>
<button type="button" </button>
(click)="insertTitle(3)" <button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()" i18n-matTooltip>
matTooltip="Click to insert a title 3 section" <mat-icon>code</mat-icon>
matRipple </button>
i18n-matTooltip> <button type="button" disabled matTooltip="Click to display editor help" i18n-matTooltip>
H3 <mat-icon>help</mat-icon>
</button> </button>
<button type="button" </div>
(click)="insertLink()" <mat-form-field>
matTooltip="Click to insert a link" <mat-label i18n>Content</mat-label>
matRipple <textarea
i18n-matTooltip> #textArea
<mat-icon>link</mat-icon> matInput
</button> formControlName="text"
<button type="button" class="text-input"
(click)="selectAPicture()" (keyup)="updateCursorPosition($event)"
matTooltip="Click to insert a picture" (click)="updateCursorPosition($event)">
matRipple
i18n-matTooltip>
<mat-icon>image</mat-icon>
</button>
<button type="button"
(click)="displayCodeBlockDialog()"
matTooltip="Click to insert a code block"
matRipple
i18n-matTooltip>
<mat-icon>code</mat-icon>
</button>
<button type="button"
matTooltip="Click to display editor help"
disabled
matRipple
i18n-matTooltip>
<mat-icon>help</mat-icon>
</button>
</div>
<mat-form-field>
<mat-label i18n>Content</mat-label>
<textarea
#textArea
matInput
formControlName="text"
class="text-input"
(keyup)="updateCursorPosition($event)"
(click)="updateCursorPosition($event)">
</textarea> </textarea>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="Previewing" i18n-label> <mat-tab label="Previewing" i18n-label>
<div class="preview"> <div class="preview">
@if (isPreviewing()) { @if ((isPreviewing$ | async) === true) {
<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()" i18n>Save</app-submit-button> <app-submit-button label="Save" [requestPending]="!!(isSaving$ | async)" i18n-label></app-submit-button>
<button type="button" <button type="button" class="secondary" (click)="goPreviousLocation()" i18n>
class="cod-button secondary" Cancel
(click)="goPreviousLocation()" </button>
matRipple </footer>
i18n> </form>
Cancel
</button>
</footer>
</form>

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

@@ -1,170 +1,184 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
form { form {
margin: 1em; margin: 1em;
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;
background-color: #3f51b5; background-color: #3f51b5;
color: white; color: white;
border-radius: .5em .5em 0 0; border-radius: .5em .5em 0 0;
h1 { h1 {
font-size: 2em; font-size: 2em;
margin-bottom: .5em; margin-bottom: .5em;
} }
}
footer {
padding: 2em;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
} }
footer {
padding: 2em;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
}
} }
.form-content { .form-content {
padding: 2em; padding: 2em;
padding-bottom: 0; padding-bottom: 0;
display: flex;
flex-direction: column;
gap: .5em;
mat-form-field {
textarea {
height: 20em;
}
}
.first-part {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column;
gap: 1em;
@media screen and (min-width: 600px) {
flex-direction: row;
div {
flex: 1 0;
&.picture-container {
max-width: 20em;
img {
max-height: 15em;
max-width: 20em;
}
}
}
}
div {
flex: 1 0 50%;
display: flex;
flex-direction: column;
justify-content: center;
&.picture-container {
img {
flex: 1;
object-fit: cover;
width: 100%;
cursor: pointer;
border-radius: 1em;
opacity: .9;
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;
&:hover {
cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
}
}
}
}
}
.actions {
display: flex;
flex-direction: row;
gap: .5em; gap: .5em;
button { mat-form-field {
padding: 0; textarea {
border-radius: 10em; height: 20em;
border: none; }
background-color: #3f51b5; }
color: white;
transition: background-color .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
font-weight: bold;
&:hover { .first-part {
display: flex;
flex-direction: column-reverse;
gap: 1em;
@media screen and (min-width: 600px) {
flex-direction: row;
div {
flex: 1 0;
&.picture-container {
max-width: 20em;
img {
max-height: 15em;
max-width: 20em;
}
}
}
}
div {
flex: 1 0 50%;
display: flex;
flex-direction: column;
justify-content: center;
&.picture-container {
img {
flex: 1;
object-fit: cover;
width: 100%;
cursor: pointer;
border-radius: 1em;
opacity: .9;
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;
&:hover {
cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
}
}
}
}
}
.actions {
display: flex;
flex-direction: row;
gap: .5em;
button {
padding: 0;
display: flex;
justify-content: center;
align-items: center;
width: 3em;
height: 3em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
font-weight: bold;
}
}
}
button, a.button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5b6ed8; background-color: #5b6ed8;
cursor: pointer; cursor: pointer;
} }
&:disabled { &:disabled {
background-color: #5f6aa6; background-color: #5f6aa6;
cursor: not-allowed; cursor: not-allowed;
}
} }
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
} }
.preview { .preview {
display: flex;
flex-direction: column;
max-height: 80vh;
overflow-y: auto;
.preview-loading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; max-height: 80vh;
} overflow-y: auto;
.illustration { .preview-loading {
flex: 1; display: flex;
height: 12em; flex-direction: column;
object-fit: cover; align-items: center;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 15em;
} }
@media screen and (min-width: 600px) { .illustration {
height: 20em; flex: 1;
height: 12em;
object-fit: cover;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 15em;
}
@media screen and (min-width: 600px) {
height: 20em;
}
@media screen and (min-width: 750px) {
height: 25em;
}
} }
@media screen and (min-width: 750px) { header {
height: 25em; padding: 2em;
} }
}
header { main {
padding: 2em; padding: 2em;
} text-align: justify;
}
main { }
padding: 2em;
text-align: justify;
}
}

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

@@ -1,135 +1,191 @@
import {CommonModule, Location} from "@angular/common"; import { CommonModule, Location } from "@angular/common";
import {Component, effect, inject, input, output, signal} from "@angular/core"; import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
import {FormGroup, ReactiveFormsModule} from "@angular/forms"; import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } 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} from "rxjs"; import { map, Observable, of, Subscription } from "rxjs";
import {Category} from "../../core/rest-services/category/model/category"; import { Category } from "../../core/rest-services/category/model/category";
import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication"; import { 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 {PublicationEditionService} from "./publication-edition.service"; import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import {MatRippleModule} from "@angular/material/core"; import { PublicationEditionService } from "./publication-edition.service";
@Component({ @Component({
selector: 'app-publication-edition', selector: 'app-publication-edition',
templateUrl: './publication-edition.component.html', standalone: true,
styleUrl: './publication-edition.component.scss', templateUrl: './publication-edition.component.html',
imports: [ styleUrl: './publication-edition.component.scss',
CommonModule, imports: [
MatDialogModule, CommonModule,
MatIconModule, MatDialogModule,
MatInputModule, MatIconModule,
MatRippleModule, MatInputModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatSelectModule, MatSelectModule,
MatTabsModule, MatTabsModule,
MatTooltipModule, MatTooltipModule,
ReactiveFormsModule, PictureSelectionDialog,
SubmitButtonComponent ReactiveFormsModule,
], SubmitButtonComponent
providers: [PublicationEditionService] ],
providers: [PublicationEditionService]
}) })
export class PublicationEditionComponent { export class PublicationEditionComponent implements OnChanges, OnDestroy {
readonly #categoryService = inject(CategoryService); @Input()
readonly #location = inject(Location); publication!: Publication;
readonly #publicationEditionService = inject(PublicationEditionService); @Input()
title!: string;
@Input()
isSaving$: Observable<boolean> = of(false);
@Output()
publicationSave = new EventEmitter<Publication>();
publication = input.required<Publication>(); publicationInEdition!: Publication;
title = input.required<string>(); private readonly categoryService = inject(CategoryService);
isSaving = input.required<boolean>(); private readonly formBuilder = inject(FormBuilder);
publicationSave = output<Publication>(); private readonly location = inject(Location);
private readonly publicationEditionService = inject(PublicationEditionService);
private subscriptions: Subscription[] = [];
isLoading = this.#publicationEditionService.isLoading; publicationEditionForm: FormGroup = this.formBuilder.group({
isPreviewing = this.#publicationEditionService.isPreviewing; title: new FormControl<string | undefined>('', [Validators.required]),
publicationInEdition = signal<Publication>(DEFAULT_PUBLICATION); description: new FormControl<string | undefined>('', [Validators.required]),
text: new FormControl<string | undefined>('', [Validators.required]),
constructor() { illustrationId: new FormControl<string | undefined>('', [Validators.required]),
effect(() => { categoryId: new FormControl<string | undefined>('', [Validators.required])
let publication = this.publication();
const publicationInEdition = this.publicationInEdition();
if (!publicationInEdition || publicationInEdition !== publication) {
this.publicationInEdition.set(publication);
this.#publicationEditionService.init(publication);
}
}); });
}
get publicationEditionForm(): FormGroup { get isLoading$(): Observable<boolean> {
return this.#publicationEditionService.publicationEditionForm; return this.publicationEditionService.isLoading$;
}
get categories$(): Observable<Category[]> {
return this.#categoryService.categories$
.pipe(
map(categories =>
categories.filter(category => category.subCategories.length == 0)
.sort(this.byNameAscComparator())
)
);
}
private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
}
private compareStrings(stringA: string, stringB: string): number {
if (stringA < stringB) {
return -1;
} }
if (stringA > stringB) {
return 1; get isPreviewing$(): Observable<boolean> {
return this.publicationEditionService.isPreviewing$;
} }
return 0;
}
goPreviousLocation(): void { get categories$(): Observable<Category[]> {
this.#location.back(); return this.categoryService.categories$
} .pipe(
map(categories =>
insertTitle(titleNumber: number): void { categories.filter(category => category.subCategories.length == 0)
this.#publicationEditionService.insertTitle(titleNumber); .sort(this.byNameAscComparator())
} )
);
selectAPicture(): void {
this.#publicationEditionService.selectAPicture();
}
insertLink(): void {
this.#publicationEditionService.insertLink();
}
displayCodeBlockDialog(): void {
this.#publicationEditionService.displayCodeBlockDialog();
}
displayPictureSectionDialog(): void {
this.#publicationEditionService.displayPictureSectionDialog();
}
updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
if (event.target) {
const textarea = event.target as HTMLTextAreaElement;
const positionStart = textarea.selectionStart;
const positionEnd = textarea.selectionEnd;
this.#publicationEditionService.editCursorPosition(positionStart, positionEnd);
} }
}
save(): void { private byNameAscComparator(): (categoryA: Category, categoryB: Category) => number {
this.publicationSave.emit(this.#publicationEditionService.editedPublication); return (categoryA, categoryB) => this.compareStrings(categoryA.name, categoryB.name);
}
onTabChange(tabSelectedIndex: number): void {
if (tabSelectedIndex === 1) {
this.#publicationEditionService.loadPreview();
} }
}
} private compareStrings(stringA: string, stringB: string): number {
if (stringA < stringB) {
return -1;
}
if (stringA > stringB) {
return 1;
}
return 0;
}
ngOnChanges(): void {
this.ngOnDestroy();
this.publicationInEdition = this.publication;
this.publicationEditionService.init(this.publicationInEdition);
['title', 'description', 'text'].forEach(fieldName => {
const fieldSubscription = this.publicationEditionForm.controls[fieldName].valueChanges
.pipe(
map(value => value?.length ? value as string : '')
)
.subscribe(fieldValue => {
switch (fieldName) {
case 'title':
this.publicationEditionService.editTitle(fieldValue);
break;
case 'description':
this.publicationEditionService.editDescription(fieldValue);
break;
case 'text':
this.publicationEditionService.editText(fieldValue);
break;
default:
break;
}
});
this.subscriptions.push(fieldSubscription);
});
const categoryIdChangeSubscription = this.publicationEditionForm.controls['categoryId'].valueChanges
.subscribe(newCategoryId => {
this.publicationEditionService.editCategoryId(newCategoryId);
});
this.subscriptions.push(categoryIdChangeSubscription);
const publicationSubscription = this.publicationEditionService.state$.subscribe(state => {
console.log(state.publication.parsedText.substring(0, 15));
this.publicationInEdition = state.publication;
this.publicationEditionForm.controls['title'].setValue(this.publicationInEdition.title, { emitEvent: false });
this.publicationEditionForm.controls['description'].setValue(this.publicationInEdition.description, { emitEvent: false });
this.publicationEditionForm.controls['text'].setValue(this.publicationInEdition.text, { emitEvent: false });
this.publicationEditionForm.controls['illustrationId'].setValue(this.publicationInEdition.illustrationId, { emitEvent: false });
this.publicationEditionForm.controls['categoryId'].setValue(this.publicationInEdition.categoryId, { emitEvent: false });
});
this.subscriptions.push(publicationSubscription);
}
ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
}
goPreviousLocation(): void {
this.location.back();
}
insertTitle(titleNumber: number): void {
this.publicationEditionService.insertTitle(titleNumber);
}
selectAPicture(): void {
this.publicationEditionService.selectAPicture();
}
insertLink(): void {
this.publicationEditionService.insertLink();
}
displayCodeBlockDialog(): void {
this.publicationEditionService.displayCodeBlockDialog();
}
save(): void {
this.publicationSave.emit(this.publicationInEdition);
}
displayPictureSectionDialog(): void {
this.publicationEditionService.displayPictureSectionDialog();
}
updateCursorPosition(event: KeyboardEvent | MouseEvent): void {
if (event.target) {
const textarea = event.target as HTMLTextAreaElement;
const positionStart = textarea.selectionStart;
const positionEnd = textarea.selectionEnd;
this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
}
}
onTabChange(tabSelectedIndex: number): void {
if (tabSelectedIndex === 1) {
this.publicationEditionService.loadPreview();
}
}
}

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

@@ -1,287 +1,288 @@
import {Location} from "@angular/common"; import { Location } from "@angular/common";
import {inject, Injectable, OnDestroy, Signal, signal} from "@angular/core"; import { inject, Injectable, OnDestroy } 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 {debounceTime, distinctUntilChanged, Subscription} from "rxjs"; 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 {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";
declare let Prism: any; declare let Prism: any;
export class CursorPosition { export class CursorPosition {
start: number; start: number;
end: number; end: number;
selectedCharacters: number; selectedCharacters: number;
constructor(start: number, end: number) { constructor(start: number, end: number) {
this.start = start; this.start = start;
this.end = end; this.end = end;
this.selectedCharacters = end - start; this.selectedCharacters = end - start;
} }
} }
export interface PublicationEditionState { export interface PublicationEditionState {
publication: Publication; publication: Publication;
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 = {
publication: DEFAULT_PUBLICATION, publication: DEFAULT_PUBLICATION,
cursorPosition: DEFAULT_CURSOR_POSITION cursorPosition: DEFAULT_CURSOR_POSITION
}; };
@Injectable() @Injectable()
export class PublicationEditionService implements OnDestroy { export class PublicationEditionService implements OnDestroy {
readonly #activatedRoute = inject(ActivatedRoute); private readonly activatedRoute = inject(ActivatedRoute);
readonly #dialog = inject(MatDialog); private readonly publicationRestService = inject(PublicationRestService);
readonly #formBuilder = inject(FormBuilder); private readonly location = inject(Location);
readonly #location = inject(Location); private readonly snackBar = inject(MatSnackBar);
readonly #publicationRestService = inject(PublicationRestService); private readonly dialog = inject(MatDialog);
readonly #snackBar = inject(MatSnackBar);
#isLoading = signal(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
#state = signal<PublicationEditionState>(copy(DEFAULT_STATE)); private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
#isSaving = signal<boolean>(false); private subscriptions: Subscription[] = [];
#isPreviewing = signal<boolean>(false); private isSavingSubject = new BehaviorSubject<boolean>(false);
#subscriptions: Subscription[] = []; private isPreviewingSubject = new BehaviorSubject<boolean>(false);
publicationEditionForm: FormGroup = this.#formBuilder.group({ ngOnDestroy(): void {
title: new FormControl<string | undefined>('', [Validators.required]), this.subscriptions.forEach(subscription => subscription.unsubscribe());
description: new FormControl<string | undefined>('', [Validators.required]), }
text: new FormControl<string | undefined>('', [Validators.required]),
illustrationId: new FormControl<string | undefined>('', [Validators.required]),
categoryId: new FormControl<string | undefined>('', [Validators.required])
});
ngOnDestroy(): void { private get _state(): PublicationEditionState {
this.#subscriptions.forEach(subscription => subscription.unsubscribe()); return this.stateSubject.value;
} }
#updateForm(): void { private _save(state: PublicationEditionState): void {
const state = this.#state(); this.stateSubject.next(state);
const publication = state.publication; }
this.publicationEditionForm.controls['title'].setValue(publication.title); get isLoading$(): Observable<boolean> {
this.publicationEditionForm.controls['description'].setValue(publication.description); return this.isLoadingSubject.asObservable();
this.publicationEditionForm.controls['text'].setValue(publication.text); }
this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
}
get isLoading(): Signal<boolean> { get isSaving$(): Observable<boolean> {
return this.#isLoading.asReadonly(); return this.isSavingSubject.asObservable();
} }
get isSaving(): Signal<boolean> { get isPreviewing$(): Observable<boolean> {
return this.#isSaving.asReadonly(); return this.isPreviewingSubject.asObservable();
} }
get isPreviewing(): Signal<boolean> { get state$(): Observable<PublicationEditionState> {
return this.#isPreviewing.asReadonly(); return this.stateSubject.asObservable();
} }
get state(): Signal<PublicationEditionState> { loadPublication(): void {
return this.#state.asReadonly(); this.isLoadingSubject.next(true);
}
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)
.then(publication => {
const state = this._state;
state.publication = publication;
this.stateSubject.next(state);
})
.catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error)
})
.finally(() => this.isLoadingSubject.next(false));
}
});
}
get editedPublication(): Publication { init(publication: Publication): void {
return this.#state().publication; const state = this._state;
} state.publication = publication;
this.stateSubject.next(state);
}
loadPublication(): void { editTitle(title: string): void {
this.#isLoading.set(true); const state = this._state;
state.publication.title = title;
this._save(state);
}
this.#activatedRoute.paramMap.subscribe(params => { editDescription(description: string): void {
const publicationId = params.get('publicationId'); const state = this._state;
if (publicationId == undefined) { state.publication.description = description;
this.#snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, {duration: 5000}); this._save(state);
this.#location.back(); }
} else {
this.#publicationRestService.getById(publicationId)
.then(publication => {
const state = this.#state();
state.publication = publication;
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});
console.error(errorMessage, error)
})
.finally(() => this.#isLoading.set(false));
}
});
}
init(publication: Publication): void { editCategoryId(categoryId: string): void {
const state = this.#state(); const state = this._state;
state.publication = publication; state.publication.categoryId = categoryId;
this.#state.set(state); this._save(state);
this.#updateForm(); }
editText(text: string): void {
const state = this._state;
state.publication.text = text;
this._save(state);
}
editIllustrationId(pictureId: string): void {
const state = this._state;
state.publication.illustrationId = pictureId
this._save(state);
}
displayPictureSectionDialog(): void {
const dialogRef = this.dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => {
if (newPictureId) {
this.editIllustrationId(newPictureId);
}
});
this.subscriptions.push(afterDialogCloseSubscription);
}
displayCodeBlockDialog(): void {
const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' });
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(codeBlockWithLanguage => {
if (codeBlockWithLanguage) {
this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
}
});
this.subscriptions.push(afterDialogCloseSubscription);
}
editCursorPosition(positionStart: number, positionEnd: number): void {
const state = this._state;
state.cursorPosition.start = positionStart;
state.cursorPosition.end = positionEnd;
this._save(state);
}
insertTitle(titleNumber: number): void {
if (titleNumber >= 1 && titleNumber <= 3) {
const state = this._state;
const publication = state.publication;
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
const textWithTags = `${publicationTextLeftPart}[h${titleNumber}]${publicationTextMiddlePart}[/h${titleNumber}]${publicationTextRightPart}`;
publication.text = textWithTags;
this._save(state);
} else {
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
}
}
selectAPicture(): void {
const dialogRef = this.dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => {
if (newPictureId) {
this.insertPicture(newPictureId);
}
});
this.subscriptions.push(afterDialogCloseSubscription);
}
insertPicture(pictureId: string): void {
const state = this._state;
const formValueChangesSubscription = this.publicationEditionForm.valueChanges
.pipe(
debounceTime(200),
distinctUntilChanged()
)
.subscribe(formValue => {
const state = this.#state();
const publication = state.publication; const publication = state.publication;
publication.title = formValue.title; const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
publication.description = formValue.description; const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
publication.categoryId = formValue.categoryId; const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
publication.text = formValue.text;
this.#state.set(state); publication.text = textWithTags;
});
this.#subscriptions.push(formValueChangesSubscription);
}
private editIllustrationId(pictureId: string): void { this._save(state);
const state = this.#state();
state.publication.illustrationId = pictureId
this.#state.set(state);
}
displayPictureSectionDialog(): void {
const dialogRef = this.#dialog.open(PictureSelectionDialog);
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(newPictureId => {
if (newPictureId) {
this.editIllustrationId(newPictureId);
}
});
this.#subscriptions.push(afterDialogCloseSubscription);
}
displayCodeBlockDialog(): void {
const dialogRef = this.#dialog.open(CodeBlockDialog, {width: '60em'});
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(codeBlockWithLanguage => {
if (codeBlockWithLanguage) {
this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
}
});
this.#subscriptions.push(afterDialogCloseSubscription);
}
editCursorPosition(positionStart: number, positionEnd: number): void {
const state = this.#state();
state.cursorPosition.start = positionStart;
state.cursorPosition.end = positionEnd;
this.#state.set(state);
}
insertTitle(titleNumber: number): void {
if (titleNumber >= 1 && titleNumber <= 3) {
const state = this.#state();
const publication = state.publication;
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
const textWithTags = `${publicationTextLeftPart}[h${titleNumber}]${publicationTextMiddlePart}[/h${titleNumber}]${publicationTextRightPart}`;
publication.text = textWithTags;
this.#state.set(state);
this.#updateForm();
} else {
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
} }
}
selectAPicture(): void { insertLink(): void {
const dialogRef = this.#dialog.open(PictureSelectionDialog); const state = this._state;
const afterDialogCloseSubscription = dialogRef.afterClosed() const publication = state.publication;
.subscribe(newPictureId => {
if (newPictureId) {
this.insertPicture(newPictureId);
}
});
this.#subscriptions.push(afterDialogCloseSubscription);
}
insertPicture(pictureId: string): void { const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
const state = this.#state(); const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
const textWithTags = `${publicationTextLeftPart}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
const publication = state.publication; publication.text = textWithTags;
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start); this._save(state);
const publicationTextRightPart = publication.text.substring(state.cursorPosition.start); }
const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
publication.text = textWithTags; insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
const state = this._state;
this.#state.set(state); const publication = state.publication;
this.#updateForm();
}
insertLink(): void { const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
const state = this.#state(); const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
const codeBlockInstruction = `\n[code lg="${programmingLanguage}"]\n${codeBlock}\n[/code]\n\n`;
const textWithTags = `${publicationTextLeftPart}${codeBlockInstruction}${publicationTextRightPart}`;
const publication = state.publication; publication.text = textWithTags;
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start); this._save(state);
const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end); }
const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
const textWithTags = `${publicationTextLeftPart}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
publication.text = textWithTags; loadPreview(): void {
const state = this._state;
this.#state.set(state); this.isPreviewingSubject.next(true);
this.#updateForm(); const request: PreviewContentRequest = {
} text: state.publication.text
};
private insertCodeBlock(programmingLanguage: string, codeBlock: string): void { this.publicationRestService.preview(request)
const state = this.#state(); .then(response => {
state.publication.parsedText = response.text;
const publication = state.publication; this._save(state);
setTimeout(() => Prism.highlightAll(), 1000);
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start); })
const publicationTextRightPart = publication.text.substring(state.cursorPosition.start); .catch(error => {
const codeBlockInstruction = `\n[code lg="${programmingLanguage}"]\n${codeBlock}\n[/code]\n\n`; console.error(error);
const textWithTags = `${publicationTextLeftPart}${codeBlockInstruction}${publicationTextRightPart}`; })
.finally(() => {
publication.text = textWithTags; this.isPreviewingSubject.next(false);
});
this.#state.set(state); }
this.#updateForm(); }
}
loadPreview(): void {
const state = this.#state();
this.#isPreviewing.set(true);
const request: PreviewContentRequest = {
text: state.publication.text
};
this.#publicationRestService.preview(request)
.then(response => {
state.publication.parsedText = response.text;
this.#state.set(state);
setTimeout(() => Prism.highlightAll(), 1000);
})
.catch(error => {
console.error(error);
})
.finally(() => {
this.#isPreviewing.set(false);
});
}
}

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

@@ -1,16 +1,16 @@
@for (publication of publications(); track publication.id) { @for(publication of publications$ | async; track publication) {
<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>
</div> </div>
</a> </a>
} }

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

@@ -1,87 +1,87 @@
$cardBorderRadius: .5em; $cardBorderRadius: .5em;
:host { :host {
display: flex;
flex-direction: column;
gap: 2em;
max-width: 50em;
width: 90%;
margin: auto;
.publication {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: $cardBorderRadius; gap: 2em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12); max-width: 50em;
transition: box-shadow .2s ease-in-out; width: 90%;
text-decoration: none; margin: auto;
color: black;
background-color: #ffffff;
&:hover { .publication {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .24), 0 4px 14px 0 rgba(0, 0, 0, .16); display: flex;
flex-direction: column;
border-radius: $cardBorderRadius;
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;
text-decoration: none;
color: black;
background-color: #ffffff;
&:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.24),0 4px 14px 0 rgba(0,0,0,.16);
}
img {
object-fit: cover;
height: 15em;
border-radius: $cardBorderRadius $cardBorderRadius 0 0;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 20em;
}
@media screen and (min-width: 600px) {
height: 25em;
}
@media screen and (min-width: 750px) {
height: 32em;
}
}
.body {
display: flex;
flex-direction: column;
padding: 1.5em 2em;
h1 {
font-size: 1.8em;
margin-bottom: .5em;
}
h2 {
font-size: 1em;
line-height: 1.4em;
margin: 0;
color: #747373;
font-weight: 400;
}
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
background-color: #f0f0f0;
border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
padding: 1em 2em;
gap: 1em;
color: #6c757d;
img {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
} }
}
img {
object-fit: cover;
height: 15em;
border-radius: $cardBorderRadius $cardBorderRadius 0 0;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 20em;
}
@media screen and (min-width: 600px) {
height: 25em;
}
@media screen and (min-width: 750px) {
height: 32em;
}
}
.body {
display: flex;
flex-direction: column;
padding: 1.5em 2em;
h1 {
font-size: 1.8em;
margin-bottom: .5em;
}
h2 {
font-size: 1em;
line-height: 1.4em;
margin: 0;
color: #747373;
font-weight: 400;
}
}
.footer {
display: flex;
flex-direction: row;
align-items: center;
background-color: #f0f0f0;
border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
padding: 1em 2em;
gap: 1em;
color: #6c757d;
img {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
}
}

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

@@ -1,15 +1,18 @@
import {Component, 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 {CommonModule} from "@angular/common"; import { Observable } from "rxjs";
import {RouterModule} from "@angular/router"; import { CommonModule } from "@angular/common";
import {MatTooltipModule} from "@angular/material/tooltip"; import { RouterModule } from "@angular/router";
import { MatTooltipModule } from "@angular/material/tooltip";
@Component({ @Component({
selector: 'app-publication-list', selector: 'app-publication-list',
templateUrl: './publication-list.component.html', standalone: true,
styleUrl: './publication-list.component.scss', templateUrl: './publication-list.component.html',
imports: [CommonModule, RouterModule, MatTooltipModule] styleUrl: './publication-list.component.scss',
imports: [CommonModule, RouterModule, MatTooltipModule]
}) })
export class PublicationListComponent { export class PublicationListComponent {
publications = input.required<Publication[]>(); @Input()
} publications$!: Observable<Publication[]>;
}

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

@@ -1,6 +1,6 @@
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/> <input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
<button type="submit" (click)="searchPublications()" matRipple> <button type="submit" (click)="searchPublications()">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
</form> </form>

67
frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
View File

@@ -1,38 +1,37 @@
:host { :host {
$borderRadiusValue: 10em; $borderRadiusValue: 10em;
position: relative; position: relative;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
form { form {
display: flex; display: flex;
input { input {
flex: 1; flex: 1;
border-radius: $borderRadiusValue; border-radius: $borderRadiusValue;
background-color: white; background-color: white;
border: solid 1px #ddd; border: solid 1px #ddd;
padding: .2em 2.7em .2em 1em; padding: .2em 2.7em .2em 1em;
height: 2em; height: 2em;
width: 100%; width: 100%;
}
button {
position: absolute;
display: flex;
align-items: center;
border-radius: $borderRadiusValue;
background-color: white;
border: none;
top: .4em;
right: 0;
color: #aaaaaa;
&:hover {
background-color: #eee;
cursor: pointer;
}
}
} }
}
button {
position: absolute;
display: flex;
align-items: center;
border-radius: $borderRadiusValue;
background-color: white;
border: none;
top: 0;
right: 0;
color: #aaaaaa;
padding: .3em;
&:hover {
background-color: #eee;
cursor: pointer;
}
}
}
}

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

@@ -1,36 +1,36 @@
import {Component, inject} from "@angular/core"; import { HttpParams } from "@angular/common/http";
import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; import { Component, inject } from "@angular/core";
import {MatRippleModule} from "@angular/material/core"; import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import {MatIconModule} from "@angular/material/icon"; import { MatIconModule } from "@angular/material/icon";
import {Router} from "@angular/router"; import { Router } from "@angular/router";
@Component({ @Component({
selector: 'app-publications-search-bar', selector: 'app-publications-search-bar',
templateUrl: './publications-search-bar.component.html', templateUrl: './publications-search-bar.component.html',
styleUrl: './publications-search-bar.component.scss', styleUrl: './publications-search-bar.component.scss',
imports: [ standalone: true,
MatIconModule, imports: [
MatRippleModule, ReactiveFormsModule,
ReactiveFormsModule MatIconModule
], ],
providers: [] providers: []
}) })
export class PublicationsSearchBarComponent { export class PublicationsSearchBarComponent {
private formBuilder = inject(FormBuilder); private formBuilder = inject(FormBuilder);
private router = inject(Router); private router = inject(Router);
formGroup = this.formBuilder.group({ formGroup = this.formBuilder.group({
criteria: new FormControl<string | undefined>('', [Validators.required]) criteria: new FormControl<string | undefined>('', [Validators.required])
}); });
searchPublications(): void { searchPublications(): void {
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']);
}
} }
} }
}

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

@@ -1,18 +1,15 @@
@for (category of categories(); track category.id) { @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)="setOpened(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 class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
@for(subCategory of category.subCategories; track subCategory) {
<a [routerLink]="['/publications']" [queryParams]="{'category-id': subCategory.id}" (click)="categoryClicked.emit()" class="sub-category">
{{subCategory.name}}
</a>
}
</div>
</div> </div>
<div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}"> }
@for (subCategory of category.subCategories; track subCategory) {
<a [routerLink]="['/publications']"
[queryParams]="{'category-id': subCategory.id}"
(click)="categoryClicked.emit()"
class="sub-category">
{{ subCategory.name }}
</a>
}
</div>
</div>
}

98
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.scss
View File

@@ -1,57 +1,57 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.category { .category {
transition: background-color .2s ease-in-out;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
.category-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: .5em 1em;
mat-icon {
transition: transform .2s ease-in-out;
}
}
&.openned {
.category-header {
mat-icon {
transform: rotate(90deg);
}
}
.sub-category-container {
max-height: none;
}
}
.sub-category-container {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
transition: max-height .2s ease-in-out;
background-color: #303f9f;
.sub-category {
padding: .5em 1em .5em 2em;
text-decoration: none;
color: inherit;
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
&:hover { &:hover {
background-color: #5c6bc0; cursor: pointer;
background-color: #5c6bc0;
}
.category-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: .5em 1em;
mat-icon {
transition: transform .2s ease-in-out;
}
}
&.openned {
.category-header {
mat-icon {
transform: rotate(90deg);
}
}
.sub-category-container {
max-height: none;
}
}
.sub-category-container {
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 0;
transition: max-height .2s ease-in-out;
background-color: #303f9f;
.sub-category {
padding: .5em 1em .5em 2em;
text-decoration: none;
color: inherit;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
}
} }
}
} }
}
} }

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

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

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

@@ -1,19 +1,14 @@
<div class="menu {{ isOpened() ? 'displayed' : '' }}"> <div class="menu {{ isOpenned ? '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"/>
Codiki Codiki
</a> </a>
<button type="button" <button type="button" (click)="close()" matTooltip="Close the menu" i18n-matTooltip>
(click)="close()" <mat-icon>close</mat-icon>
class="cod-button icon" </button>
matTooltip="Close the menu" </h1>
matRipple <h2 i18n>Categories</h2>
i18n-matTooltip> <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
<mat-icon>close</mat-icon>
</button>
</h1>
<h2 i18n>Categories</h2>
<app-categories-menu (categoryClicked)="close()"/>
</div> </div>
<div class="overlay {{ isOpened() ? 'displayed' : ''}}" (click)="close()"></div> <div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>

134
frontend/src/app/components/side-menu/side-menu.component.scss
View File

@@ -1,68 +1,86 @@
:host { :host {
.menu { .menu {
display: flex;
flex-direction: column;
background-color: #3f51b5;
color: white;
$categoriesMenuWidth: 20em;
position: fixed;
top: 0;
left: -$categoriesMenuWidth - 1em - 1;
bottom: 0;
transition: left .2s ease-in-out;
width: $categoriesMenuWidth;
z-index: 3;
padding: 1em 0;
&.displayed {
left: 0;
}
h1 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 1em;
a {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: start; background-color: #3f51b5;
align-items: center;
gap: .5em;
color: white; color: white;
text-decoration: none;
img { $categoriesMenuWidth: 20em;
$imageSize: 1.2em; position: fixed;
width: $imageSize; top: 0;
height: $imageSize; left: -$categoriesMenuWidth - 1em - 1;
bottom: 0;
transition: left .2s ease-in-out;
width: $categoriesMenuWidth;
z-index: 3;
padding: 1em 0;
&.displayed {
left: 0;
}
h1 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 1em;
a {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: .5em;
color: white;
text-decoration: none;
img {
$imageSize: 1.2em;
width: $imageSize;
height: $imageSize;
}
}
button {
border-radius: 10em;
border: none;
display: flex;
justify-content: center;
align-items: center;
width: 2.5em;
height: 2.5em;
color: white;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
}
}
h2 {
padding: 0 1em;
} }
}
} }
h2 { .overlay {
padding: 0 1em; display: none;
} position: fixed;
} top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .2;
z-index: 2;
.overlay { &.displayed {
display: none; display: block;
position: fixed; }
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: .2;
z-index: 2;
&.displayed {
display: block;
} }
}
} }

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

@@ -1,30 +1,24 @@
import {Component, signal} 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';
import {CategoriesMenuComponent} from './categories-menu/categories-menu.component'; import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
import {MatRippleModule} from '@angular/material/core';
@Component({ @Component({
selector: 'app-side-menu', selector: 'app-side-menu',
standalone: true,
imports: [CategoriesMenuComponent, MatIconModule, MatTooltipModule, RouterModule],
templateUrl: './side-menu.component.html', templateUrl: './side-menu.component.html',
styleUrl: './side-menu.component.scss', styleUrl: './side-menu.component.scss'
imports: [
CategoriesMenuComponent,
MatIconModule,
MatRippleModule,
MatTooltipModule,
RouterModule
]
}) })
export class SideMenuComponent { export class SideMenuComponent {
isOpened = signal(false); isOpenned: boolean = false;
open(): void { open(): void {
this.isOpened.set(true); this.isOpenned = true;
} }
close(): void { close(): void {
this.isOpened.set(false); this.isOpenned = false;
} }
} }

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

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

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

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

62
frontend/src/app/components/submit-button/submit-button.component.scss
View File

@@ -1,43 +1,43 @@
button { button {
padding: .8em 1.2em; padding: .8em 1.2em;
border-radius: 10em; border-radius: 10em;
border: none; border: none;
background-color: #3f51b5; background-color: #3f51b5;
color: white; color: white;
transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
position: relative; position: relative;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover { &:hover {
background-color: #f2f4ff; background-color: #5b6ed8;
cursor: pointer; cursor: pointer;
} }
}
&:disabled { &.secondary {
background-color: #6d7ac5; color: #3f51b5;
cursor: not-allowed; background-color: white;
}
mat-spinner { &:hover {
position: absolute; background-color: #f2f4ff;
top: calc(50% - 12px); cursor: pointer;
left: calc(50% - 12px); }
} }
&:disabled {
background-color: #6d7ac5;
cursor: not-allowed;
}
mat-spinner {
position: absolute;
top: calc(50% - 12px);
left: calc(50% - 12px);
}
} }
:host ::ng-deep .spinner circle { :host ::ng-deep .spinner circle {
stroke: white; stroke: white;
} }
:host ::ng-deep .spinner.secondary circle { :host ::ng-deep .spinner.secondary circle {
stroke: #3f51b5; stroke: #3f51b5;
} }

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

@@ -1,20 +1,20 @@
import {Component, input, output} from "@angular/core"; import { CommonModule } from "@angular/common";
import {MatRippleModule} from "@angular/material/core"; import { Component, EventEmitter, Input, Output } from "@angular/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',
templateUrl: 'submit-button.component.html', standalone: true,
styleUrl: 'submit-button.component.scss', imports: [MatProgressSpinnerModule, CommonModule],
imports: [ templateUrl: 'submit-button.component.html',
MatRippleModule, styleUrl: 'submit-button.component.scss'
MatProgressSpinnerModule
]
}) })
export class SubmitButtonComponent { export class SubmitButtonComponent {
requestPending = input.required<boolean>(); @Input() requestPending: boolean = false;
label = input<string>(); @Input() label: string = '';
disabled = input<boolean>(false); @Input() disabled: boolean = false;
color = input<'secondary' | undefined>('secondary'); @Input() color?: 'secondary';
click = output<void>(); @Output() click = new EventEmitter<void>();
} }

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

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

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

@@ -1,20 +1,18 @@
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 = () => {
const authenticationService = inject(AuthenticationService); const authenticationService = inject(AuthenticationService);
const router = inject(Router); const router = inject(Router);
const snackBar = inject(MatSnackBar); const snackBar = inject(MatSnackBar);
await authenticationService.checkIsAuthenticated(); if (authenticationService.isAuthenticated()) {
return true;
if (authenticationService.isAuthenticated()) { } else {
return true; router.navigate(['/login']);
} else { snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
router.navigate(['/login']); return false;
snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000}); }
return false; }
}
}

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

@@ -1,77 +1,89 @@
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 {UserRestService} from '../rest-services/user/user.rest-service'; import { RefreshTokenRequest } from '../rest-services/user/model/refresh-token.model';
import {AuthenticationService} from '../service/authentication.service'; import { UserRestService } from '../rest-services/user/user.rest-service';
import {Router} from '@angular/router'; import { AuthenticationService } from '../service/authentication.service';
import {MatSnackBar} from '@angular/material/snack-bar'; import { Router } from '@angular/router';
import { MatSnackBar } from '@angular/material/snack-bar';
@Injectable() @Injectable()
export class JwtInterceptor implements HttpInterceptor { export class JwtInterceptor implements HttpInterceptor {
private readonly authenticationService = inject(AuthenticationService); private readonly authenticationService = inject(AuthenticationService);
private readonly router = inject(Router); private readonly router = inject(Router);
private readonly userRestService = inject(UserRestService); private readonly userRestService = inject(UserRestService);
private readonly snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
private isRefreshingToken = false; private isRefreshingToken = false;
private refreshTokenSubject = new Subject<string | undefined>(); private refreshTokenSubject = new Subject<string | undefined>();
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let requestWithAuthentication = request;
const jwt = this.authenticationService.getToken();
if (jwt) {
requestWithAuthentication = this.addTokenInHeaders(request, jwt);
}
return next.handle(requestWithAuthentication)
.pipe(
catchError(error => {
if (error instanceof HttpErrorResponse && error.status === 401) {
return this.handleAunauthorizedError(request, next, error);
}
return throwError(() => error);
})
);
}
private handleAunauthorizedError(request: HttpRequest<any>, next: HttpHandler, initialError: any): Observable<HttpEvent<any>> {
if (!this.isRefreshingToken) {
this.isRefreshingToken = true;
this.refreshTokenSubject.next(undefined);
this.authenticationService.refreshToken()
.then(refreshTokenResponse => {
this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
})
.catch(() => this.handleNoRefreshToken(initialError))
.finally(() => this.isRefreshingToken = false);
}
return this.refreshTokenSubject.pipe(
filter(token => !!token),
take(1),
switchMap(token => {
let requestWithAuthentication = request; let requestWithAuthentication = request;
if (token) {
requestWithAuthentication = this.addTokenInHeaders(request, token) const jwt = this.authenticationService.getToken();
if (jwt) {
requestWithAuthentication = this.addTokenInHeaders(request, jwt);
} }
return next.handle(requestWithAuthentication);
})
);
}
private addTokenInHeaders(request: HttpRequest<any>, token: string): HttpRequest<any> { return next.handle(requestWithAuthentication)
return request.clone({ .pipe(
headers: request.headers.set('Authorization', `Bearer ${token}`) catchError(error => {
}); if (error instanceof HttpErrorResponse && error.status === 401) {
} return this.handleAunauthorizedError(request, next, error);
}
private handleNoRefreshToken(initialError: any): Observable<HttpEvent<any>> { return throwError(() => error);
this.router.navigate(['/login']); })
this.refreshTokenSubject.next(undefined); );
this.authenticationService.unauthenticate(); }
this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, {duration: 5000});
return throwError(() => initialError); private handleAunauthorizedError(request: HttpRequest<any>, next: HttpHandler, initialError: any): Observable<HttpEvent<any>> {
} if (!this.isRefreshingToken) {
} this.isRefreshingToken = true;
this.refreshTokenSubject.next(undefined);
const refreshToken = this.authenticationService.getRefreshToken();
if (refreshToken) {
const refreshTokenRequest: RefreshTokenRequest = {
refreshTokenValue: refreshToken
};
this.userRestService.refreshToken(refreshTokenRequest)
.then(refreshTokenResponse => {
this.authenticationService.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
this.refreshTokenSubject.next(refreshTokenResponse.accessToken);
})
.catch(() => {
return this.handleNoRefreshToken(initialError);
})
.finally(() => this.isRefreshingToken = false);
} else {
return this.handleNoRefreshToken(initialError);
}
}
return this.refreshTokenSubject.pipe(
filter(token => !!token),
take(1),
switchMap(token => {
let requestWithAuthentication = request;
if (token) {
requestWithAuthentication = this.addTokenInHeaders(request, token)
}
return next.handle(requestWithAuthentication);
})
);
}
private addTokenInHeaders(request: HttpRequest<any>, token: string): HttpRequest<any> {
return request.clone({
headers: request.headers.set('Authorization', `Bearer ${token}`)
});
}
private handleNoRefreshToken(initialError: any): Observable<HttpEvent<any>> {
this.router.navigate(['/login']);
this.refreshTokenSubject.next(undefined);
this.authenticationService.unauthenticate();
this.snackBar.open($localize`You are unauthenticated. Please, re-authenticate before retrying your action.`, $localize`Close`, { duration: 5000 });
return throwError(() => initialError);
}
}

6
frontend/src/app/core/model/FormError.ts
View File

@@ -1,4 +1,4 @@
export interface FormError { export interface FormError {
fieldName: string; fieldName: string;
errorMessage: string; errorMessage: string;
} }

12
frontend/src/app/core/model/User.ts
View File

@@ -1,7 +1,7 @@
export interface User { export interface User {
id: string; id: string;
email: string; email: string;
pseudo: string; pseudo: string;
photoId?: string; photoId?: string;
roles: string[]; roles: string[];
} }

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 {inject, Injectable} from '@angular/core'; import { Injectable, inject } 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/category/model/category.ts
View File

@@ -1,5 +1,5 @@
export interface Category { export interface Category {
id: string; id: string;
name: string; name: string;
subCategories: Category[]; subCategories: Category[];
} }

6
frontend/src/app/core/rest-services/picture/model/picture.ts
View File

@@ -1,4 +1,4 @@
export interface Picture { export interface Picture {
id: string, id: string,
publishedAt: Date publishedAt: Date
} }

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

@@ -1,21 +1,21 @@
import {HttpClient} from "@angular/common/http"; import { HttpClient, HttpParams } 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'
}) })
export class PictureRestService { export class PictureRestService {
private readonly httpClient = inject(HttpClient); private readonly httpClient = inject(HttpClient);
getAllOfCurrentUser(): Promise<Picture[]> { getAllOfCurrentUser(): Promise<Picture[]> {
return lastValueFrom(this.httpClient.get<Picture[]>('/api/pictures/current-user')); return lastValueFrom(this.httpClient.get<Picture[]>('/api/pictures/current-user'));
} }
uploadPicture(pictureFile: File): Promise<string> { uploadPicture(pictureFile: File): Promise<string> {
const formData = new FormData(); const formData = new FormData();
formData.append("file", pictureFile); formData.append("file", pictureFile);
return lastValueFrom(this.httpClient.post<string>('/api/pictures', formData)); return lastValueFrom(this.httpClient.post<string>('/api/pictures', formData));
} }
} }

8
frontend/src/app/core/rest-services/publications/model/author.ts
View File

@@ -1,5 +1,5 @@
export interface Author { export interface Author {
id: string; id: string;
name: string; name: string;
image: string; image: string;
} }

6
frontend/src/app/core/rest-services/publications/model/preview.ts
View File

@@ -1,7 +1,7 @@
export interface PreviewContentRequest { export interface PreviewContentRequest {
text: string; text: string;
} }
export interface PreviewContentResponse { export interface PreviewContentResponse {
text: string; text: string;
} }

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

@@ -1,31 +1,14 @@
import {Author} from "./author"; import { Author } from "./author";
export interface Publication { export interface Publication {
id: string; id: string;
key: string; key: string;
title: string; title: string;
text: string; text: string;
parsedText: string; parsedText: string;
description: string; description: string;
creationDate: Date; creationDate: Date;
illustrationId: string; illustrationId: string;
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 {inject, Injectable} from '@angular/core'; import { Injectable, inject } from '@angular/core';
import {lastValueFrom} from 'rxjs'; import { last, 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/model/login.model.ts
View File

@@ -1,10 +1,10 @@
export interface LoginRequest { export interface LoginRequest {
email?: string; email?: string;
password?: string; password?: string;
} }
export interface LoginResponse { export interface LoginResponse {
tokenType: string, tokenType: string,
accessToken: string, accessToken: string,
refreshToken: string refreshToken: string
} }

4
frontend/src/app/core/rest-services/user/model/refresh-token.model.ts
View File

@@ -1,3 +1,3 @@
export interface RefreshTokenRequest { export interface RefreshTokenRequest {
refreshTokenValue: string; refreshTokenValue: string;
} }

8
frontend/src/app/core/rest-services/user/model/signin.model.ts
View File

@@ -1,5 +1,5 @@
export interface SigninRequest { export interface SigninRequest {
pseudo?: string; pseudo?: string;
email?: string; email?: string;
password?: string; password?: string;
} }

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

@@ -1,25 +1,25 @@
import {HttpClient} from "@angular/common/http"; import { HttpClient } from "@angular/common/http";
import {inject, Injectable} from "@angular/core"; import { Injectable, inject } 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'
}) })
export class UserRestService { export class UserRestService {
private httpClient = inject(HttpClient); private httpClient = inject(HttpClient);
login(request: LoginRequest): Promise<LoginResponse> { login(request: LoginRequest): Promise<LoginResponse> {
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request)); return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request));
} }
signin(request: SigninRequest): Promise<void> { signin(request: SigninRequest): Promise<void> {
return lastValueFrom(this.httpClient.post<void>('/api/users', request)); return lastValueFrom(this.httpClient.post<void>('/api/users', request));
} }
refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> { refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> {
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request)); return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request));
} }
} }

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

@@ -1,146 +1,97 @@
import {inject, Injectable} from "@angular/core"; import { inject, Injectable } from "@angular/core";
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";
const JWT_PARAM = 'jwt'; const JWT_PARAM = 'jwt';
const REFRESH_TOKEN_PARAM = 'refresh-token'; const REFRESH_TOKEN_PARAM = 'refresh-token';
interface UserDetails { interface UserDetails {
sub: string; sub: string;
exp: number; exp: number;
email: string; email: string;
pseudo: string; pseudo: string;
roles: string; roles: string;
} }
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class AuthenticationService { export class AuthenticationService {
private readonly AUTHENTICATION_CHECKING_PERIOD = 5 * 60 * 1000;
private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
private readonly userRestService = inject(UserRestService);
startAuthenticationCheckingProcess(): void { authenticate(token: string, refreshToken: string): void {
this.checkIsAuthenticated(); localStorage.setItem(JWT_PARAM, token);
interval(this.AUTHENTICATION_CHECKING_PERIOD) localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
.subscribe(() => this.checkIsAuthenticated());
}
authenticate(token: string, refreshToken: string): void {
localStorage.setItem(JWT_PARAM, token);
localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
this.isAuthenticatedSubject.next(true);
}
unauthenticate(): void {
localStorage.removeItem(JWT_PARAM);
localStorage.removeItem(REFRESH_TOKEN_PARAM);
this.isAuthenticatedSubject.next(false);
}
isAuthenticated(): boolean {
return this.isAuthenticatedSubject.value;
}
getAuthenticatedUser(): User | undefined {
return this.extractUserFromLocalStorage();
}
getToken(): string | undefined {
return localStorage.getItem(JWT_PARAM) ?? undefined;
}
getRefreshToken(): string | undefined {
return localStorage.getItem(REFRESH_TOKEN_PARAM) ?? undefined;
}
isTokenExpired(): boolean {
let result = true;
const userDetails = this.extractUserDetails();
if (userDetails) {
const expirationDate = new Date(userDetails.exp * 1000);
const now = new Date();
result = expirationDate < now;
} }
return result; unauthenticate(): void {
} localStorage.removeItem(JWT_PARAM);
}
refreshToken(): Promise<LoginResponse> {
const refreshToken = this.getRefreshToken(); isAuthenticated(): boolean {
if (refreshToken) { return !!localStorage.getItem(JWT_PARAM);
const refreshTokenRequest: RefreshTokenRequest = {
refreshTokenValue: refreshToken
};
return this.userRestService.refreshToken(refreshTokenRequest)
.then(refreshTokenResponse => {
this.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
return refreshTokenResponse;
});
} }
return Promise.reject('No any refresh token found.'); getAuthenticatedUser(): User | undefined {
} return this.extractUserFromLocalStorage();
}
checkIsAuthenticated(): Promise<void> { getToken(): string | undefined {
return new Promise((resolve, reject) => { return localStorage.getItem(JWT_PARAM) ?? undefined;
const isTokenExpired = this.isTokenExpired(); }
if (isTokenExpired) {
if (this.getRefreshToken()) { getRefreshToken(): string | undefined {
this.refreshToken() return localStorage.getItem(REFRESH_TOKEN_PARAM) ?? undefined;
.then(() => resolve()) }
.catch(() => reject());
} else { isTokenExpired(): boolean {
this.isAuthenticatedSubject.next(false); let result = false;
const userDetails = this.extractUserDetails();
if (userDetails) {
const expirationDate = new Date(userDetails.exp * 1000);
const now = new Date();
result = expirationDate < now;
} }
} else {
this.isAuthenticatedSubject.next(true);
}
resolve();
});
} return result;
private extractUserFromLocalStorage(): User | undefined {
let result: User | undefined;
const userDetails = this.extractUserDetails();
if (userDetails) {
const user = this.convertToUser(userDetails);
result = user;
} }
return result; private extractUserFromLocalStorage(): User | undefined {
} let result: User | undefined = undefined;
private extractUserDetails(): UserDetails | undefined { const userDetails = this.extractUserDetails();
let result: UserDetails | undefined = undefined; if (userDetails) {
const user = this.convertToUser(userDetails);
result = user;
}
const token = localStorage.getItem(JWT_PARAM); return result;
const tokenParts = token?.split('.');
if (tokenParts?.length === 3 && tokenParts[1].length) {
const decodedTokenPart = atob(tokenParts[1]);
const userDetails: UserDetails = JSON.parse(decodedTokenPart);
result = userDetails;
} }
return result; private extractUserDetails(): UserDetails | undefined {
} let result: UserDetails | undefined = undefined;
private convertToUser(userDetails: UserDetails): User { const token = localStorage.getItem(JWT_PARAM);
return {
id: userDetails.sub, const tokenParts = token?.split('.');
email: userDetails.email, if (tokenParts?.length === 3 && tokenParts[1].length) {
pseudo: userDetails.pseudo, const decodedTokenPart = atob(tokenParts[1]);
roles: userDetails.roles.split(',') const userDetails: UserDetails = JSON.parse(decodedTokenPart);
}; result = userDetails;
} }
}
return result;
}
private convertToUser(userDetails: UserDetails): User {
return {
id: userDetails.sub,
email: userDetails.email,
pseudo: userDetails.pseudo,
roles: userDetails.roles.split(',')
};
}
}

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

@@ -1,7 +1,7 @@
import {inject, Injectable} from '@angular/core'; import { Injectable, inject } 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'

8
frontend/src/app/core/utils/ObjectUtils.ts
View File

@@ -1,5 +1,5 @@
export function copy<T>(object: T): T { export function copy<T>(object: T): T {
return JSON.parse( return JSON.parse(
JSON.stringify(object) JSON.stringify(object)
); );
} }

10
frontend/src/app/pages/disconnection/disconnection.component.scss
View File

@@ -1,6 +1,6 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }

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

@@ -1,10 +1,11 @@
import {Component, inject, OnInit} from '@angular/core'; import { Component, OnInit, inject } 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',
standalone: true,
imports: [MatProgressSpinnerModule], imports: [MatProgressSpinnerModule],
templateUrl: './disconnection.component.html', templateUrl: './disconnection.component.html',
styleUrl: './disconnection.component.scss' styleUrl: './disconnection.component.scss'

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

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

10
frontend/src/app/pages/home/home.component.scss
View File

@@ -1,6 +1,6 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }

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

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

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

@@ -1,34 +1,35 @@
import {inject, Injectable, Signal, signal} from "@angular/core"; import { Injectable, inject } from "@angular/core";
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service"; import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import {MatSnackBar} from "@angular/material/snack-bar" import { BehaviorSubject, Observable } from "rxjs";
import {Publication} from "../../core/rest-services/publications/model/publication"; import { MatSnackBar } from "@angular/material/snack-bar"
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);
#publications = signal<Publication[]>([]); private publicationsSubject = new BehaviorSubject<Publication[]>([]);
#isLoadingSubject = signal<boolean>(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
get isLoading(): Signal<boolean> { get isLoading$(): Observable<boolean> {
return this.#isLoadingSubject.asReadonly(); return this.isLoadingSubject.asObservable();
} }
get publications(): Signal<Publication[]> { get publications$(): Observable<Publication[]> {
return this.#publications.asReadonly(); return this.publicationsSubject.asObservable();
} }
startLatestPublicationsRetrieving(): void { startLatestPublicationsRetrieving(): void {
this.#isLoadingSubject.set(true); this.isLoadingSubject.next(true);
this.publicationRestService.getLatest() this.publicationRestService.getLatest()
.then(publications => this.#publications.set(publications)) .then(publications => this.publicationsSubject.next(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.set(false)); .finally(() => this.isLoadingSubject.next(false));
} }
} }

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

@@ -1,23 +1,23 @@
<form [formGroup]="loginForm" (submit)="performLogin()" class="cod-form card" ngNativeValidate> <form [formGroup]="loginForm" (submit)="performLogin()" ngNativeValidate>
<h1 i18n>Login</h1> <h1 i18n>Login</h1>
<div class="form-field"> <div>
<mat-icon>mail</mat-icon> <mat-icon>mail</mat-icon>
<label for="email" i18n> <label for="email" i18n>
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>
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
<label for="password" i18n> <label for="password" i18n>
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">
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button> <button type="submit" i18n>Send</button>
<a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a> <a [routerLink]="['/signin']" i18n>Create an account</a>
</div> </div>
</form> </form>

87
frontend/src/app/pages/login/login.component.scss
View File

@@ -1,7 +1,82 @@
:host { :host {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 1em; padding: 1em;
}
form {
width: 80%;
max-width: 20em;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
border-radius: .5em;
padding: 1em 1.5em;
background-color: #ffffff;
h1 {
margin: 0;
}
div {
display: flex;
flex-direction: column;
position: relative;
gap: .1em;
mat-icon {
position: absolute;
top: 1.3em;
left: .5em;
color: #777;
}
&.actions {
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
a {
color: #3f51b5;
text-decoration: none;
}
button, a.button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
}
}
label {
flex: 1;
font-style: italic;
padding-left: 1em;
color: #777;
.required {
color: red;
}
}
input {
flex: 1;
background-color: #eeeeee;
border: none;
border-radius: 10em;
padding: 1em 1em 1em 3em;
}
}
}
}

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

@@ -1,24 +1,17 @@
import {Component, inject, OnDestroy, OnInit} from '@angular/core'; import { Component, OnDestroy, OnInit, inject } 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 {debounceTime, map, Subscription} from 'rxjs'; import { Subscription, debounceTime, map } 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 {MatRippleModule} from '@angular/material/core';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
standalone: true,
templateUrl: './login.component.html', templateUrl: './login.component.html',
styleUrl: './login.component.scss', styleUrl: './login.component.scss',
imports: [ imports: [ReactiveFormsModule, MatIconModule, RouterModule],
MatIconModule,
MatRippleModule,
ReactiveFormsModule,
RouterModule,
SubmitButtonComponent
],
providers: [LoginService, MatSnackBarModule] providers: [LoginService, MatSnackBarModule]
}) })
export class LoginComponent implements OnInit, OnDestroy { export class LoginComponent implements OnInit, OnDestroy {
@@ -52,10 +45,10 @@ export class LoginComponent implements OnInit, OnDestroy {
this.subscriptions.push(passwordSubscription) this.subscriptions.push(passwordSubscription)
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);
} }

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

@@ -1,12 +1,12 @@
import {inject, Injectable} from '@angular/core'; import { Injectable, inject } 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;
@@ -60,24 +60,18 @@ export class LoginService {
performLogin(): void { performLogin(): void {
const state = this.state; const state = this.state;
if (this.isStateValid(state)) { // Check state is valid
this.userRestService
.login(state.request)
.then((response) => {
this.authenticationService.authenticate(response.accessToken, response.refreshToken);
this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, {duration: 5000});
this.router.navigate(['/home']);
})
.catch((error) => {
console.error(error);
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, {duration: 5000});
});
} else {
this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, {duration: 5000});
}
}
isStateValid(state: LoginState): boolean { this.userRestService
return !!state.request.email?.trim().length && !!state.request.password?.length; .login(state.request)
.then((response) => {
this.authenticationService.authenticate(response.accessToken, response.refreshToken);
this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
this.router.navigate(['/home']);
})
.catch((error) => {
console.error(error);
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
});
} }
} }

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

@@ -1,21 +1,20 @@
<h1 i18n>Your publications</h1> <h1 i18n>Your publications</h1>
<a [routerLink]="['/publications/new']" <a [routerLink]="['/publications/new']"
class="new-publication" class="new-publication"
matTooltip="Add a new publication" matTooltip="Add a new publication"
matTooltipPosition="left" matTooltipPosition="left"
matRipple i18n-matTooltip>
i18n-matTooltip> +
+
</a> </a>
@if (isLoading()) { @if ((isLoading$ | async) === true) {
<h2 i18n>Publication loading...</h2> <h2 i18n>Publication loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {
@if (isLoaded()) { @if ((isLoaded$ | async) === true) {
<app-publication-list [publications]="publications()"></app-publication-list> <app-publication-list [publications$]="publications$"></app-publication-list>
} @else { } @else {
<h2 i18n>There is no any publication...</h2> <h2 i18n>There is no any publication...</h2>
} }
} }

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

@@ -1,29 +1,29 @@
$newPublicationButtonSize: 1.7em; $newPublicationButtonSize: 1.7em;
:host { :host {
display: flex;
flex-direction: column;
align-items: center;
.new-publication {
position: fixed;
border-radius: 10em;
background-color: #14A44D;
color: white;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; align-items: center;
bottom: $newPublicationButtonSize;
right: $newPublicationButtonSize;
width: $newPublicationButtonSize;
height: $newPublicationButtonSize;
text-decoration: none;
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;
font-size: 2.2em;
&:hover { .new-publication {
background-color: #0e7a3a; position: fixed;
border-radius: 10em;
background-color: #14A44D;
color: white;
display: flex;
justify-content: center;
align-items: center;
bottom: $newPublicationButtonSize;
right: $newPublicationButtonSize;
width: $newPublicationButtonSize;
height: $newPublicationButtonSize;
text-decoration: none;
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;
font-size: 2.2em;
&:hover {
background-color: #0e7a3a;
}
} }
} }
}

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

@@ -1,35 +1,44 @@
import {Component, inject, OnInit} 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 {MyPublicationsService} from "./my-publications.service"; import { MyPublicationsService } from "./my-publications.service";
import {PublicationListComponent} from "../../components/publication-list/publication-list.component"; import { Observable } from "rxjs";
import {CommonModule} from "@angular/common"; import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
import {RouterModule} from "@angular/router"; import { Publication } from "../../core/rest-services/publications/model/publication";
import {MatTooltipModule} from "@angular/material/tooltip"; import { CommonModule } from "@angular/common";
import {MatRippleModule} from "@angular/material/core"; import { RouterModule } from "@angular/router";
import { MatTooltipModule } from "@angular/material/tooltip";
@Component({ @Component({
selector: 'app-my-component', selector: 'app-my-component',
templateUrl: './my-publications.component.html', standalone: true,
styleUrl: './my-publications.component.scss', templateUrl: './my-publications.component.html',
imports: [ styleUrl: './my-publications.component.scss',
CommonModule, imports: [
MatProgressSpinnerModule, CommonModule,
MatRippleModule, MatProgressSpinnerModule,
MatTooltipModule, PublicationListComponent,
PublicationListComponent, MatTooltipModule,
RouterModule RouterModule
], ],
providers: [MyPublicationsService] providers: [MyPublicationsService]
}) })
export class MyPublicationsComponent implements OnInit { export class MyPublicationsComponent implements OnInit {
private readonly myPublicationsService = inject(MyPublicationsService); private readonly myPublicationsService = inject(MyPublicationsService);
publications = this.myPublicationsService.publications; get publications$(): Observable<Publication[]> {
isLoading = this.myPublicationsService.isLoading; return this.myPublicationsService.publications$;
isLoaded = this.myPublicationsService.isLoaded; }
ngOnInit(): void { get isLoading$(): Observable<boolean> {
this.myPublicationsService.loadAuthenticatedUserPublications(); return this.myPublicationsService.isLoading$;
} }
}
get isLoaded$(): Observable<boolean> {
return this.myPublicationsService.isLoaded$;
}
ngOnInit(): void {
this.myPublicationsService.loadAuthenticatedUserPublications();
}
}

10
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] }
] ]

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

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

12
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>

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

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

10
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] }
] ]

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

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

10
frontend/src/app/pages/publication-update/publication-update.component.scss
View File

@@ -1,7 +1,7 @@
:host { :host {
display: flex; display: flex;
app-publication-edition { app-publication-edition {
flex: 1; flex: 1;
} }
} }

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

@@ -1,22 +1,24 @@
import {CommonModule, Location} from '@angular/common'; import { CommonModule, Location } from '@angular/common';
import {Component, effect, inject, Signal, signal} from '@angular/core'; import { Component, inject, OnDestroy, OnInit } 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 {PublicationEditionComponent} from '../../components/publication-edition/publication-edition.component'; import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import {Publication} from '../../core/rest-services/publications/model/publication'; import { PublicationEditionComponent } from '../../components/publication-edition/publication-edition.component';
import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service'; import { SubmitButtonComponent } from '../../components/submit-button/submit-button.component';
import {toSignal} from "@angular/core/rxjs-interop"; import { Publication } from '../../core/rest-services/publications/model/publication';
import {map} from "rxjs"; import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import { PictureSelectionDialog } from '../../components/publication-edition/picture-selection-dialog/picture-selection-dialog.component';
@Component({ @Component({
selector: 'app-publication-update', selector: 'app-publication-update',
standalone: true,
imports: [ imports: [
CommonModule, CommonModule,
MatDialogModule, MatDialogModule,
@@ -25,69 +27,71 @@ import {map} from "rxjs";
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatTabsModule, MatTabsModule,
MatTooltipModule, MatTooltipModule,
PictureSelectionDialog,
ReactiveFormsModule, ReactiveFormsModule,
SubmitButtonComponent,
PublicationEditionComponent PublicationEditionComponent
], ],
templateUrl: './publication-update.component.html', templateUrl: './publication-update.component.html',
styleUrl: './publication-update.component.scss' styleUrl: './publication-update.component.scss',
}) })
export class PublicationUpdateComponent { export class PublicationUpdateComponent implements OnInit, OnDestroy {
readonly #activatedRoute = inject(ActivatedRoute); private readonly publicationRestService = inject(PublicationRestService);
readonly #location = inject(Location); private readonly activatedRoute = inject(ActivatedRoute);
readonly #publicationRestService = inject(PublicationRestService); private readonly location = inject(Location);
readonly #router = inject(Router); private readonly router = inject(Router);
readonly #snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
#isLoading = signal(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
#isSavingSubject = signal(false); private isSavingSubject = new BehaviorSubject<boolean>(false);
publication = signal<Publication | undefined>(undefined); private subscriptions: Subscription[] = [];
publication: Publication | undefined;
#publicationId$ = this.#activatedRoute.params get isLoading$(): Observable<boolean> {
.pipe(map(queryParams => queryParams['publicationId'])); return this.isLoadingSubject.asObservable();
#publicationId = toSignal(this.#publicationId$, {initialValue: undefined});
get isLoading(): Signal<boolean> {
return this.#isLoading.asReadonly();
} }
get isSaving(): Signal<boolean> { get isSaving$(): Observable<boolean> {
return this.#isSavingSubject.asReadonly(); return this.isSavingSubject.asObservable();
} }
constructor() { ngOnInit(): void {
effect(() => { this.isLoadingSubject.next(true);
this.#isLoading.set(true); 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)
.then(publication => {
this.publication = publication;
})
.catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
console.error(errorMessage, error)
})
.finally(() => this.isLoadingSubject.next(false));
}
});
}
const publicationId = this.#publicationId(); ngOnDestroy(): void {
if (publicationId) { this.subscriptions.forEach(subscription => subscription?.unsubscribe());
this.#publicationRestService.getById(publicationId)
.then(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});
console.error(errorMessage, error)
})
.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();
}
});
} }
onPublicationSave(publication: Publication): void { onPublicationSave(publication: Publication): void {
this.#isSavingSubject.set(true); this.isSavingSubject.next(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.set(false)); .finally(() => this.isSavingSubject.next(false));
} }
} }

10
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] }
] ]

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

@@ -1,50 +1,48 @@
@if (isLoading()) { @if (isLoading) {
<h2 i18n>Publication content loading...</h2> <h2 i18n>Publication content loading...</h2>
<mat-spinner></mat-spinner> <mat-spinner></mat-spinner>
} @else { } @else {
@if (publication(); as publication) { @if (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>
@if (isAuthorAndUserEquals()) { @if (isAuthorAndUserEquals) {
<a [routerLink]="['edit']" <a [routerLink]="['edit']"
class="button action" class="button action"
matTooltip="Click to edit the publication" matTooltip="Click to edit the publication"
matRipple i18n-matTooltip>
i18n-matTooltip> <mat-icon>edit</mat-icon>
<mat-icon>edit</mat-icon> </a>
</a> }
} </header>
</header> <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">
({{ publication.creationDate | date: 'short' }}) ({{ publication.creationDate | date: 'short' }})
</span> </span>
</div> </div>
</div>
@if (isAuthorAndUserEquals) {
<button type="button"
(click)="deletePublication()"
matTooltip="Click to delete the publication"
matTooltipPosition="left"
i18n-matTooltip>
<mat-icon>delete</mat-icon>
Delete
</button>
}
</footer>
</div> </div>
@if (isAuthorAndUserEquals()) { } @else {
<button type="button" <div class="loading-failed">
(click)="deletePublication()" <h1 i18n>Publication failed to load...</h1>
matTooltip="Click to delete the publication" </div>
matTooltipPosition="left" }
matRipple }
i18n-matTooltip>
<mat-icon>delete</mat-icon>
Delete
</button>
}
</footer>
</div>
} @else {
<div class="loading-failed">
<h1 i18n>Publication failed to load...</h1>
</div>
}
}

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

@@ -1,140 +1,140 @@
$cardBorderRadius: .5em; $cardBorderRadius: .5em;
:host { :host {
display: flex;
justify-content: center;
.card {
display: flex; display: flex;
flex-direction: column; justify-content: center;
margin: 1em;
max-width: 80em;
width: 90%;
border-radius: .5em;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
img { .card {
height: 12em;
object-fit: cover;
border-radius: $cardBorderRadius $cardBorderRadius 0 0;
transition: height .2s ease-in-out;
@media screen and (min-width: 450px) {
height: 15em;
}
@media screen and (min-width: 600px) {
height: 20em;
}
@media screen and (min-width: 750px) {
height: 25em;
}
}
header {
padding: 2em;
position: relative;
h1 {
font-size: 2em;
margin-bottom: .5em;
}
h2 {
font-size: 1.2em;
line-height: 1.6em;
margin: 0;
font-weight: 400;
}
a {
padding: .8em .8em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
position: absolute;
top: -1.5em;
right: 3em;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center; margin: 1em;
max-width: 80em;
&:hover { width: 90%;
background-color: #5b6ed8; border-radius: .5em;
cursor: pointer; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
}
}
}
main {
border-top: 1px solid #dddddd;
margin: 0 2em 2em 2em;
padding-top: 2em;
text-align: justify;
}
footer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
padding: 1em 2em;
gap: 1em;
@media screen and (min-width: 500px) {
flex-direction: row;
}
.metadata {
display: flex;
flex-direction: row;
align-items: center;
gap: 1em;
img { img {
$imageSize: 4em; height: 12em;
border-radius: 10em; object-fit: cover;
width: $imageSize; border-radius: $cardBorderRadius $cardBorderRadius 0 0;
height: $imageSize; transition: height .2s ease-in-out;
object-fit: cover;
@media screen and (min-width: 450px) {
height: 15em;
}
@media screen and (min-width: 600px) {
height: 20em;
}
@media screen and (min-width: 750px) {
height: 25em;
}
} }
.posting-data { header {
display: flex; padding: 2em;
flex-direction: column; position: relative;
justify-content: center;
align-items: start;
.publication-date { h1 {
font-style: italic; font-size: 2em;
color: #bdbdbd; margin-bottom: .5em;
} }
h2 {
font-size: 1.2em;
line-height: 1.6em;
margin: 0;
font-weight: 400;
}
a {
padding: .8em .8em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
position: absolute;
top: -1.5em;
right: 3em;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
}
} }
}
button { main {
padding: .8em 1.2em; border-top: 1px solid #dddddd;
border-radius: 10em; margin: 0 2em 2em 2em;
border: none; padding-top: 2em;
background-color: #D50000; text-align: justify;
color: white; }
transition: background-color .2s ease-in-out;
display: flex; footer {
flex-direction: row; display: flex;
justify-content: center; flex-direction: column;
align-items: center; justify-content: space-between;
gap: .5em; align-items: center;
background-color: #f0f0f0;
&:hover { border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
background-color: #E53935; padding: 1em 2em;
cursor: pointer; gap: 1em;
@media screen and (min-width: 500px) {
flex-direction: row;
}
.metadata {
display: flex;
flex-direction: row;
align-items: center;
gap: 1em;
img {
$imageSize: 4em;
border-radius: 10em;
width: $imageSize;
height: $imageSize;
object-fit: cover;
}
.posting-data {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
.publication-date {
font-style: italic;
color: #bdbdbd;
}
}
}
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #D50000;
color: white;
transition: background-color .2s ease-in-out;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: .5em;
&:hover {
background-color: #E53935;
cursor: pointer;
}
}
} }
}
} }
} }
}

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

@@ -1,32 +1,25 @@
import {CommonModule, Location} from '@angular/common'; import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core'; import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import {MatRippleModule} from '@angular/material/core'; import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import {MatDialog} from '@angular/material/dialog'; import { Subscription } from 'rxjs';
import {MatIcon} from '@angular/material/icon'; import { Publication } from '../../core/rest-services/publications/model/publication';
import {MatProgressSpinner} from '@angular/material/progress-spinner'; import { MatSnackBar } from '@angular/material/snack-bar';
import {MatSnackBar} from '@angular/material/snack-bar'; import { CommonModule, Location } from '@angular/common';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatProgressSpinner } from '@angular/material/progress-spinner';
import {ActivatedRoute, RouterModule} from '@angular/router'; import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
import {Subscription} from 'rxjs'; import { MatIcon } from '@angular/material/icon';
import {ConfirmationDialog} from '../../components/confirmation-dialog/confirmation-dialog.component'; import { AuthenticationService } from '../../core/service/authentication.service';
import {Publication} from '../../core/rest-services/publications/model/publication'; import { MatDialog } from '@angular/material/dialog';
import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service'; import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component';
import {AuthenticationService} from '../../core/service/authentication.service';
declare let Prism: any; declare let Prism: any;
@Component({ @Component({
selector: 'app-publication', selector: 'app-publication',
standalone: true,
imports: [CommonModule, MatProgressSpinner, MatTooltip, RouterModule, MatIcon, MatTooltipModule],
templateUrl: './publication.component.html', templateUrl: './publication.component.html',
styleUrl: './publication.component.scss', styleUrl: './publication.component.scss'
imports: [
CommonModule,
MatIcon,
MatRippleModule,
MatProgressSpinner,
MatTooltipModule,
RouterModule
]
}) })
export class PublicationComponent implements OnInit, OnDestroy { export class PublicationComponent implements OnInit, OnDestroy {
private readonly activatedRoute = inject(ActivatedRoute); private readonly activatedRoute = inject(ActivatedRoute);
@@ -37,35 +30,35 @@ export class PublicationComponent implements OnInit, OnDestroy {
private readonly snackBar = inject(MatSnackBar); private readonly snackBar = inject(MatSnackBar);
private paramMapSubscription?: Subscription; private paramMapSubscription?: Subscription;
private afterDialogCloseSubscription?: Subscription; private afterDialogCloseSubscription?: Subscription;
isLoading = signal(false); isLoading: boolean = false;
isAuthorAndUserEquals = signal(false); isAuthorAndUserEquals: boolean = false;
publication = signal<Publication | null>(null); publication?: Publication;
ngOnInit(): void { ngOnInit(): void {
this.paramMapSubscription = this.activatedRoute this.paramMapSubscription = this.activatedRoute
.paramMap .paramMap
.subscribe(params => { .subscribe(params => {
const publicationId = params.get('publicationId'); const publicationId = params.get('publicationId');
if (publicationId) { if (publicationId) {
this.isLoading.set(true); this.isLoading = true;
this.publicationRestService.getById(publicationId) this.publicationRestService.getById(publicationId)
.then(publication => { .then(publication => {
this.publication.set(publication); this.publication = publication;
this.isAuthorAndUserEquals.set(this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id); this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
setTimeout(() => Prism.highlightAll(), 100); setTimeout(() => Prism.highlightAll(), 100);
}) })
.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(() => {
this.isLoading.set(false); this.isLoading = false;
}); });
} }
}); });
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@@ -86,10 +79,9 @@ export class PublicationComponent implements OnInit, OnDestroy {
this.afterDialogCloseSubscription = dialogRef.afterClosed() this.afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(response => { .subscribe(response => {
const publication = this.publication(); if (response && this.publication?.id) {
if (response && publication?.id) { this.publicationRestService.delete(this.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();
} }
}); });

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

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

Some files were not shown because too many files have changed in this diff Show More