<html>
<head>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>
</head>
<body>
<div class="row">
<div id="breadcrumb" class="col-md-12">
<ol class="breadcrumb">
<li><a href="#">KO | Dashboard</a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="row">
<div class="col-md-6">
<!-- ko foreach: controlFields -->
<div class="row" data-bind="visible : viewFlag">
<div class="col-md-11 table-bordered">
<div class="form-group" style="padding-top: 3px;">
<div class="col-md-2" data-bind="text:code"></div>
<div class="col-md-7" data-bind="text:title"></div>
<div class="col-md-1" data-bind="text:i1"></div>
<div class="col-md-1" data-bind="text:i2"></div>
<div></div>
</div>
<!-- ko foreach: subFields -->
<div style="padding-top: 3px" data-bind="visible : viewSubFlag" class="form-group" data-bind="attr:{'title':description()}">
<div class="col-md-2"></div>
<div style="border-top: 1px solid #ddd; " class="col-md-2" data-bind="text:code"></div>
<div style="border-top: 1px solid #ddd; " class="col-md-7" data-bind="text:title"></div>
<div></div>
</div>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
</div>
<div class="col-md-6">
<div class="row">
<div class="form-group">
<div class="col-md-4">
<input type="text" required id="filterD" class="form-control" data-bind="value : filter,valueUpdate: 'keyup'" />
</div>
</div>
</div>
<!-- ko foreach: filteredList -->
<div class="row">
<div class="col-md-11 table-bordered">
<div class="form-group" style="padding-top: 3px;">
<div class="col-md-2" data-bind="text:code"></div>
<div class="col-md-7" data-bind="text:title"></div>
<div class="col-md-1" data-bind="text:i1"></div>
<div class="col-md-1" data-bind="text:i2"></div>
<div>
<!-- ko ifnot : viewFlag -->
<button class="btn-primary btn-xs" data-bind="click: toggleVisible"> <i class="glyphicon glyphicon-plus-sign"></i>
</button>
<!-- /ko -->
<!-- ko if : viewFlag -->
<button class="btn-primary btn-xs" data-bind="click: toggleVisible"> <i class="glyphicon glyphicon-minus-sign"></i>
</button>
<!-- /ko -->
</div>
</div>
<!-- ko foreach: subFields -->
<div style="padding-top: 3px" class="form-group" data-bind="attr:{'title':description()}">
<div class="col-md-2"></div>
<div style="border-top: 1px solid #ddd; " class="col-md-2" data-bind="text:code"></div>
<div style="border-top: 1px solid #ddd; " class="col-md-7" data-bind="text:title"></div>
<div>
<!-- ko ifnot : viewSubFlag -->
<button class="btn-primary btn-xs" data-bind="click: toggleVisible"> <i class="glyphicon glyphicon-plus-sign"></i>
</button>
<!-- /ko -->
<!-- ko if : viewSubFlag -->
<button class="btn-primary btn-xs" data-bind="click: toggleVisible"> <i class="glyphicon glyphicon-minus-sign"></i>
</button>
<!-- /ko -->
</div>
</div>
<!-- /ko -->
<hr/>
</div>
</div>
<br />
<!-- /ko -->
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
// Code goes here
var exports = {},
ViewModel, ControlField, SubField;
SubField = function(code, title, data, description, parent) {
if (!parent) throw ("Invalid usage of this function");
var self = this;
self.code = ko.observable(code);
self.title = ko.observable(title);
self.data = ko.observable(data);
self.description = ko.observable(description);
self.viewSubFlag = ko.observable(false);
self.toggleVisible = function() {
self.viewSubFlag(!self.viewSubFlag());
var anyVisible = false;
parent.subFields().forEach(function(sf) {
if (sf.viewSubFlag()) anyVisible = true;
});
parent.viewFlag(anyVisible);
}
};
ControlField = function(code, title, i1, i2) {
var self = this;
self.code = ko.observable(code);
self.title = ko.observable(title);
self.i1 = ko.observable(i1);
self.i2 = ko.observable(i2);
self.subFields = ko.observableArray([]);
self.viewFlag = ko.observable(false);
self.addSubField = function(code, title, data, description) {
self.subFields.push(new SubField(code, title, data, description, self));
};
self.toggleVisible = function() {
self.viewFlag(!self.viewFlag());
self.subFields().forEach(function(sf) {
sf.viewSubFlag(self.viewFlag());
});
};
};
ViewModel = function(data) {
var self = this;
self.loading = ko.observable(true);
self.controlFields = ko.observableArray([]);
var controlField = new ControlField("100", "BookTitle", "0", "1");
self.controlFields.push(controlField);
controlField.addSubField("a", "Title", "JAVA", "For Entering Item Title Data");
controlField.addSubField("p", "Section", "2", "For Section");
var controlField1 = new ControlField("245", "Author", "1", "0");
self.controlFields.push(controlField1);
controlField1.addSubField("f", "Name", "Herbert", "Name of The Author");
controlField1.addSubField("d", "Place", "Ontario", "Place of Author");
var controlField2 = new ControlField("145", "Series", "0", "0");
self.controlFields.push(controlField2);
controlField2.addSubField("p", "Place", "TATA", "Series Place");
controlField2.addSubField("t", "trim", "abc", "Section Details");
self.filter = ko.observable();
self.filteredList = ko.computed(function() {
var filter = self.filter(),
arr = [];
if (filter) {
ko.utils.arrayForEach(self.controlFields(), function(item) {
if (item.code().match(filter) || item.title().toLowerCase().match(filter.toLowerCase())) {
arr.push(item);
}
ko.utils.arrayForEach(item.subFields(), function(sf) {
if (sf.title().toLowerCase().match(filter.toLowerCase())) {
var found = ko.utils.arrayFirst(arr, function(k) {
return item.title() === k.title() && item.code()===k.code();
});
if (!found) {
arr.push(item);
}
}
});
});
} else {
arr = self.controlFields();
}
return arr;
});
self.loading(false);
};
ko.applyBindings(new ViewModel());
/* Styles go here */