Skip to content

Commit

Permalink
feat(emeisOptions): make user filter optionally visible (#648)
Browse files Browse the repository at this point in the history
  • Loading branch information
derrabauke authored Apr 17, 2023
1 parent ef10648 commit 107b7de
Show file tree
Hide file tree
Showing 7 changed files with 191 additions and 34 deletions.
8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,13 @@ export default class EmeisOptionsService extends Service {
On each model edit view (e.g. users) you can define a custom component. The component will be rendered at the bottom of the edit view, but above the primary form buttons. Each component can be designed freely and the model will be passed into the component as `@model` argument. For a working demo have a look at our "dummy-button" at "dummy/app/components/dummy-button".
*/
customComponent: DummyButton,
/* Exclusively on USER model - define a custom component which will get displayed next to the 'inacitve' pill on top of the user detail view. Ideally this will be an inline element.
/*
Exclusively on USER model - Optionally hide the "active" / "inactive" filter buttons on top of the user list. You can pass
a function, boolean or string as value.
*/
filtersVisible: () => true,
/*
Exclusively on USER model - define a custom component which will get displayed next to the 'inacitve' pill on top of the user detail view. Ideally this will be an inline element.
*/
statusComponent: DummyStatus,
};
Expand Down
4 changes: 4 additions & 0 deletions addon/controllers/users/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ export default class UsersIndexController extends PaginationController {
return this.emeisOptions.navigationEntries?.includes("scopes");
}

get filtersVisible() {
return this.emeisOptions.users?.filtersVisible ?? true;
}

get filters() {
return { isActive: this.filter_active };
}
Expand Down
14 changes: 14 additions & 0 deletions addon/helpers/evaluate-to-boolean.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { helper } from "@ember/component/helper";

export default helper(function evaluateToBoolean([expression, ...parameter]) {
if (typeof expression === "boolean") {
return expression;
}
if (typeof expression === "function") {
return expression(...parameter);
}
if (typeof expression === "string") {
return expression === "true";
}
return false;
});
109 changes: 76 additions & 33 deletions addon/templates/users/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,26 @@
@include={{array "acls.role" "acls.scope"}}
as |table|
>
<table.filters as |Filter|>
<Filter.radio-buttons
@name="active"
@label={{t "emeis.filters.active.title"}}
@selected={{this.filter_active}}
@options={{array
(hash value=true label=(t "emeis.filters.active.on"))
(hash value=false label=(t "emeis.filters.active.off"))
}}
@onChange={{fn this.updateFilter "active"}}
/>
</table.filters>
{{#if (evaluate-to-boolean this.filtersVisible)}}
<table.filters as |Filter|>
<Filter.radio-buttons
@name="active"
@label={{t "emeis.filters.active.title"}}
@selected={{this.filter_active}}
@options={{array
(hash value=true label=(t "emeis.filters.active.on"))
(hash value=false label=(t "emeis.filters.active.off"))
}}
@onChange={{fn this.updateFilter "active"}}
/>
</table.filters>
{{/if}}
<table.head as |Column|>
{{#unless this.emailAsUsername}}
<Column @sort="username">
{{t "emeis.users.headings.username"}}
</Column>
{{/unless}}
{{/unless}}
<Column @sort="last_name">
{{t "emeis.users.headings.lastName"}}
</Column>
Expand All @@ -38,7 +40,14 @@
{{t "emeis.users.headings.email"}}
</Column>
{{#each this.customColumns as |extraColumn|}}
<Column @sort={{if extraColumn.sortable (concat "metainfo__" extraColumn.slug) ""}} data-test-custom-column={{extraColumn.slug}}>
<Column
@sort={{if
extraColumn.sortable
(concat "metainfo__" extraColumn.slug)
""
}}
data-test-custom-column={{extraColumn.slug}}
>
{{optional-translate extraColumn.heading}}
</Column>
{{/each}}
Expand All @@ -48,74 +57,108 @@
<Column>
{{t "emeis.scopes.title"}}
</Column>
<Column>
</Column>
<Column />
</table.head>
<table.body as |body|>
<body.row>
{{#let body.model as |user|}}
{{#if this.emailAsUsername}}
<td>
<LinkTo @route="users.edit" @model={{user}} class="uk-link-text {{unless user.isActive "text-line-through"}}">
<LinkTo
@route="users.edit"
@model={{user}}
class="uk-link-text {{unless user.isActive 'text-line-through'}}"
>
{{user.lastName}}
</LinkTo>
</td>
<td class="uk-link-text {{unless user.isActive "text-line-through"}}">{{user.firstName}}</td>
<td
class="uk-link-text {{unless user.isActive 'text-line-through'}}"
>{{user.firstName}}</td>
{{else}}
<td data-test-user-username={{user.id}}>
<LinkTo @route="users.edit" @model={{user}} class="uk-link-text {{unless user.isActive "text-line-through"}}">
<LinkTo
@route="users.edit"
@model={{user}}
class="uk-link-text {{unless user.isActive 'text-line-through'}}"
>
{{user.username}}
</LinkTo>
</td>
<td class="uk-link-text {{unless user.isActive "text-line-through"}}">{{user.lastName}}</td>
<td class="uk-link-text {{unless user.isActive "text-line-through"}}">{{user.firstName}}</td>
<td
class="uk-link-text {{unless user.isActive 'text-line-through'}}"
>{{user.lastName}}</td>
<td
class="uk-link-text {{unless user.isActive 'text-line-through'}}"
>{{user.firstName}}</td>
{{/if}}

<td class="uk-link-text {{unless user.isActive "text-line-through"}}" data-test-user-email={{user.id}}>
<td
class="uk-link-text {{unless user.isActive 'text-line-through'}}"
data-test-user-email={{user.id}}
>
{{user.email}}
</td>
{{#each this.customColumns as |extraColumn|}}
<td class="uk-link-text {{unless user.isActive "text-line-through"}}" data-test-custom-row={{extraColumn.slug}}>
{{optional-localized-value (get user.metainfo extraColumn.slug) "user"}}
<td
class="uk-link-text {{unless user.isActive 'text-line-through'}}"
data-test-custom-row={{extraColumn.slug}}
>
{{optional-localized-value
(get user.metainfo extraColumn.slug)
"user"
}}
</td>
{{/each}}
<td class="uk-link-text {{unless user.isActive "text-line-through"}}">
<td class="uk-link-text {{unless user.isActive 'text-line-through'}}">
<ul class="uk-list uk-list-divider">
{{#each user.acls as |acl|}}
<li>
{{#if this.linkToRole}}
<LinkTo @route="roles.edit" @model={{acl.role}} class="uk-link-text">
<LinkTo
@route="roles.edit"
@model={{acl.role}}
class="uk-link-text"
>
{{acl.role.name}}
</LinkTo>
{{else}}
{{acl.role.name}}
{{/if}}
</li>
{{else}}
-
-
{{/each}}
</ul>
</td>
<td class="uk-link-text {{unless user.isActive "text-line-through"}}">
<td class="uk-link-text {{unless user.isActive 'text-line-through'}}">
<ul class="uk-list uk-list-divider">
{{#each user.acls as |acl|}}
<li>
{{#if this.linkToScope}}
<LinkTo @route="scopes.edit" @model={{acl.scope}} class="uk-link-text">
<LinkTo
@route="scopes.edit"
@model={{acl.scope}}
class="uk-link-text"
>
{{acl.scope.fullName}}
</LinkTo>
{{else}}
{{acl.scope.fullName}}
{{acl.scope.fullName}}
{{/if}}
</li>
{{else}}
-
-
{{/each}}
</ul>
</td>
<td class="uk-text-right small-padding-right">
<LinkTo @route="users.edit" @model={{user}} class="uk-link-reset uk-margin-small-right">
<UkIcon @icon="pencil"/>
<LinkTo
@route="users.edit"
@model={{user}}
class="uk-link-reset uk-margin-small-right"
>
<UkIcon @icon="pencil" />
</LinkTo>
{{#if (can-delete "user" user)}}
<UkButton @color="link" @onClick={{perform this.delete user}}>
Expand Down
1 change: 1 addition & 0 deletions app/helpers/evaluate-to-boolean.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "ember-emeis/helpers/evaluate-to-boolean";
1 change: 1 addition & 0 deletions tests/dummy/app/services/emeis-options.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export default class EmeisOptionsService extends Service {
},
],
customComponent: TestButtonComponent,
filtersVisible: () => true,
metaFields: [
{
slug: "megameta",
Expand Down
88 changes: 88 additions & 0 deletions tests/integration/helpers/evaluate-to-boolean-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import { render } from "@ember/test-helpers";
import { hbs } from "ember-cli-htmlbars";
import { setupRenderingTest } from "ember-qunit";
import { module, test } from "qunit";

module("Integration | Helper | evaluateToBoolean", function (hooks) {
setupRenderingTest(hooks);

test("evaluates booleans (true)", async function (assert) {
this.set("inputValue", true);

await render(
hbs`{{if (evaluate-to-boolean this.inputValue) "true" "false"}}`
);

assert.dom(this.element).hasText("true");
});

test("evaluates booleans (false)", async function (assert) {
this.set("inputValue", false);

await render(
hbs`{{if (evaluate-to-boolean this.inputValue) "true" "false"}}`
);

assert.dom(this.element).hasText("false");
});

test("evaluates string (true)", async function (assert) {
this.set("inputValue", "true");

await render(
hbs`{{if (evaluate-to-boolean this.inputValue) "true" "false"}}`
);

assert.dom(this.element).hasText("true");
});

test("evaluates string (false)", async function (assert) {
this.set("inputValue", "false");

await render(
hbs`{{if (evaluate-to-boolean this.inputValue) "true" "false"}}`
);

assert.dom(this.element).hasText("false");
});

test("evaluates function (true)", async function (assert) {
this.set("inputValue", () => true);

await render(
hbs`{{if (evaluate-to-boolean this.inputValue) "true" "false"}}`
);

assert.dom(this.element).hasText("true");
});

test("evaluates function (false)", async function (assert) {
this.set("inputValue", () => false);

await render(
hbs`{{if (evaluate-to-boolean this.inputValue) "true" "false"}}`
);

assert.dom(this.element).hasText("false");
});

test("evaluates function with parameter (false)", async function (assert) {
this.set("inputValue", (p) => p === 1);

await render(
hbs`{{if (evaluate-to-boolean this.inputValue 2) "true" "false"}}`
);

assert.dom(this.element).hasText("false");
});

test("evaluates function with multiple parameters (true)", async function (assert) {
this.set("inputValue", (p1, p2) => p1 !== p2);

await render(
hbs`{{if (evaluate-to-boolean this.inputValue 1 "a") "true" "false"}}`
);

assert.dom(this.element).hasText("true");
});
});

0 comments on commit 107b7de

Please sign in to comment.