From 018c06475e2ec7512cb5f73a0aa4019c609a3ee1 Mon Sep 17 00:00:00 2001 From: andrej romanov <50377758+auumgn@users.noreply.github.com> Date: Thu, 15 Feb 2024 15:02:51 +0200 Subject: [PATCH 1/5] add user delete component --- ui/src/app/app.constants.ts | 1 + ui/src/app/shared/pipe/localize.ts | 10 ++- ui/src/app/user/user-delete.component.html | 20 +++++ ui/src/app/user/user-delete.component.spec.ts | 21 +++++ ui/src/app/user/user-delete.component.ts | 87 +++++++++++++++++++ ui/src/app/user/user-detail.component.scss | 0 ui/src/app/user/user-detail.component.ts | 1 - ui/src/app/user/user-update.component.scss | 0 ui/src/app/user/user-update.component.ts | 1 - ui/src/app/user/user.module.ts | 18 +++- ui/src/app/user/user.route.ts | 32 +++++-- ui/src/app/user/users.component.html | 1 + ui/src/content/scss/global.scss | 4 + 13 files changed, 179 insertions(+), 17 deletions(-) create mode 100644 ui/src/app/user/user-delete.component.html create mode 100644 ui/src/app/user/user-delete.component.spec.ts create mode 100644 ui/src/app/user/user-delete.component.ts delete mode 100644 ui/src/app/user/user-detail.component.scss delete mode 100644 ui/src/app/user/user-update.component.scss diff --git a/ui/src/app/app.constants.ts b/ui/src/app/app.constants.ts index e223dfb17..d0b51830b 100644 --- a/ui/src/app/app.constants.ts +++ b/ui/src/app/app.constants.ts @@ -12,6 +12,7 @@ export enum AlertType { SEND_ACTIVATION_FAILURE = 'Invite email couldn`t be sent.', USER_CREATED = 'User created. Invite sent.', USER_UPDATED = 'User updated successfully', + USER_DELETED = 'User deleted successfully', } export const EMAIL_NOT_FOUND_TYPE = 'https://www.jhipster.tech/problem/email-not-found' diff --git a/ui/src/app/shared/pipe/localize.ts b/ui/src/app/shared/pipe/localize.ts index d9b6e43eb..e331429de 100644 --- a/ui/src/app/shared/pipe/localize.ts +++ b/ui/src/app/shared/pipe/localize.ts @@ -8,13 +8,15 @@ export class LocalizePipe implements PipeTransform { transform(value: string, ...args: any[]): any { switch (value) { case AlertType.SEND_ACTIVATION_SUCCESS: - return $localize`:@@gatewayApp.msUserServiceMSUser.sendActivate.success.string:${AlertType.SEND_ACTIVATION_SUCCESS}` + return $localize`:@@gatewayApp.msUserServiceMSUser.sendActivate.success.string:Invite sent.` case AlertType.SEND_ACTIVATION_FAILURE: - return $localize`:@@gatewayApp.msUserServiceMSUser.sendActivate.error.string:${AlertType.SEND_ACTIVATION_FAILURE}` + return $localize`:@@gatewayApp.msUserServiceMSUser.sendActivate.error.string:Invite email couldn't be sent.` case AlertType.USER_CREATED: - return $localize`:@@userServiceApp.user.created.string:${AlertType.USER_CREATED}` + return $localize`:@@userServiceApp.user.created.string:User created. Invite sent.` case AlertType.USER_UPDATED: - return $localize`:@@userServiceApp.user.updated.string:${AlertType.USER_UPDATED}` + return $localize`:@@userServiceApp.user.updated.string:User updated successfully` + case AlertType.USER_DELETED: + return $localize`:@@userServiceApp.user.deleted.string:User deleted successfully` } } } diff --git a/ui/src/app/user/user-delete.component.html b/ui/src/app/user/user-delete.component.html new file mode 100644 index 000000000..8e1e7b160 --- /dev/null +++ b/ui/src/app/user/user-delete.component.html @@ -0,0 +1,20 @@ +
+ + + +
diff --git a/ui/src/app/user/user-delete.component.spec.ts b/ui/src/app/user/user-delete.component.spec.ts new file mode 100644 index 000000000..a06713ba9 --- /dev/null +++ b/ui/src/app/user/user-delete.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserDeleteComponent } from './user-delete.component'; + +describe('UserDeleteComponent', () => { + let component: UserDeleteComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [UserDeleteComponent] + }); + fixture = TestBed.createComponent(UserDeleteComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/src/app/user/user-delete.component.ts b/ui/src/app/user/user-delete.component.ts new file mode 100644 index 000000000..d4f0c405c --- /dev/null +++ b/ui/src/app/user/user-delete.component.ts @@ -0,0 +1,87 @@ +import { Component, OnDestroy, OnInit } from '@angular/core' +import { UserService } from './service/user.service' +import { AlertService } from '../shared/service/alert.service' +import { IUser } from './model/user.model' +import { NgbActiveModal, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' +import { EventService } from '../shared/service/event.service' +import { ActivatedRoute, Router } from '@angular/router' +import { Event } from '../shared/model/event.model' +import { AlertType, EventType } from '../app.constants' + +@Component({ + selector: 'app-user-delete-dialog', + templateUrl: './user-delete.component.html', +}) +export class UserDeleteDialogComponent implements OnInit { + user: IUser | undefined + message = '' + + constructor( + protected userService: UserService, + public activeModal: NgbActiveModal, + protected eventService: EventService, + private alertService: AlertService + ) {} + + clear() { + this.activeModal.dismiss('cancel') + } + + confirmDelete(id: string | undefined) { + if (id) { + this.userService.delete(id).subscribe(() => { + this.eventService.broadcast({ + type: EventType.USER_LIST_MODIFIED, + payload: 'Deleted a user', + } as Event) + this.activeModal.dismiss(true) + this.alertService.broadcast(AlertType.USER_DELETED) + }) + } + } + + ngOnInit(): void { + this.message = $localize`:@@gatewayApp.msUserServiceMSUser.delete.question.string:Are you sure you want to delete user ${this.user?.email}?` + } +} + +@Component({ + selector: 'app-user-delete-popup', + template: '', +}) +export class UserDeletePopupComponent implements OnInit, OnDestroy { + protected ngbModalRef: NgbModalRef | undefined + + constructor( + protected activatedRoute: ActivatedRoute, + protected router: Router, + protected modalService: NgbModal + ) {} + ngOnInit() { + this.activatedRoute.data.subscribe(({ user }) => { + setTimeout(() => { + console.log(user) + + this.ngbModalRef = this.modalService.open(UserDeleteDialogComponent as Component, { + size: 'lg', + backdrop: 'static', + }) + this.ngbModalRef.componentInstance.user = user + this.ngbModalRef.result.then( + (result) => { + this.router.navigate(['/users', { outlets: { popup: null } }]) + this.ngbModalRef = undefined + }, + (reason) => { + this.router.navigate(['/users', { outlets: { popup: null } }]) + this.ngbModalRef = undefined + } + ) + }, 100) + }) + } + + ngOnDestroy() { + this.ngbModalRef = undefined + } +} diff --git a/ui/src/app/user/user-detail.component.scss b/ui/src/app/user/user-detail.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/ui/src/app/user/user-detail.component.ts b/ui/src/app/user/user-detail.component.ts index 63cabb255..28fa517c8 100644 --- a/ui/src/app/user/user-detail.component.ts +++ b/ui/src/app/user/user-detail.component.ts @@ -11,7 +11,6 @@ import { AlertType } from '../app.constants' @Component({ selector: 'app-user-detail', templateUrl: './user-detail.component.html', - styleUrls: ['./user-detail.component.scss'], }) export class UserDetailComponent { user: IUser | null = null diff --git a/ui/src/app/user/user-update.component.scss b/ui/src/app/user/user-update.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/ui/src/app/user/user-update.component.ts b/ui/src/app/user/user-update.component.ts index c9d1205ab..32062879e 100644 --- a/ui/src/app/user/user-update.component.ts +++ b/ui/src/app/user/user-update.component.ts @@ -19,7 +19,6 @@ import { AlertType, DATE_TIME_FORMAT, emailValidator } from '../app.constants' @Component({ selector: 'app-user-update', templateUrl: './user-update.component.html', - styleUrls: ['./user-update.component.scss'], }) export class UserUpdateComponent { isSaving = false diff --git a/ui/src/app/user/user.module.ts b/ui/src/app/user/user.module.ts index dfef8089a..aab7082da 100644 --- a/ui/src/app/user/user.module.ts +++ b/ui/src/app/user/user.module.ts @@ -8,9 +8,23 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome' import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { UserUpdateComponent } from './user-update.component' import { UserDetailComponent } from './user-detail.component' +import { UserDeleteDialogComponent, UserDeletePopupComponent } from './user-delete.component' @NgModule({ - declarations: [UsersComponent, UserUpdateComponent, UserDetailComponent], - imports: [CommonModule, SharedModule, RouterModule.forChild(routes), FontAwesomeModule, FormsModule, ReactiveFormsModule], + imports: [ + CommonModule, + SharedModule, + RouterModule.forChild(routes), + FontAwesomeModule, + FormsModule, + ReactiveFormsModule, + ], + declarations: [ + UsersComponent, + UserUpdateComponent, + UserDetailComponent, + UserDeletePopupComponent, + UserDeleteDialogComponent, + ], }) export class UserModule {} diff --git a/ui/src/app/user/user.route.ts b/ui/src/app/user/user.route.ts index c34f78c2b..9a2a753e9 100644 --- a/ui/src/app/user/user.route.ts +++ b/ui/src/app/user/user.route.ts @@ -7,6 +7,7 @@ import { User } from './model/user.model' import { UserService } from './service/user.service' import { Injectable, inject } from '@angular/core' import { UserUpdateComponent } from './user-update.component' +import { UserDeletePopupComponent } from './user-delete.component' export const UserResolver: ResolveFn = ( route: ActivatedRouteSnapshot, @@ -19,7 +20,6 @@ export const UserResolver: ResolveFn = ( take(1) ) } else { - return of(null) } } @@ -35,6 +35,21 @@ export const routes: Routes = [ ascending: true, }, canActivate: [AuthGuard], + children: [ + { + path: ':id/delete', + component: UserDeletePopupComponent, + resolve: { + user: UserResolver, + }, + data: { + authorities: ['ROLE_ADMIN', 'ROLE_ORG_OWNER', 'ROLE_CONSORTIUM_LEAD'], + pageTitle: 'gatewayApp.msUserServiceMSUser.home.title.string', + }, + canActivate: [AuthGuard], + outlet: 'popup', + }, + ], }, { path: 'users/:id/view', @@ -52,25 +67,24 @@ export const routes: Routes = [ path: 'users/new', component: UserUpdateComponent, resolve: { - user: UserResolver + user: UserResolver, }, data: { authorities: ['ROLE_ADMIN', 'ROLE_ORG_OWNER', 'ROLE_CONSORTIUM_LEAD'], - pageTitle: 'gatewayApp.msUserServiceMSUser.home.title.string' + pageTitle: 'gatewayApp.msUserServiceMSUser.home.title.string', }, - canActivate: [AuthGuard] + canActivate: [AuthGuard], }, { path: 'users/:id/edit', component: UserUpdateComponent, resolve: { - user: UserResolver + user: UserResolver, }, data: { authorities: ['ROLE_ADMIN', 'ROLE_ORG_OWNER', 'ROLE_CONSORTIUM_LEAD'], - pageTitle: 'gatewayApp.msUserServiceMSUser.home.title.string' + pageTitle: 'gatewayApp.msUserServiceMSUser.home.title.string', }, - canActivate: [AuthGuard] - } + canActivate: [AuthGuard], + }, ] - diff --git a/ui/src/app/user/users.component.html b/ui/src/app/user/users.component.html index ab892eed9..1c69e6962 100644 --- a/ui/src/app/user/users.component.html +++ b/ui/src/app/user/users.component.html @@ -220,3 +220,4 @@

diff --git a/ui/src/content/scss/global.scss b/ui/src/content/scss/global.scss index 467eef773..1995d8ff7 100644 --- a/ui/src/content/scss/global.scss +++ b/ui/src/content/scss/global.scss @@ -513,3 +513,7 @@ div.success { fa-icon { margin-right: 0.25rem; } + +.modal { + z-index: 1500; +} From 3717c02015b8159c9f3b1c35f43a37930a1c4e86 Mon Sep 17 00:00:00 2001 From: andrej romanov <50377758+auumgn@users.noreply.github.com> Date: Thu, 15 Feb 2024 15:04:33 +0200 Subject: [PATCH 2/5] fix errors, remove logs --- ui/src/app/user/user-delete.component.html | 4 ++-- ui/src/app/user/user-delete.component.ts | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/ui/src/app/user/user-delete.component.html b/ui/src/app/user/user-delete.component.html index 8e1e7b160..3bd4e1456 100644 --- a/ui/src/app/user/user-delete.component.html +++ b/ui/src/app/user/user-delete.component.html @@ -11,10 +11,10 @@