StudentSupportCallForm: Implementing preference table #1450

ucdavis · Jan 16, 2018 · 6acb3c5 · 6acb3c5
1 parent 46a6c03
commit 6acb3c5
Show file tree

Hide file tree

Showing 15 changed files with 114 additions and 86 deletions.
diff --git a/app/instructionalSupport/studentSupportCallForm/StudentSupportCallForm.html b/app/instructionalSupport/studentSupportCallForm/StudentSupportCallForm.html
@@ -11,15 +11,15 @@
 	</spinner>
 
 	<!-- handle lack of access -->
-	<div ng-if="view.state && !view.state.supportCallResponse">
+	<div ng-show="view.state && !view.state.supportCallResponse">
 		<div class="jumbotron student-support-call-form__no-access">
 			<p class="lead">You have not been invited to a support call in this term.</p>
 			<br />
 			<p class="lead">If you feel this is in error please contact the Academic Planner for {{ sharedState.workgroup.name }}.</p>
 		</div>
 	</div>
 
-	<div ng-if="view.state && view.state.supportCallResponse" class="student-support-call-form__container">
+	<div ng-show="view.state && view.state.supportCallResponse" class="student-support-call-form__container">
 		<!-- Modals -->
 		<ipa-modal
 			is-visible="view.state.isPreferenceCommentModalOpen"

diff --git a/app/instructionalSupport/studentSupportCallForm/StudentSupportCallFormCtrl.js b/app/instructionalSupport/studentSupportCallForm/StudentSupportCallFormCtrl.js
@@ -19,18 +19,6 @@ instructionalSupportApp.controller('StudentSupportCallFormCtrl', ['$scope', '$ro
 				$scope.view.state = data;
 			});
 
-			$scope.addPreference = function(preference) {
-				studentActions.addStudentPreference(preference);
-			};
-
-			$scope.deletePreference = function(preference) {
-				studentActions.deleteStudentPreference(preference);
-			};
-
-			$scope.updateSupportCallResponse = function() {
-				studentActions.updateSupportCallResponse($scope.view.state.supportCallResponse);
-			};
-
 			$scope.submitPreferences = function() {
 				$scope.view.state.supportCallResponse.submitted = true;
 				studentActions.submitPreferences($scope.view.state.supportCallResponse, $scope.workgroupId, $scope.year);

diff --git a/...structionalSupport/studentSupportCallForm/directives/studentComments/studentComments.html b/...structionalSupport/studentSupportCallForm/directives/studentComments/studentComments.html
@@ -1,8 +1,8 @@
-<div class="student-comments" ng-if="supportCallResponse.collectGeneralComments">
+<div class="student-comments" ng-show="supportCallResponse.collectGeneralComments">
 	<h5>Comments</h5>
 	<textarea
 		class="student-comments__text"
 		ng-model="supportCallResponse.generalComments"
-		auto-input on-change="updateSupportCallResponse()" on-change-delay="500">
+		auto-input on-blur="updateStudentComments()">
 	</textarea>
 </div>
diff --git a/...instructionalSupport/studentSupportCallForm/directives/studentComments/studentComments.js b/...instructionalSupport/studentSupportCallForm/directives/studentComments/studentComments.js
@@ -1,4 +1,4 @@
-instructionalSupportApp.directive("studentComments", this.studentComments = function () {
+instructionalSupportApp.directive("studentComments", this.studentComments = function (studentActions) {
 	return {
 		restrict: 'E',
 		templateUrl: 'studentComments.html',
@@ -7,8 +7,8 @@ instructionalSupportApp.directive("studentComments", this.studentComments = func
 			supportCallResponse: '<'
 		},
 		link: function (scope, element, attrs) {
-			scope.updateSupportCallResponse = function() {
-				studentActions.updateSupportCallResponse($scope.props.state.supportCallResponse);
+			scope.updateStudentComments = function() {
+				studentActions.updateStudentComments(scope.supportCallResponse);
 			};
 		}
 	};

diff --git a/...Form/directives/studentPreferences/studentPreferenceSelector/studentPreferenceSelector.js b/...Form/directives/studentPreferences/studentPreferenceSelector/studentPreferenceSelector.js
@@ -3,7 +3,6 @@ instructionalSupportApp.directive("studentPreferenceSelector", this.studentPrefe
 		restrict: 'E',
 		templateUrl: 'studentPreferenceSelector.html',
 		replace: true,
-		scope: false,
 		link: function (scope, element, attrs) {
 			// do nothing
 		}

diff --git a/...tCallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.css b/...tCallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.css
@@ -0,0 +1,5 @@
+.student-preference-table__empty-warn {
+	text-align: center;
+	height: 100%;
+	background-color: white;
+}
diff --git a/...CallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.html b/...CallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.html
@@ -0,0 +1,43 @@
+<div class="student-preference-table">
+	<div ng-show="state && state.supportAssignments.ids.length == 0" class="jumbotron student-preference-table__empty-warn">
+		<p class="lead">There are no courses available for this support call.</p>
+		<br />
+		<p class="lead">If you feel this is in error please contact the Academic Planner for {{ sharedState.workgroup.name }}.</p>
+	</div>
+
+	<div ng-show="state && state.supportAssignments.ids.length > 0">
+		<table>
+			<thead>
+				<th>Priority</th>
+				<th>Course</th>
+				<th>Comments</th>
+				<th></th>
+			</thead>
+			<tbody>
+				<tr ng-repeat="preference in state.preferences | orderBy: 'priority'">
+					<td>
+						{{ preference.priority }}
+					</td>
+					<td>
+						{{ preference.subjectCode }} {{ preference.courseNumber }} - {{ preference.sequencePattern }}
+					</td>
+					<td>
+						<button class="btn btn-default" ng-click="openPreferenceCommentModal(preference)">
+							Add preference comments
+						</button>
+					</td>
+					<td>
+						<div>
+							<i class="glyphicon glyphicon-remove student-course-remove"
+								uib-tooltip="Delete preference" tooltip-placement="bottom"
+								confirm-button="deletePreference(preference)"
+								message="Are you sure you want to delete this preference?"
+								yes="Confirm" no="Cancel" placement="top">
+							</i>
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
diff --git a/...rtCallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.js b/...rtCallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.js
@@ -0,0 +1,16 @@
+instructionalSupportApp.directive("studentPreferenceTable", this.studentPreferenceTable = function () {
+	return {
+		restrict: 'E',
+		templateUrl: 'studentPreferenceTable.html',
+		replace: true,
+		link: function (scope, element, attrs) {
+			scope.addPreference = function(preference) {
+				studentActions.addStudentPreference(preference);
+			};
+
+			scope.deletePreference = function(preference) {
+				studentActions.deleteStudentPreference(preference);
+			};
+		}
+	};
+});
diff --git a/...ionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferences.html b/...ionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferences.html
@@ -1,64 +1,12 @@
 <div class="student-preferences">
-	<div class="student-course-container">
 
+	<ipa-section-header
+		header-text="'Preferences'">
+	</ipa-section-header>
 
-		<div style="margin-left: -200px;" ng-if="view.state && view.state.supportAssignments.ids.length == 0">
-			<!-- handle lack of active teaching call -->
-			<div class="jumbotron" style="text-align: center; height: 100%; background-color: white;">
-				<p class="lead">There are no courses available for this support call.</p>
-				<br />
-				<p class="lead">If you feel this is in error please contact the Academic Planner for {{ sharedState.workgroup.name }}.</p>
-			</div>
-		</div>
+	<student-preference-table>
+	</student-preference-table>
 
-		<!-- preferences -->
-		<ul id="sortable" class="sortable-student-preferences">
-			<li ng-repeat="preference in view.state.preferences | orderBy: 'priority'" class="student-course-section" id="{{ preference.id }}">
-				<div class="student-course">
-					<div>
-						{{ preference.priority }}
-					</div>
-
-					<i class="glyphicon glyphicon-option-vertical move-course-icon">
-					</i>
-
-					<div class="student-course-info">
-						<div>
-							<div class="student-course_title">
-								{{ preference.subjectCode }} {{ preference.courseNumber }} - {{ preference.sequencePattern }}
-							</div>
-							<div class="student-preference">
-								{{ getRoleDisplayName(preference.type) }}
-							</div>
-						</div>
-						<div>
-							<i ng-if="view.state.ui.isFormLocked == false" class="glyphicon glyphicon-remove student-course-remove"
-								uib-tooltip="Delete preference" tooltip-placement="bottom"
-								confirm-button="deletePreference(preference)"
-								message="Are you sure you want to delete this preference?"
-								yes="Confirm" no="Cancel" placement="top">
-							</i>
-						</div>
-					</div>
-				</div>
-				<div ng-show="view.state.supportCallResponse.collectPreferenceComments" class="comments-btn">
-					<div ng-if="preference.comment.length == 0 && view.state.supportCallResponse.requirePreferenceComments == true" uib-tooltip="Preference comment is required">
-						<div ng-click="openPreferenceCommentModal(preference)"><i class="glyphicon glyphicon-edit preference-comments-ui"
-							ng-class="{'preference-comment-submitted' : preference.comment.length > 0 }"></i>
-								<span>Comments...</span>
-						</div>
-					</div>
-					<div ng-if="preference.comment.length != 0 || view.state.supportCallResponse.requirePreferenceComments != true">
-						<div ng-click="openPreferenceCommentModal(preference)"><i class="glyphicon glyphicon-edit preference-comments-ui"
-							ng-class="{'preference-comment-submitted' : preference.comment.length > 0 }"></i>
-							<span>Comments...</span>
-						</div>
-					</div>
-				</div>
-			</li>
-		</ul>
-		<student-preference-selector>
-		</student-preference-selector>
-
-	</div>
+	<student-preference-selector>
+	</student-preference-selector>
 </div>
diff --git a/...upport/studentSupportCallForm/directives/studentQualifications/studentQualifications.html b/...upport/studentSupportCallForm/directives/studentQualifications/studentQualifications.html
@@ -1,8 +1,8 @@
-<div class="student-qualifications" ng-if="supportCallResponse.collectTeachingQualifications">
+<div class="student-qualifications" ng-show="supportCallResponse.collectTeachingQualifications">
 	<h5>Teaching Qualification</h5>
 	<textarea
 		class="student-qualifications__text"
 		ng-model="supportCallResponse.teachingQualifications"
-		auto-input on-change="updateSupportCallResponse()" on-change-delay="1000">
+		auto-input on-blur="updateStudentQualifications()">
 	</textarea>
 </div>
diff --git a/...lSupport/studentSupportCallForm/directives/studentQualifications/studentQualifications.js b/...lSupport/studentSupportCallForm/directives/studentQualifications/studentQualifications.js
@@ -7,8 +7,8 @@ instructionalSupportApp.directive("studentQualifications", this.studentQualifica
 			supportCallResponse: '<'
 		},
 		link: function (scope, element, attrs) {
-			scope.updateSupportCallResponse = function() {
-				studentActions.updateSupportCallResponse($scope.props.state.supportCallResponse);
+			scope.updateStudentQualifications = function() {
+				studentActions.updateStudentQualifications(scope.supportCallResponse);
 			};
 		}
 	};

diff --git a/app/instructionalSupport/studentSupportCallForm/services/studentActions.js b/app/instructionalSupport/studentSupportCallForm/services/studentActions.js
@@ -24,6 +24,30 @@ instructionalSupportApp.service('studentActions', function ($rootScope, $window,
 				$rootScope.$emit('toast', { message: "Could not add preference.", type: "ERROR" });
 			});
 		},
+		updateStudentComments: function(supportCallResponse) {
+			studentService.updateSupportCallResponse(supportCallResponse).then(function (payload) {
+				$rootScope.$emit('toast', { message: "Updated comments.", type: "SUCCESS" });
+				var action = {
+					type: UPDATE_SUPPORT_CALL_RESPONSE,
+					payload: payload
+				};
+				studentReducers.reduce(action);
+			}, function (err) {
+				$rootScope.$emit('toast', { message: "Could not update comments.", type: "ERROR" });
+			});
+		},
+		updateStudentQualifications: function(supportCallResponse) {
+			studentService.updateSupportCallResponse(supportCallResponse).then(function (payload) {
+				$rootScope.$emit('toast', { message: "Updated qualifications.", type: "SUCCESS" });
+				var action = {
+					type: UPDATE_SUPPORT_CALL_RESPONSE,
+					payload: payload
+				};
+				studentReducers.reduce(action);
+			}, function (err) {
+				$rootScope.$emit('toast', { message: "Could not update qualifications.", type: "ERROR" });
+			});
+		},
 		updateSupportCallResponse: function (supportCallResponse) {
 			studentService.updateSupportCallResponse(supportCallResponse).then(function (payload) {
 				$rootScope.$emit('toast', { message: "Updated preferences", type: "SUCCESS" });

diff --git a/app/instructionalSupport/studentSupportCallForm/services/studentReducers.js b/app/instructionalSupport/studentSupportCallForm/services/studentReducers.js
@@ -22,7 +22,7 @@ instructionalSupportApp.service('studentReducers', function ($rootScope, $log, s
 				case INIT_STATE:
 					courses = {
 						ids: [],
-						list: []
+						list: {}
 					};
 					action.payload.courses.forEach( function(course) {
 						courses.ids.push(course.id);
@@ -38,7 +38,7 @@ instructionalSupportApp.service('studentReducers', function ($rootScope, $log, s
 				case INIT_STATE:
 					preferences = {
 						ids: [],
-						list: []
+						list: {}
 					};
 					action.payload.studentSupportPreferences.forEach( function(preference) {
 						preferences.ids.push(preference.id);
@@ -78,7 +78,7 @@ instructionalSupportApp.service('studentReducers', function ($rootScope, $log, s
 				case INIT_STATE:
 					supportAssignments = {
 						ids: [],
-						list: []
+						list: {}
 					};
 					action.payload.supportAssignments.forEach( function(supportAssignment) {
 						supportAssignments.ids.push(supportAssignment.id);

diff --git a/app/shared/css/ipaTable.css b/app/shared/css/ipaTable.css
diff --git a/app/shared/css/ipaTile.css b/app/shared/css/ipaTile.css
@@ -0,0 +1,5 @@
+.ipa-tile {
+	padding: 5px 25px 10px 25px;
+	background-color: white;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}