Remove id column, add confirmation dialog on delete

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

@@ -5,27 +5,10 @@
         class="gf-table w-100"
         mat-table
         matSort
-        matSortActive="id"
+        matSortActive="name"
         matSortDirection="asc"
         [dataSource]="dataSource"
       >
-        <ng-container matColumnDef="id">
-          <th
-            *matHeaderCellDef
-            class="px-1"
-            mat-header-cell
-            mat-sort-header="id"
-          >
-            <ng-container i18n>Id</ng-container>
-          </th>
-          <td *matCellDef="let element" class="px-1" mat-cell>
-            <span class="d-none d-sm-inline-block">{{ element.id }}</span>
-            <span class="d-inline-block d-sm-none">{{
-              (element.id | slice : 0 : 5) + '...'
-            }}</span>
-          </td>
-        </ng-container>
-
         <ng-container matColumnDef="name">
           <th
             *matHeaderCellDef
@@ -81,7 +64,7 @@
                 <ion-icon class="mr-2" name="create-outline"></ion-icon>
                 <span i18n>Edit</span>
               </button>
-              <button mat-menu-item (click)="deletePlatform(element.id)">
+              <button mat-menu-item (click)="onDeletePlatform(element.id)">
                 <ion-icon class="mr-2" name="trash-outline"></ion-icon>
                 <span i18n>Delete</span>
               </button>

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

@@ -30,7 +30,7 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
 
   public dataSource: MatTableDataSource<Platform> = new MatTableDataSource();
   public deviceType: string;
-  public displayedColumns = ['id', 'name', 'url', 'actions'];
+  public displayedColumns = ['name', 'url', 'actions'];
   public hasPermissionToCreatePlatform: boolean;
   public hasPermissionToDeletePlatform: boolean;
   public platforms: PlatformModel[];
@@ -90,7 +90,28 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
     this.fetchPlatforms();
   }
 
-  public deletePlatform(aId: string) {
+  public onDeletePlatform(aId: string) {
+    const confirmation = confirm(
+      $localize`Do you really want to delete this platform?`
+    );
+
+    if (confirmation) {
+      this.deletePlatform(aId);
+    }
+  }
+
+  public onUpdatePlatform(aPlatform: PlatformModel) {
+    this.router.navigate([], {
+      queryParams: { platformId: aPlatform.id, editDialog: true }
+    });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private deletePlatform(aId: string) {
     this.adminService
       .deletePlatform(aId)
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -106,17 +127,6 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
       });
   }
 
-  public onUpdatePlatform(aPlatform: PlatformModel) {
-    this.router.navigate([], {
-      queryParams: { platformId: aPlatform.id, editDialog: true }
-    });
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
   private fetchPlatforms() {
     this.adminService
       .fetchPlatforms()