From 4435eab423ba3a498bf0a69596adaa4f225dc231 Mon Sep 17 00:00:00 2001 From: James Allen Date: Tue, 17 Jul 2018 11:12:47 +0100 Subject: [PATCH] Update affiliations UI to show specific errors for conflicting emails --- .../views/user/settings/user-affiliations.pug | 57 ++++---- .../UserAffiliationsController.coffee | 138 +++++++++++------- 2 files changed, 107 insertions(+), 88 deletions(-) diff --git a/services/web/app/views/user/settings/user-affiliations.pug b/services/web/app/views/user/settings/user-affiliations.pug index 7333a67a08..32b7d8fdf3 100644 --- a/services/web/app/views/user/settings/user-affiliations.pug +++ b/services/web/app/views/user/settings/user-affiliations.pug @@ -11,9 +11,7 @@ form.row( th.affiliations-table-email #{translate("email")} th.affiliations-table-institution #{translate("institution_and_role")} th.affiliations-table-inline-actions - tbody( - ng-if="!ui.hasError" - ) + tbody tr( ng-repeat="userEmail in userEmails" ) @@ -59,7 +57,7 @@ form.row( .affiliation-change-actions.small a( href - ng-click="saveAffiliationChange();" + ng-click="saveAffiliationChange(userEmail);" ) #{translate("save_or_cancel-save")} |  #{translate("save_or_cancel-or" )}  a( @@ -71,30 +69,26 @@ form.row( // so create a wrapper for the tooltip div.affiliations-table-inline-action-disabled-wrapper( tooltip=translate("please_confirm_your_email_before_making_it_default") - ng-if="!userEmail.default && !userEmail.confirmedAt" + tooltip-enable="!ui.isMakingRequest" + ng-if="!userEmail.default && (!userEmail.confirmedAt || ui.isMakingRequest)" ) button.btn.btn-sm.btn-success.affiliations-table-inline-action( disabled ) #{translate("make_default")} button.btn.btn-sm.btn-success.affiliations-table-inline-action( - ng-if="!userEmail.default && userEmail.confirmedAt" + ng-if="!userEmail.default && (userEmail.confirmedAt && !ui.isMakingRequest)" ng-click="setDefaultUserEmail(userEmail)" ) #{translate("make_default")} |   button.btn.btn-sm.btn-danger.affiliations-table-inline-action( ng-if="!userEmail.default" ng-click="removeUserEmail(userEmail)" + ng-disabled="ui.isMakingRequest" tooltip=translate("remove") ) i.fa.fa-fw.fa-trash tr.affiliations-table-highlighted-row( - ng-if="ui.isLoadingEmails" - ) - td.text-center(colspan="3") - i.fa.fa-fw.fa-spin.fa-refresh - |  #{translate("loading")}... - tr.affiliations-table-highlighted-row( - ng-if="!ui.showAddEmailUI && !ui.isLoadingEmails" + ng-if="!ui.showAddEmailUI && !ui.isMakingRequest" ) td(colspan="3") a( @@ -103,7 +97,7 @@ form.row( ) #{translate("add_another_email")} tr.affiliations-table-highlighted-row( - ng-if="ui.showAddEmailUI" + ng-if="ui.showAddEmailUI && !ui.isLoadingEmails" ) td .affiliations-form-group @@ -149,31 +143,30 @@ form.row( ) td button.btn.btn-sm.btn-primary( - ng-disabled="affiliationsForm.$invalid || ui.isAddingNewEmail" + ng-disabled="affiliationsForm.$invalid || ui.isMakingRequest" ng-click="addNewEmail()" ) - span( - ng-if="!ui.isAddingNewEmail" - ) #{translate("add_new_email")} - span( - ng-if="ui.isAddingNewEmail" - ) - i.fa.fa-fw.fa-spin.fa-refresh - |  #{translate("adding")}... - tbody( - ng-if="ui.hasError" - ) + | #{translate("add_new_email")} + tr.affiliations-table-highlighted-row( + ng-if="ui.isMakingRequest" + ) + td.text-center(colspan="3", ng-if="ui.isLoadingEmails") + i.fa.fa-fw.fa-spin.fa-refresh + |  #{translate("loading")}... + td.text-center(colspan="3", ng-if="ui.isResendingConfirmation") + i.fa.fa-fw.fa-spin.fa-refresh + |  #{translate("sending")}... + td.text-center(colspan="3", ng-if="!ui.isLoadingEmails && !ui.isResendingConfirmation") + i.fa.fa-fw.fa-spin.fa-refresh + |  #{translate("saving")}... tr.affiliations-table-error-row( - ng-if="true" + ng-if="ui.hasError" ) td.text-center(colspan="3") div i.fa.fa-fw.fa-exclamation-triangle - |  #{translate("error_performing_request")} - div - button.btn.btn-xs( - ng-click="acknowledgeError();" - ) #{translate("reload_emails_and_affiliations")} + span(ng-if="!ui.errorMessage")  #{translate("error_performing_request")} + span(ng-if="ui.errorMessage")  {{ui.errorMessage}} hr diff --git a/services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee b/services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee index 66162eda86..14ea1a7d29 100644 --- a/services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee +++ b/services/web/public/coffee/main/affiliations/controllers/UserAffiliationsController.coffee @@ -55,25 +55,23 @@ define [ $scope.affiliationToChange.role = userEmail.affiliation.role $scope.affiliationToChange.department = userEmail.affiliation.department - $scope.saveAffiliationChange = () -> - $scope.ui.isLoadingEmails = true - UserAffiliationsDataService - .addRoleAndDepartment( - $scope.affiliationToChange.email, - $scope.affiliationToChange.role, - $scope.affiliationToChange.department - ) + $scope.saveAffiliationChange = (userEmail) -> + userEmail.affiliation.role = $scope.affiliationToChange.role + userEmail.affiliation.department = $scope.affiliationToChange.department + _resetAffiliationToChange() + _monitorRequest( + UserAffiliationsDataService + .addRoleAndDepartment( + userEmail.email, + userEmail.affiliation.role, + userEmail.affiliation.department + ) + ) .then () -> - _reset() - _getUserEmails() - .catch () -> - $scope.ui.hasError = true + setTimeout () -> _getUserEmails() $scope.cancelAffiliationChange = (email) -> - $scope.affiliationToChange.email = "" - $scope.affiliationToChange.university = null - $scope.affiliationToChange.role = null - $scope.affiliationToChange.department = null + _resetAffiliationToChange() $scope.isChangingAffiliation = (email) -> $scope.affiliationToChange.email == email @@ -82,7 +80,6 @@ define [ $scope.ui.showAddEmailUI = true $scope.addNewEmail = () -> - $scope.ui.isAddingNewEmail = true if !$scope.newAffiliation.university? addEmailPromise = UserAffiliationsDataService .addUserEmail $scope.newAffiliation.email @@ -104,75 +101,104 @@ define [ $scope.newAffiliation.role, $scope.newAffiliation.department ) - addEmailPromise - .then () -> - _reset() - _getUserEmails() - .catch () -> - $scope.ui.hasError = true + + $scope.ui.isAddingNewEmail = true + $scope.ui.showAddEmailUI = false + _monitorRequest(addEmailPromise) + .then () -> + _resetNewAffiliation() + _resetAddingEmail() + setTimeout () -> _getUserEmails() + .finally () -> + $scope.ui.isAddingNewEmail = false $scope.setDefaultUserEmail = (userEmail) -> - $scope.ui.isLoadingEmails = true - UserAffiliationsDataService - .setDefaultUserEmail userEmail.email - .then () -> _getUserEmails() - .catch () -> $scope.ui.hasError = true + _monitorRequest( + UserAffiliationsDataService + .setDefaultUserEmail userEmail.email + ) + .then () -> + for email in $scope.userEmails or [] + email.default = false + userEmail.default = true $scope.removeUserEmail = (userEmail) -> - $scope.ui.isLoadingEmails = true - userEmailIdx = _.indexOf $scope.userEmails, userEmail - if userEmailIdx > -1 - $scope.userEmails.splice userEmailIdx, 1 - UserAffiliationsDataService - .removeUserEmail userEmail.email - .then () -> _getUserEmails() - .catch () -> $scope.ui.hasError = true + $scope.userEmails = $scope.userEmails.filter (ue) -> ue != userEmail + _monitorRequest( + UserAffiliationsDataService + .removeUserEmail userEmail.email + ) $scope.resendConfirmationEmail = (userEmail) -> - $scope.ui.isLoadingEmails = true - UserAffiliationsDataService - .resendConfirmationEmail userEmail.email - .then () -> _getUserEmails() - .catch () -> $scope.ui.hasError = true + $scope.ui.isResendingConfirmation = true + _monitorRequest( + UserAffiliationsDataService + .resendConfirmationEmail userEmail.email + ) + .finally () -> + $scope.ui.isResendingConfirmation = false $scope.acknowledgeError = () -> _reset() _getUserEmails() - _reset = () -> + _resetAffiliationToChange = () -> + $scope.affiliationToChange = + email: "" + university: null + role: null + department: null + + _resetNewAffiliation = () -> $scope.newAffiliation = email: "" country: null university: null role: null department: null + + _resetAddingEmail = () -> + $scope.ui.showAddEmailUI = false + $scope.ui.isValidEmail = false + $scope.ui.isBlacklistedEmail = false + $scope.ui.showManualUniversitySelectionUI = false + + _reset = () -> $scope.ui = hasError: false + errorMessage: "" showChangeAffiliationUI: false - showManualUniversitySelectionUI: false + isMakingRequest: false isLoadingEmails: false isAddingNewEmail: false - showAddEmailUI: false - isValidEmail: false - isBlacklistedEmail: false - $scope.affiliationToChange = - email: "" - university: null - role: null - department: null + isResendingConfirmation: false + _resetAffiliationToChange() + _resetNewAffiliation() + _resetAddingEmail() _reset() + _monitorRequest = (promise) -> + $scope.ui.hasError = false + $scope.ui.isMakingRequest = true + promise + .catch (response) -> + $scope.ui.hasError = true + $scope.ui.errorMessage = response?.data?.message + .finally () -> + $scope.ui.isMakingRequest = false + return promise + # Populates the emails table _getUserEmails = () -> $scope.ui.isLoadingEmails = true - UserAffiliationsDataService - .getUserEmails() + _monitorRequest( + UserAffiliationsDataService + .getUserEmails() + ) .then (emails) -> $scope.userEmails = emails + .finally () -> $scope.ui.isLoadingEmails = false - .catch () -> - $scope.ui.hasError = true - _getUserEmails() ] \ No newline at end of file