feat(emeisOptions): make "delete" and "deactivate" buttons visibility…

… configurable (#462)

* feat: insert re-/activate button for users and scopes

This replaces the obsolete back-button in the edit form
 of scopes and users with a de-/activate button.
The "isActive" checkbox on the user edit form got deleted as well.

* feat(emeisOptions): config edit form buttons

Make buttons visibility configurable via actions block in the emeisOptions.

* fix: improve edit-form for toggling active state

- handle edge cases for emeisOptions
- fix tests after refactoring
- include back link for roles and permissions view

README.md

@@ -109,6 +109,21 @@ export default class EmeisOptionsService extends Service {
   customComponents = {
     users: DummyButton,
   },
+  /*
+  Within the actions block you can define functions which evaluate the visibility of the "deactivate" and "delete" buttons in the model edit form. The visibilty must be defined for each model separately.
+
+  The model must support the "isActive" property for deactivation capabilities, which are currently only supported by user and scope.
+  */
+  actions = {
+    user: {
+      deactivate: (model) => myUser.canChange(model),
+      delete: (model) => myUser.canDelete(model),
+    },
+    scope: {
+      deactivate: () => false, // statically deactivate the deactivate-button
+      // leaving out the "delete" key here will always display the delete button
+    }
+  }
   // define custom fields for a given context (user, scope, role or permission)
   metaFields = {
     user: [],

addon/components/edit-form.hbs

@@ -14,16 +14,19 @@
   </div>
 
   <div class="uk-flex uk-flex-right uk-margin">
-    {{! without quotes on the @route the LinkTo component tries to set the property listViewRouteName which has no setter}}
-    <LinkTo
-      @route="{{this.relativeListViewRouteName}}"
-      class="uk-button uk-button-default uk-margin-right"
-      data-test-back
-    >
-      {{t "emeis.form.back"}}
-    </LinkTo>
+    {{#if (and this.modelHasActiveState this.canChangeActiveState)}}
+      <UkButton
+        @loading={{this.toggleActiveState.isRunning}}
+        @disabled={{this.toggleActiveState.isRunning}}
+        class="uk-margin-right uk-button-default"
+        data-test-toggle-active
+        @onClick={{perform this.toggleActiveState}}
+      >
+        {{t (concat "emeis.form." (if @model.isActive "deactivate" "activate"))}}
+      </UkButton>
+    {{/if}}
 
-    {{#if (and (not @disableDelete) (not @model.isNew))}}
+    {{#if (and (not @disableDelete) (not @model.isNew) this.canDeleteModel)}}
       <UkButton
         @loading={{this.delete.isRunning}}
         @disabled={{this.delete.isRunning}}

addon/components/edit-form.js

@@ -49,6 +49,44 @@ export default class EditFormComponent extends Component {
     return this.emeisOptions.customComponents?.[this.modelName];
   }
 
+  get modelHasActiveState() {
+    return this.args.model?.isActive !== undefined;
+  }
+
+  get canChangeActiveState() {
+    return this.emeisOptions.actions?.[this.args.model._internalModel.modelName]
+      ?.deactivate
+      ? this.emeisOptions.actions[
+          this.args.model._internalModel.modelName
+        ].deactivate(this.args.model)
+      : true;
+  }
+
+  get canDeleteModel() {
+    return this.emeisOptions.actions?.[this.args.model._internalModel.modelName]
+      ?.delete
+      ? this.emeisOptions.actions[
+          this.args.model._internalModel.modelName
+        ].delete(this.args.model)
+      : true;
+  }
+
+  @task
+  @handleTaskErrors({ errorMessage: "emeis.form.save-error" })
+  *toggleActiveState() {
+    const activeState = this.args.model.isActive;
+    this.args.model.isActive = !activeState;
+    yield this.args.model.save();
+
+    this.notification.success(
+      this.intl.t(
+        activeState
+          ? "emeis.form.deactivate-success"
+          : "emeis.form.activate-success"
+      )
+    );
+  }
+
   @task
   @handleTaskErrors({ errorMessage: "emeis.form.save-error" })
   *save(event) {

addon/components/tree-node.hbs

@@ -6,7 +6,7 @@
       {{/unless}}
     </UkButton>
   {{/if}}
-  <LinkTo @route={{@itemRoute}} @model={{@item}} class="uk-link-text" data-test-node-id={{@item.id}}>
+  <LinkTo @route={{@itemRoute}} @model={{@item}} class="uk-link-text {{unless @item.isActive "text-line-through"}}" data-test-node-id={{@item.id}}>
     {{@item.name}}{{#if @item.children}} ({{@item.children.length}}){{/if}}
   </LinkTo>
   {{#if this.expanded}}

addon/controllers/users/edit.js

@@ -50,7 +50,6 @@ export default class UsersEditController extends PaginationController {
     model.firstName = formElements.firstName.value;
     model.lastName = formElements.lastName.value;
     model.email = formElements.email.value;
-    model.isActive = formElements.isActive.checked;
 
     // additional fields might not be present
     model.phone = formElements.phone?.value;

addon/models/scope.js

@@ -9,6 +9,7 @@ export default class ScopeModel extends LocalizedModel {
   @localizedAttr description;
   @attr level;
   @attr metainfo;
+  @attr isActive;
 
   @belongsTo("scope", { inverse: "children", async: false }) parent;
   @hasMany("scope", { inverse: "parent", async: false }) children;

addon/templates/permissions/edit.hbs

@@ -1,3 +1,7 @@
+<LinkTo @route="permissions.index" class="uk-button uk-padding-remove uk-margin-small-bottom" data-test-back>
+  <UkIcon @icon="arrow-left" @ratio="1.5" />
+  {{t "emeis.form.back"}}
+</LinkTo>
 <EditForm @model={{@model}} @updateModel={{this.updateModel}}>
   <EditForm::Element @label={{t "emeis.permissions.headings.slug"}}>
     <input

addon/templates/roles/edit.hbs

@@ -1,3 +1,7 @@
+<LinkTo @route="roles.index" class="uk-button uk-padding-remove uk-margin-small-bottom" data-test-back>
+  <UkIcon @icon="arrow-left" @ratio="1.5" />
+  {{t "emeis.form.back"}}
+</LinkTo>
 <EditForm @model={{@model}} @updateModel={{this.updateModel}} class="uk-margin">
   <EditForm::Element @label={{t "emeis.roles.headings.slug"}}>
     <input

addon/templates/users/edit.hbs

@@ -1,4 +1,4 @@
-<LinkTo @route="users.index" class="uk-button uk-padding-remove uk-margin-small-bottom" data-test-user-back-link>
+<LinkTo @route="users.index" class="uk-button uk-padding-remove uk-margin-small-bottom" data-test-back>
   <UkIcon @icon="arrow-left" @ratio="1.5" />
   {{t "emeis.form.back"}}
 </LinkTo>
@@ -134,17 +134,6 @@
         {{#each this.metaFields as |field|}}
           <MetaField @field={{field}} @model={{@model}} />
         {{/each}}
-
-        <EditForm::Element @label={{t "emeis.users.headings.isActive"}}>
-          <input
-            class="uk-checkbox"
-            type="checkbox"
-            name="isActive"
-            placeholder="{{t "emeis.users.headings.isActive"}}..."
-            checked={{@model.isActive}}
-          />
-        </EditForm::Element>
-
       </EditForm>
 
     </div>
@@ -230,4 +219,3 @@
       {{/if}}
     </div>
 </div>
-{{!-- {{outlet}} --}}

addon/templates/users/index.hbs

@@ -38,14 +38,14 @@
       {{#let body.model as |user|}}
         {{#if this.emailAsUsername}}
           <td>
-            <LinkTo @route="users.edit" @model={{user}} class="uk-link-text">
+            <LinkTo @route="users.edit" @model={{user}} class="uk-link-text {{unless user.isActive "text-line-through"}}">
               {{user.lastName}}
             </LinkTo>
           </td>
           <td>{{user.firstName}}</td>
         {{else}}
           <td data-test-user-username={{user.id}}>
-            <LinkTo @route="users.edit" @model={{user}} class="uk-link-text">
+            <LinkTo @route="users.edit" @model={{user}} class="uk-link-text {{unless user.isActive "text-line-through"}}">
               {{user.username}}
             </LinkTo>
           </td>

app/styles/ember-emeis.scss

@@ -10,6 +10,14 @@ $ember-power-select-border-color: $global-border;
   transition: width 0.3s ease-out;
 }
 
+.text-line-through {
+  text-decoration: line-through;
+
+  &:hover {
+    text-decoration: line-through;
+  }
+}
+
 // fixes the negative margin overlap of uk-grid
 .uk-grid-divider-fix {
   margin-left: 0;

tests/acceptance/scopes-test.js

@@ -45,7 +45,7 @@ module("Acceptance | scopes", function (hooks) {
   });
 
   test("detail view /scopes/:id", async function (assert) {
-    assert.expect(7);
+    assert.expect(6);
 
     const scope = this.server.create("scope");
     const futureParent = this.server.create("scope");
@@ -82,9 +82,6 @@ module("Acceptance | scopes", function (hooks) {
       assert.strictEqual(relationships.parent.data.id, futureParent.id);
     });
     await click("[data-test-save]");
-
-    await click("[data-test-back]");
-    assert.strictEqual(currentURL(), "/scopes");
   });
 
   test("create view /scopes/new", async function (assert) {

tests/acceptance/users-test.js

@@ -67,7 +67,7 @@ module("Acceptance | users", function (hooks) {
   });
 
   test("detail view /users/:id", async function (assert) {
-    assert.expect(27);
+    assert.expect(25);
 
     const user = this.server.create("user", {
       isActive: true,
@@ -96,8 +96,6 @@ module("Acceptance | users", function (hooks) {
     assert.dom('[name="city"]').isRequired();
     assert.dom('[name="zip"]').isRequired();
 
-    assert.dom('[name="isActive"]').isChecked();
-
     const username = "newusername",
       firstName = "John",
       lastName = "Doe",
@@ -118,8 +116,6 @@ module("Acceptance | users", function (hooks) {
     await fillIn('[name="city"]', city);
     await fillIn('[name="zip"]', zip);
 
-    await click('[name="isActive"]');
-
     this.assertRequest("PATCH", `/api/v1/users/${user.id}`, (request) => {
       const attributes = JSON.parse(request.requestBody).data.attributes;
 
@@ -132,7 +128,6 @@ module("Acceptance | users", function (hooks) {
       assert.strictEqual(attributes.address, address);
       assert.strictEqual(attributes.city.en, city);
       assert.strictEqual(attributes.zip, zip);
-      assert.false(attributes["is-active"]);
     });
     await click("[data-test-save]");
 
@@ -142,7 +137,7 @@ module("Acceptance | users", function (hooks) {
   });
 
   test("create view /users/new", async function (assert) {
-    assert.expect(25);
+    assert.expect(24);
 
     await visit("/users");
     assert.strictEqual(currentURL(), "/users");
@@ -204,9 +199,7 @@ module("Acceptance | users", function (hooks) {
     assert.dom('[name="city"]').hasValue(user.city.en);
     assert.dom('[name="zip"]').hasValue(user.zip.toString());
 
-    assert.dom('[name="isActive"]').isChecked();
-
-    assert.dom("[data-test-user-back-link]").exists();
+    assert.dom("[data-test-back]").exists();
   });
 
   test("list view /users/:id/acl", async function (assert) {

tests/dummy/app/services/emeis-options.js

@@ -17,6 +17,15 @@ export default class EmeisOptionsService extends Service {
   customComponents = {
     users: TestButtonComponent,
   };
+  actions = {
+    user: {
+      delete: () => true,
+    },
+    scope: {
+      delete: (model) => model.id !== "special",
+      deactivate: (model) => model.id !== "special",
+    },
+  };
   metaFields = {
     user: [
       {

tests/dummy/mirage/factories/scope.js

@@ -12,4 +12,5 @@ export default Factory.extend({
   description: () => localize(faker.lorem.paragraph()),
   level: () => 0,
   metainfo: () => {},
+  isActive: () => faker.datatype.boolean(),
 });

tests/dummy/mirage/scenarios/default.js

@@ -8,6 +8,7 @@ export default function (server) {
     name: { en: "scope with static ID" },
     level: 2,
     parent: level1[0],
+    isActive: true,
   });
   server.createList("user", 50);
   server.createList("permission", 50);

tests/integration/components/edit-form-test.js

@@ -48,20 +48,32 @@ module("Integration | Component | edit-form", function (hooks) {
 
     await render(hbs`<EditForm @disableDelete="true"/>`);
 
-    assert.dom("[data-test-back]").exists();
+    assert.dom("[data-test-toggle-active]").doesNotExist();
     assert.dom("[data-test-delete]").doesNotExist();
     assert.dom("[data-test-save]").exists();
   });
 
-  test("back", async function (assert) {
-    assert.expect(1);
-    this.router.transitionTo = (route) => {
-      assert.strictEqual(route, "parent-route.index");
-    };
+  test("toggle active state", async function (assert) {
+    assert.expect(2);
+
+    this.setProperties({
+      model: {
+        save() {
+          assert.step("save");
+        },
+        isNew: false,
+        isActive: true,
+      },
+    });
 
-    await render(hbs`<EditForm />`);
+    await render(hbs`
+      <EditForm @model={{this.model}} @updateModel={{this.updateModel}}>
+        <input name="test">
+      </EditForm>
+    `);
 
-    await click("[data-test-back]");
+    await click("[data-test-toggle-active]");
+    assert.verifySteps(["save"]);
   });
 
   test("delete", async function (assert) {

tests/unit/controllers/users/edit-test.js

@@ -26,7 +26,6 @@ module("Unit | Controller | users/edit", function (hooks) {
       address: { value: "address" },
       city: { value: "city" },
       zip: { value: "zip" },
-      isActive: { checked: true },
     });
 
     assert.strictEqual(model.username, "username");
@@ -38,7 +37,6 @@ module("Unit | Controller | users/edit", function (hooks) {
     assert.strictEqual(model.address, "address");
     assert.strictEqual(model.city, "city");
     assert.strictEqual(model.zip, "zip");
-    assert.true(model.isActive);
   });
 
   test("queryParamsfilter", function (assert) {

translations/de.yaml

@@ -71,10 +71,14 @@ emeis:
     save: "Speichern"
     back: "Zurück"
     delete: "Löschen"
+    activate: "Aktivieren"
+    deactivate: "Deaktivieren"
     ok: "OK"
     cancel: "Abbrechen"
     confirmText: "Sind Sie sich sicher, dass Sie diese Aktion fortfahren wollen?"
     confirmEntryDelete: "Sind Sie sich sicher, dass Sie diesen Eintrag löschen wollen?"
+    activate-success: "Aktivierung erfolgreich."
+    deactivate-success: "Deaktivierung erfolgreich."
     save-success: "Erfolgreich gespeichert."
     delete-success: "Erfolgreich gelöscht."
     save-error: "Während dem Speichern ist ein Fehler aufgetretten. Bitte versuchen Sie es erneut."

translations/en.yaml

@@ -71,10 +71,14 @@ emeis:
     save: "Save"
     back: "Back"
     delete: "Delete"
+    activate: "Activate"
+    deactivate: "Deactivate"
     ok: "OK"
     cancel: "Cancel"
     confirmText: "Are you sure you want to proceed with this action?"
     confirmEntryDelete: "Are you sure you want to delete this entry?"
+    activate-success: "Activation successful."
+    deactivate-success: "Deactivation successful."
     save-success: "Saved successfully"
     delete-success: "Deleted successfully"
     save-error: "A problem occurred while saving. Please try again."