HW-Pricing(2 JSON)

Updated Requirement module

by Mayank Dixit

HTML

<div ng-controller="mainCtrl" class="hwpane">
    <div class="summary">
        <div ng-repeat="(cat_id, cat_data) in summary">
            <div ng-repeat="(prod_id, prod_data) in cat_data" class="products" ng-if="prod_data.qty > 0 || accCheck(cat_id, prod_id)">{{prod_id}}	<span ng-if="prod_data.qty">
        			 ({{prod_data.qty}})
        			 <span class="close" ng-click="clearCount(cat_id, prod_id)"> &times;</span>
</span>
                <div ng-repeat="(acc_id, acc_data) in prod_data" class="accessory" ng-if="acc_data.qty > 0">{{acc_id}} ({{acc_data.qty}})	<span class="close" ng-click="clearCount(cat_id, prod_id, acc_id)"> &times;</span>

                </div>
            </div>
        </div>
    </div>
    <div ng-repeat="cat in categories">
        <div ng-repeat="(cat_id, cat_data) in cat" class="cat_pane">{{cat_id}}: {{cat_data.name}}
            <div ng-repeat="prods in cat_data.products">
                <div ng-repeat="(prods_id, prods_data) in prods" class="products">> {{prods_id}}
                    <input type="text" ng-model="prods_data.qty" prod-id="{{prods_id}}" cat-id="{{cat_id}}" ng-blur="prepareSummary($event)" />
                    <div ng-repeat="acc in prods_data.accessories">
                        <div ng-repeat="(acc_id, acc_data) in acc" class="accessory">> {{acc_id}}
                            <input type="text" ng-model="acc_data.qty" prod-id="{{prods_id}}" acc-id="{{acc_id}}" cat-id="{{cat_id}}" ng-blur="prepareSummary($event)" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.close {
    color: red;
    font-weight: bold;
    cursor: pointer;
    font-size: x-large;
    position: absolute;
}
.products {
    margin-left: 10px;
    color: blue;
}
.accessory {
    margin-left: 20px;
    color: green;
}
.hwpane {
    color: gray;
}
.cat_pane {
    font-size: 20px;
    position: relative;
    float: left;
    border: 2px solid lightgreen;
    margin: 2px;
}

JavaScript

angular.module("myApp", []).
	controller("mainCtrl", function ($scope) {
	    $scope.summary = {};

	    $scope.prepareSummary = function (evt) {
	        var _cat_id, _acc_id, _prod_id;

	        _cat_id = evt.currentTarget.attributes["cat-id"]["value"];
	        _prod_id = evt.currentTarget.attributes["prod-id"]["value"];
	        _acc_id = (evt.currentTarget.attributes["acc-id"]) ? evt.currentTarget.attributes["acc-id"]["value"] : undefined;

	        if (!$scope.summary[_cat_id]) {
	            $scope.summary[_cat_id] = {};
	        }
	        if (!$scope.summary[_cat_id][_prod_id]) {
	            $scope.summary[_cat_id][_prod_id] = {};
	        }
	        if (_acc_id) {
	            if (!$scope.summary[_cat_id][_prod_id][_acc_id]) {
	                $scope.summary[_cat_id][_prod_id][_acc_id] = {};
	            }
	            $scope.summary[_cat_id][_prod_id][_acc_id]["qty"] = evt.currentTarget.value;
	        } else {
	            $scope.summary[_cat_id][_prod_id]["qty"] = evt.currentTarget.value;
	        }


	    }
	    $scope.clearCount = function (cat_id, prod_id, acc_id) {
	        if (!acc_id) {
	            $scope.categories[0][cat_id]["products"][0][prod_id]["qty"] = 0;
	            $scope.summary[cat_id][prod_id]["qty"] = 0;

	        } else {
	            $scope.categories[0][cat_id]["products"][0][prod_id]["accessories"][0][acc_id]["qty"] = 0;
	            $scope.summary[cat_id][prod_id][acc_id]["qty"] = 0;
	        }
	    }
	    $scope.accCheck = function (cat_id, prod_id) {
	        for (acc in $scope.summary[cat_id][prod_id]) {
	            if ($scope.summary[cat_id][prod_id][acc]["qty"] > 0) {
	                return true;
	            }
	        }
	        return false;
	    }
	    $scope.categories = [{
	        "cat_1": {
	            "name": "Categoty 1",
	            "products": [{
	                "prod_11": {
	                    "name": "product 11",
	                    "qty": 0,
	                    "accessories": [{
	               ...