From 9ccea7f635a1702942d0eb37dbd3941e6c7bd8a1 Mon Sep 17 00:00:00 2001 From: "pakintada@gmail.com" Date: Thu, 8 Feb 2024 11:26:16 +0700 Subject: [PATCH] Fix routing when notfound --- client/src/app/app-routing.module.ts | 8 +- client/src/app/app.component.ts | 8 +- client/src/app/core/notfound.component.ts | 12 +- .../material-settings.component.ts | 124 +++++++++++------- .../app/features/recipes/recipes.component.ts | 9 ++ .../features/toppings/toppings.component.ts | 18 ++- .../src/app/shared/helpers/notFoundHandler.ts | 25 ++++ 7 files changed, 152 insertions(+), 52 deletions(-) create mode 100644 client/src/app/shared/helpers/notFoundHandler.ts diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index 3289799..a4fa020 100644 --- a/client/src/app/app-routing.module.ts +++ b/client/src/app/app-routing.module.ts @@ -171,10 +171,10 @@ const routes: Routes = [ // loadComponent: () => // import('./core/notfound.component').then((m) => m.NotfoundComponent), // }, - { - path: '**', - redirectTo: 'departments', - }, + // { + // path: '**', + // redirectTo: 'departments', + // }, ]; @NgModule({ diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 34487ab..b690351 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import Lang from './shared/helpers/lang'; +import { AsyncStorage } from './shared/helpers/asyncStorage'; @Component({ selector: 'app-root', @@ -10,9 +11,14 @@ import Lang from './shared/helpers/lang'; export class AppComponent implements OnInit { constructor(private titleService: Title) {} - ngOnInit(): void { + async ngOnInit(): Promise { this.titleService.setTitle('Recipe Manager | Tao Bin'); // lang Lang.initLanguageSwitcher(); + + // set default country and filename + await AsyncStorage.setItem('currentRecipeCountry', 'Thailand'); + await AsyncStorage.setItem('currentFile', 'default'); + } } diff --git a/client/src/app/core/notfound.component.ts b/client/src/app/core/notfound.component.ts index 1f1abef..c53a42e 100644 --- a/client/src/app/core/notfound.component.ts +++ b/client/src/app/core/notfound.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { Router } from '@angular/router'; @Component({ selector: 'app-notfound', @@ -6,5 +7,14 @@ import { Component } from '@angular/core'; template: `

Not Found!!!

` }) export class NotfoundComponent { - + constructor(private router: Router) { + // do set country and filename + console.log('not found'); + this.router.navigate(['/departments']).then( + () => { + console.log('redirected'); + window.location.reload(); + } + ); + } } diff --git a/client/src/app/features/material-settings/material-settings.component.ts b/client/src/app/features/material-settings/material-settings.component.ts index fc4ffa7..e5ad2e4 100644 --- a/client/src/app/features/material-settings/material-settings.component.ts +++ b/client/src/app/features/material-settings/material-settings.component.ts @@ -1,8 +1,16 @@ import { CommonModule, NgIf } from '@angular/common'; import { Component, OnInit } from '@angular/core'; -import { FormArray, FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { + FormArray, + FormBuilder, + FormGroup, + FormsModule, + ReactiveFormsModule, +} from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; import { MaterialSetting } from 'src/app/core/models/recipe.model'; import { MaterialService } from 'src/app/core/services/material.service'; +import { NotFoundHandler } from 'src/app/shared/helpers/notFoundHandler'; import { getCategories, getMaterialType } from 'src/app/shared/helpers/recipe'; @Component({ @@ -29,18 +37,34 @@ export class MaterialSettingsComponent implements OnInit { currentFormIndex: number | undefined = undefined; // mandatory form - materialSettingForm = this.formBuilder.group({ - materialSetting: this.formBuilder.array([]), - }, { updateOn: 'blur' }); + materialSettingForm = this.formBuilder.group( + { + materialSetting: this.formBuilder.array([]), + }, + { updateOn: 'blur' } + ); + notfoundHandler = new NotFoundHandler(); + department: string = this.route.parent!.snapshot.params['department']; // getter get materialSetting() { return this.materialSettingForm.get('materialSetting') as FormArray; } - constructor(private _materialService: MaterialService, private formBuilder: FormBuilder) {} + constructor( + private _materialService: MaterialService, + private formBuilder: FormBuilder, + private _router: Router, + private route: ActivatedRoute + ) {} async ngOnInit(): Promise { + this.notfoundHandler.handleInvalidDepartment(this.department!, () => { + this._router.navigate(['departments']).then(() => { + window.location.reload(); + }); + }); + // do fetch material settings (await this._materialService.getFullMaterialDetail()).subscribe((data) => { this.allMaterials = data; @@ -66,17 +90,16 @@ export class MaterialSettingsComponent implements OnInit { this.allMaterials!.forEach((mat) => { let category = getMaterialType(mat.materialId); // try again - if(category == 'others' && mat.type.includes("true")){ - + if (category == 'others' && mat.type.includes('true')) { // extract type - let type = mat.type.split(","); - type.forEach((t)=>{ - let tt = t.split(":"); + let type = mat.type.split(','); + type.forEach((t) => { + let tt = t.split(':'); // powder:true -> powder-[0] | true-[1] - category = tt[1] == "true" ? tt[0] : category; + category = tt[1] == 'true' ? tt[0] : category; }); - if(!Object.keys(catMap).includes(category)){ + if (!Object.keys(catMap).includes(category)) { catMap[category] = []; } } else if (category == 'others') { @@ -109,8 +132,7 @@ export class MaterialSettingsComponent implements OnInit { return catList; }; - - createMaterialSettingFormGroup(mat_set: MaterialSetting){ + createMaterialSettingFormGroup(mat_set: MaterialSetting) { return this.formBuilder.group({ materialName: mat_set.materialName, materialId: mat_set.materialId, @@ -139,48 +161,60 @@ export class MaterialSettingsComponent implements OnInit { isUse: mat_set.isUse, pay_rettry_max_count: mat_set.pay_rettry_max_count, feed_mode: mat_set.feed_mode, - MaterialParameter: mat_set.MaterialParameter + MaterialParameter: mat_set.MaterialParameter, }); } // open material id modal - async openMaterialSettingModal(id: string){ + async openMaterialSettingModal(id: string) { // set current material - (await this._materialService.getMaterialSettingById(parseInt(id))).subscribe( - (data) => { - this.currentMaterialSettings = data; + ( + await this._materialService.getMaterialSettingById(parseInt(id)) + ).subscribe((data) => { + this.currentMaterialSettings = data; - // do create form, if not exist - // - find matching form - // - if not exist, create new form - let pushableFlag = false; + // do create form, if not exist + // - find matching form + // - if not exist, create new form + let pushableFlag = false; - // filter find index - let foundFormIndex = this.materialSetting.controls.findIndex((control) => { - return (control.value as any).id == id - }); - - console.log("found form index", foundFormIndex); - - if(foundFormIndex < 0){ - foundFormIndex = this.materialSetting.length - 1 < 0 ? 0 : this.materialSetting.length; - - pushableFlag = true; + // filter find index + let foundFormIndex = this.materialSetting.controls.findIndex( + (control) => { + return (control.value as any).id == id; } + ); - if(pushableFlag){ - this.materialSetting.push(this.createMaterialSettingFormGroup(data)); - console.log('push new form', this.materialSetting); - } + console.log('found form index', foundFormIndex); - // export index - this.currentFormIndex = foundFormIndex; + if (foundFormIndex < 0) { + foundFormIndex = + this.materialSetting.length - 1 < 0 ? 0 : this.materialSetting.length; - console.log('material setting', data, "at index", foundFormIndex, "current form index", this.currentFormIndex); - // console.log("keys of material settings", Object.keys(data)); - console.log('material setting', data.isUse, typeof data.isUse); - (document.getElementById("material_settings_modal_"+id) as any)!.showModal(); + pushableFlag = true; } - ); + + if (pushableFlag) { + this.materialSetting.push(this.createMaterialSettingFormGroup(data)); + console.log('push new form', this.materialSetting); + } + + // export index + this.currentFormIndex = foundFormIndex; + + console.log( + 'material setting', + data, + 'at index', + foundFormIndex, + 'current form index', + this.currentFormIndex + ); + // console.log("keys of material settings", Object.keys(data)); + console.log('material setting', data.isUse, typeof data.isUse); + (document.getElementById( + 'material_settings_modal_' + id + ) as any)!.showModal(); + }); } } diff --git a/client/src/app/features/recipes/recipes.component.ts b/client/src/app/features/recipes/recipes.component.ts index 8e0b702..f818a87 100644 --- a/client/src/app/features/recipes/recipes.component.ts +++ b/client/src/app/features/recipes/recipes.component.ts @@ -35,6 +35,7 @@ import { ToppingService } from 'src/app/core/services/topping.service'; import { copy, transformToTSV } from 'src/app/shared/helpers/copy'; import { getCountryMapSwitcher } from 'src/app/shared/helpers/recipe'; import { AsyncStorage } from 'src/app/shared/helpers/asyncStorage'; +import { NotFoundHandler } from 'src/app/shared/helpers/notFoundHandler'; @Component({ selector: 'app-recipes', @@ -95,6 +96,8 @@ export class RecipesComponent implements OnInit, OnDestroy, AfterViewInit { currentVersion: number | undefined = undefined; + notfoundHandler = new NotFoundHandler(); + @ViewChild('table', { static: false }) set content(table: ElementRef) { table.nativeElement.addEventListener( 'scroll', @@ -146,7 +149,13 @@ export class RecipesComponent implements OnInit, OnDestroy, AfterViewInit { async ngOnInit(): Promise { console.log('Trigger onInit where department = ', this.department); + // TODO: check if department is legit + this.notfoundHandler.handleInvalidDepartment(this.department!, () => { + this._router.navigate(['departments']).then( () => { + window.location.reload(); + } ); + }); this.recipesDashboard$ = this._recipeService diff --git a/client/src/app/features/toppings/toppings.component.ts b/client/src/app/features/toppings/toppings.component.ts index 001460f..4f1cf9b 100644 --- a/client/src/app/features/toppings/toppings.component.ts +++ b/client/src/app/features/toppings/toppings.component.ts @@ -14,6 +14,8 @@ import { import { NgSelectModule } from '@ng-select/ng-select'; import { forEach } from 'lodash'; import { RecipeListComponent } from '../recipes/recipe-details/recipe-list/recipe-list.component'; +import { ActivatedRoute, Router } from '@angular/router'; +import { NotFoundHandler } from 'src/app/shared/helpers/notFoundHandler'; @Component({ selector: 'app-toppings', @@ -28,6 +30,10 @@ import { RecipeListComponent } from '../recipes/recipe-details/recipe-list/recip ], }) export class ToppingsComponent implements OnInit { + + department: string = this.route.parent!.snapshot.params['department']; + notfoundHandler = new NotFoundHandler(); + onRecipeListFormChange($event: unknown[]) { console.log("recipe list form change",$event); } @@ -76,10 +82,20 @@ export class ToppingsComponent implements OnInit { private _httpClient: HttpClient, private _recipeService: RecipeService, private _toppingService: ToppingService, - private _formBuilder: FormBuilder + private _formBuilder: FormBuilder, + private route: ActivatedRoute, + private _router: Router ) {} async ngOnInit(): Promise { + + this.notfoundHandler.handleInvalidDepartment(this.department!, () => { + this._router.navigate(['departments']).then( () => { + window.location.reload(); + } ); + }); + + // initialize ( await this._toppingService.getToppingGroups( diff --git a/client/src/app/shared/helpers/notFoundHandler.ts b/client/src/app/shared/helpers/notFoundHandler.ts new file mode 100644 index 0000000..6c5587a --- /dev/null +++ b/client/src/app/shared/helpers/notFoundHandler.ts @@ -0,0 +1,25 @@ +// list all department in short name +export function departmentList() { + return [ + 'tha', + 'mys', + 'aus', + 'alpha-3' + ]; +} + + +export class NotFoundHandler { + constructor() { + // do nothing + } + + // if invalid, value is true then do callback + handleInvalidDepartment(department: string, callback: () => void) { + let checkCondition = !departmentList().includes(department); + if(checkCondition) { + callback(); + } + } + +}