feat: make addon configurable via config service (#269)

* feat: add option "emailAsUsername" * feat: add config option to hide "additional" user fields * feat: add option to hide entries in main nav * feat: add config option for optional user fields * fix: make scope description optional
projectcaluma · Aug 31, 2021 · 3a56283 · 3a56283
1 parent e002d85
commit 3a56283
Show file tree

Hide file tree

Showing 18 changed files with 279 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -44,6 +44,54 @@ export default class App extends Application {
 ```
 
 ## Configuration
+
+### Emeis options
+
+Basic configuration of ember-emeis can be done via the `emeis-options` service. To generate it, run `ember g service emeis-options` and add it to the dependencies in `app/app.js`:
+
+```js
+export default class App extends Application {
+  // ...
+
+  this.engines = {
+    emberEmeis: {
+      dependencies: {
+        services: ["store", "intl", "notification", "router", "emeis-options"],
+      },
+    },
+  };
+}
+});
+```
+
+The config service supports the following options:
+
+```js
+import Service from "@ember/service";
+
+export default class EmeisOptionsService extends Service {
+  // number of items in list views
+  pageSize = 10;
+
+  // hide "username" field
+  emailAsUsername = false;
+
+  // show only a subset of the "additional" fields on the user model
+  additionalUserFields = {
+    "phone": "required",
+    "language": "required",
+    "address": "optional",
+    "city": "optional",
+    "zip": "optional"
+  ];
+
+  // show only a subset of the main navigation entries
+  navigationEntries = ["users", "scopes"];
+}
+```
+
+### Emeis store
+
 If you need to customize your store service passed to emeis, use:
 `ember g emeis-store <your_name>`
 

diff --git a/addon/components/data-table.js b/addon/components/data-table.js
@@ -1,4 +1,3 @@
-import { getOwner } from "@ember/application";
 import { assert } from "@ember/debug";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
@@ -9,6 +8,7 @@ import { task, lastValue } from "ember-concurrency";
 export default class DataTableComponent extends Component {
   @service store;
   @service router;
+  @service emeisOptions;
 
   @tracked numPages;
   @tracked internalSearch;
@@ -62,12 +62,10 @@ export default class DataTableComponent extends Component {
       typeof this.args.modelName === "string"
     );
 
-    const ENV = getOwner(this).resolveRegistration("config:environment");
-
     const options = {
       page: {
         number: this.page,
-        size: ENV["ember-emeis"].pageSize,
+        size: this.emeisOptions.pageSize,
       },
       filter: { search: this.search, ...(this.args.filter || {}) },
       include: this.args.include || "",

diff --git a/addon/components/nav/item.hbs b/addon/components/nav/item.hbs
@@ -1,5 +1,7 @@
-<li class="uk-child-width-1-1 {{if this.isActive 'uk-active'}}" ...attributes>
-  <LinkTo @route={{@route}}>
-    {{yield}}
-  </LinkTo>
-</li>
+{{#if this.isVisible}}
+  <li class="uk-child-width-1-1 {{if this.isActive 'uk-active'}}" ...attributes>
+    <LinkTo @route={{@route}}>
+      {{yield}}
+    </LinkTo>
+  </li>
+{{/if}}
diff --git a/addon/components/nav/item.js b/addon/components/nav/item.js
@@ -3,8 +3,16 @@ import Component from "@glimmer/component";
 
 export default class NavItemComponent extends Component {
   @service router;
+  @service emeisOptions;
 
   get isActive() {
     return this.router.currentRoute.name.includes(this.args.route);
   }
+
+  get isVisible() {
+    return (
+      !this.emeisOptions.navigationEntries ||
+      this.emeisOptions.navigationEntries.includes(this.args.route)
+    );
+  }
 }
diff --git a/addon/controllers/users/edit/index.js b/addon/controllers/users/edit/index.js
@@ -2,22 +2,51 @@ import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 
+const ALL_ADDITIONAL_FIELDS = ["phone", "language", "address", "city", "zip"];
+
 export default class UsersEditIndexController extends Controller {
   @service intl;
+  @service emeisOptions;
 
   @action
   updateModel(model, formElements) {
-    model.username = formElements.username.value;
     model.firstName = formElements.firstName.value;
     model.lastName = formElements.lastName.value;
     model.email = formElements.email.value;
-    model.phone = formElements.phone.value;
-    model.language = formElements.language.selectedOptions[0].value;
-    model.address = formElements.address.value;
-    model.city = formElements.city.value;
-    model.zip = formElements.zip.value;
     model.isActive = formElements.isActive.checked;
 
+    // additional fields might not be present
+    model.phone = formElements.phone?.value;
+    model.language = formElements.language?.selectedOptions[0].value;
+    model.address = formElements.address?.value;
+    model.city = formElements.city?.value;
+    model.zip = formElements.zip?.value;
+
+    model.username = this.emailAsUsername
+      ? formElements.email.value
+      : formElements.username.value;
+
     return model;
   }
+
+  get emailAsUsername() {
+    return this.emeisOptions.emailAsUsername;
+  }
+
+  get visibleFields() {
+    if (!this.emeisOptions.additionalUserFields) {
+      return ALL_ADDITIONAL_FIELDS;
+    }
+
+    return Object.keys(this.emeisOptions.additionalUserFields);
+  }
+
+  get requiredFields() {
+    if (!this.emeisOptions.additionalUserFields) {
+      return ALL_ADDITIONAL_FIELDS;
+    }
+    return Object.entries(this.emeisOptions.additionalUserFields, {})
+      .filter(([, value]) => value === "required")
+      .map(([key]) => key);
+  }
 }
diff --git a/addon/controllers/users/index.js b/addon/controllers/users/index.js
@@ -1,3 +1,11 @@
+import { inject as service } from "@ember/service";
+
 import PaginationController from "ember-emeis/-private/controllers/pagination";
 
-export default class UsersIndexController extends PaginationController {}
+export default class UsersIndexController extends PaginationController {
+  @service emeisOptions;
+
+  get emailAsUsername() {
+    return this.emeisOptions.emailAsUsername;
+  }
+}
diff --git a/addon/engine.js b/addon/engine.js
@@ -11,7 +11,7 @@ export default class EmberEmeisEngine extends Engine {
   Resolver = Resolver;
 
   dependencies = {
-    services: ["store", "intl", "notification", "router"],
+    services: ["store", "intl", "notification", "router", "emeis-options"],
   };
 }
 

diff --git a/addon/services/emeis-options.js b/addon/services/emeis-options.js
@@ -0,0 +1,3 @@
+import Service from "@ember/service";
+
+export default class EmeisOptionsService extends Service {}
diff --git a/addon/templates/scopes/edit.hbs b/addon/templates/scopes/edit.hbs
@@ -17,7 +17,6 @@
       name="description"
       placeholder="{{t "emeis.scopes.headings.description"}}..."
       value={{@model.description}}
-      required
     ></textarea>
   </EditForm::Element>
 

diff --git a/addon/templates/users/edit/index.hbs b/addon/templates/users/edit/index.hbs
@@ -4,16 +4,18 @@
   @noDelete={{true}}
   @listViewRouteName="users.index"
 >
-  <EditForm::Element @label={{t "emeis.users.headings.username"}}>
-    <input
-      class="uk-input"
-      type="text"
-      name="username"
-      placeholder="{{t "emeis.users.headings.username"}}..."
-      required
-      value={{@model.username}}
-    />
-  </EditForm::Element>
+  {{#unless this.emailAsUsername}}
+    <EditForm::Element @label={{t "emeis.users.headings.username"}}>
+      <input
+        class="uk-input"
+        type="text"
+        name="username"
+        placeholder="{{t "emeis.users.headings.username"}}..."
+        required
+        value={{@model.username}}
+      />
+    </EditForm::Element>
+  {{/unless}}
 
   <EditForm::Element @label={{t "emeis.users.headings.firstName"}}>
     <input
@@ -48,67 +50,80 @@
     />
   </EditForm::Element>
 
-  <EditForm::Element @label={{t "emeis.users.headings.phone"}}>
-    <input
-      class="uk-input"
-      type="tel"
-      name="phone"
-      placeholder="{{t "emeis.users.headings.phone"}}..."
-      required
-      pattern="^[0-9()\-\s]+$"
-      value={{@model.phone}}
-    />
+  {{#if (includes "phone" this.visibleFields)}}
+    <EditForm::Element @label={{t "emeis.users.headings.phone"}}>
+      <input
+        class="uk-input"
+        type="tel"
+        name="phone"
+        placeholder="{{t "emeis.users.headings.phone"}}..."
+        required={{includes "phone" this.requiredFields}}
+        pattern="^[0-9()\-\s]+$"
+        value={{@model.phone}}
+      />
 
-    <span class="uk-text-meta">
-      {{t "emeis.form.phone-hint"}}
-    </span>
-  </EditForm::Element>
+      <span class="uk-text-meta">
+        {{t "emeis.form.phone-hint"}}
+      </span>
+    </EditForm::Element>
+  {{/if}}
 
-  <EditForm::Element @label={{t "emeis.users.headings.language"}}>
-    <select class="uk-select uk-text-uppercase" required name="language">
-      <option value="" class="uk-text-capitalize">
-        {{t "emeis.users.headings.language"}}...
-      </option>
-      {{#each this.intl.locales as |language|}}
-        <option value={{language}} selected={{eq language @model.language}}>
-          {{language}}
+  {{#if (includes "language" this.visibleFields)}}
+    <EditForm::Element @label={{t "emeis.users.headings.language"}}>
+      <select
+          class="uk-select uk-text-uppercase"
+          required={{includes "language" this.requiredFields}}
+          name="language">
+        <option value="" class="uk-text-capitalize">
+          {{t "emeis.users.headings.language"}}...
         </option>
-      {{/each}}
-    </select>
-  </EditForm::Element>
+        {{#each this.intl.locales as |language|}}
+          <option value={{language}} selected={{eq language @model.language}}>
+            {{language}}
+          </option>
+        {{/each}}
+      </select>
+    </EditForm::Element>
+  {{/if}}
 
-  <EditForm::Element @label={{t "emeis.users.headings.address"}}>
-    <input
-      class="uk-input"
-      type="text"
-      name="address"
-      placeholder="{{t "emeis.users.headings.address"}}..."
-      required
-      value={{@model.address}}
-    />
-  </EditForm::Element>
+  {{#if (includes "address" this.visibleFields)}}
+    <EditForm::Element @label={{t "emeis.users.headings.address"}}>
+      <input
+        class="uk-input"
+        type="text"
+        name="address"
+        placeholder="{{t "emeis.users.headings.address"}}..."
+        required={{includes "phone" this.requiredFields}}
+        value={{@model.address}}
+      />
+    </EditForm::Element>
+  {{/if}}
 
-  <EditForm::Element @label={{t "emeis.users.headings.city"}}>
-    <input
-      class="uk-input"
-      type="text"
-      name="city"
-      placeholder="{{t "emeis.users.headings.city"}}..."
-      required
-      value={{@model.city}}
-    />
-  </EditForm::Element>
+  {{#if (includes "city" this.visibleFields)}}
+    <EditForm::Element @label={{t "emeis.users.headings.city"}}>
+      <input
+        class="uk-input"
+        type="text"
+        name="city"
+        placeholder="{{t "emeis.users.headings.city"}}..."
+        required={{includes "city" this.requiredFields}}
+        value={{@model.city}}
+      />
+    </EditForm::Element>
+  {{/if}}
 
-  <EditForm::Element @label={{t "emeis.users.headings.zip"}}>
-    <input
-      class="uk-input"
-      type="number"
-      name="zip"
-      placeholder="{{t "emeis.users.headings.zip"}}..."
-      required
-      value={{@model.zip}}
-    />
-  </EditForm::Element>
+  {{#if (includes "zip" this.visibleFields)}}
+    <EditForm::Element @label={{t "emeis.users.headings.zip"}}>
+      <input
+        class="uk-input"
+        type="number"
+        name="zip"
+        placeholder="{{t "emeis.users.headings.zip"}}..."
+        required={{includes "zip" this.requiredFields}}
+        value={{@model.zip}}
+      />
+    </EditForm::Element>
+  {{/if}}
 
   <EditForm::Element @label={{t "emeis.users.headings.isActive"}}>
     <input
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Service from "@ember/service";

		export default class EmeisOptionsService extends Service {}