Isolate affiliations form in a component.

services/web/app/views/user/settings/user-affiliations.pug

@@ -88,73 +88,10 @@ form.row(
 								href
 								ng-click="selectUniversityManually();"
 							) Let us know
-						.affiliations-form-group(
+						affiliation-form(
-							ng-if="ui.showManualUniversitySelectionUI"
+							affiliation-data="newAffiliation"
-						)
+							show-university-and-country="ui.showManualUniversitySelectionUI"
-							ui-select(
+							show-role-and-department="ui.isValidEmail && newAffiliation.university"
-								ng-model="newAffiliation.country"
-							)
-								ui-select-match(
-									placeholder="Country"
-								) {{ $select.selected.name }}
-								ui-select-choices(
-									repeat="country in countries | filter: $select.search"
-								)
-									span(
-										ng-bind="country.name"
-									s)
-						.affiliations-form-group(
-							ng-if="ui.showManualUniversitySelectionUI"
-						)
-							ui-select(
-								ng-model="newAffiliation.university"
-								ng-disabled="!newAffiliation.country"
-								tagging="addUniversityToSelection"
-								tagging-label="false"
-							)
-								ui-select-match(
-									placeholder="Institution"
-								) {{ $select.selected.name }}
-								ui-select-choices(
-									repeat="university in universities | filter: $select.search"
-								)
-									span(
-										ng-bind="university.name"
-									)
-						.affiliations-form-group(
-							ng-if="ui.isValidEmail && newAffiliation.university"
-						)
-							ui-select(
-								ng-model="newAffiliation.role"
-								tagging
-								tagging-label="false"
-							)
-								ui-select-match(
-									placeholder="Role"
-								) {{ $select.selected }}
-								ui-select-choices(
-									repeat="role in roles | filter: $select.search"
-								)
-									span(
-										ng-bind="role"
-									)
-
-						.affiliations-form-group(
-							ng-if="ui.isValidEmail && newAffiliation.university"
-						)
-							ui-select(
-								ng-model="newAffiliation.department"
-								tagging
-								tagging-label="false"
-							)
-								ui-select-match(
-									placeholder="Department"
-								) {{ $select.selected }}
-								ui-select-choices(
-									repeat="department in departments | filter: $select.search"
-								)
-									span(
-										ng-bind="department"
 						)
 					td
 						button.btn.btn-primary(
@@ -170,3 +107,73 @@ form.row(
 								i.fa.fa-fw.fa-spin.fa-refresh
 								|  Adding...
 		hr
+
+script(type="text/ng-template", id="affiliationFormTpl")
+	.affiliations-form-group(
+		ng-if="$ctrl.showUniversityAndCountry"
+	)
+		ui-select(
+			ng-model="$ctrl.affiliationData.country"
+		)
+			ui-select-match(
+				placeholder="Country"
+			) {{ $select.selected.name }}
+			ui-select-choices(
+				repeat="country in $ctrl.countries | filter: $select.search"
+			)
+				span(
+					ng-bind="country.name"
+				)
+	.affiliations-form-group(
+		ng-if="$ctrl.showUniversityAndCountry"
+	)
+		ui-select(
+			ng-model="$ctrl.affiliationData.university"
+			ng-disabled="!$ctrl.affiliationData.country"
+			tagging="$ctrladdUniversityToSelection"
+			tagging-label="false"
+		)
+			ui-select-match(
+				placeholder="Institution"
+			) {{ $select.selected.name }}
+			ui-select-choices(
+				repeat="university in $ctrl.universities | filter: $select.search"
+			)
+				span(
+					ng-bind="university.name"
+				)
+	.affiliations-form-group(
+		ng-if="$ctrl.showRoleAndDepartment"
+	)
+		ui-select(
+			ng-model="$ctrl.affiliationData.role"
+			tagging
+			tagging-label="false"
+		)
+			ui-select-match(
+				placeholder="Role"
+			) {{ $select.selected }}
+			ui-select-choices(
+				repeat="role in $ctrl.roles | filter: $select.search"
+			)
+				span(
+					ng-bind="role"
+				)
+
+	.affiliations-form-group(
+		ng-if="$ctrl.showRoleAndDepartment"
+	)
+		ui-select(
+			ng-model="$ctrl.affiliationData.department"
+			tagging
+			tagging-label="false"
+		)
+			ui-select-match(
+				placeholder="Department"
+			) {{ $select.selected }}
+			ui-select-choices(
+				repeat="department in $ctrl.departments | filter: $select.search"
+			)
+				span(
+					ng-bind="department"
+				)

services/web/public/coffee/main.coffee

@@ -20,6 +20,7 @@ define [
 	"main/subscription/team-invite-controller"
 	"main/contact-us"
 	"main/learn"
+	"main/affiliations/components/affiliationForm"
 	"main/affiliations/controllers/UserAffiliationsController"
 	"main/affiliations/factories/UserAffiliationsDataService"
 	"main/keys"

services/web/public/coffee/main/affiliations/components/affiliationForm.coffee

@@ -0,0 +1,53 @@
+define [
+	"base"
+], (App) ->
+	affiliationFormController = ($scope, $element, $attrs, UserAffiliationsDataService) ->
+		ctrl = @
+		ctrl.roles = []
+		ctrl.departments = []
+		ctrl.countries = []
+		ctrl.universities = []
+		_defaultDepartments = []
+
+		ctrl.addUniversityToSelection = (universityName) -> 
+			{ name: universityName, isUserSuggested: true }
+		# Populates the countries dropdown
+		UserAffiliationsDataService
+			.getCountries()
+			.then (countries) -> ctrl.countries = countries
+		# Populates the roles dropdown
+		UserAffiliationsDataService
+			.getDefaultRoleHints()
+			.then (roles) -> ctrl.roles = roles 
+		# Fetches the default department hints
+		UserAffiliationsDataService
+			.getDefaultDepartmentHints()
+			.then (departments) -> 
+				_defaultDepartments = departments
+		# Populates the universities dropdown (after selecting a country)
+		$scope.$watch "$ctrl.affiliationData.country", (newSelectedCountry, prevSelectedCountry) ->
+			if newSelectedCountry? and newSelectedCountry != prevSelectedCountry
+				ctrl.affiliationData.university = null
+				ctrl.affiliationData.role = null
+				ctrl.affiliationData.department = null
+				UserAffiliationsDataService
+					.getUniversitiesFromCountry(newSelectedCountry)
+					.then (universities) -> ctrl.universities = universities
+		# Populates the departments dropdown (after selecting a university)
+		$scope.$watch "$ctrl.affiliationData.university", (newSelectedUniversity, prevSelectedUniversity) ->
+			if newSelectedUniversity? and newSelectedUniversity != prevSelectedUniversity
+				if newSelectedUniversity.departments?.length > 0
+					ctrl.departments = _.uniq newSelectedUniversity.departments
+				else 
+					ctrl.departments = _defaultDepartments
+
+		return
+
+	App.component "affiliationForm", {
+		bindings:
+			affiliationData: "="
+			showUniversityAndCountry: "<"
+			showRoleAndDepartment: "<"
+		controller: affiliationFormController
+		templateUrl: "affiliationFormTpl"
+	}

services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee

@@ -3,12 +3,6 @@ define [
 ], (App) ->
 	App.controller "UserAffiliationsController", ["$scope", "UserAffiliationsDataService", "$q", "_", ($scope, UserAffiliationsDataService, $q, _) ->
 		$scope.userEmails = []
-		$scope.countries = []
-		$scope.universities = []
-		$scope.roles = []
-		$scope.departments = []
-
-		_defaultDepartments = []
 
 		LOCAL_AND_DOMAIN_REGEX = /([^@]+)@(.+)/
 		EMAIL_REGEX = /^([A-Za-z0-9_\-\.]+)@([^\.]+)\.([A-Za-z0-9_\-\.]+)([^\.])$/
@@ -20,9 +14,6 @@ define [
 			else
 				{ local: null, domain: null }
 
-		$scope.addUniversityToSelection = (universityName) -> 
-			{ name: universityName, isUserSuggested: true }
-
 		$scope.getEmailSuggestion = (userInput) ->
 			userInputLocalAndDomain = _matchLocalAndDomain(userInput)
 			$scope.ui.isValidEmail = EMAIL_REGEX.test userInput
@@ -97,11 +88,11 @@ define [
 				.removeUserEmail email
 				.then () -> _getUserEmails()
 
-		$scope.getDepartments = () ->
+		# $scope.getDepartments = () ->
-			if $scope.newAffiliation.university?.departments.length > 0
+		# 	if $scope.newAffiliation.university?.departments.length > 0
-				_.uniq $scope.newAffiliation.university.departments
+		# 		_.uniq $scope.newAffiliation.university.departments
-			else
+		# 	else
-				UserAffiliationsDataService.getDefaultDepartmentHints()
+		# 		UserAffiliationsDataService.getDefaultDepartmentHints()
 
 		_reset = () ->
 			$scope.newAffiliation =
@@ -129,38 +120,4 @@ define [
 					$scope.ui.isLoadingEmails = false
 		_getUserEmails()
 
-		# Populates the countries dropdown
-		UserAffiliationsDataService
-			.getCountries()
-			.then (countries) -> $scope.countries = countries
-
-		# Populates the roles dropdown
-		UserAffiliationsDataService
-			.getDefaultRoleHints()
-			.then (roles) -> $scope.roles = roles 
-
-		# Fetches the default department hints
-		UserAffiliationsDataService
-			.getDefaultDepartmentHints()
-			.then (departments) -> 
-				_defaultDepartments = departments
-
-		# Populates the universities dropdown (after selecting a country)
-		$scope.$watch "newAffiliation.country", (newSelectedCountry, prevSelectedCountry) ->
-			if newSelectedCountry? and newSelectedCountry != prevSelectedCountry
-				$scope.newAffiliation.university = null
-				$scope.newAffiliation.role = null
-				$scope.newAffiliation.department = null
-				UserAffiliationsDataService
-					.getUniversitiesFromCountry(newSelectedCountry)
-					.then (universities) -> $scope.universities = universities
-
-		# Populates the departments dropdown (after selecting a university)
-		$scope.$watch "newAffiliation.university", (newSelectedUniversity, prevSelectedUniversity) ->
-			if newSelectedUniversity? and newSelectedUniversity != prevSelectedUniversity
-				if newSelectedUniversity.departments?.length > 0
-					$scope.departments = _.uniq newSelectedUniversity.departments
-				else 
-					$scope.departments = _defaultDepartments
-
 	]