Skip to content

Commit 0c981c5

Browse files
author
Bezael
committed
Finish
1 parent 871a5f6 commit 0c981c5

File tree

12 files changed

+280
-52
lines changed

12 files changed

+280
-52
lines changed

‎src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ReactiveFormsModule } from '@angular/forms';
12
import { BrowserModule } from '@angular/platform-browser';
23
import { NgModule } from '@angular/core';
34

@@ -21,6 +22,7 @@ import { AdminInterceptor } from '@shared/interceptors/admin-interceptor';
2122
MaterialModule,
2223
SidebarModule,
2324
HttpClientModule,
25+
ReactiveFormsModule,
2426
],
2527
providers: [
2628
{ provide: HTTP_INTERCEPTORS, useClass: AdminInterceptor, multi: true },

‎src/app/material.module.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import { MatInputModule } from '@angular/material/input';
99
import { MatCardModule } from '@angular/material/card';
1010
import { MatTableModule } from '@angular/material/table';
1111
import { MatSortModule } from '@angular/material/sort';
12+
import { MatDialogModule } from '@angular/material/dialog';
13+
import { MatOptionModule } from '@angular/material/core';
14+
import { MatSelectModule } from '@angular/material/select';
1215

1316
const myModules = [
1417
MatToolbarModule,
@@ -21,6 +24,9 @@ const myModules = [
2124
MatCardModule,
2225
MatTableModule,
2326
MatSortModule,
27+
MatDialogModule,
28+
MatOptionModule,
29+
MatSelectModule,
2430
];
2531

2632
@NgModule({

‎src/app/pages/admin/admin.module.ts

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1+
import { ReactiveFormsModule } from '@angular/forms';
12
import { NgModule } from '@angular/core';
23
import { CommonModule } from '@angular/common';
34

45
import { AdminRoutingModule } from './admin-routing.module';
56
import { AdminComponent } from './admin.component';
6-
7+
import { ModalComponent } from './components/modal/modal.component';
8+
import { MaterialModule } from '@app/material.module';
79

810
@NgModule({
9-
declarations: [AdminComponent],
11+
declarations: [AdminComponent, ModalComponent],
1012
imports: [
1113
CommonModule,
12-
AdminRoutingModule
13-
]
14+
AdminRoutingModule,
15+
MaterialModule,
16+
ReactiveFormsModule,
17+
],
1418
})
15-
export class AdminModule { }
19+
export class AdminModule {}

‎src/app/pages/admin/components/modal/modal.component.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<h2 mat-dialog-title>{{ data?.title }}</h2>
2+
<mat-dialog-content>
3+
<div class="modal-form">
4+
<form [formGroup]="userForm.baseForm">
5+
<mat-form-field class="full-width-input">
6+
<input
7+
formControlName="username"
8+
matInput
9+
placeholder="Username"
10+
required
11+
/>
12+
<mat-error *ngIf="checkField('username')">
13+
{{ userForm.errorMessage }}
14+
</mat-error>
15+
</mat-form-field>
16+
<mat-form-field class="full-width-input" *ngIf="showPasswordField">
17+
<input
18+
[type]="hide ? 'password' : 'text'"
19+
formControlName="password"
20+
matInput
21+
placeholder="Password"
22+
required
23+
/>
24+
<button mat-icon-button matSuffix (click)="hide = !hide">
25+
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
26+
</button>
27+
<mat-error *ngIf="checkField('password')">
28+
{{ userForm.errorMessage }}
29+
</mat-error>
30+
</mat-form-field>
31+
<mat-form-field class="full-width-input">
32+
<mat-label>Select </mat-label>
33+
<mat-select formControlName="role">
34+
<mat-option value="suscriptor">Suscriptor</mat-option>
35+
<mat-option value="admin">Admin</mat-option>
36+
</mat-select>
37+
<mat-error *ngIf="checkField('role')">
38+
{{ userForm.errorMessage }}
39+
</mat-error>
40+
</mat-form-field>
41+
</form>
42+
</div>
43+
</mat-dialog-content>
44+
<mat-dialog-actions align="end">
45+
<button mat-button mat-dialog-close>Cancel</button>
46+
<button
47+
mat-raised-button
48+
[mat-dialog-close]="true"
49+
color="primary"
50+
(click)="onSave()"
51+
ckdFocusInitial
52+
[disabled]="!userForm.baseForm.valid"
53+
>
54+
Save
55+
</button>
56+
</mat-dialog-actions>

‎src/app/pages/admin/components/modal/modal.component.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.modal-form {
2+
padding: 1rem 0;
3+
4+
.full-width-input {
5+
width: 100%;
6+
}
7+
}

‎src/app/pages/admin/components/modal/modal.component.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ModalComponent } from './modal.component';
4+
5+
describe('ModalComponent', () => {
6+
let component: ModalComponent;
7+
let fixture: ComponentFixture<ModalComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ ModalComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ModalComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/pages/admin/components/modal/modal.component.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { UsersService } from './../../services/users.service';
2+
import { Component, Inject, OnInit } from '@angular/core';
3+
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
4+
5+
import { BaseFormUser } from '@shared/utils/base-form-user';
6+
enum Action {
7+
EDIT = 'edit',
8+
NEW = 'new',
9+
}
10+
11+
@Component({
12+
selector: 'app-modal',
13+
templateUrl: './modal.component.html',
14+
styleUrls: ['./modal.component.scss'],
15+
})
16+
export class ModalComponent implements OnInit {
17+
actionTODO = Action.NEW;
18+
showPasswordField = true;
19+
hide = true;
20+
constructor(
21+
@Inject(MAT_DIALOG_DATA) public data: any,
22+
public userForm: BaseFormUser,
23+
private userSvc: UsersService
24+
) {}
25+
26+
ngOnInit(): void {
27+
if (this.data?.user.hasOwnProperty('id')) {
28+
this.actionTODO = Action.EDIT;
29+
this.showPasswordField = false;
30+
this.userForm.baseForm.get('password').setValidators(null);
31+
this.userForm.baseForm.updateValueAndValidity();
32+
this.data.title = 'Edit user';
33+
this.pathFormData();
34+
}
35+
}
36+
37+
onSave(): void {
38+
const formValue = this.userForm.baseForm.value;
39+
if (this.actionTODO === Action.NEW) {
40+
this.userSvc.new(formValue).subscribe((res) => {
41+
console.log('New ', res);
42+
});
43+
} else {
44+
const userId = this.data?.user?.id;
45+
this.userSvc.update(userId, formValue).subscribe((res) => {
46+
console.log('Update', res);
47+
});
48+
}
49+
}
50+
51+
checkField(field: string): boolean {
52+
return this.userForm.isValidField(field);
53+
}
54+
55+
private pathFormData(): void {
56+
this.userForm.baseForm.patchValue({
57+
username: this.data?.user?.username,
58+
role: this.data?.user?.role,
59+
});
60+
}
61+
}

‎src/app/pages/admin/users/users.component.html

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
<div class="table-button-row">
2-
<button mat-flat-button color="primary" class="btn-new">Add new</button>
2+
<button
3+
(click)="onOpenModal()"
4+
mat-flat-button
5+
color="primary"
6+
class="btn-new"
7+
>
8+
Add new
9+
</button>
310
</div>
411

512
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
@@ -25,8 +32,12 @@
2532
<th mat-header-cell *matHeaderCellDef mat-sort-header>Actions</th>
2633
<td mat-cell *matCellDef="let element">
2734
<div class="table-button-row">
28-
<button mat-flat-button color="accent">Edit</button>
29-
<button mat-flat-button color="warn">Delete</button>
35+
<button mat-flat-button color="accent" (click)="onOpenModal(element)">
36+
Edit
37+
</button>
38+
<button mat-flat-button color="warn" (click)="onDelete(element.id)">
39+
Delete
40+
</button>
3041
</div>
3142
</td>
3243
</ng-container>

‎src/app/pages/admin/users/users.component.ts

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
1+
import { takeUntil } from 'rxjs/operators';
12
import { UsersService } from './../services/users.service';
2-
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
3+
import {
4+
AfterViewInit,
5+
Component,
6+
OnInit,
7+
ViewChild,
8+
OnDestroy,
9+
} from '@angular/core';
310
import { MatTableDataSource } from '@angular/material/table';
411
import { MatSort } from '@angular/material/sort';
5-
12+
import { MatDialog } from '@angular/material/dialog';
13+
import { ModalComponent } from './../components/modal/modal.component';
14+
import { Subject } from 'rxjs';
615
@Component({
716
selector: 'app-users',
817
templateUrl: './users.component.html',
918
styleUrls: ['./users.component.scss'],
1019
})
11-
export class UsersComponent implements AfterViewInit, OnInit {
20+
export class UsersComponent implements AfterViewInit, OnInit, OnDestroy {
1221
displayedColumns: string[] = ['id', 'role', 'username', 'actions'];
1322
dataSource = new MatTableDataSource();
1423

24+
private destroy$ = new Subject<any>();
25+
1526
@ViewChild(MatSort) sort: MatSort;
16-
constructor(private userSvc: UsersService) {}
27+
constructor(private userSvc: UsersService, private dialog: MatDialog) {}
1728

1829
ngOnInit(): void {
1930
this.userSvc.getAll().subscribe((users) => {
@@ -24,4 +35,29 @@ export class UsersComponent implements AfterViewInit, OnInit {
2435
ngAfterViewInit(): void {
2536
this.dataSource.sort = this.sort;
2637
}
38+
onDelete(userId: number): void {
39+
if (window.confirm('Do you really want remove this user')) {
40+
this.userSvc
41+
.delete(userId)
42+
.pipe(takeUntil(this.destroy$))
43+
.subscribe((res) => {
44+
window.alert(res.message);
45+
});
46+
}
47+
}
48+
49+
onOpenModal(user = {}): void {
50+
console.log('User->', user);
51+
this.dialog.open(ModalComponent, {
52+
height: '400px',
53+
width: '600px',
54+
hasBackdrop: false,
55+
data: { title: 'New user', user },
56+
});
57+
}
58+
59+
ngOnDestroy(): void {
60+
this.destroy$.next({});
61+
this.destroy$.complete();
62+
}
2763
}

‎src/app/pages/auth/login/login.component.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<mat-card>
33
<mat-card-content>
44
<h1>LOGIN</h1>
5-
<form [formGroup]="loginForm" (ngSubmit)="onLogin()">
5+
<form [formGroup]="loginForm.baseForm" (ngSubmit)="onLogin()">
66
<mat-form-field class="full-width-input">
77
<input
88
text="text"
@@ -11,8 +11,8 @@ <h1>LOGIN</h1>
1111
placeholder="Username"
1212
required
1313
/>
14-
<mat-error *ngIf="isValidField('username')">
15-
{{ getErrorMessage("username") }}
14+
<mat-error *ngIf="checkField('username')">
15+
{{ loginForm.errorMessage }}
1616
</mat-error>
1717
</mat-form-field>
1818
<mat-form-field class="full-width-input separator">
@@ -26,12 +26,12 @@ <h1>LOGIN</h1>
2626
<button mat-icon-button matSuffix (click)="hide = !hide">
2727
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
2828
</button>
29-
<mat-error *ngIf="isValidField('password')">
30-
{{ getErrorMessage("password") }}
29+
<mat-error *ngIf="checkField('password')">
30+
{{ loginForm.errorMessage }}
3131
</mat-error>
3232
</mat-form-field>
3333
<button
34-
[disabled]="loginForm.invalid"
34+
[disabled]="loginForm.baseForm.invalid"
3535
type="submit"
3636
mat-raised-button
3737
color="primary"

0 commit comments

Comments
 (0)