Added /users/create

This commit is contained in:
Lukas Metzger 2018-04-10 18:06:13 +02:00
parent 193b17ac19
commit 5d18531ec4
8 changed files with 104 additions and 6 deletions

View file

@ -1,3 +1,4 @@
import { CreateUserComponent } from './pages/create-user/create-user.component';
import { EditUserComponent } from './pages/edit-user/edit-user.component';
import { AdminGuard } from './services/admin-guard.service';
import { UsersComponent } from './pages/users/users.component';
@ -68,6 +69,10 @@ const routes: Routes = [
path: 'users',
component: UsersComponent
},
{
path: 'users/create',
component: CreateUserComponent
},
{
path: 'users/:userId',
component: EditUserComponent

View file

@ -1,3 +1,4 @@
import { CreateUserComponent } from './pages/create-user/create-user.component';
import { EditUserComponent } from './pages/edit-user/edit-user.component';
import { UsersOperation } from './operations/users.operations';
import { AdminGuard } from './services/admin-guard.service';
@ -58,7 +59,8 @@ import { UsersComponent } from './pages/users/users.component';
CreateSlaveComponent,
CreateAuthComponent,
UsersComponent,
EditUserComponent
EditUserComponent,
CreateUserComponent
],
imports: [
BrowserModule,

View file

@ -0,0 +1,39 @@
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<p class="font-weight-bold">Create user</p>
<form autocomplete="off" [formGroup]="userForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control auto-invalid" formControlName="name" />
<div class="invalid-feedback">
Name can not be empty.
</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control auto-validstate" formControlName="password" appFocus />
<div class="invalid-feedback">
Password is required.
</div>
</div>
<div class="form-group">
<label>Repeat password</label>
<input type="password" class="form-control auto-validstate" formControlName="password2" />
<div class="invalid-feedback">
Passwords do not match.
</div>
</div>
<div class="form-group">
<label>Type</label>
<app-select [options]="['user', 'admin']" notNull formControlName="type"></app-select>
</div>
<button type="submit" class="btn btn-primary float-right" [disabled]="!userForm.valid || userForm.pristine">Save</button>
</form>
</div>
</div>

View file

@ -0,0 +1,51 @@
import { UsersOperation } from './../../operations/users.operations';
import { ModalService } from './../../services/modal.service';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { ModalOptionsDatatype } from '../../datatypes/modal-options.datatype';
import { PasswordValidationUtil } from '../../utils/password-validation.util';
@Component({
selector: 'app-create-user',
templateUrl: './create-user.component.html',
styleUrls: ['./create-user.component.scss']
})
export class CreateUserComponent implements OnInit {
public userForm: FormGroup;
constructor(private fb: FormBuilder, private route: ActivatedRoute, private users: UsersOperation,
private router: Router, private modal: ModalService) { }
ngOnInit() {
this.createForm();
}
private createForm() {
this.userForm = this.fb.group({
name: ['', Validators.required],
type: ['user', Validators.required],
password: ['', Validators.required],
password2: ['']
}, { validator: PasswordValidationUtil.matchPassword });
}
public async onSubmit() {
try {
const v = this.userForm.value;
const newUser = await this.users.create(v.name, v.type, v.password);
this.router.navigate(['/users', newUser.id.toString()]);
} catch (e) {
await this.modal.showMessage(new ModalOptionsDatatype({
heading: 'Error',
body: e.message,
acceptText: 'OK',
dismisText: '',
acceptClass: 'warning'
}));
}
}
}

View file

@ -1,6 +1,6 @@
<div class="row justify-content-end">
<div class="col-12 col-md-6">
<button class="btn btn-secondary btn-sm">Add user</button>
<button routerLink="create/" class="btn btn-secondary btn-sm">Add user</button>
</div>
<div class="col-12 col-md-6 mt-2 mt-md-0">
<app-pagesize class="float-md-right" [pagesizes]="gs.pageSizes" [currentPagesize]="gs.pageSize" (pagesizeChange)="onPagesizeChange($event)"></app-pagesize>

View file

@ -1,10 +1,10 @@
<div class="dropdown">
<button class="btn btn-sm dropdown-toggle no-shadow" (click)="toggleOpen()" [class.disabled]="!enabled">
<a class="btn btn-sm dropdown-toggle no-shadow" (click)="toggleOpen()" [class.disabled]="!enabled">
{{ buttonText() }}
</button>
</a>
<div class="dropdown-menu" [class.show]="open">
<span class="dropdown-item cursor-pointer" (click)="reset()">Clear</span>
<div class="dropdown-divider"></div>
<span class="dropdown-item cursor-pointer" *ngIf="notNull === false" (click)="reset()">Clear</span>
<div class="dropdown-divider" *ngIf="notNull === false"></div>
<span *ngFor="let option of options" [class.active]="isActive(option)" class="dropdown-item cursor-pointer"
(click)="onClick(option)">{{ option }}</span>
</div>

View file

@ -16,6 +16,7 @@ export class SelectComponent implements OnInit, ControlValueAccessor {
@Input() options: Array<string> = [];
@Input() emptyText = 'Choose..';
@Input() multiple = false;
@Input() notNull = false;
public open = false;