This blog article will illustrate how the UI for the edit user modal is implemented and Users API has been integrated into it in Open Event Frontend.
The admin can make any user the admin, sales admin or the marketer of the app. In the route admin/users there is an ember table where all the users are listed. In the table there exists a column named ‘Action Buttons’.
When the edit action button is clicked a modal appears on the screen. Them template of the modal is as follows:
class="content">
class="ui form">
class="ui header">{{t 'Provide admin access?'}}
class="grouped inline fields">
class="field">
{{ui-radio name="isAdmin" label="Yes" value=true onChange=(action (mut isAdmin))}}
{{ui-radio name="isAdmin" label="No" value=false onChange=(action (mut isAdmin))}}
</div>
<h4 class="ui header">{{t 'Custom system roles'}}</h4>
class="field">
{{ui-checkbox label="Sales Admin" onChange=(action (mut checked))}}
{{ui-checkbox label="Marketer" onChange=(action (mut checked))}}
<button class="ui teal right floated submit button update-changes">
{{t 'Save'}}
</button>
</div>
</div>
For the API integration the users model is used. The attributes isAdmin, isSalesAdmin, isMarketer from the model are used to send a patch request to the server. The modal has basically to parts. The first part consists of radio buttons through which the super admin has the rights to create a user an admin of the app or to remove his role as the admin. The second part consists of checkboxes through which the user can get the custom system role to be the sales admin or the marketer. A get request is sent to the user’s model in the server and the initial values of the modal are decided.
If the admin changes some value, he clicks on the save button in the modal and a patch request is sent to the server. The save function is written in the modal’s component.
actions: {
saveRole(id) {
this.get('store').findRecord('user', id).then(function(user) {
user.save();
});
this.set('isOpen', false);
},
toggleSalesAdmin(user) {
user.toggleProperty('isSalesAdmin');
},
toggleMarketer(user) {
user.toggleProperty('isMarketer');
},
createAdmin(user, isAdmin) {
user.set('isAdmin', isAdmin);
}
}
Resources
This blog article will illustrate how the User settings API has been integrated into the admin users route Open Event Frontend. The admin can change the contact info of some user, details about the email preferences for different events created by the user and the third party authentication details entered by the user.
To make the settings user link in the user link column of the users table functional new sub routes are added to the app’s user route as follows:
- /admin/users/<user_id>/settings/contact-info
- /admin/users/<user_id>/settings/email-preferences
- /admin/users/<user_id>/settings/applications
The template for the index route which redirects to each of the settings route is:
class="ui grid">
class="row">
class="twelve wide column">
{{#tabbed-navigation}}
{{#link-to 'admin.users.view.settings.contact-info' model.user.id class='item'}}
{{t 'Contact Info'}}
{{/link-to}}
{{#link-to 'admin.users.view.settings.email-preferences' model.user.id class='item'}}
{{t 'Email-Preferences'}}
{{/link-to}}
{{#link-to 'admin.users.view.settings.applications' model.user.id class='item'}}
{{t 'Applications'}}
{{/link-to}}
{{/tabbed-navigation}}
</div>
{{outlet}}
</div>
Interestingly, the routes admin/users/view and admin/users/list are both dynamic and expect a parameter after /users/ hence, the app cannot distinguish between them on it’s own, thus explicit handling of the dynamic parameter of the routes was implemented, differentiating them on the basis of the route’s state as follows:
beforeModel(transition) {
this._super(...arguments);
const userState = transition.params[transition.targetName].users_status;
if (!['all', 'deleted', 'active'].includes(userState)) {
this.replaceWith('admin.users.view', userState);
}
}
Thus if the dynamic portion of the route doesn’t contain the parameters all, deleted or active, then it must be referring to a user’s events or sessions and the route needs to be replaced with the desired events or sessions route accordingly.
The server is queried to fetch the details of a given user like the email, contact, various events created by the user to get the email and notification preferences. For getting each detail the current users model is returned and the values in the model are returned to the form.
For the contact-info sub route the values like the email and the contact number are fetched and are shown in the form. There is a save button in the form too. The admin can change this information and send a patch request to the server by clicking this button.
updateContactInfo() {
this.set('isLoading', true);
let currentUser = this.get('model.user');
currentUser.save()
.then(() => {
this.get('notify').success(this.get('l10n').t('Your Contact Info has been updated'));
})
.catch(() => {
this.get('notify').error(this.get('l10n').t('An unexpected error occurred'));
})
.finally(() => {
this.set('isLoading', false);
});
}
For the email-preferences sub route the model has attributes like sessionSchedule, nextEvent etc.and the admin has the access to change the email-notifications for any event created by any user. The client side has checkboxes to show the data to the user. The states of the checkboxes are determined by the data that we receive from the API. We also let the admin change the preferences of the email-notifications so that he can customise the notifications and keep the ones he wants some user to receive.
{{settings/email-preferences-section preferences=model}} |
The sub route for email preferences:
export default Route.extend(AuthenticatedRouteMixin, {
titleToken() {
return this.get('l10n').t('Email Preferences');
},
model() {
const currentUser = this.modelFor('admin.users.view');
return currentUser.query('emailNotifications', { include: 'event' });
}
});
So, the admin has the access to change the information and the email notifications of a user.
Resources
In this blog, we will talk about how to add dredd hooks for testing the API of Event Image Sizes and Speaker Image Sizes in Open Event Server. The focus is on adding the factory class and dredd hooks of these APIs using factory-boy python library and Dredd API testing framework.
Factory Creation
For the Event and Speaker Image Sizes, we’ll make our factory classes EventImageSizeFactory and SpeakerImageSizeFactory as follows
Now, let’s try to understand this class.
In this class, we are writing the sample data two records of ImageSizes Model, these records corresponds to Event and Speaker Image Sizes.
- First of all, we inherit class factory.alchemy.SQLAlchemyModelFactory to build our sample data which for Image Sizes.
- Class Meta has model and sqlalchemy_session attributes. Model tells the factory class of to which model this factory class push the data to database and sqlalchemy_session is assigned with the current database session.
- Next, we add the attributes according to the model and Schema of Image Sizes.
Adding Dredd Hooks
For the ImageSizes, we’ll make our dredd hooks as follows
Now, let’s try to understand these tests.
In this tests, we check the API by matching the response after adding a record in these API to one which is present at API blueprint.
- First of all, we use decorator @hooks.before which means we first add a record in the database and then match the response we get from API say /v1/event-image-sizes with the response mentioned at Image Size > Event Image Size Details > Get Event Image Size Details in API blueprint.
- We create an instance of EventImageSizeFactory which is a record of model Image Sizes.
- This record is then returned as a response of API /v1/event-image-sizes and matches with the blueprint at Image Size > Event Image Size Details > Get Event Image Size Details
Similarly, we have added other dredd tests for PATCH method as well.
So, we saw how factory-boy python library and Dredd API testing framework helped us in testing the REST APIs on Open Event Server.
Resources
This blog article will illustrate how the Events API has been integrated into the admin users route Open Event Frontend, as well as how the action buttons are added to view, edit or delete the events of any user in the list by the admin.
To make the events user link in the user link column of the users table functional a new sub route is added to the app’s user route as follows:
this.route('users', function() {
this.route('view', { path: '/:user_id' }, function() {
this.route('events', function() {
this.route('list', { path: '/:event_status' });
});
});
The newly added route further contains a dynamic sub route called list. This nested route fulfills the requirement of filtering the various events of a given user according to their states. Interestingly, the routes admin/users/view and admin/users/list are both dynamic and expect a parameter after /users/ hence, the app cannot distinguish between them on it’s own, thus explicit handling of the dynamic parameter of the routes was implemented, differentiating them on the basis of the route’s state as follows:
beforeModel(transition) {
this._super(...arguments);
const userState = transition.params[transition.targetName].users_status;
if (!['all', 'deleted', 'active'].includes(userState)) {
this.replaceWith('admin.users.view', userState);
}
}
Thus if the dynamic portion of the route doesn’t contain the parameters all, deleted or active, then it must be referring to a user’s events or sessions and the route needs to be replaced with the desired events or sessions route accordingly.
The server is queried to fetch the events of a given user by making use of the hasMany relationship a user has with his sessions. They are loaded in the route admin/users/view/events/list.js
model() {
const userDetails = this.modelFor('admin.users.view');
return this.store.findRecord('user', userDetails.id, {
include: 'events'
});
After fetching the the events from the server, a proper ember table is called in the template file of this route, and all the actions like viewing and editing an event are declared in the template.
{{events/events-table
columns=columns data=model.events
useNumericPagination=true
moveToDetails=(action 'moveToDetails')
editEvent=(action 'editEvent')
openDeleteEventModal=(action 'openDeleteEventModal')
}}
In the controller the columns of the table for events are defined and all the actions are defined.
moveToDetails(id) {
this.transitionToRoute('events.view', id);
},
editEvent(id) {
this.transitionToRoute('events.view.edit.basic-details', id);
},
deleteEvent() {
this.set('isLoading', true);
this.store.findRecord('event', this.get('eventId'), { backgroundReload: false }).then(function(event) {
event.destroyRecord();
})
So, the admin can view the list of the events of a particular user and send a patch or delete request for any event.
Resources
The Open Event Server enables organizers to manage events from concerts to conferences and meetups. It offers features for events with several tracks and venues. Event managers can create invitation forms for speakers and build schedules in a drag and drop interface. The event information is stored in a database. The system provides API endpoints to fetch the data, and to modify and update it.
The Open Event Server is based on JSON 1.0 Specification and hence build on top of Flask Rest Json API (for building Rest APIs) and Marshmallow (for Schema).
In this blog, we will talk about how to add API for accessing and updating the events role permissions on Open Event Server. The focus is on Schema creation and it’s API creation.
Schema Creation
For the Events Role Permission, we’ll make our Schema as follows
Now, let’s try to understand this Schema.
In this feature, we are providing Admin the rights to get and update the permission given to a role concerning a service.
- First of all, we are provide the four fields in this Schema, which are can_create, can_read, can_update and can_delete which are Boolean.
- All these fields gives us idea whether a user with a role can create, read, update and delete a service or not respectively in the whole system.
- Next there is a relationship with role which is one of organizer, coorganizer, track_organizer, moderator, registrar or attendee.
- Next there is a relationship with service which is one of Track, Microlocation, Session, Speaker or Sponsor.
API Creation
For the Events Role Permissions, we’ll make our API as follows
Now, let’s try to understand this API.
In this feature, we are providing Admin the rights to get and update the permission given to a role concerning a service.
- First of all, there is the need to know that this API has two method GET and PATCH.
- Decorators shows us that only Admin has permissions to access PATCH method for this API i.e. only Admins can modify the events role permissions .
- In EventsRolePermissionList, we are inheriting ResourceList from Flask Rest JSONAPI which will allow us to get all the records for the model Permission.
- In EventsRolePermissionDetail, we are inheriting ResourceDetail from Flask Rest JSONAPI which will allow us to get and update attributes of a record of model Permission.
- In EventsRolePermissionRelationship, we are inheriting ResourceRelationship from Flask Rest JSONAPI which will allow us to get and update relationships of a record of model Permission.
So, we saw how Events Role Permission Schema and API is created to allow users to get it’s values and Admin users to modify it’s attributes and relationships.
Resources
This blog article will describe how the sessions are listed in the public pages of an event in Open Event Frontend, which allows the user to view all the sessions of an event. The sessions are filtered as per date. The primary end point of Open Event API with which we are concerned with for fetching the the users details is GET /v1/events/{event_identifier}/sessions
The route of the public page fetches all the sessions of a particular events and filters them as per the criteria selected by the user. The user can view the sessions of a particular day, week or month. The user can also view the list of all the sessions. The query written in the route is:
async model(params) {
const eventDetails = this.modelFor('public');
let sessions = null;
if (params.session_status === 'today') {
sessions = await this.get('store').query('session', {
filter: [
{
and: [
{
name : 'event',
op : 'has',
val : {
name : 'identifier',
op : 'eq',
val : eventDetails.id
}
},
{
name : 'starts-at',
op : 'ge',
val : moment().startOf('day').toISOString()
},
{
name : 'starts-at',
op : 'lt',
val : moment().endOf('day').toISOString()
}
]
}
]
});
} else {
sessions = await this.get('store').query('session', {
filter: [
{
name : 'event',
op : 'has',
val : {
name : 'identifier',
op : 'eq',
val : eventDetails.id
}
}
]
});
}
return {
event : eventDetails,
session : sessions
};
}
The view route is located at app/e/{event_identifier}/sessions/all. This route will show all the sessions of the selected event. Similarly /week will show the sessions of a week and /month will show the sessions of a month.Four joint buttons are used in the UI of the public page to redirect to these routes.
To list the sessions ember component of session cards is used to include a session in a card with the details of the session like the time, abstract etc and also the session’s track and the details of the speakers like the name, information and social media accounts. In the template of the route this component is called and used in the UI within an ember component. In case there are no sessions that exist between a given time period, a helper text is displayed stating “No sessions exist for the given period”.
class="ui buttons">
{{#link-to 'public.sessions.list' model.event.id 'all' class="ui button"}}{{t 'All'}}{{/link-to}}
{{#link-to 'public.sessions.list' model.event.id 'today' class="ui button"}}{{t 'Today'}}{{/link-to}}
{{#link-to 'public.sessions.list' model.event.id 'week' class="ui button"}}{{t 'Week'}}{{/link-to}}
{{#link-to 'public.sessions.list' model.event.id 'month' class="ui button"}}{{t 'Month'}}{{/link-to}}
class="ui raised very padded text container segment">
{{#each model.session as |session|}}
{{public/session-item session=session}}
{{else}}
class="ui disabled header">{{t 'No Sessions exist for this time period'}}
{{/each}}
</div>
Resources
This blog article will describe how the users can add multiple session proposals and edit them through the Call for Speakers modal in Open Event Frontend. The logged in user first adds himself as the speaker through the modal then he can add multiple sessions. The user will be added as the speaker for all the sessions he adds through the CFS modal.
To submit the sessions the user first has to add himself as a speaker of that event in the route:
e/{event_identifier}/cfs
After the user registers himself as the speaker of that event whose Call for Speakers is open he can add multiple sessions and also edit those sessions.
When Add Session Details button is clicked the user gets redirected to a form with the route
e/{event_identifier}/cfs/new-session.
async model() {
const eventDetails = this.modelFor('public');
return {
event : eventDetails,
forms : await eventDetails.query('customForms', {
sort : 'id',
'page[size]' : 50
}),
session: await this.get('store').createRecord('session', {
event : eventDetails,
creator : this.get('authManager.currentUser')
}),
tracks : await eventDetails.query('tracks', {}),
sessionTypes : await eventDetails.query('sessionTypes', {})
}
On this route there is a session form where the user can add details like title, short abstract, comments, track etc. Once he clicks on the save button after entering the details post request is sent to the server and that session is added to the list of sessions of that event and the user is added as the speaker of that session.
class="ui container">
{{#if speaker.id}}
{{forms/session-speaker-form fields=model.forms data=model isLoading=isLoading
save=(action 'save' speaker) isSession=true includeSession=true}}
{{/if}}
The user can add another session or edit the sessions previously entered by him. When Edit session is clicked the user gets redirected to the route e/{event_identifier}/cfs/edit/{session_id}
async model(params) {
const eventDetails = this.modelFor('public');
return {
event : eventDetails,
forms : await eventDetails.query('customForms', {
sort : 'id',
'page[size]' : 50
}),
session: await this.get('store').findRecord('session', params.session_id, {
include: 'session-type,track'
})
};
}
On this route the user can change the details of the session he had entered before. On clicking save a patch request is sent to the server and the new details are saved.
Resources
You must be logged in to post a comment.