From 39627c28c84d091477fc792797960c2daa15d437 Mon Sep 17 00:00:00 2001 From: Sylvain MATHIEU Date: Wed, 5 Jan 2022 15:13:31 +0100 Subject: [PATCH] Management refactoring, creating unique entry in menu for management --- src/app/app-routing.module.ts | 25 +++++++---- src/app/app.module.ts | 4 +- .../group-details.component.html | 13 ++++-- .../group-management.component.html | 9 +++- .../group-management.component.scss | 11 +++++ .../group-management.component.ts | 4 +- .../management/management.component.html | 9 ++++ .../management/management.component.scss | 0 .../management/management.component.spec.ts | 25 +++++++++++ .../management/management.component.ts | 28 ++++++++++++ .../user-detail/user-detail.component.html | 35 +++++++++------ .../user-management.component.html | 43 ++++++++++++------- .../user-management.component.scss | 11 +++++ .../user-management.component.ts | 17 +++++--- .../default-layout.component.html | 8 +--- .../default-layout.component.ts | 11 +---- 16 files changed, 187 insertions(+), 66 deletions(-) create mode 100644 src/app/components/management/management.component.html create mode 100644 src/app/components/management/management.component.scss create mode 100644 src/app/components/management/management.component.spec.ts create mode 100644 src/app/components/management/management.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 79fa95cf..a7459b18 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -60,6 +60,7 @@ import {GroupManagementComponent} from "./components/group-management/group-mana import {GroupDetailsComponent} from "@components/group-details/group-details.component"; import {UserDetailComponent} from "@components/user-management/user-detail/user-detail.component"; import {GroupDetailsResolver} from "@resolvers/group-details.resolver"; +import {ManagementComponent} from "@components/management/management.component"; const routes: Routes = [ { @@ -81,13 +82,7 @@ const routes: Routes = [ { path: 'settings', component: SettingsComponent }, { path: 'settings/console', component: ConsoleComponent }, { - path: 'server/:server_id/user_management', - component: UserManagementComponent, - canActivate: [LoginGuard], - resolve: { server: ServerResolve }, - }, - { - path: 'server/:server_id/user_management/:user_id', + path: 'server/:server_id/management/users/:user_id', component: UserDetailComponent, canActivate: [LoginGuard], resolve: { server: ServerResolve }, @@ -206,8 +201,20 @@ const routes: Routes = [ { path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard] }, { path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent, canActivate: [LoginGuard] }, { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent, canActivate: [LoginGuard] }, - { path: 'server/:server_id/group_management', component: GroupManagementComponent}, - { path: 'server/:server_id/group_management/:user_group_id', component: GroupDetailsComponent, resolve: {group: GroupDetailsResolver}}, + { + path: 'server/:server_id/management', + component: ManagementComponent, + children: [ + { + path: 'users', + component: UserManagementComponent + }, + { + path: 'groups', + component: GroupManagementComponent + } + ]}, + { path: 'server/:server_id/management/groups/:user_group_id', component: GroupDetailsComponent, resolve: {group: GroupDetailsResolver}}, ], }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2517da92..ac82a08d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -286,6 +286,7 @@ import { AddUserToGroupDialogComponent } from './components/group-details/add-us import { RemoveUserToGroupDialogComponent } from './components/group-details/remove-user-to-group-dialog/remove-user-to-group-dialog.component'; import { PaginatorPipe } from './components/group-details/paginator.pipe'; import { MembersFilterPipe } from './components/group-details/members-filter.pipe'; +import { ManagementComponent } from './components/management/management.component'; @NgModule({ declarations: [ @@ -486,7 +487,8 @@ import { MembersFilterPipe } from './components/group-details/members-filter.pip AddUserToGroupDialogComponent, RemoveUserToGroupDialogComponent, PaginatorPipe, - MembersFilterPipe + MembersFilterPipe, + ManagementComponent ], imports: [ BrowserModule, diff --git a/src/app/components/group-details/group-details.component.html b/src/app/components/group-details/group-details.component.html index cd5f121b..33473f5e 100644 --- a/src/app/components/group-details/group-details.component.html +++ b/src/app/components/group-details/group-details.component.html @@ -1,6 +1,13 @@
-
+
+ + keyboard_arrow_left +

Groups {{group.name}} details

@@ -28,7 +35,7 @@
-
Members:
+
Members:
person_add
@@ -38,7 +45,7 @@
- +
{{user.username}}
 delete diff --git a/src/app/components/group-management/group-management.component.html b/src/app/components/group-management/group-management.component.html index 4b4be62e..bff63406 100644 --- a/src/app/components/group-management/group-management.component.html +++ b/src/app/components/group-management/group-management.component.html @@ -1,4 +1,4 @@ -
+

Groups management

@@ -37,7 +37,7 @@ Name - {{element.name}} + {{element.name}} @@ -73,3 +73,8 @@
+ +
+ +
+ diff --git a/src/app/components/group-management/group-management.component.scss b/src/app/components/group-management/group-management.component.scss index acc51935..2b5547ab 100644 --- a/src/app/components/group-management/group-management.component.scss +++ b/src/app/components/group-management/group-management.component.scss @@ -13,3 +13,14 @@ table { width: 160px; margin: 20px; } + +.loader { + position: absolute; + margin: auto; + height: 175px; + bottom: 0; + left: 0; + right: 0; + top: 0; + width: 175px; +} diff --git a/src/app/components/group-management/group-management.component.ts b/src/app/components/group-management/group-management.component.ts index 20a4d107..f4bd2cd1 100644 --- a/src/app/components/group-management/group-management.component.ts +++ b/src/app/components/group-management/group-management.component.ts @@ -42,6 +42,7 @@ export class GroupManagementComponent implements OnInit { groups: Group[]; dataSource = new MatTableDataSource(); searchText: string; + isReady = false; constructor( private route: ActivatedRoute, @@ -54,7 +55,7 @@ export class GroupManagementComponent implements OnInit { ngOnInit(): void { - const serverId = this.route.snapshot.paramMap.get('server_id'); + const serverId = this.route.parent.snapshot.paramMap.get('server_id'); this.serverService.get(+serverId).then((server: Server) => { this.server = server; this.refresh(); @@ -106,6 +107,7 @@ export class GroupManagementComponent implements OnInit { refresh() { this.groupService.getGroups(this.server).subscribe((groups: Group[]) => { + this.isReady = true; this.groups = groups; this.dataSource.data = groups; this.selection.clear(); diff --git a/src/app/components/management/management.component.html b/src/app/components/management/management.component.html new file mode 100644 index 00000000..24f7e2ed --- /dev/null +++ b/src/app/components/management/management.component.html @@ -0,0 +1,9 @@ + + diff --git a/src/app/components/management/management.component.scss b/src/app/components/management/management.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/management/management.component.spec.ts b/src/app/components/management/management.component.spec.ts new file mode 100644 index 00000000..20137d16 --- /dev/null +++ b/src/app/components/management/management.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManagementComponent } from './management.component'; + +describe('ManagementComponent', () => { + let component: ManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ManagementComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/management/management.component.ts b/src/app/components/management/management.component.ts new file mode 100644 index 00000000..b4acb8a0 --- /dev/null +++ b/src/app/components/management/management.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import {ActivatedRoute, Router} from "@angular/router"; +import {Server} from "@models/server"; +import {ServerService} from "@services/server.service"; + +@Component({ + selector: 'app-management', + templateUrl: './management.component.html', + styleUrls: ['./management.component.scss'] +}) +export class ManagementComponent implements OnInit { + + server: Server; + links = ['users', 'groups']; + activeLink: string = this.links[0]; + + constructor( + private route: ActivatedRoute, + public router: Router, + private serverService: ServerService) { } + + ngOnInit(): void { + const serverId = this.route.snapshot.paramMap.get('server_id'); + this.serverService.get(+serverId).then((server: Server) => { + this.server = server; + }); + } +} diff --git a/src/app/components/user-management/user-detail/user-detail.component.html b/src/app/components/user-management/user-detail/user-detail.component.html index 5d24dc14..742c8836 100644 --- a/src/app/components/user-management/user-detail/user-detail.component.html +++ b/src/app/components/user-management/user-detail/user-detail.component.html @@ -5,8 +5,8 @@ mat-icon-button matTooltip="Back to user management" matTooltipClass="custom-tooltip" - [routerLink]="['/server', server.id, 'user_management']"> - keyboard_arrow_left + [routerLink]="['/server', server.id, 'management', 'users']"> + keyboard_arrow_left

User Details

@@ -17,32 +17,39 @@
- + Username is required + >Username is required + Username is incorrect + >Username is incorrect + User with this username exists + >User with this username exists + - + - + Email is required + >Email is required + Email is invalid + >Email is invalid + User with this email exists + >User with this email exists + - + Password must be between 6 and 100 characters + >Password must be between 6 and 100 characters + @@ -63,7 +70,7 @@
Groups
diff --git a/src/app/components/user-management/user-management.component.html b/src/app/components/user-management/user-management.component.html index 6ab59098..e94cc5ee 100644 --- a/src/app/components/user-management/user-management.component.html +++ b/src/app/components/user-management/user-management.component.html @@ -1,8 +1,9 @@ -
+

User Management

- + + + + @@ -83,3 +91,8 @@
+ +
+ +
+ diff --git a/src/app/components/user-management/user-management.component.scss b/src/app/components/user-management/user-management.component.scss index 9ed45f4a..114fb52a 100644 --- a/src/app/components/user-management/user-management.component.scss +++ b/src/app/components/user-management/user-management.component.scss @@ -28,3 +28,14 @@ .custom-tooltip { font-size:100px; } + +.loader { + position: absolute; + margin: auto; + height: 175px; + bottom: 0; + left: 0; + right: 0; + top: 0; + width: 175px; +} diff --git a/src/app/components/user-management/user-management.component.ts b/src/app/components/user-management/user-management.component.ts index cdfa47ad..9c94bd40 100644 --- a/src/app/components/user-management/user-management.component.ts +++ b/src/app/components/user-management/user-management.component.ts @@ -24,6 +24,7 @@ import {DeleteUserDialogComponent} from "@components/user-management/delete-user import {ToasterService} from "@services/toaster.service"; import {MatPaginator} from "@angular/material/paginator"; import {MatTableDataSource} from "@angular/material/table"; +import {ServerService} from "@services/server.service"; @Component({ selector: 'app-user-management', @@ -35,24 +36,27 @@ export class UserManagementComponent implements OnInit { dataSource = new MatTableDataSource(); displayedColumns = ['select', 'username', 'full_name', 'email', 'is_active', 'last_login', 'updated_at', 'delete']; selection = new SelectionModel(true, []); - searchText: string = ''; + searchText = ''; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; + isReady = false; constructor( private route: ActivatedRoute, private router: Router, private userService: UserService, private progressService: ProgressService, + private serverService: ServerService, public dialog: MatDialog, private toasterService: ToasterService) { } ngOnInit() { - this.server = this.route.snapshot.data['server']; - if (!this.server) this.router.navigate(['/servers']); - - this.refresh(); + const serverId = this.route.parent.snapshot.paramMap.get('server_id'); + this.serverService.get(+serverId).then((server: Server) => { + this.server = server; + this.refresh(); + }); } ngAfterViewInit() { @@ -67,12 +71,13 @@ export class UserManagementComponent implements OnInit { default: return item[property]; } - } + }; } refresh() { this.userService.list(this.server).subscribe( (users: User[]) => { + this.isReady = true; this.dataSource.data = users; }, (error) => { diff --git a/src/app/layouts/default-layout/default-layout.component.html b/src/app/layouts/default-layout/default-layout.component.html index 925ab581..d5febca6 100644 --- a/src/app/layouts/default-layout/default-layout.component.html +++ b/src/app/layouts/default-layout/default-layout.component.html @@ -23,13 +23,9 @@ settings Settings - -