Add basic affiliations styles, data services and controller.

This commit is contained in:
Paulo Reis 2018-06-15 11:30:15 +01:00
parent a8cb126c4b
commit 5ada231d15
3 changed files with 129 additions and 0 deletions

View file

@ -0,0 +1,53 @@
define [
"base"
], (App) ->
App.controller "UserAffiliationsController", ["$scope", "UserAffiliationsDataService", "$q", ($scope, UserAffiliationsDataService, $q) ->
$scope.countries = []
$scope.universities = []
$scope.newAffiliation =
email: ""
country: null
university: null
role: null
department: null
autoDetectMode: true
EMAIL_REGEXP = /([^@]+)@(.+)/
_matchEmail = (email) ->
match = email.match EMAIL_REGEXP
if match?
{ local: match[1], domain: match[2] }
else
{ local: null, domain: null }
$scope.addUniversityToSelection = (universityName) ->
{ name: universityName, country_code: $scope.newAffiliation.country.code }
$scope.getEmailSuggestion = (userInput) ->
matchedEmail = _matchEmail(userInput)
if matchedEmail.domain?
UserAffiliationsDataService.getUniversityDomainFromPartialDomainInput(matchedEmail.domain)
.then (universityDomain) ->
$scope.newAffiliation.university = universityDomain.university.name
$scope.newAffiliation.department = universityDomain.department
$q.resolve "#{matchedEmail.local}@#{universityDomain.hostname}"
.catch () ->
$scope.newAffiliation.university = null
$scope.newAffiliation.department = null
$q.reject null
else
$q.resolve null
UserAffiliationsDataService
.getCountries()
.then (countries) -> $scope.countries = countries
$scope.$watch "newAffiliation.country", (newSelectedCountry, prevSelectedCountry) ->
if newSelectedCountry? and newSelectedCountry != prevSelectedCountry
$scope.newAffiliation.university = null
UserAffiliationsDataService
.getUniversitiesFromCountry(newSelectedCountry)
.then (universities) -> $scope.universities = universities
]

File diff suppressed because one or more lines are too long

View file

@ -10,3 +10,40 @@
margin-bottom: 4px;
}
}
.affiliations-form-row {
display: flex;
flex-wrap: wrap;
margin-left: -(@grid-gutter-width / 2);
margin-right: -(@grid-gutter-width / 2);
@media (min-width: @screen-sm-min) {
align-items: flex-end;
}
}
.affiliation-col-4,
.affiliation-col-8 {
flex: 0 0 100%;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
margin-bottom: (@grid-gutter-width / 2);
}
.affiliation-col-4 {
@media (min-width: @screen-sm-min) {
flex-basis: (4 / 12) * 100%;;
}
}
.affiliation-col-8 {
@media (min-width: @screen-sm-min) {
flex-basis: (8 / 12) * 100%;
}
}
.affiliation-col-align-right {
@media (min-width: @screen-sm-min) {
display: flex;
justify-content: flex-end;
}
}