Click anywhere on a worklist plate's row to check checkbox

Users can now click anywhere on a plate's row in the worklist to select a plate and check the checkbox. Originally when users would click in the column where the checkbox is, but not on the checkbox, nothing would happen.
dejesus2010 · Dec 14, 2014 · 93bb5fc · 93bb5fc
1 parent d55c566
commit 93bb5fc
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/mean/public/modules/worklist/css/worklist.css b/mean/public/modules/worklist/css/worklist.css
@@ -120,7 +120,7 @@ remove button
 /********************************/
 
 .platesHeader > div, .aPlate > div{
-    transition: width linear 0.1s, padding linear 0.1s, margin linear 0.1s;
+    transition: width ease 0.1s, padding ease 0.1s, margin linear 0.1s;
     transform: translateZ(0);
 }
 

diff --git a/mean/public/modules/worklist/directives/worklist.client.directive.js b/mean/public/modules/worklist/directives/worklist.client.directive.js
@@ -52,7 +52,7 @@ angular.module('worklist').directive('myWorklistSelected', [
 		// before. If the plate has already been selected, remove it from the selected plates, because the
 		// user is deselecting the plate. If it hasn't, add it to the selected plates
 		var selectPlate = function(selectedPlates, plateToAdd){
-			var IndexOfPlateInSelectedPlates = indexInselectedPlates(selectedPlates, plateToAdd);
+			var IndexOfPlateInSelectedPlates = indexInSelectedPlates(selectedPlates, plateToAdd);
 
 			if(IndexOfPlateInSelectedPlates === -1){
 				selectedPlates.push(plateToAdd);
@@ -62,7 +62,7 @@ angular.module('worklist').directive('myWorklistSelected', [
 			}
 		};
 
-		var indexInselectedPlates = function(selectedPlates, plate){
+		var indexInSelectedPlates = function(selectedPlates, plate){
 			var result = -1;
 
 			for(var i = 0; i < selectedPlates.length; i++){
@@ -77,33 +77,38 @@ angular.module('worklist').directive('myWorklistSelected', [
 
 		return {
 			restrict: 'A',
-			scope: {
-				plate: '=myPlateObject',
-				selectedPlates: '=mySelectedPlates',
-				plateChecked: '=myPlateChecked',
-				clickNotOnCheckBox: '=myClickedNotOnCheckbox',
-				clickCheckBox: '=myClickedCheckbox'
-			},
 			compile: function(tElem, tAttrs){
 				return{
 					pre: function (scope,element,attrs){
-
+						scope.plateChecked = false;
 					},
 					post: function (scope, element, attrs) {
 
-						scope.clickNotOnCheckBox = function(){
+						var clickNotOnCheckBox = function(){
 							scope.plateChecked = !scope.plateChecked;
 							selectPlate(scope.selectedPlates, scope.plate);
+							scope.$apply();
 						};
 
-						scope.clickCheckBox = function(){
+						var clickOnCheckBox = function(){
 							selectPlate(scope.selectedPlates, scope.plate);
+							scope.$apply();
 						};
 
 						scope.$on('selectedAll', function(event, selectedAllPlates){
 							scope.plateChecked = selectedAllPlates;
 						});
 
+						element.bind('click', function(event){
+							var clickedOnElement = angular.element(event.toElement)[0];
+							if(clickedOnElement.id === 'checkbox'){
+								clickOnCheckBox();
+							}
+							else{
+								clickNotOnCheckBox();
+							}
+						});
+
 					}
 				};
 			},

diff --git a/mean/public/modules/worklist/views/worklist.client.view.html b/mean/public/modules/worklist/views/worklist.client.view.html
@@ -28,12 +28,12 @@ <h3>{{stageNumberToName[stagePlates[0].stage]}}</h3>
 			</div >
 		</div>
 
-		<div class="row aPlate" ng-class-odd="'oddRow'" ng-repeat="plate in stagePlates | orderBy:['plateCode', 'samples.length']:true" my-worklist-plate my-plate-object="plate" my-selected-plates="selectedPlates" my-plate-checked="plateChecked" my-clicked-not-on-checkbox="clickNotOnCheckBox" my-clicked-checkbox="clickCheckBox">
+		<div class="row aPlate" ng-class-odd="'oddRow'" ng-repeat="plate in stagePlates | orderBy:['plateCode', 'samples.length']:true" my-worklist-plate >
 			<div class="removeButton dataCell" ng-class="{'col-xs-3 col-sm-3 col-md-3 col-lg-3':showEdit, 'col-xs-0 col-sm-0 col-md-0 col-lg-0':!showEdit}" ng-click="remove(plate, stagePlates, selectedPlates)">Remove</div>
-			<div class="dataCell" ng-class="{'col-xs-3 col-sm-3 col-md-3 col-lg-3':showEdit, 'col-xs-4 col-sm-4 col-md-4 col-lg-4':!showEdit}" data-ng-click="clickNotOnCheckBox()">{{plate.plateCode}}</div>
-			<div class="dataCell" ng-class="{'col-xs-3 col-sm-3 col-md-3 col-lg-3':showEdit, 'col-xs-4 col-sm-4 col-md-4 col-lg-4':!showEdit}" data-ng-click="clickNotOnCheckBox()">{{plate.samples.length}}</div>
-			<div class="dataCell" ng-class="{'col-xs-3 col-sm-3 col-md-3 col-lg-3':showEdit, 'col-xs-4 col-sm-4 col-md-4 col-lg-4':!showEdit}" >
-				<input type="checkbox" value="checked" data-ng-model="plateChecked" data-ng-click="clickCheckBox()" >
+			<div class="dataCell" ng-class="{'col-xs-3 col-sm-3 col-md-3 col-lg-3':showEdit, 'col-xs-4 col-sm-4 col-md-4 col-lg-4':!showEdit}">{{plate.plateCode}}</div>
+			<div class="dataCell" ng-class="{'col-xs-3 col-sm-3 col-md-3 col-lg-3':showEdit, 'col-xs-4 col-sm-4 col-md-4 col-lg-4':!showEdit}">{{plate.samples.length}}</div>
+			<div class="dataCell" ng-class="{'col-xs-3 col-sm-3 col-md-3 col-lg-3':showEdit, 'col-xs-4 col-sm-4 col-md-4 col-lg-4':!showEdit}">
+				<input id="checkbox" type="checkbox" value="checked" data-ng-model="plateChecked">
 			</div>
 		</div>