Implementation of categoryId edition.

frontend/src/app/components/publication-edition/publication-edition.component.html

@@ -16,15 +16,22 @@
                             <mat-label>Description</mat-label>
                             <input matInput type="text" formControlName="description" />
                         </mat-form-field>
+                        <mat-form-field>
+                            <mat-label>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">
-                        @if (publication.illustrationId.length) {
+                        <img [src]="publication.illustrationId.length ? '/api/pictures/' + publication.illustrationId : '/assets/images/default-picture.png'"
-                            <img src="/api/pictures/{{publication.illustrationId}}" (click)="displayPictureSectionDialog()" matTooltip="Click to change illustration"/>
+                            (click)="displayPictureSectionDialog()"
-                        } @else {
+                            matTooltip="Click to change illustration"/>
-                            <img src="/assets/images/default-picture.png" (click)="displayPictureSectionDialog()" matTooltip="Click to change illustration"/>
-                        }
-                        
                     </div>
                 </div>
 

frontend/src/app/components/publication-edition/publication-edition.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule, Location } from "@angular/common";
-import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
+import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, OnInit, Output } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
 import { MatDialogModule } from "@angular/material/dialog";
 import { MatIconModule } from "@angular/material/icon";
@@ -7,11 +7,14 @@ import { MatInputModule } from "@angular/material/input";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatTabsModule } from "@angular/material/tabs";
 import { MatTooltipModule } from "@angular/material/tooltip";
-import { map, Observable, of, Subscription } from "rxjs";
+import { filter, map, Observable, of, Subscription } from "rxjs";
 import { Publication } from "../../core/rest-services/publications/model/publication";
 import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
 import { SubmitButtonComponent } from "../submit-button/submit-button.component";
 import { PublicationEditionService } from "./publication-edition.service";
+import { MatSelectModule } from "@angular/material/select";
+import { CategoryService } from "../../core/service/category.service";
+import { Category } from "../../core/rest-services/category/model/category";
 
 @Component({
     selector: 'app-publication-edition',
@@ -24,6 +27,7 @@ import { PublicationEditionService } from "./publication-edition.service";
         MatIconModule,
         MatInputModule,
         MatProgressSpinnerModule,
+        MatSelectModule,
         MatTabsModule,
         MatTooltipModule,
         PictureSelectionDialog,
@@ -42,6 +46,7 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
     @Output()
     publicationSave = new EventEmitter<Publication>();
 
+    private readonly categoryService = inject(CategoryService);
     private readonly formBuilder = inject(FormBuilder);
     private readonly location = inject(Location);
     private readonly publicationEditionService = inject(PublicationEditionService);
@@ -64,6 +69,30 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
         return this.publicationEditionService.isPreviewing$;
     }
 
+    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();
 
@@ -93,6 +122,12 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
             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 => {
             this.publicationInEdition = state.publication;
             this.publicationEditionForm.controls['title'].setValue(this.publication.title, { emitEvent: false });

frontend/src/app/components/publication-edition/publication-edition.service.ts

@@ -139,6 +139,12 @@ export class PublicationEditionService implements OnDestroy {
         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;

frontend/src/app/components/side-menu/side-menu.component.scss

@@ -12,7 +12,7 @@
         bottom: 0;
         transition: left .2s ease-in-out;
         width: $categoriesMenuWidth;
-        z-index: 2;
+        z-index: 3;
         padding: 1em 0;
 
         &.displayed {
@@ -77,6 +77,7 @@
         height: 100%;
         background-color: #000;
         opacity: .2;
+        z-index: 2;
 
         &.displayed {
             display: block;