Merge branch 'main' of https://github.com/Poomipat-Ch/taobin_recipe_manager

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

@@ -34,11 +34,13 @@
       <div class="flex items-center">
         <div class="flex items-center ml-3">
           <div class="flex flex-row">
-            <div class="flex justify-center sm:flex-row md:flex-col sm:px-5">
+            <div
+              class="flex justify-center items-center sm:flex-row md:flex-col sm:px-5 w-[250px]"
+            >
               <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" }}
+                {{ date | date : "dd MMM yyyy HH:mm:ss" }}
               </span>
               <p
                 class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"

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

@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
 import { UserService } from '../services/user.service';
 import { User } from '../models/user.model';
-import { Subject, takeUntil } from 'rxjs';
+import { Subject, Subscription, map, share, takeUntil, timer } from 'rxjs';
 
 interface MenuItem {
   name: string;
@@ -18,7 +18,7 @@ interface MenuItem {
   standalone: true,
   imports: [RouterModule, NgFor, NgIf, GoogleButtonComponent, DatePipe],
 })
-export class LayoutComponent implements OnInit {
+export class LayoutComponent implements OnInit, OnDestroy {
   menuItems: MenuItem[] = [
     {
       name: 'Dashboard',
@@ -32,6 +32,7 @@ export class LayoutComponent implements OnInit {
     },
   ];
   date = new Date();
+  clockSubscription: Subscription | null = null;
   isMenuOpen: boolean = false;
   user: User | null = null;
   exit$ = new Subject<void>();
@@ -42,6 +43,21 @@ export class LayoutComponent implements OnInit {
     this._userService.currentUser
       .pipe(takeUntil(this.exit$))
       .subscribe((user) => (this.user = user));
+
+    this.clockSubscription = timer(0, 1000)
+      .pipe(
+        map(() => new Date()),
+        share()
+      )
+      .subscribe((time) => {
+        this.date = time;
+      });
+  }
+
+  ngOnDestroy() {
+    this.exit$.next();
+    this.exit$.complete();
+    this.clockSubscription?.unsubscribe();
   }
 
   logout() {

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

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, Observable, distinctUntilChanged, tap } from 'rxjs';
 import { Recipe, Recipe01 } from '../models/recipe.model';
 import { environment } from 'src/environments/environment';
 
@@ -20,27 +20,44 @@ export class RecipeService {
       take: 10,
       offset: 0,
       search: '',
-      version: 'coffeethai02_580.json',
+      version: this.getCurrentVersion(),
     }
   ): Observable<{
     fileName: string;
     recipes: Recipe;
     hasMore: boolean;
   }> {
-    return this._httpClient.get<{
-      fileName: string;
-      recipes: Recipe;
-      hasMore: boolean;
-    }>(environment.api + '/recipes', {
-      params: {
-        offset: params.offset,
-        take: params.take,
-        search: params.search,
-        version: params.version,
-      },
-      withCredentials: true,
-      responseType: 'json',
-    });
+    return this._httpClient
+      .get<{
+        fileName: string;
+        recipes: Recipe;
+        hasMore: boolean;
+      }>(environment.api + '/recipes', {
+        params: {
+          offset: params.offset,
+          take: params.take,
+          search: params.search,
+          version: params.version,
+        },
+        withCredentials: true,
+        responseType: 'json',
+      })
+      .pipe(
+        tap((data) => {
+          if (data.fileName !== this.getCurrentVersion()) {
+            localStorage.setItem('currentRecipeVersion', data.fileName);
+          }
+        })
+      );
+  }
+
+  getCurrentVersion(): string {
+    const currentRecipeVersion = localStorage.getItem('currentRecipeVersion');
+    if (currentRecipeVersion) {
+      return currentRecipeVersion;
+    }
+
+    return 'coffeethai02_580.json';
   }
 
   getRecipesById(id: string): Observable<Recipe01> {

client/src/app/features/dashboard/dashboard.component.ts

@@ -5,7 +5,7 @@ import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { environment } from 'src/environments/environment';
-import { RecipeModalComponent } from 'src/app/shared/modal/recipe-modal.component';
+import { RecipeModalComponent } from 'src/app/shared/modal/recipe-details/recipe-modal.component';
 import { BehaviorSubject } from 'rxjs';
 import * as lodash from 'lodash';
 
@@ -32,7 +32,6 @@ export class DashboardComponent implements OnInit {
   private offset = 0;
   private take = 20;
   private recipeVersionData: string[] = [];
-  private currentRecipeVersion: string = 'coffeethai02_580.json';
 
   recipeVersion: BehaviorSubject<string> = new BehaviorSubject<string>('');
   recipeVersion$ = this.recipeVersion.asObservable();
@@ -61,7 +60,7 @@ export class DashboardComponent implements OnInit {
               offset: this.offset,
               take: this.take,
               search: this.oldSearchStr,
-              version: this.currentRecipeVersion,
+              version: this._recipeService.getCurrentVersion(),
             })
             .subscribe(({ recipes, hasMore, fileName }) => {
               const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -100,7 +99,7 @@ export class DashboardComponent implements OnInit {
         offset: this.offset,
         take: this.take,
         search: this.oldSearchStr,
-        version: this.currentRecipeVersion,
+        version: this._recipeService.getCurrentVersion(),
       })
       .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -139,7 +138,7 @@ export class DashboardComponent implements OnInit {
         offset: this.offset,
         take: this.take,
         search: this.searchStr,
-        version: this.currentRecipeVersion,
+        version: this._recipeService.getCurrentVersion(),
       })
       .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -165,7 +164,6 @@ export class DashboardComponent implements OnInit {
     this.isHasMore = true;
     this.isLoadMore = false;
     this.oldSearchStr = '';
-    this.currentRecipeVersion = recipeVersion;
 
     this._recipeService
       .getRecipes({
@@ -206,7 +204,8 @@ export class DashboardComponent implements OnInit {
 
   openJsonTab() {
     window.open(
-      environment.api + `/recipes/${this.currentRecipeVersion}/json`,
+      environment.api +
+        `/recipes/${this._recipeService.getCurrentVersion()}/json`,
       '_blank'
     );
   }

client/src/app/shared/modal/confirm/confirm-modal.component.ts

@@ -0,0 +1,57 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'confirm-modal',
+  template: `<dialog class="modal" #confirmModal>
+    <div class="modal-box w-3/4">
+      <h3 class="font-bold text-2xl mb-3">{{ title }}</h3>
+      <p class="text-md">{{ message }}</p>
+      <div class="modal-action">
+        <div class="modal-action">
+          <a class="btn px-10" (click)="confirmCallBack(); close()">Yes</a>
+          <a class="btn" (click)="close()">No</a>
+        </div>
+      </div>
+    </div>
+  </dialog>`,
+  standalone: true,
+})
+export class ConfirmModal implements OnInit {
+  @Input() show: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Input() title: string = 'Confirm Dialog';
+  @Input() message: string =
+    'This is Confirm Modal. You can change message by using message input';
+  @Input() confirmCallBack: () => void = () => {};
+
+  private confirmModal: ElementRef<HTMLDialogElement> | null = null;
+
+  @ViewChild('confirmModal', { static: false }) set setConfirmModal(
+    modal: ElementRef
+  ) {
+    this.confirmModal = modal;
+  }
+
+  constructor() {}
+
+  ngOnInit() {
+    this.show.subscribe((show) => {
+      if (show) {
+        this.confirmModal?.nativeElement.showModal();
+      } else {
+        this.confirmModal?.nativeElement.close();
+      }
+    });
+  }
+
+  close() {
+    this.confirmModal?.nativeElement.close();
+  }
+}

client/src/app/shared/modal/recipe-details/recipe-modal.component.html

@@ -97,23 +97,22 @@
           </div>
         </div>
         <div class="modal-action">
-          <a class="btn px-10" (click)="save()">Save</a>
-          <a class="btn" (click)="close()">Close</a>
+          <a class="btn px-10" (click)="onConfirmSave()">Save</a>
+          <a class="btn" (click)="onConfirmClose()">Close</a>
         </div>
-      </form>
-    </div>
-  </div>
-</dialog>
+        <confirm-modal
+          [title]="confirmSave.title"
+          [message]="confirmSave.message"
+          [confirmCallBack]="confirmSave.confirmCallBack"
+          [show]="showConfirmSaveModal"
+        ></confirm-modal>
 
-<dialog class="modal" #confirmModal>
-  <div class="modal-box w-11/12 max-w-5xl">
-    <h3 class="font-bold text-lg mb-3">Confirm Dialog</h3>
-    <p>Are you sure you want to delete this recipe?</p>
-    <div class="modal-action">
-      <button type="submit" class="btn btn-success">Confirm</button>
-      <form method="dialog">
-        <!-- if there is a button, it will close the modal -->
-        <button class="btn btn-error">Close</button>
+        <confirm-modal
+          [title]="confirmClose.title"
+          [message]="confirmClose.message"
+          [confirmCallBack]="confirmClose.confirmCallBack"
+          [show]="showConfirmCloseModal"
+        ></confirm-modal>
       </form>
     </div>
   </div>

client/src/app/shared/modal/recipe-details/recipe-modal.component.ts

@@ -1,7 +1,14 @@
-import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  ViewChild,
+} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { isEqual } from 'lodash';
 import { RecipeService } from 'src/app/core/services/recipe.service';
+import { ConfirmModal } from '../confirm/confirm-modal.component';
 
 interface RecipeDetail {
   productCode: string;
@@ -18,7 +25,7 @@ interface RecipeDetail {
 @Component({
   selector: 'recipe-modal',
   templateUrl: './recipe-modal.component.html',
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, ConfirmModal],
   standalone: true,
 })
 export class RecipeModalComponent {
@@ -48,14 +55,6 @@ export class RecipeModalComponent {
     this.detailModal = modal;
   }
 
-  private confirmModal: ElementRef<HTMLDialogElement> | null = null;
-
-  @ViewChild('confirmModal', { static: false }) set setConfirmModal(
-    modal: ElementRef
-  ) {
-    this.confirmModal = modal;
-  }
-
   constructor(private recipeService: RecipeService) {}
 
   openModal() {
@@ -93,14 +92,38 @@ export class RecipeModalComponent {
     }
   }
 
-  save() {
-    console.log(this.recipeDetail.value);
-    this.detailModal?.nativeElement.close();
+  showConfirmSaveModal: EventEmitter<boolean> = new EventEmitter<boolean>();
+  showConfirmCloseModal: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  confirmSave = {
+    title: 'The changes detected!',
+    message: 'Do you want to save changes?',
+    confirmCallBack: () => {
+      console.log('confirm save');
+      this.detailModal?.nativeElement.close();
+    },
+  };
+
+  confirmClose = {
+    title: 'The changes will be lost!',
+    message: 'Do you want to close without saving?',
+    confirmCallBack: () => {
+      console.log('confirm close');
+      this.detailModal?.nativeElement.close();
+    },
+  };
+
+  onConfirmSave() {
+    if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
+      this.showConfirmSaveModal.emit(true);
+    } else {
+      this.detailModal?.nativeElement.close();
+    }
   }
 
-  close() {
+  onConfirmClose() {
     if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) {
-      this.confirmModal?.nativeElement.showModal();
+      this.showConfirmCloseModal.emit(true);
     } else {
       this.detailModal?.nativeElement.close();
     }