Extract publication edition into a separated component.
This commit is contained in:
Florian THIERRY
@@ -0,0 +1,296 @@
|
||||
import { inject, Injectable, OnDestroy } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
|
||||
import { MatSnackBar } from "@angular/material/snack-bar";
|
||||
import { MatDialog } from "@angular/material/dialog";
|
||||
import { BehaviorSubject, Observable, Subscription } from "rxjs";
|
||||
import { copy } from "../../core/utils/ObjectUtils";
|
||||
import { Publication } from "../../core/rest-services/publications/model/publication";
|
||||
import { Location } from "@angular/common";
|
||||
import { PictureSelectionDialog } from "../../pages/publication-edition/picture-selection-dialog/picture-selection-dialog.component";
|
||||
import { CodeBlockDialog } from "../../pages/publication-edition/code-block-dialog/code-block-dialog.component";
|
||||
|
||||
declare let Prism: any;
|
||||
|
||||
export class CursorPosition {
|
||||
start: number;
|
||||
end: number;
|
||||
selectedCharacters: number;
|
||||
|
||||
constructor(start: number, end: number) {
|
||||
this.start = start;
|
||||
this.end = end;
|
||||
this.selectedCharacters = end - start;
|
||||
}
|
||||
}
|
||||
|
||||
export interface PublicationEditionState {
|
||||
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
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class PublicationEditionService implements OnDestroy {
|
||||
private readonly activatedRoute = inject(ActivatedRoute);
|
||||
private readonly publicationRestService = inject(PublicationRestService);
|
||||
private readonly location = inject(Location);
|
||||
private readonly router = inject(Router);
|
||||
private readonly snackBar = inject(MatSnackBar);
|
||||
private readonly dialog = inject(MatDialog);
|
||||
|
||||
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);
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.subscriptions.forEach(subscription => subscription.unsubscribe());
|
||||
}
|
||||
|
||||
private get _state(): PublicationEditionState {
|
||||
return this.stateSubject.value;
|
||||
}
|
||||
|
||||
private _save(state: PublicationEditionState): void {
|
||||
this.stateSubject.next(state);
|
||||
}
|
||||
|
||||
get isLoading$(): Observable<boolean> {
|
||||
return this.isLoadingSubject.asObservable();
|
||||
}
|
||||
|
||||
get isSaving$(): Observable<boolean> {
|
||||
return this.isSavingSubject.asObservable();
|
||||
}
|
||||
|
||||
get isPreviewing$(): Observable<boolean> {
|
||||
return this.isPreviewingSubject.asObservable();
|
||||
}
|
||||
|
||||
get state$(): Observable<PublicationEditionState> {
|
||||
return this.stateSubject.asObservable();
|
||||
}
|
||||
|
||||
loadPublication(): void {
|
||||
this.isLoadingSubject.next(true);
|
||||
|
||||
this.activatedRoute.paramMap.subscribe(params => {
|
||||
const publicationId = params.get('publicationId');
|
||||
if (publicationId == undefined) {
|
||||
this.snackBar.open('A technical error occurred while loading publication data.', '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 = 'A technical error occurred while loading publication data.';
|
||||
this.snackBar.open(errorMessage, '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);
|
||||
}
|
||||
|
||||
editTitle(title: string): void {
|
||||
const state = this._state;
|
||||
state.publication.title = title;
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
editDescription(description: string): void {
|
||||
const state = this._state;
|
||||
state.publication.description = description;
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
editText(text: string): void {
|
||||
const state = this._state;
|
||||
state.publication.text = text;
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
editIllustrationId(pictureId: string): void {
|
||||
const state = this._state;
|
||||
state.publication.illustrationId = pictureId
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
displayPictureSectionDialog(): void {
|
||||
const dialogRef = this.dialog.open(PictureSelectionDialog);
|
||||
|
||||
const afterDialogCloseSubscription = dialogRef.afterClosed()
|
||||
.subscribe(newPictureId => {
|
||||
if (newPictureId) {
|
||||
this.editIllustrationId(newPictureId);
|
||||
}
|
||||
});
|
||||
this.subscriptions.push(afterDialogCloseSubscription);
|
||||
}
|
||||
|
||||
displayCodeBlockDialog(): void {
|
||||
const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' });
|
||||
|
||||
const afterDialogCloseSubscription = dialogRef.afterClosed()
|
||||
.subscribe(codeBlockWithLanguage => {
|
||||
if (codeBlockWithLanguage) {
|
||||
this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
|
||||
}
|
||||
});
|
||||
this.subscriptions.push(afterDialogCloseSubscription);
|
||||
}
|
||||
|
||||
editCursorPosition(positionStart: number, positionEnd: number): void {
|
||||
const state = this._state;
|
||||
|
||||
state.cursorPosition.start = positionStart;
|
||||
state.cursorPosition.end = positionEnd;
|
||||
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
insertTitle(titleNumber: number): void {
|
||||
if (titleNumber >= 1 && titleNumber <= 3) {
|
||||
const state = this._state;
|
||||
|
||||
const publication = state.publication;
|
||||
|
||||
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
|
||||
const publicationTextMiddlePart = publication.text.substring(state.cursorPosition.start, state.cursorPosition.end);
|
||||
const publicationTextRightPart = publication.text.substring(state.cursorPosition.end);
|
||||
const textWithTags = `${publicationTextLeftPart}[h${titleNumber}]${publicationTextMiddlePart}[/h${titleNumber}]${publicationTextRightPart}`;
|
||||
|
||||
publication.text = textWithTags;
|
||||
|
||||
this._save(state);
|
||||
} else {
|
||||
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
|
||||
}
|
||||
}
|
||||
|
||||
selectAPicture(): void {
|
||||
const dialogRef = this.dialog.open(PictureSelectionDialog);
|
||||
|
||||
const afterDialogCloseSubscription = dialogRef.afterClosed()
|
||||
.subscribe(newPictureId => {
|
||||
if (newPictureId) {
|
||||
this.insertPicture(newPictureId);
|
||||
}
|
||||
});
|
||||
this.subscriptions.push(afterDialogCloseSubscription);
|
||||
}
|
||||
|
||||
insertPicture(pictureId: string): void {
|
||||
const state = this._state;
|
||||
|
||||
const 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}`;
|
||||
|
||||
publication.text = textWithTags;
|
||||
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
insertLink(): void {
|
||||
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}[link href="" txt="${publicationTextMiddlePart}" /]${publicationTextRightPart}`;
|
||||
|
||||
publication.text = textWithTags;
|
||||
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
|
||||
const state = this._state;
|
||||
|
||||
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}`;
|
||||
|
||||
publication.text = textWithTags;
|
||||
|
||||
this._save(state);
|
||||
}
|
||||
|
||||
save(): void {
|
||||
const state = this._state;
|
||||
|
||||
this.isSavingSubject.next(true);
|
||||
this.publicationRestService.update(state.publication)
|
||||
.then(() => {
|
||||
this.snackBar.open('Publication updated succesfully!', 'Close', { duration: 5000 });
|
||||
this.router.navigate(['/home']);
|
||||
})
|
||||
.catch(error => {
|
||||
const errorMessage = 'An error occured while saving publication modifications.';
|
||||
console.error(errorMessage, error);
|
||||
this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
|
||||
})
|
||||
.finally(() => this.isSavingSubject.next(false));
|
||||
}
|
||||
|
||||
loadPreview(): void {
|
||||
const state = this._state;
|
||||
|
||||
this.isPreviewingSubject.next(true);
|
||||
this.publicationRestService.preview(state.publication.text)
|
||||
.then(parsedText => {
|
||||
state.publication.parsedText = parsedText;
|
||||
this._save(state);
|
||||
setTimeout(() => Prism.highlightAll(), 1000);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.isPreviewingSubject.next(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user