feat(permissions): add permission edit view

addon/controllers/permissions/edit.js

@@ -0,0 +1,13 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+
+export default class PermissionsEditController extends Controller {
+  @action
+  updateModel(model, formElements) {
+    model.slug = formElements.slug.value;
+    model.name = formElements.name.value;
+    model.description = formElements.description.value;
+
+    return model;
+  }
+}

addon/routes/permissions/edit.js

@@ -0,0 +1,14 @@
+import Route from "@ember/routing/route";
+import { inject as service } from "@ember/service";
+
+import handleModelErrors from "ember-emeis/decorators/handle-model-errors";
+
+export default class PermissionsEditRoute extends Route {
+  @service notification;
+  @service intl;
+
+  @handleModelErrors({ routeFor404: "permissions.index" })
+  async model({ permission_id: id }) {
+    return await this.store.findRecord("permission", id);
+  }
+}

addon/templates/permissions/edit.hbs

@@ -0,0 +1,50 @@
+<EditForm @model={{@model}} @updateModel={{this.updateModel}}>
+  <EditForm::Element @label={{t "emeis.permissions.headings.slug"}}>
+    <input
+      class="uk-input"
+      type="text"
+      name="slug"
+      pattern="^[-a-zA-Z0-9_]+$"
+      disabled={{not @model.isNew}}
+      value={{@model.slug}}
+    />
+    <span class="uk-text-meta">
+      {{t "emeis.form.slug-hint"}}
+    </span>
+  </EditForm::Element>
+
+  <EditForm::Element @label={{t "emeis.permissions.headings.name"}}>
+    <input
+      class="uk-input"
+      type="text"
+      name="name"
+      placeholder="{{t "emeis.permissions.headings.name"}}..."
+      required
+      value={{@model.name}}
+    />
+  </EditForm::Element>
+
+  <EditForm::Element @label={{t "emeis.permissions.headings.description"}}>
+    <textarea
+      class="uk-textarea"
+      rows="5"
+      name="description"
+      placeholder="{{t "emeis.permissions.headings.description"}}..."
+      value={{@model.description}}
+      required
+    ></textarea>
+  </EditForm::Element>
+
+  <EditForm::Element @label={{t "emeis.permissions.headings.roles"}}>
+    <RelationshipSelect
+      @modelName="role"
+      @selected={{@model.roles}}
+      @placeholder="{{t "emeis.permissions.headings.roles"}}..."
+      @onChange={{set @model.roles}}
+      @multiple="true"
+      required as |role|
+    >
+      {{role.name}}
+    </RelationshipSelect>
+  </EditForm::Element>
+</EditForm>

app/controllers/permissions/edit.js

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

app/routes/permissions/edit.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/routes/permissions/edit";

app/templates/permissions/edit.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/templates/permissions/edit";

tests/acceptance/permissions-test.js

@@ -1,11 +1,21 @@
-import { visit, currentURL } from "@ember/test-helpers";
+import {
+  visit,
+  currentURL,
+  fillIn,
+  click,
+  waitUntil,
+} from "@ember/test-helpers";
 import { setupMirage } from "ember-cli-mirage/test-support";
+import { selectChoose } from "ember-power-select/test-support";
 import { setupApplicationTest } from "ember-qunit";
 import { module, test } from "qunit";
 
+import setupRequestAssertions from "./../helpers/assert-request";
+
 module("Acceptance | permissions", function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
+  setupRequestAssertions(hooks);
 
   test("list view /permissions", async function (assert) {
     assert.expect(6);
@@ -30,4 +40,73 @@ module("Acceptance | permissions", function (hooks) {
       .dom(`[data-test-permission-name="${permission.id}"] a`)
       .hasAttribute("href", `/permissions/${permission.id}`);
   });
+
+  test("detail view /permissions/:id", async function (assert) {
+    assert.expect(9);
+
+    const permission = this.server.create("permission");
+    const role = this.server.create("role");
+
+    await visit(`/permissions/${permission.id}`);
+
+    assert.equal(currentURL(), `/permissions/${permission.id}`);
+
+    assert.dom('[name="slug"]').hasValue(permission.slug);
+    assert.dom('[name="slug"]').hasAttribute("disabled");
+    assert.dom('[name="name"]').hasValue(permission.name.en);
+    assert.dom('[name="description"]').hasValue(permission.description.en);
+
+    const name = "Permission 1",
+      description = "The one and only";
+
+    await fillIn('[name="name"]', name);
+    await fillIn('[name="description"]', description);
+
+    await selectChoose(".ember-power-select-trigger", role.name.en);
+
+    this.assertRequest(
+      "PATCH",
+      `/api/v1/permissions/${permission.id}`,
+      (request) => {
+        const { attributes, relationships } = JSON.parse(
+          request.requestBody
+        ).data;
+
+        assert.equal(attributes.name.en, name);
+        assert.equal(attributes.description.en, description);
+        assert.equal(relationships.roles.data[0].id, role.id);
+      }
+    );
+    await click("[data-test-save]");
+
+    await click("[data-test-back]");
+    assert.equal(currentURL(), "/permissions");
+  });
+
+  test("delete /permissions/:id", async function (assert) {
+    assert.expect(5);
+
+    const permission = this.server.create("permission", {
+      name: "test 1",
+      description: "this is test one.",
+    });
+
+    await visit(`/permissions`);
+    assert.dom("[data-test-permission-name]").exists({ count: 1 });
+
+    await click("[data-test-permission-name] a");
+    assert.equal(currentURL(), `/permissions/${permission.id}`);
+
+    this.assertRequest("DELETE", `/api/v1/permissions/:id`, (request) => {
+      assert.equal(permission.id, request.params.id);
+    });
+    await click("[data-test-delete]");
+
+    // For some reason the await click is not actually waiting for the delete task to finish.
+    // Probably some runloop issue.
+    await waitUntil(() => currentURL() !== `/permissions/${permission.id}`);
+
+    assert.equal(currentURL(), `/permissions?page=1`);
+    assert.dom("[data-test-permission-name]").doesNotExist();
+  });
 });