From 36be0426f6cef0beeee688ef5eb128fea8603ff9 Mon Sep 17 00:00:00 2001 From: Kenta420 Date: Fri, 6 Oct 2023 09:11:01 +0700 Subject: [PATCH] change dashboard -> recipe --- client/src/app/app-routing.module.ts | 15 +++--- client/src/app/app.module.ts | 8 +++- .../src/app/core/layout/layout.component.html | 6 +-- .../src/app/core/layout/layout.component.ts | 6 +-- .../recipe-details.component.html | 46 ++++++++++++------- .../recipe-details.component.ts | 26 ++++++++--- .../recipes.component.html} | 0 .../recipes.component.ts} | 4 +- .../icons/{dashboard.svg => recipes.svg} | 0 9 files changed, 71 insertions(+), 40 deletions(-) rename client/src/app/features/{dashboard => recipes}/recipe-details/recipe-details.component.html (88%) rename client/src/app/features/{dashboard => recipes}/recipe-details/recipe-details.component.ts (84%) rename client/src/app/features/{dashboard/dashboard.component.html => recipes/recipes.component.html} (100%) rename client/src/app/features/{dashboard/dashboard.component.ts => recipes/recipes.component.ts} (98%) rename client/src/assets/icons/{dashboard.svg => recipes.svg} (100%) diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index deb2834..47bb4d4 100644 --- a/client/src/app/app-routing.module.ts +++ b/client/src/app/app-routing.module.ts @@ -1,6 +1,5 @@ import { NgModule, inject } from '@angular/core'; import { - ActivatedRoute, ActivatedRouteSnapshot, CanActivateFn, Router, @@ -9,7 +8,7 @@ import { Routes, } from '@angular/router'; import { UserService } from './core/services/user.service'; -import { lastValueFrom, map } from 'rxjs'; +import { map } from 'rxjs'; const authGuard: CanActivateFn = ( route: ActivatedRouteSnapshot, @@ -47,7 +46,7 @@ const loginGuard: CanActivateFn = ( // redirect to redirectUrl query param console.log(route.queryParams['redirectUrl']); return router.createUrlTree([ - router.parseUrl(route.queryParams['redirectUrl'] ?? '/dashboard'), + router.parseUrl(route.queryParams['redirectUrl'] ?? '/recipes'), ]); // return false; }) @@ -76,12 +75,12 @@ const routes: Routes = [ { path: '', pathMatch: 'full', - redirectTo: 'dashboard', + redirectTo: 'recipes', }, { - path: 'dashboard', + path: 'recipes', loadComponent: () => - import('./features/dashboard/dashboard.component').then( + import('./features/recipes/recipes.component').then( (m) => m.DashboardComponent ), canActivate: [authGuard], @@ -90,7 +89,7 @@ const routes: Routes = [ path: 'recipe/:productCode', loadComponent: () => import( - './features/dashboard/recipe-details/recipe-details.component' + './features/recipes/recipe-details/recipe-details.component' ).then((m) => m.RecipeDetailsComponent), canActivate: [authGuard], }, @@ -103,7 +102,7 @@ const routes: Routes = [ }, { path: '**', - redirectTo: 'dashboard', + redirectTo: 'recipes', }, ], }, diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index 79457d6..5fa4a81 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -5,10 +5,16 @@ import { AppRoutingModule } from './app-routing.module'; import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { ErrorInterceptor } from './core/interceptors/error.interceptor'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, AppRoutingModule, HttpClientModule], + imports: [ + BrowserModule, + AppRoutingModule, + HttpClientModule, + BrowserAnimationsModule, + ], providers: [ { provide: HTTP_INTERCEPTORS, diff --git a/client/src/app/core/layout/layout.component.html b/client/src/app/core/layout/layout.component.html index 8dc981c..12a0c8c 100644 --- a/client/src/app/core/layout/layout.component.html +++ b/client/src/app/core/layout/layout.component.html @@ -23,7 +23,7 @@ > - +
  • @@ -136,7 +136,7 @@ *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="dashboard icon" + alt="recipes icon" /> {{ menu.name }} diff --git a/client/src/app/core/layout/layout.component.ts b/client/src/app/core/layout/layout.component.ts index 1af2013..d056d90 100644 --- a/client/src/app/core/layout/layout.component.ts +++ b/client/src/app/core/layout/layout.component.ts @@ -21,9 +21,9 @@ interface MenuItem { export class LayoutComponent implements OnInit, OnDestroy { menuItems: MenuItem[] = [ { - name: 'Dashboard', - icon_url: 'assets/icons/dashboard.svg', - link: '/dashboard', + name: 'Recipe', + icon_url: 'assets/icons/recipes.svg', + link: '/recipes', }, { name: 'Log', diff --git a/client/src/app/features/dashboard/recipe-details/recipe-details.component.html b/client/src/app/features/recipes/recipe-details/recipe-details.component.html similarity index 88% rename from client/src/app/features/dashboard/recipe-details/recipe-details.component.html rename to client/src/app/features/recipes/recipe-details/recipe-details.component.html index fe2146f..3f5b5c9 100644 --- a/client/src/app/features/dashboard/recipe-details/recipe-details.component.html +++ b/client/src/app/features/recipes/recipe-details/recipe-details.component.html @@ -3,32 +3,43 @@
    -
    - กาแฟดำ(อเมริกาโน) | 12-03-0003 -
    -
    -
    -

    สูตร

    -

    กาแฟดำ(อเมริกาโน)

    +
    +
    + {{ originalRecipeDetail?.name }} | + {{ originalRecipeDetail?.productCode }} +
    +
    +
    +

    สูตร

    +

    + {{ originalRecipeDetail?.name }} +

    +
    +
    +

    ประเภท

    +

    เครื่องดื่ม

    +
    -
    -

    ประเภท

    -

    เครื่องดื่ม

    +
    +
    -
    - -
    + +
    + +
    +
    @@ -318,6 +329,7 @@ diff --git a/client/src/app/features/dashboard/recipe-details/recipe-details.component.ts b/client/src/app/features/recipes/recipe-details/recipe-details.component.ts similarity index 84% rename from client/src/app/features/dashboard/recipe-details/recipe-details.component.ts rename to client/src/app/features/recipes/recipe-details/recipe-details.component.ts index 787e634..e5401dd 100644 --- a/client/src/app/features/dashboard/recipe-details/recipe-details.component.ts +++ b/client/src/app/features/recipes/recipe-details/recipe-details.component.ts @@ -6,6 +6,8 @@ import { isEqual } from 'lodash'; import { delay } from 'rxjs'; import { RecipeService } from 'src/app/core/services/recipe.service'; import { ConfirmModal } from 'src/app/shared/modal/confirm/confirm-modal.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { animate, style, transition, trigger } from '@angular/animations'; interface RecipeDetail { productCode: string; @@ -33,6 +35,14 @@ interface RecipeMetaData { templateUrl: './recipe-details.component.html', standalone: true, imports: [NgIf, RouterLink, ReactiveFormsModule, ConfirmModal], + animations: [ + trigger('inOutAnimation', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('1s ease-out', style({ opacity: 1 })), + ]), + ]), + ], }) export class RecipeDetailsComponent implements OnInit { title: string = 'Recipe Detail'; @@ -100,7 +110,7 @@ export class RecipeDetailsComponent implements OnInit { message: 'Do you want to save changes?', confirmCallBack: () => { console.log('confirm save'); - this._router.navigate(['..']); + this._router.navigate(['/recipes']); }, }; @@ -109,23 +119,27 @@ export class RecipeDetailsComponent implements OnInit { message: 'Do you want to close without saving?', confirmCallBack: () => { console.log('confirm close'); - this._router.navigate(['..']); + this._router.navigate(['/recipes']); }, }; onPressConfirmSave() { - if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) { + if (this.isValueChanged) { this.showConfirmSaveModal.emit(true); } else { - this._router.navigate(['..']); + this._router.navigate(['/recipes']); } } onPressConfirmClose() { - if (!isEqual(this.recipeDetail.value, this.originalRecipeDetail)) { + if (this.isValueChanged) { this.showConfirmCloseModal.emit(true); } else { - this._router.navigate(['..']); + this._router.navigate(['/recipes']); } } + + get isValueChanged() { + return !isEqual(this.recipeDetail.value, this.originalRecipeDetail); + } } diff --git a/client/src/app/features/dashboard/dashboard.component.html b/client/src/app/features/recipes/recipes.component.html similarity index 100% rename from client/src/app/features/dashboard/dashboard.component.html rename to client/src/app/features/recipes/recipes.component.html diff --git a/client/src/app/features/dashboard/dashboard.component.ts b/client/src/app/features/recipes/recipes.component.ts similarity index 98% rename from client/src/app/features/dashboard/dashboard.component.ts rename to client/src/app/features/recipes/recipes.component.ts index 11d9345..9f75134 100644 --- a/client/src/app/features/dashboard/dashboard.component.ts +++ b/client/src/app/features/recipes/recipes.component.ts @@ -11,10 +11,10 @@ import * as lodash from 'lodash'; import { ActivatedRoute, Router, RouterLink } from '@angular/router'; @Component({ - selector: 'app-dashboard', + selector: 'app-recipes', standalone: true, imports: [RouterLink, NgIf, NgFor, DatePipe, RecipeModalComponent], - templateUrl: './dashboard.component.html', + templateUrl: './recipes.component.html', }) export class DashboardComponent implements OnInit { recipes: Recipe | null = null; diff --git a/client/src/assets/icons/dashboard.svg b/client/src/assets/icons/recipes.svg similarity index 100% rename from client/src/assets/icons/dashboard.svg rename to client/src/assets/icons/recipes.svg