Skip to content

Commit

Permalink
Merge pull request #1530 from eciis/invites-mobile-page
Browse files Browse the repository at this point in the history
Invites mobile page
  • Loading branch information
JuliePessoa authored Mar 15, 2019
2 parents 6f3b0fa + d01d45f commit b094292
Show file tree
Hide file tree
Showing 13 changed files with 242 additions and 54 deletions.
5 changes: 4 additions & 1 deletion frontend/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,10 @@
url: "/inviteInstitution",
views: {
user_content: {
templateUrl: "app/invites/invite_institution.html",
templateUrl: Utils.selectFieldBasedOnScreenSize(
"app/invites/invite_institution.html",
"app/invites/invite_institution_mobile.html",
SCREEN_SIZES.SMARTPHONE),
controller: "InviteInstitutionController as inviteInstCtrl"
}
}
Expand Down
2 changes: 2 additions & 0 deletions frontend/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
<link rel="stylesheet" type="text/css" href="app/institution/base_institution.css">
<link rel="stylesheet" type="text/css" href="app/institution/descriptionInst/description_inst.css">
<link rel="stylesheet" type="text/css" href="app/invites/new_invite.css">
<link rel="stylesheet" type="text/css" href="app/invites/invite_institution_mobile.css">
<link rel="stylesheet" type="text/css" href="app/sideMenu/side_menu.css">
<link rel="stylesheet" type="text/css" href="app/user/user_profile.css">
<link rel="stylesheet" type="text/css" href="app/user/user_profile_info.css">
Expand Down Expand Up @@ -325,6 +326,7 @@

<!-- Institution Showcase component -->
<script src="app/utils/entityShowcase/entityShowcase.component.js"></script>
<script src="app/utils/entityShowcase/entityShowcase.factory.js"></script>

<!-- Icon Button Component -->
<script src="app/utils/iconButton/iconButton.component.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

app.controller("ManagementMembersController", function InviteUserController(
InviteService, $state, $mdDialog, InstitutionService, AuthService, MessageService,
RequestInvitationService, ProfileService, STATES) {
RequestInvitationService, ProfileService, STATES, EntityShowcase) {
var manageMemberCtrl = this;
var MAX_EMAILS_QUANTITY = 10;

Expand Down Expand Up @@ -112,12 +112,8 @@
* Constructs the object that will be used to create a button
* in the entity-showcase component
*/
manageMemberCtrl.getEntityShowcaseBtn = (icon, color, action, params) => {
return {
icon: icon,
iconColor: color,
action: () => action(...params)
};
manageMemberCtrl.getEntityShowcaseBtn = (...args) => {
return EntityShowcase.createIconBtn(...args);
};

manageMemberCtrl.sendUserInvite = function sendInvite(loadedEmails) {
Expand Down
21 changes: 4 additions & 17 deletions frontend/invites/inviteInstHierarchieController.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

app.controller("InviteInstHierarchieController", function InviteInstHierarchieController(
InviteService, STATES, $mdDialog, $state, AuthService, InstitutionService,
MessageService, RequestInvitationService, RequestDialogService, $q) {
MessageService, RequestInvitationService, RequestDialogService, $q, EntityShowcase) {

var inviteInstHierCtrl = this;
var institutionKey = $state.params.institutionKey;
Expand Down Expand Up @@ -424,22 +424,9 @@
inviteInstHierCtrl.limitString = function limitString(string, size) {
return Utils.limitString(string, size);
};

/**
* Generates an object with the properties used to create an rightIconBtn
* in the EntityShowCase component
* @param {string} - icon tho be showed as a button
* @param {function} - action function to be called when the button is clicked
* @param {array} - params that will be necessary to action function to be called
* @param {boolean} - hideBtn flag used to hide the button if true
*/
inviteInstHierCtrl.createIconBtn = (icon, action, params, hideBtn) => {
return {
icon: icon,
iconColor: '#009688',
action: () => action(...params),
showIf: () => hideBtn === undefined ? true : hideBtn
};

inviteInstHierCtrl.createIconBtn = (...args) => {
return EntityShowcase.createIconBtn(...args);
};
});
})();
38 changes: 28 additions & 10 deletions frontend/invites/inviteInstitutionController.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

app.controller("InviteInstitutionController", function InviteInstitutionController(
InviteService, $state, AuthService, InstitutionService, RequestInvitationService,
STATES, $mdDialog, MessageService, StateLinkRequestService, STATE_LINKS) {
STATES, $mdDialog, MessageService, EntityShowcase, STATE_LINKS) {
var inviteInstCtrl = this;

inviteInstCtrl.invite = {};
Expand All @@ -22,6 +22,10 @@

inviteInstCtrl.user = AuthService.getCurrentUser();

inviteInstCtrl.$onInit = () => {
inviteInstCtrl._loadSentInvitations();
inviteInstCtrl._loadSentRequests();
};

inviteInstCtrl.toggleElement = function toggleElement(flagName) {
inviteInstCtrl[flagName] = !inviteInstCtrl[flagName];
Expand All @@ -31,6 +35,11 @@
inviteInstCtrl.invite = {};
};

inviteInstCtrl.resetForm = () => {
inviteInstCtrl.inviteInstForm.$setPristine();
inviteInstCtrl.inviteInstForm.$setUntouched();
};

inviteInstCtrl.checkInstInvite = function checkInstInvite(ev) {
var promise;
var currentInstitutionKey = inviteInstCtrl.user.current_institution.key;
Expand Down Expand Up @@ -80,6 +89,8 @@
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
}).then(_ => {
inviteInstCtrl.resetForm();
});
};

Expand All @@ -93,6 +104,7 @@
inviteInstCtrl.sent_invitations.push(invite);
inviteInstCtrl.showInvites = true;
inviteInstCtrl.showSendInvites = false;
inviteInstCtrl.resetForm();
MessageService.showToast('Convite enviado com sucesso!');
});
return promise;
Expand Down Expand Up @@ -153,7 +165,7 @@
angular.element($cancelButton).addClass('green-button-text');
}

function loadSentRequests() {
inviteInstCtrl._loadSentRequests = () => {
var institution_key = inviteInstCtrl.user.current_institution.key;
RequestInvitationService.getRequestsInst(institution_key).then(function success(requests) {
var isSentRequest = createRequestSelector('sent', 'REQUEST_INSTITUTION');
Expand All @@ -163,7 +175,7 @@
});
}

function loadSentInvitations() {
inviteInstCtrl._loadSentInvitations = () => {
InviteService.getSentInstitutionInvitations().then(function success(response) {
var requests = response;
getSentInvitations(requests);
Expand All @@ -172,6 +184,10 @@
$state.go(STATES.HOME);
});
}

inviteInstCtrl.hasNewRequests = () => {
return inviteInstCtrl.sent_requests.length > 0;
};

function getSentInvitations(requests) {
var isSentInvitation = createRequestSelector('sent', 'INSTITUTION');
Expand All @@ -189,15 +205,17 @@
}
}

inviteInstCtrl.$onInit = () => {
if (Utils.isMobileScreen()) {
StateLinkRequestService.showLinkRequestDialog(STATE_LINKS.INVITE_INSTITUTION, STATES.HOME);
inviteInstCtrl.goToActiveInst = (institution) => {
if (institution.state === "active") {
inviteInstCtrl.goToInst(institution.key);
} else {
MessageService.showToast("Institutição inativa!");
}
};

(function main() {
loadSentInvitations();
loadSentRequests();
})();
inviteInstCtrl.createIconBtn = (...args) => {
return EntityShowcase.createIconBtn(...args)
};

});
})();
53 changes: 53 additions & 0 deletions frontend/invites/invite_institution_mobile.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.invite-inst {
display: grid;
padding: 1em 0;
}

.invite-inst__toolbar {
position: fixed;
z-index: 3;
width: 100%;
}

.invite-inst__toolbar__title {
color: #737474;
text-transform: uppercase;
white-space: nowrap;
}

.invite-inst__cards {
grid-row-start: 2;
display: grid;
grid-row-gap: 1em;
padding-top: 25%;
}

.invite-inst__card__content {
display: grid;
grid-row-gap: 1em;
}

.invite-inst__card__content md-input-container {
padding-right: 0;
margin: 0;
color: #9E9E9E;
}

.invite-inst__btns {
text-align: end;
margin-bottom: 0.5em;
}

.invite-inst__btn {
width: min-content;
justify-self: end;
background-color: #009688;
color: white;
margin-right: 0;
}

.invite-inst__list {
display: grid;
grid-row-gap: 0.5em;
max-height: 18em;
}
87 changes: 87 additions & 0 deletions frontend/invites/invite_institution_mobile.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<white-toolbar
primary-button-icon="keyboard_arrow_left"
title="Convites"
title-class="invite-inst__toolbar__title"
class="invite-inst__toolbar">
</white-toolbar>

<md-content class="invite-inst">
<div class="invite-inst__cards">
<clickable-card icon="send" title="Convidar Instituição">
<div class="invite-inst__card__content">
<form name="inviteInstCtrl.inviteInstForm">
<md-input-container md-no-float class="md-block">
<input placeholder="Nome da instituição convidada" class="green-input" type="text"
ng-model="inviteInstCtrl.invite.suggestion_institution_name"
aria-label="Nome da instituição convidada" required>
</md-input-container>
<md-input-container md-no-float class="md-block">
<input placeholder="E-mail da instituição" class="green-input" type="email"
ng-model="inviteInstCtrl.invite.invitee"
aria-label="E-mail da instituição" required>
</md-input-container>
</form>
<div class="invite-inst__btns">
<md-button class="invite-inst__btn" ng-disabled="inviteInstCtrl.inviteInstForm.$pristine"
ng-click="inviteInstCtrl.cancelInvite()">
CANCELAR
</md-button>
<md-button class="invite-inst__btn" ng-disabled="inviteInstCtrl.inviteInstForm.$invalid"
ng-click="inviteInstCtrl.checkInstInvite($event)">
ENVIAR
</md-button>
</div>
</div>
</clickable-card>

<clickable-card icon="email" title="Convites Enviados">
<div class="invite-inst__card__content">
<search-field keyword="searchSentInvites"></search-field>
<md-content class="invite-inst__list custom-scrollbar">
<entity-showcase ng-repeat="invite in inviteInstCtrl.sent_invitations | filter: searchSentInvites"
icon="account_balance"
title="invite.stub_institution.name || invite.suggestion_institution_name"
subtitles-list="[
invite.invitee,
'Convidado por: '+ invite.sender_name
]"
right-icon-btns="[
inviteInstCtrl.createIconBtn('send', null, inviteInstCtrl.resendInvite, [invite.key, $event])
]">
</entity-showcase>
</md-content>
</div>
</clickable-card>

<clickable-card icon="announcement" title="Convites Requisitados" show-notification="inviteInstCtrl.hasNewRequests()">
<search-field keyword="searchSentRequests"></search-field>
<md-content class="invite-inst__list custom-scrollbar">
<entity-showcase ng-repeat="request in inviteInstCtrl.sent_requests | filter: searchSentRequests"
icon="account_balance"
title="request.institution.name || request.requested_inst_name"
subtitles-list="[
'Requisitado por: '+ request.sender_name,
'E-mail: ' + request.sender[0]
]"
right-icon-btns="[
inviteInstCtrl.createIconBtn('error', '#009688', inviteInstCtrl.showPendingRequestDialog, [$event, request])
]">
</entity-showcase>
</md-content>
</clickable-card>

<clickable-card icon="check_circle" title="Convites Aceitos">
<search-field keyword="searchAcceptedInvite"></search-field>
<md-content class="invite-inst__list custom-scrollbar">
<entity-showcase ng-repeat="acceptedInvite in inviteInstCtrl.accepted_invitations | filter: searchAcceptedInvite"
icon="account_balance"
title="acceptedInvite.stub_institution.name"
subtitles-list="[
'Nome sugerido: '+ acceptedInvite.suggestion_institution_name,
]"
left-action="inviteInstCtrl.goToActiveInst(acceptedInvite.stub_institution)">
</entity-showcase>
</md-content>
</clickable-card>
</div>
</md-content>
15 changes: 13 additions & 2 deletions frontend/test/specs/invites/inviteInstitutionControllerSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@
status: 'sent',
}

const form = {
'$setPristine': () => {},
'$setUntouched': () => {}
};

var INSTITUTION_SEARCH_URI = '/api/search/institution?value=';

var invite = new Invite({invitee: "[email protected]", suggestion_institution_name : "New Institution", key: '123'}, 'institution', institution.key);
Expand Down Expand Up @@ -71,6 +76,8 @@
};
state.params.institutionKey = institution.key;
inviteinstitutionCtrl = createCtrl();
inviteinstitutionCtrl.$onInit();
inviteinstitutionCtrl.inviteInstForm = form;
httpBackend.flush();
}));

Expand Down Expand Up @@ -99,6 +106,7 @@
}
};
});
spyOn(inviteinstitutionCtrl, 'resetForm');
inviteinstitutionCtrl.invite = invite;
});

Expand All @@ -107,6 +115,7 @@
var promise = inviteinstitutionCtrl.sendInstInvite(invite);
promise.then(function() {
expect(inviteService.sendInviteInst).toHaveBeenCalledWith(invite);
expect(inviteinstitutionCtrl.resetForm).toHaveBeenCalled();
done();
});
});
Expand Down Expand Up @@ -218,9 +227,11 @@

describe('$onInit', function () {
it('should call showLinkRequestDialog if in mobile screen', function () {
spyOn(stateLinkRequestService, 'showLinkRequestDialog');
spyOn(inviteinstitutionCtrl, '_loadSentRequests');
spyOn(inviteinstitutionCtrl, '_loadSentInvitations');
inviteinstitutionCtrl.$onInit();
expect(stateLinkRequestService.showLinkRequestDialog).toHaveBeenCalledWith(stateLinks.INVITE_INSTITUTION, states.HOME);
expect(inviteinstitutionCtrl._loadSentRequests).toHaveBeenCalled();
expect(inviteinstitutionCtrl._loadSentInvitations).toHaveBeenCalled();
});
});
}));
Loading

0 comments on commit b094292

Please sign in to comment.