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,7 +1,4 @@
-<div class="container">
+<div class="d-flex justify-content-end">
-  <div class="row">
-    <div class="col">
-      <div class="d-flex justify-content-end">
   <a
     color="primary"
     i18n
@@ -11,22 +8,17 @@
   >
     Add Platform
   </a>
-      </div>
+</div>
-      <table
+<table
   class="gf-table w-100"
   mat-table
   matSort
   matSortActive="name"
   matSortDirection="asc"
   [dataSource]="dataSource"
-      >
+>
   <ng-container matColumnDef="name">
-          <th
+    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
-            *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>
@@ -42,12 +34,7 @@
   >
 
   <ng-container matColumnDef="url">
-          <th
+    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="url">
-            *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>
@@ -64,18 +51,13 @@
     >
       <ng-container i18n>Accounts</ng-container>
     </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
+    <td *matCellDef="let element" class="px-1 text-right" mat-cell>
       {{ element.accountCount }}
     </td>
   </ng-container>
 
   <ng-container matColumnDef="actions" stickyEnd>
-          <th
+    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></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"
@@ -109,7 +91,4 @@
 
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-      </table>
+</table>
-    </div>
-  </div>
-</div>

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

@@ -38,20 +38,46 @@
                         }}
                       </small>
                     </div>
-                    <div class="line-height-1 mt-1">
+                  }
+                } @else {
+                  {{ element.name }}
+                }
+              </div>
+            </div>
+          </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>
-                    </div>
               }
-                } @else {
-                  {{ element.name }}
             }
-              </div>
-            </div>
           </td>
         </ng-container>
 

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,7 +1,4 @@
-<div class="container">
+<div class="d-flex justify-content-end">
-  <div class="row">
-    <div class="col">
-      <div class="d-flex justify-content-end">
   <a
     color="primary"
     i18n
@@ -11,22 +8,17 @@
   >
     Add Tag
   </a>
-      </div>
+</div>
-      <table
+<table
   class="gf-table w-100"
   mat-table
   matSort
   matSortActive="name"
   matSortDirection="asc"
   [dataSource]="dataSource"
-      >
+>
   <ng-container matColumnDef="name">
-          <th
+    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="name">
-            *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>
@@ -35,12 +27,7 @@
   </ng-container>
 
   <ng-container matColumnDef="userId">
-          <th
+    <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header="userId">
-            *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>
@@ -57,18 +44,13 @@
     >
       <ng-container i18n>Activities</ng-container>
     </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
+    <td *matCellDef="let element" class="px-1 text-right" mat-cell>
       {{ element.activityCount }}
     </td>
   </ng-container>
 
   <ng-container matColumnDef="actions" stickyEnd>
-          <th
+    <th *matHeaderCellDef class="px-1 text-center" i18n mat-header-cell></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"
@@ -102,7 +84,4 @@
 
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
   <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
-      </table>
+</table>
-    </div>
-  </div>
-</div>