The Users tab in Admin routes, lets the admin have a check on all the users who have ever used our website. We in Open-Event-Frontend have classified the users into active and deleted users. This way an admin has both present and past records.

To create the users page we’ll run the following command

ember generate route admin/users

This will create

• router/admin/users.js
• template/admin/user.hbs
• tests/unit/admin/users-test.js

This command will also add  this.route(‘users’);  to router.js

Now let’s understand the content of each of these files

1. User.js

In admin/users.js we have used titletoken helper to set the title of the tab. Here we have created the user model and added attribute like name, email, status, systemRoles, eventRoles, createdAt and lastAccessedAt. We have returned this model from the js file to template.

import Ember from ’ember’; const { Route } = Ember; export default Route.extend({  titleToken() {      return this.l10n.t(‘User’);  },  model() {    return [{      name        : ‘Test name 1’,      email       : ‘Testname1@gmail.com’,      status      : ‘active’,      systemRoles : [‘unverified user1’, ‘unverified user2’],      eventRoles  : [        {          name  : ‘Organizer’,          event : {            name: ‘Event One’          }        },        {          name  : ‘Organizer’,          event : {            name: ‘Event Two’          }        }      ],      createdAt      : new Date(),      lastAccessedAt : new Date()    }];  } });

 

2. User.hbs

In template we have created a table and added classes like stackable and compact. Stackable class makes the table responsive and stacks all the rows for devices with smaller screen size. Compact class helps to show more number of rows at a time.

Then in the template we iterate through the model using a loop. Here we have used other semantic-ui elements like ui ordered list , ui label, ui-popup inside the table. We are getting date object from js and to convert it into human readable format we have used moment like {{moment-from-now user.lastAccessedAt}}

<table class=“ui compact stackable very basic table”> <thead> <tr> <th>{{t ‘Name’}}</th> <th>{{t ‘Email’}}</th> <th>{{t ‘Status’}}</th> <th>{{t ‘System Roles’}}</th> <th>{{t ‘Event Roles’}}</th> <th>{{t ‘User Links’}}</th> <th>{{t ‘Member Since’}}</th> <th>{{t ‘Last Access’}}</th> <th>{{t ‘Options’}}</th> </tr> </thead> <tbody> {{#each model as |user|}} <tr> <td> {{user.name}} </td> <td> {{user.email}} </td> <td> {{#if (eq user.status ‘active’)}} <div class=”ui green label”>{{t ‘Active’}}</div> {{else}} <div class=“ui red label”>{{t ‘Inactive’}}</div> {{/if}} </td> <td> <div class=”ui ordered list”> {{#each user.systemRoles as |systemRole|}} <div class=”item”>{{systemRole}}</div> {{/each}} </div> </td> <td> <div class=“ui ordered list”> {{#each user.eventRoles as |eventRole|}} <div class=“item”>{{eventRole.name}} ({{eventRole.event.name}})</div> {{/each}} </div> </td> <td> <div class=“ui ordered list”> <div class=“item”> <a href=‘#’ target=‘_blank’ rel=‘noopener’>{{t ‘Sessions’}}</a> </div> <div class=“item”> <a href=‘#’ target=‘_blank’ rel=‘noopener’>{{t ‘Events’}}</a> </div> <div class=“item”> <a href=‘#’ target=‘_blank’ rel=‘noopener’>{{t ‘Tickets’}}</a> </div> <div class=“item”> <a href=‘#’ target=‘_blank’ rel=‘noopener’>{{t ‘Settings’}}</a> </div> </div> </td> <td> {{moment-from-now user.createdAt}} </td> <td> {{moment-from-now user.lastAccessedAt}} </td> <td> <div class=“ui vertical compact basic buttons”> {{#ui-popup content=(t ‘View’) class=’ui icon button’ position=’left center’}} <i class=“unhide icon”></i> {{/ui-popup}} {{#ui-popup content=(t ‘Edit’) class=’ui icon button’ position=’left center’}} <i class=“edit icon”></i> {{/ui-popup}} {{#ui-popup content=(t ‘Delete’) class=’ui icon button’ position=’left center’}} <i class=“trash outline icon”></i> {{/ui-popup}} </div> </td> </tr> {{/each}} </tbody> </table>

 

3. Users-test.js

ember timport { test } from ’ember-qunit’; import moduleFor from ‘open-event-frontend/tests/helpers/unit-helper’; moduleFor(‘route:admin/users’, ‘Unit | Route | admin/users’, []); test(‘it exists’, function(assert) {  let route = this.subject();  assert.ok(route); });

Here we can testing the existence of our route. These tests are run using the command ember test.

Our user page is ready now. You can see how the user’s information is available in a formatted manner on the page. We have achieved our goal, by using the above mentioned files.

Additional Resources

• Ember Routes
• Ember Models
• Ember Moment