added user/users routes, along with components/services/translations …

…to show associated data

packages/frontend/app/components/user-list.hbs

@@ -0,0 +1,42 @@
+<div class="user-list" data-test-user-list ...attributes>
+  <table>
+    <thead>
+      <tr>
+        <th class="text-left" colspan="1">
+          {{t "general.id"}}
+        </th>
+        <th class="text-left" colspan="1">
+          {{t "general.fullName"}}
+        </th>
+        <th class="text-left" colspan="1">
+          {{t "general.email"}}
+        </th>
+        <th class="text-left" colspan="1">
+          <FaIcon @icon="shield" />
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      {{#each @users as |user|}}
+        <tr data-test-user>
+          <td class="text-left" colspan="1" data-test-id>
+            {{user.id}}
+          </td>
+          <td class="text-left" colspan="1" data-test-full-name>
+            <LinkTo @route="user" @model={{user}} data-test-user-link>
+              <UserNameInfo @user={{user}} />
+            </LinkTo>
+          </td>
+          <td class="text-left" colspan="1" data-test-email>
+            {{user.email}}
+          </td>
+          <td class="text-left" colspan="1" data-test-root>
+            {{#if user.root}}
+            <FaIcon @icon="shield" />
+            {{/if}}
+          </td>
+        </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>

packages/frontend/app/components/user-profile.hbs

@@ -0,0 +1,7 @@
+<div class="user-profile" data-test-user-profile ...attributes>
+  <h1 class="user-display-name">
+    <UserNameInfo @user={{@user}} />
+  </h1>
+  <p>{{@user.email}}</p>
+  <p>{{if @user.root "Admin" "User"}}</p>
+</div>

packages/frontend/app/router.js

@@ -16,4 +16,6 @@ Router.map(function () {
   this.route('about');
   this.route('links');
   this.route('contact');
+  this.route('users', {});
+  this.route('user', { path: '/users/:user_id' });
 });

packages/frontend/app/routes/user.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class UserRoute extends Route {
+  @service dataLoader;
+
+  model(params) {
+    return this.dataLoader.loadUserProfile(params.user_id);
+  }
+}

packages/frontend/app/routes/users.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class UsersRoute extends Route {
+  @service store;
+
+  model() {
+    return this.store.query('user', { sort: 'id' });
+  }
+}

packages/frontend/app/styles/app.scss

@@ -109,6 +109,104 @@ svg.svg-inline--fa {
   margin-right: 0.25em;
 }
 
+table {
+  border-collapse: collapse;
+  margin: 0.7rem 0;
+  table-layout: fixed;
+  width: 100%;
+
+  th {
+    text-align: left;
+  }
+
+  td {
+    border: 0;
+  }
+
+  tr,
+  td,
+  th {
+    padding: 0.25rem 0.1rem;
+    vertical-align: middle;
+  }
+
+  th,
+  td {
+    overflow-wrap: break-word;
+
+    &.text-left,
+    &.align-left {
+      text-align: left;
+    }
+
+    &.text-center,
+    &.align-center {
+      text-align: center;
+    }
+
+    &.text-right,
+    &.align-right {
+      text-align: right;
+    }
+
+    &.text-top {
+      vertical-align: top;
+    }
+
+    &.text-middle {
+      vertical-align: middle;
+    }
+
+    &.text-bottom {
+      vertical-align: bottom;
+    }
+  }
+
+  &.condensed {
+    font-size: 0.85rem;
+
+    tr,
+    td,
+    th {
+      margin: 0;
+      padding: 0 0.1rem;
+    }
+  }
+
+  .hide-from-small-screen {
+    display: none;
+
+    @media (min-width: 992px) {
+      display: table-cell;
+    }
+  }
+
+  .hide-from-tablet-screen {
+    display: none;
+
+    @media (min-width: 768px) {
+      display: table-cell;
+    }
+  }
+
+  .hide-from-large-screen {
+    display: none;
+
+    @media (max-width: 991px) {
+      display: table-cell;
+    }
+  }
+
+  &.sticky-header {
+    position: relative;
+
+    th {
+      position: sticky;
+      top: 0;
+    }
+  }
+}
+
 ul.code {
   font-family: monospace;
   font-size: 1rem;

packages/frontend/app/templates/user.hbs

@@ -0,0 +1,4 @@
+<h2>
+  <LinkTo @route="users">{{t "general.users"}}</LinkTo> {{t "general.gt"}} {{t "general.user"}}
+</h2>
+<UserProfile @user={{@model}} />

packages/frontend/app/templates/users.hbs

@@ -0,0 +1,8 @@
+<h2>{{t "layout.headUsers"}}</h2>
+{{#if (gt @model.length 0)}}
+  <UserList @users={{@model}} />
+{{else}}
+  <span class="no-results">
+    {{t "errors.noResultsFound"}}
+  </span>
+{{/if}}

packages/frontend/config/icons.js

@@ -12,6 +12,7 @@ module.exports = function () {
       'globe',
       'pause',
       'play',
+      'shield',
       'square-up-right',
       'spinner',
       'toggle-off',

packages/frontend/tests/integration/components/user-list-test.js

@@ -0,0 +1,36 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { component } from 'frontend/tests/pages/components/user-list';
+
+module('Integration | Component | user-list', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // const user1 = this.server.create('user', {
+    //   firstName: 'Aardvark',
+    //   lastName: 'Anteater',
+    //   displayName: 'Aardy A',
+    //   email: 'aardvark@test.edu',
+    //   root: false,
+    // });
+    // const user2 = this.server.create('user', {
+    //   firstName: 'Bennifred',
+    //   lastName: 'Bunchford',
+    //   displayName: 'Benny B',
+    //   email: 'bbunchford@test.edu',
+    //   root: false,
+    // });
+
+    // const userModel1 = await this.owner.lookup('service:store').findRecord('user', user1.id);
+    // const userModel2 = await this.owner.lookup('service:store').findRecord('user', user2.id);
+    // this.set('users', [userModel1, userModel2]);
+
+    // await render(hbs`<UserList @users={{this.users}} />`);
+
+    await render(hbs`<UserList />`);
+
+    assert.strictEqual(component.users.length, 0);
+  });
+});

packages/frontend/tests/integration/components/user-name-info-test.js

@@ -0,0 +1,31 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { component } from 'rs-common/page-objects/components/user-name-info';
+
+module('Integration | Component | user-name-info', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // const user = this.server.create('user');
+    // const userModel = await this.owner.lookup('service:store').findRecord('user', user.id);
+    // this.set('user', userModel);
+    // await render(hbs`<UserNameInfo @user={{this.user}} />`);
+    // assert.strictEqual(component.fullName, '0 guy M. Mc0son');
+
+    await render(hbs`<UserNameInfo />`);
+    assert.strictEqual(component.fullName, '');
+  });
+
+  test('it renders with additional info when configured to do so', async function (assert) {
+    // const user = this.server.create('user', { displayName: 'Clem Chowder' });
+    // const userModel = await this.owner.lookup('service:store').findRecord('user', user.id);
+    // this.set('user', userModel);
+    // await render(hbs`<UserNameInfo @user={{this.user}} />`);
+    // assert.strictEqual(component.fullName, 'Clem Chowder');
+
+    await render(hbs`<UserNameInfo />`);
+    assert.strictEqual(component.fullName, '');
+  });
+});

packages/frontend/tests/integration/components/user-profile-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'frontend/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | user-profile', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<UserProfile />`);
+
+    assert.dom().hasText('User');
+  });
+});

packages/frontend/tests/pages/components/user-list.js

@@ -0,0 +1,16 @@
+import { clickable, collection, create } from 'ember-cli-page-object';
+import userNameInfo from 'rs-common/page-objects/components/user-name-info';
+
+const definition = {
+  scope: '[data-test-user-list]',
+  users: collection('[data-test-user]', {
+    viewUserDetails: clickable('[data-test-user-link]'),
+    userNameInfo,
+    email: {
+      scope: '[data-test-email]',
+    },
+  }),
+};
+
+export default definition;
+export const component = create(definition);

packages/frontend/tests/unit/routes/user-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'frontend/tests/helpers';
+
+module('Unit | Route | user', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:user');
+    assert.ok(route);
+  });
+});

packages/frontend/tests/unit/routes/users-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'frontend/tests/helpers';
+
+module('Unit | Route | users', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:users');
+    assert.ok(route);
+  });
+});

packages/frontend/tests/unit/services/data-loader-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Service | data-loader', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let service = this.owner.lookup('service:data-loader');
+    assert.ok(service);
+  });
+});