From 8094a8980265a0a28e508dbd7cf7c7029e6d98b6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 5 Sep 2017 21:29:39 +0200 Subject: Add user update for admins --- client/src/app/+admin/users/user-edit/index.ts | 2 + .../+admin/users/user-edit/user-add.component.ts | 87 +++++++++++++++++ .../users/user-edit/user-edit.component.html | 55 +++++++++++ client/src/app/+admin/users/user-edit/user-edit.ts | 16 ++++ .../users/user-edit/user-update.component.ts | 106 +++++++++++++++++++++ 5 files changed, 266 insertions(+) create mode 100644 client/src/app/+admin/users/user-edit/index.ts create mode 100644 client/src/app/+admin/users/user-edit/user-add.component.ts create mode 100644 client/src/app/+admin/users/user-edit/user-edit.component.html create mode 100644 client/src/app/+admin/users/user-edit/user-edit.ts create mode 100644 client/src/app/+admin/users/user-edit/user-update.component.ts (limited to 'client/src/app/+admin/users/user-edit') diff --git a/client/src/app/+admin/users/user-edit/index.ts b/client/src/app/+admin/users/user-edit/index.ts new file mode 100644 index 000000000..edec02fbb --- /dev/null +++ b/client/src/app/+admin/users/user-edit/index.ts @@ -0,0 +1,2 @@ +export * from './user-add.component' +export * from './user-update.component' diff --git a/client/src/app/+admin/users/user-edit/user-add.component.ts b/client/src/app/+admin/users/user-edit/user-add.component.ts new file mode 100644 index 000000000..40f649cff --- /dev/null +++ b/client/src/app/+admin/users/user-edit/user-add.component.ts @@ -0,0 +1,87 @@ +import { Component, OnInit } from '@angular/core' +import { FormBuilder, FormGroup } from '@angular/forms' +import { Router } from '@angular/router' + +import { NotificationsService } from 'angular2-notifications' + +import { UserService } from '../shared' +import { + USER_USERNAME, + USER_EMAIL, + USER_PASSWORD, + USER_VIDEO_QUOTA +} from '../../../shared' +import { UserCreate } from '../../../../../../shared' +import { UserEdit } from './user-edit' + +@Component({ + selector: 'my-user-add', + templateUrl: './user-edit.component.html' +}) +export class UserAddComponent extends UserEdit implements OnInit { + error: string + + form: FormGroup + formErrors = { + 'username': '', + 'email': '', + 'password': '', + 'videoQuota': '' + } + validationMessages = { + 'username': USER_USERNAME.MESSAGES, + 'email': USER_EMAIL.MESSAGES, + 'password': USER_PASSWORD.MESSAGES, + 'videoQuota': USER_VIDEO_QUOTA.MESSAGES + } + + constructor ( + private formBuilder: FormBuilder, + private router: Router, + private notificationsService: NotificationsService, + private userService: UserService + ) { + super() + } + + buildForm () { + this.form = this.formBuilder.group({ + username: [ '', USER_USERNAME.VALIDATORS ], + email: [ '', USER_EMAIL.VALIDATORS ], + password: [ '', USER_PASSWORD.VALIDATORS ], + videoQuota: [ '-1', USER_VIDEO_QUOTA.VALIDATORS ] + }) + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)) + } + + ngOnInit () { + this.buildForm() + } + + formValidated () { + this.error = undefined + + const userCreate: UserCreate = this.form.value + + // A select in HTML is always mapped as a string, we convert it to number + userCreate.videoQuota = parseInt(this.form.value['videoQuota'], 10) + + this.userService.addUser(userCreate).subscribe( + () => { + this.notificationsService.success('Success', `User ${userCreate.username} created.`) + this.router.navigate([ '/admin/users/list' ]) + }, + + err => this.error = err.text + ) + } + + isCreation () { + return true + } + + getFormButtonTitle () { + return 'Add user' + } +} diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html new file mode 100644 index 000000000..0e23cb731 --- /dev/null +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -0,0 +1,55 @@ +
+
+ +

Add user

+

Edit user {{ username }}

+ +
{{ error }}
+ +
+
+ + +
+ {{ formErrors.username }} +
+
+ +
+ + +
+ {{ formErrors.email }} +
+
+ +
+ + +
+ {{ formErrors.password }} +
+
+ +
+ + +
+ + +
+
+
diff --git a/client/src/app/+admin/users/user-edit/user-edit.ts b/client/src/app/+admin/users/user-edit/user-edit.ts new file mode 100644 index 000000000..61db8a906 --- /dev/null +++ b/client/src/app/+admin/users/user-edit/user-edit.ts @@ -0,0 +1,16 @@ +import { FormReactive } from '../../../shared' + +export abstract class UserEdit extends FormReactive { + videoQuotaOptions = [ + { value: -1, label: 'Unlimited' }, + { value: 100 * 1024 * 1024, label: '100MB' }, + { value: 5 * 1024 * 1024, label: '500MB' }, + { value: 1024 * 1024 * 1024, label: '1GB' }, + { value: 5 * 1024 * 1024 * 1024, label: '5GB' }, + { value: 20 * 1024 * 1024 * 1024, label: '20GB' }, + { value: 50 * 1024 * 1024 * 1024, label: '50GB' } + ] + + abstract isCreation (): boolean + abstract getFormButtonTitle (): string +} diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts new file mode 100644 index 000000000..dbac5f974 --- /dev/null +++ b/client/src/app/+admin/users/user-edit/user-update.component.ts @@ -0,0 +1,106 @@ +import { Component, OnDestroy, OnInit } from '@angular/core' +import { FormBuilder, FormGroup } from '@angular/forms' +import { ActivatedRoute, Router } from '@angular/router' +import { Subscription } from 'rxjs/Subscription' + +import { NotificationsService } from 'angular2-notifications' + +import { UserService } from '../shared' +import { USER_EMAIL, USER_VIDEO_QUOTA } from '../../../shared' +import { UserUpdate } from '../../../../../../shared/models/users/user-update.model' +import { User } from '../../../shared/users/user.model' +import { UserEdit } from './user-edit' + +@Component({ + selector: 'my-user-update', + templateUrl: './user-edit.component.html' +}) +export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy { + error: string + userId: number + username: string + + form: FormGroup + formErrors = { + 'email': '', + 'videoQuota': '' + } + validationMessages = { + 'email': USER_EMAIL.MESSAGES, + 'videoQuota': USER_VIDEO_QUOTA.MESSAGES + } + + private paramsSub: Subscription + + constructor ( + private formBuilder: FormBuilder, + private route: ActivatedRoute, + private router: Router, + private notificationsService: NotificationsService, + private userService: UserService + ) { + super() + } + + buildForm () { + this.form = this.formBuilder.group({ + email: [ '', USER_EMAIL.VALIDATORS ], + videoQuota: [ '-1', USER_VIDEO_QUOTA.VALIDATORS ] + }) + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)) + } + + ngOnInit () { + this.buildForm() + + this.paramsSub = this.route.params.subscribe(routeParams => { + const userId = routeParams['id'] + this.userService.getUser(userId).subscribe( + user => this.onUserFetched(user), + + err => this.error = err.text + ) + }) + } + + ngOnDestroy () { + this.paramsSub.unsubscribe() + } + + formValidated () { + this.error = undefined + + const userUpdate: UserUpdate = this.form.value + + // A select in HTML is always mapped as a string, we convert it to number + userUpdate.videoQuota = parseInt(this.form.value['videoQuota'], 10) + + this.userService.updateUser(this.userId, userUpdate).subscribe( + () => { + this.notificationsService.success('Success', `User ${this.username} updated.`) + this.router.navigate([ '/admin/users/list' ]) + }, + + err => this.error = err.text + ) + } + + isCreation () { + return false + } + + getFormButtonTitle () { + return 'Update user' + } + + private onUserFetched (userJson: User) { + this.userId = userJson.id + this.username = userJson.username + + this.form.patchValue({ + email: userJson.email, + videoQuota: userJson.videoQuota + }) + } +} -- cgit v1.2.3