Browse Source

Feature/fetch user data on demand in user detail dialog

- Pass only userId when opening the user detail dialog from admin users
- Load user details inside the dialog via GET /api/v1/admin/user/:id
pull/5923/head
David Requeno 2 months ago
parent
commit
90ae908767
  1. 13
      apps/client/src/app/components/admin-users/admin-users.component.ts
  2. 4
      apps/client/src/app/components/user-detail-dialog/interfaces/interfaces.ts
  3. 39
      apps/client/src/app/components/user-detail-dialog/user-detail-dialog.component.ts
  4. 112
      apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html
  5. 6
      apps/client/src/app/services/admin.service.ts

13
apps/client/src/app/components/admin-users/admin-users.component.ts

@ -1,4 +1,3 @@
import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
import {
getDateFnsLocale,
@ -56,6 +55,7 @@ import { NotificationService } from '../../core/notification/notification.servic
import { AdminService } from '../../services/admin.service';
import { DataService } from '../../services/data.service';
import { ImpersonationStorageService } from '../../services/impersonation-storage.service';
import { TokenStorageService } from '../../services/token-storage.service';
import { UserService } from '../../services/user/user.service';
import { UserDetailDialogParams } from '../user-detail-dialog/interfaces/interfaces';
import { GfUserDetailDialogComponent } from '../user-detail-dialog/user-detail-dialog.component';
@ -283,22 +283,13 @@ export class GfAdminUsersComponent implements OnDestroy, OnInit {
}
private openUserDetailDialog(aUserId: string) {
const userData = this.dataSource.data.find(({ id }) => {
return id === aUserId;
});
if (!userData) {
this.router.navigate(['.'], { relativeTo: this.route });
return;
}
const dialogRef = this.dialog.open<
GfUserDetailDialogComponent,
UserDetailDialogParams
>(GfUserDetailDialogComponent, {
autoFocus: false,
data: {
userData,
userId: aUserId,
deviceType: this.deviceType,
hasPermissionForSubscription: this.hasPermissionForSubscription,
locale: this.user?.settings?.locale

4
apps/client/src/app/components/user-detail-dialog/interfaces/interfaces.ts

@ -1,8 +1,6 @@
import { AdminUsersResponse } from '@ghostfolio/common/interfaces';
export interface UserDetailDialogParams {
deviceType: string;
hasPermissionForSubscription: boolean;
locale: string;
userData: AdminUsersResponse['users'][0];
userId: string;
}

39
apps/client/src/app/components/user-detail-dialog/user-detail-dialog.component.ts

@ -1,5 +1,4 @@
import { GfDialogFooterComponent } from '@ghostfolio/client/components/dialog-footer/dialog-footer.component';
import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
import { AdminUserResponse } from '@ghostfolio/common/interfaces';
import { GfValueComponent } from '@ghostfolio/ui/value';
import { CommonModule } from '@angular/common';
@ -7,14 +6,20 @@ import {
ChangeDetectionStrategy,
Component,
CUSTOM_ELEMENTS_SCHEMA,
OnInit,
Inject,
OnDestroy
} from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { MatDialogModule } from '@angular/material/dialog';
import { Subject } from 'rxjs';
import { Subject, EMPTY } from 'rxjs';
import { catchError, finalize, takeUntil } from 'rxjs/operators';
import { NotificationService } from '../../core/notification/notification.service';
import { AdminService } from '../../services/admin.service';
import { GfDialogFooterComponent } from '../dialog-footer/dialog-footer.component';
import { GfDialogHeaderComponent } from '../dialog-header/dialog-header.component';
import { UserDetailDialogParams } from './interfaces/interfaces';
@Component({
@ -33,14 +38,38 @@ import { UserDetailDialogParams } from './interfaces/interfaces';
styleUrls: ['./user-detail-dialog.component.scss'],
templateUrl: './user-detail-dialog.html'
})
export class GfUserDetailDialogComponent implements OnDestroy {
export class GfUserDetailDialogComponent implements OnInit, OnDestroy {
private unsubscribeSubject = new Subject<void>();
public isLoading = true;
public user: AdminUserResponse;
public constructor(
@Inject(MAT_DIALOG_DATA) public data: UserDetailDialogParams,
public dialogRef: MatDialogRef<GfUserDetailDialogComponent>
public dialogRef: MatDialogRef<GfUserDetailDialogComponent>,
private adminService: AdminService,
private notificationService: NotificationService
) {}
public ngOnInit(): void {
this.adminService
.fetchUserById(this.data.userId)
.pipe(
takeUntil(this.unsubscribeSubject),
finalize(() => (this.isLoading = false)),
catchError(() => {
this.notificationService.alert({
title: $localize`User`,
message: $localize`Unable to load user`
});
this.dialogRef.close();
return EMPTY;
})
)
.subscribe((user) => {
this.user = user;
});
}
public onClose() {
this.dialogRef.close();
}

112
apps/client/src/app/components/user-detail-dialog/user-detail-dialog.html

@ -6,74 +6,46 @@
<div class="flex-grow-1" mat-dialog-content>
<div class="container p-0">
<div class="mb-3 row">
<div class="col-6 mb-3">
<gf-value i18n size="medium" [value]="data.userData.id">
User ID
</gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
i18n
size="medium"
[isDate]="true"
[locale]="data.locale"
[value]="data.userData.createdAt"
>
Registration Date
</gf-value>
</div>
</div>
<div class="mb-3 row">
<div class="col-6 mb-3">
<gf-value i18n size="medium" [value]="data.userData.role">
Role
</gf-value>
</div>
@if (data.hasPermissionForSubscription) {
@if (user) {
<div class="mb-3 row">
<div class="col-6 mb-3">
<gf-value i18n size="medium" [value]="data.userData.country">
Country
<gf-value i18n size="medium" [value]="user.id"> User ID </gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
i18n
size="medium"
[isDate]="true"
[locale]="data.locale"
[value]="user.createdAt"
>
Registration Date
</gf-value>
</div>
}
</div>
<div class="mb-3 row">
<div class="col-6 mb-3">
<gf-value
i18n
size="medium"
[locale]="data.locale"
[value]="data.userData.accountCount"
>
Accounts
</gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
i18n
size="medium"
[locale]="data.locale"
[value]="data.userData.activityCount"
>
Activities
</gf-value>
<div class="mb-3 row">
<div class="col-6 mb-3">
<gf-value i18n size="medium" [value]="user.role"> Role </gf-value>
</div>
@if (data.hasPermissionForSubscription) {
<div class="col-6 mb-3">
<gf-value i18n size="medium" [value]="user.country">
Country
</gf-value>
</div>
}
</div>
</div>
@if (data.hasPermissionForSubscription) {
<div class="mb-3 row">
<div class="col-6 mb-3">
<gf-value
i18n
size="medium"
[locale]="data.locale"
[precision]="0"
[value]="data.userData.engagement"
[value]="user.accountCount"
>
Engagement per Day
Accounts
</gf-value>
</div>
<div class="col-6 mb-3">
@ -81,12 +53,38 @@
i18n
size="medium"
[locale]="data.locale"
[value]="data.userData.dailyApiRequests"
[value]="user.activityCount"
>
API Requests Today
Activities
</gf-value>
</div>
</div>
@if (data.hasPermissionForSubscription) {
<div class="mb-3 row">
<div class="col-6 mb-3">
<gf-value
i18n
size="medium"
[locale]="data.locale"
[precision]="0"
[value]="user.engagement"
>
Engagement per Day
</gf-value>
</div>
<div class="col-6 mb-3">
<gf-value
i18n
size="medium"
[locale]="data.locale"
[value]="user.dailyApiRequests"
>
API Requests Today
</gf-value>
</div>
</div>
}
}
</div>
</div>

6
apps/client/src/app/services/admin.service.ts

@ -157,6 +157,12 @@ export class AdminService {
return this.http.get<AdminUsersResponse>('/api/v1/admin/user', { params });
}
public fetchUserById(id: string) {
return this.http.get<
import('@ghostfolio/common/interfaces').AdminUserResponse
>(`/api/v1/admin/user/${id}`);
}
public gather7Days() {
return this.http.post<void>('/api/v1/admin/gather', {});
}

Loading…
Cancel
Save