My goal is to calculate the total for each department without duplicates ( which is currently working ) and display all results based on the selected date.
I intend to select a date using md-datepicker and then only display the total task time where the date matches the selected date.
This is the HTML section:
<body ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<md-datepicker ng-model="myDate" md-placeholder="Enter date" ng-change="sum(myDate)"></md-datepicker>
{{myDate}}
<tt>model = {{data.model}}</tt>
<br/>
<hr/>
</form>
<md-table-container>
<table md-table>
<thead md-head>
<tr md-row>
<th md-column>Dept</th>
<th md-column>Total time</th>
<th md-column></th>
</tr>
</thead>
<tbody md-body>
<tr ng-if="!data.model" md-row md-select="test" md-on-select="" md-auto-select ng-repeat="test in tests">
<td md-cell>{{ test.dept }}</td>
<td md-cell>{{ test.total }}</td>
<td md-cell></td>
</tr>
<tr ng-if="data.model" md-row md-select="test" md-on-select="" md-auto-select ng-repeat="(key,val) in data.model">
<td md-cell>{{ key }}</td>
<td md-cell>{{ val }}</td>
<td md-cell></td>
</tr>
</tbody>
</table>
</md-table-container>
</div>
</body>
and JavaScript
angular.module('ngrepeatSelect', ['ngMaterial'])
.controller('ExampleController', function($scope, $filter) {
$scope.myDate = '';
$scope.$watch('myDate', function(newVal, oldVal) {
if (!newVal) {
return false;
}
var date = $filter('date')(new Date(newVal), "yyyy-MM-dd");
});
var data = [{
id: "1",
user: "John Doe",
dept: "test",
date: "2017-03-02",
task_time: "83"
}, {
id: "2",
user: "Mark Doe",
dept: "test",
date: "2017-02-02",
task_time: "41"
}, {
id: "3",
user: "Zac Doe",
dept: "other",
date: "2017-02-04",
task_time: "12"
}, {
id: "4",
user: "Zac Doe",
dept: "test",
date: "2017-03-02",
task_time: "41"
}, {
id: "5",
user: "Zac Doe",
dept: "test",
date: "2017-03-02",
task_time: "41"
},{
id: "6",
user: "Zac Doe",
dept: "test2",
date: "2017-03-02",
task_time: "41"
},{
id: "7",
user: "John Doe",
dept: "test",
date: "2017-01-02",
task_time: "41"
},{
id: "8",
user: "Zac Doe",
dept: "test",
date: "2017-01-01",
task_time: "41"
},{
id: "9",
user: "John Doe",
dept: "tests",
date: "2017-02-12",
task_time: "41"
}, {
id: "10",
user: "Zac Doe",
dept: "test2",
date: "2017-02-13",
task_time: "53"
}];
var totalPerDept = [];
angular.forEach(data, function(item) {
var index = findWithAttr(totalPerDept, 'dept', item.dept);
if (index < 0) {
totalPerDept.push({
dept: item.dept,
total: parseFloat(item.task_time)
});
} else {
totalPerDept[index].total += parseFloat(item.task_time);
}
});
$scope.tests = totalPerDept;
function findWithAttr(array, attr, value) {
for (var i = 0; i < array.length; i += 1) {
if (array[i][attr] === value) {
return i;
}
}
return -1;
}
$scope.sum = function(date) {
let model = data.filter(function(item) {
return (item.date == TheSameDate(item))
});
let tests = {};
model.forEach(function(item) {
if (!tests.hasOwnProperty(item.dept)) {
tests[item.dept] = 0;
}
tests[item.dept] += parseFloat(item.task_time);
});
$scope.data.model = tests;
}
function TheSameDate(item){
if($scope.myDate){
let myDate = new Date($scope.myDate);
let itemDate = new Date(item.date);
if(myDate.getFullYear() != itemDate.getFullYear() || myDate.getMonth() != itemDate.getMonth()){
return false;
}
}
return true
}
$scope.data = {
current: null,
model: null,
availableOptions: [{
id: '1',
name: 'John Doe'
},
{
id: '2',
name: 'Mark Doe'
},
{
id: '3',
name: 'Zac Doe'
}
]
};
});
I have set up a JSFiddle showcasing the functionality I am aiming to achieve.