Skip to content

U
UsersDojoNg
Commit a58b4900 by Harangozó Péter
Options

compatibility

compatible with both .net and node backend
parent bf4a9e1d
Showing with 195 additions and 73 deletions
src/app/app.module.ts
//built in angular modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
//external modules
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
......@@ -30,6 +30,7 @@ import { RightService } from './modules/rights/services/right.service';
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
AppRoutingModule,
NgbModule.forRoot(),
......
src/app/modules/rights/models/right.ts
export class Right {
id: string;
Name: string;
name: string;
}
src/app/modules/rights/right/right.component.html
......@@ -7,7 +7,7 @@
<div class="form-group row">
<label for="Name" class="col-2 col-form-label">Name</label>
<div class="col-10">
<input id="Name" class="form-control" type="text" [(ngModel)]="right.Name" placeholder="Name" />
<input id="Name" class="form-control" type="text" [(ngModel)]="right.name" placeholder="Name" />
</div>
</div>
</div>
......@@ -17,7 +17,7 @@
<label for="Name" class="col-2 col-form-label">Name</label>
<div class="col-10">
<p class="form-control-static">
{{right.Name}}
{{right.name}}
</p>
</div>
</div>
......
src/app/modules/rights/rights.component.html
......@@ -13,7 +13,7 @@
<tbody>
<tr *ngFor="let right of rights">
<th scope="row">{{right.id}}</th>
<td>{{right.Name}}</td>
<td>{{right.name}}</td>
<td>
<button type="button" class="btn btn-sm btn-outline-info" (click)="details(right.id)">Details</button>
<button type="button" class="btn btn-sm btn-outline-warning" (click)="edit(right.id)">Edit</button>
......
src/app/modules/rights/services/right.service.ts
......@@ -16,10 +16,18 @@ export class RightService {
) { }
getRights(): Promise<Right[]> {
return this.http.get(this.rightsUrl)
.toPromise()
.then(response =>
response.json() as Right[])
;
}
getRightsForCombo(): Promise<Right[]> {
return this.http.get(this.rightsUrl + "/get-rights-for-combo")
.toPromise()
.then(response =>
response.json().rights as Right[])
response.json() as Right[])
;
}
......@@ -27,14 +35,14 @@ export class RightService {
const url = `${this.rightsUrl}/${id}`;
return this.http.get(url)
.toPromise()
.then(response => response.json().right as Right);
.then(response => response.json() as Right);
}
createRight(right: Right): Promise<Right> {
return this.http
.post(this.rightsUrl, JSON.stringify(right), { headers: this.headers })
.toPromise()
.then(res => res.json().right)
.then(res => res.json())
.catch(this.handleError);
}
......@@ -42,7 +50,7 @@ export class RightService {
return this.http
.put(this.rightsUrl, JSON.stringify(right), { headers: this.headers })
.toPromise()
.then(res => res.json().right)
.then(res => res.json())
.catch(this.handleError);
}
......
src/app/modules/users/models/user.ts
export class User {
id: number;
BirthDate: any;
FirstName: string;
LastName: string;
UserName: string;
Rights: any[];
birthDate: any;
firstName: string;
lastName: string;
userName: string;
rights: any[];
rightsDisplay: string;
}
src/app/modules/users/services/user.service.ts
......@@ -19,7 +19,7 @@ export class UserService {
return this.http.get(this.usersUrl)
.toPromise()
.then(response =>
response.json().users as User[])
response.json() as User[])
;
}
......@@ -28,8 +28,8 @@ export class UserService {
return this.http.get(url)
.toPromise()
.then(response => {
let user = response.json().user as User;
user.BirthDate = this.parserFormatter.parse(user.BirthDate);
let user = response.json() as User;
user.birthDate = this.parserFormatter.parse(user.birthDate);
return user;
});
}
......@@ -42,7 +42,7 @@ export class UserService {
}
createUser(user: User): Promise<User> {
user.BirthDate = this.parserFormatter.format(user.BirthDate);
user.birthDate = this.parserFormatter.format(user.birthDate);
return this.http
.post(this.usersUrl, JSON.stringify(user), { headers: this.headers })
.toPromise()
......@@ -51,12 +51,12 @@ export class UserService {
}
updateUser(user: User): Promise<User> {
user.BirthDate = this.parserFormatter.format(user.BirthDate);
user.birthDate = this.parserFormatter.format(user.birthDate);
return this.http
.put(this.usersUrl, JSON.stringify(user), { headers: this.headers })
.toPromise()
.then(res => {
return res.json().user;
return res.json();
})
.catch(this.handleError);
}
......
src/app/modules/users/user/user.component.html
......@@ -5,45 +5,66 @@
<button type="button" class="btn btn-sm btn-outline-success float-right" (click)="save()" [hidden]="!editMode">Save</button>
<hr>
<div *ngIf="editMode">
<div class="form-group row">
<label for="first-name" class="col-2 col-form-label">Firstname</label>
<div class="col-10">
<input id="first-name" class="form-control" type="text" [(ngModel)]="user.FirstName" placeholder="Firstname" />
<form class="form" [formGroup]="userForm" (ngSubmit)="save()">
<div class="form-group row">
<label for="first-name" class="col-2 col-form-label">Firstname</label>
<div class="col-10">
<input id="first-name" class="form-control" type="text" formControlName="firstName" [(ngModel)]="user.firstName" placeholder="Firstname"
required />
<div *ngIf="formErrors.firstName" class="alert alert-danger">
{{ formErrors.firstName }}
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="last-name" class="col-2 col-form-label">Lastname</label>
<div class="col-10">
<input id="last-name" class="form-control" type="text" [(ngModel)]="user.LastName" placeholder="Lastname" />
<div class="form-group row">
<label for="last-name" class="col-2 col-form-label">Lastname</label>
<div class="col-10">
<input id="last-name" class="form-control" type="text" formControlName="lastName" [(ngModel)]="user.lastName" placeholder="Lastname"
required />
<div *ngIf="formErrors.lastName" class="alert alert-danger">
{{ formErrors.lastName }}
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="user-name" class="col-2 col-form-label">Username</label>
<div class="col-10">
<input id="user-name" class="form-control" type="text" [(ngModel)]="user.UserName" placeholder="Username" />
<div class="form-group row">
<label for="user-name" class="col-2 col-form-label">Username</label>
<div class="col-10">
<input id="user-name" class="form-control" type="text" formControlName="userName" [(ngModel)]="user.userName" placeholder="Username"
required />
<div *ngIf="formErrors.userName" class="alert alert-danger">
{{ formErrors.userName }}
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="birthdate" class="col-2 col-form-label">Birthdate</label>
<div class="col-10 input-group">
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="user.BirthDate" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-addon" (click)="d.toggle()">
<i class="fa fa-6 fa-calendar" aria-hidden="true" style="width: 1.2rem; height: 1rem; cursor: pointer;"></i>
<div class="form-group row">
<label for="birthdate" class="col-2 col-form-label">Birthdate</label>
<div class="col-10 input-group">
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="birthDate" [(ngModel)]="user.birthDate" ngbDatepicker
required #d="ngbDatepicker">
<div class="input-group-addon" (click)="d.toggle()">
<i class="fa fa-6 fa-calendar" aria-hidden="true" style="width: 1.2rem; height: 1rem; cursor: pointer;"></i>
</div>
<div *ngIf="formErrors.birthDate" class="alert alert-danger">
{{ formErrors.birthDate }}
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="birthdate" class="col-2 col-form-label">Rights</label>
<div class="col-10">
<ng-select
[items]="rights"
[multiple]="true"
(selected)="selectedRight($event)"
(removed)="removedRight($event)"
[active]="user.Rights"
placeholder="No rights selected"></ng-select>
<div class="form-group row">
<label for="birthdate" class="col-2 col-form-label">Rights</label>
<div class="col-10">
<ng-select
formControlName="rights"
[items]="rights"
[multiple]="true"
(selected)="selectedRight($event)"
(removed)="removedRight($event)"
[active]="user.rights"
placeholder="No rights selected"></ng-select>
</div>
</div>
</div>
</form>
</div>
<div *ngIf="!editMode">
......@@ -51,7 +72,7 @@
<label for="first-name" class="col-2 col-form-label">Firstname</label>
<div class="col-10">
<p class="form-control-static">
{{user.FirstName}}
{{user.firstName}}
</p>
</div>
</div>
......@@ -59,7 +80,7 @@
<label for="last-name" class="col-2 col-form-label">Lastname</label>
<div class="col-10">
<p class="form-control-static">
{{user.LastName}}
{{user.lastName}}
</p>
</div>
</div>
......@@ -67,7 +88,7 @@
<label for="user-name" class="col-2 col-form-label">Username</label>
<div class="col-10">
<p class="form-control-static">
{{user.UserName}}
{{user.userName}}
</p>
</div>
</div>
......@@ -75,7 +96,15 @@
<label for="birthdate" class="col-2 col-form-label">Birthdate</label>
<div class="col-10 input-group">
<p class="form-control-static">
{{parserFormatter.format(user.BirthDate)}}
{{parserFormatter.format(user.birthDate)}}
</p>
</div>
</div>
<div class="form-group row">
<label for="rights" class="col-2 col-form-label">Rights</label>
<div class="col-10 input-group">
<p class="form-control-static">
{{user.rightsDisplay}}
</p>
</div>
</div>
......
src/app/modules/users/user/user.component.ts
......@@ -2,6 +2,7 @@ import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { User } from '../models/user';
......@@ -19,40 +20,113 @@ export class UserComponent implements OnInit {
editMode: boolean;
title: string;
rights: any[];
userForm: FormGroup;
// = new FormGroup({
// firstName: new FormControl(),
// lastName: new FormControl(),
// userName: new FormControl(),
// birthDate: new FormControl(),
// rights: new FormControl(),
// });
constructor(
private userService: UserService,
private rightService: RightService,
private route: ActivatedRoute,
private location: Location,
private parserFormatter: NgbDateParserFormatter
private parserFormatter: NgbDateParserFormatter,
private fb: FormBuilder
) { }
selectedRight(selected): void {
this.user.Rights = this.user.Rights || [];
this.user.Rights.push(selected);
this.user.rights = this.user.rights || [];
this.user.rights.push(selected);
}
removedRight(selected): void {
this.user.Rights = this.user.Rights || [];
var found = this.user.Rights.find(u => u.id == selected.id);
var index = this.user.Rights.indexOf(found);
if(index > -1)
this.user.Rights.splice(index, 1);
this.user.rights = this.user.rights || [];
var found = this.user.rights.find(u => u.id == selected.id);
var index = this.user.rights.indexOf(found);
if (index > -1)
this.user.rights.splice(index, 1);
}
ngOnInit(): void {
this.rightService.getRights().then(rights => this.rights = rights);
buildForm(): void {
this.userForm = this.fb.group({
'firstName': [this.user.firstName, [Validators.required]],
'lastName': [this.user.lastName, [Validators.required]],
'userName': [
this.user.userName, [
Validators.required,
Validators.minLength(4),
Validators.maxLength(24)
]
],
'birthDate': [this.user.birthDate, [Validators.required]],
'rights': [this.user.rights],
});
this.userForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged();
}
onValueChanged(data?: any) {
if (!this.userForm) { return; }
const form = this.userForm;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
formErrors = {
'firstName': '',
'lastName': '',
'userName': '',
'birthDate': '',
'rights': '',
};
validationMessages = {
'firstName': {
'required': 'Firstname is required.',
},
'lastName': {
'required': 'Lastname is required.',
},
'userName': {
'required': 'Username is required.',
'minlength': 'Username must be at least 4 characters long.',
'maxlength': 'Username cannot be more than 24 characters long.',
},
'birthDate': {
'required': 'Birth date is required.',
},
'rights': {}
};
ngOnInit(): void {
this.rightService.getRightsForCombo().then(rights => this.rights = rights);
this.user = new User();
this.buildForm();
this.editMode = true;
this.route.params.subscribe(params => {
if (params['id']) {
this.userService.getUser(params['id'])
.then(user => {
this.user = user
this.user.Rights = this.user.Rights || [];
this.user.rights = this.user.rights || [];
this.user.rightsDisplay = this.user.rights.map(r => r.text).join(', ');
});
}
if (this.location.path().indexOf('details') > -1) {
......@@ -65,7 +139,7 @@ export class UserComponent implements OnInit {
else {
this.title = "Create";
this.user = new User();
this.user.Rights = this.user.Rights || [];
this.user.rights = this.user.rights || [];
}
}
});
......
src/app/modules/users/users.component.html
......@@ -15,9 +15,9 @@
<tbody>
<tr *ngFor="let user of users">
<th scope="row">{{user.id}}</th>
<td>{{user.FirstName}}</td>
<td>{{user.LastName}}</td>
<td>{{user.UserName}}</td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.userName}}</td>
<td>
<button type="button" class="btn btn-sm btn-outline-info" (click)="details(user.id)">Details</button>
<button type="button" class="btn btn-sm btn-outline-warning" (click)="edit(user.id)">Edit</button>
......
src/styles.less
......@@ -4,9 +4,17 @@ ng-select{
display: block!important;
}
}
//Because of bootstrap 4 removed xs from the button sizes
.btn-group-xs>.btn, .btn-xs {
padding: .25rem .5rem;
font-size: .875rem;
border-radius: .2rem;
}
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment