StudentSupportCallForm: Merge ipaIconButton and ipaIcon components #1450

app/instructionalSupport/studentSupportCallForm/directives/studentAvailabilities/studentAvailabilities.html

@@ -18,7 +18,10 @@ <h5>Please indicate your un-availabilities</h5>
 	</div>
 
 	<div ng-show="state.supportCallResponse.collectAvailabilityByGrid">
-		<grid-available></grid-available>
+		<grid-available
+		read-only="false"
+		support-call-response="state.supportCallResponse">
+		</grid-available>
 	</div>
 	<div ng-show="state.supportCallResponse.collectAvailabilityByCrn">
 		<crn-available></crn-available>

app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.html

@@ -26,18 +26,18 @@
 				<div class="ipa-table__body-row" ng-repeat="preference in state.preferences | orderBy: 'priority'">
 					<div class="ipa-table__body-cell ipa-table__body-cell--first ipa-table__body-cell--small">
 						<div class="student-preference-table__priority-ui">
-							<ipa-icon-button
+							<ipa-button
 								icon-class="'glyphicon glyphicon-chevron-up'"
 								on-click="updatePreferencesOrder(preference, -1)"
 								is-disabled="$first"
 								size="'slim'">
-							</ipa-icon-button>
-							<ipa-icon-button
+							</ipa-button>
+							<ipa-button
 								icon-class="'glyphicon glyphicon-chevron-down'"
 								on-click="updatePreferencesOrder(preference, 1)"
 								is-disabled="$last"
 								size="'slim'">
-							</ipa-icon-button>
+							</ipa-button>
 						</div>
 						<div class="student-preference-table__priority-label">
 							{{ preference.priority }}
@@ -49,18 +49,18 @@
 						{{ preference.subjectCode }} {{ preference.courseNumber }} - {{ preference.sequencePattern }}
 					</div>
 					<div class="ipa-table__body-cell ipa-table__body-cell--medium">
-						<ipa-icon-button
+						<ipa-button
 							on-click="openPreferenceCommentModal(preference)"
-							button-text="'Add Comments'">
-						</ipa-icon-button>
+							text="'Add Comments'">
+						</ipa-button>
 					</div>
 					<div class="ipa-table__body-cell ipa-table__body-cell--small">
-						<ipa-icon-button
+						<ipa-button
 							icon-class="'glyphicon glyphicon-trash student-preference-table__trash'"
 							on-click="deletePreference(preference)"
 							tooltip-message="'Delete preference'"
 							confirm-message="'Are you sure you want to delete this preference?'">
-						</ipa-icon-button>
+						</ipa-button>
 					</div>
 				</div>
 

app/instructionalSupport/studentSupportCallForm/services/studentActions.js

@@ -130,6 +130,57 @@ instructionalSupportApp.service('studentActions', function ($rootScope, $window,
 			studentReducers.reduce({
 				type: CLOSE_PREFERENCE_COMMENT_MODAL
 			});
+		},
+		addCrnToAvailability: function(crn, appliedCrns, supportCallResponse) {
+			debugger;
+		},
+		removeCrnFromAvailability: function(crn, timeSlots, supportCallResponse) {
+			debugger;
+		},
+		calculateTimesForCrn: function(crn, courses, sectionGroups, sections, activities) {
+			var section = null;
+
+			for (var i = 0; i < sections.ids.length; i++) {
+				var slotSection = sections.list[sections.ids[i]];
+
+				if (section.crn == crn) {
+					section = angular.copy(slotSection);
+					break;
+				}
+			}
+
+			// No crn matched section
+			if (section == null) {
+				studentReducers.reduce({
+					type: CALCULATE_TIMESLOTS_FOR_CRN,
+					crn: crn
+				});
+				return;
+			}
+
+			// Calculate timeSlots from section - activities
+			var timeSlots = activities.ids.filter(function(activityId) {
+				activities.list[activityId].sectionId == section.id;
+			}).map(function(activityId) {
+				var activity = activities.list[activityId];
+				debugger;
+			});
+			debugger;
+			//TODO: Calculate timeSlots from sectionGroup - activities
+
+
+			//TODO: combine timeslots
+
+			// Calculate description
+			var course = courses.list[sectionGroups.list[section.sectionGroupId].courseId];
+			var description = course.subjectCode + " " + course.courseNumber + " " + section.sequenceNumber;
+
+			studentReducers.reduce({
+				type: CALCULATE_TIMESLOTS_FOR_CRN,
+				crn: crn,
+				timeslots: timeSlots,
+				description: description
+			});
 		}
 	};
 });

app/instructionalSupport/studentSupportCallForm/services/studentReducers.js

@@ -17,6 +17,42 @@ instructionalSupportApp.service('studentReducers', function ($rootScope, $log, s
 					return sectionGroups;
 			}
 		},
+		_sectionReducers: function (action, sections) {
+			switch (action.type) {
+				case INIT_STATE:
+					sections = {
+						ids: [],
+						list: {},
+						crn: {}
+					};
+					action.payload.sections.forEach( function(section) {
+						sections.ids.push(section.id);
+						sections.list[section.id] = section;
+						if (section.crn && section.crn.length > 0) {
+							sections.crn[section.crn] = section;
+						}
+					});
+					return sections;
+				default:
+					return sections;
+			}
+		},
+		_activityReducers: function (action, activities) {
+			switch (action.type) {
+				case INIT_STATE:
+					activities = {
+						ids: [],
+						list: {}
+					};
+					action.payload.activities.forEach( function(activity) {
+						activities.ids.push(activity.id);
+						activities.list[activity.id] = activity;
+					});
+					return activities;
+				default:
+					return activities;
+			}
+		},
 		_courseReducers: function (action, courses) {
 			switch (action.type) {
 				case INIT_STATE:
@@ -167,6 +203,8 @@ instructionalSupportApp.service('studentReducers', function ($rootScope, $log, s
 			newState.preferences = scope._preferenceReducers(action, scope._state.preferences);
 			newState.supportCallResponse = scope._supportCallResponseReducers(action, scope._state.supportCallResponse);
 			newState.ui = scope._uiReducers(action, scope._state.ui);
+			newState.sections = scope._sectionReducers(action, scope._state.sections);
+			newState.activities = scope._activityReducers(action, scope._state.activities);
 
 			scope._state = newState;
 

app/shared/directives/ipaButton/ipaButton.css

@@ -4,54 +4,41 @@
 	font-size: 12px;
 	color: #24292e;
 	font-weight: 500;
-	padding: 3px 6px 3px 6px;
 	user-select: none;
+	background-color: white;
+	border: 1px solid rgba(27,31,35,0.2);
+	border-radius: 0.25em;
+	cursor: pointer;
+	width: fit-content;
 }
 
-.ipa-button .icon-container {
+.ipa-button__icon-container {
+	padding-right: 10px;
+	padding-left: 10px;
+	padding-top: 7px;
+	padding-bottom: 7px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.ipa-button .button-text-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
+.ipa-button__text {
 	padding-left: 5px;
 }
 
-.ipa-button.skin-light {
-	background-color: #eff3f6;
-	background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
-	border: 1px solid rgba(27,31,35,0.2);
-	border-radius: 0.25em;
-	cursor: pointer;
+.ipa-button--disabled {
+	cursor: default;
 }
 
-.ipa-button.skin-light:hover {
+.ipa-button:hover:not(.ipa-button--disabled) {
 	background-color: #e6ebf1;
 	background-image: linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%);
 	border-color: rgba(27,31,35,0.35);
 }
 
-.ipa-button.skin-light.disabled,
-.ipa-button.skin-light.disabled:hover {
-
-}
-
-.ipa-button.skin-dark {
-	background-color: #eff3f6;
-	background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
-	border: 1px solid rgba(27,31,35,0.2);
-	border-radius: 0.25em;
-	cursor: pointer;
-}
-
-.ipa-button.skin-danger {
-	background-color: #eff3f6;
-	background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
-	border: 1px solid rgba(27,31,35,0.2);
-	border-radius: 0.25em;
-	cursor: pointer;
+.ipa-button__icon-container--slim {
+	padding-top: 0px;
+	padding-bottom: 0px;
+	padding-right: 5px;
+	padding-left: 5px;
 }

app/shared/directives/ipaButton/ipaButton.html

@@ -1,13 +1,49 @@
 <div
 class="ipa-button"
-ng-class="buttonClass"
-ng-class="{ 'skin-light' : color == 'light', 'skin-dark' : color == 'dark', 'skin-danger' : color == 'danger' }"
-ng-click="onClick()">
-	<div class="icon-container">
+uib-tooltip="{{tooltipMessage}}"
+tooltip-placement="bottom"
+ng-class="{'ipa-button--disabled': isDisabled }">
+
+	<div ng-show="!(isDisabled)">
+		<!-- with confirmation -->
+		<div
+		ng-show="confirmMessage && confirmMessage.length > 0"
+		class="ipa-button__icon-container"
+		ng-class="{'ipa-button__icon-container--slim': size == 'slim'}"
+		confirm-button="onClick()"
+		message="{{confirmMessage}}"
+		yes="Confirm" no="Cancel" placement="top">
+			<div class="ipa-button__text" ng-show="text">
+				{{ text }}
+			</div>
+			<div ng-class="iconClass">
+			</div>
+		</div>
+
+		<!-- without confirmation -->
+		<div
+		ng-show="!confirmMessage || confirmMessage.length == 0"
+		class="ipa-button__icon-container"
+		ng-class="{'ipa-button__icon-container--slim': size == 'slim'}"
+		ng-click="onClick()">
+		<div class="ipa-button__text" ng-show="text">
+			{{ text }}
+		</div>
 		<div ng-class="iconClass">
+			</div>
 		</div>
 	</div>
-	<div class="button-text-container">
-		{{ buttonText }}
+
+	<!-- disabled state -->
+	<div ng-show="(isDisabled)">
+		<div
+		class="ipa-button__icon-container"
+		ng-class="{'ipa-button__icon-container--slim': size == 'slim'}">
+			<div class="ipa-button__text" ng-show="text">
+				{{ text }}
+			</div>
+			<div ng-class="iconClass">
+			</div>
+		</div>
 	</div>
 </div>

app/shared/directives/ipaButton/ipaButton.js

@@ -1,6 +1,6 @@
 /** Example Usage:
 <ipa-button
-	button-text="'waffle'"
+	text="'waffle'"
 	color="'light'"
 	icon-class="'glyphicon glyphicon-envelope'"
 	on-click="testComment()">
@@ -14,14 +14,13 @@ sharedApp.directive("ipaButton", this.ipaButton = function () {
 		templateUrl: 'ipaButton.html',
 		replace: true,
 		scope: {
-			buttonText: '<?',
 			onClick: '&?',
-			argument: '<?',
-			isDisabled: '<?',
-			hoverText: '<?',
-			color: '<?',
 			iconClass: '<?',
-			buttonClass: '<?'
+			isDisabled: '<?',
+			tooltipMessage: '<?',
+			confirmMessage: '<?',
+			text: '<?',
+			size: '<?'
 		},
 		link: function(scope, element, attrs) {
 			// Intentionally empty