add select department

client/src/app/core/layout/layout.component.html

@@ -24,7 +24,10 @@
               ></path>
             </svg>
           </button>
-          <a routerLink="/{{ current_department }}/recipes" class="flex ml-14 max-sm:hidden">
+          <a
+            routerLink="/{{ current_department }}/recipes"
+            class="flex ml-14 max-sm:hidden"
+          >
             <img
               src="assets/logo.svg"
               class="h-10 md:h-20 px-4"

client/src/app/core/layout/layout.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { DatePipe, NgFor, NgIf } from '@angular/common';
+import { DatePipe, NgFor, NgIf, NgOptimizedImage } from '@angular/common';
 import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
 import { UserService } from '../services/user.service';
 import { User } from '../models/user.model';
@@ -16,22 +16,28 @@ interface MenuItem {
   selector: 'app-layout',
   templateUrl: './layout.component.html',
   standalone: true,
-  imports: [RouterModule, NgFor, NgIf, GoogleButtonComponent, DatePipe],
+  imports: [
+    RouterModule,
+    NgFor,
+    NgIf,
+    GoogleButtonComponent,
+    DatePipe,
+    NgOptimizedImage,
+  ],
 })
 export class LayoutComponent implements OnInit, OnDestroy {
-
   current_department = this._router.snapshot.paramMap.get('department')!;
 
   menuItems: MenuItem[] = [
     {
       name: 'Recipe',
       icon_url: 'assets/icons/recipes.svg',
-      link: '/'+this.current_department+'/recipes',
+      link: '/' + this.current_department + '/recipes',
     },
     {
       name: 'Log',
       icon_url: 'assets/icons/logs.svg',
-      link: '/'+this.current_department+'/log',
+      link: '/' + this.current_department + '/log',
     },
   ];
   date = new Date();
@@ -40,8 +46,6 @@ export class LayoutComponent implements OnInit, OnDestroy {
   user: User | null = null;
   exit$ = new Subject<void>();
 
-
-
   constructor(
     private _userService: UserService,
     private _router: ActivatedRoute

client/src/app/core/services/department.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {
+  BehaviorSubject, lastValueFrom, Observable,
+} from 'rxjs';
+import {environment} from "../../../environments/environment";
+@Injectable({ providedIn: 'root' })
+export class DepartmentService {
+  private departmentSubject = new BehaviorSubject<string | null>(null);
+
+  constructor(private readonly http: HttpClient) {}
+
+  private _getDepartment(): Observable<{result: string[]}> {
+    return this.http.get<{result: string[]}>(environment.api + "/departments", {
+      withCredentials: true,
+    })
+  }
+
+  async fetchDepartment() : Promise<string[]> {
+    return lastValueFrom(this._getDepartment()).then(({result}) => result).catch(err => {throw err})
+  }
+
+  get currentDepartment(): string | null {
+    return this.departmentSubject.value
+  }
+}