Empty page (no save button, no form controls) when adding new user/group (ciur/papermerge#513)

Author: ciur

Diff for: .github/workflows/tests.yml

@@ -1,6 +1,3 @@
-[![Tests](https://github.com/papermerge/papermerge.js/actions/workflows/tests.yml/badge.svg)](https://github.com/papermerge/papermerge.js/actions/workflows/tests.yml)
-
-
 # PapermergeJS
 
 PapermergeJS is frontend part i.e. web-based user interface of Papermerge

Diff for: README.md

@@ -10,7 +10,7 @@
   {{#each this.permission_groups as |perm_group|}}
   <Group::PermissionGroup
     @perm_group={{perm_group}}
-    @parent_group_model={{this.group}} />
+    @new_group_perms={{this.new_group_perms}} />
   {{/each}}
 </div>
 

Diff for: app/components/group/add.hbs

@@ -3,21 +3,15 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { group_perms_by_model } from 'papermerge/utils';
+import { TrackedArray } from 'tracked-built-ins';
 
 
 class AddGroupComponent extends Component {
   @service store;
   @service router;
 
   @tracked name = '';
-
-  get group() {
-    if (!this.new_group) {
-      this.new_group = this.store.createRecord('group');
-    }
-
-    return this.new_group;
-  }
+  @tracked new_group_perms = new TrackedArray();
 
   get permission_groups() {
     return group_perms_by_model(this.args.all_permissions);
@@ -29,10 +23,11 @@ class AddGroupComponent extends Component {
 
   @action
   onSubmit() {
-    if (this.new_group && this.name) {
-      this.new_group.name = this.name;
-      this.new_group.save();
-    }
+    this.new_group = this.store.createRecord('group');
+    this.new_group_perms.forEach(item => this.new_group.permissions.addObject(item));
+    this.new_group.name = this.name;
+    this.new_group.save();
+
 
     this.router.transitionTo('authenticated.groups');
   }

Diff for: app/components/group/add.js

@@ -10,7 +10,7 @@
   {{#each this.permission_groups as |perm_group|}}
   <Group::PermissionGroup
     @perm_group={{perm_group}}
-    @parent_group_model={{@group}} />
+    @new_group_perms={{@group.permissions}} />
   {{/each}}
 </div>
 

Diff for: app/components/group/edit.hbs

@@ -9,9 +9,15 @@ class PermissionComponent extends Component {
     */
     let parent_group_model_perm_ids;
 
-    parent_group_model_perm_ids = this.args.parent_group_model.permissions.map((p) => p.id);
+    if (this.args.new_group_perms) {
+      parent_group_model_perm_ids = this.args.new_group_perms.map((p) => p.id);
+    }
 
-    return parent_group_model_perm_ids.includes(this.args.permission.id);
+    if (parent_group_model_perm_ids) {
+      return parent_group_model_perm_ids.includes(this.args.permission.id);
+    }
+
+    return false;
   }
 
   set isChecked(value) {

Diff for: app/components/group/permission.js

@@ -7,7 +7,7 @@
   {{#each @perm_group.perms as |perm|}}
     <Group::Permission
       @permission={{perm}}
-      @parent_group_model={{@parent_group_model}}
+      @new_group_perms={{@new_group_perms}}
       @onChange={{this.onChange}} />
   {{/each}}
-</div>
+</div>

Diff for: app/components/group/permission_group.hbs

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
+
 class PermissionGroupComponent extends Component {
   /*
   A permission group is a set of four permissions
@@ -14,6 +15,7 @@ class PermissionGroupComponent extends Component {
   `this.args.perm_group.model` - model name (e.g. User)
   */
 
+
   get isChecked() {
     /*
     `isChecked` is true when all (four) permissions in the
@@ -28,10 +30,19 @@ class PermissionGroupComponent extends Component {
     */
     let parent_group_model_perm_ids, group_perm_ids;
 
-    parent_group_model_perm_ids = this.args.parent_group_model.permissions.map((p) => p.id);
-    group_perm_ids = this.args.perm_group.perms.map((p) => p.id);
+    if (this.args.new_group_perms) {
+      parent_group_model_perm_ids = this.args.new_group_perms.map((p) => p.id);
+    }
+    if (this.args.perm_group) {
+      group_perm_ids = this.args.perm_group.perms.map((p) => p.id);
+    }
+
+    if (parent_group_model_perm_ids) {
+      return group_perm_ids.every((v) => parent_group_model_perm_ids.includes(v));
+    }
 
-    return group_perm_ids.every((v) => parent_group_model_perm_ids.includes(v));
+
+    return false;
   }
 
   set isChecked(value) {
@@ -63,31 +74,40 @@ class PermissionGroupComponent extends Component {
     of the group.
     */
     let value = event.target.checked,
-      parent_group_model = this.args.parent_group_model,
       that = this;
 
     if (value) {
       // user chose to select (he checked) all
       // permissions in the group
       this.args.perm_group.perms.forEach((perm) => {
-        that.addPermission(parent_group_model, perm);
+        this.addPermission(perm);
       });
     } else {
       // user chose to unselect (i.e. he unchecked) all
       // permissions in the group
       this.args.perm_group.perms.forEach((perm) => {
-        that.removePermission(parent_group_model, perm);
+        this.removePermission(perm);
       });
     }
   }
 
-  addPermission(parent_group_model, perm) {
-    parent_group_model.permissions.addObject(perm);
+  addPermission(perm) {
+    if (this.args.new_group_perms['push']) {
+      this.args.new_group_perms.push(perm);
+    } else if (this.args.new_group_perms['addObject']) {
+      this.args.new_group_perms.addObject(perm);
+    }
   }
 
-  removePermission(parent_group_model, perm) {
-    parent_group_model.permissions.removeObject(perm);
+  removePermission(perm) {
+    if (this.args.new_group_perms['pop']) {
+      this.args.new_group_perms.pop(perm);
+    } else if (this.args.new_group_perms['removeObject']) {
+      this.args.new_group_perms.removeObject(perm);
+    }
+
   }
+
 }
 
 export default PermissionGroupComponent;

Diff for: app/components/group/permission_group.js

@@ -22,12 +22,6 @@ class AddUserComponent extends Component {
 
   groups = []
 
-  constructor(owner, args) {
-    super(owner, args);
-
-    this.new_user = this.store.createRecord('user');
-  }
-
   get disabled() {
     /*
     Form can be submitted only when both
@@ -57,6 +51,9 @@ class AddUserComponent extends Component {
 
   @action
   onSubmit() {
+
+    this.new_user = this.store.createRecord('user');
+
     if (this.new_user && this.username && this.email) {
       this.new_user.username = this.username;
       this.new_user.email = this.email;

Diff for: app/components/user/add.js

@@ -1,3 +1,5 @@
+<h1>Groups</h1>
+
 {{#if (has_perm 'add_group')}}
   <Button::New @route="authenticated.groups.add" class="groups-add"/>
 {{/if}}

Diff for: app/templates/authenticated/groups/index.hbs

@@ -1,3 +1,5 @@
+<h1>Users</h1>
+
 {{#if (has_perm 'add_user')}}
   <Button::New @route="authenticated.users.add" class="users-add"/>
 {{/if}}

Diff for: app/templates/authenticated/users/index.hbs

@@ -0,0 +1 @@
+Empty page (no save button, no form controls) when adding new user/group