pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

still have some bug about select file

Browse source
This commit is contained in:
Kenta420 2023-10-20 17:51:07 +07:00
commit ad32fe38ea
11 changed files with 325 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/src/app/app-routing.module.ts
View file

@ -93,13 +93,13 @@ const routes: Routes = [
).then((m) => m.RecipeDetailsComponent),
canActivate: [authGuard],
},
{
path: 'log',
loadComponent: () =>
import('./features/changelog/changelog.component').then(
(m) => m.ChangelogComponent
),
},
// {
// path: 'log',
// loadComponent: () =>
// import('./features/changelog/changelog.component').then(
// (m) => m.ChangelogComponent
// ),
// },
{
path: '**',
redirectTo: 'recipes',

16
client/src/app/core/services/recipe.service.ts
View file

@ -106,4 +106,20 @@ export class RecipeService {
getRecipeFileNames(country: string): string[] {
return this.recipeFiles[country];
}
editChanges(version: string, change: any){
console.log("target version = ", version);
console.log("change in edit: ",change.value)
return this._httpClient.post<{
status: string
}>(
environment.api + ('/recipes/edit/'+version),
change.value,
{ withCredentials: true, responseType: 'json', }
).subscribe({
next(value) {
console.log(value, change.value)
},
});
}
}

12
client/src/app/features/changelog/changelog.component.html
View file

@ -94,4 +94,16 @@
<!-- Temporary remove merge tool -->
<div class="card h-full max-h-full">
<h2 class="card-title p-2">Diff</h2>
<!-- selectable version -->
<div class="card-body bg-stone-200">
<h3 class="card-title">Select Version</h3>
<div class="rela flex-row m-2" id="diff_version_select">
<input class="input input-md input-bordered m-2 bg-red-100" type="number" name="master_target" placeholder="Master Version" id="master_target">
<input class="input input-md input-bordered m-2 bg-green-100" type="number" name="target" placeholder="Target Version" id="target">
</div>
</div>
<button type="button" class="button bg-stone-400 p-2 rounded m-2 text-black font-bold" id="diff_load" (click)="addVersion()">&#43; Add Version</button>
</div>
</div>

9
client/src/app/features/changelog/changelog.component.ts
View file

@ -150,5 +150,12 @@ export class ChangelogComponent {
}
}
// Add version button
addVersion(){
let dvs = document.getElementById("diff_version_select");
dvs!.innerHTML += `<input class="input input-md input-bordered m-2 bg-green-100" type="number" name="target" placeholder="Target Version" id="target">`;
}
}

8
client/src/app/features/recipes/recipe-details/recipe-details.component.ts
View file

@ -186,6 +186,14 @@ export class RecipeDetailsComponent implements OnInit {
message: 'Do you want to save changes?',
confirmCallBack: () => {
console.log('confirm save');
// TODO: update value in targeted recipe
this._recipeService.editChanges(
this._recipeService.getCurrentVersion(),
{
...this.recipeDetail
}
);
console.log("Sending changes")
this._router.navigate(['/recipes']);
},
};

40
client/src/app/features/recipes/recipes.component.html
View file

@ -9,7 +9,7 @@
<div class="flex flex-col">
<span
>Recipe Version {{ recipes?.MachineSetting?.configNumber }} |
{{ fileName }}</span
{{ currentFile }}</span
>
</div>
<div class="flex flex-col ml-5">
@ -23,16 +23,17 @@
<div
class="modal-box max-w-[600px] overflow-visible flex flex-col justify-center items-center gap-5"
>
<h3 class="font-bold text-lg">เลือก Recipe ไฟล์</h3>
<h3 class="font-bold text-lg">Select Recipe File</h3>
<div class="flex flex-row gap-5">
<div class="dropdown dropdown-end">
<input
type="text"
tabindex="0"
placeholder="เลือก Recipe File"
placeholder="Select Country"
class="input input-bordered input-sm w-full max-w-xs"
(input)="setRecipeVersion($event)"
(focus)="getRecipeVersions()"
[value]="currentCountryFilter.getValue()"
(input)="setCountryFilter($event)"
(focus)="getRecipeCountries()"
/>
<div
class="dropdown-content z-[1000] min-w-[200px] max-h-[500px] overflow-y-auto"
@ -41,34 +42,32 @@
tabindex="0"
class="menu p-2 shadow bg-base-100 rounded-box w-auto"
>
<li *ngFor="let recipeVersion of recipeVersions">
<a (click)="loadRecipe(recipeVersion)">{{
recipeVersion
<li *ngFor="let country of recipeCountryFiltered">
<a (click)="countrySelected(country)">{{
country
}}</a>
</li>
</ul>
</div>
</div>
<div class="dropdown dropdown-end">
<div *ngIf="isCountrySelected" class="dropdown dropdown-end">
<input
type="text"
tabindex="0"
tabindex="1"
placeholder="เลือก Recipe File"
class="input input-bordered input-sm w-full max-w-xs"
(input)="setRecipeVersion($event)"
(focus)="getRecipeVersions()"
(input)="setFileFilter($event)"
(focus)="getRecipeFileCountries()"
/>
<div
class="dropdown-content z-[1000] min-w-[200px] max-h-[500px] overflow-y-auto"
>
<ul
tabindex="0"
tabindex="1"
class="menu p-2 shadow bg-base-100 rounded-box w-auto"
>
<li *ngFor="let recipeVersion of recipeVersions">
<a (click)="loadRecipe(recipeVersion)">{{
recipeVersion
}}</a>
<li *ngFor="let file of recipeFileCountries">
<a (click)="loadRecipe(file)">{{ file }}</a>
</li>
</ul>
</div>
@ -257,4 +256,11 @@
</div>
</div>
</div>
<button
class="btn btn-circle fixed z-100 bottom-5 right-1"
(click)="scrollToTop()"
>
^
</button>
</main>

143
client/src/app/features/recipes/recipes.component.ts
View file

@ -1,4 +1,10 @@
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import {
Component,
ElementRef,
OnDestroy,
OnInit,
ViewChild,
} from '@angular/core';
import { UserService } from 'src/app/core/services/user.service';
import { User } from 'src/app/core/models/user.model';
import { DatePipe, NgFor, NgIf } from '@angular/common';
@ -6,27 +12,20 @@ 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-details/recipe-modal.component';
import { BehaviorSubject } from 'rxjs';
import { BehaviorSubject, Subject, Subscriber, Subscription } from 'rxjs';
import * as lodash from 'lodash';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
interface RecipeFileFilter {
country: string | null;
fileName: string | null;
}
@Component({
selector: 'app-recipes',
standalone: true,
imports: [RouterLink, NgIf, NgFor, DatePipe, RecipeModalComponent],
templateUrl: './recipes.component.html',
})
export class DashboardComponent implements OnInit {
export class DashboardComponent implements OnInit, OnDestroy {
recipes: Recipe | null = null;
recipes01: Recipe01[] | null = null;
recipeFileCountries: string[] = [];
recipeFileNames: string[] = [];
fileName: string = '';
currentFile: string = '';
tableHeads: string[] = [
'Product Code',
@ -38,13 +37,6 @@ export class DashboardComponent implements OnInit {
private offset = 0;
private take = 20;
recipeFileFilter: BehaviorSubject<RecipeFileFilter> =
new BehaviorSubject<RecipeFileFilter>({
country: null,
fileName: null,
});
recipeFileFilter$ = this.recipeFileFilter.asObservable();
isLoaded: boolean = false;
isLoadMore: boolean = false;
isHasMore: boolean = true;
@ -52,7 +44,12 @@ export class DashboardComponent implements OnInit {
private searchStr = '';
private oldSearchStr = '';
tableCtx?: ElementRef;
@ViewChild('table', { static: false }) set content(table: ElementRef) {
// expose element ref for other fn
this.tableCtx = table;
table.nativeElement.addEventListener(
'scroll',
() => {
@ -82,7 +79,7 @@ export class DashboardComponent implements OnInit {
...recipesWithoutRecipe01,
Recipe01: [],
};
this.fileName = fileName;
this.currentFile = fileName;
this.offset += 10;
this.isLoadMore = false;
this.isHasMore = hasMore;
@ -114,23 +111,13 @@ export class DashboardComponent implements OnInit {
...recipesWithoutRecipe01,
Recipe01: [],
};
this.fileName = fileName;
this.currentFile = fileName;
this.offset += 10;
this.isLoaded = true;
this.isHasMore = hasMore;
});
this.recipeFileFilter$.subscribe((version) => {
this.recipeFileCountries = lodash.filter(
this._recipeService.getRecipeFileCountries(),
(v) => {
if (version.country) {
return v.includes(version.country);
}
return true;
}
);
});
this.initRecipeSelection();
}
setSearch(event: Event) {
@ -155,14 +142,75 @@ export class DashboardComponent implements OnInit {
...recipesWithoutRecipe01,
Recipe01: [],
};
this.fileName = fileName;
this.currentFile = fileName;
this.offset += 10;
this.isLoaded = true;
this.isHasMore = hasMore;
});
}
loadRecipe(recipeVersion: string) {
// Recipe Version selection
currentCountryFilter: BehaviorSubject<string> = new BehaviorSubject<string>(
''
);
currentFileFilter: BehaviorSubject<string> = new BehaviorSubject<string>('');
recipeCountryFiltered: string[] = [];
recipeFileCountries: string[] = [];
currentCountryFilterSubScription: Subscription | null = null;
currentFileFilterSubScription: Subscription | null = null;
selectedCountry: string | null = null;
isCountrySelected: boolean = false;
initRecipeSelection() {
if (this._recipeService.getRecipeFileCountries().length == 0) {
this._recipeService.getRecipeCountries().subscribe((countries) => {
this.recipeCountryFiltered = countries;
});
}
}
setCountryFilter(event: Event) {
this.currentCountryFilter.next((event.target as HTMLInputElement).value);
}
setFileFilter(event: Event) {
this.currentFileFilter.next((event.target as HTMLInputElement).value);
}
getRecipeCountries() {
this.currentCountryFilterSubScription = this.currentCountryFilter.subscribe(
(c) => {
const countries = this._recipeService.getRecipeFileCountries();
if (countries.length > 0) {
this.recipeFileCountries = lodash.filter(countries, (country) =>
country.includes(c)
);
}
}
);
}
getRecipeFileCountries() {
this.currentFileFilterSubScription = this.currentFileFilter.subscribe(
(c) => {
const countries = this._recipeService.getRecipeFileCountries();
if (countries.length > 0) {
this.recipeCountryFiltered = lodash.filter(countries, (country) =>
country.includes(c)
);
}
}
);
}
countrySelected(country: string) {
this.selectedCountry = country;
this.isCountrySelected = true;
}
loadRecipe(recipeFileName: string) {
// clear all recipes
this.recipes = null;
this.recipes01 = null;
@ -177,7 +225,7 @@ export class DashboardComponent implements OnInit {
offset: this.offset,
take: this.take,
search: this.oldSearchStr,
version: recipeVersion,
version: recipeFileName,
})
.subscribe(({ recipes, hasMore, fileName }) => {
const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@ -190,24 +238,14 @@ export class DashboardComponent implements OnInit {
...recipesWithoutRecipe01,
Recipe01: [],
};
this.fileName = fileName;
this.currentFile = fileName;
this.offset += 10;
this.isLoaded = true;
this.isHasMore = hasMore;
});
}
setRecipeVersion(event: Event) {
this.recipeVersion.next((event.target as HTMLInputElement).value);
}
getRecipeVersions() {
if (this.recipeVersionData.length > 0) return;
this._recipeService.getRecipeCountries().subscribe((versions) => {
this.recipeVersionData = versions;
this.recipeFileCountries = versions;
});
}
// end of Recipe Version selection
openJsonTab() {
window.open(
@ -216,4 +254,17 @@ export class DashboardComponent implements OnInit {
'_blank'
);
}
scrollToTop() {
this.tableCtx!.nativeElement.scroll;
}
ngOnDestroy(): void {
if (this.currentCountryFilterSubScription) {
this.currentCountryFilterSubScription.unsubscribe();
}
if (this.currentFileFilterSubScription) {
this.currentFileFilterSubScription.unsubscribe();
}
}
}