feat(acl-wizzard): add wizzard to guide user through acl creation

addon/components/acl-wizzard.hbs

@@ -0,0 +1,104 @@
+{{#if this.modelToSelect}}
+  <div class="uk-margin">
+    <SectionTitle @model="{{this.modelToSelect}}s" @noCreateLink="true" />
+    <DataTable @modelName={{this.modelToSelect}} as |table|>
+      <table.head>
+        {{#each (get this.fields this.modelToSelect) as |field|}}
+          <th>
+            {{t (concat "emeis." this.modelToSelect "s.headings." field)}}
+          </th>
+        {{/each}}
+      </table.head>
+      <table.body as |body|>
+        <body.row
+          class="pointer"
+          data-test-row
+          {{on "click" (fn this.selectModel body.model)}}
+        >
+          {{#with body.model as |model|}}
+            {{#each (get this.fields this.modelToSelect) as |field|}}
+              <td>
+                {{get model field}}
+              </td>
+            {{/each}}
+          {{/with}}
+        </body.row>
+      </table.body>
+    </DataTable>
+  </div>
+{{else}}
+  <div class="uk-background-muted uk-padding uk-margin">
+    <div
+      class="uk-flex uk-flex-middle uk-flex-between uk-margin-bottom"
+      uk-height-match=".uk-card-body"
+    >
+      {{#unless @user}}
+        <AclWizzard::SelectCard
+          @selected={{this.user}}
+          @header={{this.user.username}}
+          @model="user"
+          @selectEntry={{set this.modelToSelect "user"}}
+          data-test-select-user
+        >
+          <div uk-grid data-test-body>
+            <span>
+              {{this.user.fullName}}
+            </span>
+            <span>
+              {{this.user.email}}
+            </span>
+          </div>
+        </AclWizzard::SelectCard>
+
+        <span
+          class="uk-margin-left uk-margin-right uk-width-1-6 uk-flex uk-flex-center uk-flex-middle"
+        >
+          <UkIcon @icon="plus" @ratio="2" />
+        </span>
+      {{/unless}}
+
+      {{#unless @role}}
+        <AclWizzard::SelectCard
+          @selected={{this.role}}
+          @model="role"
+          @selectEntry={{set this.modelToSelect "role"}}
+          data-test-select-role
+        />
+
+        {{#unless @scope}}
+          <span
+            class="uk-margin-left uk-margin-right uk-width-1-6 uk-flex uk-flex-center uk-flex-middle"
+          >
+            <UkIcon @icon="plus" @ratio="2" />
+          </span>
+        {{/unless}}
+      {{/unless}}
+
+      {{#unless @scope}}
+        <AclWizzard::SelectCard
+          @selected={{this.scope}}
+          @model="scope"
+          @selectEntry={{set this.modelToSelect "scope"}}
+          data-test-select-scope
+        />
+      {{/unless}}
+    </div>
+  </div>
+
+  <div class="uk-flex uk-flex-right">
+    <UkButton
+      @color="primary"
+      disabled={{not this.isValidAcl}}
+      data-test-create-acl
+      {{on
+        "click"
+        (fn
+          @createAclEntry (hash user=this.user role=this.role scope=this.scope)
+        )
+      }}
+    >
+      <UkIcon @icon="check" class="uk-margin-small-right" />
+      {{t "emeis.acl-wizzard.add-entry"}}
+    </UkButton>
+  </div>
+{{/if}}

addon/components/acl-wizzard.js

@@ -0,0 +1,34 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class AclWizzardComponent extends Component {
+  @tracked modelToSelect;
+  @tracked user;
+  @tracked role;
+  @tracked scope;
+
+  fields = {
+    user: ["username", "fullName", "email"],
+    scope: ["name", "description"],
+    role: ["name", "description"],
+  };
+
+  get isValidAcl() {
+    return this.user && this.role && this.scope;
+  }
+
+  constructor(owner, args) {
+    super(owner, args);
+
+    this.user = args.user;
+    this.role = args.role;
+    this.scope = args.scope;
+  }
+
+  @action
+  selectModel(model) {
+    this[this.modelToSelect] = model;
+    this.modelToSelect = null;
+  }
+}

addon/components/acl-wizzard/select-card.hbs

@@ -0,0 +1,51 @@
+{{#if @selected}}
+  <UkCard class="uk-width-2-5" ...attributes as |card|>
+    <card.header>
+      <card.title data-test-title>
+        {{#if @header}}
+          {{@header}}
+        {{else}}
+          {{@selected.name}}
+        {{/if}}
+      </card.title>
+    </card.header>
+    <card.body data-test-body>
+      {{#if hasBlock}}
+        {{yield}}
+      {{else}}
+        {{@selected.description}}
+      {{/if}}
+    </card.body>
+    <card.footer>
+      <UkButton
+        @color="primary"
+        class="uk-width-1 uk-text-center"
+        data-test-change
+        {{on "click" @selectEntry}}
+      >
+        <UkIcon @icon="pencil" class="uk-margin-small-right" />
+        {{t (concat "emeis.acl-wizzard." @model ".select-different")}}
+      </UkButton>
+    </card.footer>
+  </UkCard>
+{{else}}
+  <button
+    class="no-style-button uk-width-2-5"
+    type="button"
+    ...attributes
+    {{on "click" @selectEntry}}
+  >
+    <UkCard
+      @hover="true"
+      @color="primary"
+      class="uk-height-1"
+      data-test-change as |card|
+    >
+      <card.body>
+        <h3>
+          {{t (concat "emeis.acl-wizzard." @model ".select")}}
+        </h3>
+      </card.body>
+    </UkCard>
+  </button>
+{{/if}}

app/components/acl-wizzard.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/components/acl-wizzard";

app/components/acl-wizzard/select-card.js

@@ -0,0 +1 @@
+export { default } from "ember-emeis/components/acl-wizzard/select-card";

app/styles/ember-emeis.scss

@@ -19,6 +19,10 @@
   outline: inherit;
 }
 
+.pointer {
+  cursor: pointer;
+}
+
 .hidden-input {
   height: 0;
   width: 100%;