Implemented delete and update of platform

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

@@ -49,18 +49,38 @@
             </td>
           </ng-container>
 
+          <ng-container matColumnDef="actions">
+            <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-vertical"></ion-icon>
+              </button>
+              <mat-menu #platformMenu="matMenu" xPosition="before">
+                <button mat-menu-item (click)="onUpdatePlatform(element)">
+                  <ion-icon class="mr-2" name="create-outline"></ion-icon>
+                  <span i18n>Edit</span>
+                </button>
+                <button mat-menu-item (click)="deletePlatform(element.id)">
+                  <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                  <span i18n>Delete</span>
+                </button>
+              </mat-menu>
+            </td>
+            <td *matFooterCellDef class="px-1" mat-footer-cell></td>
+          </ng-container>
+
           <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-          <tr
-            *matRowDef="let row; columns: displayedColumns"
-            class="cursor-pointer"
-            mat-row
-            (click)="
-              onOpenAssetProfileDialog({
-                dataSource: row.dataSource,
-                symbol: row.symbol
-              })
-            "
-          ></tr>
+          <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
         </table>
       </div>
     </div>

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

@@ -7,6 +7,7 @@ import {
 } from '@angular/core';
 import { MatSort } from '@angular/material/sort';
 import { CreatePlatformDto } from '@ghostfolio/api/app/platform/create-platform.dto';
+import { UpdatePlatformDto } from '@ghostfolio/api/app/platform/update-platform.dto';
 
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -30,7 +31,7 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 export class AdminPlatformComponent implements OnInit, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
 
-  public displayedColumns = ['id', 'name', 'url'];
+  public displayedColumns = ['id', 'name', 'url', 'actions'];
 
   public platforms: PlatformModel[];
   public deviceType: string;
@@ -69,7 +70,7 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
               return id === params['platformId'];
             });
 
-            // this.openUpdateAccountDialog(account);
+            this.openUpdatePlatformDialog(platform);
           } else {
             this.router.navigate(['.'], { relativeTo: this.route });
           }
@@ -114,6 +115,28 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
     this.unsubscribeSubject.complete();
   }
 
+  public onUpdatePlatform(aPlatform: PlatformModel) {
+    this.router.navigate([], {
+      queryParams: { platformId: aPlatform.id, editDialog: true }
+    });
+  }
+
+  public deletePlatform(aId: string) {
+    this.dataService
+      .deletePlatform(aId)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe({
+        next: () => {
+          this.userService
+            .get(true)
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe();
+
+          this.fetchPlatforms();
+        }
+      });
+  }
+
   private fetchPlatforms() {
     this.dataService
       .fetchPlatforms()
@@ -163,4 +186,44 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
         this.router.navigate(['.'], { relativeTo: this.route });
       });
   }
+
+  private openUpdatePlatformDialog({ id, name, url }) {
+    const dialogRef = this.dialog.open(CreateOrUpdatePlatformDialog, {
+      data: {
+        platform: {
+          id: id,
+          name: name,
+          url: url
+        }
+      },
+
+      height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        const platform: UpdatePlatformDto = data?.platform;
+
+        if (platform) {
+          this.dataService
+            .putPlatform(platform)
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe({
+              next: () => {
+                this.userService
+                  .get(true)
+                  .pipe(takeUntil(this.unsubscribeSubject))
+                  .subscribe();
+
+                this.fetchPlatforms();
+              }
+            });
+        }
+
+        this.router.navigate(['.'], { relativeTo: this.route });
+      });
+  }
 }

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

@@ -6,6 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { GfCreateOrUpdatePlatformDialogModule } from './create-or-update-platform-dialog/create-or-update-platform-dialog.module';
+import { MatMenuModule } from '@angular/material/menu';
 
 @NgModule({
   declarations: [AdminPlatformComponent],
@@ -15,6 +16,7 @@ import { GfCreateOrUpdatePlatformDialogModule } from './create-or-update-platfor
     MatButtonModule,
     MatSortModule,
     MatTableModule,
+    MatMenuModule,
     GfCreateOrUpdatePlatformDialogModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

apps/client/src/app/services/data.service.ts

@@ -7,6 +7,7 @@ import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { Activities } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
 import { CreatePlatformDto } from '@ghostfolio/api/app/platform/create-platform.dto';
+import { UpdatePlatformDto } from '@ghostfolio/api/app/platform/update-platform.dto';
 import { PortfolioPositionDetail } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-position-detail.interface';
 import { PortfolioPositions } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-positions.interface';
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
@@ -151,6 +152,10 @@ export class DataService {
     return this.http.delete<any>(`/api/v1/account/${aId}`);
   }
 
+  public deletePlatform(aId: string) {
+    return this.http.delete<any>(`/api/v1/platform/${aId}`);
+  }
+
   public deleteAllOrders() {
     return this.http.delete<any>(`/api/v1/order/`);
   }
@@ -426,6 +431,13 @@ export class DataService {
     return this.http.put<UserItem>(`/api/v1/account/${aAccount.id}`, aAccount);
   }
 
+  public putPlatform(aPlatform: UpdatePlatformDto) {
+    return this.http.put<UserItem>(
+      `/api/v1/platform/${aPlatform.id}`,
+      aPlatform
+    );
+  }
+
   public putAdminSetting(key: string, aData: PropertyDto) {
     return this.http.put<void>(`/api/v1/admin/settings/${key}`, aData);
   }