update select department page

client/src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/router';
 import { UserService } from './core/services/user.service';
 import { map } from 'rxjs';
-import {UserPermissions} from "./core/auth/userPermissions";
+import { UserPermissions } from './core/auth/userPermissions';
 
 const authGuard: CanActivateFn = (
   route: ActivatedRouteSnapshot,
@@ -32,14 +32,15 @@ const authGuard: CanActivateFn = (
   );
 };
 
-const permissionsGuard: (...requiredPermissions: UserPermissions[]) => CanActivateFn = (...requiredPermissions) => (
-  route: ActivatedRouteSnapshot,
-  state: RouterStateSnapshot
-) => {
+const permissionsGuard: (
+  ...requiredPermissions: UserPermissions[]
+) => CanActivateFn =
+  (...requiredPermissions) =>
+  (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
     const userService: UserService = inject(UserService);
     const router: Router = inject(Router);
 
-  const user = userService.getCurrentUser()
+    const user = userService.getCurrentUser();
     if (user == null)
       return router.createUrlTree(['/login'], {
         queryParams: {
@@ -47,8 +48,12 @@ const permissionsGuard: (...requiredPermissions: UserPermissions[]) => CanActiva
         },
       });
 
-  if (requiredPermissions.every(permission => user.permissions.includes(permission))) {
-    return true
+    if (
+      requiredPermissions.every((permission) =>
+        user.permissions.includes(permission)
+      )
+    ) {
+      return true;
     }
 
     return router.createUrlTree(['/unauthorized'], {
@@ -56,11 +61,9 @@ const permissionsGuard: (...requiredPermissions: UserPermissions[]) => CanActiva
         redirectUrl: state.url,
       },
     });
-}
+  };
 
-const loginGuard: CanActivateFn = (
-  route: ActivatedRouteSnapshot
-) => {
+const loginGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
   const userService: UserService = inject(UserService);
   const router: Router = inject(Router);
 
@@ -72,7 +75,7 @@ const loginGuard: CanActivateFn = (
       // redirect to redirectUrl query param
       console.log(route.queryParams['redirectUrl']);
       return router.createUrlTree([
-        router.parseUrl(route.queryParams['redirectUrl'] ?? 'select-country'),
+        router.parseUrl(route.queryParams['redirectUrl'] ?? 'departments'),
       ]);
       // return false;
     })
@@ -94,9 +97,12 @@ const routes: Routes = [
       ),
   },
   {
-    path: 'select-country',
-    loadComponent: () => import('./core/department/select-country.component').then(m => m.SelectCountryComponent),
-    canActivate: [authGuard]
+    path: 'departments',
+    loadComponent: () =>
+      import('./core/department/department.component').then(
+        (m) => m.DepartmentComponent
+      ),
+    canActivate: [authGuard],
   },
   {
     path: ':department',
@@ -109,7 +115,10 @@ const routes: Routes = [
           import('./features/recipes/recipes.component').then(
             (m) => m.RecipesComponent
           ),
-        canActivate: [authGuard, permissionsGuard(UserPermissions.THAI_PERMISSION)],
+        canActivate: [
+          authGuard,
+          permissionsGuard(UserPermissions.THAI_PERMISSION),
+        ],
       },
       {
         path: 'recipe/:productCode',
@@ -117,7 +126,10 @@ const routes: Routes = [
           import(
             './features/recipes/recipe-details/recipe-details.component'
           ).then((m) => m.RecipeDetailsComponent),
-        canActivate: [authGuard, permissionsGuard(UserPermissions.THAI_PERMISSION)],
+        canActivate: [
+          authGuard,
+          permissionsGuard(UserPermissions.THAI_PERMISSION),
+        ],
       },
       // {
       //   path: 'log',
@@ -128,18 +140,22 @@ const routes: Routes = [
       // },
     ],
   },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'departments',
+  },
   {
     path: 'unauthorized',
-    loadComponent: () => import('./core/auth/unauthorized.component').then((m) => m.UnauthorizedComponent)
+    loadComponent: () =>
+      import('./core/auth/unauthorized.component').then(
+        (m) => m.UnauthorizedComponent
+      ),
   },
   {
     path: 'notfound',
-    loadComponent: () => import('./core/notfound.component').then((m) => m.NotfoundComponent)
-  },
-  {
-    path: '',
-    pathMatch: 'full',
-    redirectTo: 'select-country'
+    loadComponent: () =>
+      import('./core/notfound.component').then((m) => m.NotfoundComponent),
   },
   {
     path: '**',
@@ -151,5 +167,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
-export class AppRoutingModule {
-}
+export class AppRoutingModule {}

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

@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { Router } from '@angular/router';
+
+@Component({
+  standalone: true,
+  imports: [CommonModule, NgOptimizedImage],
+  template: `
+    <div
+      class="flex flex-row sm:flex-col gap-5 items-center justify-center h-screen bg-[#EAE6E1]"
+    >
+      <h1 class="font-bold text-amber-950 text-3xl hidden sm:block">
+        Select Product
+      </h1>
+      <div
+        class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5"
+      >
+        <button
+          *ngFor="let country of countries"
+          class="transition-transform duration-300 ease-in-out transform shadow-lg hover:scale-110 hover:shadow-xl"
+        >
+          <img
+            ngSrc="{{ country.img }}"
+            alt="{{ country.id }}"
+            width="200"
+            height="225"
+            priority="true"
+            (click)="onClick(country.id)"
+          />
+        </button>
+      </div>
+      <div
+        class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5"
+      >
+        <button
+          *ngFor="let alpha of alphas"
+          class="transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-xl"
+        >
+          <img
+            ngSrc="{{ alpha.img }}"
+            alt="{{ alpha.id }}"
+            width="200"
+            height="225"
+            priority="true"
+            (click)="onClick(alpha.id)"
+          />
+        </button>
+      </div>
+    </div>
+  `,
+})
+export class DepartmentComponent {
+  countries: { id: string; img: string }[] = [
+    {
+      id: 'tha',
+      img: 'assets/departments/tha_plate.png',
+    },
+    {
+      id: 'mys',
+      img: 'assets/departments/mys_plate.png',
+    },
+    {
+      id: 'aus',
+      img: 'assets/departments/aus_plate.png',
+    },
+  ];
+
+  alphas: { id: string; img: string }[] = [
+    {
+      id: 'alpha-3',
+      img: 'assets/departments/alpha-3.png',
+    },
+  ];
+
+  constructor(private router: Router) {}
+
+  onClick(id: string) {
+    void this.router.navigate([`/${id}/recipes`]);
+  }
+}

client/src/app/core/department/select-country.component.ts

@@ -1,44 +0,0 @@
-import { Component } from '@angular/core';
-import {CommonModule, NgOptimizedImage} from '@angular/common';
-
-@Component({
-  standalone: true,
-  imports: [CommonModule, NgOptimizedImage],
-  template: `
-      <div class="flex flex-row sm:flex-col gap-5 items-center justify-center h-screen bg-[#EAE6E1]">
-      <h1 class="font-bold text-amber-950 text-3xl hidden sm:block">Select Product</h1>
-          <div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
-              <button *ngFor="let country of countries"
-                      class="transition-transform duration-300 ease-in-out transform shadow-lg hover:scale-110 hover:shadow-xl">
-                  <img ngSrc="{{country.img}}" alt="{{country.country}}" width="200" height="225" priority="true"/>
-              </button>
-          </div>
-          <div class="flex flex-col sm:flex-row gap-10 items-center justify-center rounded border-dashed border-4 border-amber-800 p-5 ml-5 mr-5">
-              <button *ngFor="let alpha of alphas"
-                      class="transition-transform duration-300 ease-in-out transform hover:scale-110 hover:shadow-xl">
-                  <img ngSrc="{{alpha.img}}" alt="{{alpha.alphaName}}" width="200" height="225" priority="true"/>
-              </button>
-          </div>
-      </div>
-  `
-})
-export class SelectCountryComponent {
-  countries: {country: string; img: string}[] = [{
-    country: 'Thai',
-    img: 'assets/departments/tha_plate.png'
-  }, {
-    country: 'Malaysia',
-    img: 'assets/departments/mys_plate.png'
-  }, {
-    country: 'Australia',
-    img: 'assets/departments/aus_plate.png'
-  }]
-
-  alphas: {alphaName: string; img: string}[] = [
-    {
-      alphaName: 'ALPHA-3',
-      img: 'assets/departments/alpha-3.png'
-    }
-  ]
-
-}

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

@@ -1,4 +1,4 @@
-<body class="overflow-auto">
+<div class="overflow-auto">
   <nav class="fixed top-0 z-50 w-full bg-primary border-b border-gray-200">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
       <div class="flex items-center justify-between">
@@ -151,4 +151,4 @@
       <router-outlet></router-outlet>
     </div>
   </div>
-</body>
+</div>

client/src/app/features/recipes/recipes.component.html

@@ -2,7 +2,7 @@
   class="relative overflow-auto max-h-[80%] h-[88vh] shadow-md sm:rounded-lg"
   #table
 >
-  <table class="table">
+  <table class="table w-full">
     <caption class="p-5 text-lg font-semibold text-left text-gray-900">
       <div
         class="divide-y divide-solid divide-gray-400"
@@ -24,7 +24,7 @@
             </button>
             <dialog id="select_file_modal" class="modal">
               <div
-                class="modal-box max-w-[600px] overflow-visible flex flex-col justify-center items-center gap-5"
+                class="modal-box overflow-visible flex flex-col justify-center items-center gap-5"
               >
                 <h3 class="font-bold text-lg">Select Recipe File</h3>
                 <div class="flex flex-row gap-5">
@@ -34,7 +34,7 @@
                       type="search"
                       tabindex="1"
                       placeholder="Select Country"
-                      class="input input-bordered input-sm w-full max-w-xs"
+                      class="input input-bordered input-sm w-full"
                       [value]="selectedCountry"
                       (input)="setCountryFilter($event)"
                       (focus)="getRecipeCountries()"
@@ -120,9 +120,18 @@
             </form>
           </dialog> -->
 
-
-          <label for="select_savefile_modal" class="btn bg-primary btn-md border-2 text-base text-gray-700">โหลดเซฟ</label>
-          <input type="checkbox" id="select_savefile_modal" class="modal-toggle" #checkBox="ngModel" [(ngModel)]="saveTab">
+          <label
+            for="select_savefile_modal"
+            class="btn bg-primary btn-md border-2 text-base text-gray-700"
+            >โหลดเซฟ</label
+          >
+          <input
+            type="checkbox"
+            id="select_savefile_modal"
+            class="modal-toggle"
+            #checkBox="ngModel"
+            [(ngModel)]="saveTab"
+          />
           <label for="select_savefile_modal" class="modal">
             <div class="modal-box max-w-[1000px] overflow-visible">
               <p class="font-bold text-lg m-2">Saved Files</p>
@@ -133,7 +142,10 @@
                   <th>Editor</th>
                   <th>Date</th>
                 </tr>
-                <tr class="row hover:bg-secondary" *ngFor="let file of savedTmpfiles">
+                <tr
+                  class="row hover:bg-secondary"
+                  *ngFor="let file of savedTmpfiles"
+                >
                   <td>{{ file.Id }}</td>
                   <td>{{ file.Msg }}</td>
                   <td>{{ file.Editor }}</td>
@@ -141,7 +153,6 @@
                   <button class="btn bg-blue-400">Select</button>
                 </tr>
               </table>
-
             </div>
           </label>
 
@@ -159,21 +170,38 @@
             </form>
           </dialog> -->
 
-
-          <input type="checkbox" id="detect_save_noti" class="modal-toggle" #checkBox="ngModel" [(ngModel)]="showSaveNoti">
+          <input
+            type="checkbox"
+            id="detect_save_noti"
+            class="modal-toggle"
+            #checkBox="ngModel"
+            [(ngModel)]="showSaveNoti"
+          />
           <label for="detect_save_noti" class="modal">
             <div class="modal-box max-w-[580px] overflow-visible">
-              <p class="font-semibold text-lg m-2"> Found saved file(s). Want to continue editing saved file? </p>
-              <p class="font-medium text-sm m-2"> พบการบันทึกไฟล์ก่อนหน้านี้ ต้องการแก้ไขต่อจากไฟล์บันทึกหรือไม่ </p>
+              <p class="font-semibold text-lg m-2">
+                Found saved file(s). Want to continue editing saved file?
+              </p>
+              <p class="font-medium text-sm m-2">
+                พบการบันทึกไฟล์ก่อนหน้านี้ ต้องการแก้ไขต่อจากไฟล์บันทึกหรือไม่
+              </p>
               <div class="flex float-right justify-between m-2">
-                <button class="btn btn-secondary btn-square m-2" (click)="showSaveNoti=false">No</button>
-                <button class="btn btn-primary btn-square m-2" (click)="openLoadSaves()">Yes</button>
+                <button
+                  class="btn btn-secondary btn-square m-2"
+                  (click)="showSaveNoti = false"
+                >
+                  No
+                </button>
+                <button
+                  class="btn btn-primary btn-square m-2"
+                  (click)="openLoadSaves()"
+                >
+                  Yes
+                </button>
               </div>
             </div>
           </label>
 
-
-
           <div class="flex flex-col ml-auto">
             <span class=""
               >Last Updated:
@@ -236,7 +264,9 @@
                   </svg>
                   Export
                 </button>
-                <button class="btn rounded-lg"> Upgrade to {{ recipesDashboard.configNumber + 1 }}</button>
+                <button class="btn rounded-lg">
+                  Upgrade to {{ recipesDashboard.configNumber + 1 }}
+                </button>
               </div>
             </div>
           </div>