feat(scopes/users): two column layout (#376)

* feat(users): two column layout for user edit view * feat(scopes): two column layout for scopes view * fix(two-column-layout): increase breakpoints
projectcaluma · Jan 11, 2022 · 27b8b34 · 27b8b34
1 parent 8136acc
commit 27b8b34
Show file tree

Hide file tree

Showing 28 changed files with 493 additions and 547 deletions.
diff --git a/addon/components/data-table.hbs b/addon/components/data-table.hbs
@@ -1,31 +1,34 @@
-<div class="uk-flex uk-flex-right uk-width-1">
-  <form
-    class="uk-search uk-search-default uk-width-1-3@m uk-width-2-3@s search-input-form"
-    {{on "submit" this.updateSearch}}
-    {{on "reset" this.resetSearch}}
-  >
-    <input
-      name="search"
-      class="uk-search-input"
-      type="search"
-      value={{this.search}}
-      placeholder={{t "emeis.search.placeholder"}}
-      data-test-search-input
-      />
-    <button
-      type="submit"
-      class="uk-search-icon"
-      uk-search-icon
-      data-test-search-submit
-    ></button>
-    {{#if this.search}}
+<div class="uk-flex">
+  {{#if @heading}}<h3 class="uk-align-left uk-margin-remove-bottom">{{@heading}}</h3>{{/if}}
+  <span class="uk-align-right uk-flex uk-flex-right uk-width-1 uk-margin-remove-bottom">
+    <form
+      class="uk-search uk-search-default {{if @heading 'uk-width-medium@l' 'uk-width-large@l'}} uk-width-1@m search-input-form"
+      {{on "submit" this.updateSearch}}
+      {{on "reset" this.resetSearch}}
+    >
+      <input
+        name="search"
+        class="uk-search-input"
+        type="search"
+        value={{this.search}}
+        placeholder={{t "emeis.search.placeholder"}}
+        data-test-search-input
+        />
       <button
-        type="reset"
-        class="uk-search-icon search-reset-icon" uk-icon="close"
-        data-test-search-reset
-      />
-    {{/if}}
-  </form>
+        type="submit"
+        class="uk-search-icon"
+        uk-search-icon
+        data-test-search-submit
+      ></button>
+      {{#if this.search}}
+        <button
+          type="reset"
+          class="uk-search-icon search-reset-icon" uk-icon="close"
+          data-test-search-reset
+        />
+      {{/if}}
+    </form>
+  </span>
 </div>
 
 <table

diff --git a/addon/controllers/scopes/edit/index.js → addon/controllers/scopes/edit.js b/addon/controllers/scopes/edit/index.js → addon/controllers/scopes/edit.js
@@ -1,13 +1,18 @@
-import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 
-export default class ScopesEditIndexController extends Controller {
+import PaginationController from "ember-emeis/-private/controllers/pagination";
+
+export default class ScopesEditIndexController extends PaginationController {
   @service emeisOptions;
   @service intl;
   @service router;
   @service store;
 
+  get queryParamsfilter() {
+    return { scope: this.model?.id };
+  }
+
   get metaFields() {
     return this.emeisOptions.metaFields?.scope;
   }

diff --git a/addon/controllers/scopes/edit/acl.js b/addon/controllers/scopes/edit/acl.js
diff --git a/addon/controllers/users/edit/index.js → addon/controllers/users/edit.js b/addon/controllers/users/edit/index.js → addon/controllers/users/edit.js
@@ -1,12 +1,20 @@
-import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import { dropTask } from "ember-concurrency";
 
 const ALL_ADDITIONAL_FIELDS = ["phone", "language", "address", "city", "zip"];
 
-export default class UsersEditIndexController extends Controller {
+import PaginationController from "ember-emeis/-private/controllers/pagination";
+import handleModelErrors from "ember-emeis/decorators/handle-model-errors";
+
+export default class UsersEditController extends PaginationController {
   @service intl;
   @service emeisOptions;
+  @service notification;
+  @service store;
+
+  @tracked showAclWizzard = false;
 
   get metaFields() {
     return this.emeisOptions.metaFields?.user;
@@ -33,6 +41,10 @@ export default class UsersEditIndexController extends Controller {
       .map(([key]) => key);
   }
 
+  get queryParamsfilter() {
+    return { user: this.model.id };
+  }
+
   @action
   updateModel(model, formElements) {
     model.firstName = formElements.firstName.value;
@@ -53,4 +65,34 @@ export default class UsersEditIndexController extends Controller {
 
     return model;
   }
+
+  @dropTask
+  @handleModelErrors({ errorMessage: "emeis.form.save-error" })
+  *createAclEntry(aclProperties) {
+    const aclEntry = this.store.createRecord("acl", { ...aclProperties });
+
+    try {
+      yield aclEntry.save();
+      this.notification.success(this.intl.t("emeis.form.save-success"));
+      this.showAclWizzard = false;
+    } catch (exception) {
+      if (
+        exception.isAdapterError &&
+        exception.errors[0].status === "400" &&
+        exception.errors[0].code === "unique"
+      ) {
+        this.notification.danger(this.intl.t("emeis.acl-wizzard.duplicate"));
+      } else {
+        throw exception;
+      }
+    }
+  }
+
+  @dropTask
+  @handleModelErrors({ errorMessage: "emeis.form.delete-error" })
+  *deleteAclEntry(aclEntry, refreshDataTable) {
+    yield aclEntry.destroyRecord();
+    this.notification.success(this.intl.t("emeis.form.delete-success"));
+    refreshDataTable();
+  }
 }
diff --git a/addon/controllers/users/edit/acl.js b/addon/controllers/users/edit/acl.js
diff --git a/addon/routes/scopes/edit/acl.js b/addon/routes/scopes/edit/acl.js
diff --git a/addon/routes/scopes/edit/index.js b/addon/routes/scopes/edit/index.js
diff --git a/addon/routes/scopes/new.js b/addon/routes/scopes/new.js
@@ -1,7 +1,7 @@
 import CreateRoute from "ember-emeis/-private/routes/create";
 
 export default class ScopesNewRoute extends CreateRoute {
-  detailView = "scopes.edit.index";
+  detailView = "scopes.edit";
 
   model() {
     return this.store.createRecord("scope");

diff --git a/addon/routes/users/edit/acl.js b/addon/routes/users/edit/acl.js
diff --git a/addon/routes/users/edit/index.js b/addon/routes/users/edit/index.js
diff --git a/addon/routes/users/new.js b/addon/routes/users/new.js
@@ -1,7 +1,7 @@
 import CreateRoute from "ember-emeis/-private/routes/create";
 
 export default class UsersNewRoute extends CreateRoute {
-  detailView = "users.edit.index";
+  detailView = "users.edit";
 
   model() {
     return this.store.createRecord("user");

diff --git a/addon/templates/scopes.hbs b/addon/templates/scopes.hbs
@@ -1,7 +1,7 @@
 <SectionTitle @model="scopes" />
 
 <div class="uk-grid">
-  <div class="uk-width-xlarge@l uk-width-1-3@m uk-width-1-2@s uk-first-column tree-border-right">
+  <div class="uk-width-large@l uk-width-1-3@m uk-width-1-2@s uk-first-column tree-border-right">
     <Tree
       class="uk-margin-small-left"
       @items={{this.rootScopes}}

diff --git a/addon/templates/scopes/edit.hbs b/addon/templates/scopes/edit.hbs
@@ -1,4 +1,4 @@
-<ul uk-tab class="uk-child-width-1-2">
+{{!-- <ul uk-tab class="uk-child-width-1-2">
   <li>
     <LinkTo @route="scopes.edit.index" @model={{this.model}} data-test-scopes-edit-index-link>
       {{t "emeis.scopes.edit.edit-scope"}}
@@ -11,4 +11,91 @@
     </LinkTo>
   </li>
 </ul>
-{{outlet}}
+{{outlet}} --}}
+
+<div uk-grid class="uk-grid-divider">
+    <div class="uk-width-1-2@xl">
+      <h3>{{t "emeis.scopes.edit.edit-scope"}}</h3>
+      <EditForm
+        @model={{@model}}
+        @updateModel={{this.updateModel}}
+        @listViewRouteName="scopes.index"
+      >
+        <EditForm::Element @label={{t "emeis.scopes.headings.name"}}>
+          <input
+            class="uk-input"
+            type="text"
+            name="name"
+            placeholder="{{t "emeis.scopes.headings.name"}}..."
+            required
+            value={{@model.name}}
+          />
+        </EditForm::Element>
+
+        <EditForm::Element @label={{t "emeis.scopes.headings.description"}}>
+          <textarea
+            class="uk-textarea"
+            rows="5"
+            name="description"
+            placeholder="{{t "emeis.scopes.headings.description"}}..."
+            value={{@model.description}}
+          ></textarea>
+        </EditForm::Element>
+
+        <EditForm::Element @label={{t "emeis.scopes.headings.parent"}}>
+          <RelationshipSelect
+            @model={{this.allScopes}}
+            @selected={{@model.parent}}
+            @placeholder="{{t "emeis.scopes.headings.parent"}}..."
+            @onChange={{this.setParent}} as |scope|
+          >
+            {{scope.name}}
+          </RelationshipSelect>
+        </EditForm::Element>
+
+        <MetaFields
+          @model={{@model}}
+          @fields={{this.metaFields}}
+        />
+      </EditForm>
+    </div>
+    <div class="uk-width-1-2@xl">
+      <DataTable
+        @heading={{t "emeis.scopes.edit.acl.title"}}
+        @modelName="acl"
+        @filter={{this.queryParamsfilter}}
+        @include="user,role,scope"
+        @page={{this.page}}
+        @search={{this.search}}
+        @updatePage={{fn this.updateQueryParam "page"}}
+        @updateSearch={{fn this.updateQueryParam "search"}} as |table|
+      >
+        <table.head>
+          <th>
+            {{t "emeis.acl-table.headings.name"}}
+          </th>
+          <th>
+            {{t "emeis.acl-table.headings.user"}}
+          </th>
+          <th>
+            {{t "emeis.acl-table.headings.role"}}
+          </th>
+        </table.head>
+        <table.body as |body|>
+          <body.row>
+            {{#let body.model as |aclEntry|}}
+              <td data-test-acl-name={{aclEntry.id}}>
+                {{concat aclEntry.user.firstName " " aclEntry.user.lastName}}
+              </td>
+              <td data-test-acl-username={{aclEntry.id}}>
+                {{aclEntry.user.username}}
+              </td>
+              <td data-test-acl-role={{aclEntry.id}}>
+                {{aclEntry.role.name}}
+              </td>
+            {{/let}}
+          </body.row>
+        </table.body>
+      </DataTable>
+    </div>
+</div>