Download Project

Post your any code related problem to www.abctutorial.com

Follow the previous video and articles to complete the POS tutorials

Step-1:

• I will add a button to add new rows

<a href="#" ng-click="AddNewRow()"><i class="fa fa-plus"></i></a>

• We will add a new method in HomeController.cs to load product in a dropdown in Invoice page

        [HttpGet]
        public JsonResult GetAllProduct()
        {
            POS_TutorialEntities db = new POS_TutorialEntities();
            var dataList = (from prd in db.Products.Include("Category").ToList()
                            join stk in db.ProductStocks on prd.ProductId equals stk.ProductId
                            where stk.Quantity > 0
                            select new
                            {
                                ProductId = prd.ProductId,
                                CategoryId = prd.CategoryId,
                                Name = prd.Name,
                                Status = prd.Status,
                                CategoryName = prd.Category.Name,
                                PurchasePrice = stk.PurchasePrice,
                                SalesPrice = stk.SalesPrice
                            }).ToList();
                           
     
            return Json(dataList, JsonRequestBehavior.AllowGet);
        }

• We will add a method to HomeInvoiceController.js to load products

        function GetProducts() {
            $http.get('/Home/GetAllProduct')
                .then(function (response) {
                    var data = response.data;
                    $scope.ProductList = data;
                });
        }

• Add a global scope variable in HomeInvoiceController.js

 $scope.InvoiceCart = [];

• Add a method will be added inside HomeInvoiceController.js and will trigger this method when row add button will be click.

  $scope.AddNewRow = function () {
            $scope.InvoiceCart.push({ ProductId: null, CategoryName: '', UnitPrice: 0, Quantity: 1, LineTotal: 0 });
        }

• Use this code to show the rows when we will click on row adding button

<table class="table table-striped">
                    <thead>
                        <tr>
                            <th class="center">#</th>
                            <th>Item</th>
                            <th>Category</th>

                            <th class="right">Unit Cost</th>
                            <th class="center">Qty</th>
                            <th class="right">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="cart in InvoiceCart">
                            <td class="center">{{$index+1}}</td>
                            <td class="left strong">
                                <select ng-model="cart.ProductId" ng-click="SetValueOfProduct(cart.ProductId);SubTotalCalculation();">
                                    <option>--Select--</option>
                                    <option ng-repeat="product in ProductList" value="{{product.ProductId}}">{{product.Name}}</option>
                                </select>
                            </td>
                            <td class="left">{{cart.CategoryName}}</td>

                            <td class="right"><input ng-model="cart.UnitPrice" value="{{cart.UnitPrice}}" /></td>
                            <td class="center"><input class="BorderLess" ng-model="cart.Quantity" ng-change="OnChangeLineTotalSet(cart.ProductId);SubTotalCalculation();" value="1" type="number" placeholder="Quantity" /></td>
                            <td class="right"><input value={{cart.Quantity*cart.UnitPrice}} ng-model="cart.LineTotal" /></td>
                            <td><a href="#" ng-click="RowDelete($index)"><i class="fa fa-times"></i></a></td>
                        </tr>
                        <tr>
                            <td>
                                <a href="#" ng-click="AddNewRow()"><i class="fa fa-plus"></i></a>
                            </td>
                        </tr>
                    </tbody>
                </table>

Step-2:

Run this project and see the output