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) {
<div class="category {{category.isOpenned ? 'openned' : ''}}">
@for(category of categories(); track category) {
<div class="category {{category.isOpenned ? 'openned' : ''}}">
<div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
{{category.name}}
<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 { 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 { DisplayableCategory, SideMenuService } from "../side-menu.service";
import { Observable } from "rxjs";
import { Observable, Subscription } from "rxjs";
import { RouterModule } from "@angular/router";
import { Category } from "../../../core/rest-services/category/model/category";
@Component({
selector: 'app-categories-menu',
@@ -12,17 +13,21 @@ import { RouterModule } from "@angular/router";
templateUrl: './categories-menu.component.html',
styleUrl: './categories-menu.component.scss'
})
export class CategoriesMenuComponent implements OnInit {
private sideMenuService = inject(SideMenuService);
export class CategoriesMenuComponent implements OnInit, OnDestroy {
@Output()
categoryClicked = new EventEmitter<void>();
private sideMenuService = inject(SideMenuService);
private categoriesSubscription?: Subscription;
categories = signal<DisplayableCategory[]>([]);
ngOnInit(): void {
this.categoriesSubscription = this.sideMenuService.categories$
.subscribe(categories => this.categories.set(categories));
this.sideMenuService.loadCategories();
}
get categories$(): Observable<DisplayableCategory[]> {
return this.sideMenuService.categories$;
ngOnDestroy(): void {
this.categoriesSubscription?.unsubscribe();
}
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>
<a [routerLink]="['/home']">
<img src="assets/images/codiki.png" alt="logo"/>
@@ -11,4 +11,4 @@
<h2 i18n>Categories</h2>
<app-categories-menu (categoryClicked)="close()"></app-categories-menu>
</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 { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
@@ -12,13 +12,13 @@ import { CategoriesMenuComponent } from './categories-menu/categories-menu.compo
styleUrl: './side-menu.component.scss'
})
export class SideMenuComponent {
isOpenned: boolean = false;
isOpenned = signal(false);
open(): void {
this.isOpenned = true;
this.isOpenned.set(true);
}
close(): void {
this.isOpenned = false;
this.isOpenned.set(false);
}
}