feat(scope index view): add list view for scopes

addon/controllers/pagination.js

@@ -0,0 +1,18 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+
+export default class PaginationController extends Controller {
+  queryParams = ["page", "search"];
+
+  @service router;
+
+  @tracked page = 1;
+  @tracked search;
+
+  @action
+  updateQueryParam(field, value) {
+    this.router.transitionTo({ queryParams: { [field]: value || null } });
+  }
+}

addon/controllers/scopes/index.js

@@ -0,0 +1,3 @@
+import PaginationController from "ember-emeis/controllers/pagination";
+
+export default class ScopesIndexController extends PaginationController {}

addon/routes/scopes/index.js

@@ -1,7 +1,3 @@
 import Route from "@ember/routing/route";
 
-export default class GroupsIndexRoute extends Route {
-  model() {
-    return this.store.findAll("scope");
-  }
-}
+export default class ScopeIndexRoute extends Route {}

addon/templates/scopes.hbs

@@ -1 +1,3 @@
-{{outlet}}
+<SectionTitle @model="scopes" />
+
+{{outlet}}

addon/templates/scopes/index.hbs

@@ -1,7 +1,31 @@
-<h2>{{t "emeis.scopes.title"}}</h2>
+<DataTable
+  @modelName="scope"
+  @page={{this.page}}
+  @search={{this.search}}
+  @updatePage={{fn this.updateQueryParam "page"}}
+  @updateSearch={{fn this.updateQueryParam "search"}} as |table|
+>
+  <table.head>
+    <th>
+      {{t "emeis.roles.headings.name"}}
+    </th>
+    <th>
+      {{t "emeis.roles.headings.description"}}
+    </th>
+  </table.head>
+  <table.body as |body|>
+    <body.row>
+      {{#with body.model as |scope|}}
+        <td class="uk-width-1-4" data-test-scope-name={{scope.id}}>
+          <LinkTo @route="scopes.edit" @model={{scope}} class="uk-link-text">
+            {{scope.name}}
+          </LinkTo>
+        </td>
 
-<ul>
-  {{#each @model as |scope|}}
-    <li>{{scope.name}}, <em>{{scope.description}}</em></li>
-  {{/each}}
-</ul>
+        <td class="uk-width-expand" data-test-scope-desc={{scope.id}}>
+          {{scope.description}}
+        </td>
+      {{/with}}
+    </body.row>
+  </table.body>
+</DataTable>

app/controllers/pagination.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/controllers/pagination";

app/controllers/scopes/index.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/controllers/scopes/index";

tests/unit/controllers/pagination-test.js

@@ -0,0 +1,26 @@
+import { setupTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Unit | Controller | pagination", function (hooks) {
+  setupTest(hooks);
+
+  test("updateQueryParam", function (assert) {
+    const controller = this.owner.lookup("controller:pagination");
+    assert.ok(controller);
+
+    const router = this.owner.lookup("service:router");
+
+    assert.notOk(controller.search);
+    assert.equal(controller.page, 1);
+
+    router.transitionTo = ({ queryParams }) => {
+      assert.equal(queryParams.search, "test");
+    };
+    controller.updateQueryParam("search", "test");
+
+    router.transitionTo = ({ queryParams }) => {
+      assert.equal(queryParams.page, 10);
+    };
+    controller.updateQueryParam("page", 10);
+  });
+});