<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script data-require="underscore.js@*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="service.js"></script>
<script src="directive.js"></script>
<script src="controller.js"></script>
</head>
<body class="container" ng-controller="categoryController">
<h2>Categories</h2>
<bread-crumb></bread-crumb>
<hr />
<button class="btn btn-primary" ng-click="addItem('lg')"><span class="glyphicon glyphicon-plus"></span><strong> Add</strong>
</button>
<br />
<br />
<div class="well">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="h in header">{{h}}</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in items">
<td>{{c.id}}</td>
<td><a ng-click="getChildren($index)">{{c.name}}</a>
</td>
<td>{{c.description}}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
// Code goes here
var app = angular.module('app', ['ui.bootstrap']);
/* Styles go here */
.well {
background: white;
}
<style>
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}
</style>
<ol class="breadcrumb">
<li ng-repeat="b in breadCrumbs"><a ng-click="unregisterCrumb($index)">{{b.name}}</a></li>
</ol>
<div class="modal-header">
<h3 class="modal-title">Add to {{category.name}}</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label">Id</label>
<input type="text" ng-model="newCategory.id" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" ng-model="newCategory.name" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Description</label>
<input type="text" ng-model="newCategory.description" class="form-control" />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="submit()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
(function () {
var categoryController = function ($scope, $modal, dataContext, breadCrumbSvc) {
$scope.header = ["Id", "Name", "Description"];
$scope.items = [];
$scope.categories = [];
var initialize = function () {
$scope.items = dataContext.rootCategories();
};
$scope.addItem = function (size) {
//Probably will need to inject items rather than categories
$modal.open({
templateUrl: 'addCategory.html',
backdrop: true,
windowClass: 'modal',
size: size,
controller: function ($scope, $modalInstance, breadCrumbs, items, dataContext) {
$scope.category = breadCrumbs[breadCrumbs.length - 1];
var parentId = items.length > 0 ? items[0].categoryId : $scope.category.id;
$scope.newCategory = {
id: '',
name: '',
description: '',
categoryId: parentId
}
$scope.submit = function () {
dataContext.addCategory($scope.newCategory);
items.push($scope.newCategory);
console.log('Persist category parent id to database:' + parentId);
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
}
},
resolve: {
breadCrumbs: function () {
return $scope.breadCrumbs;
},
items: function () {
return $scope.items;
}
}
})
}
$scope.getChildren = function (index) {
var category = $scope.items[index];
$scope.items = dataContext.childCategories(category.id);
$scope.addCrumb(category);
};
$scope.addCrumb = function (category) {
//$scope.breadCrumbs.push(category);
$scope.breadCrumbs = breadCrumbSvc.add(category);
}
$scope.unregisterCrumb = function (index) {
var breadCrumb = $scope.breadCrumbs[index];
$scope.breadCrumbs = breadCrumbSvc.remove(index);
$scope.items = dataContext.childCategories(breadCrumb.id);
}
//initialization code
breadCrumbSvc.init({ id: null, name: 'Templates' });
$scope.breadCrumbs = breadCrumbSvc.get();
initialize();
}
var module = angular.module('app');
module.controller('categoryController', categoryController);
})();
(function () {
'use strict';
var dataContext = function () {
var _categories = [
{
id: 1,
name: 'City of Miami Beach Business Case 1',
description: 'CMB Template 1',
categoryId: null
},
{
id: 2,
name: 'City of Miami Beach Business Case 2',
description: 'CMB Template 2',
categoryId: null
},
{
id: 3,
name: 'City of Miami Beach Business Case 3',
description: 'CMB Template 3',
categoryId: null
},
{
id: 4,
name: 'Factors',
description: 'CMB Factors',
categoryId: 1
},
{
id: 5,
name: 'Risk',
description: 'CMB Risk Factors',
categoryId: 4
},
{
id: 6,
name: 'Value',
description: 'CMB Value Factors',
categoryId: 4
}
];
var businessCases = function () {
return _businessCases;
}
var categories = function () {
return _categories;
}
var addCategory = function (category) {
_categories.push(category);
return _categories;
}
var getRootCategory = function () {
var rootItems = [];
for (var i in _categories) {
if (_categories[i].categoryId === null) {
rootItems.push(_categories[i]);
}
}
return rootItems;
}
var childCategories = function (parentId) {
var items = [];
for (var i in _categories) {
if (_categories[i].categoryId === parentId) {
items.push(_categories[i]);
}
}
return items;
}
return {
fetchBusinessCases: businessCases,
fetchCategories: categories,
addCategory: addCategory,
rootCategories: getRootCategory,
childCategories: childCategories
};
}
var breadCrumbSvc = function () {
var crumbs = [];
var init = function (crumb) {
crumbs.push(crumb);
}
var get = function () {
return crumbs;
}
var add = function (crumb) {
crumbs.push(crumb);
return crumbs;
}
var remove = function (index) {
//var breadCrumb = crumbs[index];
var range = crumbs.length - index;
if (index + 1 < crumbs.length) {
crumbs.splice(index + 1, range);
}
return crumbs;
}
return {
get: get,
add: add,
remove: remove,
init:init
}
}
var module = angular.module('app');
module.factory('dataContext', dataContext);
module.factory('breadCrumbSvc', breadCrumbSvc);
})();
(function(){
var breadcrumb = function () {
return {
restrict: "E",
templateUrl: "breadcrumb.html"
};
}
var module = angular.module('app');
module.directive('breadCrumb', breadcrumb);
})();