This blog post will showcase an option which can be used by an event owner to transfer his event to another user in Open Event Frontend. Till the invited user accepts the invitation, the previous owner will have all the rights but as soon as the invited user becomes the new owner of the event the previous owner will cease to have any control over the event.
It is a 2-step process just to ensure that user doesn’t transfers the event accidentally.
The user needs to go to Settings option of the event. The user will get an option to transfer event in the form of a red button along with the following text:
Transfer ownership of this event to another user. You’ll lose all the owner rights once they accept the ownership. |
When a user clicks on the option to transfer the event, a modal pops up asking the user to confirm the event name. Once user fills in correct event name the Proceed button becomes active.
The code snippet which triggers the action to open the modal event-transfer-modal is given below:
<button {{action 'openEventTransferModal' model.event.id model.event.name}} class='ui red button'> {{t 'Transfer Ownership'}} </button>
openEventTransferModal(id, name) { this.setProperties({ 'isEventTransferModalOpen' : true, 'confirmEventName' : '', 'eventId' : id, 'eventName' : name }); }
The code snippet which takes care of event name confirmation to make Proceed button active:
isNameDifferent : computed('confirmEventName', 'eventName', function() { return this.eventName ? this.confirmEventName.toLowerCase() !== this.eventName.toLowerCase() : true; })
When user confirms the event name and hits Proceed button, a new modal appears which asks users to fill in the email of the user to whom the event is to be transferred. Also, the user needs to check a checkbox to ensure that he/she agrees to the terms of event transferring.
The code snippet which triggers the action to open the modal confirm-event-transfer-modal is given below:
<button {{action openConfirmEventTransferModal}} class="ui red button {{if isNameDifferent 'disabled'}}"> {{t 'Proceed'}} </button>
openConfirmEventTransferModal() { const currentInvite = this.model.roleInvites.createRecord({}); let { roles } = this.model; for (const role of roles ? roles.toArray() : []) { if (role.name === 'owner') { currentInvite.set('role', role); } } this.setProperties({ 'isEventTransferModalOpen' : false, 'isConfirmEventTransferModalOpen' : true, 'checked' : false, currentInvite }); }
When the confirm-event-transfer-modal is to be opened, a new role invite is created and passed to the modal so that when the user fills in the email of the new owner, the role invite is simply updated by a PATCH request.
When the user fills in email ID and enters Transfer button, the transferEvent() function is called.
async transferEvent() { try { this.set('isLoading', true); this.currentInvite.set('roleName', 'owner'); await this.currentInvite.save(); this.setProperties({ 'isConfirmEventTransferModalOpen' : false, 'checked' : false }); this.notify.success(this.l10n.t('Owner Role Invite sent successfully.')); } catch (error) { this.notify.error(this.l10n.t(error.message)); } this.set('isLoading', false); } }
The transferEvent() function updates the role invited created while opening of confirm-event-transfer-modal and then save() function is called upon the role invite. All the modals are then closed and role invite mail is sent to the new owner. When the new owner clicks on the link in the mail and accepts the invite, event is transferred to him/her and the previous owner is deprived of any control over the event.
Resources:
Related work and code repo: