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

update select department page

Browse source
This commit is contained in:
Kenta420 2023-12-12 00:23:20 +07:00
parent 872f0f2383
commit baa5382c8b
5 changed files with 325 additions and 244 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import {inject, NgModule} from '@angular/core'; import { inject, NgModule } from '@angular/core';
import { import {
ActivatedRouteSnapshot, ActivatedRouteSnapshot,
CanActivateFn, CanActivateFn,
@ -7,9 +7,9 @@ import {
RouterStateSnapshot, RouterStateSnapshot,
Routes, Routes,
} from '@angular/router'; } from '@angular/router';
import {UserService} from './core/services/user.service'; import { UserService } from './core/services/user.service';
import {map} from 'rxjs'; import { map } from 'rxjs';
import {UserPermissions} from "./core/auth/userPermissions"; import { UserPermissions } from './core/auth/userPermissions';
const authGuard: CanActivateFn = ( const authGuard: CanActivateFn = (
route: ActivatedRouteSnapshot, route: ActivatedRouteSnapshot,
@ -32,35 +32,38 @@ const authGuard: CanActivateFn = (
); );
}; };
const permissionsGuard: (...requiredPermissions: UserPermissions[]) => CanActivateFn = (...requiredPermissions) => ( const permissionsGuard: (
route: ActivatedRouteSnapshot, ...requiredPermissions: UserPermissions[]
state: RouterStateSnapshot ) => CanActivateFn =
) => { (...requiredPermissions) =>
const userService: UserService = inject(UserService); (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
const router: Router = inject(Router); const userService: UserService = inject(UserService);
const router: Router = inject(Router);
const user = userService.getCurrentUser() const user = userService.getCurrentUser();
if (user == null) if (user == null)
return router.createUrlTree(['/login'], { return router.createUrlTree(['/login'], {
queryParams: {
redirectUrl: state.url,
},
});
if (
requiredPermissions.every((permission) =>
user.permissions.includes(permission)
)
) {
return true;
}
return router.createUrlTree(['/unauthorized'], {
queryParams: { queryParams: {
redirectUrl: state.url, redirectUrl: state.url,
}, },
}); });
};
if (requiredPermissions.every(permission => user.permissions.includes(permission))) { const loginGuard: CanActivateFn = (route: ActivatedRouteSnapshot) => {
return true
}
return router.createUrlTree(['/unauthorized'], {
queryParams: {
redirectUrl: state.url,
},
});
}
const loginGuard: CanActivateFn = (
route: ActivatedRouteSnapshot
) => {
const userService: UserService = inject(UserService); const userService: UserService = inject(UserService);
const router: Router = inject(Router); const router: Router = inject(Router);
@ -72,7 +75,7 @@ const loginGuard: CanActivateFn = (
// redirect to redirectUrl query param // redirect to redirectUrl query param
console.log(route.queryParams['redirectUrl']); console.log(route.queryParams['redirectUrl']);
return router.createUrlTree([ return router.createUrlTree([
router.parseUrl(route.queryParams['redirectUrl'] ?? 'select-country'), router.parseUrl(route.queryParams['redirectUrl'] ?? 'departments'),
]); ]);
// return false; // return false;
}) })
@ -94,9 +97,12 @@ const routes: Routes = [
), ),
}, },
{ {
path: 'select-country', path: 'departments',
loadComponent: () => import('./core/department/select-country.component').then(m => m.SelectCountryComponent), loadComponent: () =>
canActivate: [authGuard] import('./core/department/department.component').then(
(m) => m.DepartmentComponent
),
canActivate: [authGuard],
}, },
{ {
path: ':department', path: ':department',
@ -109,15 +115,21 @@ const routes: Routes = [
import('./features/recipes/recipes.component').then( import('./features/recipes/recipes.component').then(
(m) => m.RecipesComponent (m) => m.RecipesComponent
), ),
canActivate: [authGuard, permissionsGuard(UserPermissions.THAI_PERMISSION)], canActivate: [
authGuard,
permissionsGuard(UserPermissions.THAI_PERMISSION),
],
}, },
{ {
path: 'recipe/:productCode', path: 'recipe/:productCode',
loadComponent: () => loadComponent: () =>
import( import(
'./features/recipes/recipe-details/recipe-details.component' './features/recipes/recipe-details/recipe-details.component'
).then((m) => m.RecipeDetailsComponent), ).then((m) => m.RecipeDetailsComponent),
canActivate: [authGuard, permissionsGuard(UserPermissions.THAI_PERMISSION)], canActivate: [
authGuard,
permissionsGuard(UserPermissions.THAI_PERMISSION),
],
}, },
// { // {
// path: 'log', // path: 'log',
@ -128,18 +140,22 @@ const routes: Routes = [
// }, // },
], ],
}, },
{
path: '',
pathMatch: 'full',
redirectTo: 'departments',
},
{ {
path: 'unauthorized', path: 'unauthorized',
loadComponent: () => import('./core/auth/unauthorized.component').then((m) => m.UnauthorizedComponent) loadComponent: () =>
import('./core/auth/unauthorized.component').then(
(m) => m.UnauthorizedComponent
),
}, },
{ {
path: 'notfound', path: 'notfound',
loadComponent: () => import('./core/notfound.component').then((m) => m.NotfoundComponent) loadComponent: () =>
}, import('./core/notfound.component').then((m) => m.NotfoundComponent),
{
path: '',
pathMatch: 'full',
redirectTo: 'select-country'
}, },
{ {
path: '**', path: '**',
@ -151,5 +167,4 @@ const routes: Routes = [
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
exports: [RouterModule], exports: [RouterModule],
}) })
export class AppRoutingModule { export class AppRoutingModule {}
}

80
client/src/app/core/department/department.component.ts Normal file
View file

@ -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`]);
}
}

44
client/src/app/core/department/select-country.component.ts
View file

@ -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'
}
]
}

278
client/src/app/core/layout/layout.component.html
View file

@ -1,154 +1,154 @@
<body class="overflow-auto"> <div class="overflow-auto">
<nav class="fixed top-0 z-50 w-full bg-primary border-b border-gray-200"> <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="px-3 py-3 lg:px-5 lg:pl-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center justify-start"> <div class="flex items-center justify-start">
<button <button
data-drawer-target="logo-sidebar" data-drawer-target="logo-sidebar"
data-drawer-toggle="logo-sidebar" data-drawer-toggle="logo-sidebar"
aria-controls="logo-sidebar" aria-controls="logo-sidebar"
type="button" 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" 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"
> >
<path <svg
clip-rule="evenodd" class="w-6 h-6"
fill-rule="evenodd" aria-hidden="true"
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" fill="currentColor"
></path> viewBox="0 0 20 20"
</svg> xmlns="http://www.w3.org/2000/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]"
> >
<span <path
class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit" clip-rule="evenodd"
> fill-rule="evenodd"
{{ date | date : "dd MMM yyyy HH:mm:ss" }} 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"
</span> ></path>
<p </svg>
class="md:hidden px-1 flex items-center text-primary font-normal font-kanit" </button>
> <a routerLink="/recipes" class="flex ml-14 max-sm:hidden">
| <img
</p> src="assets/logo.svg"
<span class="h-10 md:h-20 px-4"
class="flex items-center text-primary max-sm:text-xs sm:text-xs md:text-xl font-normal font-kanit" alt="Tao Bin Logo"
> />
{{ user?.name }} </a>
</span> </div>
</div> <div class="flex items-center">
<div class="dropdown dropdown-bottom dropdown-end"> <div class="flex items-center ml-3">
<label <div class="flex flex-row">
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 <div
tabindex="0" class="flex justify-center items-center sm:flex-row md:flex-col sm:px-5 w-[250px]"
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"> <span
<p class="text-sm text-gray-900" role="none"> class="flex items-center text-primary max-sm:text-xs sm:text-sm md:text-xl font-normal font-kanit"
{{ user?.name }} >
</p> {{ date | date : "dd MMM yyyy HH:mm:ss" }}
<p </span>
class="text-sm font-medium text-gray-900 truncate" <p
role="none" class="md:hidden px-1 flex items-center text-primary font-normal font-kanit"
> >
{{ user?.email }} |
</p> </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> </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>
</div>
<div <div
class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow" class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
id="dropdown-user" id="dropdown-user"
></div> ></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </nav>
</nav>
<aside <aside
id="logo-sidebar" 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" 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" aria-label="Sidebar"
> >
<div class="h-full px-3 pb-4 overflow-y-auto bg-primary"> <div class="h-full px-3 pb-4 overflow-y-auto bg-primary">
<ul class="space-y-2 font-medium"> <ul class="space-y-2 font-medium">
<li *ngFor="let menu of menuItems"> <li *ngFor="let menu of menuItems">
<a <a
routerLink="{{ menu.link }}" routerLink="{{ menu.link }}"
routerLinkActive="bg-gray-100 text-gray-900" routerLinkActive="bg-gray-100 text-gray-900"
class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group" class="flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group"
> >
<img <img
*ngIf="menu.icon_url" *ngIf="menu.icon_url"
class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900" class="w-5 h-5 text-gray-500 transition duration-75 group-hover:text-gray-900"
src="{{ menu.icon_url }}" src="{{ menu.icon_url }}"
alt="recipes icon" alt="recipes icon"
/> />
<span class="ml-3 capitalize font-kanit">{{ menu.name }}</span> <span class="ml-3 capitalize font-kanit">{{ menu.name }}</span>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</aside> </aside>
<div class="fixed pt-10 sm:ml-64"> <div class="fixed pt-10 sm:ml-64">
<div class="p-2 sm:mt-5 md:mt-14"> <div class="p-2 sm:mt-5 md:mt-14">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div>
</div> </div>
</div> </div>
</body>

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

@ -2,7 +2,7 @@
class="relative overflow-auto max-h-[80%] h-[88vh] shadow-md sm:rounded-lg" class="relative overflow-auto max-h-[80%] h-[88vh] shadow-md sm:rounded-lg"
#table #table
> >
<table class="table"> <table class="table w-full">
<caption class="p-5 text-lg font-semibold text-left text-gray-900"> <caption class="p-5 text-lg font-semibold text-left text-gray-900">
<div <div
class="divide-y divide-solid divide-gray-400" class="divide-y divide-solid divide-gray-400"
@ -24,7 +24,7 @@
</button> </button>
<dialog id="select_file_modal" class="modal"> <dialog id="select_file_modal" class="modal">
<div <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> <h3 class="font-bold text-lg">Select Recipe File</h3>
<div class="flex flex-row gap-5"> <div class="flex flex-row gap-5">
@ -34,7 +34,7 @@
type="search" type="search"
tabindex="1" tabindex="1"
placeholder="Select Country" placeholder="Select Country"
class="input input-bordered input-sm w-full max-w-xs" class="input input-bordered input-sm w-full"
[value]="selectedCountry" [value]="selectedCountry"
(input)="setCountryFilter($event)" (input)="setCountryFilter($event)"
(focus)="getRecipeCountries()" (focus)="getRecipeCountries()"
@ -120,20 +120,32 @@
</form> </form>
</dialog> --> </dialog> -->
<label
<label for="select_savefile_modal" class="btn bg-primary btn-md border-2 text-base text-gray-700">โหลดเซฟ</label> for="select_savefile_modal"
<input type="checkbox" id="select_savefile_modal" class="modal-toggle" #checkBox="ngModel" [(ngModel)]="saveTab"> 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"> <label for="select_savefile_modal" class="modal">
<div class="modal-box max-w-[1000px] overflow-visible"> <div class="modal-box max-w-[1000px] overflow-visible">
<p class="font-bold text-lg m-2">Saved Files</p> <p class="font-bold text-lg m-2">Saved Files</p>
<table class="table"> <table class="table">
<tr class="bg-primary "> <tr class="bg-primary">
<th>Commit ID</th> <th>Commit ID</th>
<th>Comment</th> <th>Comment</th>
<th>Editor</th> <th>Editor</th>
<th>Date</th> <th>Date</th>
</tr> </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.Id }}</td>
<td>{{ file.Msg }}</td> <td>{{ file.Msg }}</td>
<td>{{ file.Editor }}</td> <td>{{ file.Editor }}</td>
@ -141,7 +153,6 @@
<button class="btn bg-blue-400">Select</button> <button class="btn bg-blue-400">Select</button>
</tr> </tr>
</table> </table>
</div> </div>
</label> </label>
@ -159,21 +170,38 @@
</form> </form>
</dialog> --> </dialog> -->
<input
<input type="checkbox" id="detect_save_noti" class="modal-toggle" #checkBox="ngModel" [(ngModel)]="showSaveNoti"> type="checkbox"
id="detect_save_noti"
class="modal-toggle"
#checkBox="ngModel"
[(ngModel)]="showSaveNoti"
/>
<label for="detect_save_noti" class="modal"> <label for="detect_save_noti" class="modal">
<div class="modal-box max-w-[580px] overflow-visible"> <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-semibold text-lg m-2">
<p class="font-medium text-sm m-2"> พบการบันทึกไฟล์ก่อนหน้านี้ ต้องการแก้ไขต่อจากไฟล์บันทึกหรือไม่ </p> 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"> <div class="flex float-right justify-between m-2">
<button class="btn btn-secondary btn-square m-2" (click)="showSaveNoti=false">No</button> <button
<button class="btn btn-primary btn-square m-2" (click)="openLoadSaves()">Yes</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>
</div> </div>
</label> </label>
<div class="flex flex-col ml-auto"> <div class="flex flex-col ml-auto">
<span class="" <span class=""
>Last Updated: >Last Updated:
@ -236,7 +264,9 @@
</svg> </svg>
Export Export
</button> </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> </div>
</div> </div>