Fixing Angular 21 by migrating all values by signals. (#11)
Some checks failed
Build and Deploy Java Gradle Application / build-and-deploy (push) Failing after 53s
Some checks failed
Build and Deploy Java Gradle Application / build-and-deploy (push) Failing after 53s
This commit was merged in pull request #11.
This commit is contained in:
@@ -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>
|
||||
</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>
|
||||
</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
|
||||
</div>
|
||||
<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>
|
||||
<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;
|
||||
|
||||
app-publications-search-bar {
|
||||
width: 100%;
|
||||
max-width: 12em;
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
display: none;
|
||||
|
||||
@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/>
|
||||
</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/>
|
||||
</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);
|
||||
}
|
||||
}
|
||||
input[type=file] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
import { Component, inject, OnInit } 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 {MatRippleModule} from '@angular/material/core';
|
||||
import { MatTooltip } from "@angular/material/tooltip";
|
||||
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 {MatRippleModule} from '@angular/material/core';
|
||||
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>
|
||||
</form>
|
||||
</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>
|
||||
</form>
|
||||
<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);
|
||||
@@ -37,10 +37,10 @@ export class CategoriesMenuComponent implements OnInit {
|
||||
} else {
|
||||
const categoriesDivs = document.getElementsByClassName('category-header');
|
||||
Array.from(categoriesDivs)
|
||||
.map(category => category as HTMLElement)
|
||||
.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);
|
||||
}
|
||||
@@ -58,4 +58,4 @@ export class CategoriesMenuComponent implements OnInit {
|
||||
const divContent = categoryDiv?.nextElementSibling as HTMLElement;
|
||||
divContent.style.maxHeight = `${divContent.scrollHeight}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
@@ -53,7 +53,7 @@ export class SideMenuService {
|
||||
get categories$(): Observable<DisplayableCategory[]> {
|
||||
return this.categoriesSubject.asObservable();
|
||||
}
|
||||
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.isLoadingSubject.asObservable();
|
||||
}
|
||||
@@ -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>
|
||||
</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>();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user