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

Fix field edition problem.

Browse Source
This commit is contained in:
Florian THIERRY
2024-10-18 10:37:31 +02:00
parent 882ffe7094
commit dae0a4b78d
2 changed files with 79 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { CommonModule, Location } from "@angular/common"; import { CommonModule, Location } from "@angular/common";
import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core"; import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms"; import { FormGroup, ReactiveFormsModule } from "@angular/forms";
import { MatDialogModule } from "@angular/material/dialog"; import { MatDialogModule } from "@angular/material/dialog";
import { MatIconModule } from "@angular/material/icon"; import { MatIconModule } from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input"; import { MatInputModule } from "@angular/material/input";
@@ -48,18 +48,13 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
publicationInEdition!: Publication; publicationInEdition!: Publication;
private readonly categoryService = inject(CategoryService); private readonly categoryService = inject(CategoryService);
private readonly formBuilder = inject(FormBuilder);
private readonly location = inject(Location); private readonly location = inject(Location);
private readonly publicationEditionService = inject(PublicationEditionService); private readonly publicationEditionService = inject(PublicationEditionService);
private subscriptions: Subscription[] = []; private subscriptions: Subscription[] = [];
publicationEditionForm: FormGroup = this.formBuilder.group({ get publicationEditionForm(): FormGroup {
title: new FormControl<string | undefined>('', [Validators.required]), return this.publicationEditionService.publicationEditionForm;
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])
});
get isLoading$(): Observable<boolean> { get isLoading$(): Observable<boolean> {
return this.publicationEditionService.isLoading$; return this.publicationEditionService.isLoading$;
@@ -92,52 +87,14 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
} }
return 0; return 0;
} }
ngOnChanges(): void { ngOnChanges(): void {
this.ngOnDestroy(); this.ngOnDestroy();
this.publicationInEdition = this.publication; if (!this.publicationInEdition || this.publicationInEdition !== this.publication) {
this.publicationEditionService.init(this.publicationInEdition); this.publicationInEdition = this.publication;
this.publicationEditionService.init(this.publicationInEdition);
['title', 'description', 'text'].forEach(fieldName => { }
const fieldSubscription = this.publicationEditionForm.controls[fieldName].valueChanges
.pipe(
map(value => value?.length ? value as string : '')
)
.subscribe(fieldValue => {
switch (fieldName) {
case 'title':
this.publicationEditionService.editTitle(fieldValue);
break;
case 'description':
this.publicationEditionService.editDescription(fieldValue);
break;
case 'text':
this.publicationEditionService.editText(fieldValue);
break;
default:
break;
}
});
this.subscriptions.push(fieldSubscription);
});
const categoryIdChangeSubscription = this.publicationEditionForm.controls['categoryId'].valueChanges
.subscribe(newCategoryId => {
this.publicationEditionService.editCategoryId(newCategoryId);
});
this.subscriptions.push(categoryIdChangeSubscription);
const publicationSubscription = this.publicationEditionService.state$.subscribe(state => {
console.log(state.publication.parsedText.substring(0, 15));
this.publicationInEdition = state.publication;
this.publicationEditionForm.controls['title'].setValue(this.publicationInEdition.title, { emitEvent: false });
this.publicationEditionForm.controls['description'].setValue(this.publicationInEdition.description, { emitEvent: false });
this.publicationEditionForm.controls['text'].setValue(this.publicationInEdition.text, { emitEvent: false });
this.publicationEditionForm.controls['illustrationId'].setValue(this.publicationInEdition.illustrationId, { emitEvent: false });
this.publicationEditionForm.controls['categoryId'].setValue(this.publicationInEdition.categoryId, { emitEvent: false });
});
this.subscriptions.push(publicationSubscription);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@@ -164,10 +121,6 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
this.publicationEditionService.displayCodeBlockDialog(); this.publicationEditionService.displayCodeBlockDialog();
} }
save(): void {
this.publicationSave.emit(this.publicationInEdition);
}
displayPictureSectionDialog(): void { displayPictureSectionDialog(): void {
this.publicationEditionService.displayPictureSectionDialog(); this.publicationEditionService.displayPictureSectionDialog();
} }
@@ -183,6 +136,10 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
} }
} }
save(): void {
this.publicationSave.emit(this.publicationEditionService.editedPublication);
}
onTabChange(tabSelectedIndex: number): void { onTabChange(tabSelectedIndex: number): void {
if (tabSelectedIndex === 1) { if (tabSelectedIndex === 1) {
this.publicationEditionService.loadPreview(); this.publicationEditionService.loadPreview();

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

@@ -3,13 +3,14 @@ import { inject, Injectable, OnDestroy } from "@angular/core";
import { MatDialog } from "@angular/material/dialog"; import { MatDialog } from "@angular/material/dialog";
import { MatSnackBar } from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import { ActivatedRoute } from "@angular/router"; import { ActivatedRoute } from "@angular/router";
import { BehaviorSubject, Observable, Subscription } from "rxjs"; import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs";
import { Publication } from "../../core/rest-services/publications/model/publication"; import { Publication } from "../../core/rest-services/publications/model/publication";
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import { copy } from "../../core/utils/ObjectUtils"; import { copy } from "../../core/utils/ObjectUtils";
import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component"; import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component"; import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview"; import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
declare let Prism: any; declare let Prism: any;
@@ -57,10 +58,11 @@ const DEFAULT_STATE: PublicationEditionState = {
@Injectable() @Injectable()
export class PublicationEditionService implements OnDestroy { export class PublicationEditionService implements OnDestroy {
private readonly activatedRoute = inject(ActivatedRoute); private readonly activatedRoute = inject(ActivatedRoute);
private readonly publicationRestService = inject(PublicationRestService);
private readonly location = inject(Location);
private readonly snackBar = inject(MatSnackBar);
private readonly dialog = inject(MatDialog); 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);
private isLoadingSubject = new BehaviorSubject<boolean>(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE)); private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
@@ -68,6 +70,14 @@ export class PublicationEditionService implements OnDestroy {
private isSavingSubject = new BehaviorSubject<boolean>(false); private isSavingSubject = new BehaviorSubject<boolean>(false);
private isPreviewingSubject = new BehaviorSubject<boolean>(false); private isPreviewingSubject = new BehaviorSubject<boolean>(false);
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 { ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription.unsubscribe()); this.subscriptions.forEach(subscription => subscription.unsubscribe());
} }
@@ -80,6 +90,17 @@ export class PublicationEditionService implements OnDestroy {
this.stateSubject.next(state); this.stateSubject.next(state);
} }
private _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$(): Observable<boolean> { get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable(); return this.isLoadingSubject.asObservable();
} }
@@ -96,6 +117,10 @@ export class PublicationEditionService implements OnDestroy {
return this.stateSubject.asObservable(); return this.stateSubject.asObservable();
} }
get editedPublication(): Publication {
return this._state.publication;
}
loadPublication(): void { loadPublication(): void {
this.isLoadingSubject.next(true); this.isLoadingSubject.next(true);
@@ -106,52 +131,47 @@ export class PublicationEditionService implements OnDestroy {
this.location.back(); this.location.back();
} else { } else {
this.publicationRestService.getById(publicationId) this.publicationRestService.getById(publicationId)
.then(publication => { .then(publication => {
const state = this._state; const state = this._state;
state.publication = publication; state.publication = publication;
this.stateSubject.next(state); this.stateSubject.next(state);
}) })
.catch(error => { .catch(error => {
const errorMessage = $localize`A technical error occurred while loading publication data.`; const errorMessage = $localize`A technical error occurred while loading publication data.`;
this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000});
console.error(errorMessage, error) console.error(errorMessage, error)
}) })
.finally(() => this.isLoadingSubject.next(false)); .finally(() => this.isLoadingSubject.next(false));
} }
}); });
} }
init(publication: Publication): void { init(publication: Publication): void {
const state = this._state; const state = this._state;
state.publication = publication; state.publication = publication;
this.stateSubject.next(state); 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);
} }
editTitle(title: string): void { private editIllustrationId(pictureId: 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);
}
editCategoryId(categoryId: string): void {
const state = this._state;
state.publication.categoryId = categoryId;
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; const state = this._state;
state.publication.illustrationId = pictureId state.publication.illustrationId = pictureId
this._save(state); this._save(state);
@@ -204,6 +224,7 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this._save(state);
this._updateForm();
} else { } else {
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`); console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
} }
@@ -233,6 +254,7 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this._save(state);
this._updateForm();
} }
insertLink(): void { insertLink(): void {
@@ -248,9 +270,10 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this._save(state);
this._updateForm();
} }
insertCodeBlock(programmingLanguage: string, codeBlock: string): void { private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
const state = this._state; const state = this._state;
const publication = state.publication; const publication = state.publication;
@@ -263,6 +286,7 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this._save(state);
this._updateForm();
} }
loadPreview(): void { loadPreview(): void {