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,20 +90,14 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
     this.fetchPlatforms();
   }
 
-  public deletePlatform(aId: string) {
-    this.adminService
-      .deletePlatform(aId)
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe({
-        next: () => {
-          this.userService
-            .get(true)
-            .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe();
+  public onDeletePlatform(aId: string) {
+    const confirmation = confirm(
+      $localize`Do you really want to delete this platform?`
+    );
 
-          this.fetchPlatforms();
+    if (confirmation) {
+      this.deletePlatform(aId);
     }
-      });
   }
 
   public onUpdatePlatform(aPlatform: PlatformModel) {
@@ -117,6 +111,22 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
     this.unsubscribeSubject.complete();
   }
 
+  private deletePlatform(aId: string) {
+    this.adminService
+      .deletePlatform(aId)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe({
+        next: () => {
+          this.userService
+            .get(true)
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe();
+
+          this.fetchPlatforms();
+        }
+      });
+  }
+
   private fetchPlatforms() {
     this.adminService
       .fetchPlatforms()