1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-07-24 15:49:44 +02:00

list group members & non-members

This commit is contained in:
sauls8t 2018-02-28 14:55:36 +00:00
parent 19b4a3de49
commit 0680a72ee2
15 changed files with 360 additions and 60 deletions

View file

@ -11,13 +11,20 @@
import $ from 'jquery';
import { inject as service } from '@ember/service';
import { debounce } from '@ember/runloop';
import Component from '@ember/component';
import AuthProvider from '../../mixins/auth';
import ModalMixin from '../../mixins/modal';
export default Component.extend(AuthProvider, ModalMixin, {
groupSvc: service('group'),
userSvc: service('user'),
newGroup: null,
searchText: '',
showUsers: false,
showMembers: true,
users: null,
members: null,
didReceiveAttrs() {
this._super(...arguments);
@ -35,6 +42,37 @@ export default Component.extend(AuthProvider, ModalMixin, {
this.set('newGroup', { name: '', purpose: '' });
},
loadUsers(searchText) {
this.get('userSvc').matchUsers(searchText).then((users) => {
let members = this.get('members');
if (members.length > 0) {
users.forEach((user) => {
let m = members.findBy('userId', user.get('id'));
user.set('isMember', is.not.undefined(m));
})
}
this.set('users', users);
});
},
loadMembers(groupId) {
this.get('groupSvc').getGroupMembers(groupId).then((members) => {
this.set('members', members);
// if we have no members, then prefetch users (server should limit to top 100 users)
if (members.length === 0) {
this.loadUsers('');
this.set('showMembers', false);
this.set('showUsers', true);
} else {
this.set('showMembers', true);
this.set('showUsers', false);
}
});
},
actions: {
onOpenGroupModal() {
this.modalOpen("#add-group-modal", {"show": true}, '#new-group-name');
@ -44,6 +82,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
e.preventDefault();
let newGroup = this.get('newGroup');
if (is.empty(newGroup.name)) {
$("#new-group-name").addClass("is-invalid").focus();
return;
@ -82,8 +121,7 @@ export default Component.extend(AuthProvider, ModalMixin, {
},
onShowEditModal(groupId) {
let group = this.get('groups').findBy('id', groupId);
this.set('editGroup', group);
this.set('editGroup', this.get('groups').findBy('id', groupId));
this.modalOpen("#edit-group-modal", {"show": true}, '#edit-group-name');
},
@ -103,6 +141,43 @@ export default Component.extend(AuthProvider, ModalMixin, {
this.modalClose("#edit-group-modal");
this.set('editGroup', null);
},
onShowMembersModal(groupId) {
this.set('membersGroup', this.get('groups').findBy('id', groupId));
this.modalOpen("#group-members-modal", {"show": true}, '#group-members-search');
this.set('members', null);
this.set('users', null);
this.loadMembers(groupId);
},
onSearch() {
debounce(this, function() {
let searchText = this.get('searchText');
let groupId = this.get('membersGroup.id');
if (is.not.empty(searchText)) {
this.loadUsers(searchText);
this.set('showMembers', false);
this.set('showUsers', true);
} else {
this.loadMembers(groupId);
this.set('showMembers', true);
this.set('showUsers', false);
}
}, 250);
},
onLeaveGroup(userId) {
this.get('groupSvc').leave(this.get('membersGroup.id'), userId).then(() => {
this.load();
});
},
onJoinGroup(userId) {
this.get('groupSvc').join(this.get('membersGroup.id'), userId).then(() => {
this.load();
});
}
}
});

View file

@ -0,0 +1,27 @@
// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
//
// This software (Documize Community Edition) is licensed under
// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
//
// You can operate outside the AGPL restrictions by purchasing
// Documize Enterprise Edition and obtaining a commercial license
// by contacting <sales@documize.com>.
//
// https://documize.com
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { computed } from '@ember/object';
export default Model.extend({
orgId: attr('string'),
roleId: attr('string'),
userId: attr('string'),
// for UI only
firstname: attr('string'),
lastname: attr('string'),
fullname: computed('firstname', 'lastname', function () {
return `${this.get('firstname')} ${this.get('lastname')}`;
})
});

View file

@ -9,17 +9,9 @@
//
// https://documize.com
import { inject as service } from '@ember/service';
import Controller from '@ember/controller';
export default Controller.extend({
userService: service('user'),
init() {
this._super(...arguments);
// this.newUser = { firstname: "", lastname: "", email: "", active: true };
},
actions: {
}
});

View file

@ -64,5 +64,35 @@ export default BaseService.extend({
return this.get('ajax').request(`group/${groupId}`, {
method: 'DELETE'
});
}
},
// Returns users associated with given group
getGroupMembers(groupId) {
return this.get('ajax').request(`group/${groupId}/members`, {
method: 'GET'
}).then((response) => {
let data = [];
data = response.map((obj) => {
let data = this.get('store').normalize('group-member', obj);
return this.get('store').push(data);
});
return data;
});
},
// join adds user to group.
join(groupId, userId) {
return this.get('ajax').request(`group/${groupId}/join/${userId}`, {
method: 'POST'
});
},
// leave removes user from group.
leave(groupId, userId) {
return this.get('ajax').request(`group/${groupId}/leave/${userId}`, {
method: 'DELETE'
});
},
});

View file

@ -145,5 +145,24 @@ export default Service.extend({
method: "POST",
data: password
});
}
},
// matchUsers on firstname, lastname, email
matchUsers(text) {
return this.get('ajax').request('users/match', {
method: 'POST',
dataType: 'json',
contentType: 'text',
data: text
}).then((response) => {
let data = [];
data = response.map((obj) => {
let data = this.get('store').normalize('user', obj);
return this.get('store').push(data);
});
return data;
});
}
});

View file

@ -106,3 +106,7 @@ $link-hover-decoration: none;
.modal-80 {
max-width: 80% !important;
}
body.modal-open {
padding-right: 0 !important;
}

View file

@ -60,39 +60,30 @@
padding: 0;
margin: 0;
> .item {
> .group {
margin: 15px 0;
padding: 15px;
@include card();
@include ease-in();
> .group {
display: inline-block;
> .name {
font-size: 1.2rem;
color: $color-primary;
}
.name {
font-size: 1.2rem;
color: $color-off-black;
> .purpose {
font-size: 1rem;
color: $color-off-black;
}
> .info {
font-size: 0.9rem;
margin-top: 8px;
color: $color-gray;
display: inline-block;
}
}
> .buttons {
margin-top: 5px;
}
> .action {
display: inline-block;
}
}
}
}
> .group-users-members {
> .item {
margin: 10px 0;
> .fullname {
color: $color-primary;
font-size: 1.2rem;
}
}
}
}

View file

@ -5,6 +5,7 @@
<h1 class="admin-heading">Groups</h1>
<h2 class="sub-heading">Create groups for easier user management &mdash; assign users to groups</h2>
<div class="btn btn-success mt-3 mb-3" {{action 'onOpenGroupModal'}}>Add group</div>
<div id="add-group-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
@ -17,7 +18,7 @@
<small class="form-text text-muted">e.g. Managers, Developers, Acme Team</small>
</div>
<div class="form-group">
<label for="space-invite-msg">Description (optional)</label>
<label for="new-group-desc">Description (optional)</label>
{{textarea id="new-group-desc" value=newGroup.purpose class="form-control" rows="3"}}
</div>
</form>
@ -32,22 +33,20 @@
<div class="groups-list">
{{#each groups as |group|}}
<div class="item row">
<div class="group col-8">
<div class="name">{{group.name}}</div>
<div class="purpose">{{group.purpose}}&nbsp;</div>
<div class="info">
{{#if (eq group.members 0)}}
no members assigned yet
{{else if (eq group.members 1)}}
1 member
{{else}}
{{group.members}} members
<div class="row group">
<div class="col-8">
<div class="name">
{{group.name}}
{{#if group.purpose}}
<div class="purpose">&nbsp;&nbsp;&mdash;&nbsp;{{group.purpose}}</div>
{{/if}}
</div>
</div>
<div class="col-4 buttons text-right">
<div class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Rename" {{action 'onShowEditModal' group.id}} >
<button class="btn btn-sm btn-secondary" {{action 'onShowMembersModal' group.id}}>{{group.members}} members</button>
<div class="button-icon-gap" />
<div class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Rename" {{action 'onShowEditModal' group.id}}>
<i class="material-icons">edit</i>
</div>
<div class="button-icon-gap" />
@ -69,7 +68,7 @@
<form onsubmit={{action 'onDeleteGroup'}}>
<p>Are you sure you want to delete this group?</p>
<div class="form-group">
<label for="delete-space-name">Please type group name to confirm</label>
<label for="delete-group-name">Please type group name to confirm</label>
{{input id="delete-group-name" type="text" class="form-control mousetrap" placeholder="Group name" value=deleteGroup.name}}
<small class="form-text text-muted">This will remove group membership information and associated permissions!</small>
</div>
@ -95,7 +94,7 @@
<small class="form-text text-muted">e.g. Managers, Developers, Acme Team</small>
</div>
<div class="form-group">
<label for="space-invite-msg">Description (optional)</label>
<label for="edit-group-desc">Description (optional)</label>
{{textarea id="edit-group-desc" value=editGroup.purpose class="form-control" rows="3"}}
</div>
</form>
@ -106,7 +105,53 @@
</div>
</div>
</div>
</div>
</div>
<div id="group-members-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">{{membersGroup.name}}</div>
<div class="modal-body">
<div class="form-group">
<label for="group-members-search">Search for group members, non-members</label>
{{input id="group-members-search" type="text" class="form-control mousetrap" placeholder="Search members and users..." value=searchText key-up=(action 'onSearch')}}
<small class="form-text text-muted">matches firstname, lastname, email</small>
</div>
<div class="view-customize">
<div class="group-users-members my-5">
{{#if showMembers}}
{{#each members as |member|}}
<div class="row item">
<div class="col-10 fullname">{{member.fullname}}</div>
<div class="col-2 text-right">
<button class="btn btn-danger" {{action 'onLeaveGroup' member.userId}}>Leave</button>
</div>
</div>
{{/each}}
{{/if}}
{{#if showUsers}}
{{#each users as |user|}}
<div class="row item">
<div class="col-10 fullname">{{user.firstname}} {{user.lastname}}</div>
<div class="col-2 text-right">
{{#if user.isMember}}
<button class="btn btn-danger" {{action 'onLeaveGroup' user.id}}>Leave</button>
{{else}}
<button class="btn btn-success" {{action 'onJoinGroup' user.id}}>Join</button>
{{/if}}
</div>
</div>
{{/each}}
{{/if}}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>