vendor-app/src/app/menu-items/menu-items.component.html

<div class="container">
	<section class="item-details">
		<div class="widget-heading-holder">
			<header> Menu Items </header>
			            
            <div class="search-input">
                <input type="text" placeholder="Quick Search: Name, ID, Price" [(ngModel)]="searchTerm" (input)="searchItems()">
                <button> <i class="icon ion-md-search"></i> </button>
            </div>
        </div>        

		<table class="item-table">
			<tr>
                <th> Item ID </th>
                <th> Item Image </th>
                <th> Item Name </th>                
				<th> Preperation Time </th>
                <th> Price </th>
                <th> Type </th>
                <th> Availability Status </th>                
            </tr>
            
            <tr *ngFor="let item of menuItems">
                <td>
                    {{ item.menuitem_id }}
                </td>
                <td>
                    <img [src]="item.image_url" class="item-image">
                </td>
                <td>
                    {{ item.menu_item_name }}
                </td>                
                <td>
                    {{ item.wait_duration }}
                </td>
                <td>
                    {{ item.item_price }}
                </td>                
                <td>
                    {{ item.is_vegetarian? 'Veg' : 'Non-Veg' }}
                </td>
                <td>
                    <div class="toggle" [ngClass]="{'on' : item.is_available }"
                        (click)="item.is_available = !item.is_available; updateItem(item)">
                        <div class="knob"></div>
                    </div>
                </td>
            </tr>
		</table>
    </section>

    <section class="popup" [ngClass]="{'active' : showAddItemModal }">
        <div class="popup-box">
            <header> Add Item </header>
            
            <ul class="input-list">
                <li *ngIf="newItem.image_url">
                    <img [src]="newItem.image_url">
                </li>
                <li>
                    <label> Image URL </label>
                    <input type="text" [(ngModel)]="newItem.image_url">
                </li>
                <li>
                    <label> Item Name </label>
                    <input type="text" [(ngModel)]="newItem.menu_item_name">
                </li>
                <li>
                    <label> Is Vegetarian? </label>
                    <div class="toggle" [ngClass]="{'on' : newItem.is_vegetarian }"
                        (click)="newItem.is_vegetarian = !newItem.is_vegetarian">
                        <div class="knob"></div>
                    </div>
                </li>
                <li>
                    <label> Price in INR </label>
                    <input type="number" [(ngModel)]="newItem.item_price">
                </li>
                <li>
                    <label> Discount in INR </label>
                    <input type="number" [(ngModel)]="newItem.item_discount">
                </li>
                <li>
                    <label> Waiting Time (In Minutes) </label>
                    <input type="number" [(ngModel)]="newItem.wait_duration.minutes">
                </li>
            </ul>

            <div class="action-buttons">
                <button class="rect-button" (click)="addNewItem()"> Submit </button>
                <button class="rect-button" (click)="showAddItemModal = false"> Cancel </button>
            </div>
        </div>
    </section>
    

    <button class="add-item-button active" (click)="showAddItemModal = true">
        <i class="icon ion-md-add"></i>
    </button>

</div>