reivilibre/TaskBoard
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 2 Wiki Activity

Initial user administration section work

Browse Source
This commit is contained in:
kiswa 2016-07-25 20:20:27 +00:00
parent 98cfad45cb
commit ee9d50f0cc
9 changed files with 183 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/settings/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from './user-admin/user-admin.component';
export * from './user-settings/user-settings.component';

50
src/app/settings/settings.component.html
View File

@ -3,55 +3,7 @@
<div class="settings">
<div class="half-page">
<tb-user-settings></tb-user-settings>
<section>
<h2>User Administration</h2>
<div class="row">
<table class="alternating">
<thead>
<tr>
<th>User</th>
<th>Email</th>
<th>Security Level</th>
<th>Default Board</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>admin</td>
<td>None</td>
<td>Administrator</td>
<td>None</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>None</td>
<td>User</td>
<td>None</td>
<td>
<a href=""><i class="icon icon-edit"></i></a>
<a href=""><i class="icon icon-trash-empty"></i></a>
</td>
</tr>
<tr>
<td>other_guy</td>
<td>None</td>
<td>Board Administrator</td>
<td>None</td>
<td>
<a href=""><i class="icon icon-edit"></i></a>
<a href=""><i class="icon icon-trash-empty"></i></a>
</td>
</tr>
</tbody>
</table>
<button>Add User</button>
</div>
</section>
<tb-user-admin></tb-user-admin>
</div>
<div class="half-page">

4
src/app/settings/settings.component.ts
View File

@ -1,12 +1,12 @@
import { Component } from '@angular/core';
import { TopNav } from '../shared/index';
import { UserSettings } from './user-settings/user-settings.component';
import { UserSettings, UserAdmin } from './index';
@Component({
selector: 'tb-settings',
templateUrl: 'app/settings/settings.component.html',
directives: [ TopNav, UserSettings ]
directives: [ TopNav, UserSettings, UserAdmin ]
})
export class Settings {
}

41
src/app/settings/user-admin/user-admin.component.html Normal file
View File

@ -0,0 +1,41 @@
<section>
<h2>User Administration</h2>
<div class="row">
<table class="alternating">
<thead>
<tr>
<th>User</th>
<th>Email</th>
<th>Security Level</th>
<th>Default Board</th>
<th>Actions</th>
</tr>
</thead>
<tbody *ngIf="!loading">
<tr *ngFor="let user of users">
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>{{ user.security_level_name }}</td>
<td>{{ user.default_board_name }}</td>
<td>
<span *ngIf="user.can_admin">
<a (click)="editUser(user)">
<i class="icon icon-edit color-primary"></i>
</a>
<a (click)="removeUser(user)">
<i class="icon icon-trash-empty color-secondary"></i>
</a>
</span>
</td>
</tr>
</tbody>
</table>
<div *ngIf="loading" class="center">
<div class="spinner"></div>
</div>
<button (click)="addUser()">Add User</button>
</div>
</section>

63
src/app/settings/user-admin/user-admin.component.ts Normal file
View File

@ -0,0 +1,63 @@
import { Component } from '@angular/core';
import { UserAdminService } from './user-admin.service';
import {
AuthService,
User,
ApiResponse
} from '../../shared/index';
interface UserDisplay extends User {
default_board_name: string;
security_level_name: string;
can_admin: boolean;
}
@Component({
selector: 'tb-user-admin',
templateUrl: 'app/settings/user-admin/user-admin.component.html',
providers: [ UserAdminService ]
})
export class UserAdmin {
private activeUser: User = null;
private users: Array<UserDisplay>;
private loading: boolean = true;
constructor(private userService: UserAdminService,
private auth: AuthService) {
auth.userChanged.subscribe(user => this.activeUser = user);
this.userService.getUsers()
.subscribe((response: ApiResponse) => {
this.users = response.data[1];
this.updateUserList();
this.loading = false;
});
}
addUser(): void {
}
editUser(user: UserDisplay): void {
}
removeUser(user: UserDisplay): void {
}
private updateUserList(): void {
for (var user of this.users) {
if (user.default_board_id === 0) {
user.default_board_name = 'None';
}
user.security_level_name = user.security_level === 1 ?
'Admin' :
user.security_level === 2 ?
'Board Admin' :
'User';
// TODO: Determine ability to edit a given user
user.can_admin = true;
}
}
}

27
src/app/settings/user-admin/user-admin.service.ts Normal file
View File

@ -0,0 +1,27 @@
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import { User, ApiResponse } from '../../shared/index';
@Injectable()
export class UserAdminService {
constructor(private http: Http) {
}
getUsers(): Observable<ApiResponse> {
return this.http.get('api/users')
.map(res => {
let response: ApiResponse = res.json();
return response;
})
.catch((res, caught) => {
let response: ApiResponse = res.json();
return Observable.of(response);
});
}
}

16
src/app/settings/user-settings/user-settings.component.html
View File

@ -27,17 +27,18 @@
</form>
<h3 class="tall">All Boards Options</h3>
<label>
<label><strong>TODO</strong>
Select default board:
<select class="autosize">
<option>None</option>
</select>
<strong>TODO</strong>
</label>
<label>
New tasks appear at column
<select class="autosize"
[ngModel]="userOptions.new_tasks_at_bottom"
(ngModelChange)="onOptionChange('tasks', $event)">
(ngModelChange)="onOptionChange('new_tasks', $event)">
<option value="true">bottom</option>
<option value="false">top</option>
</select>
@ -45,7 +46,8 @@
<label>
Display tasks side-by-side in colums?
<input type="checkbox"
[(ngModel)]="userOptions.multiple_tasks_per_row">
[ngModel]="userOptions.multiple_tasks_per_row"
(ngModelChange)="onOptionChange('mult_tasks', $event)">
</label>
</div>
@ -81,11 +83,15 @@
<div class="hold-bottom">
<label>
Show animations?
<input type="checkbox" [(ngModel)]="userOptions.show_animations">
<input type="checkbox"
[ngModel]="userOptions.show_animations"
(ngModelChange)="onOptionChange('show_anim', $event)">
</label>
<label>
Show Assignee on task cards?
<input type="checkbox" [(ngModel)]="userOptions.show_assignee">
<input type="checkbox"
[ngModel]="userOptions.show_assignee"
(ngModelChange)="onOptionChange('show_assign', $event)">
</label>
</div>
</div>

20
src/app/settings/user-settings/user-settings.component.ts
View File

@ -41,10 +41,28 @@ export class UserSettings implements OnInit {
onOptionChange(option: string, event: any) {
switch (option) {
case 'tasks':
case 'new_tasks':
this.userOptions.new_tasks_at_bottom = (event === 'true');
break;
case 'mult_tasks':
this.userOptions.multiple_tasks_per_row = event;
break;
case 'show_anim':
this.userOptions.show_animations = event;
break;
case 'show_assign':
this.userOptions.show_assignee = event;
break;
}
this.updateUserOptions();
}
updateUserOptions() {
this.userService.changeUserOptions(this.userOptions)
.subscribe((response: ApiResponse) => {
this.addAlerts(response.alerts);
console.log(response);
});
}
updatePassword() {

19
src/app/settings/user-settings/user-settings.service.ts
View File

@ -7,8 +7,8 @@ import 'rxjs/add/operator/catch';
import {
User,
UserOptions,
ApiResponse,
Constants,
AuthService
} from '../../shared/index';
@ -21,8 +21,7 @@ interface UpdateUser extends User {
export class UserSettingsService {
activeUser: User = null;
constructor(constants: Constants,
private auth: AuthService, private http: Http) {
constructor(private auth: AuthService, private http: Http) {
auth.userChanged.subscribe(user => this.activeUser = user);
}
@ -79,5 +78,19 @@ export class UserSettingsService {
return Observable.of(response);
});
}
changeUserOptions(newOptions: UserOptions): Observable<ApiResponse> {
let json = JSON.stringify(newOptions);
return this.http.post('api/users/' + this.activeUser.id + '/opts', json)
.map(res => {
let response: ApiResponse = res.json();
return response;
})
.catch((res, caught) => {
let response: ApiResponse = res.json();
return Observable.of(response);
});
}
}