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:
parent
19b4a3de49
commit
0680a72ee2
15 changed files with 360 additions and 60 deletions
|
@ -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();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
27
gui/app/models/group-member.js
Normal file
27
gui/app/models/group-member.js
Normal 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')}`;
|
||||
})
|
||||
});
|
|
@ -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: {
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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'
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
4
gui/app/styles/bootstrap.scss
vendored
4
gui/app/styles/bootstrap.scss
vendored
|
@ -106,3 +106,7 @@ $link-hover-decoration: none;
|
|||
.modal-80 {
|
||||
max-width: 80% !important;
|
||||
}
|
||||
|
||||
body.modal-open {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
<h1 class="admin-heading">Groups</h1>
|
||||
<h2 class="sub-heading">Create groups for easier user management — 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}} </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"> — {{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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue