Feature/improve platform managment in admin control (#1939)

* Refactoring, fix tab style, add account count

* Update changelog

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

@@ -43,6 +43,20 @@
           </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">
           <th
             *matHeaderCellDef

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

@@ -22,16 +22,17 @@ import { Subject, takeUntil } from 'rxjs';
 import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog/create-or-update-account-platform.component';
 
 @Component({
-  selector: 'gf-platform-overview',
-  styleUrls: ['./platform.component.scss'],
-  templateUrl: './platform.component.html'
+  host: { class: 'page' },
+  selector: 'gf-admin-platform',
+  styleUrls: ['./admin-platform.component.scss'],
+  templateUrl: './admin-platform.component.html'
 })
 export class AdminPlatformComponent implements OnInit, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
   public dataSource: MatTableDataSource<Platform> = new MatTableDataSource();
   public deviceType: string;
-  public displayedColumns = ['name', 'url', 'actions'];
+  public displayedColumns = ['name', 'url', 'accounts', 'actions'];
   public hasPermissionToCreatePlatform: boolean;
   public hasPermissionToDeletePlatform: boolean;
   public platforms: PlatformModel[];

apps/client/src/app/pages/admin/admin-page-routing.module.ts

@@ -3,8 +3,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { AdminJobsComponent } from '@ghostfolio/client/components/admin-jobs/admin-jobs.component';
 import { AdminMarketDataComponent } from '@ghostfolio/client/components/admin-market-data/admin-market-data.component';
 import { AdminOverviewComponent } from '@ghostfolio/client/components/admin-overview/admin-overview.component';
+import { AdminPlatformComponent } from '@ghostfolio/client/components/admin-platform/platform.component';
 import { AdminUsersComponent } from '@ghostfolio/client/components/admin-users/admin-users.component';
-import { AdminPlatformComponent } from '@ghostfolio/client/components/platform/platform.component';
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 
 import { AdminPageComponent } from './admin-page.component';

apps/client/src/app/pages/admin/admin-page.html

@@ -6,6 +6,7 @@
   <a
     #rla="routerLinkActive"
     *ngFor="let tab of tabs"
+    class="px-3"
     mat-tab-link
     routerLinkActive
     [active]="rla.isActive"

apps/client/src/app/pages/admin/admin-page.module.ts

@@ -4,8 +4,8 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { GfAdminJobsModule } from '@ghostfolio/client/components/admin-jobs/admin-jobs.module';
 import { GfAdminMarketDataModule } from '@ghostfolio/client/components/admin-market-data/admin-market-data.module';
 import { GfAdminOverviewModule } from '@ghostfolio/client/components/admin-overview/admin-overview.module';
+import { GfAdminPlatformModule } from '@ghostfolio/client/components/admin-platform/admin-platform.module';
 import { GfAdminUsersModule } from '@ghostfolio/client/components/admin-users/admin-users.module';
-import { GfAdminPlatformModule } from '@ghostfolio/client/components/platform/platform.module';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 
 import { AdminPageRoutingModule } from './admin-page-routing.module';