update select department page

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

@@ -1,4 +1,4 @@
-import {inject, NgModule} from '@angular/core';
+import { inject, NgModule } from '@angular/core';
 import {
   ActivatedRouteSnapshot,
   CanActivateFn,
@@ -7,9 +7,9 @@ import {
   RouterStateSnapshot,
   Routes,
 } from '@angular/router';
-import {UserService} from './core/services/user.service';
-import {map} from 'rxjs';
-import {UserPermissions} from "./core/auth/userPermissions";
+import { UserService } from './core/services/user.service';
+import { map } from 'rxjs';
+import { UserPermissions } from './core/auth/userPermissions';
 
 const authGuard: CanActivateFn = (
   route: ActivatedRouteSnapshot,
@@ -32,35 +32,38 @@ const authGuard: CanActivateFn = (
   );
 };
 
-const permissionsGuard: (...requiredPermissions: UserPermissions[]) => CanActivateFn = (...requiredPermissions) => (
-  route: ActivatedRouteSnapshot,
-  state: RouterStateSnapshot
-) => {
-  const userService: UserService = inject(UserService);
-  const router: Router = inject(Router);
+const permissionsGuard: (
+  ...requiredPermissions: UserPermissions[]
+) => CanActivateFn =
+  (...requiredPermissions) =>
+  (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+    const userService: UserService = inject(UserService);
+    const router: Router = inject(Router);
 
-  const user = userService.getCurrentUser()
-  if (user == null)
-    return router.createUrlTree(['/login'], {
+    const user = userService.getCurrentUser();
+    if (user == null)
+      return router.createUrlTree(['/login'], {
+        queryParams: {
+          redirectUrl: state.url,
+        },
+      });
+
+    if (
+      requiredPermissions.every((permission) =>
+        user.permissions.includes(permission)
+      )
+    ) {
+      return true;
+    }
+
+    return router.createUrlTree(['/unauthorized'], {
       queryParams: {
         redirectUrl: state.url,
       },
     });
+  };
 
-  if (requiredPermissions.every(permission => user.permissions.includes(permission))) {
-    return true
-  }
-
-  return router.createUrlTree(['/unauthorized'], {
-    queryParams: {
-      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,15 +115,21 @@ 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',
         loadComponent: () =>
           import(
             './features/recipes/recipe-details/recipe-details.component'
-            ).then((m) => m.RecipeDetailsComponent),
-        canActivate: [authGuard, permissionsGuard(UserPermissions.THAI_PERMISSION)],
+          ).then((m) => m.RecipeDetailsComponent),
+        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,154 +1,154 @@
-<body 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">
-      <div class="flex items-center justify-start">
-        <button
-          data-drawer-target="logo-sidebar"
-          data-drawer-toggle="logo-sidebar"
-          aria-controls="logo-sidebar"
-          type="button"
-          class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
-        >
-          <svg
-            class="w-6 h-6"
-            aria-hidden="true"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
+<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">
+        <div class="flex items-center justify-start">
+          <button
+            data-drawer-target="logo-sidebar"
+            data-drawer-toggle="logo-sidebar"
+            aria-controls="logo-sidebar"
+            type="button"
+            class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
           >
-            <path
-              clip-rule="evenodd"
-              fill-rule="evenodd"
-              d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
-            ></path>
-          </svg>
-        </button>
-        <a routerLink="/recipes" class="flex ml-14 max-sm:hidden">
-          <img
-            src="assets/logo.svg"
-            class="h-10 md:h-20 px-4"
-            alt="Tao Bin Logo"
-          />
-        </a>
-      </div>
-      <div class="flex items-center">
-        <div class="flex items-center ml-3">
-          <div class="flex flex-row">
-            <div
-              class="flex justify-center items-center sm:flex-row md:flex-col sm:px-5 w-[250px]"
+            <svg
+              class="w-6 h-6"
+              aria-hidden="true"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <span
-                class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
-              >
-                {{ date | date : "dd MMM yyyy HH:mm:ss" }}
-              </span>
-              <p
-                class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
-              >
-                |
-              </p>
-              <span
-                class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
-              >
-                {{ user?.name }}
-              </span>
-            </div>
-            <div class="dropdown dropdown-bottom dropdown-end">
-              <label
-                tabindex="0"
-                class="btn btn-circle w-14 h-14 focus:ring ring-primary ring-offset-base-100 ring-offset-2 max-sm:hidden"
-              >
-                <div class="avatar">
-                  <div class="rounded-full">
-                    <img src="{{ user?.picture }}" alt="profile picture" />
-                  </div>
-                </div>
-              </label>
+              <path
+                clip-rule="evenodd"
+                fill-rule="evenodd"
+                d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
+              ></path>
+            </svg>
+          </button>
+          <a routerLink="/recipes" class="flex ml-14 max-sm:hidden">
+            <img
+              src="assets/logo.svg"
+              class="h-10 md:h-20 px-4"
+              alt="Tao Bin Logo"
+            />
+          </a>
+        </div>
+        <div class="flex items-center">
+          <div class="flex items-center ml-3">
+            <div class="flex flex-row">
               <div
-                tabindex="0"
-                class="dropdown-content z-[-1] menu p-2 shadow bg-base-100 rounded-box w-52 divide-y divide-gray-100"
+                class="flex justify-center items-center sm:flex-row md:flex-col sm:px-5 w-[250px]"
               >
-                <div class="px-4 py-3" role="none">
-                  <p class="text-sm text-gray-900" role="none">
-                    {{ user?.name }}
-                  </p>
-                  <p
-                    class="text-sm font-medium text-gray-900 truncate"
-                    role="none"
-                  >
-                    {{ user?.email }}
-                  </p>
+                <span
+                  class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
+                >
+                  {{ date | date : "dd MMM yyyy HH:mm:ss" }}
+                </span>
+                <p
+                  class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
+                >
+                  |
+                </p>
+                <span
+                  class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit"
+                >
+                  {{ user?.name }}
+                </span>
+              </div>
+              <div class="dropdown dropdown-bottom dropdown-end">
+                <label
+                  tabindex="0"
+                  class="btn btn-circle w-14 h-14 focus:ring ring-primary ring-offset-base-100 ring-offset-2 max-sm:hidden"
+                >
+                  <div class="avatar">
+                    <div class="rounded-full">
+                      <img src="{{ user?.picture }}" alt="profile picture" />
+                    </div>
+                  </div>
+                </label>
+                <div
+                  tabindex="0"
+                  class="dropdown-content z-[-1] menu p-2 shadow bg-base-100 rounded-box w-52 divide-y divide-gray-100"
+                >
+                  <div class="px-4 py-3" role="none">
+                    <p class="text-sm text-gray-900" role="none">
+                      {{ user?.name }}
+                    </p>
+                    <p
+                      class="text-sm font-medium text-gray-900 truncate"
+                      role="none"
+                    >
+                      {{ user?.email }}
+                    </p>
+                  </div>
+                  <ul class="py-1" role="none">
+                    <li>
+                      <a
+                        routerLink="/recipes"
+                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                        role="menuitem"
+                      >
+                        Dashboard</a
+                      >
+                    </li>
+                    <li>
+                      <a
+                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                        role="menuitem"
+                        >Settings</a
+                      >
+                    </li>
+                    <li>
+                      <a
+                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                        role="menuitem"
+                        (click)="logout()"
+                        >Sign out</a
+                      >
+                    </li>
+                  </ul>
                 </div>
-                <ul class="py-1" role="none">
-                  <li>
-                    <a
-                      routerLink="/recipes"
-                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                      role="menuitem"
-                    >
-                      Dashboard</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                      role="menuitem"
-                    >Settings</a
-                    >
-                  </li>
-                  <li>
-                    <a
-                      class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                      role="menuitem"
-                      (click)="logout()"
-                    >Sign out</a
-                    >
-                  </li>
-                </ul>
               </div>
             </div>
-          </div>
 
-          <div
-            class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
-            id="dropdown-user"
-          ></div>
+            <div
+              class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
+              id="dropdown-user"
+            ></div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</nav>
+  </nav>
 
-<aside
-  id="logo-sidebar"
-  class="fixed top-0 left-0 z-40 w-64 h-screen sm:pt-20 md:pt-28 transition-transform -translate-x-full bg-primary border-r border-gray-200 sm:translate-x-0"
-  aria-label="Sidebar"
->
-  <div class="h-full px-3 pb-4 overflow-y-auto bg-primary">
-    <ul class="space-y-2 font-medium">
-      <li *ngFor="let menu of menuItems">
-        <a
-          routerLink="{{ menu.link }}"
-          routerLinkActive="bg-gray-100 text-gray-900"
-          class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group"
-        >
-          <img
-            *ngIf="menu.icon_url"
-            class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
-            src="{{ menu.icon_url }}"
-            alt="recipes icon"
-          />
-          <span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</aside>
+  <aside
+    id="logo-sidebar"
+    class="fixed top-0 left-0 z-40 w-64 h-screen sm:pt-20 md:pt-28 transition-transform -translate-x-full bg-primary border-r border-gray-200 sm:translate-x-0"
+    aria-label="Sidebar"
+  >
+    <div class="h-full px-3 pb-4 overflow-y-auto bg-primary">
+      <ul class="space-y-2 font-medium">
+        <li *ngFor="let menu of menuItems">
+          <a
+            routerLink="{{ menu.link }}"
+            routerLinkActive="bg-gray-100 text-gray-900"
+            class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group"
+          >
+            <img
+              *ngIf="menu.icon_url"
+              class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
+              src="{{ menu.icon_url }}"
+              alt="recipes icon"
+            />
+            <span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </aside>
 
-<div class="fixed pt-10 sm:ml-64">
-  <div class="p-2 sm:mt-5 md:mt-14">
-    <router-outlet></router-outlet>
+  <div class="fixed pt-10 sm:ml-64">
+    <div class="p-2 sm:mt-5 md:mt-14">
+      <router-outlet></router-outlet>
+    </div>
   </div>
 </div>
-</body>

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,20 +120,32 @@
             </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>
               <table class="table">
-                <tr class="bg-primary ">
+                <tr class="bg-primary">
                   <th>Commit ID</th>
                   <th>Comment</th>
                   <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>