diff --git a/src/app/menu-items/menu-items.component.html b/src/app/menu-items/menu-items.component.html index 16441e6..566aa81 100644 --- a/src/app/menu-items/menu-items.component.html +++ b/src/app/menu-items/menu-items.component.html @@ -1,272 +1,52 @@
-
Menu Items
-
Offers
- -
- - -
-
- - +
Menu Items
+ +
+ + +
+ + +
- - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + +
Item No Item Name Item ID Item Image Item Name Preperation Time Price Availability Status
14344 8 Pc Hot & Crispy 15 Min ₹ 750 -
-
-
-
14344 8 Pc Hot & Crispy 15 Min ₹ 750 -
-
-
-
14344 8 Pc Hot & Crispy 15 Min ₹ 750 -
-
-
-
14344 8 Pc Hot & Crispy 15 Min ₹ 750 -
-
-
-
Price Type Availability Status
+ {{ item.menuitem_id }} + + + + {{ item.menu_item_name }} + + {{ item.wait_duration }} + + {{ item.item_price }} + + {{ item.is_vegetarian? 'Veg' : 'Non-Veg' }} + +
+
+
+
- - - - -
- -
diff --git a/src/app/menu-items/menu-items.component.scss b/src/app/menu-items/menu-items.component.scss index b82aebe..c61eb02 100644 --- a/src/app/menu-items/menu-items.component.scss +++ b/src/app/menu-items/menu-items.component.scss @@ -9,7 +9,7 @@ } .item-details { padding: 0 2.5%; - width: 70%; + width: 90%; height: calc(100vh - 70px); overflow: auto; margin-right: auto; @@ -42,11 +42,62 @@ /* Handle on hover */ &::-webkit-scrollbar-thumb:hover { background-color: rgba(black, 0.5); - } + } + + .toggle { + margin: 0; + } + + .item-image { + width: 50px; + height: 50px; + border-radius: 7px; + } } } .widget-heading-holder { - width: 100%; + width: 100%; + + .search-input { + display: flex; + width: 50%; + height: 40px; + border-radius: 20px; + background-color: white; + color: var(--brand-blue); + align-items: center; + justify-content: space-between; + + input { + border: 0; + font-size: 12px; + padding-left: 10px; + font-weight: 500; + color: var(--dark-grey); + flex-grow: 1; + letter-spacing: 1px; + + &::placeholder { + color: var(--grey); + } + } + + button { + border-radius: 50%; + width: 30px; + height: 30px; + color: var(--brand-blue); + font-size: 20px; + border: 1px solid var(--brand-blue); + background-color: white; + transition: background-color 0.3s, color 0.3s; + + &:hover { + background-color: var(--brand-blue); + color: white; + } + } + } } .tabs-holder { display: flex; @@ -117,11 +168,11 @@ font-weight: 500; letter-spacing: 1px; line-height: 2; - vertical-align: top; - width: calc(100% / 5); - &:nth-child(3) { - padding-left: 20px; - } + vertical-align: top; + + &:nth-child(1) { + padding-left: 10px; + } } } .subscribed-offers { diff --git a/src/app/menu-items/menu-items.component.ts b/src/app/menu-items/menu-items.component.ts index 9e17fa1..1020c23 100644 --- a/src/app/menu-items/menu-items.component.ts +++ b/src/app/menu-items/menu-items.component.ts @@ -6,12 +6,33 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./menu-items.component.scss'] }) export class MenuItemsComponent implements OnInit { - selectedTab: string = 'items'; productAvailable: boolean = false; + profile_type: string = ''; + profile_info: any; + searchTerm: string = ''; + menuItems: any = []; constructor() { } ngOnInit() { - } + this.profile_type = localStorage.current_login_type; + + if (this.profile_type === 'VENDOR') { + this.profile_info = JSON.parse(localStorage.vendor_info); + } else if (this.profile_type === 'OUTLET') { + this.profile_info = JSON.parse(localStorage.outlet_info); + } + + this.menuItems = JSON.parse(JSON.stringify(this.profile_info.menuitems)); + + } + + searchItems() { + this.menuItems = this.profile_info.menuitems.filter((item) => { + return item.menuitem_id.toString().toLowerCase().includes(this.searchTerm.toString().toLowerCase()) || + item.menu_item_name.toString().toLowerCase().includes(this.searchTerm.toString().toLowerCase()) || + item.item_price.toString().toLowerCase().includes(this.searchTerm.toString().toLowerCase()); + }); + } } diff --git a/src/app/orders/orders.component.scss b/src/app/orders/orders.component.scss index 6b6f3b0..c05859e 100644 --- a/src/app/orders/orders.component.scss +++ b/src/app/orders/orders.component.scss @@ -14,11 +14,11 @@ .selector-container { display: flex; - flex-grow: 1; + flex-grow: 1; .selector { margin: 0 10px; - flex-grow: 1; + flex-grow: 1; @media screen and (max-width: 1023px) { margin: 0; @@ -36,7 +36,7 @@ .search-input { display: flex; flex-grow: 1; - height: 30px; + height: 40px; border-radius: 20px; background-color: white; color: var(--brand-blue); diff --git a/src/app/widgets-holder/widgets-holder.component.ts b/src/app/widgets-holder/widgets-holder.component.ts index 236a2c3..73f9752 100644 --- a/src/app/widgets-holder/widgets-holder.component.ts +++ b/src/app/widgets-holder/widgets-holder.component.ts @@ -44,9 +44,6 @@ export class WidgetsHolderComponent implements OnInit { } else { this.router.navigate(['/login']); } - - console.log(this.profile_info); - } logout() { diff --git a/src/styles.scss b/src/styles.scss index 6d5b0e1..84769af 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -193,7 +193,8 @@ button { color: var(--brand-blue); align-items: center; justify-content: space-between; - position: relative; + position: relative; + height: 40px; .selected-value { font-weight: 500;