Fixing Angular 21 by migrating all values by signals. #11
2756
frontend/package-lock.json
generated
2756
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -17,32 +17,26 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^21.0.6",
|
||||
"@angular/cdk": "^21.0.5",
|
||||
"@angular/common": "^21.0.6",
|
||||
"@angular/compiler": "^21.0.6",
|
||||
"@angular/core": "^21.0.6",
|
||||
"@angular/forms": "^21.0.6",
|
||||
"@angular/material": "^21.0.5",
|
||||
"@angular/platform-browser": "^21.0.6",
|
||||
"@angular/platform-browser-dynamic": "^21.0.6",
|
||||
"@angular/router": "^21.0.6",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.15.1"
|
||||
"@angular/animations": "^21.1.2",
|
||||
"@angular/cdk": "^21.1.2",
|
||||
"@angular/common": "^21.1.2",
|
||||
"@angular/compiler": "^21.1.2",
|
||||
"@angular/core": "^21.1.2",
|
||||
"@angular/forms": "^21.1.2",
|
||||
"@angular/material": "^21.1.2",
|
||||
"@angular/platform-browser": "^21.1.2",
|
||||
"@angular/platform-browser-dynamic": "^21.1.2",
|
||||
"@angular/router": "^21",
|
||||
"rxjs": "~7.8.2",
|
||||
"tslib": "^2.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^21.0.4",
|
||||
"@angular/cli": "^21.0.4",
|
||||
"@angular/compiler-cli": "^21.0.6",
|
||||
"@angular/localize": "^21.0.6",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.1.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"@angular/build": "^21.1.2",
|
||||
"@angular/cli": "^21.1.2",
|
||||
"@angular/compiler-cli": "^21.1.2",
|
||||
"@angular/localize": "^21.1.2",
|
||||
"@types/jasmine": "~5.1.15",
|
||||
"jasmine-core": "~5.13.0",
|
||||
"typescript": "~5.9.3"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<app-header></app-header>
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
<app-footer></app-footer>
|
||||
@@ -1,14 +1,14 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
app-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
|
||||
app-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 1em 0;
|
||||
}
|
||||
padding: 1em 0;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
import {TestBed} from '@angular/core/testing';
|
||||
import {AppComponent} from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { HeaderComponent } from './components/header/header.component';
|
||||
import { FooterComponent } from './components/footer/footer.component';
|
||||
import {Component} from '@angular/core';
|
||||
import {RouterOutlet} from '@angular/router';
|
||||
import {HeaderComponent} from './components/header/header.component';
|
||||
import {FooterComponent} from './components/footer/footer.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [
|
||||
selector: 'app-root',
|
||||
imports: [
|
||||
RouterOutlet,
|
||||
HeaderComponent,
|
||||
FooterComponent
|
||||
],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss'
|
||||
],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'codiki-ng';
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core';
|
||||
import { provideRouter, withRouterConfig } from '@angular/router';
|
||||
import {ApplicationConfig, inject, provideAppInitializer} from '@angular/core';
|
||||
import {provideRouter, withRouterConfig} from '@angular/router';
|
||||
|
||||
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
|
||||
import { routes } from './app.routes';
|
||||
import { JwtInterceptor } from './core/interceptor/jwt.interceptor';
|
||||
import { AuthenticationService } from './core/service/authentication.service';
|
||||
import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
|
||||
import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
|
||||
import {routes} from './app.routes';
|
||||
import {JwtInterceptor} from './core/interceptor/jwt.interceptor';
|
||||
import {AuthenticationService} from './core/service/authentication.service';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
@@ -18,10 +18,10 @@ export const appConfig: ApplicationConfig = {
|
||||
),
|
||||
provideAnimationsAsync(),
|
||||
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();
|
||||
})
|
||||
const initializerFn = ((authenticationService: AuthenticationService) => () => authenticationService.startAuthenticationCheckingProcess())(inject(AuthenticationService));
|
||||
return initializerFn();
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
import { Routes } from '@angular/router';
|
||||
import { alreadyAuthenticatedGuard } from './core/guard/already-authenticated.guard';
|
||||
import {Routes} from '@angular/router';
|
||||
import {alreadyAuthenticatedGuard} from './core/guard/already-authenticated.guard';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: 'login',
|
||||
loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent),
|
||||
canActivate: [alreadyAuthenticatedGuard]
|
||||
},
|
||||
{
|
||||
path: 'signin',
|
||||
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: '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/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: '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: 'login',
|
||||
loadComponent: () => import('./pages/login/login.component').then(module => module.LoginComponent),
|
||||
canActivate: [alreadyAuthenticatedGuard]
|
||||
},
|
||||
{
|
||||
path: 'signin',
|
||||
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: '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/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: '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)
|
||||
}
|
||||
];
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<h1>{{title}}</h1>
|
||||
<h2>{{description}}</h2>
|
||||
<h1>{{ title }}</h1>
|
||||
<h2>{{ description }}</h2>
|
||||
<footer>
|
||||
<button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n>
|
||||
No
|
||||
</button>
|
||||
<button type="button" class="cod-button" (click)="closeAndValidate()" matRipple i18n>
|
||||
Yes
|
||||
</button>
|
||||
<button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n>
|
||||
No
|
||||
</button>
|
||||
<button type="button" class="cod-button" (click)="closeAndValidate()" matRipple i18n>
|
||||
Yes
|
||||
</button>
|
||||
</footer>
|
||||
@@ -1,12 +1,12 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
@@ -1,35 +1,35 @@
|
||||
import { Component, inject, Input } from "@angular/core";
|
||||
import { MatRippleModule } from "@angular/material/core";
|
||||
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
|
||||
import {Component, inject} from "@angular/core";
|
||||
import {MatRippleModule} from "@angular/material/core";
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
|
||||
export interface ConfirmationDialogData {
|
||||
title: string;
|
||||
description: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirmation-dialog',
|
||||
templateUrl: './confirmation-dialog.component.html',
|
||||
styleUrl: './confirmation-dialog.component.scss',
|
||||
imports: [MatRippleModule]
|
||||
selector: 'app-confirmation-dialog',
|
||||
templateUrl: './confirmation-dialog.component.html',
|
||||
styleUrl: './confirmation-dialog.component.scss',
|
||||
imports: [MatRippleModule]
|
||||
})
|
||||
export class ConfirmationDialog {
|
||||
private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
|
||||
data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
|
||||
private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
|
||||
data: ConfirmationDialogData = inject(MAT_DIALOG_DATA);
|
||||
|
||||
get title(): string {
|
||||
return this.data.title;
|
||||
}
|
||||
get title(): string {
|
||||
return this.data.title;
|
||||
}
|
||||
|
||||
get description(): string {
|
||||
return this.data.description;
|
||||
}
|
||||
get description(): string {
|
||||
return this.data.description;
|
||||
}
|
||||
|
||||
closeAndValidate(): void {
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
closeAndValidate(): void {
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
<div i18n>
|
||||
<span class="copy-left">©</span>
|
||||
2016 - 2024 All rights reserved
|
||||
-
|
||||
2.1
|
||||
<a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</a>
|
||||
<span class="copy-left">©</span>
|
||||
2016 - 2026 All rights reserved
|
||||
-
|
||||
2.2
|
||||
<a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon>
|
||||
-
|
||||
<span i18n>Development realised by</span> Florian THIERRY
|
||||
<mat-icon matTooltip="Documentation will be available in future..." i18n-matTooltip>menu_book</mat-icon>
|
||||
-
|
||||
<span i18n>Development realised by</span> Florian THIERRY
|
||||
</div>
|
||||
@@ -1,31 +1,33 @@
|
||||
:host {
|
||||
background-color: #3f51b5;
|
||||
color: rgba(255,255,255,.6);
|
||||
background-color: #3f51b5;
|
||||
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;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: .5em;
|
||||
font-size: 1.1em;
|
||||
gap: .2em;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.copy-left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgba(255,255,255,.6);
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.copy-left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import {Component} from '@angular/core';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {RouterModule} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
imports: [MatIconModule, MatTooltipModule, RouterModule],
|
||||
templateUrl: './footer.component.html',
|
||||
styleUrl: './footer.component.scss'
|
||||
selector: 'app-footer',
|
||||
imports: [MatIconModule, MatTooltipModule, RouterModule],
|
||||
templateUrl: './footer.component.html',
|
||||
styleUrl: './footer.component.scss'
|
||||
})
|
||||
export class FooterComponent {
|
||||
|
||||
}
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
<div class="left">
|
||||
<button type="button"
|
||||
(click)="sideMenu.open()"
|
||||
class="cod-button icon"
|
||||
matTooltip="Click to show side menu"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<a [routerLink]="['/home']">
|
||||
<img src="assets/images/codiki.png" alt="logo"/>
|
||||
<span class="title">Codiki</span>
|
||||
</a>
|
||||
<button type="button"
|
||||
(click)="sideMenu.open()"
|
||||
class="cod-button icon"
|
||||
matTooltip="Click to show side menu"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<a [routerLink]="['/home']">
|
||||
<img src="assets/images/codiki.png" alt="logo"/>
|
||||
<span class="title">Codiki</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="middle">
|
||||
<app-publications-search-bar></app-publications-search-bar>
|
||||
<app-publications-search-bar></app-publications-search-bar>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
@if (isAuthenticated) {
|
||||
<button type="button"
|
||||
class="cod-button icon"
|
||||
[matMenuTriggerFor]="authenticatedUserMenu"
|
||||
matRipple>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #authenticatedUserMenu="matMenu">
|
||||
<div class="authenticated-user-menu">
|
||||
<a [routerLink]="['/my-publications']" matRipple i18n>
|
||||
<mat-icon>description</mat-icon>
|
||||
My publications
|
||||
</a>
|
||||
<a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n>
|
||||
<mat-icon>logout</mat-icon>
|
||||
Disconnect
|
||||
</a>
|
||||
</div>
|
||||
</mat-menu>
|
||||
} @else {
|
||||
<a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
|
||||
}
|
||||
@if (isAuthenticated) {
|
||||
<button type="button"
|
||||
class="cod-button icon"
|
||||
[matMenuTriggerFor]="authenticatedUserMenu"
|
||||
matRipple>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<mat-menu #authenticatedUserMenu="matMenu">
|
||||
<div class="authenticated-user-menu">
|
||||
<a [routerLink]="['/my-publications']" matRipple i18n>
|
||||
<mat-icon>description</mat-icon>
|
||||
My publications
|
||||
</a>
|
||||
<a [routerLink]="['/disconnect']" matRipple class="disconnection" i18n>
|
||||
<mat-icon>logout</mat-icon>
|
||||
Disconnect
|
||||
</a>
|
||||
</div>
|
||||
</mat-menu>
|
||||
} @else {
|
||||
<a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
|
||||
}
|
||||
</div>
|
||||
<app-side-menu #sideMenu></app-side-menu>
|
||||
@@ -1,148 +1,148 @@
|
||||
$headerHeight: 3.5em;
|
||||
|
||||
: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;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
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 {
|
||||
&.left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
padding: 0 1em;
|
||||
z-index: 2;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
height: $headerHeight;
|
||||
align-items: center;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
gap: .5em;
|
||||
|
||||
&.left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
padding: 0 1em;
|
||||
z-index: 2;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
$imageSize: 2em;
|
||||
width: $imageSize;
|
||||
height: $imageSize;
|
||||
}
|
||||
|
||||
&.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;
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
display: none;
|
||||
|
||||
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;
|
||||
}
|
||||
@media screen and (min-width: 600px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.authenticated-user-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.2em 0;
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.2em 0;
|
||||
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;
|
||||
|
||||
a {
|
||||
flex: 1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: #5c6bc0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.disconnection {
|
||||
color: #D50000;
|
||||
|
||||
&:hover {
|
||||
background-color: #E53935;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,19 +1,18 @@
|
||||
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { AuthenticationService } from '../../core/service/authentication.service';
|
||||
import { PublicationsSearchBarComponent } from '../publications-search-bar/publications-search-bar.component';
|
||||
import { SideMenuComponent } from '../side-menu/side-menu.component';
|
||||
import {Component, inject} from '@angular/core';
|
||||
import {FormControl, ReactiveFormsModule} from '@angular/forms';
|
||||
import {MatButtonModule} from '@angular/material/button';
|
||||
import {MatRippleModule} from '@angular/material/core';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatMenuModule} from '@angular/material/menu';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {AuthenticationService} from '../../core/service/authentication.service';
|
||||
import {PublicationsSearchBarComponent} from '../publications-search-bar/publications-search-bar.component';
|
||||
import {SideMenuComponent} from '../side-menu/side-menu.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
imports: [
|
||||
selector: 'app-header',
|
||||
imports: [
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
@@ -23,9 +22,9 @@ import { SideMenuComponent } from '../side-menu/side-menu.component';
|
||||
ReactiveFormsModule,
|
||||
RouterModule,
|
||||
SideMenuComponent
|
||||
],
|
||||
templateUrl: './header.component.html',
|
||||
styleUrl: './header.component.scss'
|
||||
],
|
||||
templateUrl: './header.component.html',
|
||||
styleUrl: './header.component.scss'
|
||||
})
|
||||
export class HeaderComponent {
|
||||
private authenticationService = inject(AuthenticationService);
|
||||
|
||||
@@ -4,34 +4,34 @@
|
||||
matTooltip="Close"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>close</mat-icon>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<header>
|
||||
<h1 i18n>Add a code block</h1>
|
||||
<h1 i18n>Add a code block</h1>
|
||||
</header>
|
||||
<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
|
||||
<div class="form-content">
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Programming language</mat-label>
|
||||
<mat-select #programmingLanguageSelect formControlName="programmingLanguage">
|
||||
@for(programmingLanguage of programmingLanguages; track programmingLanguage) {
|
||||
<mat-option [value]="programmingLanguage.code">
|
||||
{{programmingLanguage.label}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Code block</mat-label>
|
||||
<textarea matInput formControlName="codeBlock"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="actions reversed">
|
||||
<button type="submit" class="cod-button" matRipple i18n>
|
||||
Validate
|
||||
</button>
|
||||
<button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-content">
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Programming language</mat-label>
|
||||
<mat-select #programmingLanguageSelect formControlName="programmingLanguage">
|
||||
@for (programmingLanguage of programmingLanguages; track programmingLanguage) {
|
||||
<mat-option [value]="programmingLanguage.code">
|
||||
{{ programmingLanguage.label }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Code block</mat-label>
|
||||
<textarea matInput formControlName="codeBlock"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="actions reversed">
|
||||
<button type="submit" class="cod-button" matRipple i18n>
|
||||
Validate
|
||||
</button>
|
||||
<button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
|
||||
header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
form {
|
||||
div {
|
||||
&.form-content {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
|
||||
form {
|
||||
div {
|
||||
&.form-content {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
|
||||
textarea {
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,119 +1,119 @@
|
||||
import { Component, inject } from "@angular/core";
|
||||
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
|
||||
import { MatRippleModule } from "@angular/material/core";
|
||||
import { MatDialogRef } from "@angular/material/dialog";
|
||||
import { MatFormFieldModule } from "@angular/material/form-field";
|
||||
import { MatIcon } from "@angular/material/icon";
|
||||
import { MatInputModule } from "@angular/material/input";
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTooltip } from "@angular/material/tooltip";
|
||||
import {Component, inject} from "@angular/core";
|
||||
import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||
import {MatRippleModule} from "@angular/material/core";
|
||||
import {MatDialogRef} from "@angular/material/dialog";
|
||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {MatInputModule} from "@angular/material/input";
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatTooltip} from "@angular/material/tooltip";
|
||||
|
||||
export interface ProgramingLanguage {
|
||||
code: string;
|
||||
label: string;
|
||||
code: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
|
||||
{
|
||||
code: 'bash',
|
||||
label: 'Bash'
|
||||
},
|
||||
{
|
||||
code: 'c',
|
||||
label: 'C'
|
||||
},
|
||||
{
|
||||
code: 'cpp',
|
||||
label: 'C++'
|
||||
},
|
||||
{
|
||||
code: 'cs',
|
||||
label: 'C#'
|
||||
},
|
||||
{
|
||||
code: 'lua',
|
||||
label: 'Lua'
|
||||
},
|
||||
{
|
||||
code: 'java',
|
||||
label: 'Java'
|
||||
},
|
||||
{
|
||||
code: 'json5',
|
||||
label: 'JSON'
|
||||
},
|
||||
{
|
||||
code: 'kt',
|
||||
label: 'Kotlin'
|
||||
},
|
||||
{
|
||||
code: 'markup',
|
||||
label: 'html/xml'
|
||||
},
|
||||
{
|
||||
code: 'php',
|
||||
label: 'PHP'
|
||||
},
|
||||
{
|
||||
code: 'plsql',
|
||||
label: 'PL/SQL'
|
||||
},
|
||||
{
|
||||
code: 'python',
|
||||
label: 'Python'
|
||||
},
|
||||
{
|
||||
code: 'powershell',
|
||||
label: 'PowerShell'
|
||||
},
|
||||
{
|
||||
code: 'rust',
|
||||
label: 'Rust'
|
||||
},
|
||||
{
|
||||
code: 'sql',
|
||||
label: 'SQL'
|
||||
},
|
||||
{
|
||||
code: 'ts',
|
||||
label: 'Typescript'
|
||||
},
|
||||
{
|
||||
code: 'yml',
|
||||
label: 'YAML'
|
||||
},
|
||||
{
|
||||
code: 'bash',
|
||||
label: 'Bash'
|
||||
},
|
||||
{
|
||||
code: 'c',
|
||||
label: 'C'
|
||||
},
|
||||
{
|
||||
code: 'cpp',
|
||||
label: 'C++'
|
||||
},
|
||||
{
|
||||
code: 'cs',
|
||||
label: 'C#'
|
||||
},
|
||||
{
|
||||
code: 'lua',
|
||||
label: 'Lua'
|
||||
},
|
||||
{
|
||||
code: 'java',
|
||||
label: 'Java'
|
||||
},
|
||||
{
|
||||
code: 'json5',
|
||||
label: 'JSON'
|
||||
},
|
||||
{
|
||||
code: 'kt',
|
||||
label: 'Kotlin'
|
||||
},
|
||||
{
|
||||
code: 'markup',
|
||||
label: 'html/xml'
|
||||
},
|
||||
{
|
||||
code: 'php',
|
||||
label: 'PHP'
|
||||
},
|
||||
{
|
||||
code: 'plsql',
|
||||
label: 'PL/SQL'
|
||||
},
|
||||
{
|
||||
code: 'python',
|
||||
label: 'Python'
|
||||
},
|
||||
{
|
||||
code: 'powershell',
|
||||
label: 'PowerShell'
|
||||
},
|
||||
{
|
||||
code: 'rust',
|
||||
label: 'Rust'
|
||||
},
|
||||
{
|
||||
code: 'sql',
|
||||
label: 'SQL'
|
||||
},
|
||||
{
|
||||
code: 'ts',
|
||||
label: 'Typescript'
|
||||
},
|
||||
{
|
||||
code: 'yml',
|
||||
label: 'YAML'
|
||||
},
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-code-block-dialog',
|
||||
templateUrl: './code-block-dialog.component.html',
|
||||
styleUrl: './code-block-dialog.component.scss',
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatIcon,
|
||||
MatInputModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatTooltip,
|
||||
ReactiveFormsModule,
|
||||
]
|
||||
selector: 'app-code-block-dialog',
|
||||
templateUrl: './code-block-dialog.component.html',
|
||||
styleUrl: './code-block-dialog.component.scss',
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatIcon,
|
||||
MatInputModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatTooltip,
|
||||
ReactiveFormsModule,
|
||||
]
|
||||
})
|
||||
export class CodeBlockDialog {
|
||||
private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
|
||||
private formBuilder = inject(FormBuilder);
|
||||
programmingLanguages = PROGRAMMING_LANGUAGES;
|
||||
formGroup = this.formBuilder.group({
|
||||
programmingLanguage: new FormControl('', Validators.required),
|
||||
codeBlock: new FormControl('', Validators.required)
|
||||
});
|
||||
private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
|
||||
private formBuilder = inject(FormBuilder);
|
||||
programmingLanguages = PROGRAMMING_LANGUAGES;
|
||||
formGroup = this.formBuilder.group({
|
||||
programmingLanguage: new FormControl('', Validators.required),
|
||||
codeBlock: new FormControl('', Validators.required)
|
||||
});
|
||||
|
||||
closeAndValidate(): void {
|
||||
if (this.formGroup.valid) {
|
||||
this.dialogRef.close(this.formGroup.value);
|
||||
}
|
||||
closeAndValidate(): void {
|
||||
if (this.formGroup.valid) {
|
||||
this.dialogRef.close(this.formGroup.value);
|
||||
}
|
||||
}
|
||||
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
@@ -4,40 +4,41 @@
|
||||
matTooltip="Close"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>close</mat-icon>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<header>
|
||||
<h1 i18n>Select an illustration</h1>
|
||||
<h1 i18n>Select an illustration</h1>
|
||||
</header>
|
||||
<div class="picture-container">
|
||||
@if (isLoading) {
|
||||
<h2 i18n>Pictures loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
@if (isLoading()) {
|
||||
<h2 i18n>Pictures loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
} @else {
|
||||
@if (pictures.length) {
|
||||
@for (picture of pictures; track picture) {
|
||||
<img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration"
|
||||
i18n-matTooltip/>
|
||||
}
|
||||
} @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 {
|
||||
<h2 i18n>There is no any picture.</h2>
|
||||
}
|
||||
<h2 i18n>There is no any picture.</h2>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<footer>
|
||||
<button type="button"
|
||||
(click)="closeDialog()"
|
||||
class="cod-button secondary"
|
||||
matRipple
|
||||
i18n>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="fileUpload.click()"
|
||||
class="cod-button"
|
||||
matRipple
|
||||
i18n>
|
||||
<mat-icon>upload_file</mat-icon>
|
||||
Add new picture
|
||||
</button>
|
||||
<input type="file" (change)="uploadPicture($event)" #fileUpload/>
|
||||
<button type="button"
|
||||
(click)="closeDialog()"
|
||||
class="cod-button secondary"
|
||||
matRipple
|
||||
i18n>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="fileUpload.click()"
|
||||
class="cod-button"
|
||||
matRipple
|
||||
i18n>
|
||||
<mat-icon>upload_file</mat-icon>
|
||||
Add new picture
|
||||
</button>
|
||||
<input type="file" (change)="uploadPicture($event)" #fileUpload/>
|
||||
</footer>
|
||||
@@ -1,83 +1,83 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
|
||||
header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.picture-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
max-height: 30em;
|
||||
overflow-y: auto;
|
||||
min-height: 10em;
|
||||
padding: .5em 0;
|
||||
|
||||
header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
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;
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picture-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
max-height: 30em;
|
||||
overflow-y: auto;
|
||||
min-height: 10em;
|
||||
padding: .5em 0;
|
||||
|
||||
img {
|
||||
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;
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
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;
|
||||
}
|
||||
input[type=file] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,74 +1,74 @@
|
||||
import { Component, inject, OnInit } from "@angular/core";
|
||||
import { Picture } from "../../../core/rest-services/picture/model/picture";
|
||||
import {Component, inject, OnInit, signal} from "@angular/core";
|
||||
import {Picture} from "../../../core/rest-services/picture/model/picture";
|
||||
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
|
||||
import { MatIcon } from "@angular/material/icon";
|
||||
import { MatDialogRef } from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {MatDialogRef} from "@angular/material/dialog";
|
||||
import {MatRippleModule} from '@angular/material/core';
|
||||
import { MatTooltip } from "@angular/material/tooltip";
|
||||
import {MatTooltip} from "@angular/material/tooltip";
|
||||
|
||||
@Component({
|
||||
selector: 'app-picture-selection',
|
||||
templateUrl: './picture-selection-dialog.component.html',
|
||||
styleUrl: './picture-selection-dialog.component.scss',
|
||||
imports: [
|
||||
MatIcon,
|
||||
MatRippleModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatTooltip
|
||||
]
|
||||
selector: 'app-picture-selection',
|
||||
templateUrl: './picture-selection-dialog.component.html',
|
||||
styleUrl: './picture-selection-dialog.component.scss',
|
||||
imports: [
|
||||
MatIcon,
|
||||
MatRippleModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatTooltip
|
||||
]
|
||||
})
|
||||
export class PictureSelectionDialog implements OnInit {
|
||||
private readonly pictureRestService = inject(PictureRestService);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
|
||||
private readonly pictureRestService = inject(PictureRestService);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
|
||||
|
||||
isLoading: boolean = false;
|
||||
isLoaded: boolean = false;
|
||||
pictures: Picture[] = [];
|
||||
isLoading = signal(false);
|
||||
isLoaded = signal(false);
|
||||
pictures: Picture[] = [];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.isLoading = true;
|
||||
this.pictureRestService.getAllOfCurrentUser()
|
||||
.then(pictures => {
|
||||
this.pictures = pictures;
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.status === 401) {
|
||||
this.dialogRef.close();
|
||||
} else {
|
||||
const errorMessage = $localize`An error occured while loading pictures.`;
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
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 occured while uploading your picture.`;
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
|
||||
});
|
||||
ngOnInit(): void {
|
||||
this.isLoading.set(true);
|
||||
this.pictureRestService.getAllOfCurrentUser()
|
||||
.then(pictures => {
|
||||
this.pictures = pictures;
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.status === 401) {
|
||||
this.dialogRef.close();
|
||||
} else {
|
||||
const errorMessage = $localize`An error occurred while loading pictures.`;
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading.set(false);
|
||||
this.isLoaded.set(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});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,24 +1,24 @@
|
||||
import { inject, Injectable } from "@angular/core";
|
||||
import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import { MatDialogRef } from "@angular/material/dialog";
|
||||
import { PictureSelectionDialog } from "./picture-selection-dialog.component";
|
||||
import {inject, Injectable} from "@angular/core";
|
||||
import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {MatDialogRef} from "@angular/material/dialog";
|
||||
import {PictureSelectionDialog} from "./picture-selection-dialog.component";
|
||||
|
||||
@Injectable()
|
||||
export class PictureSelectionDialogService {
|
||||
private pictureRestService = inject(PictureRestService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
|
||||
private pictureRestService = inject(PictureRestService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
|
||||
|
||||
uploadPicture(pictureFile: File): void {
|
||||
this.pictureRestService.uploadPicture(pictureFile)
|
||||
.then(pictureId => {
|
||||
this.dialogRef.close(pictureId);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occured while uploading a picture...`;
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
|
||||
});
|
||||
}
|
||||
uploadPicture(pictureFile: File): void {
|
||||
this.pictureRestService.uploadPicture(pictureFile)
|
||||
.then(pictureId => {
|
||||
this.dialogRef.close(pictureId);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occured while uploading a picture...`;
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,132 +1,133 @@
|
||||
<form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
|
||||
<header>
|
||||
<h1>{{title}}</h1>
|
||||
</header>
|
||||
<header>
|
||||
<h1>{{ title() }}</h1>
|
||||
</header>
|
||||
|
||||
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
|
||||
<mat-tab label="Edition" i18n-label>
|
||||
<div class="form-content">
|
||||
<div class="first-part">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Title</mat-label>
|
||||
<input matInput type="text" formControlName="title" />
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Description</mat-label>
|
||||
<input matInput type="text" formControlName="description" />
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Category</mat-label>
|
||||
<mat-select formControlName="categoryId">
|
||||
@for (category of categories$ | async; track category) {
|
||||
<mat-option [value]="category.id">
|
||||
{{ category.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="picture-container">
|
||||
<img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
|
||||
(click)="displayPictureSectionDialog()"
|
||||
matTooltip="Click to change illustration"
|
||||
i18n-matTooltip/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="button"
|
||||
(click)="insertTitle(1)"
|
||||
matTooltip="Click to insert a title 1 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H1
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertTitle(2)"
|
||||
matTooltip="Click to insert a title 2 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H2
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertTitle(3)"
|
||||
matTooltip="Click to insert a title 3 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H3
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertLink()"
|
||||
matTooltip="Click to insert a link"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="selectAPicture()"
|
||||
matTooltip="Click to insert a picture"
|
||||
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>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Previewing" i18n-label>
|
||||
<div class="preview">
|
||||
@if ((isPreviewing$ | async) === true) {
|
||||
<div class="preview-loading">
|
||||
<h2 i18n>Preview is loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
} @else {
|
||||
<img class="illustration" src="/api/pictures/{{ publication.illustrationId }}" />
|
||||
<header>
|
||||
<h1>{{ publication.title }}</h1>
|
||||
<h2>{{ publication.description }}</h2>
|
||||
</header>
|
||||
<main [innerHTML]="publicationInEdition.parsedText"></main>
|
||||
<mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
|
||||
<mat-tab label="Edition" i18n-label>
|
||||
<div class="form-content">
|
||||
<div class="first-part">
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Title</mat-label>
|
||||
<input matInput type="text" formControlName="title"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Description</mat-label>
|
||||
<input matInput type="text" formControlName="description"/>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Category</mat-label>
|
||||
<mat-select formControlName="categoryId">
|
||||
@for (category of categories$ | async; track category) {
|
||||
<mat-option [value]="category.id">
|
||||
{{ category.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
<footer>
|
||||
<app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
|
||||
<button type="button"
|
||||
class="cod-button secondary"
|
||||
(click)="goPreviousLocation()"
|
||||
matRipple
|
||||
i18n>
|
||||
Cancel
|
||||
</button>
|
||||
</footer>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="picture-container">
|
||||
<img
|
||||
[src]="publication().illustrationId.length ? '/api/pictures/' + publication().illustrationId : '/assets/images/default-picture.png'"
|
||||
(click)="displayPictureSectionDialog()"
|
||||
matTooltip="Click to change illustration"
|
||||
i18n-matTooltip/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="button"
|
||||
(click)="insertTitle(1)"
|
||||
matTooltip="Click to insert a title 1 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H1
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertTitle(2)"
|
||||
matTooltip="Click to insert a title 2 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H2
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertTitle(3)"
|
||||
matTooltip="Click to insert a title 3 section"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
H3
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="insertLink()"
|
||||
matTooltip="Click to insert a link"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="selectAPicture()"
|
||||
matTooltip="Click to insert a picture"
|
||||
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>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab label="Previewing" i18n-label>
|
||||
<div class="preview">
|
||||
@if (isPreviewing()) {
|
||||
<div class="preview-loading">
|
||||
<h2 i18n>Preview is loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
</div>
|
||||
} @else {
|
||||
<img class="illustration" src="/api/pictures/{{ publication().illustrationId }}"/>
|
||||
<header>
|
||||
<h1>{{ publication().title }}</h1>
|
||||
<h2>{{ publication().description }}</h2>
|
||||
</header>
|
||||
<main [innerHTML]="publicationInEdition().parsedText"></main>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
<footer>
|
||||
<app-submit-button [requestPending]="isSaving()" i18n>Save</app-submit-button>
|
||||
<button type="button"
|
||||
class="cod-button secondary"
|
||||
(click)="goPreviousLocation()"
|
||||
matRipple
|
||||
i18n>
|
||||
Cancel
|
||||
</button>
|
||||
</footer>
|
||||
</form>
|
||||
@@ -1,170 +1,170 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
form {
|
||||
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);
|
||||
form {
|
||||
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);
|
||||
|
||||
& > header {
|
||||
padding: 2em;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
border-radius: .5em .5em 0 0;
|
||||
& > header {
|
||||
padding: 2em;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
border-radius: .5em .5em 0 0;
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 2em;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 2em;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-content {
|
||||
padding: 2em;
|
||||
padding-bottom: 0;
|
||||
padding: 2em;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
|
||||
mat-form-field {
|
||||
textarea {
|
||||
height: 20em;
|
||||
}
|
||||
}
|
||||
|
||||
.first-part {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
|
||||
mat-form-field {
|
||||
textarea {
|
||||
height: 20em;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 10em;
|
||||
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 {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #5f6aa6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
button {
|
||||
padding: 0;
|
||||
border-radius: 10em;
|
||||
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 {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #5f6aa6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.preview-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.preview-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.illustration {
|
||||
flex: 1;
|
||||
height: 12em;
|
||||
object-fit: cover;
|
||||
transition: height .2s ease-in-out;
|
||||
|
||||
@media screen and (min-width: 450px) {
|
||||
height: 15em;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
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: 600px) {
|
||||
height: 20em;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 2em;
|
||||
@media screen and (min-width: 750px) {
|
||||
height: 25em;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2em;
|
||||
text-align: justify;
|
||||
}
|
||||
header {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 2em;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
@@ -1,148 +1,135 @@
|
||||
import { CommonModule, Location } from "@angular/common";
|
||||
import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
|
||||
import { FormGroup, ReactiveFormsModule } from "@angular/forms";
|
||||
import { MatDialogModule } from "@angular/material/dialog";
|
||||
import { MatIconModule } from "@angular/material/icon";
|
||||
import { MatInputModule } from "@angular/material/input";
|
||||
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
|
||||
import { MatSelectModule } from "@angular/material/select";
|
||||
import { MatTabsModule } from "@angular/material/tabs";
|
||||
import { MatTooltipModule } from "@angular/material/tooltip";
|
||||
import { map, Observable, of, Subscription } from "rxjs";
|
||||
import { Category } from "../../core/rest-services/category/model/category";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { CategoryService } from "../../core/service/category.service";
|
||||
import { SubmitButtonComponent } from "../submit-button/submit-button.component";
|
||||
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
|
||||
import { PublicationEditionService } from "./publication-edition.service";
|
||||
import { MatRippleModule } from "@angular/material/core";
|
||||
import {CommonModule, Location} from "@angular/common";
|
||||
import {Component, effect, inject, input, output, signal} from "@angular/core";
|
||||
import {FormGroup, ReactiveFormsModule} from "@angular/forms";
|
||||
import {MatDialogModule} from "@angular/material/dialog";
|
||||
import {MatIconModule} from "@angular/material/icon";
|
||||
import {MatInputModule} from "@angular/material/input";
|
||||
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
|
||||
import {MatSelectModule} from "@angular/material/select";
|
||||
import {MatTabsModule} from "@angular/material/tabs";
|
||||
import {MatTooltipModule} from "@angular/material/tooltip";
|
||||
import {map, Observable} from "rxjs";
|
||||
import {Category} from "../../core/rest-services/category/model/category";
|
||||
import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
|
||||
import {CategoryService} from "../../core/service/category.service";
|
||||
import {SubmitButtonComponent} from "../submit-button/submit-button.component";
|
||||
import {PublicationEditionService} from "./publication-edition.service";
|
||||
import {MatRippleModule} from "@angular/material/core";
|
||||
|
||||
@Component({
|
||||
selector: 'app-publication-edition',
|
||||
templateUrl: './publication-edition.component.html',
|
||||
styleUrl: './publication-edition.component.scss',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatRippleModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatSelectModule,
|
||||
MatTabsModule,
|
||||
MatTooltipModule,
|
||||
ReactiveFormsModule,
|
||||
SubmitButtonComponent
|
||||
],
|
||||
providers: [PublicationEditionService]
|
||||
selector: 'app-publication-edition',
|
||||
templateUrl: './publication-edition.component.html',
|
||||
styleUrl: './publication-edition.component.scss',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatRippleModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatSelectModule,
|
||||
MatTabsModule,
|
||||
MatTooltipModule,
|
||||
ReactiveFormsModule,
|
||||
SubmitButtonComponent
|
||||
],
|
||||
providers: [PublicationEditionService]
|
||||
})
|
||||
export class PublicationEditionComponent implements OnChanges, OnDestroy {
|
||||
@Input()
|
||||
publication!: Publication;
|
||||
@Input()
|
||||
title!: string;
|
||||
@Input()
|
||||
isSaving$: Observable<boolean> = of(false);
|
||||
@Output()
|
||||
publicationSave = new EventEmitter<Publication>();
|
||||
export class PublicationEditionComponent {
|
||||
readonly #categoryService = inject(CategoryService);
|
||||
readonly #location = inject(Location);
|
||||
readonly #publicationEditionService = inject(PublicationEditionService);
|
||||
|
||||
publicationInEdition!: Publication;
|
||||
private readonly categoryService = inject(CategoryService);
|
||||
private readonly location = inject(Location);
|
||||
private readonly publicationEditionService = inject(PublicationEditionService);
|
||||
private subscriptions: Subscription[] = [];
|
||||
publication = input.required<Publication>();
|
||||
title = input.required<string>();
|
||||
isSaving = input.required<boolean>();
|
||||
publicationSave = output<Publication>();
|
||||
|
||||
get publicationEditionForm(): FormGroup {
|
||||
return this.publicationEditionService.publicationEditionForm;
|
||||
isLoading = this.#publicationEditionService.isLoading;
|
||||
isPreviewing = this.#publicationEditionService.isPreviewing;
|
||||
publicationInEdition = signal<Publication>(DEFAULT_PUBLICATION);
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
let publication = this.publication();
|
||||
const publicationInEdition = this.publicationInEdition();
|
||||
if (!publicationInEdition || publicationInEdition !== publication) {
|
||||
this.publicationInEdition.set(publication);
|
||||
this.#publicationEditionService.init(publication);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get publicationEditionForm(): FormGroup {
|
||||
return this.#publicationEditionService.publicationEditionForm;
|
||||
}
|
||||
|
||||
get 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;
|
||||
}
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.publicationEditionService.isLoading$;
|
||||
if (stringA > stringB) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
get isPreviewing$(): Observable<boolean> {
|
||||
return this.publicationEditionService.isPreviewing$;
|
||||
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();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
ngOnChanges(): void {
|
||||
this.ngOnDestroy();
|
||||
|
||||
if (!this.publicationInEdition || this.publicationInEdition !== this.publication) {
|
||||
this.publicationInEdition = this.publication;
|
||||
this.publicationEditionService.init(this.publicationInEdition);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
|
||||
}
|
||||
|
||||
goPreviousLocation(): void {
|
||||
this.location.back();
|
||||
}
|
||||
|
||||
insertTitle(titleNumber: number): void {
|
||||
this.publicationEditionService.insertTitle(titleNumber);
|
||||
}
|
||||
|
||||
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 {
|
||||
this.publicationSave.emit(this.publicationEditionService.editedPublication);
|
||||
}
|
||||
|
||||
onTabChange(tabSelectedIndex: number): void {
|
||||
if (tabSelectedIndex === 1) {
|
||||
this.publicationEditionService.loadPreview();
|
||||
}
|
||||
save(): void {
|
||||
this.publicationSave.emit(this.#publicationEditionService.editedPublication);
|
||||
}
|
||||
|
||||
onTabChange(tabSelectedIndex: number): void {
|
||||
if (tabSelectedIndex === 1) {
|
||||
this.#publicationEditionService.loadPreview();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,312 +1,287 @@
|
||||
import { Location } from "@angular/common";
|
||||
import { inject, Injectable, OnDestroy } from "@angular/core";
|
||||
import { MatDialog } from "@angular/material/dialog";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
|
||||
import { copy } from "../../core/utils/ObjectUtils";
|
||||
import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
|
||||
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
|
||||
import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview";
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
import {Location} from "@angular/common";
|
||||
import {inject, Injectable, OnDestroy, Signal, signal} from "@angular/core";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {ActivatedRoute} from "@angular/router";
|
||||
import {debounceTime, distinctUntilChanged, Subscription} from "rxjs";
|
||||
import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
|
||||
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
|
||||
import {copy} from "../../core/utils/ObjectUtils";
|
||||
import {CodeBlockDialog} from "./code-block-dialog/code-block-dialog.component";
|
||||
import {PictureSelectionDialog} from "./picture-selection-dialog/picture-selection-dialog.component";
|
||||
import {PreviewContentRequest} from "../../core/rest-services/publications/model/preview";
|
||||
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
|
||||
|
||||
declare let Prism: any;
|
||||
|
||||
export class CursorPosition {
|
||||
start: number;
|
||||
end: number;
|
||||
selectedCharacters: number;
|
||||
start: number;
|
||||
end: number;
|
||||
selectedCharacters: number;
|
||||
|
||||
constructor(start: number, end: number) {
|
||||
this.start = start;
|
||||
this.end = end;
|
||||
this.selectedCharacters = end - start;
|
||||
}
|
||||
constructor(start: number, end: number) {
|
||||
this.start = start;
|
||||
this.end = end;
|
||||
this.selectedCharacters = end - start;
|
||||
}
|
||||
}
|
||||
|
||||
export interface PublicationEditionState {
|
||||
publication: Publication;
|
||||
cursorPosition: CursorPosition;
|
||||
publication: Publication;
|
||||
cursorPosition: CursorPosition;
|
||||
}
|
||||
|
||||
const DEFAULT_PUBLICATION: Publication = {
|
||||
id: '',
|
||||
key: '',
|
||||
title: '',
|
||||
text: '',
|
||||
parsedText: '',
|
||||
description: '',
|
||||
creationDate: new Date(),
|
||||
illustrationId: '',
|
||||
categoryId: '',
|
||||
author: {
|
||||
id: '',
|
||||
name: '',
|
||||
image: ''
|
||||
}
|
||||
};
|
||||
|
||||
const DEFAULT_CURSOR_POSITION = new CursorPosition(0, 0);
|
||||
|
||||
const DEFAULT_STATE: PublicationEditionState = {
|
||||
publication: DEFAULT_PUBLICATION,
|
||||
cursorPosition: DEFAULT_CURSOR_POSITION
|
||||
publication: DEFAULT_PUBLICATION,
|
||||
cursorPosition: DEFAULT_CURSOR_POSITION
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class PublicationEditionService implements OnDestroy {
|
||||
private readonly activatedRoute = inject(ActivatedRoute);
|
||||
private readonly dialog = inject(MatDialog);
|
||||
private readonly formBuilder = inject(FormBuilder);
|
||||
private readonly location = inject(Location);
|
||||
private readonly publicationRestService = inject(PublicationRestService);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
readonly #activatedRoute = inject(ActivatedRoute);
|
||||
readonly #dialog = inject(MatDialog);
|
||||
readonly #formBuilder = inject(FormBuilder);
|
||||
readonly #location = inject(Location);
|
||||
readonly #publicationRestService = inject(PublicationRestService);
|
||||
readonly #snackBar = inject(MatSnackBar);
|
||||
|
||||
private isLoadingSubject = new BehaviorSubject<boolean>(false);
|
||||
private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
|
||||
private subscriptions: Subscription[] = [];
|
||||
private isSavingSubject = new BehaviorSubject<boolean>(false);
|
||||
private isPreviewingSubject = new BehaviorSubject<boolean>(false);
|
||||
#isLoading = signal(false);
|
||||
#state = signal<PublicationEditionState>(copy(DEFAULT_STATE));
|
||||
#isSaving = signal<boolean>(false);
|
||||
#isPreviewing = signal<boolean>(false);
|
||||
#subscriptions: Subscription[] = [];
|
||||
|
||||
publicationEditionForm: FormGroup = this.formBuilder.group({
|
||||
title: new FormControl<string | undefined>('', [Validators.required]),
|
||||
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])
|
||||
publicationEditionForm: FormGroup = this.#formBuilder.group({
|
||||
title: new FormControl<string | undefined>('', [Validators.required]),
|
||||
description: new FormControl<string | undefined>('', [Validators.required]),
|
||||
text: new FormControl<string | undefined>('', [Validators.required]),
|
||||
illustrationId: new FormControl<string | undefined>('', [Validators.required]),
|
||||
categoryId: new FormControl<string | undefined>('', [Validators.required])
|
||||
});
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.#subscriptions.forEach(subscription => subscription.unsubscribe());
|
||||
}
|
||||
|
||||
#updateForm(): void {
|
||||
const state = this.#state();
|
||||
const publication = state.publication;
|
||||
|
||||
this.publicationEditionForm.controls['title'].setValue(publication.title);
|
||||
this.publicationEditionForm.controls['description'].setValue(publication.description);
|
||||
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> {
|
||||
return this.#isLoading.asReadonly();
|
||||
}
|
||||
|
||||
get isSaving(): Signal<boolean> {
|
||||
return this.#isSaving.asReadonly();
|
||||
}
|
||||
|
||||
get isPreviewing(): Signal<boolean> {
|
||||
return this.#isPreviewing.asReadonly();
|
||||
}
|
||||
|
||||
get state(): Signal<PublicationEditionState> {
|
||||
return this.#state.asReadonly();
|
||||
}
|
||||
|
||||
get editedPublication(): Publication {
|
||||
return this.#state().publication;
|
||||
}
|
||||
|
||||
loadPublication(): void {
|
||||
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 => {
|
||||
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));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
||||
}
|
||||
init(publication: Publication): void {
|
||||
const state = this.#state();
|
||||
state.publication = publication;
|
||||
this.#state.set(state);
|
||||
this.#updateForm();
|
||||
|
||||
private get _state(): PublicationEditionState {
|
||||
return this.stateSubject.value;
|
||||
}
|
||||
|
||||
private _save(state: PublicationEditionState): void {
|
||||
this.stateSubject.next(state);
|
||||
}
|
||||
|
||||
private _updateForm(): void {
|
||||
const state = this._state;
|
||||
const formValueChangesSubscription = this.publicationEditionForm.valueChanges
|
||||
.pipe(
|
||||
debounceTime(200),
|
||||
distinctUntilChanged()
|
||||
)
|
||||
.subscribe(formValue => {
|
||||
const state = this.#state();
|
||||
const publication = state.publication;
|
||||
|
||||
this.publicationEditionForm.controls['title'].setValue(publication.title);
|
||||
this.publicationEditionForm.controls['description'].setValue(publication.description);
|
||||
this.publicationEditionForm.controls['text'].setValue(publication.text);
|
||||
this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
|
||||
this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
|
||||
}
|
||||
publication.title = formValue.title;
|
||||
publication.description = formValue.description;
|
||||
publication.categoryId = formValue.categoryId;
|
||||
publication.text = formValue.text;
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.isLoadingSubject.asObservable();
|
||||
}
|
||||
this.#state.set(state);
|
||||
});
|
||||
this.#subscriptions.push(formValueChangesSubscription);
|
||||
}
|
||||
|
||||
get isSaving$(): Observable<boolean> {
|
||||
return this.isSavingSubject.asObservable();
|
||||
}
|
||||
private editIllustrationId(pictureId: string): void {
|
||||
const state = this.#state();
|
||||
state.publication.illustrationId = pictureId
|
||||
this.#state.set(state);
|
||||
}
|
||||
|
||||
get isPreviewing$(): Observable<boolean> {
|
||||
return this.isPreviewingSubject.asObservable();
|
||||
}
|
||||
displayPictureSectionDialog(): void {
|
||||
const dialogRef = this.#dialog.open(PictureSelectionDialog);
|
||||
|
||||
get state$(): Observable<PublicationEditionState> {
|
||||
return this.stateSubject.asObservable();
|
||||
}
|
||||
|
||||
get editedPublication(): Publication {
|
||||
return this._state.publication;
|
||||
}
|
||||
|
||||
loadPublication(): void {
|
||||
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));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
init(publication: Publication): void {
|
||||
const state = this._state;
|
||||
state.publication = publication;
|
||||
this.stateSubject.next(state);
|
||||
this._updateForm();
|
||||
|
||||
const formValueChangesSubscription = this.publicationEditionForm.valueChanges
|
||||
.pipe(
|
||||
debounceTime(200),
|
||||
distinctUntilChanged()
|
||||
)
|
||||
.subscribe(formValue => {
|
||||
const state = this._state;
|
||||
const publication = state.publication;
|
||||
|
||||
publication.title = formValue.title;
|
||||
publication.description = formValue.description;
|
||||
publication.categoryId = formValue.categoryId;
|
||||
publication.text = formValue.text;
|
||||
|
||||
this._save(state);
|
||||
})
|
||||
this.subscriptions.push(formValueChangesSubscription);
|
||||
}
|
||||
|
||||
private 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);
|
||||
this._updateForm();
|
||||
} else {
|
||||
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
|
||||
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 {
|
||||
const dialogRef = this.dialog.open(PictureSelectionDialog);
|
||||
selectAPicture(): void {
|
||||
const dialogRef = this.#dialog.open(PictureSelectionDialog);
|
||||
|
||||
const afterDialogCloseSubscription = dialogRef.afterClosed()
|
||||
.subscribe(newPictureId => {
|
||||
if (newPictureId) {
|
||||
this.insertPicture(newPictureId);
|
||||
}
|
||||
});
|
||||
this.subscriptions.push(afterDialogCloseSubscription);
|
||||
}
|
||||
const afterDialogCloseSubscription = dialogRef.afterClosed()
|
||||
.subscribe(newPictureId => {
|
||||
if (newPictureId) {
|
||||
this.insertPicture(newPictureId);
|
||||
}
|
||||
});
|
||||
this.#subscriptions.push(afterDialogCloseSubscription);
|
||||
}
|
||||
|
||||
insertPicture(pictureId: string): void {
|
||||
const state = this._state;
|
||||
insertPicture(pictureId: string): void {
|
||||
const state = this.#state();
|
||||
|
||||
const publication = state.publication;
|
||||
const publication = state.publication;
|
||||
|
||||
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
|
||||
const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
|
||||
const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
|
||||
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
|
||||
const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
|
||||
const textWithTags = `${publicationTextLeftPart}[img src="/api/pictures/${pictureId}" /]${publicationTextRightPart}`;
|
||||
|
||||
publication.text = textWithTags;
|
||||
publication.text = textWithTags;
|
||||
|
||||
this._save(state);
|
||||
this._updateForm();
|
||||
}
|
||||
this.#state.set(state);
|
||||
this.#updateForm();
|
||||
}
|
||||
|
||||
insertLink(): void {
|
||||
const state = this._state;
|
||||
insertLink(): void {
|
||||
const state = this.#state();
|
||||
|
||||
const publication = state.publication;
|
||||
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}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
|
||||
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}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
|
||||
|
||||
publication.text = textWithTags;
|
||||
publication.text = textWithTags;
|
||||
|
||||
this._save(state);
|
||||
this._updateForm();
|
||||
}
|
||||
this.#state.set(state);
|
||||
this.#updateForm();
|
||||
}
|
||||
|
||||
private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
|
||||
const state = this._state;
|
||||
private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
|
||||
const state = this.#state();
|
||||
|
||||
const publication = state.publication;
|
||||
const publication = state.publication;
|
||||
|
||||
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
|
||||
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 publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
|
||||
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}`;
|
||||
|
||||
publication.text = textWithTags;
|
||||
publication.text = textWithTags;
|
||||
|
||||
this._save(state);
|
||||
this._updateForm();
|
||||
}
|
||||
this.#state.set(state);
|
||||
this.#updateForm();
|
||||
}
|
||||
|
||||
loadPreview(): void {
|
||||
const state = this._state;
|
||||
loadPreview(): void {
|
||||
const state = this.#state();
|
||||
|
||||
this.isPreviewingSubject.next(true);
|
||||
const request: PreviewContentRequest = {
|
||||
text: state.publication.text
|
||||
};
|
||||
this.publicationRestService.preview(request)
|
||||
.then(response => {
|
||||
state.publication.parsedText = response.text;
|
||||
this._save(state);
|
||||
setTimeout(() => Prism.highlightAll(), 1000);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.isPreviewingSubject.next(false);
|
||||
});
|
||||
}
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,16 @@
|
||||
@for(publication of publications$ | async; track publication) {
|
||||
<a [routerLink]="['/publications/' + publication.id]" class="publication">
|
||||
<img src="/api/pictures/{{ publication.illustrationId }}"/>
|
||||
<div class="body">
|
||||
<h1>{{publication.title}}</h1>
|
||||
<h2>{{publication.description}}</h2>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
|
||||
<span i18n>Publication posted by {{publication.author.name}}</span>
|
||||
<span class="publication-date">
|
||||
@for (publication of publications(); track publication.id) {
|
||||
<a [routerLink]="['/publications/' + publication.id]" class="publication">
|
||||
<img src="/api/pictures/{{ publication.illustrationId }}"/>
|
||||
<div class="body">
|
||||
<h1>{{ publication.title }}</h1>
|
||||
<h2>{{ publication.description }}</h2>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
|
||||
<span i18n>Publication posted by {{ publication.author.name }}</span>
|
||||
<span class="publication-date">
|
||||
({{ publication.creationDate | date: 'short' }})
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
}
|
||||
@@ -1,87 +1,87 @@
|
||||
$cardBorderRadius: .5em;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
max-width: 50em;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
|
||||
.publication {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
max-width: 50em;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
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;
|
||||
|
||||
.publication {
|
||||
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;
|
||||
}
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,15 @@
|
||||
import { Component, Input } from "@angular/core";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { Observable } from "rxjs";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import { MatTooltipModule } from "@angular/material/tooltip";
|
||||
import {Component, input} from "@angular/core";
|
||||
import {Publication} from "../../core/rest-services/publications/model/publication";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {RouterModule} from "@angular/router";
|
||||
import {MatTooltipModule} from "@angular/material/tooltip";
|
||||
|
||||
@Component({
|
||||
selector: 'app-publication-list',
|
||||
templateUrl: './publication-list.component.html',
|
||||
styleUrl: './publication-list.component.scss',
|
||||
imports: [CommonModule, RouterModule, MatTooltipModule]
|
||||
selector: 'app-publication-list',
|
||||
templateUrl: './publication-list.component.html',
|
||||
styleUrl: './publication-list.component.scss',
|
||||
imports: [CommonModule, RouterModule, MatTooltipModule]
|
||||
})
|
||||
export class PublicationListComponent {
|
||||
@Input()
|
||||
publications$!: Observable<Publication[]>;
|
||||
publications = input.required<Publication[]>();
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
<form [formGroup]="formGroup">
|
||||
<input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
|
||||
<button type="submit" (click)="searchPublications()" matRipple>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
<input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
|
||||
<button type="submit" (click)="searchPublications()" matRipple>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
</form>
|
||||
@@ -1,38 +1,38 @@
|
||||
:host {
|
||||
$borderRadiusValue: 10em;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
$borderRadiusValue: 10em;
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
form {
|
||||
display: flex;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
border-radius: $borderRadiusValue;
|
||||
background-color: white;
|
||||
border: solid 1px #ddd;
|
||||
padding: .2em 2.7em .2em 1em;
|
||||
height: 2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
border-radius: $borderRadiusValue;
|
||||
background-color: white;
|
||||
border: solid 1px #ddd;
|
||||
padding: .2em 2.7em .2em 1em;
|
||||
height: 2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,36 @@
|
||||
import { Component, inject } from "@angular/core";
|
||||
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
|
||||
import { MatRippleModule } from "@angular/material/core";
|
||||
import { MatIconModule } from "@angular/material/icon";
|
||||
import { Router } from "@angular/router";
|
||||
import {Component, inject} from "@angular/core";
|
||||
import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||
import {MatRippleModule} from "@angular/material/core";
|
||||
import {MatIconModule} from "@angular/material/icon";
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-publications-search-bar',
|
||||
templateUrl: './publications-search-bar.component.html',
|
||||
styleUrl: './publications-search-bar.component.scss',
|
||||
imports: [
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
providers: []
|
||||
selector: 'app-publications-search-bar',
|
||||
templateUrl: './publications-search-bar.component.html',
|
||||
styleUrl: './publications-search-bar.component.scss',
|
||||
imports: [
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
providers: []
|
||||
})
|
||||
export class PublicationsSearchBarComponent {
|
||||
private formBuilder = inject(FormBuilder);
|
||||
private router = inject(Router);
|
||||
formGroup = this.formBuilder.group({
|
||||
criteria: new FormControl<string | undefined>('', [Validators.required])
|
||||
});
|
||||
private formBuilder = inject(FormBuilder);
|
||||
private router = inject(Router);
|
||||
formGroup = this.formBuilder.group({
|
||||
criteria: new FormControl<string | undefined>('', [Validators.required])
|
||||
});
|
||||
|
||||
searchPublications(): void {
|
||||
const query = this.formGroup.controls.criteria.value
|
||||
searchPublications(): void {
|
||||
const query = this.formGroup.controls.criteria.value
|
||||
|
||||
if (query?.trim()) {
|
||||
const queryParams = { 'query' : this.formGroup.controls.criteria.value ?? '' }
|
||||
this.router.navigate(['/publications'], { queryParams });
|
||||
} else {
|
||||
this.router.navigate(['/home']);
|
||||
}
|
||||
if (query?.trim()) {
|
||||
const queryParams = {'query': this.formGroup.controls.criteria.value ?? ''}
|
||||
this.router.navigate(['/publications'], {queryParams});
|
||||
} else {
|
||||
this.router.navigate(['/home']);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,18 @@
|
||||
@for(category of categories$ | async; track category) {
|
||||
<div class="category {{category.isOpenned ? 'openned' : ''}}">
|
||||
<div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
|
||||
{{category.name}}
|
||||
<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>
|
||||
@for (category of categories$ | async; track category) {
|
||||
<div class="category {{category.isOpenned ? 'openned' : ''}}">
|
||||
<div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
|
||||
{{ category.name }}
|
||||
<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>
|
||||
}
|
||||
@@ -1,57 +1,57 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
&: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;
|
||||
|
||||
&:hover {
|
||||
background-color: #5c6bc0;
|
||||
}
|
||||
}
|
||||
background-color: #5c6bc0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core";
|
||||
import { MatIconModule } from "@angular/material/icon";
|
||||
import { DisplayableCategory, SideMenuService } from "../side-menu.service";
|
||||
import { Observable } from "rxjs";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {Component, EventEmitter, inject, OnInit, Output} from "@angular/core";
|
||||
import {MatIconModule} from "@angular/material/icon";
|
||||
import {DisplayableCategory, SideMenuService} from "../side-menu.service";
|
||||
import {Observable} from "rxjs";
|
||||
import {RouterModule} from "@angular/router";
|
||||
|
||||
@Component({
|
||||
selector: 'app-categories-menu',
|
||||
templateUrl: './categories-menu.component.html',
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
MatIconModule
|
||||
],
|
||||
styleUrl: './categories-menu.component.scss'
|
||||
selector: 'app-categories-menu',
|
||||
templateUrl: './categories-menu.component.html',
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule,
|
||||
MatIconModule
|
||||
],
|
||||
styleUrl: './categories-menu.component.scss'
|
||||
})
|
||||
export class CategoriesMenuComponent implements OnInit {
|
||||
private sideMenuService = inject(SideMenuService);
|
||||
@@ -40,7 +40,7 @@ export class CategoriesMenuComponent implements OnInit {
|
||||
.map(category => category as HTMLElement)
|
||||
.forEach(categoryDiv => this.closeAccordion(categoryDiv));
|
||||
|
||||
const categoryDiv = document.getElementById(`category-${category.id}`);
|
||||
const categoryDiv = document.getElementById(`category-${category.id}`);
|
||||
if (categoryDiv) {
|
||||
this.openAccordion(categoryDiv);
|
||||
}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<div class="menu {{ isOpenned ? 'displayed' : '' }}">
|
||||
<h1>
|
||||
<a [routerLink]="['/home']">
|
||||
<img src="assets/images/codiki.png" alt="logo"/>
|
||||
Codiki
|
||||
</a>
|
||||
<button type="button"
|
||||
(click)="close()"
|
||||
class="cod-button icon"
|
||||
matTooltip="Close the menu"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</h1>
|
||||
<h2 i18n>Categories</h2>
|
||||
<app-categories-menu (categoryClicked)="close()"></app-categories-menu>
|
||||
<div class="menu {{ isOpened() ? 'displayed' : '' }}">
|
||||
<h1>
|
||||
<a [routerLink]="['/home']">
|
||||
<img src="assets/images/codiki.png" alt="logo"/>
|
||||
Codiki
|
||||
</a>
|
||||
<button type="button"
|
||||
(click)="close()"
|
||||
class="cod-button icon"
|
||||
matTooltip="Close the menu"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</h1>
|
||||
<h2 i18n>Categories</h2>
|
||||
<app-categories-menu (categoryClicked)="close()"></app-categories-menu>
|
||||
</div>
|
||||
<div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div>
|
||||
<div class="overlay {{ isOpened() ? 'displayed' : ''}}" (click)="close()"></div>
|
||||
|
||||
@@ -1,68 +1,68 @@
|
||||
: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;
|
||||
flex-direction: column;
|
||||
background-color: #3f51b5;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
$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;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
$imageSize: 1.2em;
|
||||
width: $imageSize;
|
||||
height: $imageSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 1em;
|
||||
img {
|
||||
$imageSize: 1.2em;
|
||||
width: $imageSize;
|
||||
height: $imageSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
display: none;
|
||||
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;
|
||||
}
|
||||
h2 {
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
display: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import {Component, signal} from '@angular/core';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CategoriesMenuComponent} from './categories-menu/categories-menu.component';
|
||||
import {MatRippleModule} from '@angular/material/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-side-menu',
|
||||
templateUrl: './side-menu.component.html',
|
||||
styleUrl: './side-menu.component.scss',
|
||||
imports: [
|
||||
CategoriesMenuComponent,
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
MatTooltipModule,
|
||||
RouterModule
|
||||
]
|
||||
selector: 'app-side-menu',
|
||||
templateUrl: './side-menu.component.html',
|
||||
styleUrl: './side-menu.component.scss',
|
||||
imports: [
|
||||
CategoriesMenuComponent,
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
MatTooltipModule,
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class SideMenuComponent {
|
||||
isOpenned: boolean = false;
|
||||
isOpened = signal(false);
|
||||
|
||||
open(): void {
|
||||
this.isOpenned = true;
|
||||
this.isOpened.set(true);
|
||||
}
|
||||
|
||||
close(): void {
|
||||
this.isOpenned = false;
|
||||
this.isOpened.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { CategoryRestService } from '../../core/rest-services/category/category.rest-service';
|
||||
import { Category } from '../../core/rest-services/category/model/category';
|
||||
import {inject, Injectable} from '@angular/core';
|
||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||
import {BehaviorSubject, Observable} from 'rxjs';
|
||||
import {CategoryRestService} from '../../core/rest-services/category/category.rest-service';
|
||||
import {Category} from '../../core/rest-services/category/model/category';
|
||||
|
||||
export interface DisplayableCategory {
|
||||
id: string;
|
||||
@@ -72,7 +72,7 @@ export class SideMenuService {
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occured while loading categories.`;
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
|
||||
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoadingSubject.next(false);
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<button type="submit"
|
||||
class="cod-button {{color}}"
|
||||
[disabled]="disabled || requestPending"
|
||||
class="cod-button {{color()}}"
|
||||
[disabled]="disabled() || requestPending()"
|
||||
(click)="click.emit()"
|
||||
matRipple>
|
||||
@if (requestPending) {
|
||||
<mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
|
||||
}
|
||||
<span>
|
||||
@if (requestPending()) {
|
||||
<mat-spinner class="spinner {{color()}}" [diameter]="25"></mat-spinner>
|
||||
}
|
||||
<span>
|
||||
<ng-content/>
|
||||
</span>
|
||||
</button>
|
||||
@@ -1,43 +1,43 @@
|
||||
button {
|
||||
padding: .8em 1.2em;
|
||||
border-radius: 10em;
|
||||
border: none;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
transition: background-color .2s ease-in-out;
|
||||
position: relative;
|
||||
padding: .8em 1.2em;
|
||||
border-radius: 10em;
|
||||
border: none;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
transition: background-color .2s ease-in-out;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: #3f51b5;
|
||||
background-color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
background-color: #f2f4ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: #3f51b5;
|
||||
background-color: white;
|
||||
&:disabled {
|
||||
background-color: #6d7ac5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f4ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #6d7ac5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
mat-spinner {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: calc(50% - 12px);
|
||||
}
|
||||
mat-spinner {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px);
|
||||
left: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .spinner circle {
|
||||
stroke: white;
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
:host ::ng-deep .spinner.secondary circle {
|
||||
stroke: #3f51b5;
|
||||
stroke: #3f51b5;
|
||||
}
|
||||
@@ -1,22 +1,20 @@
|
||||
|
||||
import { Component, EventEmitter, Input, Output } from "@angular/core";
|
||||
import { MatRippleModule } from "@angular/material/core";
|
||||
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
|
||||
import {Component, input, output} from "@angular/core";
|
||||
import {MatRippleModule} from "@angular/material/core";
|
||||
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
|
||||
|
||||
@Component({
|
||||
selector: 'app-submit-button',
|
||||
templateUrl: 'submit-button.component.html',
|
||||
styleUrl: 'submit-button.component.scss',
|
||||
imports: [
|
||||
selector: 'app-submit-button',
|
||||
templateUrl: 'submit-button.component.html',
|
||||
styleUrl: 'submit-button.component.scss',
|
||||
imports: [
|
||||
MatRippleModule,
|
||||
MatProgressSpinnerModule
|
||||
]
|
||||
]
|
||||
})
|
||||
export class SubmitButtonComponent {
|
||||
@Input() requestPending: boolean = false;
|
||||
@Input() label: string = '';
|
||||
@Input() disabled: boolean = false;
|
||||
@Input() color?: 'secondary';
|
||||
@Output() click = new EventEmitter<void>();
|
||||
}
|
||||
|
||||
requestPending = input.required<boolean>();
|
||||
label = input<string>();
|
||||
disabled = input<boolean>(false);
|
||||
color = input<'secondary' | undefined>('secondary');
|
||||
click = output<void>();
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { inject } from "@angular/core";
|
||||
import { CanActivateFn, Router } from "@angular/router";
|
||||
import { AuthenticationService } from "../service/authentication.service";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
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);
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -1,20 +1,20 @@
|
||||
import { inject } from "@angular/core";
|
||||
import { CanActivateFn, Router } from "@angular/router";
|
||||
import { AuthenticationService } from "../service/authentication.service";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
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 authenticationGuard: CanActivateFn = async () => {
|
||||
const authenticationService = inject(AuthenticationService);
|
||||
const router = inject(Router);
|
||||
const snackBar = inject(MatSnackBar);
|
||||
const authenticationService = inject(AuthenticationService);
|
||||
const router = inject(Router);
|
||||
const snackBar = inject(MatSnackBar);
|
||||
|
||||
await authenticationService.checkIsAuthenticated();
|
||||
await authenticationService.checkIsAuthenticated();
|
||||
|
||||
if (authenticationService.isAuthenticated()) {
|
||||
return true;
|
||||
} else {
|
||||
router.navigate(['/login']);
|
||||
snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, { duration: 5000 });
|
||||
return false;
|
||||
}
|
||||
if (authenticationService.isAuthenticated()) {
|
||||
return true;
|
||||
} else {
|
||||
router.navigate(['/login']);
|
||||
snackBar.open($localize`You are unauthenticated. Please, log-in first.`, $localize`Close`, {duration: 5000});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -1,78 +1,77 @@
|
||||
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
|
||||
import { inject, Injectable } from '@angular/core';
|
||||
import { catchError, filter, Observable, Subject, switchMap, take, throwError } from 'rxjs';
|
||||
import { RefreshTokenRequest } from '../rest-services/user/model/refresh-token.model';
|
||||
import { UserRestService } from '../rest-services/user/user.rest-service';
|
||||
import { AuthenticationService } from '../service/authentication.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
|
||||
import {inject, Injectable} from '@angular/core';
|
||||
import {catchError, filter, Observable, Subject, switchMap, take, throwError} from 'rxjs';
|
||||
import {UserRestService} from '../rest-services/user/user.rest-service';
|
||||
import {AuthenticationService} from '../service/authentication.service';
|
||||
import {Router} from '@angular/router';
|
||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||
|
||||
@Injectable()
|
||||
export class JwtInterceptor implements HttpInterceptor {
|
||||
private readonly authenticationService = inject(AuthenticationService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly userRestService = inject(UserRestService);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private isRefreshingToken = false;
|
||||
private refreshTokenSubject = new Subject<string | undefined>();
|
||||
private readonly authenticationService = inject(AuthenticationService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly userRestService = inject(UserRestService);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private isRefreshingToken = false;
|
||||
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;
|
||||
|
||||
const jwt = this.authenticationService.getToken();
|
||||
if (jwt) {
|
||||
requestWithAuthentication = this.addTokenInHeaders(request, jwt);
|
||||
if (token) {
|
||||
requestWithAuthentication = this.addTokenInHeaders(request, token)
|
||||
}
|
||||
return next.handle(requestWithAuthentication);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return next.handle(requestWithAuthentication)
|
||||
.pipe(
|
||||
catchError(error => {
|
||||
if (error instanceof HttpErrorResponse && error.status === 401) {
|
||||
return this.handleAunauthorizedError(request, next, error);
|
||||
}
|
||||
private addTokenInHeaders(request: HttpRequest<any>, token: string): HttpRequest<any> {
|
||||
return request.clone({
|
||||
headers: request.headers.set('Authorization', `Bearer ${token}`)
|
||||
});
|
||||
}
|
||||
|
||||
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;
|
||||
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
export interface FormError {
|
||||
fieldName: string;
|
||||
errorMessage: string;
|
||||
fieldName: string;
|
||||
errorMessage: string;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
pseudo: string;
|
||||
photoId?: string;
|
||||
roles: string[];
|
||||
id: string;
|
||||
email: string;
|
||||
pseudo: string;
|
||||
photoId?: string;
|
||||
roles: string[];
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
import { Category } from './model/category';
|
||||
import {HttpClient} from '@angular/common/http';
|
||||
import {inject, Injectable} from '@angular/core';
|
||||
import {lastValueFrom} from 'rxjs';
|
||||
import {Category} from './model/category';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
subCategories: Category[];
|
||||
id: string;
|
||||
name: string;
|
||||
subCategories: Category[];
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
export interface Picture {
|
||||
id: string,
|
||||
publishedAt: Date
|
||||
id: string,
|
||||
publishedAt: Date
|
||||
}
|
||||
@@ -1,21 +1,21 @@
|
||||
import { HttpClient, HttpParams } from "@angular/common/http";
|
||||
import { inject, Injectable } from "@angular/core";
|
||||
import { Picture } from "./model/picture";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {inject, Injectable} from "@angular/core";
|
||||
import {Picture} from "./model/picture";
|
||||
import {lastValueFrom} from "rxjs";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class PictureRestService {
|
||||
private readonly httpClient = inject(HttpClient);
|
||||
private readonly httpClient = inject(HttpClient);
|
||||
|
||||
getAllOfCurrentUser(): Promise<Picture[]> {
|
||||
return lastValueFrom(this.httpClient.get<Picture[]>('/api/pictures/current-user'));
|
||||
}
|
||||
getAllOfCurrentUser(): Promise<Picture[]> {
|
||||
return lastValueFrom(this.httpClient.get<Picture[]>('/api/pictures/current-user'));
|
||||
}
|
||||
|
||||
uploadPicture(pictureFile: File): Promise<string> {
|
||||
const formData = new FormData();
|
||||
formData.append("file", pictureFile);
|
||||
return lastValueFrom(this.httpClient.post<string>('/api/pictures', formData));
|
||||
}
|
||||
uploadPicture(pictureFile: File): Promise<string> {
|
||||
const formData = new FormData();
|
||||
formData.append("file", pictureFile);
|
||||
return lastValueFrom(this.httpClient.post<string>('/api/pictures', formData));
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
export interface Author {
|
||||
id: string;
|
||||
name: string;
|
||||
image: string;
|
||||
id: string;
|
||||
name: string;
|
||||
image: string;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
export interface PreviewContentRequest {
|
||||
text: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface PreviewContentResponse {
|
||||
text: string;
|
||||
text: string;
|
||||
}
|
||||
@@ -1,14 +1,31 @@
|
||||
import { Author } from "./author";
|
||||
import {Author} from "./author";
|
||||
|
||||
export interface Publication {
|
||||
id: string;
|
||||
key: string;
|
||||
title: string;
|
||||
text: string;
|
||||
parsedText: string;
|
||||
description: string;
|
||||
creationDate: Date;
|
||||
illustrationId: string;
|
||||
categoryId: string;
|
||||
author: Author;
|
||||
id: string;
|
||||
key: string;
|
||||
title: string;
|
||||
text: string;
|
||||
parsedText: string;
|
||||
description: string;
|
||||
creationDate: Date;
|
||||
illustrationId: string;
|
||||
categoryId: string;
|
||||
author: Author;
|
||||
}
|
||||
|
||||
export const DEFAULT_PUBLICATION: Publication = {
|
||||
id: '',
|
||||
key: '',
|
||||
title: '',
|
||||
text: '',
|
||||
parsedText: '',
|
||||
description: '',
|
||||
creationDate: new Date(),
|
||||
illustrationId: '',
|
||||
categoryId: '',
|
||||
author: {
|
||||
id: '',
|
||||
name: '',
|
||||
image: ''
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { last, lastValueFrom } from 'rxjs';
|
||||
import { Publication } from './model/publication';
|
||||
import { PreviewContentRequest, PreviewContentResponse } from './model/preview';
|
||||
import {HttpClient, HttpParams} from '@angular/common/http';
|
||||
import {inject, Injectable} from '@angular/core';
|
||||
import {lastValueFrom} from 'rxjs';
|
||||
import {Publication} from './model/publication';
|
||||
import {PreviewContentRequest, PreviewContentResponse} from './model/preview';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
@@ -29,7 +29,7 @@ export class PublicationRestService {
|
||||
search(searchCriteria: string): Promise<Publication[]> {
|
||||
let params = new HttpParams();
|
||||
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> {
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
export interface LoginRequest {
|
||||
email?: string;
|
||||
password?: string;
|
||||
email?: string;
|
||||
password?: string;
|
||||
}
|
||||
|
||||
export interface LoginResponse {
|
||||
tokenType: string,
|
||||
accessToken: string,
|
||||
refreshToken: string
|
||||
tokenType: string,
|
||||
accessToken: string,
|
||||
refreshToken: string
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
export interface RefreshTokenRequest {
|
||||
refreshTokenValue: string;
|
||||
refreshTokenValue: string;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
export interface SigninRequest {
|
||||
pseudo?: string;
|
||||
email?: string;
|
||||
password?: string;
|
||||
pseudo?: string;
|
||||
email?: string;
|
||||
password?: string;
|
||||
}
|
||||
@@ -1,25 +1,25 @@
|
||||
import { HttpClient } from "@angular/common/http";
|
||||
import { Injectable, inject } from "@angular/core";
|
||||
import { LoginRequest, LoginResponse } from "./model/login.model";
|
||||
import { lastValueFrom } from "rxjs";
|
||||
import { SigninRequest } from "./model/signin.model";
|
||||
import { RefreshTokenRequest } from "./model/refresh-token.model";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {inject, Injectable} from "@angular/core";
|
||||
import {LoginRequest, LoginResponse} from "./model/login.model";
|
||||
import {lastValueFrom} from "rxjs";
|
||||
import {SigninRequest} from "./model/signin.model";
|
||||
import {RefreshTokenRequest} from "./model/refresh-token.model";
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class UserRestService {
|
||||
private httpClient = inject(HttpClient);
|
||||
private httpClient = inject(HttpClient);
|
||||
|
||||
login(request: LoginRequest): Promise<LoginResponse> {
|
||||
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request));
|
||||
}
|
||||
login(request: LoginRequest): Promise<LoginResponse> {
|
||||
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/login', request));
|
||||
}
|
||||
|
||||
signin(request: SigninRequest): Promise<void> {
|
||||
return lastValueFrom(this.httpClient.post<void>('/api/users', request));
|
||||
}
|
||||
signin(request: SigninRequest): Promise<void> {
|
||||
return lastValueFrom(this.httpClient.post<void>('/api/users', request));
|
||||
}
|
||||
|
||||
refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> {
|
||||
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request));
|
||||
}
|
||||
refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> {
|
||||
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request));
|
||||
}
|
||||
}
|
||||
@@ -1,146 +1,146 @@
|
||||
import { inject, Injectable } from "@angular/core";
|
||||
import { BehaviorSubject, interval } from "rxjs";
|
||||
import { User } from "../model/User";
|
||||
import { UserRestService } from "../rest-services/user/user.rest-service";
|
||||
import { RefreshTokenRequest } from "../rest-services/user/model/refresh-token.model";
|
||||
import { LoginResponse } from "../rest-services/user/model/login.model";
|
||||
import {inject, Injectable} from "@angular/core";
|
||||
import {BehaviorSubject, interval} from "rxjs";
|
||||
import {User} from "../model/User";
|
||||
import {UserRestService} from "../rest-services/user/user.rest-service";
|
||||
import {RefreshTokenRequest} from "../rest-services/user/model/refresh-token.model";
|
||||
import {LoginResponse} from "../rest-services/user/model/login.model";
|
||||
|
||||
const JWT_PARAM = 'jwt';
|
||||
const REFRESH_TOKEN_PARAM = 'refresh-token';
|
||||
|
||||
interface UserDetails {
|
||||
sub: string;
|
||||
exp: number;
|
||||
email: string;
|
||||
pseudo: string;
|
||||
roles: string;
|
||||
sub: string;
|
||||
exp: number;
|
||||
email: string;
|
||||
pseudo: string;
|
||||
roles: string;
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AuthenticationService {
|
||||
private readonly AUTHENTICATION_CHECKING_PERIOD = 5 * 60 * 1000;
|
||||
private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
|
||||
private readonly userRestService = inject(UserRestService);
|
||||
private readonly AUTHENTICATION_CHECKING_PERIOD = 5 * 60 * 1000;
|
||||
private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
|
||||
private readonly userRestService = inject(UserRestService);
|
||||
|
||||
startAuthenticationCheckingProcess(): void {
|
||||
this.checkIsAuthenticated();
|
||||
interval(this.AUTHENTICATION_CHECKING_PERIOD)
|
||||
.subscribe(() => this.checkIsAuthenticated());
|
||||
startAuthenticationCheckingProcess(): void {
|
||||
this.checkIsAuthenticated();
|
||||
interval(this.AUTHENTICATION_CHECKING_PERIOD)
|
||||
.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;
|
||||
}
|
||||
|
||||
authenticate(token: string, refreshToken: string): void {
|
||||
localStorage.setItem(JWT_PARAM, token);
|
||||
localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
|
||||
this.isAuthenticatedSubject.next(true);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
refreshToken(): Promise<LoginResponse> {
|
||||
const refreshToken = this.getRefreshToken();
|
||||
if (refreshToken) {
|
||||
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.');
|
||||
}
|
||||
|
||||
checkIsAuthenticated(): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const isTokenExpired = this.isTokenExpired();
|
||||
if (isTokenExpired) {
|
||||
if (this.getRefreshToken()) {
|
||||
this.refreshToken()
|
||||
.then(() => resolve())
|
||||
.catch(() => reject());
|
||||
} else {
|
||||
this.isAuthenticatedSubject.next(false);
|
||||
}
|
||||
} else {
|
||||
this.isAuthenticatedSubject.next(true);
|
||||
}
|
||||
resolve();
|
||||
refreshToken(): Promise<LoginResponse> {
|
||||
const refreshToken = this.getRefreshToken();
|
||||
if (refreshToken) {
|
||||
const refreshTokenRequest: RefreshTokenRequest = {
|
||||
refreshTokenValue: refreshToken
|
||||
};
|
||||
return this.userRestService.refreshToken(refreshTokenRequest)
|
||||
.then(refreshTokenResponse => {
|
||||
this.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
|
||||
return refreshTokenResponse;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
private extractUserFromLocalStorage(): User | undefined {
|
||||
let result: User | undefined;
|
||||
return Promise.reject('No any refresh token found.');
|
||||
}
|
||||
|
||||
const userDetails = this.extractUserDetails();
|
||||
if (userDetails) {
|
||||
const user = this.convertToUser(userDetails);
|
||||
result = user;
|
||||
checkIsAuthenticated(): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const isTokenExpired = this.isTokenExpired();
|
||||
if (isTokenExpired) {
|
||||
if (this.getRefreshToken()) {
|
||||
this.refreshToken()
|
||||
.then(() => resolve())
|
||||
.catch(() => reject());
|
||||
} else {
|
||||
this.isAuthenticatedSubject.next(false);
|
||||
}
|
||||
} 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;
|
||||
}
|
||||
|
||||
private extractUserDetails(): UserDetails | undefined {
|
||||
let result: UserDetails | undefined = undefined;
|
||||
return result;
|
||||
}
|
||||
|
||||
const token = localStorage.getItem(JWT_PARAM);
|
||||
private extractUserDetails(): UserDetails | undefined {
|
||||
let result: UserDetails | undefined = undefined;
|
||||
|
||||
const tokenParts = token?.split('.');
|
||||
if (tokenParts?.length === 3 && tokenParts[1].length) {
|
||||
const decodedTokenPart = atob(tokenParts[1]);
|
||||
const userDetails: UserDetails = JSON.parse(decodedTokenPart);
|
||||
result = userDetails;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
private convertToUser(userDetails: UserDetails): User {
|
||||
return {
|
||||
id: userDetails.sub,
|
||||
email: userDetails.email,
|
||||
pseudo: userDetails.pseudo,
|
||||
roles: userDetails.roles.split(',')
|
||||
};
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
private convertToUser(userDetails: UserDetails): User {
|
||||
return {
|
||||
id: userDetails.sub,
|
||||
email: userDetails.email,
|
||||
pseudo: userDetails.pseudo,
|
||||
roles: userDetails.roles.split(',')
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { CategoryRestService } from '../rest-services/category/category.rest-service';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { Category } from '../rest-services/category/model/category';
|
||||
import {inject, Injectable} from '@angular/core';
|
||||
import {CategoryRestService} from '../rest-services/category/category.rest-service';
|
||||
import {BehaviorSubject, Observable} from 'rxjs';
|
||||
import {Category} from '../rest-services/category/model/category';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export function copy<T>(object: T): T {
|
||||
return JSON.parse(
|
||||
JSON.stringify(object)
|
||||
);
|
||||
return JSON.parse(
|
||||
JSON.stringify(object)
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,13 +1,13 @@
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
|
||||
import { AuthenticationService } from '../../core/service/authentication.service';
|
||||
import { Router } from '@angular/router';
|
||||
import {AuthenticationService} from '../../core/service/authentication.service';
|
||||
import {Router} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-disconnection',
|
||||
imports: [MatProgressSpinnerModule],
|
||||
templateUrl: './disconnection.component.html',
|
||||
styleUrl: './disconnection.component.scss'
|
||||
selector: 'app-disconnection',
|
||||
imports: [MatProgressSpinnerModule],
|
||||
templateUrl: './disconnection.component.html',
|
||||
styleUrl: './disconnection.component.scss'
|
||||
})
|
||||
export class DisconnectionComponent implements OnInit {
|
||||
private authenticationService = inject(AuthenticationService);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<h1 i18n>Last publications</h1>
|
||||
@if ((isLoading$ | async) === true) {
|
||||
<h2 i18n>Publications loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
@if ((isLoading())) {
|
||||
<h2 i18n>Publications loading...</h2>
|
||||
<mat-spinner/>
|
||||
} @else {
|
||||
@if ((publications$ | async) != []) {
|
||||
<app-publication-list [publications$]="publications$"></app-publication-list>
|
||||
} @else {
|
||||
<h2 i18n>No any publication.</h2>
|
||||
}
|
||||
@if (publications(); as publications) {
|
||||
<app-publication-list [publications]="publications"/>
|
||||
} @else {
|
||||
<h2 i18n>No any publication.</h2>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,34 +1,26 @@
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { Observable } from 'rxjs';
|
||||
import { PublicationListComponent } from '../../components/publication-list/publication-list.component';
|
||||
import { Publication } from '../../core/rest-services/publications/model/publication';
|
||||
import { HomeService } from './home.service';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
|
||||
import {PublicationListComponent} from '../../components/publication-list/publication-list.component';
|
||||
import {HomeService} from './home.service';
|
||||
import {CommonModule} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatProgressSpinnerModule,
|
||||
PublicationListComponent
|
||||
],
|
||||
templateUrl: './home.component.html',
|
||||
styleUrl: './home.component.scss',
|
||||
providers: [HomeService]
|
||||
selector: 'app-home',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatProgressSpinnerModule,
|
||||
PublicationListComponent
|
||||
],
|
||||
templateUrl: './home.component.html',
|
||||
styleUrl: './home.component.scss',
|
||||
providers: [HomeService]
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
private homeService = inject(HomeService);
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.homeService.isLoading$;
|
||||
}
|
||||
|
||||
get publications$(): Observable<Publication[]> {
|
||||
return this.homeService.publications$;
|
||||
}
|
||||
readonly #homeService = inject(HomeService);
|
||||
isLoading = this.#homeService.isLoading;
|
||||
publications = this.#homeService.publications;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.homeService.startLatestPublicationsRetrieving();
|
||||
this.#homeService.startLatestPublicationsRetrieving();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,35 +1,34 @@
|
||||
import { Injectable, inject } from "@angular/core";
|
||||
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
|
||||
import { BehaviorSubject, Observable } from "rxjs";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar"
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import {inject, Injectable, Signal, signal} from "@angular/core";
|
||||
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar"
|
||||
import {Publication} from "../../core/rest-services/publications/model/publication";
|
||||
|
||||
@Injectable()
|
||||
export class HomeService {
|
||||
private publicationRestService = inject(PublicationRestService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
private publicationRestService = inject(PublicationRestService);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
|
||||
private publicationsSubject = new BehaviorSubject<Publication[]>([]);
|
||||
private isLoadingSubject = new BehaviorSubject<boolean>(false);
|
||||
#publications = signal<Publication[]>([]);
|
||||
#isLoadingSubject = signal<boolean>(false);
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.isLoadingSubject.asObservable();
|
||||
}
|
||||
get isLoading(): Signal<boolean> {
|
||||
return this.#isLoadingSubject.asReadonly();
|
||||
}
|
||||
|
||||
get publications$(): Observable<Publication[]> {
|
||||
return this.publicationsSubject.asObservable();
|
||||
}
|
||||
get publications(): Signal<Publication[]> {
|
||||
return this.#publications.asReadonly();
|
||||
}
|
||||
|
||||
startLatestPublicationsRetrieving(): void {
|
||||
this.isLoadingSubject.next(true);
|
||||
startLatestPublicationsRetrieving(): void {
|
||||
this.#isLoadingSubject.set(true);
|
||||
|
||||
this.publicationRestService.getLatest()
|
||||
.then(publications => this.publicationsSubject.next(publications))
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occurred while retrieving latest publications...`;
|
||||
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
|
||||
console.error(errorMessage, error);
|
||||
})
|
||||
.finally(() => this.isLoadingSubject.next(false));
|
||||
}
|
||||
this.publicationRestService.getLatest()
|
||||
.then(publications => this.#publications.set(publications))
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occurred while retrieving latest publications...`;
|
||||
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
||||
console.error(errorMessage, error);
|
||||
})
|
||||
.finally(() => this.#isLoadingSubject.set(false));
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,23 @@
|
||||
<form [formGroup]="loginForm" (submit)="performLogin()" class="cod-form card" ngNativeValidate>
|
||||
<h1 i18n>Login</h1>
|
||||
<div class="form-field">
|
||||
<mat-icon>mail</mat-icon>
|
||||
<label for="email" i18n>
|
||||
Email address
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="email" id="email" formControlName="email" autocomplete="email" required />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<mat-icon>lock</mat-icon>
|
||||
<label for="password" i18n>
|
||||
Password
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="password" id="password" formControlName="password" required />
|
||||
</div>
|
||||
<div class="actions reversed">
|
||||
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
|
||||
<a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
|
||||
</div>
|
||||
<h1 i18n>Login</h1>
|
||||
<div class="form-field">
|
||||
<mat-icon>mail</mat-icon>
|
||||
<label for="email" i18n>
|
||||
Email address
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="email" id="email" formControlName="email" autocomplete="email" required/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<mat-icon>lock</mat-icon>
|
||||
<label for="password" i18n>
|
||||
Password
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="password" id="password" formControlName="password" required/>
|
||||
</div>
|
||||
<div class="actions reversed">
|
||||
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
|
||||
<a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,7 +1,7 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
}
|
||||
@@ -1,25 +1,25 @@
|
||||
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
import { Subscription, debounceTime, map } from 'rxjs';
|
||||
import { LoginService } from './login.service';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import {Component, inject, OnDestroy, OnInit} from '@angular/core';
|
||||
import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
|
||||
import {MatSnackBarModule} from '@angular/material/snack-bar';
|
||||
import {debounceTime, map, Subscription} from 'rxjs';
|
||||
import {LoginService} from './login.service';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
|
||||
import {MatRippleModule} from '@angular/material/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrl: './login.component.scss',
|
||||
imports: [
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
ReactiveFormsModule,
|
||||
RouterModule,
|
||||
SubmitButtonComponent
|
||||
],
|
||||
providers: [LoginService, MatSnackBarModule]
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styleUrl: './login.component.scss',
|
||||
imports: [
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
ReactiveFormsModule,
|
||||
RouterModule,
|
||||
SubmitButtonComponent
|
||||
],
|
||||
providers: [LoginService, MatSnackBarModule]
|
||||
})
|
||||
export class LoginComponent implements OnInit, OnDestroy {
|
||||
private loginService = inject(LoginService);
|
||||
@@ -52,10 +52,10 @@ export class LoginComponent implements OnInit, OnDestroy {
|
||||
this.subscriptions.push(passwordSubscription)
|
||||
|
||||
const stateSubscription = this.loginService.state$
|
||||
.subscribe(state => {
|
||||
this.loginForm.controls['email'].setValue(state.request.email, { emitEvent: false });
|
||||
this.loginForm.controls['password'].setValue(state.request.password, { emitEvent: false });
|
||||
});
|
||||
.subscribe(state => {
|
||||
this.loginForm.controls['email'].setValue(state.request.email, {emitEvent: false});
|
||||
this.loginForm.controls['password'].setValue(state.request.password, {emitEvent: false});
|
||||
});
|
||||
this.subscriptions.push(stateSubscription);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { copy } from '../../core/utils/ObjectUtils';
|
||||
import { FormError } from '../../core/model/FormError';
|
||||
import { UserRestService } from '../../core/rest-services/user/user.rest-service';
|
||||
import { LoginRequest } from '../../core/rest-services/user/model/login.model';
|
||||
import { AuthenticationService } from '../../core/service/authentication.service';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { Router } from '@angular/router';
|
||||
import {inject, Injectable} from '@angular/core';
|
||||
import {BehaviorSubject, Observable} from 'rxjs';
|
||||
import {copy} from '../../core/utils/ObjectUtils';
|
||||
import {FormError} from '../../core/model/FormError';
|
||||
import {UserRestService} from '../../core/rest-services/user/user.rest-service';
|
||||
import {LoginRequest} from '../../core/rest-services/user/model/login.model';
|
||||
import {AuthenticationService} from '../../core/service/authentication.service';
|
||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||
import {Router} from '@angular/router';
|
||||
|
||||
export interface LoginState {
|
||||
request: LoginRequest;
|
||||
@@ -65,15 +65,15 @@ export class LoginService {
|
||||
.login(state.request)
|
||||
.then((response) => {
|
||||
this.authenticationService.authenticate(response.accessToken, response.refreshToken);
|
||||
this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 });
|
||||
this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, {duration: 5000});
|
||||
this.router.navigate(['/home']);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
|
||||
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, {duration: 5000});
|
||||
});
|
||||
} else {
|
||||
this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 });
|
||||
this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, {duration: 5000});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<h1 i18n>Your publications</h1>
|
||||
|
||||
<a [routerLink]="['/publications/new']"
|
||||
class="new-publication"
|
||||
matTooltip="Add a new publication"
|
||||
matTooltipPosition="left"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
+
|
||||
class="new-publication"
|
||||
matTooltip="Add a new publication"
|
||||
matTooltipPosition="left"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
+
|
||||
</a>
|
||||
|
||||
@if ((isLoading$ | async) === true) {
|
||||
<h2 i18n>Publication loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
@if (isLoading()) {
|
||||
<h2 i18n>Publication loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
} @else {
|
||||
@if ((isLoaded$ | async) === true) {
|
||||
<app-publication-list [publications$]="publications$"></app-publication-list>
|
||||
} @else {
|
||||
<h2 i18n>There is no any publication...</h2>
|
||||
}
|
||||
@if (isLoaded()) {
|
||||
<app-publication-list [publications]="publications()"></app-publication-list>
|
||||
} @else {
|
||||
<h2 i18n>There is no any publication...</h2>
|
||||
}
|
||||
}
|
||||
@@ -1,29 +1,29 @@
|
||||
$newPublicationButtonSize: 1.7em;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.new-publication {
|
||||
position: fixed;
|
||||
border-radius: 10em;
|
||||
background-color: #14A44D;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
|
||||
.new-publication {
|
||||
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;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #0e7a3a;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,35 @@
|
||||
import { Component, inject, OnInit } from "@angular/core";
|
||||
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
|
||||
import { MyPublicationsService } from "./my-publications.service";
|
||||
import { Observable } from "rxjs";
|
||||
import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import { MatTooltipModule } from "@angular/material/tooltip";
|
||||
import { MatRippleModule } from "@angular/material/core";
|
||||
import {Component, inject, OnInit} from "@angular/core";
|
||||
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
|
||||
import {MyPublicationsService} from "./my-publications.service";
|
||||
import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {RouterModule} from "@angular/router";
|
||||
import {MatTooltipModule} from "@angular/material/tooltip";
|
||||
import {MatRippleModule} from "@angular/material/core";
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-my-component',
|
||||
templateUrl: './my-publications.component.html',
|
||||
styleUrl: './my-publications.component.scss',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatRippleModule,
|
||||
MatTooltipModule,
|
||||
PublicationListComponent,
|
||||
RouterModule
|
||||
],
|
||||
providers: [MyPublicationsService]
|
||||
selector: 'app-my-component',
|
||||
templateUrl: './my-publications.component.html',
|
||||
styleUrl: './my-publications.component.scss',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatRippleModule,
|
||||
MatTooltipModule,
|
||||
PublicationListComponent,
|
||||
RouterModule
|
||||
],
|
||||
providers: [MyPublicationsService]
|
||||
})
|
||||
export class MyPublicationsComponent implements OnInit {
|
||||
private readonly myPublicationsService = inject(MyPublicationsService);
|
||||
private readonly myPublicationsService = inject(MyPublicationsService);
|
||||
|
||||
get publications$(): Observable<Publication[]> {
|
||||
return this.myPublicationsService.publications$;
|
||||
}
|
||||
publications = this.myPublicationsService.publications;
|
||||
isLoading = this.myPublicationsService.isLoading;
|
||||
isLoaded = this.myPublicationsService.isLoaded;
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.myPublicationsService.isLoading$;
|
||||
}
|
||||
|
||||
get isLoaded$(): Observable<boolean> {
|
||||
return this.myPublicationsService.isLoaded$;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.myPublicationsService.loadAuthenticatedUserPublications();
|
||||
}
|
||||
ngOnInit(): void {
|
||||
this.myPublicationsService.loadAuthenticatedUserPublications();
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Route } from "@angular/router";
|
||||
import { authenticationGuard } from "../../core/guard/authentication.guard";
|
||||
import { MyPublicationsComponent } from "./my-publications.component";
|
||||
import {Route} from "@angular/router";
|
||||
import {authenticationGuard} from "../../core/guard/authentication.guard";
|
||||
import {MyPublicationsComponent} from "./my-publications.component";
|
||||
|
||||
export const ROUTES: Route[] = [
|
||||
{ path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard] }
|
||||
{path: '', component: MyPublicationsComponent, canActivate: [authenticationGuard]}
|
||||
]
|
||||
@@ -1,57 +1,56 @@
|
||||
import { inject, Injectable } from "@angular/core";
|
||||
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
|
||||
import { AuthenticationService } from "../../core/service/authentication.service";
|
||||
import { BehaviorSubject, Observable } from "rxjs";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { Router } from "@angular/router";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import {inject, Injectable, Signal, signal} from "@angular/core";
|
||||
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
|
||||
import {AuthenticationService} from "../../core/service/authentication.service";
|
||||
import {Publication} from "../../core/rest-services/publications/model/publication";
|
||||
import {Router} from "@angular/router";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
|
||||
@Injectable()
|
||||
export class MyPublicationsService {
|
||||
private readonly authenticationService = inject(AuthenticationService);
|
||||
private readonly publicationRestService = inject(PublicationRestService);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private readonly router = inject(Router);
|
||||
private publicationsSubject = new BehaviorSubject<Publication[]>([]);
|
||||
private isLoadingSubject = new BehaviorSubject<boolean>(false);
|
||||
private isLoadedSubject = new BehaviorSubject<boolean>(false);
|
||||
readonly #authenticationService = inject(AuthenticationService);
|
||||
readonly #publicationRestService = inject(PublicationRestService);
|
||||
readonly #snackBar = inject(MatSnackBar);
|
||||
readonly #router = inject(Router);
|
||||
#publications = signal<Publication[]>([]);
|
||||
#isLoading = signal(false);
|
||||
#isLoaded = signal(false);
|
||||
|
||||
get publications$(): Observable<Publication[]> {
|
||||
return this.publicationsSubject.asObservable();
|
||||
}
|
||||
|
||||
get 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']);
|
||||
}
|
||||
get publications(): Signal<Publication[]> {
|
||||
return this.#publications.asReadonly();
|
||||
}
|
||||
|
||||
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']);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
<app-publication-edition
|
||||
title="Creation of a new publication"
|
||||
[publication]="publication"
|
||||
[isSaving$]="isSaving$"
|
||||
(publicationSave)="onPublicationSave($event)"
|
||||
i18n-title>
|
||||
</app-publication-edition>
|
||||
title="Creation of a new publication"
|
||||
[publication]="publication()"
|
||||
[isSaving]="isSaving()"
|
||||
(publicationSave)="onPublicationSave($event)"
|
||||
i18n-title
|
||||
/>
|
||||
|
||||
@@ -1,74 +1,53 @@
|
||||
import { Component, inject, OnInit } from "@angular/core";
|
||||
import { PublicationEditionComponent } from "../../components/publication-edition/publication-edition.component";
|
||||
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import { BehaviorSubject, Observable, Subscription } from "rxjs";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { AuthenticationService } from "../../core/service/authentication.service";
|
||||
import { Author } from "../../core/rest-services/publications/model/author";
|
||||
|
||||
import {Component, inject, OnInit, signal} from "@angular/core";
|
||||
import {PublicationEditionComponent} from "../../components/publication-edition/publication-edition.component";
|
||||
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
|
||||
import {Router} from "@angular/router";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {DEFAULT_PUBLICATION, Publication} from "../../core/rest-services/publications/model/publication";
|
||||
import {AuthenticationService} from "../../core/service/authentication.service";
|
||||
import {Author} from "../../core/rest-services/publications/model/author";
|
||||
|
||||
@Component({
|
||||
selector: 'app-publication-creation',
|
||||
templateUrl: './publication-creation.component.html',
|
||||
styleUrl: './publication-creation.component.scss',
|
||||
imports: [
|
||||
selector: 'app-publication-creation',
|
||||
templateUrl: './publication-creation.component.html',
|
||||
styleUrl: './publication-creation.component.scss',
|
||||
imports: [
|
||||
PublicationEditionComponent
|
||||
]
|
||||
]
|
||||
})
|
||||
export class PublicationCreationComponent implements OnInit {
|
||||
private readonly authenticationService = inject(AuthenticationService);
|
||||
private readonly publicationRestService = inject(PublicationRestService);
|
||||
private readonly router = inject(Router);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private isSavingSubject = new BehaviorSubject<boolean>(false);
|
||||
private subscriptions: Subscription[] = [];
|
||||
publication!: Publication;
|
||||
readonly #authenticationService = inject(AuthenticationService);
|
||||
readonly #publicationRestService = inject(PublicationRestService);
|
||||
readonly #router = inject(Router);
|
||||
readonly #snackBar = inject(MatSnackBar);
|
||||
isSaving = signal(false);
|
||||
publication = signal<Publication>(DEFAULT_PUBLICATION);
|
||||
|
||||
get isSaving$(): Observable<boolean> {
|
||||
return this.isSavingSubject.asObservable();
|
||||
ngOnInit(): void {
|
||||
const authenticatedUser = this.#authenticationService.getAuthenticatedUser();
|
||||
if (authenticatedUser) {
|
||||
const author: Author = {
|
||||
id: authenticatedUser.id,
|
||||
name: authenticatedUser.pseudo,
|
||||
image: authenticatedUser.photoId ?? ''
|
||||
};
|
||||
const newPublication: Publication = {...DEFAULT_PUBLICATION, author};
|
||||
this.publication.set(newPublication);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
const authenticatedUser = this.authenticationService.getAuthenticatedUser();
|
||||
if (authenticatedUser) {
|
||||
const author: Author = {
|
||||
id: authenticatedUser.id,
|
||||
name: authenticatedUser.pseudo,
|
||||
image: authenticatedUser.photoId ?? ''
|
||||
};
|
||||
this.publication = {
|
||||
id: '',
|
||||
key: '',
|
||||
title: '',
|
||||
text: '',
|
||||
parsedText: '',
|
||||
description: '',
|
||||
creationDate: new Date(),
|
||||
illustrationId: '',
|
||||
categoryId: '',
|
||||
author
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
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));
|
||||
}
|
||||
onPublicationSave(publication: Publication): void {
|
||||
this.isSaving.set(true);
|
||||
this.#publicationRestService.create(publication)
|
||||
.then(() => {
|
||||
this.#snackBar.open($localize`Publication created succesfully!`, $localize`Close`, {duration: 5000});
|
||||
this.#router.navigate(['/my-publications']);
|
||||
})
|
||||
.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.isSaving.set(false));
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Route } from "@angular/router";
|
||||
import { authenticationGuard } from "../../core/guard/authentication.guard";
|
||||
import { PublicationCreationComponent } from "./publication-creation.component";
|
||||
import {Route} from "@angular/router";
|
||||
import {authenticationGuard} from "../../core/guard/authentication.guard";
|
||||
import {PublicationCreationComponent} from "./publication-creation.component";
|
||||
|
||||
export const ROUTES: Route[] = [
|
||||
{ path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard] }
|
||||
{path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard]}
|
||||
]
|
||||
@@ -1,20 +1,18 @@
|
||||
@if ((isLoading$ | async) == true) {
|
||||
<h2 i18n>Loading publication to edit...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
}
|
||||
@else {
|
||||
@if (publication) {
|
||||
<app-publication-edition
|
||||
title="Update publication {{ publication.title }}"
|
||||
[publication]="publication"
|
||||
[isSaving$]="isSaving$"
|
||||
(publicationSave)="onPublicationSave($event)"
|
||||
i18n-title>
|
||||
</app-publication-edition>
|
||||
}
|
||||
@else {
|
||||
<div class="loading-failed">
|
||||
<h1 i18n>Publication failed to load...</h1>
|
||||
</div>
|
||||
}
|
||||
@if (isLoading()) {
|
||||
<h2 i18n>Loading publication to edit...</h2>
|
||||
<mat-spinner/>
|
||||
} @else {
|
||||
@if (publication(); as publication) {
|
||||
<app-publication-edition
|
||||
title="Update publication {{ publication.title }}"
|
||||
[publication]="publication"
|
||||
[isSaving]="isSaving()"
|
||||
(publicationSave)="onPublicationSave($event)"
|
||||
i18n-title
|
||||
/>
|
||||
} @else {
|
||||
<div class="loading-failed">
|
||||
<h1 i18n>Publication failed to load...</h1>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
:host {
|
||||
display: flex;
|
||||
display: flex;
|
||||
|
||||
app-publication-edition {
|
||||
flex: 1;
|
||||
}
|
||||
app-publication-edition {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,93 +1,93 @@
|
||||
import { CommonModule, Location } from '@angular/common';
|
||||
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
|
||||
import { PublicationEditionComponent } from '../../components/publication-edition/publication-edition.component';
|
||||
import { Publication } from '../../core/rest-services/publications/model/publication';
|
||||
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
|
||||
import {CommonModule, Location} from '@angular/common';
|
||||
import {Component, effect, inject, Signal, signal} from '@angular/core';
|
||||
import {ReactiveFormsModule} from '@angular/forms';
|
||||
import {MatDialogModule} from '@angular/material/dialog';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {MatInputModule} from '@angular/material/input';
|
||||
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
|
||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||
import {MatTabsModule} from '@angular/material/tabs';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {PublicationEditionComponent} from '../../components/publication-edition/publication-edition.component';
|
||||
import {Publication} from '../../core/rest-services/publications/model/publication';
|
||||
import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service';
|
||||
import {toSignal} from "@angular/core/rxjs-interop";
|
||||
import {map} from "rxjs";
|
||||
|
||||
@Component({
|
||||
selector: 'app-publication-update',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatTabsModule,
|
||||
MatTooltipModule,
|
||||
ReactiveFormsModule,
|
||||
PublicationEditionComponent
|
||||
],
|
||||
templateUrl: './publication-update.component.html',
|
||||
styleUrl: './publication-update.component.scss'
|
||||
selector: 'app-publication-update',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatDialogModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatTabsModule,
|
||||
MatTooltipModule,
|
||||
ReactiveFormsModule,
|
||||
PublicationEditionComponent
|
||||
],
|
||||
templateUrl: './publication-update.component.html',
|
||||
styleUrl: './publication-update.component.scss'
|
||||
})
|
||||
export class PublicationUpdateComponent implements OnInit, OnDestroy {
|
||||
private readonly publicationRestService = inject(PublicationRestService);
|
||||
private readonly activatedRoute = inject(ActivatedRoute);
|
||||
private readonly location = inject(Location);
|
||||
private readonly router = inject(Router);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private isLoadingSubject = new BehaviorSubject<boolean>(false);
|
||||
private isSavingSubject = new BehaviorSubject<boolean>(false);
|
||||
private subscriptions: Subscription[] = [];
|
||||
publication: Publication | undefined;
|
||||
export class PublicationUpdateComponent {
|
||||
readonly #activatedRoute = inject(ActivatedRoute);
|
||||
readonly #location = inject(Location);
|
||||
readonly #publicationRestService = inject(PublicationRestService);
|
||||
readonly #router = inject(Router);
|
||||
readonly #snackBar = inject(MatSnackBar);
|
||||
#isLoading = signal(false);
|
||||
#isSavingSubject = signal(false);
|
||||
publication = signal<Publication | undefined>(undefined);
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.isLoadingSubject.asObservable();
|
||||
#publicationId$ = this.#activatedRoute.params
|
||||
.pipe(map(queryParams => queryParams['publicationId']));
|
||||
#publicationId = toSignal(this.#publicationId$, {initialValue: undefined});
|
||||
|
||||
get isLoading(): Signal<boolean> {
|
||||
return this.#isLoading.asReadonly();
|
||||
}
|
||||
|
||||
get isSaving$(): Observable<boolean> {
|
||||
return this.isSavingSubject.asObservable();
|
||||
get isSaving(): Signal<boolean> {
|
||||
return this.#isSavingSubject.asReadonly();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.isLoadingSubject.next(true);
|
||||
const activatedRouteSubscription = this.activatedRoute.paramMap.subscribe(params => {
|
||||
const publicationId = params.get('publicationId');
|
||||
if (publicationId == undefined) {
|
||||
this.snackBar.open($localize`A technical error occurred while loading publication data.`, $localize`Close`, { duration: 5000 });
|
||||
this.location.back();
|
||||
} else {
|
||||
this.publicationRestService.getById(publicationId)
|
||||
.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));
|
||||
}
|
||||
});
|
||||
this.subscriptions.push(activatedRouteSubscription);
|
||||
}
|
||||
constructor() {
|
||||
effect(() => {
|
||||
this.#isLoading.set(true);
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(subscription => subscription?.unsubscribe());
|
||||
const publicationId = this.#publicationId();
|
||||
if (publicationId) {
|
||||
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 {
|
||||
this.isSavingSubject.next(true);
|
||||
this.publicationRestService.update(publication)
|
||||
.then(() => {
|
||||
this.snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, { duration: 5000 });
|
||||
this.router.navigate(['/home']);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occured while saving publication modifications.`;
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
|
||||
})
|
||||
.finally(() => this.isSavingSubject.next(false));
|
||||
this.#isSavingSubject.set(true);
|
||||
this.#publicationRestService.update(publication)
|
||||
.then(() => {
|
||||
this.#snackBar.open($localize`Publication updated succesfully!`, $localize`Close`, {duration: 5000});
|
||||
this.#router.navigate(['/home']);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occured while saving publication modifications.`;
|
||||
console.error(errorMessage, error);
|
||||
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
||||
})
|
||||
.finally(() => this.#isSavingSubject.set(false));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Route } from "@angular/router";
|
||||
import { PublicationUpdateComponent } from "./publication-update.component";
|
||||
import { authenticationGuard } from "../../core/guard/authentication.guard";
|
||||
import {Route} from "@angular/router";
|
||||
import {PublicationUpdateComponent} from "./publication-update.component";
|
||||
import {authenticationGuard} from "../../core/guard/authentication.guard";
|
||||
|
||||
export const ROUTES: Route[] = [
|
||||
{ path: '', component: PublicationUpdateComponent, canActivate: [authenticationGuard] }
|
||||
{path: '', component: PublicationUpdateComponent, canActivate: [authenticationGuard]}
|
||||
]
|
||||
@@ -1,50 +1,50 @@
|
||||
@if (isLoading) {
|
||||
<h2 i18n>Publication content loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
@if (isLoading()) {
|
||||
<h2 i18n>Publication content loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
} @else {
|
||||
@if (publication) {
|
||||
<div class="card">
|
||||
<img src="/api/pictures/{{ publication.illustrationId }}" />
|
||||
<header>
|
||||
<h1>{{ publication.title }}</h1>
|
||||
<h2>{{ publication.description }}</h2>
|
||||
@if (isAuthorAndUserEquals) {
|
||||
<a [routerLink]="['edit']"
|
||||
class="button action"
|
||||
matTooltip="Click to edit the publication"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>edit</mat-icon>
|
||||
</a>
|
||||
}
|
||||
</header>
|
||||
<main [innerHTML]="publication.parsedText"></main>
|
||||
<footer>
|
||||
<div class="metadata">
|
||||
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
|
||||
<div class="posting-data">
|
||||
<span i18n>Publication posted by {{ publication.author.name }}</span>
|
||||
<span class="publication-date">
|
||||
@if (publication(); as publication) {
|
||||
<div class="card">
|
||||
<img src="/api/pictures/{{ publication.illustrationId }}"/>
|
||||
<header>
|
||||
<h1>{{ publication.title }}</h1>
|
||||
<h2>{{ publication.description }}</h2>
|
||||
@if (isAuthorAndUserEquals()) {
|
||||
<a [routerLink]="['edit']"
|
||||
class="button action"
|
||||
matTooltip="Click to edit the publication"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>edit</mat-icon>
|
||||
</a>
|
||||
}
|
||||
</header>
|
||||
<main [innerHTML]="publication.parsedText"></main>
|
||||
<footer>
|
||||
<div class="metadata">
|
||||
<img src="/api/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name"/>
|
||||
<div class="posting-data">
|
||||
<span i18n>Publication posted by {{ publication.author.name }}</span>
|
||||
<span class="publication-date">
|
||||
({{ publication.creationDate | date: 'short' }})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@if (isAuthorAndUserEquals) {
|
||||
<button type="button"
|
||||
(click)="deletePublication()"
|
||||
matTooltip="Click to delete the publication"
|
||||
matTooltipPosition="left"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>delete</mat-icon>
|
||||
Delete
|
||||
</button>
|
||||
}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="loading-failed">
|
||||
<h1 i18n>Publication failed to load...</h1>
|
||||
</div>
|
||||
}
|
||||
@if (isAuthorAndUserEquals()) {
|
||||
<button type="button"
|
||||
(click)="deletePublication()"
|
||||
matTooltip="Click to delete the publication"
|
||||
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>
|
||||
}
|
||||
}
|
||||
@@ -1,140 +1,140 @@
|
||||
$cardBorderRadius: .5em;
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.card {
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
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;
|
||||
flex-direction: column;
|
||||
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);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
$imageSize: 4em;
|
||||
border-radius: 10em;
|
||||
width: $imageSize;
|
||||
height: $imageSize;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 2em;
|
||||
position: relative;
|
||||
.posting-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
|
||||
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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.publication-date {
|
||||
font-style: italic;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
$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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,32 +1,32 @@
|
||||
import { CommonModule, Location } from '@angular/common';
|
||||
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { ActivatedRoute, RouterModule } from '@angular/router';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component';
|
||||
import { Publication } from '../../core/rest-services/publications/model/publication';
|
||||
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
|
||||
import { AuthenticationService } from '../../core/service/authentication.service';
|
||||
import {CommonModule, Location} from '@angular/common';
|
||||
import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
|
||||
import {MatRippleModule} from '@angular/material/core';
|
||||
import {MatDialog} from '@angular/material/dialog';
|
||||
import {MatIcon} from '@angular/material/icon';
|
||||
import {MatProgressSpinner} from '@angular/material/progress-spinner';
|
||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||
import {MatTooltipModule} from '@angular/material/tooltip';
|
||||
import {ActivatedRoute, RouterModule} from '@angular/router';
|
||||
import {Subscription} from 'rxjs';
|
||||
import {ConfirmationDialog} from '../../components/confirmation-dialog/confirmation-dialog.component';
|
||||
import {Publication} from '../../core/rest-services/publications/model/publication';
|
||||
import {PublicationRestService} from '../../core/rest-services/publications/publication.rest-service';
|
||||
import {AuthenticationService} from '../../core/service/authentication.service';
|
||||
|
||||
declare let Prism: any;
|
||||
|
||||
@Component({
|
||||
selector: 'app-publication',
|
||||
templateUrl: './publication.component.html',
|
||||
styleUrl: './publication.component.scss',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatIcon,
|
||||
MatRippleModule,
|
||||
MatProgressSpinner,
|
||||
MatTooltipModule,
|
||||
RouterModule
|
||||
]
|
||||
selector: 'app-publication',
|
||||
templateUrl: './publication.component.html',
|
||||
styleUrl: './publication.component.scss',
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatIcon,
|
||||
MatRippleModule,
|
||||
MatProgressSpinner,
|
||||
MatTooltipModule,
|
||||
RouterModule
|
||||
]
|
||||
})
|
||||
export class PublicationComponent implements OnInit, OnDestroy {
|
||||
private readonly activatedRoute = inject(ActivatedRoute);
|
||||
@@ -37,35 +37,35 @@ export class PublicationComponent implements OnInit, OnDestroy {
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private paramMapSubscription?: Subscription;
|
||||
private afterDialogCloseSubscription?: Subscription;
|
||||
isLoading: boolean = false;
|
||||
isAuthorAndUserEquals: boolean = false;
|
||||
publication?: Publication;
|
||||
isLoading = signal(false);
|
||||
isAuthorAndUserEquals = signal(false);
|
||||
publication = signal<Publication | null>(null);
|
||||
|
||||
ngOnInit(): void {
|
||||
this.paramMapSubscription = this.activatedRoute
|
||||
.paramMap
|
||||
.subscribe(params => {
|
||||
const publicationId = params.get('publicationId');
|
||||
.paramMap
|
||||
.subscribe(params => {
|
||||
const publicationId = params.get('publicationId');
|
||||
|
||||
if (publicationId) {
|
||||
this.isLoading = true;
|
||||
if (publicationId) {
|
||||
this.isLoading.set(true);
|
||||
|
||||
this.publicationRestService.getById(publicationId)
|
||||
.then(publication => {
|
||||
this.publication = publication;
|
||||
this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
|
||||
setTimeout(() => Prism.highlightAll(), 100);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occurred while loading publication...`;
|
||||
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
|
||||
console.error(errorMessage, error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
this.publicationRestService.getById(publicationId)
|
||||
.then(publication => {
|
||||
this.publication.set(publication);
|
||||
this.isAuthorAndUserEquals.set(this.authenticationService.getAuthenticatedUser()?.id === this.publication()?.author.id);
|
||||
setTimeout(() => Prism.highlightAll(), 100);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = $localize`An error occurred while loading publication...`;
|
||||
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
||||
console.error(errorMessage, error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading.set(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
@@ -86,9 +86,10 @@ export class PublicationComponent implements OnInit, OnDestroy {
|
||||
|
||||
this.afterDialogCloseSubscription = dialogRef.afterClosed()
|
||||
.subscribe(response => {
|
||||
if (response && this.publication?.id) {
|
||||
this.publicationRestService.delete(this.publication.id);
|
||||
this.snackBar.open($localize`Publication deleted`, $localize`Close`, { duration: 5000 });
|
||||
const publication = this.publication();
|
||||
if (response && publication?.id) {
|
||||
this.publicationRestService.delete(publication.id);
|
||||
this.snackBar.open($localize`Publication deleted`, $localize`Close`, {duration: 5000});
|
||||
this.location.back();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<h1 i18n>Search results</h1>
|
||||
@if((isLoading$ | async) === true) {
|
||||
<h2 i18n>Search in progress...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
} @else if((isLoaded$ | async) === true) {
|
||||
@if((publications$ | async)?.length) {
|
||||
<app-publication-list [publications$]="publications$"></app-publication-list>
|
||||
} @else {
|
||||
<span i18n>No any result.</span>
|
||||
}
|
||||
} @else {
|
||||
@if (isLoading()) {
|
||||
<h2 i18n>Search in progress...</h2>
|
||||
<mat-spinner/>
|
||||
} @else if (isLoaded()) {
|
||||
@if (publications().length) {
|
||||
<app-publication-list [publications]="publications()"/>
|
||||
} @else {
|
||||
<span i18n>No any result.</span>
|
||||
}
|
||||
} @else {
|
||||
<span i18n>No any result.</span>
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,51 +1,39 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component, inject, OnDestroy, OnInit } from "@angular/core";
|
||||
import { MatProgressSpinner } from "@angular/material/progress-spinner";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { Observable, Subscription } from "rxjs";
|
||||
import { PublicationListComponent } from "../../components/publication-list/publication-list.component";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { SearchPublicationsService } from "./search-publications.service";
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {Component, effect, inject} from "@angular/core";
|
||||
import {MatProgressSpinner} from "@angular/material/progress-spinner";
|
||||
import {ActivatedRoute} from "@angular/router";
|
||||
import {PublicationListComponent} from "../../components/publication-list/publication-list.component";
|
||||
import {SearchPublicationsService} from "./search-publications.service";
|
||||
import {toSignal} from "@angular/core/rxjs-interop";
|
||||
|
||||
@Component({
|
||||
selector: 'app-search-publications',
|
||||
templateUrl: './search-publications.component.html',
|
||||
styleUrl: './search-publications.component.scss',
|
||||
imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
|
||||
providers: [SearchPublicationsService]
|
||||
selector: 'app-search-publications',
|
||||
templateUrl: './search-publications.component.html',
|
||||
styleUrl: './search-publications.component.scss',
|
||||
imports: [CommonModule, MatProgressSpinner, PublicationListComponent],
|
||||
providers: [SearchPublicationsService]
|
||||
})
|
||||
export class SearchPublicationsComponent implements OnInit, OnDestroy {
|
||||
private searchPublicationsService = inject(SearchPublicationsService);
|
||||
private activatedRoute = inject(ActivatedRoute);
|
||||
private queryParamsSubscription?: Subscription;
|
||||
export class SearchPublicationsComponent {
|
||||
private searchPublicationsService = inject(SearchPublicationsService);
|
||||
private activatedRoute = inject(ActivatedRoute);
|
||||
publications = this.searchPublicationsService.publications;
|
||||
isLoading = this.searchPublicationsService.isLoading;
|
||||
isLoaded = this.searchPublicationsService.isLoaded;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.queryParamsSubscription = this.activatedRoute.queryParamMap
|
||||
.subscribe(params => {
|
||||
const categoryId = params.get('category-id');
|
||||
if (categoryId) {
|
||||
this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
|
||||
}
|
||||
const query = params.get('query')
|
||||
if (query) {
|
||||
this.searchPublicationsService.loadPublications(query);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.queryParamsSubscription?.unsubscribe();
|
||||
}
|
||||
|
||||
get publications$(): Observable<Publication[]> {
|
||||
return this.searchPublicationsService.publications$;
|
||||
}
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.searchPublicationsService.isLoading$;
|
||||
}
|
||||
|
||||
get isLoaded$(): Observable<boolean> {
|
||||
return this.searchPublicationsService.isLoaded$;
|
||||
}
|
||||
constructor() {
|
||||
const queryParams = toSignal(this.activatedRoute.queryParamMap);
|
||||
effect(() => {
|
||||
let params = queryParams();
|
||||
if (params) {
|
||||
const categoryId = params.get('category-id');
|
||||
if (categoryId) {
|
||||
this.searchPublicationsService.loadPublications(`category_id=${categoryId}`);
|
||||
}
|
||||
const query = params.get('query')
|
||||
if (query) {
|
||||
this.searchPublicationsService.loadPublications(query);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,49 +1,47 @@
|
||||
import { inject, Injectable } from "@angular/core";
|
||||
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
|
||||
import { BehaviorSubject, Observable } from "rxjs";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
|
||||
import {inject, Injectable, Signal, signal} from "@angular/core";
|
||||
import {PublicationRestService} from "../../core/rest-services/publications/publication.rest-service";
|
||||
import {Publication} from "../../core/rest-services/publications/model/publication";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
|
||||
@Injectable()
|
||||
export class SearchPublicationsService {
|
||||
private publicationRestService = inject(PublicationRestService);
|
||||
private publicationsSubject = new BehaviorSubject<Publication[]>([]);
|
||||
private isLoadingSubject = new BehaviorSubject<boolean>(false);
|
||||
private isLoadedSubject = new BehaviorSubject<boolean>(false);
|
||||
private snackBar = inject(MatSnackBar);
|
||||
#snackBar = inject(MatSnackBar);
|
||||
#publicationRestService = inject(PublicationRestService);
|
||||
#publications = signal<Publication[]>([]);
|
||||
#isLoading = signal(false);
|
||||
#isLoaded = signal(false);
|
||||
|
||||
get publications$(): Observable<Publication[]> {
|
||||
return this.publicationsSubject.asObservable();
|
||||
}
|
||||
get publications(): Signal<Publication[]> {
|
||||
return this.#publications.asReadonly();
|
||||
}
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.isLoadingSubject.asObservable();
|
||||
}
|
||||
get isLoading(): Signal<boolean> {
|
||||
return this.#isLoading.asReadonly();
|
||||
}
|
||||
|
||||
get isLoaded$(): Observable<boolean> {
|
||||
return this.isLoadedSubject.asObservable();
|
||||
}
|
||||
get isLoaded(): Signal<boolean> {
|
||||
return this.#isLoaded.asReadonly();
|
||||
}
|
||||
|
||||
loadPublications(searchCriteria: string): void {
|
||||
this.isLoadingSubject.next(true);
|
||||
this.isLoadedSubject.next(false);
|
||||
this.publicationsSubject.next([]);
|
||||
loadPublications(searchCriteria: string): void {
|
||||
this.#isLoading.set(true);
|
||||
this.#isLoaded.set(false);
|
||||
this.#publications.set([]);
|
||||
|
||||
this.publicationRestService.search(searchCriteria)
|
||||
.then(publications => {
|
||||
this.publicationsSubject.next(publications);
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.status !== 404) {
|
||||
const errorMessage = $localize`An error occured while retrieving publications.`;
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, $localize`Close`, { duration: 5000 });
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoadingSubject.next(false);
|
||||
this.isLoadedSubject.next(true);
|
||||
});
|
||||
}
|
||||
this.#publicationRestService.search(searchCriteria)
|
||||
.then(publications => {
|
||||
this.#publications.set(publications);
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.status !== 404) {
|
||||
const errorMessage = $localize`An error occured while retrieving publications.`;
|
||||
console.error(errorMessage, error);
|
||||
this.#snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
this.#isLoading.set(false);
|
||||
this.#isLoaded.set(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,39 +1,39 @@
|
||||
<form [formGroup]="signinForm" (submit)="performSignin()" class="cod-form card" ngNativeValidate>
|
||||
<h1 i18n>Signin</h1>
|
||||
<div class="form-field">
|
||||
<mat-icon>person</mat-icon>
|
||||
<label for="pseudo" i18n>
|
||||
Pseudo
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<mat-icon>mail</mat-icon>
|
||||
<label for="email" i18n>
|
||||
Email address
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="email" id="email" formControlName="email" autocomplete="email" required />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<mat-icon>lock</mat-icon>
|
||||
<label for="password" i18n>
|
||||
Password
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="password" id="password" formControlName="password" required />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<mat-icon>lock</mat-icon>
|
||||
<label for="confirm-password" i18n>
|
||||
Confirm password
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="password" id="confirm-password" formControlName="confirmPassword" required />
|
||||
</div>
|
||||
<div class="actions reversed">
|
||||
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
|
||||
<a [routerLink]="['/login']" class="cod-button secondary" matRipple i18n>I already have an account</a>
|
||||
</div>
|
||||
<h1 i18n>Signin</h1>
|
||||
<div class="form-field">
|
||||
<mat-icon>person</mat-icon>
|
||||
<label for="pseudo" i18n>
|
||||
Pseudo
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<mat-icon>mail</mat-icon>
|
||||
<label for="email" i18n>
|
||||
Email address
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="email" id="email" formControlName="email" autocomplete="email" required/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<mat-icon>lock</mat-icon>
|
||||
<label for="password" i18n>
|
||||
Password
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="password" id="password" formControlName="password" required/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<mat-icon>lock</mat-icon>
|
||||
<label for="confirm-password" i18n>
|
||||
Confirm password
|
||||
<span class="required">*</span>
|
||||
</label>
|
||||
<input type="password" id="confirm-password" formControlName="confirmPassword" required/>
|
||||
</div>
|
||||
<div class="actions reversed">
|
||||
<app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
|
||||
<a [routerLink]="['/login']" class="cod-button secondary" matRipple i18n>I already have an account</a>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,7 +1,7 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
}
|
||||
@@ -1,26 +1,26 @@
|
||||
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
|
||||
import { SigninService } from './signin.service';
|
||||
import { LoginService } from '../login/login.service';
|
||||
import { FormError } from '../../core/model/FormError';
|
||||
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
|
||||
import { MatRippleModule } from '@angular/material/core';
|
||||
import {Component, inject, OnDestroy, OnInit} from '@angular/core';
|
||||
import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
|
||||
import {MatIconModule} from '@angular/material/icon';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {debounceTime, distinctUntilChanged, map, Subscription} from 'rxjs';
|
||||
import {SigninService} from './signin.service';
|
||||
import {LoginService} from '../login/login.service';
|
||||
import {FormError} from '../../core/model/FormError';
|
||||
import {SubmitButtonComponent} from "../../components/submit-button/submit-button.component";
|
||||
import {MatRippleModule} from '@angular/material/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-signin',
|
||||
templateUrl: './signin.component.html',
|
||||
styleUrl: './signin.component.scss',
|
||||
imports: [
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
ReactiveFormsModule,
|
||||
RouterModule,
|
||||
SubmitButtonComponent
|
||||
],
|
||||
providers: [SigninService, LoginService]
|
||||
selector: 'app-signin',
|
||||
templateUrl: './signin.component.html',
|
||||
styleUrl: './signin.component.scss',
|
||||
imports: [
|
||||
MatIconModule,
|
||||
MatRippleModule,
|
||||
ReactiveFormsModule,
|
||||
RouterModule,
|
||||
SubmitButtonComponent
|
||||
],
|
||||
providers: [SigninService, LoginService]
|
||||
})
|
||||
export class SigninComponent implements OnInit, OnDestroy {
|
||||
private signinService = inject(SigninService);
|
||||
@@ -38,56 +38,56 @@ export class SigninComponent implements OnInit, OnDestroy {
|
||||
|
||||
ngOnInit(): void {
|
||||
const pseudoSubscription = this.signinForm.controls['pseudo'].valueChanges
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
map(value => value?.length ? value as string : '')
|
||||
)
|
||||
.subscribe(pseudo => {
|
||||
this.signinService.editPseudo(pseudo);
|
||||
});
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
map(value => value?.length ? value as string : '')
|
||||
)
|
||||
.subscribe(pseudo => {
|
||||
this.signinService.editPseudo(pseudo);
|
||||
});
|
||||
this.subscriptions.push(pseudoSubscription);
|
||||
|
||||
const emailSubscription = this.signinForm.controls['email'].valueChanges
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
map(value => value?.length ? value as string : '')
|
||||
)
|
||||
.subscribe(email => {
|
||||
this.signinService.editEmail(email);
|
||||
});
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
map(value => value?.length ? value as string : '')
|
||||
)
|
||||
.subscribe(email => {
|
||||
this.signinService.editEmail(email);
|
||||
});
|
||||
this.subscriptions.push(emailSubscription);
|
||||
|
||||
const passwordSubscription = this.signinForm.controls['password'].valueChanges
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
map(value => value?.length ? value as string : '')
|
||||
)
|
||||
.subscribe(password => {
|
||||
this.signinService.editPassword(password);
|
||||
});
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
map(value => value?.length ? value as string : '')
|
||||
)
|
||||
.subscribe(password => {
|
||||
this.signinService.editPassword(password);
|
||||
});
|
||||
this.subscriptions.push(passwordSubscription);
|
||||
|
||||
const confirmPasswordSubscription = this.signinForm.controls['confirmPassword'].valueChanges
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
map(value => value?.length ? value as string : '')
|
||||
)
|
||||
.subscribe(confirmPassword => {
|
||||
this.signinService.editConfirmPassword(confirmPassword);
|
||||
});
|
||||
.pipe(
|
||||
debounceTime(300),
|
||||
distinctUntilChanged(),
|
||||
map(value => value?.length ? value as string : '')
|
||||
)
|
||||
.subscribe(confirmPassword => {
|
||||
this.signinService.editConfirmPassword(confirmPassword);
|
||||
});
|
||||
this.subscriptions.push(confirmPasswordSubscription);
|
||||
|
||||
const stateSubscription = this.signinService.state$
|
||||
.subscribe(state => {
|
||||
this.signinForm.controls['pseudo'].setValue(state.request.pseudo, { emitEvent: false });
|
||||
this.signinForm.controls['email'].setValue(state.request.email, { emitEvent: false });
|
||||
this.signinForm.controls['password'].setValue(state.request.password, { emitEvent: false });
|
||||
this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, { emitEvent: false });
|
||||
});
|
||||
.subscribe(state => {
|
||||
this.signinForm.controls['pseudo'].setValue(state.request.pseudo, {emitEvent: false});
|
||||
this.signinForm.controls['email'].setValue(state.request.email, {emitEvent: false});
|
||||
this.signinForm.controls['password'].setValue(state.request.password, {emitEvent: false});
|
||||
this.signinForm.controls['confirmPassword'].setValue(state.confirmPassword, {emitEvent: false});
|
||||
});
|
||||
this.subscriptions.push(stateSubscription);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { Injectable, inject } from '@angular/core';
|
||||
import { SigninRequest } from '../../core/rest-services/user/model/signin.model';
|
||||
import { FormError } from '../../core/model/FormError';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { copy } from '../../core/utils/ObjectUtils';
|
||||
import { UserRestService } from '../../core/rest-services/user/user.rest-service';
|
||||
import { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { Router } from '@angular/router';
|
||||
import { LoginService } from '../login/login.service';
|
||||
import {inject, Injectable} from '@angular/core';
|
||||
import {SigninRequest} from '../../core/rest-services/user/model/signin.model';
|
||||
import {FormError} from '../../core/model/FormError';
|
||||
import {BehaviorSubject, Observable} from 'rxjs';
|
||||
import {copy} from '../../core/utils/ObjectUtils';
|
||||
import {UserRestService} from '../../core/rest-services/user/user.rest-service';
|
||||
import {MatSnackBar} from '@angular/material/snack-bar';
|
||||
import {Router} from '@angular/router';
|
||||
import {LoginService} from '../login/login.service';
|
||||
|
||||
export interface SigninState {
|
||||
request: SigninRequest;
|
||||
@@ -74,12 +74,12 @@ export class SigninService {
|
||||
state.confirmPassword = newConfirmPassword;
|
||||
|
||||
if (state.request.password !== state.confirmPassword) {
|
||||
const confirmPasswordError: FormError = {
|
||||
fieldName: 'confirmPassword',
|
||||
errorMessage: $localize`Typed passwords are different.`
|
||||
}
|
||||
state.errors.filter(error => error.fieldName !== 'confirmPassword');
|
||||
state.errors.push(confirmPasswordError)
|
||||
const confirmPasswordError: FormError = {
|
||||
fieldName: 'confirmPassword',
|
||||
errorMessage: $localize`Typed passwords are different.`
|
||||
}
|
||||
state.errors.filter(error => error.fieldName !== 'confirmPassword');
|
||||
state.errors.push(confirmPasswordError)
|
||||
}
|
||||
|
||||
this.save(state);
|
||||
@@ -91,12 +91,12 @@ export class SigninService {
|
||||
// Check state is valid
|
||||
|
||||
this.userRestService
|
||||
.signin(state.request)
|
||||
.then(() => {
|
||||
this.loginService.editEmail(state.request.email!!);
|
||||
this.loginService.editPassword(state.request.password!!);
|
||||
.signin(state.request)
|
||||
.then(() => {
|
||||
this.loginService.editEmail(state.request.email!!);
|
||||
this.loginService.editPassword(state.request.password!!);
|
||||
|
||||
this.loginService.performLogin();
|
||||
})
|
||||
this.loginService.performLogin();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,43 +1,43 @@
|
||||
button.cod-button, a.cod-button {
|
||||
padding: .8em 1.2em;
|
||||
border-radius: 10em;
|
||||
border: none;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
transition: background-color .2s ease-in-out;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: .8em 1.2em;
|
||||
border-radius: 10em;
|
||||
border: none;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
transition: background-color .2s ease-in-out;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: #3f51b5;
|
||||
background-color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
cursor: pointer;
|
||||
background-color: #f2f4ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: #3f51b5;
|
||||
background-color: white;
|
||||
&.icon {
|
||||
$buttonSize: 2.5em;
|
||||
width: $buttonSize;
|
||||
height: $buttonSize;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f4ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon {
|
||||
$buttonSize: 2.5em;
|
||||
width: $buttonSize;
|
||||
height: $buttonSize;
|
||||
padding: 0;
|
||||
|
||||
&.close {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
color: black;
|
||||
}
|
||||
&.close {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.cod-button {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -1,64 +1,64 @@
|
||||
form.cod-form {
|
||||
&.card {
|
||||
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;
|
||||
&.card {
|
||||
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 {
|
||||
&.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&.reversed {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
&.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
gap: .1em;
|
||||
|
||||
div {
|
||||
&.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
mat-icon {
|
||||
position: absolute;
|
||||
top: 1.3em;
|
||||
left: .5em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
&.reversed {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
label {
|
||||
flex: 1;
|
||||
font-style: italic;
|
||||
padding-left: 1em;
|
||||
color: #777;
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
gap: .1em;
|
||||
|
||||
mat-icon {
|
||||
position: absolute;
|
||||
top: 1.3em;
|
||||
left: .5em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
background-color: #eeeeee;
|
||||
border: none;
|
||||
border-radius: 10em;
|
||||
padding: 1em 1em 1em 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -8,11 +8,11 @@
|
||||
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="./assets/css/prism.css" rel="stylesheet" />
|
||||
<link href="./assets/css/prism.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="mat-typography">
|
||||
<app-root></app-root>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
|
||||
<script type="text/javascript" src="./assets/js/prism.js"></script>
|
||||
<app-root></app-root>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
|
||||
<script type="text/javascript" src="./assets/js/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user