Introduce admin settings

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

@@ -92,15 +92,15 @@
     </div>
   </div>
 
-  <div *ngIf="hasPermissionToCreatePlatform" class="fab-container">
+  <div *ngIf="hasPermissionToCreatePlatform">
     <a
-      class="align-items-center d-flex justify-content-center"
       color="primary"
-      mat-fab
+      i18n
+      mat-button
       [queryParams]="{ createDialog: true }"
       [routerLink]="[]"
     >
-      <ion-icon name="add-outline" size="large"></ion-icon>
+      Add Platform
     </a>
   </div>
 </div>

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

@@ -2,11 +2,4 @@
 
 :host {
   display: block;
-
-  .fab-container {
-    position: fixed;
-    right: 2rem;
-    bottom: 4rem;
-    z-index: 999;
-  }
 }

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

@@ -22,7 +22,6 @@ import { Subject, takeUntil } from 'rxjs';
 import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog/create-or-update-account-platform.component';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-admin-platform',
   styleUrls: ['./admin-platform.component.scss'],
   templateUrl: './admin-platform.component.html'

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

@@ -7,8 +7,8 @@ import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 
+import { AdminPlatformComponent } from './admin-platform.component';
 import { GfCreateOrUpdatePlatformDialogModule } from './create-or-update-platform-dialog/create-or-update-platform-dialog.module';
-import { AdminPlatformComponent } from './platform.component';
 
 @NgModule({
   declarations: [AdminPlatformComponent],

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

@@ -0,0 +1,13 @@
+<div class="container">
+  <div class="mb-5 row">
+    <div class="col">
+      <h3 class="text-center" i18n>Platforms</h3>
+      <gf-admin-platform></gf-admin-platform>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <h3 class="text-center" i18n>Tags</h3>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+@import 'apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+}

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

@@ -0,0 +1,21 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-admin-settings',
+  styleUrls: ['./admin-settings.component.scss'],
+  templateUrl: './admin-settings.component.html'
+})
+export class AdminSettingsComponent implements OnInit, OnDestroy {
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor() {}
+
+  public ngOnInit() {}
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { GfAdminPlatformModule } from '@ghostfolio/client/components/admin-platform/admin-platform.module';
+
+import { AdminSettingsComponent } from './admin-settings.component';
+
+@NgModule({
+  declarations: [AdminSettingsComponent],
+  imports: [CommonModule, GfAdminPlatformModule, RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAdminSettingsModule {}

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

@@ -3,7 +3,7 @@ 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 { AdminSettingsComponent } from '@ghostfolio/client/components/admin-settings/admin-settings.component';
 import { AdminUsersComponent } from '@ghostfolio/client/components/admin-users/admin-users.component';
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 
@@ -25,15 +25,15 @@ const routes: Routes = [
         component: AdminOverviewComponent,
         title: $localize`Admin Control`
       },
+      {
+        path: 'settings',
+        component: AdminSettingsComponent,
+        title: $localize`Settings`
+      },
       {
         path: 'users',
         component: AdminUsersComponent,
         title: $localize`Users`
-      },
-      {
-        path: 'platforms',
-        component: AdminPlatformComponent,
-        title: $localize`Platforms`
       }
     ],
     component: AdminPageComponent,

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

@@ -30,18 +30,18 @@ export class AdminPageComponent implements OnDestroy, OnInit {
         label: $localize`Overview`,
         path: 'overview'
       },
-      { iconName: 'people-outline', label: $localize`Users`, path: 'users' },
       {
-        iconName: 'briefcase-outline',
-        label: $localize`Platforms`,
-        path: 'platforms'
+        iconName: 'settings-outline',
+        label: $localize`Settings`,
+        path: 'settings'
       },
       {
         iconName: 'server-outline',
         label: $localize`Market Data`,
         path: 'market-data'
       },
-      { iconName: 'flash-outline', label: $localize`Jobs`, path: 'jobs' }
+      { iconName: 'flash-outline', label: $localize`Jobs`, path: 'jobs' },
+      { iconName: 'people-outline', label: $localize`Users`, path: 'users' }
     ];
   }
 

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

@@ -4,7 +4,7 @@ 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 { GfAdminSettingsModule } from '@ghostfolio/client/components/admin-settings/admin-settings.module';
 import { GfAdminUsersModule } from '@ghostfolio/client/components/admin-users/admin-users.module';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 
@@ -20,7 +20,7 @@ import { AdminPageComponent } from './admin-page.component';
     GfAdminJobsModule,
     GfAdminMarketDataModule,
     GfAdminOverviewModule,
-    GfAdminPlatformModule,
+    GfAdminSettingsModule,
     GfAdminUsersModule,
     MatTabsModule
   ],

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

@@ -14,6 +14,7 @@
     gf-admin-jobs,
     gf-admin-market-data,
     gf-admin-overview,
+    gf-admin-settings,
     gf-admin-users {
       flex: 1 1 auto;
       overflow-y: auto;