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

Use signals in side menu.

Browse Source
This commit is contained in:
Florian THIERRY
2024-09-25 09:19:07 +02:00
parent 3ee41cf571
commit 61ec781bbb
4 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html
View File

@@ -1,5 +1,5 @@
@for(category of categories$ | async; track category) { @for(category of categories(); track category) {
<div class="category {{category.isOpenned ? 'openned' : ''}}"> <div class="category {{category.isOpenned ? 'openned' : ''}}">
<div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)"> <div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
{{category.name}} {{category.name}}
<mat-icon>chevron_right</mat-icon> <mat-icon>chevron_right</mat-icon>

17
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts
View File

@@ -1,9 +1,10 @@
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { Component, EventEmitter, inject, OnInit, Output } from "@angular/core"; import { Component, EventEmitter, inject, OnDestroy, OnInit, Output, signal } from "@angular/core";
import { MatIconModule } from "@angular/material/icon"; import { MatIconModule } from "@angular/material/icon";
import { DisplayableCategory, SideMenuService } from "../side-menu.service"; import { DisplayableCategory, SideMenuService } from "../side-menu.service";
import { Observable } from "rxjs"; import { Observable, Subscription } from "rxjs";
import { RouterModule } from "@angular/router"; import { RouterModule } from "@angular/router";
import { Category } from "../../../core/rest-services/category/model/category";
@Component({ @Component({
selector: 'app-categories-menu', selector: 'app-categories-menu',
@@ -12,17 +13,21 @@ import { RouterModule } from "@angular/router";
templateUrl: './categories-menu.component.html', templateUrl: './categories-menu.component.html',
styleUrl: './categories-menu.component.scss' styleUrl: './categories-menu.component.scss'
}) })
export class CategoriesMenuComponent implements OnInit { export class CategoriesMenuComponent implements OnInit, OnDestroy {
private sideMenuService = inject(SideMenuService);
@Output() @Output()
categoryClicked = new EventEmitter<void>(); categoryClicked = new EventEmitter<void>();
private sideMenuService = inject(SideMenuService);
private categoriesSubscription?: Subscription;
categories = signal<DisplayableCategory[]>([]);
ngOnInit(): void { ngOnInit(): void {
this.categoriesSubscription = this.sideMenuService.categories$
.subscribe(categories => this.categories.set(categories));
this.sideMenuService.loadCategories(); this.sideMenuService.loadCategories();
} }
get categories$(): Observable<DisplayableCategory[]> { ngOnDestroy(): void {
return this.sideMenuService.categories$; this.categoriesSubscription?.unsubscribe();
} }
setOpenned(category: DisplayableCategory): void { setOpenned(category: DisplayableCategory): void {

4
frontend/src/app/components/side-menu/side-menu.component.html
View File

@@ -1,4 +1,4 @@
<div class="menu {{ isOpenned ? 'displayed' : '' }}"> <div class="menu {{ isOpenned() ? 'displayed' : '' }}">
<h1> <h1>
<a [routerLink]="['/home']"> <a [routerLink]="['/home']">
<img src="assets/images/codiki.png" alt="logo"/> <img src="assets/images/codiki.png" alt="logo"/>
@@ -11,4 +11,4 @@
<h2 i18n>Categories</h2> <h2 i18n>Categories</h2>
<app-categories-menu (categoryClicked)="close()"></app-categories-menu> <app-categories-menu (categoryClicked)="close()"></app-categories-menu>
</div> </div>
<div class="overlay {{ isOpenned ? 'displayed' : ''}}" (click)="close()"></div> <div class="overlay {{ isOpenned() ? 'displayed' : ''}}" (click)="close()"></div>

8
frontend/src/app/components/side-menu/side-menu.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, signal } from '@angular/core';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
@@ -12,13 +12,13 @@ import { CategoriesMenuComponent } from './categories-menu/categories-menu.compo
styleUrl: './side-menu.component.scss' styleUrl: './side-menu.component.scss'
}) })
export class SideMenuComponent { export class SideMenuComponent {
isOpenned: boolean = false; isOpenned = signal(false);
open(): void { open(): void {
this.isOpenned = true; this.isOpenned.set(true);
} }
close(): void { close(): void {
this.isOpenned = false; this.isOpenned.set(false);
} }
} }