Skip to content

Instantly share code, notes, and snippets.

/angular-recursive-table-check-without-directive.markdown

Created February 20, 2017 12:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/a80b81c26c23067fce7594896748ede4 to your computer and use it in GitHub Desktop.
Save anonymous/a80b81c26c23067fce7594896748ede4 to your computer and use it in GitHub Desktop.
Download ZIP
ANGULAR Recursive table check without directive
Raw
angular-recursive-table-check-without-directive.markdown

ANGULAR Recursive table check without directive

In this pen we select column and also select respective parents.

A Pen by keshav on CodePen.

License.

Raw
index.html
<html ng-app="myApp">
<body ng-controller="AppController as vm">
<h1>{{vm.title}}!</h1>
<div class="container">
<div class="row col-md-12 ">
<button class="btn btn-success fr" ng-disabled="!vm.confirm" ng-click="vm.confirmEncrypt(vm.selectedApp.id)">Confirm</button>
</div>
<div class="row col-md-12">
<div class="col-md-4" data-define="keyspaces">
<div class="panel panel-default">
<div class="panel-heading">{{vm.app_list.dbLabel}}</div>
<div class="panel-body no-padding">
<table class="table table-striped">
<tbody ng-if="vm.app_list.databases">
<tr ng-repeat="db in vm.app_list.databases" ng-click="vm.listTables($index)" ng-class="vm.kindex == $index ? 'arrow-left' : ''">
<td style="width:70%">{{ db.name }}</td>
<td class="progress-div">{{db.dirty}}
</td>
<td class="tc" ng-switch on="db.dirty">
<div ng-switch-when="-1">
<i class="glyphicon glyphicon-ban-circle"></i>
</div>
<div ng-switch-default>
<span class="glyphicon" ng-class="db.encryption ? 'glyphicon-check' : 'glyphicon-unchecked'"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4" data-define="tables">
<div class="panel panel-default nbr">
<div class="panel-heading">{{vm.app_list.tableLabel}}
<label class="fr" ng-hide="vm.allTablesEncrypted" ng-click="vm.encryptAllTable(vm.all_encryption[vm.kindex].db)">
<div class="glyphicon" ng-class="vm.all_encryption[vm.kindex].db ? 'glyphicon-check' : 'glyphicon-unchecked' " ng-model="vm.all_encryption[vm.kindex].db">
</div>
<span class="text-navy font-11">&nbsp;Encrypt all</span>
</label>
</div>
<div class="panel-body no-padding">
<table class="table table-striped">
<tbody ng-if="vm.app_list.databases[vm.kindex].tables">
<tr ng-repeat="table in vm.app_list.databases[vm.kindex].tables" ng-click="vm.listColumns($index)" ng-class="vm.tindex == $index ? 'arrow-left' : ''">
<td style="width:60%">{{ table.name }}</td>
<td class="progress-div">
{{ table.dirty }}
</td>
<td class="tr" ng-switch on="table.dirty">
<div ng-switch-when="-1">
<i class="glyphicon glyphicon-ban-circle"></i>
</div>
<div ng-switch-default>
<span class="glyphicon" ng-class="table.encryption ? 'glyphicon-check' : 'glyphicon-unchecked'" style="float:left; position:relative;left:8px">
<input type="checkbox" class="hidden" ng-model="table.encryption">
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- {{vm.vm.all_encryption|json}} -->
<div class="col-md-4" data-define="columns">
<div class="panel panel-default nbr">
<div class="panel-heading">
{{vm.app_list.columnLabel}}
<label class="fr" ng-hide="vm.allColumnsEncrypted" ng-click="vm.encryptAllColumn(vm.all_encryption[vm.kindex].tables[vm.tindex])">
<div class="glyphicon " ng-class="vm.all_encryption[vm.kindex].tables[vm.tindex] ? 'glyphicon-check' : 'glyphicon-unchecked' " ng-model="vm.all_encryption[vm.kindex].tables[vm.tindex]" >
</div>
<span class="text-navy font-11 ">&nbsp;Encrypt all</span>
</label>
</div>
<div class="panel-body no-padding ">
<table class="table table-striped">
<tbody>
<tr ng-repeat="column in vm.app_list.databases[vm.kindex].tables[vm.tindex].columns " ng-click="vm.checkColumn(column) ">
<td style="width:60% ">{{ column.name }}</td>
<td class="progress-div "> {{ column.dirty }}
</td>
<td class="tr" ng-switch on="column.dirty">
<div ng-switch-when="-1">
<i class="glyphicon glyphicon-ban-circle"></i>
</div>
<div ng-switch-default>
<span class="glyphicon" ng-class="column.encryption ? 'glyphicon-check' : 'glyphicon-unchecked'" ng-model="column.encryption">
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
(function() {
'use strict';
var data = {
"id": "58a1d7bba7986c0b8c1892e1",
"databases": [{
"tables": [{
"name": "customers",
"encryption": true,
"columns": [{
"name": "cust_id",
"encryption": true
}, {
"name": "first_name",
"encryption": false
}, {
"name": "last_name",
"encryption": false
}, {
"name": "address",
"encryption": false
}, {
"name": "email",
"encryption": false
}]
}, {
"name": "products",
"encryption": false,
"columns": [{
"name": "sku",
"encryption": false
}, {
"name": "description",
"encryption": false
}, {
"name": "cost",
"encryption": false
}, {
"name": "price",
"encryption": false
}, {
"name": "quantity",
"encryption": false
}]
}, {
"name": "orders",
"encryption": false,
"columns": [{
"name": "order_number",
"encryption": false
}, {
"name": "date",
"encryption": false
}, {
"name": "item",
"encryption": false
}, {
"name": "quantity",
"encryption": false
}],
}],
"name": "sales",
"encryption": true
}, {
"tables": [{
"name": "superStore",
"encryption": false,
"columns": [{
"name": "Customer Name",
"encryption": false
}, {
"name": "Customer ID",
"encryption": false
}, {
"name": "City",
"encryption": false
}, {
"name": "Country",
"encryption": false
}, {
"name": "State",
"encryption": false
}, {
"name": "Region",
"encryption": false
}, {
"name": "Postal Code",
"encryption": false
}, {
"name": "Sales",
"encryption": false
}, {
"name": "Discount",
"encryption": false
}, {
"name": "Profit",
"encryption": false
}, {
"name": "Order ID",
"encryption": false
}, {
"name": "Order Date",
"encryption": false
}, {
"name": "Product ID",
"encryption": false
}, {
"name": "Product Name",
"encryption": false
}, {
"name": "Category",
"encryption": false
}, {
"name": "Sub-Category",
"encryption": false
}, {
"name": "Segment",
"encryption": false
}, {
"name": "Number Of Records",
"encryption": false
}, {
"name": "Ship Date",
"encryption": false
}, {
"name": "Ship Mode",
"encryption": false
}, {
"name": "Quantity",
"encryption": false
}, {
"name": "Row ID",
"encryption": false
}],
}],
"name": "salesdb",
"encryption": false
}],
"dbLabel": "Databases",
"tableLabel": "Tables",
"columnLabel": "Columns",
"enable": false
};
var myApp = angular.module('myApp', []);
myApp
.controller('AppController', function($log, $scope) {
var vm = this;
angular.extend(vm, {
title: 'Recursive Table Encryption',
encryption: false,
enable: false,
confirm: false,
allColumnsEncrypted: true,
allTablesEncrypted: true,
all_encryption: {},
server_encrypt: false,
});
// action on Enctypt all checkbox above table panel
var encryptAllTable = function(state) {
// console.clear();
// console.info('encryptAllTable', arguments);
state = !state;
var databases = vm.app_list.databases;
for (var d in databases) {
var database = databases[d];
// console.log(typeof(d), typeof(vm.kindex));
if (+d === vm.kindex) { // type conversion of index from string to number is must
// console.log('inside checked db',database);
vm.all_encryption[d].db = state;
vm.server_encrypt = state;
if (database.dirty >= 0) {
database.encryption = state;
database.dirty = (state) ? 1 : 0; // set explicitly
}
for (var t in database.tables) {
vm.all_encryption[d].tables[t] = state; // it will set all Encrypt All true without checking it's childern dirty status
var table = database.tables[t];
if (table.dirty >= 0) {
table.encryption = state;
table.dirty = (state) ? 1 : 0; // set explicitly
}
for (var c in table.columns) {
var col = table.columns[c];
if (col.dirty < 0) {
continue;
} else {
col.encryption = state;
col.dirty = (state) ? 1 : 0; // set explicitly
}
}
}
}
if (database.dirty > 0) { // if one of db is checked
vm.server_encrypt = true;
}
}
};
// action for Enctypt all checkbox above column panel
var encryptAllColumn = function(state) {
// console.clear();
// console.info('encryptAllColumn', arguments);
state = !state;
vm.all_encryption[vm.kindex].tables[vm.tindex] = state;
var table = vm.app_list.databases[vm.kindex].tables[vm.tindex];
if (table.dirty >= 0) {
table.encryption = state;
table.dirty = (state) ? 1 : 0; // set explicitly
}
for (var c in table.columns) {
var col = table.columns[c];
if (col.dirty < 0) {
continue;
} else {
col.encryption = state;
col.dirty = (state) ? 1 : 0; // set explicitly
}
} // @column for loop
checkAll();
};
// on click of columns
var checkColumn = function(item) {
// console.clear();
// console.info('checkColumn::', item);
if (item.encryption && item.dirty < 0) {
$log.log('%calready encrypted', 'color:yellow;background-color:green;padding:2px');
return false;
} else {
item.encryption = !item.encryption;
item.dirty = (item.encryption) ? 1 : 0;
checkAll();
}
};
// check whether parent is checked or not and mark parent (table) and grand parent (keyspace) checked if any of it's child checked
var checkAll = function() {
var databases = vm.app_list.databases;
var db_set = 0,
tbl_set = 0,
col_set = 0,
parent_table = 0,
tableCount = 0,
columnCount = 0;
// console.info('%cdatabase' + '::%ctable' + '::%ccolumn', 'color:green', 'color:red', 'color:blue');
// console.group('[=====================================]');
for (var d in databases) {
var database = databases[d];
// console.log('%cdb:: ' + database.name, 'color:green');
tbl_set = 0;
parent_table = 0;
tableCount = database.tables.filter(function(t) {
return t.dirty >= 0;
}).length; // count tables which are not already encrypted
// console.log('tableCount :', tableCount);
for (var t in database.tables) {
var table = database.tables[t];
columnCount = table.columns.filter(function(c) {
return c.dirty >= 0;
}).length; // count coulms which are not already encrypted
col_set = 0;
// console.log('%ctable::columnCount ' + table.name + '::' + columnCount, 'color:red');
// console.log('initially db-set : tbl_set : col-set:', db_set, tbl_set, col_set);
for (var c in table.columns) {
var col = table.columns[c];
// console.log('%ccolumn:: ' + col.name, 'color:blue');
if (col.dirty === -1) {
continue;
}
if (col.dirty === 1) {
// console.log('%ccol checked', 'color:purple;font-size:large');
col_set++;
}
} // @column for loop
// console.log('in this table', table);
if (col_set > 0) {
// console.log('setting table encryption true');
if (!table.encryption) {
table.encryption = true;
table.dirty = 1;
}
tbl_set++;
}
if (col_set === 0 && table.dirty > 0) {
// console.log('setting table encryption false');
table.encryption = false;
table.dirty = 0;
}
// for matser checkbox above column panel
if (columnCount > 0) {
if (col_set === columnCount) {
// console.log('all column checked');
vm.all_encryption[d].tables[t] = true;
if (table.dirty >= 0) {
parent_table++;
}
} else {
// console.log('not all column checked');
vm.all_encryption[d].tables[t] = false;
parent_table--;
}
}
// console.log('after this table loop :: db_set, tbl_set, col_set,', db_set, tbl_set, col_set);
} // @table for loop
// console.log('in this db', database);
if (tbl_set > 0) {
// console.log('setting db encryption true');
if (!database.encryption) {
database.encryption = true;
database.dirty = 1;
}
db_set++;
}
if (tbl_set === 0 && database.dirty > 0) {
// console.log('setting db encryption false');
database.encryption = false;
database.dirty = 0;
}
// console.log('after db loop :: db_set, tbl_set, col_set', db_set, tbl_set, col_set);
// console.log('parent_table::tableCount' , parent_table, tableCount);
if (tableCount > 0) { // set master chcekbox above table panel
if (parent_table === tableCount) {
vm.all_encryption[d].db = true;
} else {
vm.all_encryption[d].db = false;
}
}
if (db_set === 0) {
vm.server_encrypt = false;
} else {
vm.server_encrypt = true;
}
} // db for loop
// console.log('finally==> db-set: tbl_set: col-set::', db_set, tbl_set, col_set);
// console.groupEnd();
};
// list all tables of selected keyspace
var listTables = function(idx) {
// console.info('listTable::', idx);
vm.allTablesEncrypted = true;
vm.allColumnsEncrypted = true;
vm.kindex = idx;
vm.tindex = null;
var db = vm.app_list.databases[vm.kindex];
if (db.tables) {
vm.allTablesEncrypted = true;
for (var t in db.tables) {
var table = db.tables[t];
if (table.dirty < 0) {
continue;
} else {
vm.allTablesEncrypted = false;
}
}
}
};
// list all columns of selected table
var listColumns = function(idx) {
// console.info('listColumns::', idx);
vm.tindex = idx;
var table = vm.app_list.databases[vm.kindex].tables[vm.tindex];
if (table.columns) {
vm.allColumnsEncrypted = true;
for (var c in table.columns) {
var col = table.columns[c];
if (col.dirty < 0) {
continue;
} else {
vm.allColumnsEncrypted = false;
}
}
}
};
// confirm button enable checking
$scope.$watchCollection('{sen: vm.server_encrypt}', function(newValue) {
vm.confirm = newValue.sen
});
// add dirty flag respectively
var setFlag = function(data) {
// console.info('setting Flag', data);
angular.forEach(data.databases, function(db, i) {
// console.log('db#', i);
vm.all_encryption[i] = {};
vm.all_encryption[i].db = null;
vm.all_encryption[i].tables = {};
db.dirty = (db.encryption === true) ? -1 : 0;
angular.forEach(db.tables, function(table, j) {
// console.log('table#', j);
vm.all_encryption[i].tables[j] = null;
table.dirty = (table.encryption === true) ? -1 : 0;
angular.forEach(table.columns, function(column) {
column.dirty = (column.encryption === true) ? -1 : 0;
});
});
});
// console.log('All Encryption', vm.all_encryption);
return data;
};
vm.app_list = setFlag(data); // Here we load json data
angular.extend(vm, {
listTables: listTables,
listColumns: listColumns,
checkColumn: checkColumn,
encryptAllTable: encryptAllTable,
encryptAllColumn: encryptAllColumn,
checkAll: checkAll
});
});
})();
Raw
scripts
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
Raw
style.css
.arrow-left:after {
content: '';
position: absolute;
clear: both;
float: right;
margin: 0 auto;
width: 0;
height: 0;
border-left: 20px solid #ddd;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid transparent;
}
.panel-body {
padding: 0;
margin-bottom: 10px;
height:200px;
display:block;
overflow-x:hidden;
overflow-y:auto;
}
tr, label {
cursor:pointer;
}
.fr {
float: right;
}
.btn-success {
margin:4px 0;
}
.text-navy {
color: #16a085;
}
.font-11 {
font-size: 11px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment