Convert observables to signals.
This commit is contained in:
Florian THIERRY
@@ -4,34 +4,34 @@
|
||||
matTooltip="Close"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>close</mat-icon>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<header>
|
||||
<h1 i18n>Add a code block</h1>
|
||||
<h1 i18n>Add a code block</h1>
|
||||
</header>
|
||||
<form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
|
||||
<div class="form-content">
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Programming language</mat-label>
|
||||
<mat-select #programmingLanguageSelect formControlName="programmingLanguage">
|
||||
@for(programmingLanguage of programmingLanguages; track programmingLanguage) {
|
||||
<mat-option [value]="programmingLanguage.code">
|
||||
{{programmingLanguage.label}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Code block</mat-label>
|
||||
<textarea matInput formControlName="codeBlock"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="actions reversed">
|
||||
<button type="submit" class="cod-button" matRipple i18n>
|
||||
Validate
|
||||
</button>
|
||||
<button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-content">
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Programming language</mat-label>
|
||||
<mat-select #programmingLanguageSelect formControlName="programmingLanguage">
|
||||
@for (programmingLanguage of programmingLanguages; track programmingLanguage) {
|
||||
<mat-option [value]="programmingLanguage.code">
|
||||
{{ programmingLanguage.label }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label i18n>Code block</mat-label>
|
||||
<textarea matInput formControlName="codeBlock"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="actions reversed">
|
||||
<button type="submit" class="cod-button" matRipple i18n>
|
||||
Validate
|
||||
</button>
|
||||
<button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
|
||||
header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
form {
|
||||
div {
|
||||
&.form-content {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
|
||||
form {
|
||||
div {
|
||||
&.form-content {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
|
||||
textarea {
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
height: 30vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,119 +1,119 @@
|
||||
import { Component, inject } from "@angular/core";
|
||||
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
|
||||
import { MatRippleModule } from "@angular/material/core";
|
||||
import { MatDialogRef } from "@angular/material/dialog";
|
||||
import { MatFormFieldModule } from "@angular/material/form-field";
|
||||
import { MatIcon } from "@angular/material/icon";
|
||||
import { MatInputModule } from "@angular/material/input";
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTooltip } from "@angular/material/tooltip";
|
||||
import {Component, inject} from "@angular/core";
|
||||
import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||
import {MatRippleModule} from "@angular/material/core";
|
||||
import {MatDialogRef} from "@angular/material/dialog";
|
||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {MatInputModule} from "@angular/material/input";
|
||||
import {MatSelectModule} from '@angular/material/select';
|
||||
import {MatTooltip} from "@angular/material/tooltip";
|
||||
|
||||
export interface ProgramingLanguage {
|
||||
code: string;
|
||||
label: string;
|
||||
code: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
|
||||
{
|
||||
code: 'bash',
|
||||
label: 'Bash'
|
||||
},
|
||||
{
|
||||
code: 'c',
|
||||
label: 'C'
|
||||
},
|
||||
{
|
||||
code: 'cpp',
|
||||
label: 'C++'
|
||||
},
|
||||
{
|
||||
code: 'cs',
|
||||
label: 'C#'
|
||||
},
|
||||
{
|
||||
code: 'lua',
|
||||
label: 'Lua'
|
||||
},
|
||||
{
|
||||
code: 'java',
|
||||
label: 'Java'
|
||||
},
|
||||
{
|
||||
code: 'json5',
|
||||
label: 'JSON'
|
||||
},
|
||||
{
|
||||
code: 'kt',
|
||||
label: 'Kotlin'
|
||||
},
|
||||
{
|
||||
code: 'markup',
|
||||
label: 'html/xml'
|
||||
},
|
||||
{
|
||||
code: 'php',
|
||||
label: 'PHP'
|
||||
},
|
||||
{
|
||||
code: 'plsql',
|
||||
label: 'PL/SQL'
|
||||
},
|
||||
{
|
||||
code: 'python',
|
||||
label: 'Python'
|
||||
},
|
||||
{
|
||||
code: 'powershell',
|
||||
label: 'PowerShell'
|
||||
},
|
||||
{
|
||||
code: 'rust',
|
||||
label: 'Rust'
|
||||
},
|
||||
{
|
||||
code: 'sql',
|
||||
label: 'SQL'
|
||||
},
|
||||
{
|
||||
code: 'ts',
|
||||
label: 'Typescript'
|
||||
},
|
||||
{
|
||||
code: 'yml',
|
||||
label: 'YAML'
|
||||
},
|
||||
{
|
||||
code: 'bash',
|
||||
label: 'Bash'
|
||||
},
|
||||
{
|
||||
code: 'c',
|
||||
label: 'C'
|
||||
},
|
||||
{
|
||||
code: 'cpp',
|
||||
label: 'C++'
|
||||
},
|
||||
{
|
||||
code: 'cs',
|
||||
label: 'C#'
|
||||
},
|
||||
{
|
||||
code: 'lua',
|
||||
label: 'Lua'
|
||||
},
|
||||
{
|
||||
code: 'java',
|
||||
label: 'Java'
|
||||
},
|
||||
{
|
||||
code: 'json5',
|
||||
label: 'JSON'
|
||||
},
|
||||
{
|
||||
code: 'kt',
|
||||
label: 'Kotlin'
|
||||
},
|
||||
{
|
||||
code: 'markup',
|
||||
label: 'html/xml'
|
||||
},
|
||||
{
|
||||
code: 'php',
|
||||
label: 'PHP'
|
||||
},
|
||||
{
|
||||
code: 'plsql',
|
||||
label: 'PL/SQL'
|
||||
},
|
||||
{
|
||||
code: 'python',
|
||||
label: 'Python'
|
||||
},
|
||||
{
|
||||
code: 'powershell',
|
||||
label: 'PowerShell'
|
||||
},
|
||||
{
|
||||
code: 'rust',
|
||||
label: 'Rust'
|
||||
},
|
||||
{
|
||||
code: 'sql',
|
||||
label: 'SQL'
|
||||
},
|
||||
{
|
||||
code: 'ts',
|
||||
label: 'Typescript'
|
||||
},
|
||||
{
|
||||
code: 'yml',
|
||||
label: 'YAML'
|
||||
},
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: 'app-code-block-dialog',
|
||||
templateUrl: './code-block-dialog.component.html',
|
||||
styleUrl: './code-block-dialog.component.scss',
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatIcon,
|
||||
MatInputModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatTooltip,
|
||||
ReactiveFormsModule,
|
||||
]
|
||||
selector: 'app-code-block-dialog',
|
||||
templateUrl: './code-block-dialog.component.html',
|
||||
styleUrl: './code-block-dialog.component.scss',
|
||||
imports: [
|
||||
MatFormFieldModule,
|
||||
MatIcon,
|
||||
MatInputModule,
|
||||
MatRippleModule,
|
||||
MatSelectModule,
|
||||
MatTooltip,
|
||||
ReactiveFormsModule,
|
||||
]
|
||||
})
|
||||
export class CodeBlockDialog {
|
||||
private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
|
||||
private formBuilder = inject(FormBuilder);
|
||||
programmingLanguages = PROGRAMMING_LANGUAGES;
|
||||
formGroup = this.formBuilder.group({
|
||||
programmingLanguage: new FormControl('', Validators.required),
|
||||
codeBlock: new FormControl('', Validators.required)
|
||||
});
|
||||
private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
|
||||
private formBuilder = inject(FormBuilder);
|
||||
programmingLanguages = PROGRAMMING_LANGUAGES;
|
||||
formGroup = this.formBuilder.group({
|
||||
programmingLanguage: new FormControl('', Validators.required),
|
||||
codeBlock: new FormControl('', Validators.required)
|
||||
});
|
||||
|
||||
closeAndValidate(): void {
|
||||
if (this.formGroup.valid) {
|
||||
this.dialogRef.close(this.formGroup.value);
|
||||
}
|
||||
closeAndValidate(): void {
|
||||
if (this.formGroup.valid) {
|
||||
this.dialogRef.close(this.formGroup.value);
|
||||
}
|
||||
}
|
||||
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
closeDialog(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,40 +4,41 @@
|
||||
matTooltip="Close"
|
||||
matRipple
|
||||
i18n-matTooltip>
|
||||
<mat-icon>close</mat-icon>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<header>
|
||||
<h1 i18n>Select an illustration</h1>
|
||||
<h1 i18n>Select an illustration</h1>
|
||||
</header>
|
||||
<div class="picture-container">
|
||||
@if (isLoading()) {
|
||||
<h2 i18n>Pictures loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
@if (isLoading()) {
|
||||
<h2 i18n>Pictures loading...</h2>
|
||||
<mat-spinner></mat-spinner>
|
||||
} @else {
|
||||
@if (pictures.length) {
|
||||
@for (picture of pictures; track picture) {
|
||||
<img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration"
|
||||
i18n-matTooltip/>
|
||||
}
|
||||
} @else {
|
||||
@if (pictures.length) {
|
||||
@for(picture of pictures; track picture) {
|
||||
<img src="/api/pictures/{{picture.id}}" (click)="selectPicture(picture)" matTooltip="Choose this illustration" i18n-matTooltip/>
|
||||
}
|
||||
} @else {
|
||||
<h2 i18n>There is no any picture.</h2>
|
||||
}
|
||||
<h2 i18n>There is no any picture.</h2>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<footer>
|
||||
<button type="button"
|
||||
(click)="closeDialog()"
|
||||
class="cod-button secondary"
|
||||
matRipple
|
||||
i18n>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="fileUpload.click()"
|
||||
class="cod-button"
|
||||
matRipple
|
||||
i18n>
|
||||
<mat-icon>upload_file</mat-icon>
|
||||
Add new picture
|
||||
</button>
|
||||
<input type="file" (change)="uploadPicture($event)" #fileUpload/>
|
||||
<button type="button"
|
||||
(click)="closeDialog()"
|
||||
class="cod-button secondary"
|
||||
matRipple
|
||||
i18n>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
(click)="fileUpload.click()"
|
||||
class="cod-button"
|
||||
matRipple
|
||||
i18n>
|
||||
<mat-icon>upload_file</mat-icon>
|
||||
Add new picture
|
||||
</button>
|
||||
<input type="file" (change)="uploadPicture($event)" #fileUpload/>
|
||||
</footer>
|
||||
|
||||
@@ -1,83 +1,83 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
|
||||
header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1em;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.picture-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
position: relative;
|
||||
max-height: 90vh;
|
||||
max-height: 30em;
|
||||
overflow-y: auto;
|
||||
min-height: 10em;
|
||||
padding: .5em 0;
|
||||
|
||||
header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 15em;
|
||||
height: 10em;
|
||||
object-fit: cover;
|
||||
border-radius: 1em;
|
||||
opacity: .9;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
|
||||
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .32), 0 2px 10px 0 rgba(0, 0, 0, .24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
padding: .8em 1.2em;
|
||||
border-radius: 10em;
|
||||
border: none;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
transition: background-color .2s ease-in-out;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #5b6ed8;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: #3f51b5;
|
||||
background-color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #f2f4ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picture-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
max-height: 30em;
|
||||
overflow-y: auto;
|
||||
min-height: 10em;
|
||||
padding: .5em 0;
|
||||
|
||||
img {
|
||||
width: 15em;
|
||||
height: 10em;
|
||||
object-fit: cover;
|
||||
border-radius: 1em;
|
||||
opacity: .9;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
|
||||
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
|
||||
}
|
||||
}
|
||||
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, signal} from "@angular/core";
|
||||
import { Picture } from "../../../core/rest-services/picture/model/picture";
|
||||
import {Picture} from "../../../core/rest-services/picture/model/picture";
|
||||
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import { PictureRestService } from "../../../core/rest-services/picture/picture.rest-service";
|
||||
import { MatIcon } from "@angular/material/icon";
|
||||
import { MatDialogRef } from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PictureRestService} from "../../../core/rest-services/picture/picture.rest-service";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {MatDialogRef} from "@angular/material/dialog";
|
||||
import {MatRippleModule} from '@angular/material/core';
|
||||
import { MatTooltip } from "@angular/material/tooltip";
|
||||
import {MatTooltip} from "@angular/material/tooltip";
|
||||
|
||||
@Component({
|
||||
selector: 'app-picture-selection',
|
||||
templateUrl: './picture-selection-dialog.component.html',
|
||||
styleUrl: './picture-selection-dialog.component.scss',
|
||||
imports: [
|
||||
MatIcon,
|
||||
MatRippleModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatTooltip
|
||||
]
|
||||
selector: 'app-picture-selection',
|
||||
templateUrl: './picture-selection-dialog.component.html',
|
||||
styleUrl: './picture-selection-dialog.component.scss',
|
||||
imports: [
|
||||
MatIcon,
|
||||
MatRippleModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatTooltip
|
||||
]
|
||||
})
|
||||
export class PictureSelectionDialog implements OnInit {
|
||||
private readonly pictureRestService = inject(PictureRestService);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
|
||||
private readonly pictureRestService = inject(PictureRestService);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private readonly dialogRef = inject(MatDialogRef<PictureSelectionDialog>);
|
||||
|
||||
isLoading = signal(false);
|
||||
isLoaded = signal(false);
|
||||
pictures: Picture[] = [];
|
||||
isLoading = signal(false);
|
||||
isLoaded = signal(false);
|
||||
pictures: Picture[] = [];
|
||||
|
||||
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 });
|
||||
});
|
||||
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(publicationInEdition);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user