Feature/add asset profile count to data providers management of admin control (#4707)

* Extend admin settings columns

* assetProfileCount
* status

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Harmonized the data providers management style of the admin control panel
+- Extended the data providers management of the admin control panel by the asset profile count
 - Restricted the permissions of the demo user
 - Renamed `Order` to `activities` in the `User` database schema
 - Improved the language localization for Catalan (`ca`)

apps/client/src/app/components/admin-platform/admin-platform.component.html

@@ -1,115 +1,94 @@
-<div class="container">
+<div class="d-flex justify-content-end">
-  <div class="row">
+  <a
-    <div class="col">
+    color="primary"
-      <div class="d-flex justify-content-end">
+    i18n
-        <a
+    mat-flat-button
-          color="primary"
+    [queryParams]="{ createPlatformDialog: true }"
-          i18n
+    [routerLink]="[]"
-          mat-flat-button
+  >
-          [queryParams]="{ createPlatformDialog: true }"
+    Add Platform
-          [routerLink]="[]"
+  </a>
-        >
-          Add Platform
-        </a>
-      </div>
-      <table
-        class="gf-table w-100"
-        mat-table
-        matSort
-        matSortActive="name"
-        matSortDirection="asc"
-        [dataSource]="dataSource"
-      >
-        <ng-container matColumnDef="name">
-          <th
-            *matHeaderCellDef
-            class="px-1"
-            mat-header-cell
-            mat-sort-header="name"
-          >
-            <ng-container i18n>Name</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            @if (element.url) {
-              <gf-asset-profile-icon
-                class="d-inline mr-1"
-                [tooltip]="element.name"
-                [url]="element.url"
-              />
-            }
-            <span>{{ element.name }}</span>
-          </td></ng-container
-        >
-
-        <ng-container matColumnDef="url">
-          <th
-            *matHeaderCellDef
-            class="px-1"
-            mat-header-cell
-            mat-sort-header="url"
-          >
-            <ng-container i18n>Url</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ element.url }}
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="accounts">
-          <th
-            *matHeaderCellDef
-            class="px-1"
-            mat-header-cell
-            mat-sort-header="accountCount"
-          >
-            <ng-container i18n>Accounts</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ element.accountCount }}
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="actions" stickyEnd>
-          <th
-            *matHeaderCellDef
-            class="px-1 text-center"
-            i18n
-            mat-header-cell
-          ></th>
-          <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-            <button
-              class="mx-1 no-min-width px-2"
-              mat-button
-              [matMenuTriggerFor]="platformMenu"
-              (click)="$event.stopPropagation()"
-            >
-              <ion-icon name="ellipsis-horizontal" />
-            </button>
-            <mat-menu #platformMenu="matMenu" xPosition="before">
-              <button mat-menu-item (click)="onUpdatePlatform(element)">
-                <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="create-outline" />
-                  <span i18n>Edit</span>
-                </span>
-              </button>
-              <hr class="m-0" />
-              <button
-                mat-menu-item
-                [disabled]="element.accountCount > 0"
-                (click)="onDeletePlatform(element.id)"
-              >
-                <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="trash-outline" />
-                  <span i18n>Delete</span>
-                </span>
-              </button>
-            </mat-menu>
-          </td>
-        </ng-container>
-
-        <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-        <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-      </table>
-    </div>
-  </div>
 </div>
+<table
+  class="gf-table w-100"
+  mat-table
+  matSort
+  matSortActive="name"
+  matSortDirection="asc"
+  [dataSource]="dataSource"
+>
+  <ng-container matColumnDef="name">
+    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
+      <ng-container i18n>Name</ng-container>
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      @if (element.url) {
+        <gf-asset-profile-icon
+          class="d-inline mr-1"
+          [tooltip]="element.name"
+          [url]="element.url"
+        />
+      }
+      <span>{{ element.name }}</span>
+    </td></ng-container
+  >
+
+  <ng-container matColumnDef="url">
+    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="url">
+      <ng-container i18n>Url</ng-container>
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      {{ element.url }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="accounts">
+    <th
+      *matHeaderCellDef
+      class="px-1"
+      mat-header-cell
+      mat-sort-header="accountCount"
+    >
+      <ng-container i18n>Accounts</ng-container>
+    </th>
+    <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      {{ element.accountCount }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="actions" stickyEnd>
+    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
+    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <button
+        class="mx-1 no-min-width px-2"
+        mat-button
+        [matMenuTriggerFor]="platformMenu"
+        (click)="$event.stopPropagation()"
+      >
+        <ion-icon name="ellipsis-horizontal" />
+      </button>
+      <mat-menu #platformMenu="matMenu" xPosition="before">
+        <button mat-menu-item (click)="onUpdatePlatform(element)">
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="create-outline" />
+            <span i18n>Edit</span>
+          </span>
+        </button>
+        <hr class="m-0" />
+        <button
+          mat-menu-item
+          [disabled]="element.accountCount > 0"
+          (click)="onDeletePlatform(element.id)"
+        >
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="trash-outline" />
+            <span i18n>Delete</span>
+          </span>
+        </button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+</table>

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -38,14 +38,6 @@
                         }}
                       </small>
                     </div>
-                    <div class="line-height-1 mt-1">
-                      <small class="text-muted">
-                        {{ ghostfolioApiStatus.dailyRequests }}
-                        <ng-container i18n>of</ng-container>
-                        {{ ghostfolioApiStatus.dailyRequestsMax }}
-                        <ng-container i18n>daily requests</ng-container>
-                      </small>
-                    </div>
                   }
                 } @else {
                   {{ element.name }}
@@ -55,6 +47,40 @@
           </td>
         </ng-container>
 
+        <ng-container matColumnDef="assetProfileCount">
+          <th *matHeaderCellDef class="px-1 py-2 text-right" mat-header-cell>
+            <ng-container i18n>Asset Profiles</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1 py-2 text-right" mat-cell>
+            {{ element.assetProfileCount }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+          <th *matHeaderCellDef class="px-1 py-2" mat-header-cell></th>
+          <td *matCellDef="let element" class="px-1 py-2" mat-cell>
+            @if (isGhostfolioDataProvider(element)) {
+              @if (isGhostfolioApiKeyValid === true) {
+                <mat-progress-bar
+                  mode="determinate"
+                  [value]="
+                    100 -
+                    (ghostfolioApiStatus.dailyRequests /
+                      ghostfolioApiStatus.dailyRequestsMax) *
+                      100
+                  "
+                />
+                <small class="text-muted">
+                  {{ ghostfolioApiStatus.dailyRequests }}
+                  <ng-container i18n>of</ng-container>
+                  {{ ghostfolioApiStatus.dailyRequestsMax }}
+                  <ng-container i18n>daily requests</ng-container>
+                </small>
+              }
+            }
+          </td>
+        </ng-container>
+
         <ng-container matColumnDef="actions">
           <th *matHeaderCellDef class="px-1 py-2" mat-header-cell></th>
 

apps/client/src/app/components/admin-settings/admin-settings.component.scss

@@ -1,3 +1,15 @@
 :host {
   display: block;
+
+  .mat-mdc-progress-bar {
+    --mdc-linear-progress-active-indicator-height: 0.5rem;
+    --mdc-linear-progress-track-height: 0.5rem;
+    border-radius: 0.25rem;
+
+    ::ng-deep {
+      .mdc-linear-progress__buffer-bar {
+        background-color: rgb(var(--palette-background-unselected-chip));
+      }
+    }
+  }
 }

apps/client/src/app/components/admin-settings/admin-settings.component.ts

@@ -39,7 +39,7 @@ import { GhostfolioPremiumApiDialogParams } from './ghostfolio-premium-api-dialo
 export class AdminSettingsComponent implements OnDestroy, OnInit {
   public dataSource = new MatTableDataSource<DataProviderInfo>();
   public defaultDateFormat: string;
-  public displayedColumns = ['name', 'actions'];
+  public displayedColumns = ['name', 'assetProfileCount', 'status', 'actions'];
   public ghostfolioApiStatus: DataProviderGhostfolioStatusResponse;
   public isGhostfolioApiKeyValid: boolean;
   public isLoading = false;

apps/client/src/app/components/admin-settings/admin-settings.module.ts

@@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -23,6 +24,7 @@ import { AdminSettingsComponent } from './admin-settings.component';
     GfPremiumIndicatorComponent,
     MatButtonModule,
     MatMenuModule,
+    MatProgressBarModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     RouterModule

apps/client/src/app/components/admin-tag/admin-tag.component.html

@@ -1,108 +1,87 @@
-<div class="container">
+<div class="d-flex justify-content-end">
-  <div class="row">
+  <a
-    <div class="col">
+    color="primary"
-      <div class="d-flex justify-content-end">
+    i18n
-        <a
+    mat-flat-button
-          color="primary"
+    [queryParams]="{ createTagDialog: true }"
-          i18n
+    [routerLink]="[]"
-          mat-flat-button
+  >
-          [queryParams]="{ createTagDialog: true }"
+    Add Tag
-          [routerLink]="[]"
+  </a>
-        >
-          Add Tag
-        </a>
-      </div>
-      <table
-        class="gf-table w-100"
-        mat-table
-        matSort
-        matSortActive="name"
-        matSortDirection="asc"
-        [dataSource]="dataSource"
-      >
-        <ng-container matColumnDef="name">
-          <th
-            *matHeaderCellDef
-            class="px-1"
-            mat-header-cell
-            mat-sort-header="name"
-          >
-            <ng-container i18n>Name</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ element.name }}
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="userId">
-          <th
-            *matHeaderCellDef
-            class="px-1"
-            mat-header-cell
-            mat-sort-header="userId"
-          >
-            <ng-container i18n>User</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            <span class="text-monospace">{{ element.userId }}</span>
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="activities">
-          <th
-            *matHeaderCellDef
-            class="px-1"
-            mat-header-cell
-            mat-sort-header="activityCount"
-          >
-            <ng-container i18n>Activities</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            {{ element.activityCount }}
-          </td>
-        </ng-container>
-
-        <ng-container matColumnDef="actions" stickyEnd>
-          <th
-            *matHeaderCellDef
-            class="px-1 text-center"
-            i18n
-            mat-header-cell
-          ></th>
-          <td *matCellDef="let element" class="px-1 text-center" mat-cell>
-            <button
-              class="mx-1 no-min-width px-2"
-              mat-button
-              [matMenuTriggerFor]="tagMenu"
-              (click)="$event.stopPropagation()"
-            >
-              <ion-icon name="ellipsis-horizontal" />
-            </button>
-            <mat-menu #tagMenu="matMenu" xPosition="before">
-              <button mat-menu-item (click)="onUpdateTag(element)">
-                <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="create-outline" />
-                  <span i18n>Edit</span>
-                </span>
-              </button>
-              <hr class="m-0" />
-              <button
-                mat-menu-item
-                [disabled]="element.activityCount > 0"
-                (click)="onDeleteTag(element.id)"
-              >
-                <span class="align-items-center d-flex">
-                  <ion-icon class="mr-2" name="trash-outline" />
-                  <span i18n>Delete</span>
-                </span>
-              </button>
-            </mat-menu>
-          </td>
-        </ng-container>
-
-        <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-        <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-      </table>
-    </div>
-  </div>
 </div>
+<table
+  class="gf-table w-100"
+  mat-table
+  matSort
+  matSortActive="name"
+  matSortDirection="asc"
+  [dataSource]="dataSource"
+>
+  <ng-container matColumnDef="name">
+    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
+      <ng-container i18n>Name</ng-container>
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      {{ element.name }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="userId">
+    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="userId">
+      <ng-container i18n>User</ng-container>
+    </th>
+    <td *matCellDef="let element" class="px-1" mat-cell>
+      <span class="text-monospace">{{ element.userId }}</span>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="activities">
+    <th
+      *matHeaderCellDef
+      class="px-1"
+      mat-header-cell
+      mat-sort-header="activityCount"
+    >
+      <ng-container i18n>Activities</ng-container>
+    </th>
+    <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      {{ element.activityCount }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="actions" stickyEnd>
+    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></th>
+    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+      <button
+        class="mx-1 no-min-width px-2"
+        mat-button
+        [matMenuTriggerFor]="tagMenu"
+        (click)="$event.stopPropagation()"
+      >
+        <ion-icon name="ellipsis-horizontal" />
+      </button>
+      <mat-menu #tagMenu="matMenu" xPosition="before">
+        <button mat-menu-item (click)="onUpdateTag(element)">
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="create-outline" />
+            <span i18n>Edit</span>
+          </span>
+        </button>
+        <hr class="m-0" />
+        <button
+          mat-menu-item
+          [disabled]="element.activityCount > 0"
+          (click)="onDeleteTag(element.id)"
+        >
+          <span class="align-items-center d-flex">
+            <ion-icon class="mr-2" name="trash-outline" />
+            <span i18n>Delete</span>
+          </span>
+        </button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
+  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+</table>